/* ============================================================ Future Labs Technologies — shared stylesheet Palette locked: ink #1D1D1B · mint #A0EC94 · white only. Contrast rule: mint is NEVER functional text/indicator on a light surface (mint-on-white ~1.27:1). Mint = fill behind ink text, or on ink. Functional fills/focus rings are ink. ============================================================ */ /* ---------- Inter (self-hosted, Latin) ---------- */ @font-face { font-family:"Inter"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/Inter-Regular.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/Inter-Medium.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/Inter-Bold.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-weight:800 900; font-style:normal; font-display:swap; src:url("../fonts/Inter-Black.woff2") format("woff2"); } /* ---------- Klapt Arabic ---------- */ @font-face { font-family:"KlaptArabic"; font-weight:300; font-display:swap; src:url("../fonts/KlaptArabic-Light.woff2") format("woff2"); } @font-face { font-family:"KlaptArabic"; font-weight:400; font-display:swap; src:url("../fonts/KlaptArabic-Regular.woff2") format("woff2"); } @font-face { font-family:"KlaptArabic"; font-weight:500; font-display:swap; src:url("../fonts/KlaptArabic-Medium.woff2") format("woff2"); } @font-face { font-family:"KlaptArabic"; font-weight:700; font-display:swap; src:url("../fonts/KlaptArabic-Bold.woff2") format("woff2"); } /* ---------- Tokens ---------- */ :root{ --ink:#1D1D1B; --ink-soft:#2A2A28; --paper:#FFFFFF; --soft:#F5F4EE; --line:#E0DDD4; --muted:#6B6B68; --green:#A0EC94; --green-deep:#3F7338; --green-tint:#E6F8E2; --shadow:0 4px 20px rgba(29,29,27,.06); --shadow-strong:0 16px 48px rgba(29,29,27,.12); --radius:14px; --radius-sm:8px; --maxw:1180px; --gutter:clamp(1.1rem,4vw,2rem); --header-h:76px; --stagger:70ms; } /* ---------- Base ---------- */ *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); } body{ margin:0; background:var(--paper); color:var(--ink); font-family:"KlaptArabic","Inter",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; font-weight:400; line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; /* keep Latin numerals even within Arabic copy */ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; } /* English = Inter. Keyed to html[dir] (set pre-paint) AND body[dir] (set by core.js) so it applies from first paint — otherwise English falls through to the Klapt-first stack and renders in Klapt Arabic's Latin glyphs (Klapt ships a full Latin set). */ html[dir="ltr"] body, body[dir="ltr"]{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; } /* language visibility (also inlined in of every page to avoid FOUC) */ body[dir="rtl"] [data-lang="en"]{ display:none !important; } body[dir="ltr"] [data-lang="ar"]{ display:none !important; } /* Latin letter-spacing on labels is wrong for cursive Arabic — zero it in RTL */ body[dir="rtl"] .eyebrow, body[dir="rtl"] .footer h5, body[dir="rtl"] .contact-card h4, body[dir="rtl"] .review__k{ letter-spacing:0; } /* skip-to-content link (hidden until keyboard focus; no off-canvas offset) */ .skip-link{ position:fixed; top:.5rem; inset-inline-start:.5rem; z-index:200; background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; transform:translateY(-160%); transition:transform .2s ease; } .skip-link:focus{ transform:translateY(0); outline:2px solid var(--green); outline-offset:2px; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; } ::selection{ background:var(--green); color:var(--ink); } :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- Typographic primitives ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 1rem; } .eyebrow::before{ content:""; width:8px; height:8px; background:var(--green-deep); border-radius:2px; } .band--ink .eyebrow{ color:var(--green); } .band--ink .eyebrow::before{ background:var(--green); } .h-display{ font-size:clamp(2.3rem,6.6vw,4.6rem); line-height:1.04; letter-spacing:-0.03em; font-weight:700; margin:0 0 1.4rem; color:inherit; } .h-display .accent{ color:var(--green-deep); } .band--ink .h-display .accent{ color:var(--green); } .h-section{ font-size:clamp(1.75rem,4vw,2.7rem); font-weight:700; line-height:1.16; letter-spacing:-0.02em; margin:0 0 1rem; color:inherit; } .h-section .accent{ color:var(--green-deep); } .band--ink .h-section .accent{ color:var(--green); } .lede{ font-size:1.08rem; color:var(--muted); max-width:62ch; margin:0 0 2.6rem; line-height:1.7; } .band--ink .lede{ color:rgba(255,255,255,.72); } /* ---------- Buttons (contrast-safe) ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.95rem 1.7rem; border-radius:999px; font-weight:600; font-size:.98rem; white-space:nowrap; border:1px solid transparent; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover{ transform:translateY(-1px); } .btn--primary{ background:var(--ink); color:var(--paper); } /* ink fill, white text */ .btn--primary:hover{ background:var(--green-deep); color:var(--paper); } .btn--mint{ background:var(--green); color:var(--ink); } /* mint fill, ink text (~15:1) */ .btn--mint:hover{ background:#b6f2ac; color:var(--ink); } .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); } .btn--ghost:hover{ background:var(--ink); color:var(--paper); } .band--ink .btn--ghost{ color:var(--paper); border-color:rgba(255,255,255,.5); } .band--ink .btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .btn[disabled]{ opacity:.55; pointer-events:none; } /* ---------- Sections / bands ---------- */ section{ padding:6rem 0; } @media (max-width:768px){ section{ padding:4rem 0; } } .band--soft{ background:var(--soft); } .band--ink{ background:var(--ink); color:var(--paper); } .band--mint{ background:var(--green); color:var(--ink); } /* ---------- Header ---------- */ .header{ position:fixed; inset:0 0 auto 0; z-index:100; background:#FFFFFF; border:0; box-shadow:none; transition:background .25s ease, box-shadow .25s ease; } .header.scrolled{ background:rgba(255,255,255,.94); backdrop-filter:saturate(1.1) blur(6px); box-shadow:0 1px 0 var(--line); } .header__inner{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; } .brand__logo{ height:30px; width:auto; flex-shrink:0; max-width:none; } .brand__logo--white{ display:none; } .nav__list{ display:flex; align-items:center; gap:1.6rem; list-style:none; margin:0; padding:0; } .nav__list a{ position:relative; font-size:.92rem; font-weight:500; color:var(--ink-soft); padding:.25rem 0; transition:color .2s ease; } .nav__list a::after{ content:""; position:absolute; inset-inline-start:0; bottom:-2px; height:2px; width:0; background:var(--green-deep); transition:width .25s ease; } .nav__list a:hover{ color:var(--ink); } .nav__list a:hover::after{ width:100%; } .nav__group{ display:flex; align-items:center; gap:1.2rem; } .lang-toggle{ border:1px solid var(--ink); border-radius:999px; padding:.45rem .95rem; font-size:.82rem; font-weight:600; letter-spacing:.04em; background:var(--paper); color:var(--ink); min-height:38px; transition:background .2s, color .2s; } .lang-toggle:hover{ background:var(--ink); color:var(--paper); } .mobile-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--radius-sm); } .mobile-toggle:hover{ background:var(--soft); } .mobile-toggle svg{ width:24px; height:24px; } .mobile-nav{ position:fixed; top:var(--header-h); inset-inline:0; background:var(--paper); padding:1rem var(--gutter) 1.5rem; transform:translateY(-115%); visibility:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s; z-index:99; box-shadow:0 14px 32px rgba(29,29,27,.08); } .mobile-nav.open{ transform:translateY(0); visibility:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; } .mobile-nav__list{ list-style:none; margin:0; padding:0; } .mobile-nav__list a{ display:block; padding:.95rem 0; font-size:1.05rem; font-weight:600; border-bottom:1px solid var(--line); } .mobile-nav__list a:last-child{ border-bottom:0; } .mobile-nav .btn{ margin-top:1rem; width:100%; } @media (max-width:860px){ .nav__list{ display:none; } .mobile-toggle{ display:inline-flex; } .nav__group>.btn--mint{ display:none; } .lang-toggle{ min-height:44px; } } /* ---------- Hero ---------- */ .hero{ padding-top:calc(var(--header-h) + 4.5rem); padding-bottom:5rem; } .hero__sub{ font-size:clamp(1.1rem,2.2vw,1.4rem); color:var(--muted); max-width:52ch; margin:0 0 2.4rem; line-height:1.55; } .hero__ctas{ display:flex; flex-wrap:wrap; gap:.75rem; } .hero__name-ar{ margin:1.4rem 0 0; font-size:.9rem; letter-spacing:.04em; color:var(--muted); } /* ---------- Stats (the one mint band) ---------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; } .stat__num{ font-size:clamp(2.6rem,5.5vw,3.8rem); font-weight:800; line-height:1; color:var(--ink); letter-spacing:-0.04em; margin:0 0 .7rem; font-variant-numeric:lining-nums; } .stat__num sup{ font-size:.45em; font-weight:700; } .stat__label{ font-size:.86rem; font-weight:600; line-height:1.45; color:rgba(29,29,27,.72); } @media (max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem; } } /* ---------- Selected work ---------- */ .work{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } .case{ padding:2rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; gap:.2rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .case:hover{ transform:translateY(-3px); border-color:var(--green); box-shadow:var(--shadow); } .case__logo{ height:28px; width:auto; max-width:120px; object-fit:contain; margin-bottom:1.1rem; opacity:.9; } .case__name{ font-size:1.3rem; font-weight:700; margin:0 0 .3rem; letter-spacing:-0.01em; } .case__name .accent{ color:var(--green-deep); } .case__tag{ font-size:.78rem; color:var(--muted); margin:0 0 .85rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; line-height:1.4; min-height:2.5em; } .case__body{ color:var(--ink-soft); margin:0; font-size:.95rem; line-height:1.65; } /* linked case cards: whole card is a link to the real project, with an external-link cue */ a.case{ position:relative; } a.case::after{ content:"\2197"; position:absolute; inset-block-start:1.5rem; inset-inline-end:1.5rem; font-size:1.05rem; line-height:1; color:var(--muted); opacity:0; transform:translateY(3px); transition:opacity .2s ease, color .2s ease, transform .2s ease; } a.case:hover::after, a.case:focus-visible::after{ opacity:1; color:var(--green-deep); transform:none; } @media (max-width:980px){ .work{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .work{ grid-template-columns:1fr; } } /* ---------- Services grid ---------- */ .services{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-inline-start:1px solid var(--line); margin-top:1.4rem; } .service{ padding:2.1rem 2rem; border-bottom:1px solid var(--line); border-inline-end:1px solid var(--line); background:var(--paper); transition:background .2s ease; } .service:hover{ background:var(--soft); } .service__num{ font-size:.78rem; font-weight:700; letter-spacing:.15em; color:var(--green-deep); margin-bottom:.85rem; display:inline-block; } .service__title{ font-size:1.16rem; font-weight:700; margin:0 0 .5rem; letter-spacing:-0.01em; line-height:1.3; } .service__body{ color:var(--muted); margin:0; font-size:.96rem; line-height:1.7; } @media (max-width:768px){ .services{ grid-template-columns:1fr; } } .services-more{ margin-top:1.6rem; } /* ---------- Capability strip (static, not a marquee) ---------- */ .capstrip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.6rem 0; } .capstrip__row{ display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:center; justify-content:center; } .capstrip__item{ font-size:.95rem; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:1.4rem; } .capstrip__item::after{ content:""; width:6px; height:6px; background:var(--green); border-radius:2px; } /* ---------- CTA (the one ink band) ---------- */ .cta{ text-align:center; } .cta .h-display{ max-width:18ch; margin-inline:auto; } .cta__ctas{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.4rem; } /* ---------- Footer ---------- */ .footer{ background:var(--ink); color:var(--paper); padding:4rem 0 2rem; } .footer .brand__logo{ display:none; } .footer .brand__logo--white{ display:block; height:34px; width:auto; } .footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; } .footer__tag{ color:rgba(255,255,255,.7); margin:1rem 0 0; line-height:1.6; font-size:.95rem; max-width:34ch; } .footer h5{ font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--green); margin:0 0 1rem; } .footer ul{ list-style:none; margin:0; padding:0; } .footer li{ padding:.35rem 0; } .footer a{ color:rgba(255,255,255,.85); font-size:.94rem; transition:color .2s ease; } .footer a:hover{ color:var(--green); } .footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:rgba(255,255,255,.6); font-size:.86rem; } .social{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1rem; } .social a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; } .social a:hover{ background:var(--green); border-color:var(--green); } .social svg{ width:16px; height:16px; color:var(--paper); } .social a:hover svg{ color:var(--ink); } @media (max-width:980px){ .footer__top{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .footer__top{ grid-template-columns:1fr; } } /* ---------- Forms: multi-step ---------- */ .form-shell{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,4vw,2.8rem); box-shadow:var(--shadow); max-width:760px; } .staging-banner{ display:none; margin:0 0 1.5rem; padding:.85rem 1.1rem; border:1px solid #c08a2e; background:#fbf2df; border-radius:var(--radius-sm); color:#6b4e16; font-size:.9rem; } .staging-banner.show{ display:block; } .stepper{ display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; } .stepper__track{ position:relative; flex:1; height:6px; background:var(--line); border-radius:999px; overflow:hidden; } .stepper__fill{ position:absolute; inset-block:0; inset-inline-start:0; width:25%; background:var(--ink); border-radius:999px; transition:width .35s cubic-bezier(.2,.8,.2,1); } .stepper__count{ font-size:.82rem; font-weight:700; letter-spacing:.08em; color:var(--muted); white-space:nowrap; font-variant-numeric:lining-nums; } .fstep{ display:block; border:0; padding:0; margin:0; min-inline-size:0; } .fstep[hidden]{ display:none; } .fstep__legend{ font-size:1.15rem; font-weight:700; letter-spacing:-0.01em; margin:0 0 1.3rem; padding:0; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } .form-field{ display:flex; flex-direction:column; gap:.4rem; } .form-field--full{ grid-column:1 / -1; } .form-field label{ font-weight:600; font-size:.92rem; color:var(--ink-soft); } .form-field .req{ color:var(--green-deep); margin:0 .2rem; } .form-field input,.form-field select,.form-field textarea{ border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:.9rem 1rem; border-radius:var(--radius-sm); font:inherit; font-size:1rem; min-height:48px; transition:border-color .2s ease, box-shadow .2s ease; } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none; border-color:var(--green-deep); box-shadow:0 0 0 3px var(--green-tint); } .form-field textarea{ resize:vertical; min-height:120px; } .form-field input.invalid,.form-field select.invalid,.form-field textarea.invalid{ border-color:#c64545; box-shadow:0 0 0 3px #f7e0e0; } /* LTR-direction inputs (email / phone / url) even on the Arabic page */ input[type="email"],input[type="tel"],input[type="url"]{ direction:ltr; text-align:start; } .field-error{ font-size:.82rem; color:#c64545; min-height:1em; } .field-error:empty{ display:none; } /* honeypot: direction-safe hide (no off-canvas offset that blows out document width) */ .hp-field{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .form-nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.8rem; } .form-nav .spacer{ flex:1; } /* review step */ .review{ display:grid; gap:.2rem; } .review__row{ display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--line); } .review__row:last-child{ border-bottom:0; } .review__k{ font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .review__v{ font-size:1rem; color:var(--ink); word-break:break-word; } .review__edit{ font-size:.82rem; font-weight:600; color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; } /* states */ .form-feedback{ margin-top:1.4rem; padding:1.2rem 1.4rem; border-radius:var(--radius-sm); display:none; } .form-feedback.show{ display:block; animation:fade .35s ease; } @keyframes fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } .form-success{ background:var(--green-tint); border:1px solid var(--green-deep); color:var(--ink); } .form-error{ background:#fbeaea; border:1px solid #c64545; color:#5e2020; } .form-feedback__title{ font-weight:700; margin:0 0 .35rem; font-size:1.05rem; } .form-feedback__body{ margin:0; font-size:.95rem; line-height:1.6; } .form-feedback a{ color:inherit; text-decoration:underline; text-underline-offset:3px; font-weight:600; } @media (max-width:680px){ .form-grid{ grid-template-columns:1fr; } } /* contact cards */ .contact-aside{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.2rem; } .contact-card{ padding:1.4rem 1.6rem; background:var(--soft); border-radius:var(--radius); } .contact-card h4{ margin:0 0 .4rem; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); } .contact-card p,.contact-card a{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.6; } .contact-card a:hover{ color:var(--green-deep); } @media (max-width:780px){ .contact-aside{ grid-template-columns:1fr; } } /* ---------- Prose (legal / 404) ---------- */ .prose{ max-width:72ch; } .prose h2{ font-size:1.3rem; margin:2rem 0 .6rem; letter-spacing:-0.01em; } .prose h2:first-child{ margin-top:0; } .prose p,.prose li{ color:var(--ink-soft); line-height:1.75; font-size:1rem; } .prose ul{ padding-inline-start:1.2rem; } .prose a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; } .page-head{ padding-top:calc(var(--header-h) + 3.5rem); padding-bottom:1rem; } .notfound{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } /* ---------- Motion ---------- */ /* reveal only hides when JS is present (html.js); no-JS users always see content */ html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; } html.js .reveal.visible{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .btn:hover,.case:hover{ transform:none; } }