Khalil Studio | Homepage Prototype v2
:root{--bg:#080b10;--panel:#101722;--panel2:#151f2e;--text:#f5f7fb;--muted:#aab4c4;--blue:#6385ff;--blue2:#9bb0ff;--lime:#8ea7ff;--line:rgba(255,255,255,.13);--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Cairo",sans-serif;line-height:1.8;text-align:start} h1,h2,h3,h4,p,li{color:inherit} .hero-inner,.story-copy,.section-top,.path-card,.feature{ text-align:start }a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
header{position:absolute;inset:0 0 auto;z-index:10;padding:22px 0}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.5px;font-size:20px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(99,133,255,.6);border-radius:13px;color:var(--blue2);font-size:19px;transform:rotate(-5deg)}.brand-mark span{transform:rotate(5deg)}.nav-links{display:flex;align-items:center;gap:25px;color:#d6dce6;font-size:13px;font-weight:700}.nav-links a{transition:color .2s}.nav-links a:hover{color:var(--blue2)}.nav-cta{border:1px solid var(--line);border-radius:7px;padding:10px 17px;font-size:13px;font-weight:800}.menu-btn{display:none;background:none;color:white;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:inherit}
.hero{position:relative;min-height:760px;display:flex;align-items:center;overflow:hidden;padding:150px 0 90px;background:radial-gradient(ellipse at 75% 40%,rgba(77,108,218,.25),transparent 34%),radial-gradient(ellipse at 15% 85%,rgba(99,133,255,.10),transparent 35%),linear-gradient(120deg,#0a0d13,#0b1220 60%,#080b10)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(to bottom,black,transparent 90%);pointer-events:none}
.hero:after{content:"KS";position:absolute;left:-.04em;bottom:-.42em;font-size:clamp(250px,38vw,580px);font-weight:900;line-height:1;color:rgba(255,255,255,.022);letter-spacing:-.1em;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:900px}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--blue2);font-size:11px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase}.eyebrow:before{content:"";height:2px;width:34px;background:var(--blue)}h1{font-size:clamp(44px,7.1vw,92px);line-height:1.22;letter-spacing:-2.5px;margin:24px 0 22px;font-weight:900;max-width:940px}h1 .accent{color:var(--blue2);display:block}.hero-copy{font-size:clamp(16px,1.7vw,20px);line-height:2.05;color:#c2ccda;max-width:730px;margin:0 0 32px}.hero-copy strong{color:white;font-weight:800}.actions{display:flex;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:7px;font-size:14px;font-weight:800;transition:transform .2s,background .2s,border-color .2s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--blue);color:#ffffff}.btn-primary:hover{background:#7895ff}.btn-ghost{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.025)}.btn-ghost:hover{border-color:var(--blue2);background:rgba(255,255,255,.06)}.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:55px;color:#9ba7b9;font-size:11px;font-weight:800;letter-spacing:1.5px}.hero-meta span{display:flex;align-items:center;gap:9px}.hero-meta i{display:inline-block;width:6px;height:6px;background:var(--blue2);border-radius:50%}
.marquee{border-block:1px solid var(--line);background:#0c111a;overflow:hidden}.marquee-inner{display:flex;justify-content:space-around;align-items:center;gap:35px;white-space:nowrap;padding:19px 20px;color:#b6c0cf;font-size:11px;font-weight:900;letter-spacing:2px}.marquee b{color:var(--blue2);font-weight:900}
section.content{padding:105px 0}.section-top{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}.section-top h2,.story h2,.cta h2{font-size:clamp(30px,4.2vw,53px);line-height:1.4;letter-spacing:-1px;margin:13px 0 0;font-weight:900}.section-top p{max-width:440px;color:var(--muted);margin:0;font-size:15px;line-height:2}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.story-visual{position:relative;min-height:420px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 70% 25%,rgba(99,133,255,.28),transparent 38%),linear-gradient(140deg,#18253c,#0c111b 70%);padding:32px;display:flex;flex-direction:column;justify-content:space-between}.story-visual:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(99,133,255,.25);border-radius:50%;left:-70px;bottom:-90px;box-shadow:0 0 0 35px rgba(99,133,255,.025),0 0 0 70px rgba(99,133,255,.02)}.visual-top{position:relative;z-index:1;display:flex;justify-content:space-between;color:#aab7cc;font-size:11px;font-weight:800;letter-spacing:1.5px}.visual-statement{position:relative;z-index:1}.visual-statement .big{font-size:clamp(42px,6vw,76px);line-height:1.1;font-weight:900;letter-spacing:-3px}.visual-statement .big span{color:var(--blue2)}.visual-statement p{color:#b7c2d2;margin:18px 0 0;font-size:12px;letter-spacing:2px;font-weight:800}.story-copy p{color:var(--muted);font-size:16px;line-height:2.15;margin:22px 0}.story-copy p strong{color:var(--text)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.principle{padding:18px 15px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}.principle b{display:block;color:var(--blue2);font-size:12px;letter-spacing:1.5px}.principle span{display:block;margin-top:6px;font-size:13px;font-weight:800}
.dark-band{background:linear-gradient(115deg,#111a2b,#0b1018);border-block:1px solid var(--line)}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.path-card{padding:28px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);min-height:235px;transition:transform .25s,border-color .25s,background .25s}.path-card:hover{transform:translateY(-5px);border-color:rgba(142,167,255,.55);background:rgba(255,255,255,.045)}.path-num{color:var(--blue2);font-size:12px;letter-spacing:2px;font-weight:900}.path-card h3{font-size:21px;line-height:1.5;margin:25px 0 8px}.path-card p{color:var(--muted);font-size:14px;line-height:2;margin:0 0 20px}.text-link{color:var(--blue2);font-size:13px;font-weight:800}.text-link span{display:inline-block;margin-right:6px;transition:transform .2s}.text-link:hover span{transform:translateX(-4px)}
.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.feature{position:relative;min-height:310px;border-radius:14px;overflow:hidden;border:1px solid var(--line);padding:30px;background:linear-gradient(135deg,#18243a,#0e131d)}.feature:nth-child(2){background:radial-gradient(circle at 80% 15%,rgba(99,133,255,.12),transparent 35%),linear-gradient(140deg,#1a2330,#0e131d)}.feature .tag{font-size:10px;color:var(--blue2);letter-spacing:2px;font-weight:900}.feature h3{font-size:clamp(24px,3vw,35px);line-height:1.45;margin:35px 0 10px;max-width:440px}.feature p{color:var(--muted);max-width:480px;font-size:14px;line-height:2}.feature .feature-link{position:absolute;bottom:26px;right:30px;color:var(--text);font-size:13px;font-weight:800}
.cta{padding:95px 0;text-align:center;background:radial-gradient(ellipse at 50% 100%,rgba(99,133,255,.22),transparent 55%),#0b1018;border-top:1px solid var(--line)}.cta .eyebrow{justify-content:center}.cta .eyebrow:after{content:"";height:2px;width:34px;background:var(--blue)}.cta h2{max-width:820px;margin:18px auto}.cta p{max-width:650px;margin:0 auto 28px;color:var(--muted);font-size:15px;line-height:2}.cta .actions{justify-content:center}
footer{padding:24px 0;border-top:1px solid var(--line);background:#080b10}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#8995a7;font-size:11px}.footer-brand{color:#e8edf5;font-weight:900;letter-spacing:.8px}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a:hover{color:var(--blue2)}
@media(max-width:850px){.nav-links{gap:14px}.nav-links a{font-size:12px}.nav-cta{display:none}.hero{min-height:690px}.story-grid{gap:30px}.story-visual{min-height:360px}.path-grid{grid-template-columns:1fr}.path-card{min-height:0}.feature-grid{grid-template-columns:1fr}.section-top{align-items:start;flex-direction:column}.section-top p{max-width:600px}}
@media(max-width:620px){.wrap{width:calc(100% - 36px)}.brand{font-size:17px}.brand-mark{width:37px;height:37px}.menu-btn{display:block}.hero{min-height:720px;padding:125px 0 65px}.hero:after{font-size:300px}.hero h1{font-size:43px;letter-spacing:-1.6px}.hero-copy{font-size:15px}.actions{flex-direction:column;align-items:stretch}.btn{width:100%}.hero-meta{margin-top:36px;gap:14px}.marquee-inner{justify-content:flex-start;overflow:hidden;gap:25px}.marquee-inner span{flex:0 0 auto}.content{padding:68px 0!important}.story-grid{grid-template-columns:1fr}.story-visual{min-height:310px;padding:24px}.visual-statement .big{font-size:57px}.story-copy p{font-size:15px}.principles{gap:8px}.principle{padding:13px 10px}.principle span{font-size:11px}.section-top{margin-bottom:28px}.section-top h2,.story h2,.cta h2{font-size:32px}.path-card{padding:23px}.feature{min-height:300px;padding:24px}.feature .feature-link{right:24px}.cta{padding:70px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
CREATIVE MEDIA & DIGITAL SOLUTIONS
كل فكرة تستحق
أن تُرى. أن تُفهم. أن تبقى.
في Khalil Studio، لا نتعامل مع الفكرة باعتبارها مجرد بداية؛
بل نبحث عمّا يمكن أن تصنعه. نجمع الرؤية الإبداعية بالفهم الاستراتيجي
لنحوّل الأفكار إلى تجارب مرئية ورقمية تحمل رسالة واضحة وتترك أثرًا.
THINK WITH PURPOSE
CREATE WITH INTENT
MAKE AN IMPACT
THINK ✳CREATE ✳IMPACT ✳IDEAS INTO IMPACT ✳THINK ✳CREATE ✳IMPACT
THE KHALIL STUDIO APPROACH01—03
Think.
Create.
Impact.
FROM A THOUGHT TO SOMETHING THAT MATTERS.
MORE THAN MAKING THINGS LOOK GOOD
الإبداع مش شكل حلو وبس.
الإبداع إنك تعرف عايز توصل لإيه.
كل علامة تجارية عندها رسالة، وكل مشروع عنده تحدٍّ مختلف. دورنا إننا نفهم الاتنين قبل ما نختار الشكل أو الأداة أو طريقة التنفيذ.
من الصورة الأولى إلى التجربة الرقمية، نربط الفكرة بالهدف، والمحتوى بالجمهور، والتنفيذ بالأثر المطلوب. لأن الشغل المؤثر مش بس اللي يلفت النظر؛ هو اللي يخلّي الرسالة توصل وتفضل في الذاكرة.
01 / THINKنفهم قبل ما نبدأ
02 / CREATEنصنع بقصد
03 / IMPACTنربط الشغل بأثره
اكتشف حكاية Khalil Studio ←
EXPLORE KHALIL STUDIO
ابدأ من المكان
اللي يناسب هدفك.
كل رحلة مختلفة. استكشف أعمالنا، تعرّف على طريقة تفكيرنا، أو ادخل أعمق في المحتوى والتعلّم. اختار الخطوة اللي تقرّبك من فكرتك.
01 / SELECTED WORK
شوف الأفكار وهي بتاخد شكلها.
اكتشف نماذج من أعمالنا وكيف تتحول الرؤية إلى معالجة بصرية وتجربة متكاملة.
استكشف الأعمال ←
02 / INSIGHTS
فكّر بشكل أعمق. اصنع بشكل أذكى.
أفكار ومقالات عن صناعة المحتوى، والتصميم، والفيديو، والتقنيات التي تغيّر طريقة العمل.
اقرأ المعرفة ←
03 / LEARN BY DOING
حوّل المعرفة إلى مهارة.
تعرّف على مساراتنا التدريبية العملية، وابدأ في تطوير أدواتك ورؤيتك الإبداعية.
اكتشف التدريب ←
ONE STUDIO. A CLEARER DIRECTION.
أدوات مختلفة.
رؤية واحدة.
نختار طريقة العمل بناءً على ما يحتاجه المشروع فعلًا. لو حابب تتعرّف على نطاق عملنا، تقدر تستكشف الخدمات بالتفصيل من الصفحة المخصصة لها.
OUR CAPABILITIES
مشروعك مش محتاج أدوات أكتر؛ محتاج الاختيار الصح.
نبدأ من الهدف، ثم نحدد المسار الإبداعي والرقمي الأنسب لطبيعة المشروع والجمهور والنتيجة المطلوبة.
تعرّف على خدماتنا ←
OUR STORY
وراء كل تنفيذ قرار. ووراء كل قرار فكرة.
تعرّف على فلسفة الاستوديو، وطريقتنا في التفكير، وكيف نربط الإبداع بهدف واضح.
اعرف المزيد عنّا ←
YOUR NEXT IDEA STARTS HERE
عندك فكرة لسه في دماغك؟
خلّينا نديها اتجاه.
مش لازم تكون كل التفاصيل جاهزة. ابدأ بحوار واضح عن فكرتك وهدفك، ومن هناك نحدد الخطوة المناسبة.
