/* ========================================================================== The Point Agency — site stylesheet -------------------------------------------------------------------------- One stylesheet for every page in both languages — seven English, seven Arabic. (404.html is the exception: it carries its own styles so it can render even if this file fails to load.) No build step, no framework: the pages are hand-written HTML, so everything here is plain CSS with custom properties for the brand palette. Reading order: 1. Tokens & base 2. Preloader, grain, scroll progress 3. Navigation 4. Buttons & arrow links 5. Hero 6. Section scaffolding + reveal animations 7. About & stats (home, about) 8. Vision / mission / values (about) 9. Services cards (home, services) 10. Process steps (services) 11. Work cards & client wall (home, work) 12. Results (home, results) 13. Pricing (home, pricing) 14. Founder (home, founder) 15. Contact & closing CTA (home, contact) 16. Footer 17. Responsive 18. Arabic / RTL 19. Reduced motion ========================================================================== */ /* ========================================================================== 1. Tokens & base ========================================================================== */ :root{ /* Brand purples, lightest to deepest */ --lav-light:#8a70b4; --lav:#7a5fa6; --lav-dark:#5d4785; --ink:#211d3b; --paper:#f1eef7; --gold:#a97f3c; /* Tint used for every hairline border and glass panel on the page. */ --line:rgba(147,123,177,.24); --panel:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.42)); /* Muted text tints, dark to light */ --ink-80:rgba(33,29,59,.8); --ink-60:rgba(33,29,59,.58); --ink-45:rgba(33,29,59,.45); --ease:cubic-bezier(.22,1,.36,1); /* Inter — the go-to workhorse typeface for modern web work, with a full system-font fallback so it still looks right before the webfont lands. */ --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Arabic. Tajawal is geometric and low-contrast, so it sits next to Inter without either one looking like the odd one out. Only the /ar/ pages link the webfont, so English visitors never download it. */ --ff-ar:'Tajawal','Inter',system-ui,'Segoe UI',Tahoma,Arial,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{overscroll-behavior:none} body{ font-family:var(--ff); /* Paper texture, washed out behind a flat tint so text stays readable. */ background:linear-gradient(rgba(241,238,247,.55),rgba(241,238,247,.55)), url("bg-paper.jpg") center top/cover no-repeat fixed, var(--paper); color:var(--ink); overflow-x:hidden; } h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em} ::selection{background:var(--lav);color:#fff} /* A note on the :is(h2,h3) selectors further down: the same card component appears on the home page nested under a section

and again on its own page directly under the

, so the correct heading level genuinely differs between pages. Matching the component instead of one fixed tag keeps the document outline honest without duplicating the rules. */ /* Keyboard users get a visible target before anything else on the page. */ .skip-link{position:fixed;top:-100px;left:16px;z-index:9999;background:var(--lav);color:#fff;padding:12px 22px;border-radius:100px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;font-weight:600;transition:top .3s} .skip-link:focus{top:16px} /* One consistent focus ring for everything reachable by keyboard. */ a:focus-visible,button:focus-visible{outline:2px solid var(--lav-dark);outline-offset:3px;border-radius:4px} /* Shared spin used by the brand ring in the loader, footer, contact and founder blocks. */ @keyframes spin{to{transform:rotate(360deg)}} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ========================================================================== 2. Preloader, grain, scroll progress ========================================================================== */ #loader{position:fixed;inset:0;z-index:9000;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .9s var(--ease),visibility .9s} #loader.done{opacity:0;visibility:hidden;pointer-events:none} #loader>*{flex:none;margin:14px 0} #loader svg{display:block;width:130px;height:130px;overflow:visible;transform:rotate(-60deg)} #loader .ring{fill:none;stroke:var(--lav);stroke-width:10;stroke-linecap:round;stroke-dasharray:565;stroke-dashoffset:565;animation:draw 1.3s var(--ease) forwards;filter:drop-shadow(0 0 18px rgba(147,123,177,.6))} @keyframes draw{to{stroke-dashoffset:80}} #loader .word{letter-spacing:.55em;font-size:15px;color:var(--lav);text-transform:uppercase;padding-left:.55em;opacity:0;animation:fadeUp .8s .25s var(--ease) forwards} #loader .bar{width:180px;height:1px;background:rgba(147,123,177,.25);overflow:hidden;border-radius:2px} #loader .bar i{display:block;height:100%;width:0;background:var(--lav);animation:load 1.3s var(--ease) forwards} @keyframes load{to{width:100%}} /* Film grain over the whole page — inline SVG noise, so no extra request. */ .grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;will-change:transform; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(10) infinite} @keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}} /* Reading-progress hairline, scaled from JS on scroll. */ #progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none} #progress i{display:block;height:100%;background:linear-gradient(90deg,var(--lav),var(--lav-light) 60%,var(--gold));transform-origin:0 50%;transform:scaleX(0);will-change:transform} /* ========================================================================== 3. Navigation ========================================================================== */ /* Scoped to #nav on purpose — the footer also uses a