mrmo/caf-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial site version

Browse Source
This commit is contained in:
Line INK
2026-08-15 21:48:44 +03:00
commit ecae6f7803
42 changed files with 8965 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

802
program-gymnastics.html Normal file
View File

@@ -0,0 +1,802 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الجمباز للأطفال — أكاديمية الكاف الرياضية</title>
<meta name="description" content="برنامج الجمباز للأطفال من 4 إلى 12 سنة في أكاديمية الكاف الرياضية بالرياض — مرونة وتوازن وقوة بإشراف مدربات متخصصات.">
<link rel="icon" type="image/png" href="caf-logo.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="ar_SA">
<meta property="og:title" content="الجمباز للأطفال — أكاديمية الكاف الرياضية">
<meta property="og:description" content="برنامج الجمباز للأطفال من 4 إلى 12 سنة في أكاديمية الكاف الرياضية بالرياض — مرونة وتوازن وقوة بإشراف مدربات متخصصات.">
<meta property="og:image" content="caf-logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--navy:#342B4A; /* deep purple — sampled from logo */
--navy-deep:#1C1730; /* deepest purple/black — from logo shadow tones */
--orange:#B8923E; /* refined antique gold — brightened from logo for UI legibility */
--gold:#8F703A; /* raw brand gold — exact logo sample */
--gold-light:#E8D6A8; /* light gold tint for subtle fills */
--bg:#F7F5F1; /* warm off-white, echoes the gold warmth */
--surface:#EFEBE3;
--text:#221C33;
--gray:#6E6579;
--green:#B8923E; /* CTA color now uses brand gold, not an invented green */
--white:#FFFFFF;
--black:#0A0A0C;
--radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:'Cairo',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}
.num{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block;}
h1,h2,h3{font-family:'Cairo',sans-serif;font-weight:800;color:var(--navy);}
.section-title{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px;}
.section-lead{color:var(--gray);font-size:16px;max-width:620px;margin-bottom:44px;}
.btn{
display:inline-flex;align-items:center;gap:10px;
font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;
padding:15px 30px;border-radius:100px;border:none;cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px -8px rgba(46,204,113,.55);}
.btn-primary:hover{box-shadow:0 14px 30px -8px rgba(46,204,113,.7);}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-navy{background:var(--navy);color:#fff;}
/* ===== HEADER ===== */
header{
position:sticky;top:0;z-index:50;
background:rgba(247,249,252,.85);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(11,36,71,.08);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:var(--navy);}
.logo-badge{
width:46px;height:46px;border-radius:10px;
background:var(--black);
display:flex;align-items:center;justify-content:center;overflow:hidden;
flex-shrink:0;
}
.logo-badge img{width:100%;height:100%;object-fit:contain;padding:2px;}
nav ul{display:flex;gap:34px;font-weight:600;font-size:15px;}
nav a{position:relative;color:var(--text);transition:color .2s;}
nav a:hover{color:var(--orange);}
.header-cta{display:flex;align-items:center;gap:14px;}
.burger{display:none;}
/* ===== HERO ===== */
.hero{
position:relative;color:#fff;overflow:hidden;
background:
radial-gradient(1100px 500px at 85% -10%, rgba(255,107,53,.35), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(255,193,69,.22), transparent 60%),
linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #4A3D66 100%);
padding:96px 0 110px;
}
.hero::after{
content:"";position:absolute;inset:0;opacity:.10;
background-image:
repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 34px);
pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
padding:8px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:22px;
}
.hero-eyebrow span.dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
.hero h1{
font-size:clamp(34px,4.6vw,56px);color:#fff;line-height:1.28;font-weight:900;margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.78);max-width:520px;margin-bottom:34px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
.hero-meta{display:flex;gap:30px;flex-wrap:wrap;}
.hero-meta div{display:flex;flex-direction:column;gap:2px;}
.hero-meta .n{font-family:'Poppins';font-weight:800;font-size:26px;color:var(--gold);}
.hero-meta .l{font-size:12.5px;color:rgba(255,255,255,.65);}
/* Hero visual: signature element = the real crest, glowing, with a couple of orbiting sport marks */
.hero-visual{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}
.crest-glow{
position:absolute;width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle, rgba(184,146,62,.30), transparent 68%);
filter:blur(4px);
}
.crest-main{
position:relative;width:300px;height:300px;object-fit:contain;
filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
animation:crestFloat 7s ease-in-out infinite;
}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion: reduce){.crest-main{animation:none;}}
.badge-orbit{position:absolute;inset:0;}
.sport-badge{
position:absolute;width:96px;height:96px;border-radius:26px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
animation:float 6s ease-in-out infinite;
}
.sport-badge svg{width:44px;height:44px;}
.sport-badge.b1{top:6%;right:8%;animation-delay:0s;background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.4);}
.sport-badge.b2{top:34%;right:46%;animation-delay:.6s;background:rgba(255,193,69,.18);border-color:rgba(255,193,69,.4);width:120px;height:120px;}
.sport-badge.b2 svg{width:56px;height:56px;}
.sport-badge.b3{top:2%;right:52%;animation-delay:1.1s;}
.sport-badge.b4{bottom:12%;right:4%;animation-delay:1.6s;}
.sport-badge.b5{bottom:2%;right:38%;animation-delay:2.1s;}
.sport-badge.b6{top:52%;right:2%;animation-delay:2.6s;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion: reduce){.sport-badge{animation:none;}}
/* ===== TRUST BAR ===== */
.trust{background:var(--navy);padding:22px 0;}
.trust .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.85);}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;}
.trust-item svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;}
section{padding:96px 0;}
.alt{background:var(--surface);}
/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.about-visual{
aspect-ratio:1/1;border-radius:28px;
background:linear-gradient(160deg,var(--navy) 0%, #4A3D66 100%);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.about-visual .quote{color:#fff;text-align:center;padding:40px;font-weight:800;font-size:24px;position:relative;z-index:2;}
.about-visual::before{
content:"";position:absolute;width:340px;height:340px;border-radius:50%;
border:1px dashed rgba(255,255,255,.25);top:50%;left:50%;transform:translate(-50%,-50%);
}
.about-visual::after{
content:"";position:absolute;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle, rgba(255,193,69,.35), transparent 70%);
top:20%;right:-40px;
}
.about-list{margin-top:26px;display:grid;gap:14px;}
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text);}
.about-list svg{width:22px;height:22px;color:var(--green);flex-shrink:0;margin-top:2px;}
/* ===== PROGRAMS ===== */
.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.program-card{
background:#fff;border-radius:var(--radius);padding:30px 26px;
border:1px solid rgba(11,36,71,.07);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
cursor:pointer;position:relative;overflow:hidden;
}
.program-card::before{
content:"";position:absolute;top:0;right:0;width:100%;height:4px;
background:var(--accent,var(--orange));
}
.program-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(11,36,71,.35);border-color:transparent;}
.program-icon{
width:58px;height:58px;border-radius:16px;margin-bottom:18px;
display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb, var(--accent,var(--orange)) 14%, white);
}
.program-icon svg{width:30px;height:30px;color:var(--accent,var(--orange));}
.program-card h3{font-size:19px;margin-bottom:8px;}
.program-card p{font-size:14px;color:var(--gray);margin-bottom:16px;}
.program-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.tag{font-size:11.5px;font-weight:700;background:var(--surface);color:var(--navy);padding:5px 10px;border-radius:100px;}
.program-link{font-size:13.5px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px;}
.program-link svg{width:15px;height:15px;transition:transform .2s;}
.program-card:hover .program-link svg{transform:translateX(-4px);}
/* ===== WHY US ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px;}
.why-item{display:flex;gap:16px;}
.why-icon{
width:52px;height:52px;border-radius:14px;flex-shrink:0;
background:var(--navy);display:flex;align-items:center;justify-content:center;
}
.why-icon svg{width:26px;height:26px;color:var(--gold);}
.why-item h4{font-size:16.5px;margin-bottom:6px;color:var(--navy);}
.why-item p{font-size:13.8px;color:var(--gray);}
/* ===== STATS (signature: badge path) ===== */
.stats-section{
background:linear-gradient(160deg,var(--navy-deep), var(--navy));
position:relative;overflow:hidden;
}
.stats-path{display:flex;justify-content:space-between;align-items:center;position:relative;}
.stats-path::before{
content:"";position:absolute;top:38px;right:8%;left:8%;height:2px;
background:repeating-linear-gradient(90deg, rgba(255,193,69,.5) 0 10px, transparent 10px 20px);
z-index:0;
}
.stat{position:relative;z-index:1;text-align:center;flex:1;}
.stat-badge{
width:76px;height:76px;border-radius:50%;margin:0 auto 18px;
background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--orange) 60%);
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 6px rgba(255,193,69,.15);
}
.stat-badge svg{width:32px;height:32px;color:var(--navy);}
.stat .n{font-family:'Poppins';font-size:38px;font-weight:800;color:#fff;}
.stat .l{font-size:13.5px;color:rgba(255,255,255,.65);margin-top:4px;}
/* ===== TESTIMONIALS ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid rgba(11,36,71,.07);}
.stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:14px;}
.testi-card p.txt{font-size:14.5px;color:var(--text);margin-bottom:20px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.avatar{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Poppins';
}
.testi-person .name{font-weight:700;font-size:14px;color:var(--navy);}
.testi-person .role{font-size:12px;color:var(--gray);}
/* ===== FINAL CTA ===== */
.final-cta{
background:linear-gradient(120deg,var(--black) 0%, var(--navy-deep) 55%, var(--navy) 100%);
border:1px solid rgba(184,146,62,.35);
border-radius:32px;padding:64px 50px;text-align:center;position:relative;overflow:hidden;
margin:0 24px;
}
.final-cta::before{
content:"";position:absolute;width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle, rgba(184,146,62,.18), transparent 70%);top:-180px;left:-100px;
}
.final-cta h2{color:#fff;font-size:clamp(24px,3.2vw,34px);margin-bottom:14px;}
.final-cta p{color:rgba(255,255,255,.72);margin-bottom:30px;font-size:15.5px;}
/* ===== FOOTER ===== */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px;}
.footer-col h5{color:#fff;font-size:15px;margin-bottom:16px;}
.footer-col ul{display:grid;gap:10px;font-size:13.5px;}
.footer-col ul a:hover{color:var(--gold);}
.footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;font-size:18px;margin-bottom:14px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;font-size:12.5px;flex-wrap:wrap;gap:10px;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (max-width:920px){
nav, .header-cta .btn-outline{display:none;}
.hero-grid{grid-template-columns:1fr;}
.hero-visual{height:260px;}
.about-grid{grid-template-columns:1fr;}
.programs-grid, .why-grid, .testi-grid{grid-template-columns:1fr 1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
.stats-path{flex-wrap:wrap;gap:26px;}
.stats-path::before{display:none;}
}
@media (max-width:600px){
.programs-grid, .why-grid, .testi-grid, .footer-grid{grid-template-columns:1fr;}
.hero{padding:64px 0 80px;}
.final-cta{padding:44px 24px;margin:0;}
}
.mobile-sticky{
display:none;position:fixed;bottom:0;right:0;left:0;z-index:60;
background:#fff;box-shadow:0 -8px 24px rgba(11,36,71,.12);padding:12px 18px;
}
@media (max-width:600px){.mobile-sticky{display:flex;}}
.mobile-sticky .btn-primary{width:100%;justify-content:center;}
/* ===== PROGRAM PAGE ADDITIONS ===== */
.breadcrumb{background:var(--surface);padding:16px 0;font-size:13px;color:var(--gray);}
.breadcrumb a{color:var(--gray);}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{margin:0 8px;opacity:.6;}
.breadcrumb .current{color:var(--navy);font-weight:700;}
.program-banner{
position:relative;color:#fff;overflow:hidden;padding:70px 0 60px;
background:
radial-gradient(900px 420px at 88% -10%, rgba(184,146,62,.28), transparent 60%),
linear-gradient(155deg, var(--black) 0%, var(--navy-deep) 45%, var(--navy) 100%);
}
.program-banner::after{
content:"";position:absolute;inset:0;opacity:.08;
background-image:repeating-linear-gradient(45deg,#fff 0 2px, transparent 2px 34px);
pointer-events:none;
}
.banner-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;position:relative;}
.banner-icon{
width:88px;height:88px;border-radius:24px;margin-bottom:22px;
background:rgba(184,146,62,.16);border:1px solid rgba(184,146,62,.4);
display:flex;align-items:center;justify-content:center;
}
.banner-icon svg{width:44px;height:44px;color:var(--orange);}
.program-banner h1{color:#fff;font-size:clamp(30px,4vw,46px);margin-bottom:16px;}
.program-banner p.lead{color:rgba(255,255,255,.75);font-size:16.5px;max-width:520px;margin-bottom:30px;}
.banner-visual{
aspect-ratio:1/1;border-radius:28px;position:relative;overflow:hidden;
background:radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
display:flex;align-items:center;justify-content:center;
}
.banner-visual svg{width:46%;height:46%;color:rgba(184,146,62,.55);}
.quickfacts{background:var(--navy-deep);padding:0;}
.quickfacts .container{display:flex;justify-content:space-between;flex-wrap:wrap;}
.qf-item{flex:1;min-width:150px;padding:22px 16px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.08);}
.qf-item:first-child{border-inline-start:none;}
.qf-item .n{font-family:'Poppins';font-weight:800;font-size:20px;color:var(--orange);display:block;margin-bottom:4px;}
.qf-item .l{font-size:12.5px;color:rgba(255,255,255,.6);}
.desc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.desc-visual{
aspect-ratio:3/4;border-radius:24px;
background:linear-gradient(150deg, var(--navy) 0%, #4A3D66 100%);
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.desc-visual svg{width:34%;height:34%;color:rgba(255,255,255,.4);}
.audience-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
.audience-pill{
display:flex;align-items:center;gap:8px;background:var(--surface);
padding:10px 16px;border-radius:100px;font-size:13.5px;font-weight:700;color:var(--navy);
}
.audience-pill svg{width:16px;height:16px;color:var(--orange);}
/* Level path timeline */
.level-path{display:flex;justify-content:space-between;position:relative;margin-top:20px;}
.level-path::before{
content:"";position:absolute;top:34px;right:6%;left:6%;height:2px;
background:repeating-linear-gradient(90deg, rgba(184,146,62,.5) 0 10px, transparent 10px 20px);
z-index:0;
}
.level{position:relative;z-index:1;text-align:center;flex:1;padding:0 8px;}
.level-dot{
width:68px;height:68px;border-radius:50%;margin:0 auto 16px;
background:#fff;border:3px solid var(--orange);
display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800;font-family:'Poppins';
box-shadow:0 10px 24px -12px rgba(11,36,71,.3);
}
.level h4{font-size:14.5px;margin-bottom:4px;color:var(--navy);}
.level p{font-size:12px;color:var(--gray);}
.components-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.component-card{background:#fff;border-radius:16px;padding:22px 16px;text-align:center;border:1px solid rgba(11,36,71,.07);}
.component-card .ci{
width:48px;height:48px;border-radius:14px;margin:0 auto 14px;
background:var(--surface);display:flex;align-items:center;justify-content:center;
}
.component-card .ci svg{width:24px;height:24px;color:var(--orange);}
.component-card h5{font-size:13.5px;margin-bottom:4px;color:var(--navy);}
.component-card p{font-size:12px;color:var(--gray);}
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.skill-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(11,36,71,.07);border-radius:14px;padding:16px 18px;}
.skill-item svg{width:22px;height:22px;color:var(--orange);flex-shrink:0;}
.skill-item span{font-size:14.5px;font-weight:700;color:var(--navy);}
.coach-card{
display:flex;align-items:center;gap:26px;background:#fff;border-radius:24px;padding:30px;
border:1px solid rgba(11,36,71,.07);
}
.coach-avatar{
width:100px;height:100px;border-radius:20px;flex-shrink:0;
background:linear-gradient(150deg,var(--navy),#4A3D66);
display:flex;align-items:center;justify-content:center;color:var(--orange);font-family:'Poppins';font-weight:800;font-size:26px;
}
.coach-card h4{font-size:19px;margin-bottom:4px;color:var(--navy);}
.coach-card .role{color:var(--orange);font-size:13.5px;font-weight:700;margin-bottom:10px;}
.coach-card p{font-size:14px;color:var(--gray);}
.faq-item{border-bottom:1px solid rgba(11,36,71,.1);}
.faq-q{
display:flex;justify-content:space-between;align-items:center;
padding:22px 4px;cursor:pointer;font-weight:700;font-size:15.5px;color:var(--navy);
}
.faq-q svg{width:20px;height:20px;color:var(--orange);transition:transform .25s ease;flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{padding:0 4px 22px;font-size:14px;color:var(--gray);}
.dual-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}
.price-chip{
display:inline-flex;align-items:baseline;gap:6px;background:var(--surface);
padding:14px 22px;border-radius:14px;
}
.price-chip .amt{font-family:'Poppins';font-weight:800;font-size:22px;color:var(--navy);}
.price-chip .per{font-size:12.5px;color:var(--gray);}
@media (max-width:920px){
.banner-grid, .desc-grid{grid-template-columns:1fr;}
.quickfacts .container{flex-wrap:wrap;}
.qf-item{flex:1 1 50%;border-inline-start:none;border-top:1px solid rgba(255,255,255,.08);}
.components-grid{grid-template-columns:repeat(2,1fr);}
.level-path{flex-wrap:wrap;gap:20px;}
.level-path::before{display:none;}
}
@media (max-width:600px){
.skills-grid{grid-template-columns:1fr;}
.components-grid{grid-template-columns:1fr 1fr;}
.coach-card{flex-direction:column;text-align:center;}
}
</style>
<!-- prog-slider-css -->
<style>
.prog-slider{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;}
.prog-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:0;transform:scale(1);transition:opacity 1s cubic-bezier(.4,0,.2,1);}
.prog-slider img.active{opacity:1;z-index:1;}
.prog-slider img.kb{animation:progKenBurns 5.5s ease-out forwards;}
@keyframes progKenBurns{from{transform:scale(1);}to{transform:scale(1.08);}}
.prog-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.prog-nav:hover{transform:translateY(-50%) scale(1.12);background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.28);}
.prog-nav:active{transform:translateY(-50%) scale(.95);}
.prog-nav.prev{right:14px;}
.prog-nav.next{left:14px;}
.prog-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5;}
.prog-dot{width:8px;height:8px;border-radius:4px;background:#fff;opacity:.5;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:width .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;border:none;padding:0;}
.prog-dot.active{width:24px;opacity:1;}
@media (prefers-reduced-motion: reduce){ .prog-slider img.kb{animation:none;} }
</style>
</head>
<body>
<header>
<div class="container nav-wrap">
<a href="homepage-prototype.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف</a>
<nav>
<ul>
<li><a href="homepage-prototype.html#programs">البرامج</a></li>
<li><a href="page-about.html">من نحن</a></li>
<li><a href="homepage-prototype.html#stats">إنجازاتنا</a></li>
<li><a href="homepage-prototype.html#testimonials">آراء الأهالي</a></li>
<li><a href="#contact">تواصل</a></li>
</ul>
</nav>
<div class="header-cta">
<a href="#contact" class="btn btn-outline" style="color:var(--navy);border-color:rgba(11,36,71,.3);">اتصل بنا</a>
<a href="#trial" class="btn btn-primary">حجز حصة تجريبية</a>
</div>
</div>
</header>
<div class="breadcrumb">
<div class="container">
<a href="homepage-prototype.html">الرئيسية</a><span class="sep">/</span><a href="homepage-prototype.html#programs">البرامج</a><span class="sep">/</span><span class="current">الجمباز</span>
</div>
</div>
<section class="program-banner">
<div class="container banner-grid">
<div>
<div class="banner-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M5 21l4-9 3 2 3-2 4 9M9 12L6 7M15 12l3-5"/></svg></div>
<div class="hero-eyebrow"><span class="dot"></span> الفئة العمرية 4–12 سنة</div>
<h1>الجمباز للأطفال</h1>
<p class="lead">برنامج يبني المرونة والتوازن وقوة الجسم من سن مبكرة، بإشراف مدربات متخصصات وبيئة تدريب آمنة مجهّزة بالكامل.</p>
<div class="dual-cta">
<a href="#contact" class="btn btn-primary">احجز حصة تجريبية مجانية</a>
<a href="https://wa.me/966559695266" class="btn btn-outline" target="_blank" rel="noopener">تواصل عبر واتساب</a>
</div>
</div>
<div class="banner-visual" style="background:url(images/gymnastics-1.jpg); background-size:cover; background-position:center;"></div>
</div>
</section>
<div class="quickfacts">
<div class="container">
<div class="qf-item"><span class="n">4–12</span><span class="l">الفئة العمرية</span></div><div class="qf-item"><span class="n">45–60</span><span class="l">دقيقة لكل حصة</span></div><div class="qf-item"><span class="n">2</span><span class="l">حصة أسبوعيًا</span></div><div class="qf-item"><span class="n">4</span><span class="l">مستويات تدرّج</span></div>
</div>
</div>
<section id="desc">
<div class="container desc-grid">
<div class="reveal">
<div class="eyebrow">نظرة عامة</div>
<h2 class="section-title">الهدف من البرنامج</h2>
<p style="color:var(--gray);font-size:15.5px;">برنامج يبني المرونة والتوازن وقوة الجسم من سن مبكرة، بإشراف مدربات متخصصات وبيئة تدريب آمنة مجهّزة بالكامل.</p>
<div class="audience-grid">
<div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مناسب للمبتدئين تمامًا</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مدربات متخصصات</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> معدات وحصائر أمان مخصَّصة</div>
</div>
</div>
<div class="desc-visual reveal">
<div class="prog-slider"><img src="images/gymnastics-1.jpg" alt="" class="active kb"><img src="images/gymnastics-2.jpg" alt="" class=""><button type="button" class="prog-nav prev" onclick="progSlide(-1)" aria-label="السابق"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="prog-nav next" onclick="progSlide(1)" aria-label="التالي"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></button><div class="prog-dots"><button type="button" class="prog-dot active" onclick="progSlideTo(0)" aria-label="صورة 1"></button><button type="button" class="prog-dot" onclick="progSlideTo(1)" aria-label="صورة 2"></button></div></div>
</div>
</div>
</section>
<section class="alt" id="levels">
<div class="container">
<div class="eyebrow">رحلة المستوى</div>
<h2 class="section-title">من الأساسيات إلى التآزر الحركي الكامل</h2>
<p class="section-lead">تدرّج يركّز على المرونة والتوازن أولًا، ثم القوة، ثم تركيب الحركات في سلاسل متكاملة.</p>
<div class="level-path">
<div class="level reveal"><div class="level-dot" style="background:#fff;">1</div><h4>الأساسيات</h4><p>الوعي الحركي والتوازن</p></div><div class="level reveal"><div class="level-dot" style="background:#F5DDEA;">2</div><h4>المرونة</h4><p>تمارين المرونة والإطالة</p></div><div class="level reveal"><div class="level-dot" style="background:#E3B8D6;">3</div><h4>التوازن والقوة</h4><p>حركات على الأجهزة الأساسية</p></div><div class="level reveal"><div class="level-dot" style="background:var(--navy);color:#fff;">4</div><h4>تركيب الحركات</h4><p>سلاسل حركية متكاملة</p></div>
</div>
</div>
</section>
<section id="components">
<div class="container">
<div class="eyebrow">مكونات الحصة</div>
<h2 class="section-title">كيف تسير حصة الجمباز</h2>
<div class="components-grid">
<div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
<h5>إحماء ومرونة</h5><p>12 دقيقة</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M5 21l4-9 3 2 3-2 4 9M9 12L6 7M15 12l3-5"/></svg></div>
<h5>تمارين توازن</h5><p>15 دقيقة</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
<h5>تمارين قوة أساسية</h5><p>15 دقيقة</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="5" r="2"/><path d="M5 21l4-9 3 2 3-2 4 9M9 12L6 7M15 12l3-5"/></svg></div>
<h5>تدريب على الأجهزة</h5><p>10 دقائق</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
<h5>تهدئة وإطالة</h5><p>8 دقائق</p>
</div>
</div>
</div>
</section>
<section class="alt" id="skills">
<div class="container">
<div class="eyebrow">المهارات المكتسبة</div>
<h2 class="section-title">ماذا يكتسب طفلك</h2>
<div class="skills-grid">
<div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>مرونة جسدية عالية</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>توازن وتناسق حركي</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>قوة عضلية أساسية</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>وعي بوضعية الجسم</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>الثقة بالنفس أمام المجموعة</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>الانضباط في اتباع التعليمات</span></div>
</div>
</div>
</section>
<section id="coach">
<div class="container">
<div class="eyebrow">المدرب المسؤول</div>
<h2 class="section-title">بإشراف مدرب معتمد</h2>
<div class="coach-card reveal">
<div class="coach-avatar">ن.ق</div>
<div>
<h4>الأستاذة نورة القحطاني</h4>
<div class="role">مدربة جمباز معتمدة — فئات الناشئين</div>
<p>متخصصة في تدريب الأطفال من سن 4 سنوات، بخبرة في بناء برامج مرونة وتوازن آمنة للفئات الصغيرة. (نموذج توضيحي — يُستبدل ببيانات المدرب الفعلي)</p>
<a href="page-coaches.html#coach-gymnastics" class="program-link" style="margin-top:14px;display:inline-flex;">عرض الملف الكامل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div>
</div>
</div>
</section>
<section class="alt" id="faq">
<div class="container" style="max-width:820px;">
<div class="eyebrow">أسئلة شائعة</div>
<h2 class="section-title">أسئلة أولياء الأمور الشائعة</h2>
<div class="faq-list" style="margin-top:20px;">
<div class="faq-item open">
<div class="faq-q">هل الجمباز آمن للأطفال الصغار؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>نعم، البرنامج مصمَّم خصيصًا للفئة العمرية 4–12 سنة بمعدات وحصائر أمان مخصَّصة وإشراف مباشر طوال الحصة.</p></div>
</div><div class="faq-item">
<div class="faq-q">هل يحتاج طفلي لمرونة سابقة؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>لا إطلاقًا، مرحلة 'الأساسيات' تبني المرونة والتوازن تدريجيًا من الصفر.</p></div>
</div><div class="faq-item">
<div class="faq-q">ما الزي المناسب لحصص الجمباز؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>يُفضَّل ملابس رياضية مرنة (ليقنز/تايتس) بدون إكسسوارات معدنية لضمان السلامة أثناء التمارين.</p></div>
</div><div class="faq-item">
<div class="faq-q">هل تُقام عروض أو مشاركات للأطفال؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>نعم، تُنظَّم عروض دورية داخلية لعرض تقدّم الأطفال أمام أولياء الأمور.</p></div>
</div>
</div>
</div>
</section>
<section id="trial">
<div class="container">
<div class="final-cta reveal">
<h2>جاهز يبدأ طفلك رحلته؟</h2>
<p>عبّي النموذج التالي وسيتواصل معك فريقنا لتأكيد حصة الجمباز التجريبية المجانية.</p>
<div class="price-chip" style="margin-top:20px;"><span class="amt">249</span><span class="per">ريال / شهريًا</span></div>
</div>
<div class="reveal" style="max-width:640px;margin:36px auto 0;background:#fff;border-radius:var(--radius);padding:36px 32px;box-shadow:0 20px 50px -30px rgba(11,36,71,.35);">
<form id="trialForm" onsubmit="return sendTrialRequest(event)">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">اسم ولي الأمر *</label>
<input type="text" id="tf-parent" required style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
</div>
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">رقم الجوال (واتساب) *</label>
<input type="tel" id="tf-phone" required placeholder="05xxxxxxxx" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">اسم الطفل وعمره</label>
<input type="text" id="tf-child" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
</div>
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">الرياضة المطلوبة</label>
<select id="tf-sport" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;background:#fff;">
<option value="كرة القدم">كرة القدم</option>
<option value="السباحة">السباحة</option>
<option value="الكاراتيه / التايكوندو">الكاراتيه / التايكوندو</option>
<option value="الجمباز" selected>الجمباز</option>
<option value="الكيك بوكسينغ">الكيك بوكسينغ</option>
<option value="باقة متعددة الأنشطة">باقة متعددة الأنشطة</option>
<option value="ذوي الهمم">ذوي الهمم</option>
</select>
</div>
</div>
<div style="margin-bottom:20px;">
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">ملاحظات (اختياري)</label>
<textarea id="tf-notes" rows="3" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;resize:vertical;"></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">إرسال الطلب عبر واتساب ←</button>
<p style="font-size:12px;color:var(--gray);text-align:center;margin-top:14px;">بالإرسال سيتم فتح واتساب برسالة جاهزة لتأكيد طلبك مباشرة مع الأكاديمية.</p>
</form>
</div>
</div>
</section>
<footer id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<div class="footer-logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف الرياضية</div>
<p style="font-size:13.5px;"><a href="https://www.google.com/maps/search/?api=1&query=%D9%85%D8%AF%D8%A7%D8%B1%D8%B3+%D8%A7%D9%84%D8%AD%D8%B2%D9%85+%D8%A7%D9%84%D8%A3%D9%87%D9%84%D9%8A%D8%A9+%D8%AD%D9%8A+%D8%A7%D9%84%D9%82%D8%AF%D8%B3+%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;">حي القدس – الرياض (مدارس الحزم الأهلية)</a></p>
<p style="font-size:13.5px;margin-top:6px;">"نصنع أبطال الغد، بخطوة اليوم"</p>
</div>
<div class="footer-col">
<h5>روابط سريعة</h5>
<ul>
<li><a href="homepage-prototype.html#programs">البرامج التدريبية</a></li>
<li><a href="page-about.html">من نحن</a></li>
<li><a href="page-pricing.html">الباقات والأسعار</a></li>
<li><a href="page-blog.html">المدونة</a></li>
<li><a href="page-coaches.html">فريق المدربين</a></li>
<li><a href="page-privacy.html">سياسة الخصوصية</a></li>
</ul>
</div>
<div class="footer-col">
<h5>ساعات العمل</h5>
<ul>
<li>السبت – الخميس</li>
<li>3:00م – 9:00م</li>
</ul>
</div>
<div class="footer-col">
<h5>تواصل معنا</h5>
<ul>
<li><a href="tel:+966559695266">0559695266</a></li>
<li><a href="mailto:Contact@caf-academy.com">Contact@caf-academy.com</a></li>
</ul>
<div style="display:flex;gap:10px;margin-top:16px;">
<a href="https://www.instagram.com/caf_sports2025" target="_blank" rel="noopener" aria-label="Instagram" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
<a href="https://www.tiktok.com/@caf_sports2025" target="_blank" rel="noopener" aria-label="TikTok" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M16.5 3c.3 2.1 1.7 3.6 3.9 3.9v3c-1.3 0-2.6-.4-3.7-1.2v6.4a5.7 5.7 0 1 1-5.7-5.7c.2 0 .5 0 .7.1v3.1a2.6 2.6 0 1 0 1.8 2.5V3h3z"/></svg></a>
<a href="https://www.snapchat.com/add/alsahari_2025" target="_blank" rel="noopener" aria-label="Snapchat" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2c3 0 4.7 2.3 4.8 5 0 1 0 2 .1 2.4.2.3.9.4 1.4.2.4-.1.9 0 1 .5.1.5-.2.9-.7 1.1-.3.1-.8.3-.8.6 0 .5.9 1.7 2.4 2.1.3.1.5.4.4.7-.2.7-1.4 1-2.2 1.1-.1.3-.2.7-.3 1-.1.3-.4.4-.7.4-.5 0-1-.1-1.6-.1-.9 0-1.4.6-2.9.6s-2-.6-2.9-.6c-.6 0-1.1.1-1.6.1-.3 0-.6-.1-.7-.4-.1-.3-.2-.7-.3-1-.8-.1-2-.4-2.2-1.1-.1-.3.1-.6.4-.7 1.5-.4 2.4-1.6 2.4-2.1 0-.3-.5-.5-.8-.6-.5-.2-.8-.6-.7-1.1.1-.5.6-.6 1-.5.5.2 1.2.1 1.4-.2.1-.4.1-1.4.1-2.4C7.3 4.3 9 2 12 2z"/></svg></a>
<a href="https://www.facebook.com/share/18RGgydYWL/" target="_blank" rel="noopener" aria-label="Facebook" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a>
<a href="https://www.youtube.com/@cafacademy" target="_blank" rel="noopener" aria-label="YouTube" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg></a>
<a href="https://wa.me/966559695266" target="_blank" rel="noopener" aria-label="WhatsApp" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M17.6 6.32A8.86 8.86 0 0 0 12.05 4a8.94 8.94 0 0 0-7.75 13.4L3 21l3.72-1.24a8.9 8.9 0 0 0 4.33 1.1h0a8.93 8.93 0 0 0 8.94-8.86 8.83 8.83 0 0 0-2.4-6.68zM12.05 19.4a7.4 7.4 0 0 1-3.78-1.04l-.27-.16-2.8.9.9-2.7-.18-.28a7.4 7.4 0 1 1 6.13 3.28zm4.07-5.53c-.22-.11-1.3-.64-1.5-.72s-.35-.11-.5.11-.58.72-.71.86-.26.16-.48.05a6.06 6.06 0 0 1-1.78-1.1 6.64 6.64 0 0 1-1.23-1.53c-.13-.22 0-.34.1-.45s.22-.26.33-.38a1.5 1.5 0 0 0 .22-.37.4.4 0 0 0 0-.38c-.05-.11-.5-1.2-.68-1.64s-.37-.38-.5-.38h-.43a.82.82 0 0 0-.6.28 2.5 2.5 0 0 0-.78 1.86 4.34 4.34 0 0 0 .91 2.3 9.94 9.94 0 0 0 3.8 3.36c.53.23.94.36 1.26.46a3 3 0 0 0 1.39.09 2.27 2.27 0 0 0 1.49-1.05 1.85 1.85 0 0 0 .13-1.05c-.05-.09-.2-.15-.42-.26z"/></svg></a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 أكاديمية الكاف الرياضية — جميع الحقوق محفوظة</span>
<span>تصميم: محمد الشيخ — <a href="https://wa.me/966566785756" target="_blank" rel="noopener" style="text-decoration:underline;">واتساب 0566785756</a></span>
</div>
</div>
</footer>
<div class="mobile-sticky">
<a href="#trial" class="btn btn-primary">احجز حصة تجريبية مجانية</a>
</div>
<script>
// scroll reveal
const reveals = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries)=>{
entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
},{threshold:.15});
reveals.forEach(r=>io.observe(r));
// counters
const counters = document.querySelectorAll('[data-count]');
const cio = new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if(e.isIntersecting){
const el = e.target;
const target = +el.dataset.count;
let cur = 0;
const step = Math.max(1, Math.ceil(target/40));
const t = setInterval(()=>{
cur += step;
if(cur >= target){ cur = target; clearInterval(t); }
el.textContent = cur;
}, 30);
cio.unobserve(el);
}
});
},{threshold:.6});
counters.forEach(c=>cio.observe(c));
</script>
<script>
function sendTrialRequest(e){
e.preventDefault();
var parent = document.getElementById('tf-parent').value.trim();
var phone = document.getElementById('tf-phone').value.trim();
var child = document.getElementById('tf-child').value.trim();
var sport = document.getElementById('tf-sport').value;
var notes = document.getElementById('tf-notes').value.trim();
var msg = 'مرحبًا أكاديمية الكاف، أرغب بحجز حصة تجريبية مجانية.\n';
msg += 'اسم ولي الأمر: ' + parent + '\n';
msg += 'رقم الجوال: ' + phone + '\n';
if(child) msg += 'الطفل: ' + child + '\n';
msg += 'الرياضة: ' + sport + '\n';
if(notes) msg += 'ملاحظات: ' + notes;
window.open('https://wa.me/966559695266?text=' + encodeURIComponent(msg), '_blank');
return false;
}
</script>
<script>
document.querySelectorAll('.faq-q').forEach(q=>{
q.addEventListener('click', ()=>{
const item = q.parentElement;
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(i=>i.classList.remove('open'));
if(!wasOpen) item.classList.add('open');
});
});
</script>
<script>
(function(){
const imgs = document.querySelectorAll('.prog-slider img');
const dots = document.querySelectorAll('.prog-dot');
let idx = 0;
function show(i){
imgs.forEach((img,n)=>{
img.classList.toggle('active', n===i);
if(n===i){ img.classList.remove('kb'); void img.offsetWidth; img.classList.add('kb'); }
else{ img.classList.remove('kb'); }
});
dots.forEach((d,n)=> d.classList.toggle('active', n===i));
idx = i;
}
window.progSlide = function(dir){
show((idx + dir + imgs.length) % imgs.length);
};
window.progSlideTo = function(i){ show(i); };
if(imgs.length > 1){
let timer = setInterval(()=>progSlide(1), 5000);
const wrap = document.querySelector('.prog-slider');
wrap.addEventListener('mouseenter', ()=>clearInterval(timer));
wrap.addEventListener('mouseleave', ()=>{ timer = setInterval(()=>progSlide(1), 5000); });
}
})();
</script>
</body>
</html>