/* chhaldar.com — Wise-style design system (owner-approved mockup v5, 2026-07-12). One stylesheet serves AR (rtl) and FR/EN (ltr): layout uses logical properties, direction comes from . */ :root{ --forest:#163300; --forest-deep:#0E2800; --bright:#9FE870; --bright-press:#8FDD5F; --paper:#FFFFFF; --tint:#F2F5EC; --ink:#0E1512; --muted:#454F41; --on-forest:#ECF7E2; --muted-forest:#A9C693; --up:#17B06B; --down:#E5484D; --font-ar:"IBM Plex Sans Arabic","Segoe UI","Tahoma",sans-serif; --font-ltr:"Plus Jakarta Sans","IBM Plex Sans Arabic","Segoe UI",sans-serif; --w-display:700; } html[dir="ltr"]{ --w-display:800; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-ar); line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; } html[dir="ltr"] body{font-family:var(--font-ltr);} svg{display:block;} a{color:inherit; text-decoration:none;} .num{font-variant-numeric:tabular-nums;} .wrap{max-width:1200px; margin:0 auto; padding-inline:clamp(16px,4vw,48px);} .display{font-weight:var(--w-display); letter-spacing:-.02em; line-height:1.06; text-wrap:balance; margin:0;} /* ---------- buttons ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; border-radius:999px; font-weight:700; font-size:1.02rem; padding:15px 32px; transition:background .2s ease, transform .2s ease;} .btn:focus-visible{outline:3px solid var(--bright); outline-offset:2px;} .btn-green{background:var(--bright); color:var(--forest);} .btn-green:hover{background:var(--bright-press); transform:translateY(-1px);} .btn-outline-l{border:2px solid var(--on-forest); color:var(--on-forest);} .btn-outline-l:hover{background:rgba(236,247,226,.1);} .arrow-link{font-weight:700; color:var(--forest); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; cursor:pointer; font-size:1.02rem;} /* ---------- nav ---------- */ .nav{position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(16px,4vw,48px); background:var(--forest);} .wordmark{font-weight:800; font-size:1.5rem; color:var(--bright); direction:ltr; letter-spacing:-.03em; font-family:var(--font-ltr);} .nav-links{display:flex; gap:28px; font-size:.95rem; font-weight:600;} .nav-links a{color:var(--on-forest); padding:8px 0;} .nav-cta{display:flex; align-items:center; gap:12px;} .langs{display:flex; gap:2px;} .langs a{font-size:.78rem; padding:6px 12px; border-radius:999px; color:var(--on-forest); font-weight:600;} .langs .on{background:var(--bright); color:var(--forest); font-weight:800;} .nav .btn{padding:11px 24px; font-size:.92rem;} @media(max-width:820px){ .nav-links{display:none;} } /* ---------- hero ---------- */ .hero{background:var(--forest); color:var(--on-forest); overflow:hidden; position:relative;} .hero .wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr); gap:clamp(20px,4vw,56px); align-items:end; padding-top:clamp(48px,7vw,104px);} .hero-copy{padding-bottom:clamp(56px,8vw,120px);} .hero h1{font-size:clamp(2.7rem,8.4vw,6.6rem); color:var(--bright); font-weight:var(--w-display); letter-spacing:-.02em; line-height:1.04; margin:0 0 26px;} .hero p.lead{color:var(--on-forest); font-size:clamp(1.05rem,1.6vw,1.3rem); margin:0 0 34px; max-width:38ch; font-weight:500;} .cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;} .cta-note{font-size:.85rem; color:var(--muted-forest); margin-top:16px;} @keyframes appear{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}} .ap{opacity:0; animation:appear .7s ease-out forwards;} .ap-1{animation-delay:.05s}.ap-2{animation-delay:.16s}.ap-3{animation-delay:.28s}.ap-4{animation-delay:.4s} .hero-phone{position:relative; align-self:end; display:flex; justify-content:center;} .phone{background:#041200; border-radius:44px 44px 0 0; padding:11px 11px 0; box-shadow:0 -20px 80px rgba(0,0,0,.35); position:relative; width:min(330px,86%);} .phone .screen{background:#F5F6F2; border-radius:34px 34px 0 0; overflow:hidden; direction:rtl; color:var(--ink); display:flex; flex-direction:column; height:520px;} html[dir="ltr"] .phone .screen{direction:ltr;} .phone .notch{position:absolute; top:20px; left:50%; transform:translateX(-50%); width:92px; height:24px; background:#041200; border-radius:13px; z-index:5;} @media(max-width:820px){ .hero .wrap{grid-template-columns:1fr;} .hero-phone{margin-top:8px;} .phone .screen{height:400px;} } /* ---------- in-phone app UI (always rtl: it depicts the AR app) ---------- */ .abar{display:flex; align-items:center; gap:8px; padding:38px 18px 8px; font-weight:800; font-size:1rem;} .abar .wm{color:var(--forest); direction:ltr; font-family:var(--font-ltr);} .cities{display:flex; gap:6px; padding:8px 16px 4px; flex-wrap:wrap;} .city{font-size:.7rem; padding:5px 12px; border-radius:999px; background:#E9EDE3;} .city.on{background:var(--forest); color:var(--bright); font-weight:800;} .acard{background:#fff; border-radius:22px; margin:8px 14px; padding:14px 16px;} .arow{display:flex; align-items:center; gap:8px;} .flag{width:24px;height:24px;border-radius:50%;color:#fff;font-size:.58rem;font-weight:800; display:flex;align-items:center;justify-content:center;flex:0 0 24px; font-family:var(--font-ltr);} .cur{font-weight:800; font-size:.85rem;} .live{margin-inline-start:auto; display:flex; align-items:center; gap:4px; font-size:.62rem; color:#5F6B5A;} .live i{width:7px;height:7px;border-radius:50%;background:var(--up);} .bigrate{font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; letter-spacing:-.01em;} .bigrate small{font-size:.8rem; color:#5F6B5A; font-weight:700;} .updown{display:flex; gap:12px; font-size:.68rem; color:#5F6B5A; margin-top:2px;} .updown b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:800;} .ringrow{display:flex; align-items:center; gap:9px; margin-top:9px; padding-top:9px; border-top:1px solid #E5E9DF;} .ring{width:40px;height:40px;border-radius:50%;flex:0 0 40px; background:conic-gradient(var(--up) 0 86%, var(--down) 86% 100%); display:flex;align-items:center;justify-content:center;} .ring b{background:#fff;width:29px;height:29px;border-radius:50%;font-size:.62rem; display:flex;align-items:center;justify-content:center;font-weight:800;} .ringlabel{font-size:.66rem; color:#5F6B5A; line-height:1.5;} /* ---------- ticker ---------- */ .ticker-wrap{background:var(--forest-deep); overflow:hidden; padding:14px 0;} .ticker{display:flex; gap:48px; width:max-content; animation:slide 30s linear infinite; direction:ltr; font-family:var(--font-ltr);} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk{display:flex; align-items:center; gap:10px; color:var(--on-forest); font-size:.9rem; white-space:nowrap; font-weight:600;} .tk b{font-variant-numeric:tabular-nums; font-weight:800;} .tk .code{color:var(--muted-forest);} .tk .chg{font-size:.75rem; font-weight:800;} .tk .chg.up{color:var(--bright);} .tk .chg.dn{color:#FF9BA0;} /* ---------- feature blocks ---------- */ .blocks{padding:clamp(64px,9vw,128px) 0 clamp(24px,4vw,48px);} .blocks-head{max-width:820px; margin-bottom:clamp(40px,6vw,80px);} .blocks-head .display{font-size:clamp(2.1rem,5.2vw,4rem);} .block{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center; padding:clamp(28px,4.5vw,60px) 0;} .block:nth-child(even) .b-media{order:-1;} .block h3{font-size:clamp(1.55rem,3vw,2.5rem); font-weight:var(--w-display); letter-spacing:-.02em; line-height:1.14; margin:0 0 14px;} .block p{margin:0 0 20px; color:var(--muted); font-size:1.08rem; max-width:44ch;} .b-media{background:var(--tint); border-radius:36px; padding:clamp(24px,3.4vw,44px); display:flex; align-items:center; justify-content:center; min-height:280px;} .b-media.green{background:var(--bright);} .b-media.forest{background:var(--forest);} .b-inner{width:100%; max-width:380px; direction:rtl;} html[dir="ltr"] .b-inner{direction:ltr;} @media(max-width:820px){ .block{grid-template-columns:1fr;} .block:nth-child(even) .b-media{order:0;} } .frag-card{background:#fff; border-radius:24px; padding:20px;} .frag-card .cities{padding:0 0 6px;} .frag-card .city{font-size:.82rem; padding:7px 15px;} .alertline{display:flex; align-items:center; gap:14px;} .alertline .bell{width:52px;height:52px;border-radius:50%;background:var(--bright); display:flex;align-items:center;justify-content:center;flex:0 0 52px;} .alertline .bell svg{width:24px;height:24px;stroke:var(--forest);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} .alertline b{display:block;font-size:1.1rem;font-weight:800;} .alertline span{font-size:.85rem;color:#5F6B5A;} .convline{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums;} .convline .amt{flex:1;background:#F2F5EC;border-radius:16px;padding:14px 16px;font-weight:800;font-size:1.25rem;direction:ltr;text-align:left; font-family:var(--font-ltr);} .convline .amt.hl{background:var(--bright);color:var(--forest);} .convline .eq{font-weight:800;color:#5F6B5A;font-size:1.2rem;} .prov{display:flex; align-items:center; gap:10px; background:#fff; border-radius:18px; padding:13px 15px; margin-bottom:10px;} .prov:last-child{margin-bottom:0;} .plogo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:.58rem;font-weight:800;flex:0 0 34px; font-family:var(--font-ltr);} .prov .nm{font-weight:800;font-size:.9rem; font-family:var(--font-ltr);} .prov .rt{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:1rem;direction:ltr; font-family:var(--font-ltr);} .prov .rt small{display:block;font-size:.6rem;color:var(--up);font-weight:700;text-align:left;} /* ---------- stats ---------- */ .stats-band{background:var(--paper); padding:clamp(40px,6vw,84px) 0;} .stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(20px,3vw,40px); border-top:2px solid var(--ink); padding-top:clamp(28px,4vw,48px);} .sstat b{display:block; font-size:clamp(2.6rem,6vw,4.6rem); font-weight:var(--w-display); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--forest); font-family:var(--font-ltr);} .sstat span{font-size:1rem; color:var(--muted); font-weight:600;} /* ---------- pipeline ---------- */ .pipe{background:var(--tint); padding:clamp(64px,9vw,120px) 0;} .pipe .display{font-size:clamp(1.9rem,4.6vw,3.4rem); margin-bottom:clamp(36px,5vw,64px);} .pipe-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;} .pcard{background:#fff; border-radius:28px; padding:28px;} .pcard .n{width:52px;height:52px;border-radius:50%;background:var(--bright);color:var(--forest); font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center;margin-bottom:18px; font-family:var(--font-ltr);} .pcard h4{margin:0 0 8px; font-size:1.15rem; font-weight:800;} .pcard p{margin:0; color:var(--muted); font-size:.95rem;} .pcard .demo{margin-top:14px; font-variant-numeric:tabular-nums; font-weight:800; direction:ltr; text-align:left; font-size:1.05rem; font-family:var(--font-ltr);} .pcard .demo .cut{color:var(--down); text-decoration:line-through; opacity:.6; margin-right:8px;} .pcard .demo .ok{background:var(--bright); border-radius:8px; padding:1px 8px; color:var(--forest);} .pipe-foot{margin-top:26px; color:var(--muted); font-size:1rem; max-width:60ch;} .pipe-foot b{color:var(--ink);} /* ---------- privacy band ---------- */ .priv{background:var(--forest); color:var(--on-forest); padding:clamp(72px,10vw,140px) 0;} .priv .display{font-size:clamp(2.4rem,7vw,5.4rem); color:var(--bright);} .priv .after{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,3vw,44px); margin-top:clamp(34px,5vw,60px);} .priv .after p{margin:0; color:var(--muted-forest); font-size:1rem;} .priv .after p b{color:#fff; display:block; margin-bottom:6px; font-size:1.08rem;} /* ---------- download ---------- */ .dl{background:var(--bright); color:var(--forest); text-align:center; padding:clamp(72px,10vw,140px) 0;} .dl .display{font-size:clamp(2.3rem,6vw,4.7rem); color:var(--forest); margin-bottom:14px;} .dl p{margin:0 auto 34px; max-width:52ch; font-size:1.1rem; font-weight:600;} .badge{display:inline-flex; align-items:center; gap:12px; background:var(--forest); color:#fff; border-radius:16px; padding:14px 30px; direction:ltr; opacity:.9; font-family:var(--font-ltr);} .badge svg{width:26px;height:26px;} .badge .b2{text-align:left; line-height:1.15;} .badge .b2 small{font-size:.62rem; display:block; opacity:.85;} .badge .b2 b{font-size:1.15rem;} .soon{display:inline-block; background:var(--forest); color:var(--bright); font-weight:800; border-radius:999px; padding:8px 22px; font-size:.9rem; margin-top:18px;} /* ---------- footer ---------- */ footer{background:var(--forest-deep); color:var(--muted-forest); padding:44px 0; font-size:.9rem;} .foot-row{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;} .foot-links{display:flex; gap:26px; flex-wrap:wrap;} .foot-links a{color:var(--on-forest); text-decoration:underline; text-underline-offset:4px; font-weight:600;} .foot-mail{direction:ltr; color:var(--bright); font-weight:700; font-family:var(--font-ltr);} .disclaimer{margin:18px 0 0; font-size:.78rem; opacity:.85;} /* ---------- legal pages (privacy / terms) ---------- */ .legal{max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(16px,4vw,48px) clamp(64px,8vw,110px);} .legal h1{font-size:clamp(2rem,4.6vw,3.2rem); font-weight:var(--w-display); letter-spacing:-.02em; margin:0 0 8px;} .legal .date{color:var(--muted); font-size:.9rem; margin:0 0 40px;} .legal h2{font-size:1.25rem; font-weight:800; color:var(--forest); margin:34px 0 8px;} .legal p{margin:0; color:var(--ink); font-size:1.02rem;} .legal .mail{direction:ltr; font-weight:700; color:var(--forest); font-family:var(--font-ltr);} /* ---------- reveal ---------- */ .rv{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;} .rv.in{opacity:1; transform:none;} @media (prefers-reduced-motion: reduce){ .ticker{animation:none;} .rv{opacity:1; transform:none; transition:none;} .ap{opacity:1; animation:none;} }