/*===================================================================== ZUDSC — site layer Loaded LAST, after style.css / responsive.css / color.css. Holds what the template could not: the accessibility layer, real bidirectional support, and the font wiring. Nothing here overrides template *design* — only its correctness gaps. Kept separate so the vendor CSS stays untouched and this file ports to Angular as the global stylesheet. ======================================================================*/ /*--------------------------------------------------------------- 1. Font style.css asks for `Cairo` in ~15 places but the family was never loaded anywhere — every glyph on the site was falling back. The @font-face lives in assets/fonts/cairo/cairo.css. ----------------------------------------------------------------*/ :root { --zudsc-font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --zudsc-focus: #0a58ca; --zudsc-focus-contrast: #ffffff; } body, input, select, textarea, button { font-family: var(--zudsc-font); } /*--------------------------------------------------------------- 2. Language switch flicker guard Set by the inline script only when the saved language is not the Arabic default, and cleared by i18n.js once the dictionary is applied. Wrapped in a no-JS guard so the page can never stay hidden. ----------------------------------------------------------------*/ html.i18n-pending body { visibility: hidden; } html.no-js body { visibility: visible !important; } /*--------------------------------------------------------------- 3. Skip link First focusable element on the page: lets keyboard and screen-reader users jump the header instead of tabbing the whole nav on every page. ----------------------------------------------------------------*/ .skip-link { position: absolute; top: -100px; inset-inline-start: 1rem; z-index: 10000; padding: 0.75rem 1.25rem; background: var(--zudsc-focus); color: var(--zudsc-focus-contrast); font-weight: 600; border-radius: 0 0 6px 6px; text-decoration: none; transition: top 0.15s ease-in-out; } .skip-link:focus { top: 0; color: var(--zudsc-focus-contrast); outline: 3px solid #fff; outline-offset: 2px; } /*--------------------------------------------------------------- 4. Visible focus The template removed outlines without replacing them, so keyboard users had no cursor. :focus-visible keeps mouse clicks clean while restoring a ring for keyboard traversal. ----------------------------------------------------------------*/ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--zudsc-focus) !important; outline-offset: 2px; border-radius: 2px; } /* Screen-reader-only text that still receives focus when tabbed to. */ .visually-hidden:not(:focus):not(:active) { position: absolute !important; 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; } /*--------------------------------------------------------------- 5. Bidirectional support style.css faked RTL with `body { float: right; text-align: right; }` and no dir attribute. A floated body at width:100% sits outside normal flow, so on narrow viewports its content overhangs the viewport — and because `html,body{overflow-x:hidden}` is also set, the overhang was being CLIPPED rather than wrapped. That is why the hero heading and the service-card text lost their trailing letters on phones. now does this properly, so the hack is unwound here and the document mirrors natively. `text-align: start` resolves to right in RTL and left in LTR, which is what the bilingual build needs. ----------------------------------------------------------------*/ body { float: none; text-align: start; } /* Bootstrap's .float-left / .float-right are physical and do not mirror, which is what we want here: the topbar's visual arrangement is deliberate and already correct in both directions. Left intentionally untouched. */ /* Over-constrained absolute positioning. style.css sets `.sec-tl:before { right: 0 }` for the default (start-aligned) title, then `.sec-tl.text-center:before { left: 50% }` for centred ones — but never clears `right`. An absolutely positioned box with a width AND both offsets is over-constrained, and the spec resolves that by ignoring one of them based on `direction`: `right` loses in LTR, `left` loses in RTL. Under the old fake-RTL (no dir attribute) the document was technically LTR, so this happened to work. With dir="rtl" the decoration snapped to the right edge. Clearing the unused offset makes the centring direction-independent. */ .sec-tl.text-center::before { right: auto; left: 50%; } /* Same float-based layout hack as body; harmless in LTR, mirrors wrong in RTL. */ .sec-tl { float: none; } /* Directional chevrons: the footer link arrows were hardcoded to fa-angle-double-left, which points the wrong way in LTR. */ [dir="ltr"] .wdgt-bx ul li a .fa-angle-double-left::before { content: "\f101"; } /* right */ [dir="rtl"] .wdgt-bx ul li a .fa-angle-double-left::before { content: "\f100"; } /* left */ /* The desktop nav hardcodes `direction: rtl` + `float: right` on the list itself (style.css ~596), so it forced RTL ordering even when the document is English — Home rendered last instead of first. Scope those to RTL only. */ [dir="ltr"] nav > div > ul { direction: ltr; float: left; } [dir="ltr"] nav > div > ul li { float: left; } [dir="ltr"] nav > div > ul li > a { text-align: left; } [dir="ltr"] .rsnp-mnu, [dir="ltr"] .rsnp-mnu ul, [dir="ltr"] .rsnp-mnu ul li, [dir="ltr"] .rsnp-mnu ul li a, [dir="ltr"] .rspn-mnu-cls { direction: ltr; text-align: left; } [dir="ltr"] .rsnp-mnu > ul > li a { padding-right: 0; padding-left: 15px; } [dir="ltr"] .rspn-mnu-cls { right: auto; left: 12px; } /* Breadcrumb. style.css floats the items `left` inside an inline-block
    , which is why the markup had to be authored backwards (Contact then Home) to look right. Now the trail is authored in logical order (Home > Contact) and laid out with flex, so direction alone mirrors it. The separator was also hardcoded to "<", which is correct in RTL but points the wrong way in English. */ .pg-tp-wrp ol.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; } ol.breadcrumb > li.breadcrumb-item { float: none; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "<"; } [dir="ltr"] .breadcrumb-item + .breadcrumb-item::before { content: ">"; } /*--------------------------------------------------------------- 5b. Hero heading The hero was an

    , so every page's outline started at level 2 and the site had no

    at all. It is an

    now — but style.css hangs the hero's entire look off `.featured-cap > h2`, so the promoted heading fell through to the generic `h1 { color:#222 }` and lost its white/shadow treatment. Re-attach the same styling to h1. The template hard-coded
    to wrap this heading. That does not survive translation (English breaks at different words), so the line break comes from a max-width instead and each language wraps naturally. ----------------------------------------------------------------*/ /* responsive.css steps `.featured-cap > h2` down to 40px on small screens; the promoted h1 matched none of those rules and stayed at 50px, overflowing a 390px viewport — where `html,body{overflow-x:hidden}` silently clipped it. clamp() scales fluidly across every width instead of re-declaring the template's breakpoints here. */ .featured-cap > h1 { margin: 0 auto; max-width: 15ch; color: #fff; font-weight: 700; font-size: clamp(24px, 5vw, 50px); line-height: 1.4; text-shadow: 5px 8px 6px black; } /*--------------------------------------------------------------- 6. Media Stops the gallery and hero from pushing the page sideways on phones. ----------------------------------------------------------------*/ img, iframe { max-width: 100%; } img { height: auto; } .wdgt-bx iframe { width: 100%; border: 0; aspect-ratio: 4 / 3; height: auto; } /* Contact-page map: an iframe embed replaces the JS Maps API entirely. */ .cnt-mp-wrap iframe { width: 100%; border: 0; aspect-ratio: 4 / 3; height: auto; border-radius: 6px; } /*--------------------------------------------------------------- 6b. Off-canvas drawer style.css declares `.rsnp-mnu { position: static; visibility: hidden; opacity: 0 }` while `.rsnp-mnu.slidein` sets `right: 0`. An offset does nothing on a static element, so the drawer never actually slid — and, being static, it stayed in normal flow even while invisible, reserving ~330px of blank space above the hero on every phone-width page load. That is the white band under the mobile header. Restored to a real off-canvas panel: fixed, translated out, slid back on .slidein. It enters from the inline-end edge, so it follows the language direction rather than being pinned to the right. ----------------------------------------------------------------*/ .rspn-hdr { float: none; } .rsnp-mnu { position: fixed; top: 0; bottom: 0; width: 320px; max-width: 85vw; overflow-y: auto !important; overscroll-behavior: contain; transition: transform 0.3s ease; } [dir="rtl"] .rsnp-mnu { right: 0; left: auto; transform: translateX(100%); } [dir="ltr"] .rsnp-mnu { left: 0; right: auto; transform: translateX(-100%); } .rsnp-mnu.slidein { transform: translateX(0); } /* The drawer holds focus while open, so it must not be reachable when closed. */ .rsnp-mnu:not(.slidein) { visibility: hidden; } .rsnp-mnu.slidein { visibility: visible; opacity: 1; } /*--------------------------------------------------------------- 7. Accessible submenu trigger The drawer's expanding parents are