@charset "UTF-8"; /* ========================================================================== Nama Alhayah, Business Solutions Single stylesheet, serves both the Arabic (RTL) and English (LTR) sites. Direction is driven entirely by ; all box offsets use CSS logical properties so nothing needs mirroring. ========================================================================== */ /* ---------- Fonts ---------------------------------------------------- */ @font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tajawal-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tajawal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tajawal-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tajawal-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; } @font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; } /* ---------- Tokens --------------------------------------------------- */ :root { --navy-900: #0c124f; --navy-800: #141e84; --navy-700: #243a6a; --navy-600: #3e4f7f; --navy-050: #eef1f7; --gold: #c9a35b; --gold-dark: #b89045; --gold-050: #faf6ee; --ink: #14181d; --ink-soft: #4a5260; --paper: #ffffff; --mist: #f6f8fb; --line: #dfe4ec; --font-ar: Tajawal, "Segoe UI", system-ui, sans-serif; --font-en: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: var(--font-ar); --font-head: var(--font-ar); --wrap: 1224px; /* the original builder grid */ --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 3px rgb(16 24 48 / .07), 0 4px 12px rgb(16 24 48 / .05); --shadow-md: 0 6px 18px rgb(16 24 48 / .1), 0 20px 44px rgb(16 24 48 / .08); --step: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem); /* vertical section rhythm */ } /* The English pages set dir="ltr" + .lang-en; Latin copy reads better in Inter. */ html[lang^="en"] { --font-body: var(--font-en); --font-head: var(--font-en); } /* ---------- Reset ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--ink); background: var(--paper); /* `clip`, not `hidden`. Both stop sideways overflow, but `hidden` turns body into a scroll container, and that silently kills position:sticky on the header -- it scrolled away with the page. `clip` does not create a scroll container, so the header stays pinned. Browsers too old for `clip` fall back to `visible`, which is harmless here: check.py confirms the document is never wider than the viewport at any width. */ overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(1.9rem, 1.25rem + 2.7vw, 3.25rem); } h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem); } h3 { font-size: clamp(1.1rem, .98rem + .55vw, 1.35rem); } p { margin: 0 0 1.1em; } ul { margin: 0 0 1.1em; padding-inline-start: 1.25em; } li { margin-bottom: .45em; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .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; } .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: 1rem; z-index: 200; background: var(--gold); color: var(--navy-900); padding: .7rem 1.2rem; border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none; } .skip-link:focus { inset-block-start: 0; } /* ---------- Header --------------------------------------------------- */ /* Pinned to the top of the viewport for the whole page. `sticky` rather than `fixed`: it pins identically but keeps its own space in the flow, so the hero underneath needs no compensating padding and nothing shifts if the bar changes height. body{overflow-x:hidden} does not break it here because the header is a direct child of body, not of a scroll container. */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: var(--navy-900); border-block-end: 1px solid rgb(255 255 255 / .08); transition: background-color .3s ease, box-shadow .3s ease; } .site-header.is-stuck { background: rgb(12 18 79 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgb(6 10 32 / .32); } .site-header__inner { transition: min-height .3s ease; } @media (min-width: 786px) { .site-header.is-stuck .site-header__inner { min-height: 62px; } } .site-header__inner { direction: ltr; /* logo left, links, social right */ display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); min-height: 72px; width: min(100% - 2rem, 1240px); margin-inline: auto; } .site-logo { flex: none; display: block; margin-inline-end: auto; } .site-logo img { height: 72px; width: auto; } .nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 41px); list-style: none; margin: 0; padding: 0; } .nav__link { display: block; padding: .4rem 0; color: #fff; text-decoration: none; font-size: .975rem; border-block-end: 2px solid transparent; transition: color .18s ease, border-color .18s ease; } .nav__link:hover { color: var(--gold); } .nav__link[aria-current="page"] { color: var(--gold); border-block-end-color: var(--gold); } .header__meta { display: flex; align-items: center; gap: 1rem; } .social { display: flex; align-items: center; gap: .85rem; list-style: none; margin: 0; padding: 0; } .social a { color: #fff; opacity: .85; transition: opacity .18s ease, color .18s ease; display: block; } .social a:hover { opacity: 1; color: var(--gold); } .social svg { width: 16px; height: 16px; fill: currentColor; } /* Language switcher */ .lang-switch { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 700; font-family: var(--font-en); letter-spacing: .02em; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease; } .lang-switch:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); } .lang-switch svg { width: 14px; height: 14px; fill: currentColor; } /* Mobile nav toggle ----------------------------------------------------- The toggle only exists below the sidebar breakpoint. Above 786px the bar stays an ordinary horizontal nav; between 786px and 1000px it just condenses, so the links keep fitting without a menu button appearing. */ .nav-toggle { display: none; flex: none; width: 44px; height: 44px; background: none; border: 1px solid rgb(255 255 255 / .3); border-radius: 10px; color: #fff; cursor: pointer; padding: 0; align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease; } .nav-toggle:hover { border-color: var(--gold); color: var(--gold); } .nav-toggle svg { width: 22px; height: 22px; fill: currentColor; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } /* Both of these only exist inside the drawer; site.js builds the scrim and clones the social row into .nav__extra. Hidden by default so a wide screen never sees either, whatever the script did. */ .nav-scrim { display: none; } .nav__extra { display: none; } /* ---------- Header: condensed horizontal nav (786px - 1000px) --------- The five links, the logo and the language pill still fit here; the social row is what has to go, and the logo comes down with it. */ @media (min-width: 786px) and (max-width: 1000px) { .site-header__inner { gap: clamp(1rem, 2.6vw, 2.25rem); min-height: 64px; } .site-logo img { height: 46px; } .header__meta .social { display: none; } .nav__list { gap: clamp(.9rem, 2vw, 1.6rem); } .nav__link { font-size: .9rem; } } /* ---------- Header: off-canvas sidebar (below 786px) ------------------ The nav leaves the flow entirely and becomes a drawer pinned to the physical right edge, starting just below the header. Physical `right` and `top`, not logical insets: the panel has to come out from under the toggle button, and the toggle is on the right of the bar on both the RTL and the LTR build (.site-header__inner is direction:ltr on both). Because it starts below the header rather than covering it, the logo, the close button and the language pill all stay visible and clickable while the drawer is open, so nothing has to be duplicated inside it. */ @media (max-width: 785.98px) { .site-header__inner { min-height: 64px; gap: .75rem; padding-block: .5rem; } .site-logo img { height: 36px; } .nav-toggle { display: inline-flex; } /* Both the social row and the language pill move into the drawer at this width, so the bar itself is just the logo and the button. */ .header__meta { display: none; } .nav { position: fixed; top: var(--header-h, 64px); bottom: 0; right: 0; z-index: 99; /* under the header (100), over the scrim (98) */ width: min(320px, 84vw); padding: 1rem 1.25rem 2rem; background: var(--navy-900); border-left: 1px solid rgb(255 255 255 / .1); box-shadow: -20px 0 44px rgb(6 10 32 / .45); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* 101% so the shadow clears the edge too. `visibility` is what keeps the links out of the tab order while closed; it is switched at the end of the slide out and at the start of the slide in. */ transform: translateX(101%); visibility: hidden; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s; } .nav.is-open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: .9rem .25rem; font-size: 1.05rem; border-block-end: 1px solid rgb(255 255 255 / .1); } .nav__link[aria-current="page"] { border-block-end-color: var(--gold); } /* The social block below draws its own rule, so the last link must not draw a second one right above it. The current page keeps its gold marker either way. */ .nav__list > li:last-child .nav__link:not([aria-current="page"]) { border-block-end-color: transparent; } /* The header's social row is hidden at this width, so the clone site.js drops in here is the only place those links survive on a phone. */ .nav__extra { display: block; margin-block-start: 1.4rem; padding-block-start: 1.25rem; border-block-start: 1px solid rgb(255 255 255 / .12); } .nav__extra .social { justify-content: center; gap: 1.1rem; } .nav__extra .social svg { width: 18px; height: 18px; } /* The language switch is a full-width pill at the top of this block rather than the compact bar version -- there is room for the whole word here. */ .nav__extra .lang-switch { display: flex; justify-content: center; width: 100%; margin-block-end: 1.15rem; padding: .7rem 1rem; font-size: .95rem; } .nav__extra .lang-switch__full { display: inline; } .nav__extra .lang-switch__short { display: none; } .nav-scrim { display: block; position: fixed; inset: var(--header-h, 64px) 0 0 0; z-index: 98; background: rgb(6 10 32 / .55); opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent; transition: opacity .3s ease, visibility 0s linear .3s; } html.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } /* Freeze the page behind the drawer by taking body out of flow, not by turning off the root's overflow: a root that stops being scrollable discards its scroll offset, which sent the page back to the top the moment the drawer opened. Fixing body keeps the reader exactly where they were -- site.js parks the offset in `top` and puts it back on close -- and the header still sticks, because body's box still spans the viewport. */ html.nav-open body { position: fixed; inset-inline: 0; } /* Script blocked: the drawer can never be opened, so put the list back in the flow rather than leaving it parked off-screen and unreachable. */ .no-js .site-header__inner { flex-wrap: wrap; } .no-js .nav-toggle { display: none; } /* Nothing built the drawer, so the language switch has to stay in the bar. */ .no-js .header__meta { display: flex; gap: .5rem; } .no-js .header__meta .social { display: none; } .no-js .nav { position: static; width: auto; visibility: visible; transform: none; order: 3; flex-basis: 100%; padding: .25rem 0 .75rem; background: none; border-left: 0; box-shadow: none; overflow: visible; } } .lang-switch__short { display: none; } @media (max-width: 420px) { .lang-switch__full { display: none; } .lang-switch__short { display: inline; } .lang-switch { padding: .4rem .6rem; } } /* ---------- Motion ---------------------------------------------------- The original animates exactly one thing: an image fades in and slides up 20% over .65s ease, .1s after its block scrolls into view. Those three numbers are its whole vocabulary, and everything below reuses them, so the reveals the brief asks for read as the same site rather than a new one. Nothing here is load-bearing. The hidden start state is scoped to html.js-anim, which site.js only sets once it has an IntersectionObserver and the visitor has not asked for reduced motion. Script blocked, observer missing, reduced motion on, Tailwind's CDN down: the page renders in full, just without movement. Content is never hidden by markup alone. -------------------------------------------------------------------- */ :root { --anim-dur: .65s; --anim-ease: ease; --anim-delay: .1s; } .js-anim [data-reveal] { opacity: 0; transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); transition-delay: calc(var(--anim-delay) + var(--d, 0ms)); } /* translateY(20%) is the original's own figure. */ .js-anim [data-reveal="up"] { transform: translateY(20%); } .js-anim [data-reveal="image"] { transform: translateY(20%) scale(.94); } .js-anim [data-reveal="scale"] { transform: scale(.9); } .js-anim [data-reveal="left"] { transform: translateX(-8%); } .js-anim [data-reveal="right"] { transform: translateX(8%); } .js-anim [data-reveal].is-in { opacity: 1; transform: none; } /* Parallax rides on its own element, never on one carrying [data-reveal], so the two never fight over `transform`. --py is written by site.js from a rAF, and is 0 until the page scrolls. */ [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); } @media (max-width: 900px) { [data-parallax] { transform: none; } } /* Nav links slide down in sequence when the mobile menu opens. */ .nav.is-open .nav__list > li { animation: nav-in .32s var(--anim-ease) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim [data-reveal].is-in { opacity: 1; transform: none; transition: none; } [data-parallax] { transform: none; } .nav.is-open .nav__list > li { animation: none; } } /* ---------- Canvas --------------------------------------------------- The original is a drag-and-drop canvas: every element carries an absolute position inside a 1224px grid. These rules reproduce those coordinates exactly at desktop width (left/width as a percentage of 1224 so the band scales), then fall back to ordinary stacked flow on narrow screens, where the original simply breaks. --------------------------------------------------------------------- */ .canvas { position: relative; width: min(100% - 2rem, 1224px); margin-inline: auto; min-height: var(--h, auto); } /* inset-inline-end, not left: the builder recorded every offset as a distance from the left of an LTR grid, and measuring it from the inline end instead mirrors the whole composition. Note which way round that falls: on the RTL build the inline end is the left, so Arabic gets the recorded layout back, and it is the LTR build that mirrors. */ .canvas > .ce { position: absolute; inset-inline-end: var(--l); top: var(--t); width: var(--w); z-index: var(--z, 1); } .canvas > .ce > :last-child { margin-block-end: 0; } .ce img { width: 100%; } /* A band's height is the number the builder recorded for the desktop canvas, and it already carries the original's block padding -- which is why the band rules below zero their own. Once the canvas reflows to a column that height is dropped, and with it the only spacing the band had: the copy ends up flush against the gold rules above and below. Give it real padding back. */ @media (max-width: 900px) { .section.band, .page-hero.band { padding-block: clamp(2rem, 6vw, 3rem); } .hero.band { padding-block: clamp(2.25rem, 8vw, 3.5rem); } .canvas { display: flex; flex-direction: column; gap: clamp(1.15rem, 4.5vw, 1.75rem); min-height: 0; } .canvas > .ce { position: static; inset-inline-end: auto; top: auto; width: auto; order: var(--o, 0); } } /* A canvas band's height is the block height the builder recorded, and that number already includes the original's 16px of block padding. Adding padding here on top of it made every band 32px taller than the original. */ .section.band { padding-block: 0; } /* Below 768px the canvas keeps the same 1.25rem side gutter as .wrap, so no band puts its text closer to the screen edge than any other. */ @media (max-width: 768px) { .canvas { width: min(100% - 2.5rem, 1224px); } .blog-list { padding-block: clamp(2.5rem, 9vw, 3.75rem); } .article__cta { padding: 1.4rem 1.2rem; } } /* Type, matching the original's per-element sizes. */ .c-h1 { margin: 0; text-align: center; color: black; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.15; } .c-sub { margin: 0; text-align: center; color: var(--navy-700); font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); } .c-intro { margin: 0; text-align: center; color: var(--navy-700); font-weight: 400; font-size: clamp(.95rem, .9rem + .25vw, 1.125rem); line-height: 1.5; } .c-h2-gold { margin: 0; text-align: center; color: var(--gold); font-weight: 700; font-size: clamp(1.85rem, 1.2rem + 2.2vw, 3rem); line-height: 1.2; } .c-lead { margin: 0; text-align: center; color: #fff; font-weight: 400; font-size: clamp(1.05rem, .95rem + .5vw, 1.5rem); } .c-body { margin: 0; text-align: center; color: #fff; line-height: 1.5; } .c-body--sm { font-size: clamp(.9rem, .86rem + .18vw, 1rem); } .c-banner, .c-strip { position: relative; } /* The photograph only. These blocks now also hold the decorations that sit on them, and a blanket `img` selector handed those the host's crop ratio -- the emblem came out 84px tall instead of 327px. */ .c-banner > img:first-child, .c-strip > img:first-child { border-radius: 18px; display: block; object-fit: cover; } .c-banner > img:first-child { aspect-ratio: 812 / 266; } /* The white wordmark is a separate element laid over this photograph, and on a bright frame it had nothing to stand against. Same wash the other photo blocks on the site use, so the mark reads at any exposure. */ .c-banner::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: rgb(9 14 46 / .55); } .c-strip > img:first-child { aspect-ratio: 1224 / 228; } /* The two decorations the builder drew as their own canvas boxes, nested into the art they sit on. Every offset is a share of that art rather than a fixed pixel figure, so they hold their place at any width -- including the phone, where the canvas reflows to a column and a free-floating box had nowhere to land, which is why they used to be hidden below 900px. The percentages are the recorded coordinates re-expressed against their host: the wordmark's 32.020%/19.925%/35.960% is (38.0719-16.8301)/66.3399, 53/266 and 23.8562/66.3399. This also stops them drifting -- the recorded --t was a fixed pixel offset while the art scaled, so below 1224px the mark slid down its banner and the badge slid up its strip. */ .c-banner .c-banner__mark { position: absolute; z-index: 1; inset-inline-start: 32.020%; top: 28.925%; width: 35.960%; height: auto; } .c-strip__sq { position: absolute; z-index: 1; display: block; inset-inline-end: 80.4739%; top: -20.614%; width: 14.2157%; } .c-strip .c-strip__mark { position: absolute; z-index: 2; inset-inline-end: 69%; top: -54.386%; width: 37%; height: auto; } /* Gold square that sits behind the emblem on the story band. */ .c-goldsq { aspect-ratio: 1; background: var(--gold); } /* Vision / mission panels */ .c-panel { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 606 / 227; min-height: 190px; /* Without this the pair runs off the page between 901px and 1055px: the ratio makes the box too short for min-height, and Chrome then transfers that 190px back through the ratio into the width, resolving the panel at 190 * 606/227 = 507px inside a column only 479px wide. */ max-width: 100%; background: var(--navy-900) center/cover no-repeat; color: #fff; display: flex; align-items: center; } .c-panel::after { content: ""; position: absolute; inset: 0; background: rgb(9 14 46 / .6); } .c-panel__in { position: relative; z-index: 1; direction: ltr; display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); width: 100%; padding: clamp(1rem, 2.5vw, 1.75rem); } .c-panel__text { margin: 0; flex: 1 1 auto; text-align: center; direction: rtl; font-weight: 700; font-size: clamp(.82rem, .74rem + .32vw, 1rem); line-height: 1.55; } .c-panel__title { margin: 0; flex: none; direction: rtl; color: #fff; font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.9vw, 3rem); line-height: 1.1; padding-inline-start: clamp(.75rem, 2vw, 1.4rem); border-inline-start: 4px solid var(--gold); } html[lang^="en"] .c-panel__text, html[lang^="en"] .c-panel__title { direction: ltr; } /* The panel scales with the canvas but the type inside it does not, so below 1100px the recorded 606/227 ratio stops leaving room for the copy and the text starts being clipped. Size to content instead; 1101px and up is untouched and still renders at exactly 606x227 on a full canvas. */ @media (max-width: 1100px) { .c-panel { aspect-ratio: auto; } } @media (max-width: 900px) { .c-panel__in { flex-direction: column-reverse; gap: .75rem; } .c-panel__title { padding-inline-start: 0; border-inline-start: 0; padding-block-end: .5rem; border-block-end: 4px solid var(--gold); } } /* Home canvas elements, matching the original's per-element type spec. */ .c-hero-title { margin: 0; text-align: start; color: #fff; line-height: 1.15; font-size: clamp(2rem, 1.3rem + 2.9vw, 4rem); text-shadow: 0 2px 18px rgb(0 0 0 / .35); } .c-hero-sub { margin: 0; text-align: center; color: #fff; font-weight: 700; line-height: 1.2; font-size: clamp(1.35rem, .9rem + 2.4vw, 3rem); text-shadow: 0 2px 18px rgb(0 0 0 / .35); } .c-hero-lede { margin: 0; text-align: center; color: #fff; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 12px rgb(0 0 0 / .35); font-size: larger; } /* Padding zeroed, as asked. Written as .btn.c-hero-btn because .btn is declared further down this file with the same specificity, so a lone .c-hero-btn loses to its .85rem/2rem. .btn's padding is what normally gives the pill its body; the height here is now the line box alone. */ .btn.c-hero-btn { width: 100%; padding: 0; } .c-round img { border-radius: 18px; width: 100%; display: block; object-fit: cover; } /* The emblem art is square with its own transparent margin, exactly as the original ships it, but the original draws it in a 401x317 box. Pinning the ratio here and letting the art fit inside reproduces that: without it the square scales to the box width and stands 466px tall, hanging over the headline. `.ce img{width:100%}` alone cannot express this. */ .c-emblem { width: 100%; height: auto; aspect-ratio: 401 / 317; object-fit: contain; } .c-emblem--sm { aspect-ratio: 287 / 207; } .c-a-h2 { margin: 0; color: var(--gold-dark); font-weight: 700; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); } .c-a-body, .c-a-list { margin: 0; color: #000; font-size: clamp(.95rem, .9rem + .25vw, 1.125rem); line-height: 1.5; } .c-a-body { text-align: start; } .c-a-label { margin: 0; color: var(--gold-dark); font-weight: 700; font-size: clamp(1.05rem, .95rem + .5vw, 1.5rem); } .c-a-list { list-style: none; padding: 0; text-align: start; } .c-a-list li { margin-bottom: .15em; } .c-s-h2 { margin: 0; color: #fff; font-weight: 400; text-align: center; line-height: 1.2; font-size: clamp(1.85rem, 1.2rem + 2.2vw, 3rem); } .c-s-sub { margin: 0; color: #fff; font-weight: 400; text-align: center; font-size: clamp(1.05rem, .95rem + .5vw, 1.5rem); } .c-card { background: rgb(62 80 128 / .65); border-radius: 29px; min-height: 292px; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 29px 9px 16px; gap: 6px; } .c-card-i { width: 179px; max-width: 68%; height: 119px; object-fit: contain; } .c-card-t { margin: 0; color: #fff; font-weight: 400; text-align: center; font-size: clamp(.95rem, .9rem + .25vw, 1.125rem); } .c-card-x { margin: 0; color: #fff; text-align: center; line-height: 1.45; font-size: clamp(.8rem, .76rem + .18vw, .875rem); } .c-c-h2 { margin: 0; color: var(--navy-700); font-weight: 700; text-align: center; line-height: 1.2; font-size: clamp(1.85rem, 1.2rem + 2.2vw, 3rem); } .c-c-sub { margin: 0; color: var(--navy-700); text-align: center; font-size: clamp(.95rem, .9rem + .25vw, 1.125rem); } /* On narrow screens the canvas becomes ordinary flow, so the decorative card backdrops would stack as empty boxes. Fold them away and give the icon / title / text group its own card styling instead. */ @media (max-width: 900px) { /* Reflowed canvas: keep images to sensible sizes and put the hero emblem first, as the original's own mobile layout does. */ .hero.band .canvas { text-align: center; align-items: center; } .hero.band .ce img { width: min(190px, 45vw); margin-inline: auto; } .hero.band .ce:first-child { order: -1; } .btn.c-hero-btn { width: auto; } /* must match the desktop rule's specificity */ .c-card { min-height: 0; padding: 24px 16px; } .c-round img { max-height: 320px; } } /* Contact page canvas elements */ .c-hero-sub2 { margin: 0; text-align: center; color: #fff; font-weight: 700; font-size: clamp(1.05rem, .95rem + .5vw, 1.5rem); text-shadow: 0 1px 12px rgb(0 0 0 / .35); } .c-l-sub { margin: 0; text-align: center; color: var(--gold); font-weight: 700; font-size: clamp(.95rem, .9rem + .25vw, 1.125rem); } .c-l-label { margin: 0; text-align: center; color: var(--ink); font-weight: 700; font-size: clamp(.95rem, .9rem + .25vw, 1.125rem); } .c-l-val { margin: 0; text-align: center; color: var(--gold-dark); font-weight: 700; line-height: 1.4; font-size: clamp(1.15rem, .95rem + .9vw, 1.75rem); } .c-l-val--sm { font-size: clamp(.95rem, .9rem + .3vw, 1.25rem); } .map-frame { border: 0; width: 100%; height: 384px; border-radius: 8px; display: block; } @media (max-width: 900px) { .map-frame { height: 300px; } } /* The contact hero holds a full form, so it must not be vertically centred. Like .section.band, a canvas hero's height comes from the block height the builder recorded, so these must not add padding or a minimum of their own. */ .page-hero.band { display: block; padding-block: 0; } .hero.band { padding-block: 0; min-height: 0; } /* ---------- Divider bands -------------------------------------------- */ /* The original site separates every band with a solid strip, ~20-25px tall. Two of them are navy rather than gold. */ .rule { height: 22px; background: var(--gold); } .rule--navy { background: var(--navy-700); } .rule-gold { height: 22px; background: var(--gold); } /* legacy alias */ /* ---------- Sections ------------------------------------------------- */ .section { padding-block: var(--step); } .section--mist { background: var(--mist); } .section--navy { background: var(--navy-600); color: #fff; } .section--ink { background: var(--navy-900); color: #fff; } /* The Arabic geometric watermark the original uses behind most light bands. */ .section--pattern { background-color: #fff; background-image: url("../img/bg-pattern.jpg"); background-size: cover; background-position: center; } /* The blue/gold gradient behind the home services band and the about story band. */ .section--gradient { background-color: #f6f8fb; background-image: url("../img/bg-gradient.jpg"); background-size: cover; background-position: center; color: #fff; } .section__head { max-width: 62ch; margin-inline: auto; text-align: center; margin-block-end: 3rem; } .section__eyebrow { color: var(--gold); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 .35rem; line-height: 1.3; } /* Home "اتصل بنا" and the about intro are navy, not gold. */ .section__eyebrow--navy { color: var(--navy-700); } .section__title { margin: 0 0 .5rem; } .section__lede { color: var(--ink-soft); margin: 0; font-size: 1.05rem; } .section--navy .section__lede, .section--ink .section__lede, .section--gradient .section__lede { color: rgb(255 255 255 / .88); } /* Large display heading used for the band titles (48px in the original). */ .display { font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem); line-height: 1.2; margin: 0 0 .4rem; } .display--light { color: #fff; font-weight: 400; } .display--gold { color: var(--gold); } .display--navy { color: var(--navy-700); } /* ---------- Buttons -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 2rem; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--navy-700); color: #fff; } .btn--primary:hover { background: var(--navy-800); } .btn--gold { background: var(--gold); color: var(--navy-900); } .btn--gold:hover { background: transparent; } .btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--gold); } .btn--ghost:hover { background: var(--gold); color: var(--navy-900); } .btn--light { background: #fff; color: var(--navy-900); } .btn--light:hover { background: var(--gold); } /* ---------- Hero ----------------------------------------------------- */ .hero { position: relative; display: grid; align-items: center; min-height: clamp(430px, 68vh, 640px); padding-block: clamp(3rem, 8vw, 6rem); background: var(--navy-900) center/cover no-repeat; color: #fff; text-align: center; overflow: hidden; } /* A flat black wash, not a gradient. The builder stores 0.48 for the home hero and 0.45 for the contact hero but does not render those at face value; these are the values measured off the live pages. */ .hero::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .30); } .hero > * { position: relative; z-index: 1; } /* Original composition: the emblem sits to one side of the copy, not above it. Below 820px it stacks, emblem first. */ .hero__inner { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); } .hero__mark { flex: none; width: min(401px, 30vw); } .hero__copy { flex: 0 1 auto; max-width: 700px; } @media (max-width: 820px) { .hero__inner { flex-direction: column; gap: 1.25rem; } .hero__mark { width: min(300px, 55vw); } } @media (max-width: 820px) { section{ padding-block: 2rem !important;} } .hero__title { margin: 0 0 .2rem; text-shadow: 0 2px 18px rgb(0 0 0 / .35); font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); /* 64px */ } /* White and bold in the original, not gold. */ .hero__subtitle { font-family: var(--font-head); font-weight: 700; margin: 0 0 1rem; font-size: clamp(1.35rem, .9rem + 2.4vw, 3rem); color: #fff; /* 48px */ text-shadow: 0 2px 18px rgb(0 0 0 / .35); } .hero__lede { margin-inline: auto; margin-block-end: 1.75rem; font-weight: 700; font-size: clamp(1rem, .9rem + .8vw, 1.5rem); color: #fff; /* 24px */ text-shadow: 0 1px 12px rgb(0 0 0 / .35); } /* Page banner (interior pages) */ .page-hero { position: relative; padding-block: 16px; background: var(--navy-900) center/cover no-repeat; color: #fff; text-align: center; } .page-hero::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .33); } .page-hero > * { position: relative; z-index: 1; } .page-hero__title { margin: 0 0 .4rem; } .page-hero__lede { margin: 0 auto; max-width: 62ch; color: var(--gold); font-weight: 700; font-size: 1.1rem; } /* ---------- Accreditation strip -------------------------------------- */ .accred { position: relative; background: #fff; } /* Slides are stacked in a single grid cell and cross-faded. Nothing is laid out off to one side, so this behaves identically in RTL and LTR and can never widen the document. */ .accred__viewport { position: relative; } .accred__track { display: grid; } .accred__track img { grid-area: 1 / 1; width: 100%; /* The block is 180px tall on the original and 94px on mobile, with the 1584x396 strip cropped to fit rather than scaled down. */ height: clamp(94px, 12.5vw, 180px); object-fit: cover; object-position: center; transition: opacity .6s ease; } @media (prefers-reduced-motion: reduce) { .accred__track img { transition: none; } } /* Slide 1 is opaque from CSS alone, so a blocked or slow script leaves the strip showing rather than blank. The script takes over by setting data-ready. */ .accred__track img + img { opacity: 0; } [data-ready] .accred__track img { opacity: 0; } [data-ready] .accred__track img.is-active { opacity: 1; } .no-js .accred__dots { display: none; } .accred__dots { position: absolute; inset-inline: 0; bottom: clamp(8px, 2.5vw, 34px); display: flex; justify-content: center; gap: .5rem; } .accred__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .3); cursor: pointer; } .accred__dot[aria-selected="true"] { background: var(--navy-700); } /* ---------- Split (about) -------------------------------------------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; } .split__body > :last-child { margin-block-end: 0; } .split__label { color: var(--gold); font-weight: 700; margin-block-end: .5rem; } /* Which physical side the media lands on. The original positions these with absolute LTR coordinates, so the side is fixed by design rather than by reading direction; `order` pins it without depending on DOM order. */ .split--media-end > .split__media { order: 2; } .split--media-end > .split__body { order: 1; } .split--media-start > .split__media { order: 1; } .split--media-start > .split__body { order: 2; } @media (max-width: 720px) { /* Stacked: image first, copy after, as the original does on mobile. */ .split--media-end > .split__media, .split--media-start > .split__media { order: 1; } .split--media-end > .split__body, .split--media-start > .split__body { order: 2; } } /* ---------- Banner with a centred logo (about page) ------------------ */ .banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .banner img { width: 100%; display: block; object-fit: cover; } /* The original crops these to wide, short strips (roughly 3:1 and 5:1). */ .banner--wide img { aspect-ratio: 3 / 1; } .banner--strip img { aspect-ratio: 16 / 3; } @media (max-width: 640px) { .banner--wide img { aspect-ratio: 16 / 9; } .banner--strip img { aspect-ratio: 3 / 1; } } .banner::after { content: ""; position: absolute; inset: 0; background: rgb(9 14 46 / .5); } .banner__logo { position: absolute; inset: 0; margin: auto; z-index: 1; width: clamp(150px, 26vw, 300px); height: fit-content; filter: drop-shadow(0 2px 12px rgb(0 0 0 / .4)); } .tick-list { list-style: none; padding: 0; margin: 0 0 1.75rem; } .tick-list li { position: relative; padding-inline-start: 1.9rem; margin-bottom: .7rem; } .tick-list li::before { content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); } /* ---------- Card grids ----------------------------------------------- */ .grid { display: grid; gap: 1.5rem; } .grid--1 { max-width: 760px; margin-inline: auto; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .card { display: flex; flex-direction: column; gap: .6rem; padding: 2rem 1.6rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); text-align: center; height: 100%; transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card__icon { width: 92px; height: 92px; object-fit: contain; margin-inline: auto; margin-block-end: .4rem; } .card__title { margin: 0; font-size: 1.12rem; } .card__text { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; } /* Translucent cards on photographic bands, matches the original's rgba(62,80,128,.65) fill and 29px corner radius. */ .card--glass { background: rgb(62 80 128 / .65); border-color: rgb(255 255 255 / .16); border-radius: 29px; color: #fff; backdrop-filter: blur(4px); } .card--glass .card__title { font-weight: 400; font-size: 1.125rem; } .card--glass .card__text { color: rgb(255 255 255 / .88); font-size: .875rem; } .card--glass .card__icon { width: 150px; height: 100px; } /* ---------- Vision / mission: text sits on top of the photo ---------- */ .pillar-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .overlay-panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 230px; display: flex; align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--navy-900) center/cover no-repeat; color: #fff; } .overlay-panel::after { content: ""; position: absolute; inset: 0; background: rgb(9 14 46 / .62); } .overlay-panel > * { position: relative; z-index: 1; } .overlay-panel__grid { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); width: 100%; } .overlay-panel__title { flex: none; margin: 0; color: #fff; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem); padding-inline-end: clamp(1rem, 2vw, 1.5rem); border-inline-end: 4px solid var(--gold); } .overlay-panel__text { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.7; } @media (max-width: 480px) { .overlay-panel__grid { flex-direction: column; align-items: stretch; gap: .9rem; } .overlay-panel__title { padding-inline-end: 0; border-inline-end: 0; padding-block-end: .5rem; border-block-end: 4px solid var(--gold); } } /* ---------- Service bands (services page) ---------------------------- Six full-bleed bands of cards, positioned on the canvas at the original's coordinates. Each card is a photo strip carrying the title and an icon, over a flat grey panel. The dark bands lay a black wash over the photograph, at the opacity the builder stored per block. */ /* Longhands, not the `background` shorthand: the shorthand resets background-attachment, which would undo .bg-fixed on the pattern bands. */ .s-band { position: relative; background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; } .s-band--dark { color: #fff; } .s-band--dark::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--dim, .75)); } .s-band > * { position: relative; z-index: 1; } /* The original's type sizes are absolute pixels on a 1224px canvas. --fsn is that number, unitless, so the size can track the canvas: full size at 1224px and up, scaling down with the viewport below it, never past a legible floor. (100 / 1224 = 0.0817vw per pixel of design size.) */ .s-h1 { margin: 0; text-align: center; color: #1d1e20; line-height: 1.3; font-size: clamp(2rem, 5.23vw, 64px); } .s-lede { margin: 0; text-align: center; color: #1d1e20; font-weight: 700; font-size: clamp(1.05rem, 1.96vw, 24px); } .s-band-t { margin: 0; text-align: center; line-height: 1.3; color: var(--navy-700); font-size: clamp(1.1rem, calc(var(--fsn) * 0.0817vw), calc(var(--fsn) * 1px)); } .s-band--dark .s-band-t { color: #fff; } /* Card header: the photo strip, with the title and icon placed on it. */ .svc-head { position: relative; height: var(--h); border-radius: 8px; overflow: hidden; background: var(--navy-900); } .svc-head .svc-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .svc-head__t { position: absolute; inset-inline-end: var(--l); top: var(--tc); width: var(--w); transform: translateY(-50%); margin: 0; color: #fff; font-weight: 700; line-height: 1.3; text-align: center; font-size: clamp(1rem, calc(var(--fsn) * 0.0817vw), calc(var(--fsn) * 1px)); } /* Two classes deep so this beats the canvas's blanket `.ce img { width:100% }`, which would otherwise blow the icon up to the full width of the strip. */ .svc-head .svc-head__i { position: absolute; inset-inline-end: var(--l); top: var(--t); width: var(--w); height: 100%; object-fit: contain; } /* ---------- Service card rows ---------------------------------------- The builder recorded every service card as two absolutely positioned boxes on the canvas, so each one sized itself independently: cards in the same row ended at different heights, their copy started at different heights, and at some widths the row ran off the bottom of its own band (the Arabic industrial band overflowed by 85px at 901px wide). The row is a grid instead. `grid-auto-flow: column` over two template rows puts every head in the first row and every body in the second, so all the heads share one height and all the bodies share another, at every width. The row is in normal flow, so unlike the absolute boxes it also makes the band grow to contain it. The 0.9804% gutter is the gap the builder left between the recorded card positions, as a percentage so it tracks the canvas. */ .svc-row { /* Most rows span the canvas; the marketing band is the one the builder inset, so its width comes in on --rw. */ width: var(--rw, 100%); margin-inline: auto; padding-block-start: var(--rt, 0); display: grid; grid-auto-flow: column; grid-template-rows: auto 1fr; grid-auto-columns: minmax(0, 1fr); column-gap: 0.9804%; } /* Absolute .ce children contribute no height, so this padding is what keeps the cards off the band's bottom edge once the canvas grows past its --h. */ .canvas--svc { padding-block-end: 16px; } @media (max-width: 900px) { /* Reflowed: one card under another, in source order, inside the column the canvas already becomes. */ .svc-row { /* --rw is a desktop inset; stacked, every card takes the full column. */ width: 100%; padding-block-start: 0; order: var(--ro, 3); grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; } .svc-row > .svc-body { margin-block-end: 1.25rem; } .svc-row > .svc-body:last-child { margin-block-end: 0; } } /* Card body: the flat grey panel. min-height holds the original's height; the panel grows rather than clipping when a translation runs longer. */ .svc-body { background: #eceff3; color: #000; min-height: var(--h); padding: var(--pt) var(--pr) 16px var(--pl); font-size: clamp(.875rem, calc(var(--fsn) * 0.0817vw), calc(var(--fsn) * 1px)); line-height: 1.5; text-align: center; } .svc-body p { margin: 0 0 8px; } .svc-body p:last-child { margin-bottom: 0; } .svc-body--start { text-align: start; } @media (max-width: 900px) { .svc-head { height: auto; min-height: 64px; display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; } /* The strip is cropped differently once it is this wide and short, and one of the photos is bright enough to swallow the white title. A light scrim only here, so the desktop strips stay exactly as the original renders. */ .svc-head::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .3); } /* relative, not static: the strip photo is absolutely positioned, and a positioned element paints over a static one, so going static here hides the title and icon behind the photo. */ .svc-head__t, .svc-head .svc-head__i { position: relative; inset-inline-end: auto; top: auto; transform: none; } .svc-head__t { width: auto; flex: 1; text-align: start; } .svc-head .svc-head__i { width: 46px; flex: none; order: 2; } .svc-body { min-height: 0; padding: 1rem 1.1rem 1.2rem; } } /* Service category band (services page) */ .service-band { position: relative; padding-block: var(--step); background: var(--navy-900) center/cover no-repeat; color: #fff; } .service-band::after { content: ""; position: absolute; inset: 0; background: rgb(9 14 46 / .82); } .service-band > * { position: relative; z-index: 1; } .service-band__title { text-align: center; color: #fff; margin-block-end: 2.5rem; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); } .service-band__title span { color: var(--gold); display: block; font-size: .82em; font-weight: 400; margin-block-start: .2rem; } .service-band--light { color: var(--ink); } .service-band--light::after { background: rgb(255 255 255 / .86); } .service-band--light .service-band__title { color: var(--navy-900); } .service-card { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.75rem 1.5rem; border-radius: var(--radius); background: rgb(255 255 255 / .96); color: var(--ink); border-block-start: 4px solid var(--gold); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .service-card__head { display: flex; align-items: center; gap: .9rem; } .service-card__icon { width: 46px; height: 46px; object-fit: contain; flex: none; } .service-card__title { margin: 0; font-size: 1.05rem; line-height: 1.4; } .service-card__text { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.75; } .service-card__list { margin: 0; padding-inline-start: 1.1em; color: var(--ink-soft); font-size: .94rem; } .service-card__list strong { color: var(--navy-700); } /* ---------- Vision / mission ----------------------------------------- */ .pillar { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--navy-900) center/cover no-repeat; color: #fff; min-height: 240px; display: flex; flex-direction: column; justify-content: center; } .pillar::after { content: ""; position: absolute; inset: 0; background: rgb(9 14 46 / .78); } .pillar > * { position: relative; z-index: 1; } .pillar__title { margin: 0 0 .9rem; padding-inline-start: .9rem; border-inline-start: 4px solid var(--gold); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); } .pillar__text { margin: 0; color: rgb(255 255 255 / .88); } /* ---------- Forms ---------------------------------------------------- */ /* Metrics measured off the original's own form: a 606x437 white card with 38px side padding, 54px inputs, a 96px textarea and a centred pill button. The canvas band is only as tall as the block the builder recorded, so the form has to come out this height or it runs past the bottom of the band. */ /* The original's form sits on a pale grey panel with gold-outlined white fields, not a white card with grey fields. Both home and contact use it. */ .form-card { background: #eceff3; border-radius: 16px; padding: 27px 38px 28px; box-shadow: var(--shadow-md); } @media (max-width: 560px) { .form-card { padding: 20px 18px 22px; } } .field { margin-block-end: 18px; } .field label { display: block; font-weight: 700; font-size: .8125rem; line-height: 1.45; margin-block-end: 6px; color: var(--navy-900); } .field .req { color: #c0392b; } .field input, .field textarea, .field select { width: 100%; padding: 15px 16px; font: inherit; font-size: 1rem; line-height: 1.35; color: var(--ink); background: #fff; border: 1px solid var(--gold); border-radius: 8px; transition: border-color .18s ease, box-shadow .18s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgb(36 58 106 / .18); } .field textarea { min-height: 96px; resize: vertical; } .form-actions { text-align: center; } .form-actions .btn { line-height: 1.35; } /* ---------- Contact facts (contact page) ----------------------------- */ .contact-facts { display: grid; gap: 1.5rem 2rem; margin-block-start: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .fact__label { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--ink); } .fact__value { margin: 0 0 .2rem; font-weight: 700; color: var(--gold-dark); font-size: 1.05rem; } .fact__value a { text-decoration: none; } .fact__value a:hover { color: var(--navy-700); } /* ---------- Contact detail cards ------------------------------------- */ .info-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .info { padding: 1.75rem 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow-sm); } .info__label { color: var(--gold); font-weight: 700; margin: 0 0 .4rem; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; } .info__value { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--navy-900); } .info__value a { text-decoration: none; } .info__value a:hover { color: var(--gold-dark); } .info__value--sm { font-size: .98rem; font-weight: 400; line-height: 1.7; color: var(--ink-soft); } .map-frame { border: 0; width: 100%; height: clamp(280px, 42vw, 420px); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; } /* ---------- Blog ----------------------------------------------------- */ /* ---------- Blog listing --------------------------------------------- The original: a white 234px band with the title, then two columns of plain cards on the patterned background, 596px each with a 32px gutter. The cards have no panel of their own, they sit straight on the pattern. */ .blog-head { background: #fff; } .blog-list { padding-block: 60px; } .post-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .post-card { display: flex; flex-direction: column; gap: 1rem; height: 100%; /* Kept here as well as on __link: a card is a
where the excerpt needs its own button, but still an where it does not, and an anchor left to the UA stylesheet draws an underline through the whole card. */ color: inherit; text-decoration: none; } /* The card is no longer one big anchor: the excerpt now carries a button, and a button inside an is neither valid nor clickable. The image and the title stay the link; everything below it is ordinary content. */ .post-card__link { display: flex; flex-direction: column; gap: 1rem; color: inherit; text-decoration: none; } .post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); } .post-card__media img { width: 100%; height: 100%; object-fit: cover; } .post-card__title { display: block; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.45; color: var(--navy-900); transition: color .18s ease; } .post-card__link:hover .post-card__title { color: var(--navy-700); } .post-card__excerpt { display: block; color: var(--ink-soft); font-size: .95rem; text-align: justify; } /* The clamp is switched on by site.js, not by the stylesheet. If the script never runs there is no button to open the copy again, so the copy has to stay whole -- the same rule the reveals follow. */ .js-clamp .post-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .js-clamp .post-card.is-open .post-card__excerpt { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .post-card__more { align-self: start; margin-block-start: -.5rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; color: var(--gold-dark); text-align: start; transition: color .18s ease; } .post-card__more:hover { color: var(--navy-700); text-decoration: underline; } .post-card__more[hidden] { display: none; } .post-meta { display: flex; align-items: center; gap: .6rem; margin-block-start: auto; padding-block-start: .4rem; font-size: .85rem; color: var(--ink-soft); /* The date is written out in the page's own language, so it takes the page's own face, and it follows the page's direction: start side, which is the right on the Arabic build. Bidi already keeps the digit runs in order. */ font-family: var(--font-body); } /* Every post opens with its title and meta centred on the patterned band and then drops into the body on white, and closes with the post grid again. */ .article-head { text-align: center; padding-block: clamp(1.75rem, 4.5vw, 3rem); } .article-head__title { margin: 0 auto .55rem; max-width: 954px; font-size: clamp(1.3rem, 1rem + 1.6vw, 2.05rem); line-height: 1.4; color: var(--navy-900); } .article-head__meta { margin: 0; color: var(--ink-soft); font-size: .95rem; } .article-more { padding-block: clamp(2.25rem, 5vw, 3.75rem); } .article { max-width: 74ch; margin-inline: auto; } .article__cover { border-radius: var(--radius-lg); margin-block-end: 2rem; box-shadow: var(--shadow-md); width: 100%; } .article h2 { margin-block-start: 2.2rem; color: var(--navy-900); } .article h3 { margin-block-start: 1.6rem; color: var(--navy-700); } .article ul { padding-inline-start: 1.3em; } .article strong { color: var(--navy-900); } .article__tags { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; } .tag { font-size: .82rem; padding: .3rem .8rem; border-radius: 999px; background: var(--gold-050); color: var(--gold-dark); border: 1px solid var(--gold); font-weight: 700; } .article__cta { margin-block-start: 2.5rem; padding: 1.75rem; border-radius: var(--radius-lg); background: var(--navy-050); border-inline-start: 4px solid var(--gold); text-align: center; } .article__cta p { margin-block-end: 1rem; font-weight: 700; color: var(--navy-900); } /* ---------- Footer --------------------------------------------------- */ .site-footer { position: relative; background: #0e1a20 center/cover no-repeat; color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); } .site-footer::before { content: ""; position: absolute; inset: 0; background: rgb(11 22 28 / .9); } .site-footer > * { position: relative; z-index: 1; } /* Physical left-to-right column order, as on the original. */ .footer-grid { direction: ltr; display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr 1.15fr 1.35fr; align-items: start; } .footer-col { direction: rtl; } html[lang^="en"] .footer-col { direction: ltr; } .footer-title { margin: 0 0 .55rem; color: var(--gold); font-family: var(--font-en); font-size: .95rem; font-weight: 700; letter-spacing: .04em; /* PHONE / EMAIL / ADDRESS: the original sets these in caps. */ text-transform: uppercase; } .footer-title--gap { margin-block-start: 1.4rem; } .footer-val { margin: 0 0 .45rem; color: rgb(255 255 255 / .88); font-size: .95rem; } .footer-val a { text-decoration: none; } .footer-val a:hover { color: var(--gold); } .footer-val--addr { line-height: 1.7; } .footer-form { margin-block-start: 1.5rem; direction: ltr; max-width: 360px; } .footer-form label { display: block; margin-block-end: .4rem; font-family: var(--font-en); font-size: .95rem; color: #fff; } .footer-form input { width: 100%; padding: .7rem .9rem; font: inherit; font-size: 1rem; border: 1px solid rgb(217 217 217 / .5); border-radius: 10px; background: #fff; color: var(--ink); } .footer-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(201 163 91 / .25); } .footer-form__btn { margin-block-start: .9rem; font-family: var(--font-en); font-size: .875rem; padding: .6rem 1.5rem; } .footer-brand { text-align: center; } .footer-brand__logo { width: min(230px, 70%); margin-inline: auto; margin-block-end: 1rem; } .footer-brand__text { color: rgb(255 255 255 / .8); font-size: .95rem; margin: 0 0 1.1rem; } .site-footer .social { justify-content: center; gap: 1rem; } .site-footer .social a { opacity: .85; } .site-footer .social svg { width: 19px; height: 19px; } .footer-copy { margin: 1.1rem 0 0; font-family: var(--font-en); font-size: .85rem; color: rgb(255 255 255 / .6); direction: ltr; /* keep "© 2026. All rights reserved." in order inside RTL */ } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .footer-form { margin-inline: auto; } .footer-brand__logo { width: 200px; } } /* ---------- Floating WhatsApp ---------------------------------------- */ .wa-float { position: fixed; inset-block-end: 22px; inset-inline-end: 20px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 4px 16px rgb(0 0 0 / .22); transition: transform .2s ease; } .wa-float:hover { transform: scale(1.07); } .wa-float svg { width: 30px; height: 30px; fill: currentColor; } /* ---------- Utilities ------------------------------------------------ */ .text-center { text-align: center; } .mt-0 { margin-block-start: 0; } .mb-0 { margin-block-end: 0; } .stack-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-block-start: 2.5rem; } /* Keep Latin/numeric runs (phones, emails, dates) correctly ordered in RTL. */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: var(--font-en); } /* ---------- Fixed backgrounds ---------------------------------------- Several of the original's blocks pin their background to the viewport, so the image stays put while the band scrolls over it. Last in the file on purpose: a `background:` shorthand anywhere below would reset background-attachment and silently undo this. Desktop only, a fixed attachment is unreliable on iOS Safari and pointless on a phone. */ @media (min-width: 901px) { .bg-fixed { background-attachment: fixed; } } /* ---------- Contact form: honeypot and status ------------------------ Off-screen rather than display:none. A bot that skips hidden inputs would sail past a display:none trap, and one that fills everything it can see in the DOM gets caught by this. aria-hidden plus tabindex="-1" on the input keep it away from screen readers and the tab order. */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Result of a fetch()-submitted form. Nothing renders until the script fills it in, so a no-JS submit falls through to the handler's own page instead. */ .form-status { margin-block-end: 1rem; padding: .85rem 1rem; border-radius: 8px; font-size: .93rem; line-height: 1.6; } .form-status:empty { display: none; } .form-status--ok { background: #e8f5ee; color: #14653a; border: 1px solid #b9dfc8; } .form-status--err { background: #fdecea; color: #8e2018; border: 1px solid #f5c6c2; } .form-card.is-sending .btn { opacity: .6; pointer-events: none; }