:root{--p:#8b2f2f;--gold:#f3c96a;--text:#1f2937;--footer-space:72px;--shadow:0 18px 40px rgba(0,0,0,.18)}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%}body.welcomeApp{min-height:100vh;overflow:hidden;font-family:'Alexandria',sans-serif;color:var(--text);background:#f6ead8}button,a{font-family:inherit}.hidden{display:none!important}.loader,.stageWelcome{position:fixed;inset:0}.loader{z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 20%,#fff,rgba(246,234,216,.96) 62%,rgba(234,211,182,.98))}.loader__card{width:min(520px,92vw);padding:22px 20px 24px;text-align:center;border-radius:28px;background:rgba(255,255,255,.9);box-shadow:var(--shadow)}.loader__logo{display:block;width:min(220px,48vw);height:auto;margin:0 auto -8px}.loader__text{margin:10px 0 0;color:#4b2c2c;font-size:18px;font-weight:800}.book{position:relative;width:120px;height:76px;margin:4px auto 6px;perspective:700px}.book .spine{position:absolute;inset:0;width:10px;height:74px;margin:auto;z-index:3;border-radius:8px;background:linear-gradient(#8b2f2f,#6f2323)}.book .page{position:absolute;top:2px;width:55px;height:72px;border-radius:10px;background:linear-gradient(#fff,#f8f6f0);box-shadow:0 8px 18px rgba(0,0,0,.08)}.book .left{left:6px;transform-origin:right center;animation:openLeft 1.2s infinite}.book .right{right:6px;transform-origin:left center;animation:openRight 1.2s infinite}@keyframes openLeft{50%{transform:rotateY(35deg)}}@keyframes openRight{50%{transform:rotateY(-35deg)}}.stageWelcome{z-index:10}.stageFrame{position:relative;width:100vw;height:100vh;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;padding-bottom:var(--footer-space);background:#d9b184}.stageBackdrop{position:absolute;inset:0;z-index:0;background:url('/assets/img/arabimasra7.webp') center/cover no-repeat}.stageGlow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 31%,rgba(255,247,207,.22),transparent 28%),linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.12))}.stageDust{position:absolute;inset:0;z-index:2;pointer-events:none}.stageDust:before{content:"";position:absolute;inset:-10%;opacity:.45;background:radial-gradient(4px 4px at 15% 20%,rgba(255,255,255,.34) 0 60%,transparent 61%),radial-gradient(5px 5px at 75% 25%,rgba(255,244,190,.28) 0 60%,transparent 61%);animation:dustMove 14s infinite}@keyframes dustMove{50%{transform:translateY(-12px)}}.stageTopBar{position:absolute;top:8px;right:12px;left:12px;z-index:40;display:flex;pointer-events:none}.stageBrand{pointer-events:auto}.stageBrand img{display:block;width:auto;height:clamp(78px,7vw,122px);filter:drop-shadow(0 10px 18px rgba(74,32,12,.22))}.showStarter{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;color:#fff;background:rgba(19,12,8,.32);backdrop-filter:blur(2px);cursor:pointer;transition:.35s}.showStarter.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.showStarter__spark{font-size:42px;animation:pulse 1.3s infinite}.showStarter__title{padding:12px 22px;border:2px solid rgba(255,236,174,.9);border-radius:999px;color:#5d2d13;background:linear-gradient(#fff8da,#efc778);box-shadow:0 15px 30px rgba(0,0,0,.22);font-size:clamp(21px,3vw,38px);font-weight:900}.showStarter__sub{font-size:13px;font-weight:800;text-shadow:0 2px 5px #000}@keyframes pulse{50%{transform:scale(1.15)}}.heroGroup{position:absolute;top:17%;left:50%;z-index:25;width:min(660px,94vw);height:400px;transform:translateX(-50%);pointer-events:none}.speechBubble{position:absolute;top:0;left:50%;width:min(520px,92vw);padding:15px 18px 16px;transform:translateX(-50%);text-align:right;border-radius:28px;background:linear-gradient(#fff,rgba(250,248,244,.96));box-shadow:0 18px 38px rgba(0,0,0,.15);transition:.35s}.speechBubble.is-hidden{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-12px) scale(.96)}.speechBubble:after{content:"";position:absolute;right:50%;bottom:-14px;transform:translateX(50%);border-width:14px 12px 0;border-style:solid;border-color:#faf8f4 transparent transparent}.speechBubble__title{margin-bottom:5px;color:#8b2f2f;font-size:15px;font-weight:900}.speechBubble__text{color:#223344;font-size:clamp(17px,1.15vw,20px);font-weight:800;line-height:1.55;transition:.2s}.speechBubble__text.is-changing{opacity:.1;transform:translateY(6px)}.speechBubble__audioActions{width:min(360px,90%);margin:9px auto 0;padding-top:8px;display:flex;justify-content:space-between;gap:68px;border-top:1px solid rgba(139,47,47,.1);pointer-events:auto}.speechAudioAction{border:0;padding:3px 5px;display:inline-flex;align-items:center;gap:6px;color:#4b342b;background:transparent;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}.arabiActor{position:absolute;left:50%;bottom:0;z-index:8;width:235px;display:flex;justify-content:center;transform:translateX(-50%)}.arabi{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.22));animation:float 2.8s infinite}.stageWelcome.is-speaking .arabi{animation:talking 1s infinite}@keyframes float{50%{transform:translateY(-7px)}}@keyframes talking{50%{transform:translateY(-6px) rotate(-1deg)}}.worldSigns{position:absolute;inset:0 0 var(--footer-space);z-index:22;pointer-events:none}.worldSign{position:absolute;width:176px;min-height:74px;padding:10px 12px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:3px solid rgba(255,224,135,.9);border-radius:18px;color:#fff;text-align:center;text-decoration:none;box-shadow:0 13px 23px rgba(0,0,0,.23),inset 0 2px 0 rgba(255,255,255,.35);transform-origin:top center;pointer-events:auto;opacity:0;translate:0 -10px;transition:.35s}.stageWelcome.is-ready .worldSign{opacity:1;translate:0 0}.worldSign__hanger{position:absolute;top:-32px;left:50%;width:2px;height:32px;background:#805224;transform:translateX(-50%)}.worldSign__hanger:before{content:"";position:absolute;top:-5px;left:50%;width:14px;height:9px;border:2px solid #ae7536;border-bottom:0;border-radius:10px 10px 0 0;transform:translateX(-50%)}.worldSign:after{content:"";position:absolute;inset:-7px;z-index:-1;opacity:0;border-radius:22px;box-shadow:0 0 24px 9px rgba(255,225,115,.8);transition:.18s}.worldSign:hover,.worldSign.is-active{transform:translateY(-4px) rotate(-1.5deg) scale(1.04);filter:saturate(1.12) brightness(1.06)}.worldSign:hover:after,.worldSign.is-active:after{opacity:1}.worldSign__icon{font-size:29px;line-height:1}.worldSign__title{font-size:14px;font-weight:900;line-height:1.2}.worldSign__sub{font-size:9px;font-weight:700}.worldSign--games{background:linear-gradient(#50c0ef,#238bc8)}.worldSign--free{color:#3b2b12;background:linear-gradient(#ffd868,#efad2c)}.worldSign--horizon{background:linear-gradient(#b369d8,#713b9d)}.worldSign--museum{background:linear-gradient(#64c86b,#2d9641)}.worldSign--garden{background:linear-gradient(#ffac51,#e56b20)}.worldSign--sound{background:linear-gradient(#5fc8c2,#257f79)}.worldSign--theater{background:linear-gradient(#e36d9c,#a93667)}.worldSign--train{background:linear-gradient(#7e9bea,#4056a6)}.worldSign--right-1{top:24%;right:4.2%}.worldSign--right-2{top:42%;right:8.5%}.worldSign--right-3{top:60%;right:4.4%}.worldSign--right-4{top:76%;right:10%}.worldSign--left-1{top:24%;left:4.2%}.worldSign--left-2{top:42%;left:8.5%}.worldSign--left-3{top:60%;left:4.4%}.worldSign--left-4{top:76%;left:10%}.startArea{position:absolute;left:50%;bottom:calc(var(--footer-space) + 20px);z-index:28;transform:translateX(-50%)}.stageBtn--start{position:relative;width:min(420px,56vw);min-height:66px;padding:13px 24px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(255,221,109,.78);border-radius:24px;color:#fff;background:linear-gradient(#35a745,#16802b 58%,#0b641e);box-shadow:0 18px 32px rgba(7,81,20,.3),inset 0 2px 0 rgba(255,255,255,.35);font-size:clamp(22px,2vw,32px);font-weight:900;cursor:pointer;transition:.2s}.stageBtn--start:hover{transform:translateY(-3px) scale(1.015)}.stageBtn__label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px}.stageBtn__shine{position:absolute;top:-30%;right:-45%;width:34%;height:160%;z-index:1;opacity:0;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(255,255,255,.5),rgba(255,255,255,.18),transparent)}.stageWelcome.is-ready .stageBtn__shine{animation:shine 4.4s infinite}@keyframes shine{76%{opacity:1}94%{right:118%;opacity:1}100%{right:125%;opacity:0}}.visitCounter{position:absolute;right:18px;bottom:calc(var(--footer-space) + 18px);z-index:30;min-width:215px;padding:9px 13px;display:flex;align-items:center;justify-content:center;gap:10px;border:2px solid rgba(238,183,80,.6);border-radius:16px;color:#5b3220;background:rgba(255,250,235,.95);box-shadow:0 12px 24px rgba(0,0,0,.15);font-size:12px;font-weight:800}.visitCounter__item{display:flex;align-items:center;gap:4px}.visitCounter__divider{width:1px;height:24px;background:rgba(139,47,47,.25)}.sparkLayer{position:absolute;inset:0;z-index:80;pointer-events:none}.spark{position:absolute;width:10px;height:10px;opacity:0;border-radius:50%;background:radial-gradient(circle,#fff8d8 0,#f3c96a 55%,transparent 75%);animation:spark .85s forwards}@keyframes spark{20%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.15)}}@media(min-width:769px) and (max-height:900px){.heroGroup{top:15%;height:330px}.speechBubble{width:min(480px,88vw);padding:12px 16px}.speechBubble__text{font-size:15px}.arabiActor{width:190px}.worldSign{width:148px;min-height:62px}.worldSign__icon{font-size:24px}.worldSign__title{font-size:12px}.stageBtn--start{min-height:54px;font-size:24px}}@media(max-width:1024px) and (min-width:769px){.worldSign{width:138px}.worldSign--right-1,.worldSign--right-3{right:2%}.worldSign--left-1,.worldSign--left-3{left:2%}}@media(max-width:768px){:root{--footer-space:68px}.stageBackdrop{background-image:url('/assets/img/arabimasra7-mobile.webp');background-position:top center}.stageBrand img{height:64px}.heroGroup{top:20%;width:100%;height:360px}.speechBubble{width:calc(100% - 22px);padding:12px 13px}.speechBubble__text{font-size:14px;line-height:1.48}.speechBubble__audioActions{width:88%;gap:58px}.arabiActor{width:142px}.worldSign{width:104px;min-height:66px;padding:8px 6px 7px;border-width:2px;border-radius:15px}.worldSign__hanger{top:-22px;height:22px}.worldSign__icon{font-size:23px}.worldSign__title{font-size:10px}.worldSign__sub{display:none}.worldSign--right-1{top:12%;right:18%}.worldSign--left-1{top:12%;left:18%}.worldSign--right-2{top:40%;right:2%}.worldSign--left-2{top:40%;left:2%}.worldSign--right-3{top:60%;right:1%}.worldSign--left-3{top:60%;left:1%}.worldSign--right-4{top:auto;right:19%;bottom:17%}.worldSign--left-4{top:auto;left:19%;bottom:17%}.startArea{bottom:calc(var(--footer-space) + 12px);width:calc(100% - 130px);max-width:360px}.stageBtn--start{width:100%;min-height:54px;padding:10px 14px;font-size:20px;border-radius:20px}.visitCounter{right:8px;bottom:calc(var(--footer-space) + 80px);min-width:0;padding:6px 8px;gap:6px;font-size:9px;border-radius:12px}.visitCounter__divider{height:18px}}@media(max-width:430px){.heroGroup{top:21%;height:330px}.speechBubble{padding:10px 11px}.speechBubble__title{font-size:12px}.speechBubble__text{font-size:12px}.speechAudioAction{font-size:10px}.arabiActor{width:126px}.worldSign{width:90px;min-height:58px}.worldSign__icon{font-size:20px}.worldSign__title{font-size:9px}.worldSign--right-1{right:20%}.worldSign--left-1{left:20%}.worldSign--right-4{right:20%;bottom:18%}.worldSign--left-4{left:20%;bottom:18%}.startArea{width:calc(100% - 110px)}.stageBtn--start{min-height:50px;font-size:17px}.visitCounter{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}/* ===================================================== SMART TV + LARGE LANDSCAPE FIX يوضع في آخر ملف welcome2.css ===================================================== */ /* أهم إصلاح: عدم إجبار المسرح على ارتفاع 620px لأن بعض شاشات السمارت ترجع ارتفاع CSS صغيرًا */ .stageFrame{ width:100%; height:100vh; min-height:0; } /* المتصفحات الحديثة */ @supports (height:100svh){ .stageFrame{ height:100svh; } } /* ===================================================== توافق مع متصفحات Smart TV القديمة بعضها لا يدعم خاصية translate المنفصلة ===================================================== */ .worldSign{ translate:none; transform:translateY(-10px); transition: opacity .35s ease, transform .35s ease, filter .18s ease; } .stageWelcome.is-ready .worldSign{ transform:translateY(0); } .stageWelcome.is-ready .worldSign:hover, .stageWelcome.is-ready .worldSign:focus, .stageWelcome.is-ready .worldSign.is-active{ transform:translateY(-4px) rotate(-1.5deg) scale(1.04); filter:saturate(1.12) brightness(1.06); } /* ===================================================== إظهار العنصر المحدد بريموت التلفزيون ===================================================== */ .worldSign:focus, .stageBtn:focus, .speechAudioAction:focus, .stageBrand:focus{ outline:5px solid #fff2a8; outline-offset:5px; } .showStarter:focus{ outline:6px solid #fff2a8; outline-offset:-14px; } /* ===================================================== شاشات السمارت التي يكون ارتفاع المتصفح فيها صغيرًا مثل 960x540 أو 1280x600 أو بعض شاشات 720p ===================================================== */ @media (min-width:900px) and (max-height:820px) and (orientation:landscape){ :root{ --footer-space:64px; } .stageTopBar{ top:4px; right:24px; left:24px; } .stageBrand img{ height:58px; } /* مجموعة عربي والفقاعة */ .heroGroup{ top:10%; width:min(540px,56vw); height:285px; } .speechBubble{ width:min(430px,46vw); padding:10px 14px; border-radius:20px; } .speechBubble__title{ margin-bottom:3px; font-size:12px; } .speechBubble__text{ font-size:13px; line-height:1.4; } .speechBubble__audioActions{ margin-top:5px; padding-top:5px; } .speechAudioAction{ padding:2px 3px; font-size:10px; } .speechAudioAction__icon{ font-size:14px; } .arabiActor{ width:155px; } /* لافتات العوالم */ .worldSign{ width:128px; min-height:54px; padding:6px 7px; border-width:2px; border-radius:14px; } .worldSign__hanger{ top:-21px; height:21px; } .worldSign__icon{ font-size:21px; } .worldSign__title{ font-size:10px; } .worldSign__sub{ font-size:8px; } .worldSign--right-1, .worldSign--left-1{ top:18%; } .worldSign--right-2, .worldSign--left-2{ top:36%; } .worldSign--right-3, .worldSign--left-3{ top:54%; } .worldSign--right-4, .worldSign--left-4{ top:72%; } /* زر ابدأ الرحلة */ .startArea{ bottom:calc(var(--footer-space) + 8px); } .stageBtn--start{ width:min(340px,38vw); min-height:44px; padding:8px 16px; border-radius:18px; font-size:18px; } /* عداد الزيارات */ .visitCounter{ right:24px; bottom:calc(var(--footer-space) + 10px); min-width:185px; padding:5px 8px; gap:6px; font-size:9px; } .visitCounter__divider{ height:18px; } } /* ===================================================== شاشات Full HD و4K ===================================================== */ @media (min-width:1600px) and (min-height:850px){ .stageTopBar{ top:14px; right:2.5vw; left:2.5vw; } .stageBrand img{ height:clamp(105px,6vw,145px); } .heroGroup{ top:16%; width:min(720px,48vw); height:440px; } .speechBubble{ width:min(560px,36vw); } .speechBubble__text{ font-size:clamp(18px,1.1vw,23px); } .arabiActor{ width:260px; } .worldSign{ width:clamp(185px,10vw,220px); min-height:80px; } .worldSign__icon{ font-size:32px; } .worldSign__title{ font-size:15px; } .worldSign__sub{ font-size:10px; } .startArea{ bottom:calc(var(--footer-space) + 26px); } .stageBtn--start{ width:min(460px,30vw); min-height:72px; } .visitCounter{ right:2.5vw; bottom:calc(var(--footer-space) + 24px); font-size:13px; } } /* ===================================================== TOUCH EDUCATIONAL BOARDS ===================================================== */ @media (hover:none) and (pointer:coarse) and (min-width:769px){ .worldSign{ min-height:86px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .stageBtn--start{ min-height:72px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .speechAudioAction{ min-width:130px; min-height:48px; padding:8px 12px; touch-action:manipulation; } .worldSign:active{ transform:translateY(-2px) scale(.97); filter:brightness(1.08); } .stageBtn--start:active{ transform:translateY(1px) scale(.98); } } /* ===================================================== LARGE EDUCATIONAL BOARDS البوردات التعليمية الكبيرة 2K و4K ===================================================== */ @media (min-width:2000px) and (min-height:1100px) and (orientation:landscape){ :root{ --footer-space:110px; } .stageTopBar{ top:24px; right:3vw; left:3vw; } .stageBrand img{ height:170px; } .heroGroup{ top:15%; width:900px; height:560px; } .speechBubble{ width:720px; padding:22px 28px 24px; border-radius:34px; } .speechBubble__title{ margin-bottom:8px; font-size:22px; } .speechBubble__text{ font-size:27px; line-height:1.55; } .speechBubble__audioActions{ width:480px; margin-top:14px; padding-top:12px; gap:90px; } .speechAudioAction{ min-height:48px; padding:8px 10px; font-size:18px; } .speechAudioAction__icon{ font-size:24px; } .arabiActor{ width:350px; } .worldSign{ width:290px; min-height:112px; padding:15px 18px; border-width:4px; border-radius:26px; } .worldSign__hanger{ top:-42px; height:42px; width:3px; } .worldSign__icon{ font-size:46px; } .worldSign__title{ font-size:22px; } .worldSign__sub{ margin-top:3px; font-size:15px; } .startArea{ bottom:calc(var(--footer-space) + 34px); } .stageBtn--start{ width:600px; min-height:94px; padding:18px 30px; border-radius:30px; font-size:38px; } .visitCounter{ right:3vw; bottom:calc(var(--footer-space) + 30px); min-width:320px; padding:14px 20px; gap:14px; border-radius:22px; font-size:18px; } .visitCounter__divider{ height:34px; } } /* ===================================================== AHLAN ARABI - FLYING LETTERS, WORDS AND GRAMMAR الحروف والكلمات والنحو المتطاير ===================================================== */ .flyingLayer{ position:absolute; inset:0; z-index:6; overflow:hidden; pointer-events:none; direction:rtl; } .flyingItem{ position:absolute; display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:5px 10px; opacity:0; white-space:nowrap; font-family: 'Baloo Bhaijaan 2', 'Alexandria', sans-serif; font-weight:900; line-height:1; border-radius:16px; text-shadow: 0 2px 0 rgba(255,255,255,.85), 0 7px 15px rgba(72,36,17,.24); filter: drop-shadow(0 8px 12px rgba(0,0,0,.18)); will-change:transform,opacity; backface-visibility:hidden; } .flyingItem--letter{ padding:4px 9px; color:#7c2d2d; background: linear-gradient( 145deg, rgba(255,255,255,.94), rgba(255,229,153,.90) ); border: 2px solid rgba(241,189,73,.72); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 8px 18px rgba(82,43,16,.16); } .flyingItem--word{ padding:7px 14px; color:#563016; background: linear-gradient( 145deg, rgba(255,255,255,.92), rgba(255,239,194,.88) ); border: 2px solid rgba(239,190,82,.65); box-shadow: inset 0 2px 0 rgba(255,255,255,.88), 0 9px 20px rgba(65,35,16,.16); } .flyingItem--phrase{ border-radius:999px; background: linear-gradient( 145deg, rgba(255,252,230,.95), rgba(243,201,106,.91) ); } .flyingItem--sentence{ padding:8px 17px; border-radius:999px; color:#334155; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(224,242,254,.92) ); border-color:rgba(89,170,211,.62); } /* ألوان متنوعة للعناصر */ .flyingItem--tone-1{ color:#8b2f2f; } .flyingItem--tone-2{ color:#216e39; } .flyingItem--tone-3{ color:#285d92; } .flyingItem--tone-4{ color:#7b3fa0; } .flyingItem--tone-5{ color:#a64c20; } .flyingItem--tone-6{ color:#8b2862; } /* الحركة من اليمين إلى اليسار */ @keyframes flyAcrossA{ 0%{ opacity:0; transform: translate3d(0,12px,0) rotate(5deg) scale(.82); } 9%{ opacity:.92; } 48%{ transform: translate3d(-68vw,-18px,0) rotate(-5deg) scale(1); } 88%{ opacity:.86; } 100%{ opacity:0; transform: translate3d(-145vw,-55px,0) rotate(8deg) scale(.88); } } /* الحركة من اليسار إلى اليمين */ @keyframes flyAcrossB{ 0%{ opacity:0; transform: translate3d(0,-8px,0) rotate(-6deg) scale(.84); } 9%{ opacity:.92; } 50%{ transform: translate3d(68vw,22px,0) rotate(4deg) scale(1); } 88%{ opacity:.86; } 100%{ opacity:0; transform: translate3d(145vw,48px,0) rotate(-7deg) scale(.88); } } /* حركة مائلة */ @keyframes flyAcrossC{ 0%{ opacity:0; transform: translate3d(0,-25px,0) rotate(8deg) scale(.82); } 10%{ opacity:.92; } 48%{ transform: translate3d(-67vw,35px,0) rotate(-3deg) scale(1.03); } 88%{ opacity:.84; } 100%{ opacity:0; transform: translate3d(-145vw,85px,0) rotate(7deg) scale(.86); } } /* ===================================================== HERO WORD الكلمة الكبيرة التي تظهر وسط المسرح ===================================================== */ .heroWord{ position:absolute; top:45%; left:50%; z-index:18; width:min(560px,80vw); opacity:0; visibility:hidden; pointer-events:none; text-align:center; transform: translate(-50%,-50%) scale(.55); } .heroWord__text{ display:inline-flex; align-items:center; justify-content:center; min-width:190px; min-height:90px; padding:14px 36px 18px; color:#7c2d2d; font-family: 'Baloo Bhaijaan 2', 'Alexandria', sans-serif; font-size:clamp(42px,6vw,92px); font-weight:900; line-height:1; border: 4px solid rgba(246,198,91,.85); border-radius:35px; background: linear-gradient( 145deg, rgba(255,255,255,.97), rgba(255,233,163,.95) ); box-shadow: inset 0 4px 0 rgba(255,255,255,.92), 0 20px 48px rgba(74,36,15,.25), 0 0 35px rgba(255,216,103,.40); text-shadow: 0 3px 0 rgba(255,255,255,.92), 0 8px 18px rgba(91,45,18,.23); } .heroWord.is-active{ visibility:visible; animation:heroWordAppear 1.1s ease forwards; } @keyframes heroWordAppear{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.42) rotate(-6deg); } 30%{ opacity:1; transform: translate(-50%,-50%) scale(1.12) rotate(2deg); } 62%{ opacity:1; transform: translate(-50%,-50%) scale(.98) rotate(-1deg); } 82%{ opacity:1; transform: translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform: translate(-50%,-62%) scale(1.12); } } /* ===================================================== TABLET AND MOBILE ===================================================== */ @media(max-width:768px){ .flyingLayer{ z-index:5; } .flyingItem{ min-width:32px; min-height:32px; padding:4px 7px; border-radius:12px; text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 5px 10px rgba(72,36,17,.20); } .flyingItem--word{ padding:5px 9px; } .flyingItem--phrase{ padding:5px 10px; } .flyingItem--sentence{ max-width:82vw; padding:6px 11px; } .heroWord{ top:49%; width:86vw; } .heroWord__text{ min-width:145px; min-height:64px; padding:10px 22px 13px; border-width:3px; border-radius:24px; font-size:clamp(32px,12vw,55px); } } @media(max-width:430px){ .flyingItem--sentence{ display:none; } .heroWord{ top:50%; } .heroWord__text{ min-width:125px; min-height:58px; padding:9px 18px 11px; font-size:34px; } } /* ===================================================== SMART TV AND LARGE SCREENS ===================================================== */ @media(min-width:1600px){ .flyingItem--letter{ min-width:58px; min-height:58px; } .flyingItem--word{ padding:10px 19px; } .heroWord__text{ min-width:270px; min-height:115px; } } @media (min-width:900px) and (max-height:820px) and (orientation:landscape){ .heroWord{ top:44%; } .heroWord__text{ min-width:150px; min-height:60px; padding:8px 22px 11px; border-width:3px; border-radius:22px; font-size:clamp(32px,5vw,56px); } } /* إيقاف المؤثرات لمن يختار تقليل الحركة */ @media(prefers-reduced-motion:reduce){ .flyingLayer, .heroWord{ display:none!important; } } /* ===================================================== HERO WORD FINAL POSITION إظهار الكلمات الكبيرة أسفل شخصية عربي ===================================================== */ /* السماح للكلمة بالخروج أسفل حدود مجموعة عربي. */ .heroGroup{ overflow:visible; } /* الكلمة أصبحت داخل heroGroup، وبالتالي موضعها محسوب بالنسبة لشخصية عربي. */ .heroWord{ top:auto; right:auto; left:50%; bottom:-76px; z-index:9; width:min(520px,90vw); opacity:0; visibility:hidden; pointer-events:none; text-align:center; transform: translateX(-50%) translateY(12px) scale(.55); } /* جعل البطاقة أصغر من التصميم السابق حتى تظهر كلقب تحت عربي ولا تغطي المسرح. */ .heroWord__text{ min-width:165px; min-height:64px; padding:10px 28px 13px; border-width:3px; border-radius:25px; font-size:clamp(34px,4vw,62px); } /* الحركة الجديدة لا تستخدم translateY(-50%) لأن العنصر أصبح مربوطًا بأسفل مجموعة عربي. */ @keyframes heroWordAppear{ 0%{ opacity:0; transform: translateX(-50%) translateY(18px) scale(.50) rotate(-4deg); } 28%{ opacity:1; transform: translateX(-50%) translateY(0) scale(1.08) rotate(1deg); } 62%{ opacity:1; transform: translateX(-50%) translateY(0) scale(.98) rotate(0); } 82%{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); } 100%{ opacity:0; transform: translateX(-50%) translateY(14px) scale(.86); } } /* ===================================================== MOBILE ===================================================== */ @media(max-width:768px){ .heroWord{ top:auto; bottom:-55px; width:88vw; } .heroWord__text{ min-width:125px; min-height:50px; padding:7px 18px 10px; border-width:2px; border-radius:19px; font-size:clamp(27px,9vw,42px); } } @media(max-width:430px){ .heroWord{ top:auto; bottom:-48px; width:90vw; } .heroWord__text{ min-width:110px; min-height:45px; padding:6px 15px 8px; font-size:29px; } } /* ===================================================== SHORT LANDSCAPE / SMART TV ===================================================== */ @media (min-width:769px) and (max-height:820px) and (orientation:landscape){ .heroWord{ top:auto; bottom:-52px; } .heroWord__text{ min-width:125px; min-height:46px; padding:6px 18px 8px; border-width:2px; border-radius:18px; font-size:clamp(27px,4vw,43px); } } /* ===================================================== FULL HD AND LARGE SCREENS ===================================================== */ @media (min-width:1600px) and (min-height:850px){ .heroWord{ bottom:-90px; } .heroWord__text{ min-width:210px; min-height:78px; padding:12px 34px 16px; font-size:clamp(48px,3.8vw,72px); } } /* ===================================================== LARGE EDUCATIONAL BOARDS 2K / 4K ===================================================== */ @media (min-width:2000px) and (min-height:1100px) and (orientation:landscape){ .heroWord{ bottom:-112px; width:700px; } .heroWord__text{ min-width:290px; min-height:100px; padding:16px 45px 20px; border-width:4px; border-radius:32px; font-size:82px; } } /* ===================================================== START SCREEN FULL COVER FIX إصلاح تغطية شاشة اضغط لبدء العرض للسمارت TV والبوردات والمتصفحات القديمة ===================================================== */ .showStarter{ /* fallback للمتصفحات التي لا تدعم inset */ position:absolute; top:0; right:0; bottom:0; left:0; /* إجبار الزر على تغطية المسرح كله */ width:100%; height:100%; min-width:100%; min-height:100%; margin:0; padding:20px; /* منع شكل الزر الافتراضي في متصفحات التلفزيون */ border-radius:0; -webkit-appearance:none; appearance:none; /* تثبيت المحتوى في المنتصف */ display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; z-index:100; } /* تأكيد أن الشاشة مرتبطة بالمسرح نفسه وليست بحجم محتوى الزر. */ .stageFrame > .showStarter{ position:absolute; top:0; right:0; bottom:0; left:0; } /* ===================================================== SMART TV + LANDSCAPE BOARD ===================================================== */ @media (min-width:769px) and (orientation:landscape){ .showStarter{ width:100vw; height:100vh; max-width:none; max-height:none; min-width:100vw; min-height:100vh; } } /* بعض الشاشات التعليمية الكبيرة تعرض أبعاد CSS غريبة. */ @media (min-width:1600px) and (orientation:landscape){ .showStarter{ position:fixed; top:0; right:0; bottom:0; left:0; width:100vw; height:100vh; min-width:100vw; min-height:100vh; z-index:999; } } /* ===================================================== START MESSAGE RESPONSIVE SIZE ===================================================== */ @media (min-width:900px) and (max-height:820px) and (orientation:landscape){ .showStarter{ gap:6px; padding:12px; } .showStarter__spark{ font-size:30px; } .showStarter__title{ padding:9px 20px; font-size:clamp(20px,3vw,30px); } .showStarter__sub{ font-size:11px; } } /* البوردات الكبيرة 2K و4K */ @media (min-width:2000px) and (min-height:1100px) and (orientation:landscape){ .showStarter{ gap:15px; } .showStarter__spark{ font-size:70px; } .showStarter__title{ padding:20px 42px; border-width:4px; font-size:58px; } .showStarter__sub{ font-size:23px; } }