/* ========================================================================== Elite Plus — design system Inherits the V2 print identity: palette, signature devices, type scale. ========================================================================== */ /* Fonts are loaded in each page via Google Fonts with preconnect. To self-host instead: drop woff2 files in assets/fonts/, uncomment the @font-face block below, and remove the tags. See README. */ /* @font-face{font-family:'Poppins';src:url('../fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/Poppins-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Mulish';src:url('../fonts/Mulish-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Mulish';src:url('../fonts/Mulish-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Cairo';src:url('../fonts/Cairo-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Cairo';src:url('../fonts/Cairo-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Cairo';src:url('../fonts/Cairo-Black.woff2') format('woff2');font-weight:900;font-display:swap} */ :root{ /* palette — identical to the V2 print kit */ --orange:#F26522; --orange-deep:#D9541A; --orange-tint:#FDE7DA; --navy:#1B2A52; --navy-deep:#141F3D; --bone:#E9E3D8; --bone-tint:#F7F4EE; --white:#fff; --gray:#6A7079; /* muted type on LIGHT grounds — AA: 4.99 on white, 4.55 on bone-tint */ --gray-soft:#9AA1AB; --ink:#2A2F36; /* Accent TEXT colour — the palette itself is unchanged. #F26522 stays the accent for fills, rules, markers and buttons, but as TEXT it measures 3.15:1 on white and 4.44:1 on navy, under the 4.5:1 that WCAG 2.2 AA requires below 18.66px bold / 24px regular. Small accent labels use this token instead: navy on light grounds, white on dark ones. To restore the all-orange look and forgo AA on those labels, set --accent-text:var(--orange) here and delete the dark-ground override. */ --accent-text:var(--navy); --wood:#5B3A22; --wood-light:#8A6240; --char:#15181F; --gold:#C9A24B; --gold-light:#E3C98A; --line:#E4E0D6; --disp:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif; --wrap:1280px; --pad:clamp(20px,5vw,64px); --sec:clamp(64px,8vw,120px); --r:0px; /* brand uses square corners */ --t:.28s cubic-bezier(.22,1,.36,1); } html[lang="ar"]{--disp:'Cairo',system-ui,sans-serif; --body:'Cairo',system-ui,sans-serif} *,*::before,*::after{box-sizing:border-box} *{margin:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } body{font-family:var(--body);font-size:clamp(15px,1.05vw,16px);line-height:1.58;color:var(--ink); background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:3px solid var(--orange);outline-offset:3px} ::selection{background:var(--orange);color:#fff} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .sec{padding-block:var(--sec)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;inset-inline-start:0;top:-60px;background:var(--navy);color:#fff; padding:12px 20px;z-index:200;transition:top var(--t)} .skip:focus{top:0} /* ---------- type ---------- */ h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.05; letter-spacing:-.02em;color:var(--navy);text-wrap:balance} html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ font-weight:900;line-height:1.28;letter-spacing:0} h1{font-size:clamp(30px,5.2vw,58px)} h2{font-size:clamp(25px,3.6vw,40px)} h3{font-size:clamp(18px,1.7vw,22px)} p{text-wrap:pretty} .lead{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink)} .muted{color:var(--gray)} .eyebrow{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.24em; text-transform:uppercase;color:var(--accent-text);display:block;margin-bottom:14px} html[lang="ar"] .eyebrow{letter-spacing:.06em;font-size:12px} .rule{width:clamp(60px,10%,120px);height:3px;background:var(--navy);margin-block:18px 26px} .rule--orange{background:var(--orange)} .tagline{font-family:var(--disp);font-weight:600;font-style:italic;text-transform:uppercase; letter-spacing:.22em;font-size:12px} html[lang="ar"] .tagline{font-style:normal;letter-spacing:.04em;font-size:13px} /* ---------- signature devices (§4) ---------- */ .marker{position:absolute;inset-block-start:0;inset-inline-end:0;width:46px;height:46px; background:var(--orange);color:#fff;font-family:var(--disp);font-weight:700;font-size:16px; display:grid;place-items:center;z-index:4} .marker--start{inset-inline-end:auto;inset-inline-start:0} .brk{position:absolute;width:44px;height:44px;z-index:4;pointer-events:none} .brk--tl{inset-block-start:0;inset-inline-start:0;border-inline-start:2px solid var(--orange);border-block-start:2px solid var(--orange)} .brk--br{inset-block-end:0;inset-inline-end:0;border-inline-end:2px solid var(--orange);border-block-end:2px solid var(--orange)} .sq{position:absolute;width:26px;height:26px;background:var(--orange);z-index:4} .sq--out{background:none;border:2px solid var(--orange)} .rings{position:absolute;z-index:0;opacity:.9;pointer-events:none} .block{position:absolute;background:var(--bone);z-index:0} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600; font-size:14px;letter-spacing:.02em;padding:15px 30px;transition:background var(--t),color var(--t),transform var(--t); border:2px solid transparent} .btn:hover{transform:translateY(-2px)} /* Navy-deep on orange = 5.15:1 (AA). White on orange was 3.15:1 — the primary CTA failed AA on every page. Both colours are from the locked palette; the orange itself is unchanged. */ .btn--primary{background:var(--orange);color:var(--navy-deep)} .btn--primary:hover{background:var(--orange-deep)} .btn--ghost{border-color:currentColor} .btn--ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)} /* The resting colour must live in CSS, not an inline style: an inline style="color:#fff" outranks every selector, so on hover the background turned white while the text stayed white — the label vanished. */ .btn--on-dark.btn--ghost{color:#fff} .btn--on-dark.btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff} .btn__arrow{transition:transform var(--t)} .btn:hover .btn__arrow{transform:translateX(4px)} html[dir="rtl"] .btn:hover .btn__arrow{transform:translateX(-4px)} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line); transition:box-shadow var(--t)} .hdr.is-stuck{box-shadow:0 2px 20px rgba(20,31,61,.09)} .hdr__in{display:flex;align-items:center;gap:24px;min-height:92px} /* flex-shrink was squeezing the anchor, and the global img{max-width:100%} then squashed the mark to 116px while height stayed 56px — a 25% horizontal distortion on every desktop page. The logo must never shrink. */ .hdr__logo{flex:0 0 auto} .hdr__logo img{height:56px;width:auto;max-width:none} @media(max-width:1024px){.hdr__in{min-height:80px}.hdr__logo img{height:46px}} .nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto} .nav a{font-family:var(--disp);font-weight:600;font-size:14px;padding:10px 13px;position:relative; color:var(--navy);transition:color var(--t)} .nav a::after{content:"";position:absolute;inset-block-end:2px;inset-inline-start:13px; width:0;height:2px;background:var(--orange);transition:width var(--t)} .nav a:hover::after,.nav a[aria-current="page"]::after{width:calc(100% - 26px)} /* The orange 2px underline already marks the current page; orange TEXT here would be 3.15:1 on the white header. Navy + bold keeps it distinct and AA. */ .nav a[aria-current="page"]{color:var(--navy);font-weight:700} .hdr__act{display:flex;align-items:center;gap:10px;margin-inline-start:12px} .lang{font-family:var(--disp);font-weight:600;font-size:13px;padding:12px 14px; border:1px solid var(--line);transition:border-color var(--t),color var(--t)} .lang:hover{border-color:var(--navy)} /* Header CTA: measured to wrap to 2 lines under 560px and to 3 lines in Arabic under 414px, which pushes the sticky bar from 80px to 100px. Below 560px the hero CTA and the floating WhatsApp button already cover the same action, so the bar drops it instead of wrapping it. */ .hdr__act .btn{white-space:nowrap} @media(max-width:559px){.hdr__act .btn{display:none}} .burger{display:none;width:46px;height:46px;place-items:center;border:1px solid var(--line)} .burger span{display:block;width:20px;height:2px;background:var(--navy);position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy)} .burger span::before{top:-6px}.burger span::after{top:6px} @media(max-width:1024px){ .burger{display:grid} .nav{position:fixed;inset:80px 0 auto;background:#fff;flex-direction:column;align-items:stretch; gap:0;padding:12px var(--pad) 28px;border-bottom:1px solid var(--line); transform:translateY(-130%);transition:transform var(--t);max-height:calc(100dvh - 80px);overflow:auto} .nav.is-open{transform:translateY(0)} .nav a{padding:15px 0;font-size:17px;border-bottom:1px solid var(--line)} .nav a::after{display:none} .hdr__act{margin-inline-start:auto} } /* ---------- hero (split: copy panel + image panel) ---------- Split rather than full-bleed so the source photography is displayed at roughly 1:1 instead of being upscaled across the whole viewport. */ .hero{position:relative;background:var(--navy-deep);overflow:hidden;isolation:isolate; display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch; min-height:clamp(500px,72vh,700px)} .hero__copy{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2; padding:clamp(40px,5.5vw,72px) 0 clamp(40px,5.5vw,72px) var(--pad)} html[dir="rtl"] .hero__copy{padding:clamp(40px,5.5vw,72px) var(--pad) clamp(40px,5.5vw,72px) 0} .hero__media{position:relative;overflow:hidden} .hero__media img{width:100%;height:100%;object-fit:cover;display:block} .hero__media::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,var(--navy-deep) 0%,rgba(20,31,61,.35) 18%,rgba(20,31,61,0) 46%)} html[dir="rtl"] .hero__media::after{ background:linear-gradient(270deg,var(--navy-deep) 0%,rgba(20,31,61,.35) 18%,rgba(20,31,61,0) 46%)} .hero__rings{position:absolute;inset-block-end:-12%;inset-inline-start:-8%;width:min(46%,420px); aspect-ratio:1;border-radius:50%;z-index:0;opacity:.5; background:repeating-radial-gradient(circle,transparent 0 13px,rgba(233,227,216,.16) 13px 15px)} .hero h1{color:#fff;max-width:15ch} .hero .lead{color:var(--bone);max-width:46ch;margin-top:20px} .hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px} .hero__eyebrow i{width:14px;height:14px;background:var(--orange);flex:none} .hero__eyebrow span{font-family:var(--disp);font-weight:600;font-style:italic; text-transform:uppercase;letter-spacing:.2em;font-size:15px;color:var(--orange)} html[lang="ar"] .hero__eyebrow span{font-style:normal;letter-spacing:.04em;font-size:17px;font-weight:700} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero__strip{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.18);margin-top:40px} .hero__strip a{flex:1 1 180px;padding:18px 18px 18px 0;display:flex;align-items:center;gap:12px; font-family:var(--disp);font-weight:600;font-size:13.5px;color:#fff;transition:opacity var(--t)} html[dir="rtl"] .hero__strip a{padding:18px 0 18px 18px} .hero__strip a:hover{opacity:.72} .hero__strip i{width:4px;height:30px;flex:none} @media(max-width:900px){ .hero{grid-template-columns:1fr;min-height:0} .hero__copy{order:2;padding-inline:var(--pad);padding-block:clamp(36px,7vw,56px)} .hero__media{order:1;aspect-ratio:16/10} .hero__media::after{background:linear-gradient(180deg,rgba(20,31,61,.15) 60%,var(--navy-deep) 100%)} html[dir="rtl"] .hero__media::after{background:linear-gradient(180deg,rgba(20,31,61,.15) 60%,var(--navy-deep) 100%)} .hero h1,.hero .lead{max-width:none} } /* ---------- page head ---------- */ .phead{position:relative;background:var(--bone-tint);padding-block:clamp(40px,6vw,72px);overflow:hidden} .phead h1{max-width:20ch} .phead .lead{max-width:62ch;margin-top:16px} .crumbs{display:flex;gap:8px;font-size:13px;color:var(--gray);margin-bottom:20px;flex-wrap:wrap} .crumbs a:hover{color:var(--orange)} .crumbs span[aria-current]{color:var(--navy);font-weight:600} /* ---------- grids & cards ---------- */ .grid{display:grid;gap:clamp(20px,2.4vw,32px)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}} .dcard{position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);transition:transform var(--t),box-shadow var(--t)} .dcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,31,61,.10)} .dcard__bar{height:8px;background:var(--navy)} .dcard__img{aspect-ratio:4/3;overflow:hidden} .dcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} .dcard:hover .dcard__img img{transform:scale(1.04)} .dcard__b{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1} .dcard__n{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--gray)} .dcard__more{margin-top:auto;padding-top:14px;font-family:var(--disp);font-weight:600;font-size:13px; color:var(--accent-text);display:inline-flex;gap:8px;align-items:center} .pcard{position:relative;display:block;background:#fff;border:1px solid var(--line); transition:transform var(--t),box-shadow var(--t)} .pcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,31,61,.10)} .pcard__img{aspect-ratio:3/2;overflow:hidden;background:var(--bone-tint)} .pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} .pcard:hover .pcard__img img{transform:scale(1.04)} .pcard__b{padding:22px 24px 26px} .pcard__meta{display:flex;gap:8px;align-items:center;font-family:var(--disp);font-weight:600; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:10px} .pcard__meta i{width:9px;height:9px;background:var(--orange);flex:none} .pcard h3{font-size:19px} .pcard p{font-size:14px;color:var(--gray);margin-top:8px} /* ---------- dark band ---------- */ /* Dark containers need the LIGHTER muted grey; #6A7079 would sink into the navy. Custom properties cascade, so one re-binding covers every var(--gray) inside. */ .ftr,.band{--gray:var(--gray-soft);--accent-text:#fff} .band{position:relative;background:var(--navy);color:#fff;overflow:hidden} .band h2,.band h3{color:#fff} .band .lead,.band p{color:var(--bone)} .band--wood{background:var(--wood)} .band--char{background:var(--char)} .band--char .eyebrow{color:var(--gold)} .band--char h2{color:#fff} /* ---------- split ---------- */ .split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .split--rev{grid-template-columns:1fr 1.02fr} @media(max-width:900px){.split,.split--rev{grid-template-columns:1fr}} .stack{position:relative} .stack__block{position:absolute;inset-block-start:26px;inset-inline-start:-26px; width:62%;height:74%;background:var(--bone);z-index:0} .stack img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover} @media(max-width:900px){.stack__block{display:none}.stack img{aspect-ratio:4/3}} /* ---------- list / services ---------- */ .slist{display:grid;gap:0;margin-top:8px} .srow{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)} .band .srow{border-color:rgba(255,255,255,.16)} .srow__n{font-family:var(--disp);font-weight:700;font-size:12px;color:var(--accent-text);padding-top:3px} .srow h3{font-size:17px;margin-bottom:5px} .srow p{font-size:14.5px;color:var(--gray)} .band .srow p{color:var(--bone)} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy)} @media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{padding:34px 20px;text-align:center;border-inline-end:1px solid rgba(255,255,255,.12)} .stat:last-child{border:0} .stat b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.6vw,32px);color:var(--orange)} .stat span{font-size:12.5px;color:var(--bone)} /* ---------- clients ---------- */ .clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:clamp(28px,5vw,72px)} .clients img{height:clamp(34px,3.4vw,46px);width:auto;opacity:.78;transition:opacity var(--t)} .clients img:hover{opacity:1} /* ---------- filters ---------- */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px} .filters button{font-family:var(--disp);font-weight:600;font-size:13px;padding:11px 20px; border:1px solid var(--line);color:var(--navy);transition:all var(--t)} .filters button:hover{border-color:var(--navy)} .filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .empty{padding:60px 0;text-align:center;color:var(--gray);display:none} .empty.is-on{display:block} /* ---------- gallery ---------- */ .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}} .gal button{position:relative;overflow:hidden;aspect-ratio:1;background:var(--bone-tint);display:block;width:100%} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} /* portrait thumbs (doors) — show the whole leaf, don't crop it to a square */ .gal--tall button{aspect-ratio:2/3} .gal--tall img{object-fit:contain;background:var(--bone-tint)} .gal button:hover img{transform:scale(1.05)} .gal button::after{content:"";position:absolute;inset:0;background:rgba(20,31,61,0);transition:background var(--t)} .gal button:hover::after{background:rgba(20,31,61,.14)} /* ---------- lightbox ---------- */ .lb{position:fixed;inset:0;z-index:300;background:rgba(10,14,26,.95);display:none; place-items:center;padding:clamp(16px,4vw,56px)} .lb.is-open{display:grid} .lb img{max-width:100%;max-height:82vh;object-fit:contain} .lb__cap{color:var(--bone);font-size:13.5px;text-align:center;margin-top:16px;max-width:70ch} .lb__x,.lb__p,.lb__n{position:absolute;width:52px;height:52px;display:grid;place-items:center; color:#fff;font-size:26px;background:rgba(255,255,255,.10);transition:background var(--t)} .lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--orange)} .lb__x{top:20px;inset-inline-end:20px} .lb__p{inset-inline-start:16px;top:50%;transform:translateY(-50%)} .lb__n{inset-inline-end:16px;top:50%;transform:translateY(-50%)} /* ---------- spec table + accordion ---------- */ .acc{border:1px solid var(--line);margin-bottom:12px;background:#fff} .acc__h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 22px;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--navy);text-align:start} .acc__h:hover{background:var(--bone-tint)} .acc__i{font-size:20px;color:var(--orange);transition:transform var(--t);flex:none} .acc__h[aria-expanded="true"] .acc__i{transform:rotate(45deg)} .acc__p{display:none;padding:0 22px 22px} .acc__p.is-open{display:block} .spec{width:100%;border-collapse:collapse;font-size:14.5px} .spec th,.spec td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line)} .spec th{font-family:var(--disp);font-weight:600;color:var(--navy);width:52%} .spec td{color:var(--gray)} .spec tr:last-child th,.spec tr:last-child td{border-bottom:0} .note{background:var(--orange-tint);border-inline-start:3px solid var(--orange); padding:16px 20px;font-size:14px;margin-top:18px} /* ---------- product ---------- */ /* A WHITE product card sitting inside a dark .band was inheriting the band's white type: h3 rendered #fff on #fff (contrast 1.00 — the model names were invisible) and .muted rendered bone on white (1.28). A light card must always restate its own type colours. */ .band .prod{color:var(--ink);--gray:#6A7079} /* white card: back to the dark grey */ .band .prod h3{color:var(--navy)} .band .prod p,.band .prod .muted,.band .prod .lead{color:var(--gray)} .prod{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column} /* Product frames letterbox the shot — a door or lock is never cropped. Absolute box + object-fit:contain instead of max-height:%, which is unreliable inside an overflow:hidden aspect-ratio container. */ .prod__img{position:relative;aspect-ratio:2/3;background:var(--bone-tint);overflow:hidden} .prod__img img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px); object-fit:contain;object-position:center} .prod__img--lock{aspect-ratio:3/4} .prod__img--wide{aspect-ratio:4/5} .prod__b{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.05em; padding:6px 12px;border:1px solid var(--line);color:var(--navy)} .chip--gold{border-color:var(--gold);color:var(--wood)} .ul{list-style:none;padding:0;display:grid;gap:9px;font-size:14.5px} .ul li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start} .ul li::before{content:"";width:8px;height:8px;background:var(--orange);margin-top:8px} /* ---------- downloads ---------- */ .dl{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--line); background:#fff;transition:border-color var(--t),transform var(--t)} .dl:hover{border-color:var(--navy);transform:translateY(-2px)} .dl__ic{width:46px;height:46px;background:var(--bone-tint);display:grid;place-items:center; font-family:var(--disp);font-weight:700;font-size:12px;color:var(--navy);flex:none} .dl__t{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:15px} .dl__m{font-size:12.5px;color:#6A7079} /* white card: never the soft grey — 4.99:1 */ .dl__a{margin-inline-start:auto;color:var(--orange);font-size:22px;flex:none} /* ---------- forms ---------- */ .form{display:grid;gap:18px} .field{display:grid;gap:7px} .field label{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--navy)} .field .opt{color:var(--gray);font-weight:400} .field input,.field select,.field textarea{font:inherit;font-size:15px;padding:13px 15px; border:1px solid var(--line);background:#fff;color:var(--ink);width:100%;transition:border-color var(--t)} .field textarea{min-height:132px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none} .field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#B91C1C} .err{font-size:12.5px;color:#B91C1C;display:none} .field.is-bad .err{display:block} .check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:14px} .check input{width:19px;height:19px;margin-top:2px;accent-color:var(--orange)} .alert{padding:16px 20px;font-size:14.5px;display:none} .alert.is-on{display:block} .alert--ok{background:#E8F5EF;border-inline-start:3px solid #0A7A58;color:#0A5C43} .alert--bad{background:#FDECEC;border-inline-start:3px solid #B91C1C;color:#8F1414} @media(min-width:700px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}} /* ---------- footer ---------- */ .ftr{background:var(--navy-deep);color:var(--bone);padding-block:clamp(48px,6vw,76px) 0} .ftr h2{color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px} html[lang="ar"] .ftr h2{letter-spacing:.03em} .ftr a{color:var(--bone);font-size:14.5px;transition:color var(--t)} .ftr a:hover{color:var(--orange)} .ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px)} @media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ftr__grid{grid-template-columns:1fr}} .ftr__logo img{height:44px;width:auto;margin-bottom:18px} /* Touch targets: 44px minimum. Padding replaces the list gap so the visual rhythm is unchanged while the tappable area more than doubles. */ .ftr ul{list-style:none;padding:0;display:grid;gap:0} .ftr ul a{display:block;padding-block:14px} .ftr__bot a{display:inline-block;padding-block:14px} .crumbs a{display:inline-block;padding-block:12px} /* Hit area without layout shift: padding grows the tappable box, the equal negative margin cancels the space it would otherwise add. */ .dcard__more{padding-bottom:10px;margin-bottom:-10px} .dcard__more .btn__arrow,.dcard__more span[aria-hidden]{color:var(--orange)} .ul li a{display:block;padding-block:7px;margin-block:-7px} .dcard__b a,.contact__b a{display:inline-block;padding-block:8px;margin-block:-8px} .ftr__bot{margin-top:clamp(36px,5vw,60px);border-top:1px solid rgba(255,255,255,.14); padding-block:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; font-size:12.5px;color:var(--gray)} /* ---------- floating actions ---------- */ .fab{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:90;display:grid;gap:10px} .fab a,.fab button{width:50px;height:50px;display:grid;place-items:center;background:var(--navy); color:#fff;font-size:20px;box-shadow:0 6px 20px rgba(20,31,61,.24);transition:background var(--t),opacity var(--t)} .fab a:hover,.fab button:hover{background:var(--orange)} .fab .totop{opacity:0;visibility:hidden;pointer-events:none} .fab .totop.is-on{opacity:1;visibility:visible;pointer-events:auto} /* ========================================================================== Cross-document navigation This is a classic multi-page site: every click is a real page load. Without these rules the browser paints white between pages, which reads as a hard reload. Native View Transitions cross-fade the two documents instead. Progressive enhancement — unsupported browsers behave exactly as before. Requires http(s); it does NOT run from file:// (opaque origin). ========================================================================== */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out .16s cubic-bezier(.4,0,1,1) both} ::view-transition-new(root){animation:vt-in .26s cubic-bezier(0,0,.2,1) both} @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0}} /* Chrome/nav shell is identical on every page — name it so it stays put instead of cross-fading with the body. Stops the header flickering. */ .hdr{view-transition-name:hdr} .ftr{view-transition-name:ftr} @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} } /* ---------- utilities & form chrome (added with the form work) ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .lb__fig{position:relative;max-width:min(1200px,92vw);max-height:86vh;text-align:center} .lb__fig img{max-width:100%;max-height:78vh;object-fit:contain;margin-inline:auto} body.nav-open{overflow:hidden} .form__summary{border:2px solid #B3261E;background:#FDECEA;color:#7A1C15;padding:14px 18px; margin-bottom:18px;font-size:14.5px} .form__summary ul{margin:8px 0 0;padding-inline-start:20px} .form__summary a{color:#7A1C15;text-decoration:underline} .form__summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px} .note--field{display:block;font-size:12.5px;color:var(--gray);margin-top:6px} .field input[type=file]{padding:10px;border:1px dashed var(--line);background:#fff;width:100%} .field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true] {border-color:#B3261E} /* Direction-neutral: an off-canvas offset would add ~10000px of horizontal scroll to every Arabic (RTL) page carrying a form. */ .hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} }