/* =========================================================== Brilliant Algorithm — Shared Stylesheet Cairo/Tajawal are preloaded via on the ar/ pages (see ) =========================================================== */ :root{ --navy:#16213E; --navy-deep:#0F1730; --amber:#FFB627; --amber-dark:#E39A0C; --teal:#00C2A8; --teal-text:#046B5D; --bg:#F7F8FA; --card:#FFFFFF; --ink:#16213E; --ink-soft:#5B6478; --line:#E4E7EE; --radius:14px; --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace; --font-display-ar:'Cairo', 'Tajawal', sans-serif; --font-body-ar:'Tajawal', 'Cairo', sans-serif; } /* Arabic pages: swap in fonts built for Arabic script — clearer letterforms, proper weight rendering, and no mixed-script fallback ugliness. */ html[dir="rtl"] body{font-family:var(--font-body-ar); line-height:1.85;} html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{font-family:var(--font-display-ar); font-weight:700;} html[dir="rtl"] .eyebrow{font-family:var(--font-body-ar); font-weight:700; letter-spacing:0;} html[dir="rtl"] .btn{font-family:var(--font-body-ar); font-weight:700;} html[dir="rtl"] .nav-links, html[dir="rtl"] .nav-cta{font-family:var(--font-body-ar); font-weight:700;} *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6;} img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} .wrap{max-width:1120px; margin:0 auto; padding:0 24px;} .eyebrow{font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--teal-text); font-weight:600;} h1,h2,h3{font-family:var(--font-display); font-weight:700; color:var(--navy);} .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:15px; padding:13px 24px; border-radius:10px; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;} .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--amber); color:var(--navy-deep); box-shadow:0 6px 0 var(--amber-dark);} .btn-primary:hover{box-shadow:0 8px 0 var(--amber-dark);} .btn-primary:active{transform:translateY(2px); box-shadow:0 3px 0 var(--amber-dark);} .btn-ghost{border-color:rgba(255,255,255,.35); color:#fff;} .btn-ghost:hover{border-color:#fff;} .btn-outline{border-color:var(--navy); color:var(--navy);} /* NAV */ header{position:sticky; top:0; z-index:50; background:rgba(247,248,250,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);} .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;} .logo{font-family:var(--font-mono); font-weight:600; font-size:17px; color:var(--navy); display:flex; align-items:center; gap:10px; background:var(--navy-deep); padding:8px 14px 8px 8px; border-radius:10px; line-height:0; text-decoration:none;} .logo-text{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-0.01em; color:#fff; line-height:1.1; white-space:nowrap;} html[dir="rtl"] .logo-text{font-family:var(--font-display-ar);} @media (max-width:560px){.logo-text{display:none;} .logo{padding:8px;}} .logo .brk{color:var(--teal);} .nav-links{display:flex; gap:28px; font-size:14px; font-weight:600; color:var(--ink-soft);} .nav-links a{position:relative; padding:4px 0;} .nav-links a:hover, .nav-links a.active{color:var(--navy);} .nav-links a.active:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--amber);} .nav-right{display:flex; align-items:center; gap:16px;} .lang-toggle{font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); display:flex; gap:6px; align-items:center;} .lang-toggle span{cursor:pointer;} .lang-toggle .active{color:var(--navy); font-weight:700;} .nav-cta{background:var(--navy); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:600;} .nav-cta:hover{background:var(--navy-deep);} .burger{display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none;} .burger span{width:22px; height:2px; background:var(--navy); display:block;} /* HERO */ .hero{background:radial-gradient(1200px 500px at 80% -10%, #1c2b56 0%, var(--navy-deep) 60%); color:#fff; padding:88px 0 100px; position:relative; overflow:hidden;} .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;} .hero h1{font-size:44px; line-height:1.12; color:#fff; margin:16px 0 18px;} .hero h1 .accent{color:var(--amber);} .hero p.lead{font-size:17px; color:#C7CDE4; max-width:480px; margin-bottom:30px;} .hero-actions{display:flex; gap:14px; flex-wrap:wrap;} .hero-badges{display:flex; gap:18px; margin-top:36px; flex-wrap:wrap;} .hero-badge{font-family:var(--font-mono); font-size:12.5px; color:#9FA8C7; display:flex; align-items:center; gap:8px;} .hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--teal);} .code-card{background:#0B1226; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:22px 24px; font-family:var(--font-mono); font-size:13.5px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);} .code-dots{display:flex; gap:6px; margin-bottom:16px;} .code-dots span{width:10px; height:10px; border-radius:50%; display:inline-block;} .code-dots span:nth-child(1){background:#FF6B6B;} .code-dots span:nth-child(2){background:#FFD166;} .code-dots span:nth-child(3){background:#06D6A0;} .code-card .kw{color:#7FB3FF;} .code-card .fn{color:#FFD166;} .code-card .str{color:#7DE0C0;} .code-card .cm{color:#6B7699;} .cursor{display:inline-block; width:8px; height:16px; background:var(--amber); vertical-align:-3px; animation:blink 1s step-end infinite;} @keyframes blink{50%{opacity:0;}} /* PAGE HERO (for standalone pages) */ .page-hero{background:var(--navy-deep); color:#fff; padding:64px 0;} .page-hero h1{color:#fff; font-size:34px; margin-top:10px;} .page-hero p{color:#AEB6D4; margin-top:10px; max-width:520px;} section{padding:84px 0;} .section-head{max-width:600px; margin-bottom:48px;} .section-head h2{font-size:32px; margin-top:10px;} .section-head p{color:var(--ink-soft); font-size:16px; margin-top:12px;} .alt-bg{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} /* STEPS */ .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} .step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;} .step .num{font-family:var(--font-mono); color:var(--teal-text); font-weight:600; font-size:14px;} .step h3{font-size:17px; margin:12px 0 8px;} .step p{font-size:14px; color:var(--ink-soft);} /* WHY US strip */ .why{background:var(--navy); color:#fff; padding:56px 0;} .why .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} .why-item{text-align:center;} .why-item .ico{font-family:var(--font-mono); color:var(--amber); font-size:22px; margin-bottom:10px;} .why-item h3{font-size:15px; color:#fff; margin-bottom:6px;} .why-item p{font-size:13px; color:#AEB6D4;} /* COURSES */ .courses-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .course-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s ease, transform .2s ease; display:block; color:inherit; text-decoration:none;} .course-card:hover{box-shadow:0 20px 40px -20px rgba(22,33,62,.25); transform:translateY(-3px);} .course-top{height:96px; display:flex; align-items:center; padding:0 22px; font-family:var(--font-mono); font-weight:600; color:#fff; font-size:14px;} .c-python .course-top{background:linear-gradient(120deg,#2D6A4F,#1B4332);} .c-roblox .course-top{background:linear-gradient(120deg,#3A0CA3,#240046);} .c-web .course-top{background:linear-gradient(120deg,#1B5299,#0D2B4E);} .course-body{padding:20px 22px 24px;} .course-body h3{font-size:18px; margin-bottom:8px;} .course-body p{font-size:14px; color:var(--ink-soft); margin-bottom:14px;} .tag-row{display:flex; gap:8px; flex-wrap:wrap;} .tag{font-family:var(--font-mono); font-size:11.5px; background:#EEF1F8; color:var(--ink-soft); padding:4px 9px; border-radius:6px;} .course-more{border:2px dashed var(--line); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; color:var(--ink-soft); font-size:14px;} .course-more strong{color:var(--navy); font-family:var(--font-display); display:block; margin-bottom:6px; font-size:16px;} /* INSTRUCTORS */ .instructors-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .instructor-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center;} .avatar{width:76px; height:76px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--teal),#1B5299); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:22px;} .instructor-card h3{font-size:16px; margin-bottom:4px;} .cred{font-family:var(--font-mono); font-size:12px; color:var(--teal-text); margin-bottom:10px; display:block;} .instructor-card p{font-size:13.5px; color:var(--ink-soft);} /* PROJECTS */ .projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .project-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--card);} .project-thumb{aspect-ratio:4/3; background:linear-gradient(135deg,#1c2b56,#0B1226); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--amber); font-size:13px; text-align:center; padding:10px;} .project-meta{padding:14px 16px;} .project-meta h5{font-size:14.5px; margin-bottom:2px;} .project-meta span{font-size:12.5px; color:var(--ink-soft);} /* COURSE COLOR VARIANTS (6 courses) */ .c-ai .course-top{background:linear-gradient(120deg,#7B2CBF,#3C096C);} .c-graphic .course-top{background:linear-gradient(120deg,#D62839,#7A1723);} .c-scratch .course-top{background:linear-gradient(120deg,#E6A700,#A66E00);} .c-minecraft .course-top{background:linear-gradient(120deg,#5D8C3F,#4A3222);} /* PRICING TIERS TABLE */ .tier-table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:36px;} .tier-table th, .tier-table td{padding:14px 16px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line);} .tier-table th{background:var(--navy); color:#fff; font-family:var(--font-mono); font-size:12.5px; font-weight:600;} .tier-table tr:last-child td{border-bottom:none;} .tier-table tr:nth-child(even) td{background:#FAFBFD;} .tier-table td.price-cell{font-family:var(--font-display); font-weight:700; color:var(--navy);} .tier-table td.save-cell{color:var(--teal); font-weight:600; font-size:13px;} .tier-note{font-size:12.5px; color:var(--ink-soft); margin-top:-24px; margin-bottom:36px;} .discount-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;} .discount-card{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:10px; padding:18px 20px;} .discount-card h3{font-size:15px; margin-bottom:6px;} .discount-card p{font-size:13.5px; color:var(--ink-soft);} .discount-card.new{border-left-color:var(--amber);} .discount-card .pill{display:inline-block; font-family:var(--font-mono); font-size:10.5px; background:#FFF0D1; color:var(--amber-dark); padding:2px 8px; border-radius:10px; margin-bottom:8px; font-weight:700;} /* PRICING */ .pricing-note{background:#FFF7E6; border:1px solid #FFE1A6; border-radius:var(--radius); padding:20px 24px; font-size:14.5px; color:#7A5200; margin-bottom:32px; display:flex; gap:12px; align-items:flex-start;} .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .price-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; text-align:center; position:relative;} .price-card.featured{border:2px solid var(--amber);} .price-card .badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--amber); color:var(--navy-deep); font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; font-family:var(--font-mono);} .price-card h3{font-size:16px; margin-bottom:6px;} .price{font-family:var(--font-display); font-size:30px; margin:10px 0 4px;} .price span{font-size:14px; color:var(--ink-soft); font-family:var(--font-body); font-weight:500;} .price-card ul{list-style:none; text-align:left; margin:18px 0; font-size:13.5px; color:var(--ink-soft);} .price-card li{padding:6px 0; display:flex; gap:8px;} .price-card li:before{content:"✓"; color:var(--teal); font-weight:700;} /* TESTIMONIALS */ .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .testi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px;} .testi p{font-size:14.5px; color:var(--ink); margin-bottom:14px; font-style:italic;} .testi span{font-size:13px; color:var(--ink-soft); font-weight:600;} /* CONTACT FORM */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-start;} .form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px;} .field{margin-bottom:16px;} .field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink);} .field input, .field select, .field textarea{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px; font-family:var(--font-body); font-size:14px; background:#fff;} .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--teal); outline-offset:1px;} .form-note{font-size:12.5px; color:var(--ink-soft); margin-top:10px;} .form-success{display:none; background:#E9FBF6; border:1px solid #B7EEE0; color:#0B6E58; padding:14px 16px; border-radius:10px; font-size:14px; margin-bottom:16px;} .form-success.show{display:block;} .form-error{display:none; background:#FDECEC; border:1px solid #F5B5B5; color:#8A1F1F; padding:14px 16px; border-radius:10px; font-size:14px; margin-bottom:16px;} .form-error.show{display:block;} .form-error a{color:#8A1F1F; text-decoration:underline; font-weight:600;} .contact-info h3{font-size:18px; margin-bottom:14px;} .contact-info ul{list-style:none;} .contact-info li{font-size:14.5px; color:var(--ink-soft); padding:8px 0; border-bottom:1px solid var(--line);} .contact-info li strong{color:var(--ink); display:block; font-size:13px; font-family:var(--font-mono); margin-bottom:2px;} .contact-info li a{color:var(--teal-text); font-weight:600; text-decoration:underline;} /* TRUST STRIP */ .trust-strip{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0;} .trust-strip .wrap{display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; text-align:center;} .trust-strip span{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;} html[dir="rtl"] .trust-strip span{font-family:var(--font-body-ar); font-weight:600;} .trust-strip span:before{content:"✓"; color:var(--teal); font-weight:700;} /* PROCESS STEPS (what happens after you submit) */ .process{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px;} .process-step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;} .process-step .pnum{width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; margin-bottom:12px;} .process-step h3{font-size:15.5px; margin-bottom:6px;} .process-step p{font-size:13.5px; color:var(--ink-soft);} /* FAQ */ .faq{max-width:760px; margin:0 auto;} .faq details{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:10px;} .faq summary{cursor:pointer; font-weight:600; font-size:15px; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;} .faq summary::-webkit-details-marker{display:none;} .faq summary:after{content:"+"; font-family:var(--font-mono); font-size:20px; color:var(--teal-text); flex-shrink:0;} .faq details[open] summary:after{content:"–";} .faq p{font-size:14px; color:var(--ink-soft); margin-top:10px; line-height:1.65;} /* COURSE DETAIL PAGE */ .breadcrumb{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin-bottom:14px;} .breadcrumb a{color:var(--ink-soft); text-decoration:none;} .breadcrumb a:hover{color:var(--teal-text);} .course-meta-bar{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;} .syllabus{max-width:760px;} .syllabus li{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line);} .syllabus li:last-child{border-bottom:none;} .syllabus li:before{content:"✓"; color:var(--teal); font-weight:700; flex-shrink:0; margin-top:1px;} .syllabus li span{font-size:14.5px; color:var(--ink); line-height:1.6;} .course-cross{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;} .course-cross a{font-family:var(--font-mono); font-size:12.5px; color:var(--teal-text); text-decoration:none; border:1px solid var(--line); padding:6px 12px; border-radius:20px;} .course-cross a:hover{border-color:var(--teal);} /* GOOGLE REVIEWS EMBED */ .reviews-section{background:var(--card);} .reviews-section .wrap{max-width:900px;} .reviews-embed{margin-top:8px;} /* Accessibility fix: SociableKit's default link color (rgb(37,119,244)) fails WCAG AA contrast (4.18:1) at their font size. Override to a compliant, still-branded blue. */ .reviews-embed a.tutorial_link, .reviews-embed a[href*="sociablekit.com"]{ color:#1450B8 !important; } /* CTA */ .cta{background:var(--navy-deep); color:#fff; text-align:center; padding:80px 0;} .cta h2{color:#fff; font-size:30px; margin-bottom:14px;} .cta p{color:#AEB6D4; max-width:480px; margin:0 auto 30px;} footer{background:#0F1730; color:#8A93B5; padding:40px 0; font-size:13.5px;} .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;} .footer-links{display:flex; gap:16px;} .footer-links a:hover{color:#fff;} @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .steps,.courses-grid,.instructors-grid,.projects-grid,.pricing-grid,.testi-grid,.why .wrap,.process{grid-template-columns:repeat(2,1fr);} .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--bg); flex-direction:column; padding:16px 24px; border-bottom:1px solid var(--line); display:none;} .nav-links.open{display:flex;} .burger{display:flex;} } @media(max-width:560px){ .steps,.courses-grid,.instructors-grid,.projects-grid,.pricing-grid,.testi-grid,.why .wrap,.process{grid-template-columns:1fr;} .hero h1{font-size:32px;} .page-hero h1{font-size:26px;} .trust-strip .wrap{gap:14px 20px;} } /* RTL SUPPORT (Arabic) */ html[dir="rtl"]{text-align:right;} html[dir="rtl"] .discount-card{border-left:none; border-right:4px solid var(--teal);} html[dir="rtl"] .discount-card.new{border-right-color:var(--amber);} html[dir="rtl"] .tier-table th, html[dir="rtl"] .tier-table td{text-align:right;} html[dir="rtl"] .price-card li:before{content:""; margin-left:8px;} html[dir="rtl"] .price-card li{flex-direction:row-reverse; justify-content:flex-end;} html[dir="rtl"] .step .num, html[dir="rtl"] .cred{direction:ltr; display:inline-block;} /* Screen-reader-only heading (keeps document outline valid without changing visual design) */ .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}