950 lines
58 KiB
HTML
950 lines
58 KiB
HTML
<!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="تعرّف على أكاديمية الكاف الرياضية بالرياض: رؤيتنا، قيمنا، وفريق المدربين المتخصصين لكل رياضة.">
|
||
<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="تعرّف على أكاديمية الكاف الرياضية بالرياض: رؤيتنا، قيمنا، وفريق المدربين المتخصصين لكل رياضة.">
|
||
<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&family=Aref+Ruqaa:wght@700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--navy:#18253A; /* navy blue — sampled from the new logo */
|
||
--navy-deep:#071A38; /* deepest navy — from the new logo shield fill */
|
||
--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(24,37,58,.82);backdrop-filter:blur(10px);
|
||
border-bottom:1px solid rgba(255,255,255,.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:#fff;}
|
||
.logo-badge{
|
||
width:60px;height:60px;border-radius:12px;
|
||
background:transparent;
|
||
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:#fff;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%, #2E4468 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%, #2E4468 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:block;text-align:right;color:#fff;font-weight:900;font-size:19px;margin-bottom:10px;}
|
||
.footer-logo .logo-badge{display:inline-block;width:150px;height:150px;max-width:100%;border-radius:16px;margin-bottom:6px;}
|
||
.footer-logo span{display:block;text-align:right;}
|
||
.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:4/3;border-radius:24px;
|
||
background:linear-gradient(150deg, var(--navy) 0%, #2E4468 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),#2E4468);
|
||
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;}
|
||
}
|
||
|
||
/* ===== ABOUT PAGE ===== */
|
||
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
|
||
.story-visual{
|
||
aspect-ratio:1/1;border-radius:28px;position:relative;overflow:hidden;
|
||
background:linear-gradient(160deg,var(--navy) 0%, #2E4468 100%);
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.story-visual img{width:56%;height:56%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));}
|
||
|
||
/* ===== FOUNDER ===== */
|
||
#founder{padding:90px 0;}
|
||
.founder-panel{
|
||
position:relative;overflow:hidden;border-radius:20px;
|
||
background:linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%);
|
||
padding:64px 56px;min-height:520px;margin-top:34px;
|
||
}
|
||
.founder-deco-circles{
|
||
position:absolute;top:-30px;left:-30px;width:170px;height:170px;
|
||
background:
|
||
radial-gradient(circle at 35% 35%, rgba(232,214,168,.16) 0 58%, transparent 60%),
|
||
radial-gradient(circle at 60% 60%, rgba(232,214,168,.10) 0 50%, transparent 52%);
|
||
pointer-events:none;
|
||
}
|
||
.founder-deco-check{
|
||
position:absolute;top:0;right:0;width:88px;height:88px;
|
||
background-image:
|
||
linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%),
|
||
linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%);
|
||
background-size:44px 44px;background-position:0 0, 22px 22px;opacity:.55;
|
||
pointer-events:none;
|
||
}
|
||
.founder-deco-dots{
|
||
position:absolute;bottom:26px;left:34px;width:70px;height:44px;
|
||
background:
|
||
radial-gradient(circle, rgba(184,146,62,.35) 0 60%, transparent 62%) 0 0/26px 26px no-repeat,
|
||
radial-gradient(circle, rgba(184,146,62,.22) 0 60%, transparent 62%) 22px 18px/22px 22px no-repeat;
|
||
pointer-events:none;
|
||
}
|
||
.founder-photo-wrap{position:absolute;top:36px;right:48px;width:220px;height:250px;z-index:3;}
|
||
.founder-photo-petal{
|
||
position:absolute;top:-26px;left:-40px;width:190px;height:190px;
|
||
background:
|
||
radial-gradient(ellipse 50px 90px at 50% 50%, rgba(255,255,255,.85), transparent 72%) 0 0,
|
||
radial-gradient(ellipse 50px 90px at 50% 50%, rgba(255,255,255,.85), transparent 72%) 0 0;
|
||
-webkit-mask-image:conic-gradient(from 0deg,#000 0 12%,transparent 12% 25%,#000 25% 37%,transparent 37% 50%,#000 50% 62%,transparent 62% 75%,#000 75% 87%,transparent 87% 100%);
|
||
mask-image:conic-gradient(from 0deg,#000 0 12%,transparent 12% 25%,#000 25% 37%,transparent 37% 50%,#000 50% 62%,transparent 62% 75%,#000 75% 87%,transparent 87% 100%);
|
||
border-radius:50%;opacity:.9;z-index:1;pointer-events:none;
|
||
}
|
||
.founder-photo{
|
||
position:relative;z-index:2;width:100%;height:100%;border-radius:10px;
|
||
border:3px solid #fff;box-shadow:0 20px 40px -14px rgba(0,0,0,.6);overflow:hidden;
|
||
}
|
||
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;}
|
||
.founder-card{
|
||
position:relative;z-index:2;background:linear-gradient(155deg, var(--gold-light) 0%, #D9C79E 100%);
|
||
border:1px solid rgba(143,112,58,.35);border-radius:12px;
|
||
padding:46px 52px 40px;max-width:840px;margin:150px auto 0;
|
||
}
|
||
.founder-card .founder-logo-badge{position:absolute;bottom:16px;left:16px;right:auto;}
|
||
.founder-quote-mark{font-family:Georgia,serif;font-size:70px;line-height:1;color:rgba(34,28,51,.22);font-weight:800;margin-bottom:-14px;}
|
||
.founder-role{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:9px;}
|
||
.founder-name{font-family:'Aref Ruqaa',serif;font-weight:700;font-size:36px;color:var(--navy-deep);margin-bottom:18px;}
|
||
.founder-text{color:var(--navy-deep);font-size:17px;line-height:1.9;font-weight:600;margin-bottom:16px;}
|
||
.founder-sub{font-size:14px;font-weight:700;color:#6b5730;}
|
||
.founder-logo-badge{position:absolute;bottom:20px;right:22px;width:56px;height:56px;object-fit:contain;z-index:2;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
|
||
@media(max-width:860px){
|
||
.founder-panel{padding:150px 24px 40px;min-height:0;}
|
||
.founder-photo-wrap{top:-28px;inset-inline-end:50%;transform:translateX(50%);width:170px;height:190px;}
|
||
.founder-photo-petal{display:none;}
|
||
.founder-card{margin-top:0;max-width:none;text-align:center;}
|
||
.founder-deco-check,.founder-deco-circles,.founder-deco-dots{opacity:.35;}
|
||
.founder-logo-badge{position:static;display:block;margin:20px auto 0;}
|
||
}
|
||
|
||
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
|
||
.pillar-card{background:#fff;border-radius:var(--radius);padding:32px 26px;border:1px solid rgba(11,36,71,.07);text-align:center;}
|
||
.pillar-icon{
|
||
width:64px;height:64px;border-radius:18px;margin:0 auto 18px;
|
||
background:var(--navy);display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.pillar-icon svg{width:30px;height:30px;color:var(--orange);}
|
||
.pillar-card h3{font-size:18px;margin-bottom:10px;}
|
||
.pillar-card p{font-size:14px;color:var(--gray);}
|
||
|
||
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
|
||
.value-card{text-align:center;padding:10px;}
|
||
.value-badge{
|
||
width:70px;height:70px;border-radius:50%;margin:0 auto 16px;
|
||
background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--orange) 60%);
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.value-badge svg{width:32px;height:32px;color:var(--navy);}
|
||
.value-card h4{font-size:15.5px;margin-bottom:6px;color:var(--navy);}
|
||
.value-card p{font-size:13px;color:var(--gray);}
|
||
|
||
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
|
||
.team-card{background:#fff;border-radius:var(--radius);padding:24px 18px;text-align:center;border:1px solid rgba(11,36,71,.07);}
|
||
.team-avatar{
|
||
width:76px;height:76px;border-radius:50%;margin:0 auto 16px;
|
||
background:linear-gradient(150deg,var(--navy),#2E4468);
|
||
display:flex;align-items:center;justify-content:center;color:var(--orange);font-family:'Poppins';font-weight:800;font-size:20px;
|
||
}
|
||
.team-card h5{font-size:14.5px;margin-bottom:4px;color:var(--navy);}
|
||
.team-card .role{font-size:12px;color:var(--orange);font-weight:700;}
|
||
|
||
.achieve-badges{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
|
||
.achieve-chip{
|
||
display:flex;align-items:center;gap:10px;background:var(--surface);
|
||
padding:14px 22px;border-radius:100px;font-size:13.5px;font-weight:700;color:var(--navy);
|
||
}
|
||
.achieve-chip svg{width:18px;height:18px;color:var(--orange);}
|
||
|
||
/* ===== CONTACT PAGE ===== */
|
||
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start;}
|
||
.contact-form{background:#fff;border-radius:var(--radius);padding:34px;border:1px solid rgba(11,36,71,.07);}
|
||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
|
||
.form-group{display:flex;flex-direction:column;gap:6px;}
|
||
.form-group.full{grid-column:1/-1;}
|
||
.form-group label{font-size:13px;font-weight:700;color:var(--navy);}
|
||
.form-group input, .form-group select, .form-group textarea{
|
||
border:1.5px solid rgba(11,36,71,.14);border-radius:10px;padding:12px 14px;
|
||
font-family:'Cairo';font-size:14px;color:var(--text);background:var(--bg);
|
||
}
|
||
.form-group textarea{resize:vertical;min-height:100px;}
|
||
.form-submit{width:100%;justify-content:center;margin-top:6px;}
|
||
|
||
.info-card{background:var(--navy-deep);border-radius:var(--radius);padding:32px;color:#fff;margin-bottom:22px;}
|
||
.info-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);}
|
||
.info-row:last-child{border-bottom:none;}
|
||
.info-row svg{width:20px;height:20px;color:var(--orange);flex-shrink:0;margin-top:2px;}
|
||
.info-row .l{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:2px;}
|
||
.info-row .v{font-size:14.5px;font-weight:600;}
|
||
.social-row{display:flex;gap:12px;margin-top:20px;}
|
||
.social-btn{
|
||
width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.social-btn svg{width:19px;height:19px;color:var(--orange);}
|
||
.map-embed{
|
||
aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;
|
||
background:var(--surface);display:flex;align-items:center;justify-content:center;
|
||
border:1px solid rgba(11,36,71,.07);
|
||
}
|
||
.map-embed svg{width:20%;height:20%;color:var(--gray);}
|
||
|
||
@media (max-width:920px){
|
||
.story-grid, .contact-grid{grid-template-columns:1fr;}
|
||
.pillars-grid, .values-grid, .team-grid{grid-template-columns:repeat(2,1fr);}
|
||
.form-row{grid-template-columns:1fr;}
|
||
}
|
||
@media (max-width:600px){
|
||
.values-grid, .team-grid{grid-template-columns:1fr;}
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="container nav-wrap">
|
||
<a href="index.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف الرياضية</a>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="index.html#programs">البرامج</a></li>
|
||
<li><a href="page-about.html">من نحن</a></li>
|
||
<li><a href="index.html#stats">إنجازاتنا</a></li>
|
||
<li><a href="index.html#testimonials">آراء الأهالي</a></li>
|
||
<li><a href="#contact">تواصل</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="header-cta">
|
||
<a href="#contact" class="btn btn-outline">اتصل بنا</a>
|
||
<a href="#trial" class="btn btn-primary">حجز حصة تجريبية</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="breadcrumb">
|
||
<div class="container">
|
||
<a href="index.html">الرئيسية</a><span class="sep">/</span><span class="current">من نحن</span>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="program-banner" style="padding:56px 0;">
|
||
<div class="container" style="position:relative;text-align:center;">
|
||
<div class="hero-eyebrow" style="margin-inline:auto;display:inline-flex;"><span class="dot"></span> قصتنا منذ التأسيس</div>
|
||
<h1 style="margin-top:8px;">نصنع أبطال الغد، بخطوة اليوم</h1>
|
||
<p class="lead" style="margin-inline:auto;">تعرّف على رؤيتنا ورسالتنا والقيم التي تقوم عليها تجربة كل طفل في أكاديمية الكاف الرياضية.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section style="padding:40px 0 0;">
|
||
<div class="container">
|
||
<img src="images/about-banner.webp" alt="أكاديمية الكاف الرياضية" style="width:100%;border-radius:24px;box-shadow:0 30px 60px -30px rgba(11,36,71,.4);" loading="lazy">
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="overview">
|
||
<div class="container" style="max-width:820px;">
|
||
<div class="eyebrow">من نحن</div>
|
||
<h2 class="section-title">رياضة تبني الشخصية، لا الجسد فقط</h2>
|
||
<p class="section-lead" style="max-width:none;">نؤمن في أكاديمية الكاف الرياضية بأن الرياضة ليست مجرد تدريب بدني، بل هي أسلوب حياة يبني الثقة والانضباط في كل مرحلة عمرية. نسعى لنكون الوجهة الأولى لكل من يبحث عن التميّز؛ عبر برامج مخصصة لتطوير الصغار، وتدريبات احترافية للكبار، سواء ضمن مجموعات حماسية أو عبر تدريب شخصي مكثف يحقق أهدافك بدقة.</p>
|
||
<ul class="about-list">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>كادر تدريبي معتمد:</strong> إشراف نخبة من المدربين المتخصصين في التدريب الجماعي والشخصي.</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>برامج متكاملة لكل الأعمار:</strong> صُممت خصيصًا لتناسب تطلعات الأبطال الصغار وأهداف الكبار.</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>متابعة وتقييم مستمر:</strong> تقارير دورية لقياس التطور والوصول لأفضل أداء بدني وصحي.</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>بيئة آمنة ومحفزة:</strong> مرونة كاملة في اختيار الألعاب والبرامج الرياضية ضمن اشتراك واحد.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="story">
|
||
<div class="container story-grid">
|
||
<div class="reveal">
|
||
<div class="eyebrow">قصتنا</div>
|
||
<h2 class="section-title">لماذا أسّسنا أكاديمية الكاف</h2>
|
||
<p style="color:var(--gray);font-size:15.5px;margin-bottom:16px;">انطلقت أكاديمية الكاف الرياضية من حي القدس بالرياض بفكرة بسيطة: أن كل طفل يستحق بيئة رياضية آمنة ومحترفة تساعده على اكتشاف شغفه، سواء كان في الملعب أو حمام السباحة أو حلبة التدريب.</p>
|
||
<p style="color:var(--gray);font-size:15.5px;">اليوم نقدّم أحد عشر برنامجًا رياضيًا مختلفًا تحت سقف واحد، بإشراف مدربين متخصصين لكل رياضة على حدة، وبمتابعة مستمرة تطمئن كل ولي أمر على تقدّم طفله خطوة بخطوة.</p>
|
||
</div>
|
||
<div class="story-visual reveal" style="background:linear-gradient(165deg, rgba(28,23,48,.55) 0%, rgba(52,43,74,.35) 100%), url(images/karate/1.webp); background-size:cover; background-position:center;">
|
||
<img src="caf-logo.png" alt="شعار أكاديمية الكاف الرياضية" style="width:34%;height:34%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="founder">
|
||
<div class="container">
|
||
<div class="eyebrow" style="justify-content:center;display:flex;color:var(--gold-light);font-size:16px;margin-bottom:20px;">كلمة الرئيس التنفيذي</div>
|
||
<div class="founder-panel reveal">
|
||
<div class="founder-deco-circles"></div>
|
||
<div class="founder-deco-check"></div>
|
||
<div class="founder-deco-dots"></div>
|
||
<div class="founder-photo-wrap">
|
||
<div class="founder-photo-petal"></div>
|
||
<div class="founder-photo">
|
||
<img src="images/general manger.jpeg" alt="الكابتن أحمد حبيب — الرئيس التنفيذي لأكاديمية الكاف الرياضية" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="founder-card">
|
||
<div class="founder-quote-mark">"</div>
|
||
<div class="founder-role">الرئيس التنفيذي لأكاديمية الكاف الرياضية</div>
|
||
<div class="founder-name">الكابتن أحمد حبيب</div>
|
||
<p class="founder-text">"الاستثمار الرياضي في المملكة يشهد قفزة نوعية غير مسبوقة بدعم القيادة الرشيدة ورؤية 2030، ونسعى في أكاديمية الكاف الرياضية إلى أن نكون نموذجًا رياديًا في تحويل الرياضة إلى صناعة اقتصادية جاذبة، تُسهم في بناء الأبطال وتمكين الشباب وتعزيز مكانة السعودية على خارطة الرياضة العالمية."</p>
|
||
<div class="founder-sub">خبير رياضي ومدرب معتمد دوليًا</div>
|
||
<img class="founder-logo-badge" src="caf-logo.png" alt="شعار أكاديمية الكاف الرياضية">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="pillars">
|
||
<div class="container">
|
||
<div class="eyebrow">رؤيتنا ورسالتنا</div>
|
||
<h2 class="section-title">ما الذي يوجّه عملنا كل يوم</h2>
|
||
<div class="pillars-grid">
|
||
<div class="pillar-card reveal">
|
||
<div class="pillar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||
<h3>رؤيتنا</h3>
|
||
<p>أن نكون الخيار الأول للأسر في الرياض الباحثة عن بيئة رياضية آمنة وشاملة، تُعنى بتطوير الأطفال من جميع الأعمار والمستويات.</p>
|
||
</div>
|
||
<div class="pillar-card reveal">
|
||
<div class="pillar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2l2.6 6.4L21 9l-5 4.4L17.4 21 12 17.3 6.6 21 8 13.4 3 9l6.4-.6z"/></svg></div>
|
||
<h3>رسالتنا</h3>
|
||
<p>تقديم تدريب رياضي احترافي متعدد التخصصات يبني المهارة الجسدية والانضباط والثقة بالنفس لدى كل طفل، بإشراف مدربين معتمدين.</p>
|
||
</div>
|
||
<div class="pillar-card reveal">
|
||
<div class="pillar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 6L9 17l-5-5"/></svg></div>
|
||
<h3>هدفنا</h3>
|
||
<p>إعداد أبطال المستقبل القادرين على المشاركة في المنافسات محليًا ودوليًا، دون إغفال الجانب التربوي والأخلاقي للرياضة.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="values">
|
||
<div class="container">
|
||
<div class="eyebrow">قيمنا</div>
|
||
<h2 class="section-title">ما نؤمن به</h2>
|
||
<div class="values-grid">
|
||
<div class="value-card reveal">
|
||
<div class="value-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3z"/></svg></div>
|
||
<h4>السلامة أولًا</h4>
|
||
<p>بيئة تدريب مؤهلة تحت إشراف دائم في كل رياضة.</p>
|
||
</div>
|
||
<div class="value-card reveal">
|
||
<div class="value-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg></div>
|
||
<h4>الانضباط</h4>
|
||
<p>احترام الوقت والقواعد جزء أساسي من كل حصة تدريبية.</p>
|
||
</div>
|
||
<div class="value-card reveal">
|
||
<div class="value-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 20v-1a4 4 0 00-4-4H7a4 4 0 00-4 4v1M14 6a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
|
||
<h4>الشمولية</h4>
|
||
<p>أحد عشر برنامجًا رياضيًا مختلفًا لتناسب شخصية وميول كل طفل.</p>
|
||
</div>
|
||
<div class="value-card reveal">
|
||
<div class="value-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2l2.6 6.4L21 9l-5 4.4L17.4 21 12 17.3 6.6 21 8 13.4 3 9l6.4-.6z"/></svg></div>
|
||
<h4>الاحترافية</h4>
|
||
<p>مدرب متخصص لكل رياضة، لا مدرب عام لكل الأنشطة.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="team">
|
||
<div class="container">
|
||
<div class="eyebrow">فريق العمل</div>
|
||
<h2 class="section-title">مدربون متخصصون لكل رياضة</h2>
|
||
<p class="section-lead">نموذج توضيحي لبيانات المدربين — يُستبدل بصور ومؤهلات المدربين الفعليين بعد توفيرها من الأكاديمية.</p>
|
||
<div class="team-grid">
|
||
<a href="page-coaches.html#coach-football" class="team-card reveal"><img class="team-avatar" src="images/coaches/football.webp" alt="مروان محمد" style="object-fit:cover;"><h5>مروان محمد</h5><div class="role">مدرب كرة القدم</div></a>
|
||
<a href="page-coaches.html#coach-swimming" class="team-card reveal"><img class="team-avatar" src="images/coaches/swimming.webp" alt="عبدالرحمن محمد" style="object-fit:cover;"><h5>عبدالرحمن محمد</h5><div class="role">مدرب السباحة</div></a>
|
||
<a href="page-coaches.html#coach-karate" class="team-card reveal"><img class="team-avatar" src="images/coaches/karate.webp" alt="أمنية حمامي" style="object-fit:cover;"><h5>أمنية حمامي</h5><div class="role">مدربة الكاراتيه والتايكوندو</div></a>
|
||
<a href="page-coaches.html#coach-gymnastics" class="team-card reveal"><img class="team-avatar" src="images/coaches/gymnastics.webp" alt="أمنية حمامي" style="object-fit:cover;"><h5>أمنية حمامي</h5><div class="role">مدربة الجمباز</div></a>
|
||
<a href="page-coaches.html#coach-kickboxing" class="team-card reveal"><img class="team-avatar" src="images/coaches/kickboxing.webp" alt="أحمد حبيب" style="object-fit:cover;"><h5>الكابتن أحمد حبيب</h5><div class="role">مدرب الكيك بوكسينغ</div></a>
|
||
</div>
|
||
<div style="text-align:center;margin-top:32px;">
|
||
<a href="page-coaches.html" class="btn btn-navy">عرض الملف الكامل لكل مدرب ←</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="achievements">
|
||
<div class="container" style="text-align:center;">
|
||
<div class="eyebrow" style="justify-content:center;display:inline-flex;">الاعتمادات والإنجازات</div>
|
||
<h2 class="section-title">معتمدون من الاتحادات الرياضية السعودية</h2>
|
||
<p class="section-lead" style="margin-inline:auto;">برامجنا معتمدة من الاتحادات الرياضية السعودية المختصة، التزامًا منّا بأعلى معايير الجودة والشفافية مع أولياء الأمور.</p>
|
||
<div style="display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-bottom:26px;">
|
||
<div style="background:#fff;border-radius:var(--radius);padding:18px;width:130px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -18px rgba(11,36,71,.25);"><img src="images/accred-swimming.png" alt="الاتحاد السعودي للسباحة" style="width:100%;object-fit:contain;"></div>
|
||
<div style="background:#fff;border-radius:var(--radius);padding:18px;width:130px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -18px rgba(11,36,71,.25);"><img src="images/accred-karate.webp" alt="الاتحاد العربي السعودي للكاراتيه" style="width:100%;object-fit:contain;"></div>
|
||
<div style="background:#fff;border-radius:var(--radius);padding:18px;width:130px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -18px rgba(11,36,71,.25);"><img src="images/accred-kickboxing.webp" alt="الاتحاد السعودي للكيك بوكسينغ" style="width:100%;object-fit:contain;"></div>
|
||
<div style="background:#fff;border-radius:var(--radius);padding:18px;width:130px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -18px rgba(11,36,71,.25);"><img src="images/accred-boxing.webp" alt="الاتحاد السعودي للملاكمة" style="width:100%;object-fit:contain;"></div>
|
||
</div>
|
||
<div class="achieve-badges">
|
||
<div class="achieve-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> ترخيص تشغيل ساري بمدارس الحزم الأهلية</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="trial">
|
||
<div class="container">
|
||
<div class="final-cta reveal">
|
||
<h2>جاهز تتعرف أكثر على رحلة طفلك معنا؟</h2>
|
||
<p>عبّي النموذج التالي وسيتواصل معك فريقنا لتأكيد حصتك التجريبية المجانية.</p>
|
||
</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" 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;background:#fff;">
|
||
<option value="" selected disabled>اختر الرياضة</option>
|
||
<option value="كرة القدم">كرة القدم</option>
|
||
<option value="السباحة">السباحة</option>
|
||
<option value="الكاراتيه">الكاراتيه</option>
|
||
<option value="التايكوندو">التايكوندو</option>
|
||
<option value="الجمباز">الجمباز</option>
|
||
<option value="الكيك بوكسينغ">الكيك بوكسينغ</option>
|
||
<option value="المواي تاي">المواي تاي</option>
|
||
<option value="كرة السلة">كرة السلة</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><span>أكاديمية الكاف الرياضية</span></div>
|
||
<p style="font-size:13.5px;">المملكة العربية السعودية، الرياض</p>
|
||
<p style="font-size:13.5px;margin-top:6px;">"نصنع أبطال الغد، بخطوة اليوم"</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>روابط سريعة</h5>
|
||
<ul>
|
||
<li><a href="index.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_academy_?igsi=aDZmaTlhZmttd3E3" 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_academy?_r=1&_t=ZS-98y2YmrQpY8" 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>
|
||
</body>
|
||
</html>
|