Hamza-AyedandClaude Opus 5
75b80bd299
- marketing: index.html من 2274 إلى 775 سطراً، والباقي إلى styles/ (tokens·base·components·sections·responsive) و js/ (app·i18n·calculator·analytics) و i18n/ بخمس لغات (ar·en·fr·es·tr) عبر سمة data-i18n. - docs/05 + docs/33 + لوحة السوبر-أدمن: الباقات صارت ثلاثاً (إطلاق · نمو · سيادة) بدل الأربع، وتحديث docs/31 بما يطابقها. - docs/36: توثيق سيرو إكسبرس للتوصيل. - تنظيف استيرادات غير مستعملة في apps/rider و apps/driver. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
103 lines
8.0 KiB
CSS
103 lines
8.0 KiB
CSS
/* buttons */
|
|
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;
|
|
font-size:16px;padding:15px 26px;border-radius:var(--radius-btn);border:1px solid transparent;
|
|
cursor:pointer;transition:transform .18s var(--ease),box-shadow .25s,background .2s;position:relative;overflow:hidden}
|
|
.btn:hover{transform:translateY(-2px)}
|
|
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:0 8px 24px var(--brand-glow)}
|
|
.btn-primary:hover{background:var(--brand-600);box-shadow:0 12px 32px var(--brand-glow)}
|
|
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
|
|
background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
|
|
transform:skewX(-20deg);animation:sheen 8s ease-in-out infinite}
|
|
@keyframes sheen{0%,88%{left:-60%}96%{left:130%}100%{left:130%}}
|
|
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
|
|
.btn-ghost:hover{border-color:var(--brand-500);color:var(--brand-500)}
|
|
.btn-wa{background:#25D366;color:#062e14}
|
|
.btn-wa:hover{background:#1fbe5a}
|
|
.btn-lg{padding:17px 34px;font-size:17px}
|
|
|
|
/* ============ NAV ============ */
|
|
header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,border-color .3s;
|
|
border-bottom:1px solid transparent}
|
|
header.scrolled{background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
|
|
border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
|
|
.nav{display:flex;align-items:center;gap:28px;height:72px}
|
|
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate}
|
|
.brand-badge{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:6px 12px;box-shadow:0 2px 10px rgba(10,17,40,.18)}
|
|
.brand-badge img{height:22px;display:block}
|
|
.foot-brand .brand-badge img{height:24px}
|
|
.brand .z{color:var(--signal-400)}
|
|
.brand svg{width:30px;height:30px}
|
|
.nav-links{display:flex;gap:26px;margin-inline-start:14px}
|
|
.nav-links a{font-size:15px;font-weight:500;color:var(--text-soft);transition:color .2s}
|
|
.nav-links a:hover{color:var(--text)}
|
|
.nav-right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
|
|
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:transparent;
|
|
color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.2s}
|
|
.icon-btn:hover{border-color:var(--brand-500);color:var(--brand-500)}
|
|
.lang-wrap{position:relative}
|
|
.lang-menu{position:absolute;top:48px;inset-inline-end:0;background:var(--card);border:1px solid var(--border);
|
|
border-radius:12px;box-shadow:var(--shadow-md);padding:6px;min-width:150px;opacity:0;visibility:hidden;
|
|
transform:translateY(-8px);transition:.2s var(--ease);z-index:120}
|
|
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:none}
|
|
.lang-menu button{display:block;width:100%;text-align:start;padding:9px 12px;border:0;background:transparent;
|
|
color:var(--text);font-family:inherit;font-size:15px;border-radius:8px;cursor:pointer}
|
|
.lang-menu button:hover,.lang-menu button.active{background:var(--bg-alt);color:var(--brand-500)}
|
|
.menu-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:transparent;
|
|
color:var(--text);cursor:pointer;place-items:center;transition:.2s}
|
|
.menu-toggle:hover{border-color:var(--brand-500);color:var(--brand-500)}
|
|
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;transition:opacity .3s}
|
|
.mobile-overlay.show{display:block;opacity:1}
|
|
.mobile-drawer{display:none;position:fixed;top:72px;inset-inline:0;background:var(--card);border-bottom:1px solid var(--border);
|
|
box-shadow:var(--shadow-lg);z-index:101;padding:16px 24px 24px;transform:translateY(-10px);opacity:0;
|
|
transition:transform .3s var(--ease),opacity .3s;max-height:calc(100svh - 72px);overflow-y:auto}
|
|
.mobile-drawer.open{display:block;transform:none;opacity:1}
|
|
.mobile-drawer a{display:block;padding:14px 0;font-size:17px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}
|
|
.mobile-drawer a:last-child{border-bottom:none}
|
|
.mobile-drawer .btn{width:100%;justify-content:center;margin-top:12px}
|
|
|
|
/* ============ HERO ============ */
|
|
/* ============ GRAIN TEXTURE (dark sections) ============ */
|
|
.grain{position:relative}
|
|
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
background-size:180px 180px}
|
|
|
|
.hero{padding:100px 0 60px;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:
|
|
radial-gradient(1000px 500px at 80% -10%,rgba(46,75,255,.28),transparent 60%),
|
|
radial-gradient(700px 450px at 10% 100%,rgba(214,219,238,.14),transparent 60%),var(--midnight-900);
|
|
color:#EAF0FF;overflow:hidden;position:relative}
|
|
html[dir="ltr"] .hero{background:radial-gradient(1000px 500px at 20% -10%,rgba(46,75,255,.28),transparent 60%),
|
|
radial-gradient(700px 450px at 90% 100%,rgba(214,219,238,.14),transparent 60%),var(--midnight-900)}
|
|
.hero>.wrap{width:100%}
|
|
.hero-map{position:absolute;inset:-4%;opacity:.5;pointer-events:none;animation:mapDrift 24s ease-in-out infinite}
|
|
@keyframes mapDrift{0%{transform:translate(0,0) scale(1.02)}50%{transform:translate(-1.2%,.8%) scale(1.045)}100%{transform:translate(0,0) scale(1.02)}}
|
|
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;
|
|
flex-direction:column;align-items:center;gap:8px;color:#8A99C2;font-size:12px;text-decoration:none}
|
|
.scroll-cue .chev{width:20px;height:20px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;
|
|
transform:rotate(-45deg);animation:cueBounce 1.8s ease-in-out infinite}
|
|
html[dir="ltr"] .scroll-cue .chev{transform:rotate(-45deg)}
|
|
@keyframes cueBounce{0%,100%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(6px) rotate(-45deg)}}
|
|
@media(max-height:760px){.hero{min-height:auto;padding:96px 0 48px}}
|
|
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}
|
|
.hero h1{font-size:clamp(36px,5.4vw,62px);color:#fff;margin-bottom:22px}
|
|
.hero h1 .hl{color:var(--signal-400)}
|
|
.hero .word{display:inline-block;opacity:0;transform:translateY(16px);animation:wordIn .6s var(--ease) forwards}
|
|
@keyframes wordIn{to{opacity:1;transform:none}}
|
|
.hero-sub{font-size:19px;color:#B7C4E6;max-width:560px;margin-bottom:30px}
|
|
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
|
|
.trust-line{font-size:14px;color:#8A99C2;display:flex;align-items:center;gap:8px}
|
|
.trust-line b{color:#C7D3F0;font-weight:500}
|
|
.hero-visual{position:relative;height:520px}
|
|
/* phones */
|
|
.phone{position:absolute;width:240px;border-radius:36px;background:#080d1e;border:4px solid #233463;
|
|
box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 30px rgba(46,75,255,.3);overflow:hidden;animation:float 6s ease-in-out infinite}
|
|
.phone.p1{inset-inline-end:20px;top:10px;z-index:3}
|
|
.phone.p2{inset-inline-start:10px;top:110px;z-index:2;animation-delay:-3s;width:230px}
|
|
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
|
|
.p-notch{height:20px;background:#080d1e;position:relative;z-index:5}
|
|
.p-notch::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:50px;height:5px;border-radius:6px;background:#1e2d54}
|
|
.p-screen{padding:0;min-height:auto;background:transparent;overflow:hidden}
|
|
.p-screen img{width:100%;height:auto;display:block;border-radius:0 0 32px 32px}
|
|
.p-map{height:150px;border-radius:14px;background:
|
|
linear-gradient(135deg,#13224a,#0e1730);position:relative;overflow:hidden;margin-bottom:12px}
|
|
.p-route{position:absolute;top:40%;left:10%;width:80%;height:3px;background:var(--brand-500);border-radius:3px; |