/* ============================================================ SALCO — Homepage (TERRA) Implementation of "SALCO Homepage TERRA.dc.html" ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { --green: #0F9E76; --green-d: #0C8563; --mint: #3FD6A4; --navy: #12275E; --ink: #0E1A17; --dark: #0C1A17; --mist: #F2F8F5; --line: #E7EDE9; --line-2: #E1EBE6; --line-3: #D3E1DA; --line-4: #C6D8CF; --muted: #55635E; --muted-2: #6B7A75; --muted-3: #7A8783; --muted-4: #3D4A46; --faint: #A8B5B0; --faint-2: #9EAAA5; /* Caps at the comp's 56px from ~1400px up, so desktop is unchanged. */ --pad: clamp(20px, 4vw, 56px); --sans: Archivo, sans-serif; --serif: 'Instrument Serif', serif; --mono: 'IBM Plex Mono', monospace; --sans-ar: 'IBM Plex Sans Arabic', sans-serif; --kufi-ar: 'Noto Kufi Arabic', sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); min-width: 320px; -webkit-font-smoothing: antialiased; /* Deliberately no overflow-x:hidden — it would make a scroll container and break the sticky nav. Overflow is prevented at source instead. */ } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: color .3s ease; } a:hover { color: var(--green); } button { font: inherit; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } /* Hidden sprite for the social glyphs. Kept as a class rather than an inline style attribute so the Content-Security-Policy can forbid inline styles outright (see .htaccess). */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Language panes — only the active one is in the document flow. */ .lang { display: none; } [data-lang="en"] .lang-en { display: block; } [data-lang="ar"] .lang-ar { display: block; font-family: var(--sans-ar); } /* ---------- 3. Motion ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.14); } } .rise { animation: rise 1s var(--ease) both; } .rise-1 { animation-duration: .9s; animation-delay: .20s; } .rise-2 { animation-delay: .32s; } .rise-3 { animation-delay: .44s; } .rise-4 { animation-delay: .56s; } /* Scoped to the things that actually animate. A blanket `transform: none` on * would also cancel layout transforms such as the hero/feature centring. */ [data-motion="off"] * { animation: none !important; transition: none !important; } [data-motion="off"] [data-reveal], [data-motion="off"] .rise { opacity: 1 !important; transform: none !important; } /* ---------- 4. Scroll reveal ---------- */ [data-reveal] { opacity: 1; } [data-reveal].is-prepped { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal].is-shown { opacity: 1; transform: none; } /* ---------- 5. Surfaces ---------- */ .stripes { position: absolute; inset: 0; background: repeating-linear-gradient(var(--stripe-angle, 122deg), var(--s1) 0 3px, var(--s2) 3px 13px); } [dir="rtl"] .stripes { --stripe-angle: 238deg; } .s-deep { --s1: #1D3630; --s2: #132621; } .s-mid { --s1: #23423A; --s2: #182F29; } .s-navy { --s1: #1B3160; --s2: #152750; } /* Photography and film. Every slot paints its poster still immediately; the video is attached lazily (preload="none" + data-src) so nothing downloads until it is actually wanted. */ .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .media-vid { opacity: 0; transition: opacity .5s ease; } .is-playing > .media-vid { opacity: 1; } [data-motion="off"] .media-vid { display: none; } .scrim { position: absolute; inset: 0; } .scrim-hero { background: linear-gradient(105deg, rgba(8,20,17,.90) 0%, rgba(8,20,17,.48) 54%, rgba(8,20,17,.10) 100%); } .scrim-feature { background: linear-gradient(100deg, rgba(8,20,17,.94) 0%, rgba(8,20,17,.55) 58%, rgba(8,20,17,.15) 100%); } .scrim-careers { background: linear-gradient(100deg, rgba(8,20,17,.93) 0%, rgba(8,20,17,.62) 70%, rgba(8,20,17,.30) 100%); } [dir="rtl"] .scrim-hero { background: linear-gradient(255deg, rgba(8,20,17,.90) 0%, rgba(8,20,17,.48) 54%, rgba(8,20,17,.10) 100%); } [dir="rtl"] .scrim-feature { background: linear-gradient(260deg, rgba(8,20,17,.94) 0%, rgba(8,20,17,.55) 58%, rgba(8,20,17,.15) 100%); } [dir="rtl"] .scrim-careers { background: linear-gradient(260deg, rgba(8,20,17,.93) 0%, rgba(8,20,17,.62) 70%, rgba(8,20,17,.30) 100%); } /* Photo-slot placeholder chips (toggled by the `labels` prop) */ .ph { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.25); padding: 9px 13px; pointer-events: none; } [dir="rtl"] .ph { font: 500 12px/1 var(--sans-ar); letter-spacing: 0; } [data-labels="off"] .ph, [data-labels="off"] .ph-note { display: none; } .ph-hero { inset-inline-end: 48px; bottom: 36px; } .ph-card { inset-inline-start: 20px; top: 20px; font-size: 10px; padding: 6px 9px; } .ph-portrait{ inset-inline-start: 18px; top: 18px; font-size: 10px; padding: 6px 9px; } .ph-tile { inset-inline-start: 14px; top: 14px; font-size: 9px; padding: 5px 7px; color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.2); } [dir="rtl"] .ph-card, [dir="rtl"] .ph-portrait { font-size: 11px; padding: 6px 9px; } [dir="rtl"] .ph-tile { font-size: 10px; padding: 5px 8px; } .ph-note { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--faint); text-align: end; } [dir="rtl"] .ph-note { font: 500 13px/1.8 var(--sans-ar); letter-spacing: 0; } /* ---------- 6. Type ---------- */ .eyebrow { display: block; font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--green); } .eyebrow-mint { color: var(--mint); } [dir="rtl"] .eyebrow { font: 500 13px/1 var(--sans-ar); letter-spacing: 0; } .h1 { margin: 0 0 28px; font: 400 84px/1.02 var(--serif); color: #fff; letter-spacing: -.02em; text-wrap: balance; } .h1 em { font-style: italic; color: var(--mint); } [dir="rtl"] .h1 { font: 600 76px/1.25 var(--kufi-ar); letter-spacing: 0; } [dir="rtl"] .h1 em { font-style: normal; } .h2 { margin: 0; font: 400 48px/1.1 var(--serif); letter-spacing: -.01em; text-wrap: balance; } [dir="rtl"] .h2 { font: 600 44px/1.35 var(--kufi-ar); letter-spacing: 0; } .h2-tall { line-height: 1.13; } [dir="rtl"] .h2-tall { line-height: 1.4; } .lead { margin: 0; font: 400 19px/1.65 var(--sans); color: rgba(255,255,255,.8); text-wrap: pretty; } [dir="rtl"] .lead { font: 400 19px/1.95 var(--sans-ar); } .body { margin: 0; font: 400 17px/1.75 var(--sans); color: var(--muted); text-wrap: pretty; } [dir="rtl"] .body { font: 400 17px/2 var(--sans-ar); } .body-invert { color: rgba(255,255,255,.72); } .link-underline { display: inline-block; font: 600 15px/1 var(--sans); color: var(--navy); border-bottom: 2px solid var(--green); padding-bottom: 8px; } [dir="rtl"] .link-underline { font: 600 16px/1 var(--sans-ar); } /* ---------- 7. Buttons ---------- */ .btn { display: inline-block; font: 600 15px/1 var(--sans); border-radius: 100px; border: 1px solid transparent; padding: 19px 30px; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; } [dir="rtl"] .btn { font: 600 16px/1 var(--sans-ar); padding: 19px 32px; } .btn--green { background: var(--green); color: #fff; } .btn--green:hover { background: var(--green-d); color: #fff; } .btn--ghost { color: #fff; border-color: rgba(255,255,255,.42); } .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; } .btn--outline { background: #fff; color: var(--navy); border-color: var(--line-4); } .btn--outline:hover { border-color: var(--green); color: var(--green); } .btn--pill { background: #fff; color: var(--muted); border-color: var(--line-3); font-weight: 500; font-size: 13px; padding: 13px 20px; } .btn--pill:hover { border-color: var(--green); color: var(--green); } [dir="rtl"] .btn--pill { font: 500 14px/1 var(--sans-ar); padding: 13px 20px; } .btn--nav { font-size: 14px; padding: 15px 26px; } .btn--feature { padding: 18px 30px; } .btn--careers { padding: 20px 32px; } .btn--index { padding: 19px 34px; } [dir="rtl"] .btn--nav { font-size: 15px; padding: 15px 28px; } [dir="rtl"] .btn--feature { padding: 18px 32px; } [dir="rtl"] .btn--careers { padding: 20px 34px; } [dir="rtl"] .btn--index { padding: 19px 36px; } .btn-lang { font: 500 14px/1 var(--sans-ar); color: var(--muted-4); background: none; border: 1px solid var(--line-3); border-radius: 100px; padding: 11px 18px; cursor: pointer; transition: border-color .3s ease, color .3s ease; } .btn-lang:hover { border-color: var(--green); color: var(--green); } [dir="rtl"] .btn-lang { font: 500 14px/1 var(--sans); padding: 12px 18px; } /* ---------- 8. Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: padding .35s ease, box-shadow .35s ease; } .nav.is-stuck { padding-block: 14px; box-shadow: 0 10px 30px -22px rgba(14,40,32,.6); } .nav-logo img { height: 46px; width: auto; } .nav-links { display: flex; gap: 34px; font: 500 14px/1 var(--sans); color: var(--muted-4); } [dir="rtl"] .nav-links { gap: 30px; font: 500 15px/1 var(--sans-ar); } .nav-actions { display: flex; align-items: center; gap: 18px; } /* ---------- 9. Hero ---------- */ .herowrap { padding: var(--pad) var(--pad) 0; } .herobox { position: relative; height: 720px; overflow: hidden; border-radius: 28px; background: var(--dark); } [data-hero="full-bleed"] .herowrap { padding: 0; } [data-hero="full-bleed"] .herobox { border-radius: 0; height: 820px; } /* The hero poster carries the slow push on its own, so the section still has life when no clip is present (the no-video deployment). Once the film is playing it cross-fades over the top and the animation is not seen. */ .herobox .media-img { animation: kenburns 26s ease-out both; } .hero-copy { position: absolute; inset-inline-start: 64px; top: 50%; /* Centring uses `translate`, not `transform`: the reveal system and the motion-off reset both write `transform`, and would otherwise cancel it. */ translate: 0 -50%; max-width: 780px; } [dir="rtl"] .hero-copy { max-width: 800px; } .hero-copy .eyebrow { margin: 0 0 22px; } .hero-lead { margin: 0 0 38px; max-width: 580px; } [dir="rtl"] .hero-lead { max-width: 620px; } .hero-cta { display: flex; gap: 14px; } /* ---------- 10. Facts ---------- */ .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: var(--pad); } .fact { background: var(--mist); border-radius: 20px; padding: 36px 32px 40px; } .fact-v { font: 400 54px/1 var(--serif); color: var(--green); letter-spacing: -.01em; } .fact-l { margin-top: 14px; font: 400 14px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; } [dir="rtl"] .fact-v { font: 600 46px/1.2 var(--kufi-ar); letter-spacing: 0; direction: ltr; text-align: right; } [dir="rtl"] .fact-l { font: 400 15px/1.85 var(--sans-ar); } /* ---------- 11. Capabilities ---------- */ .capabilities { padding: 80px var(--pad) 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; } .capabilities .h2 { margin: 22px 0 26px; } .capabilities .body { margin-bottom: 22px; } .capabilities .body + .body { margin-bottom: 34px; } .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cap { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color .35s ease, transform .35s var(--ease), box-shadow .35s ease; } .cap:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(15,158,118,.5); } .cap-body { position: relative; padding: 26px 24px 28px; } .cap .media-img { transition: transform 1.2s var(--ease); } .cap:hover .media-img { transform: scale(1.06); } .cap:hover .card-veil { opacity: .74; } [data-motion="off"] .cap:hover .media-img { transform: none !important; } /* Darker than a flat-white card would need: these now sit on a light veil over photography. Matches the sustainability cards. */ .cap-no { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted-3); } .cap-title { margin-top: 14px; font: 600 16px/1.3 var(--sans); text-wrap: balance; } .cap-desc { margin-top: 8px; font: 400 13px/1.55 var(--sans); color: #2C3733; text-wrap: pretty; } [dir="rtl"] .cap-no { font: 500 12px/1 var(--sans); letter-spacing: .1em; } [dir="rtl"] .cap-title { font: 600 17px/1.6 var(--sans-ar); } [dir="rtl"] .cap-desc { font: 400 14px/1.8 var(--sans-ar); } /* ---------- 12. Feature band ---------- */ .feature { position: relative; height: 620px; overflow: hidden; background: var(--dark); } .feature-copy { position: absolute; inset-inline-start: var(--pad); top: 50%; translate: 0 -50%; /* see .hero-copy */ max-width: 640px; color: #fff; } [dir="rtl"] .feature-copy { max-width: 660px; } .feature-copy .h2 { margin: 22px 0 22px; font-size: 58px; line-height: 1.06; letter-spacing: -.02em; } [dir="rtl"] .feature-copy .h2 { font-size: 54px; line-height: 1.3; letter-spacing: 0; } .feature-copy .lead { margin-bottom: 32px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.78); } [dir="rtl"] .feature-copy .lead { line-height: 1.95; } /* ---------- 13. Projects ---------- */ .projects { background: var(--mist); padding: 96px var(--pad) 104px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 44px; } .section-head .h2 { margin-top: 22px; } .filters { display: flex; gap: 10px; } .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .proj { display: block; background: #fff; border-radius: 22px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s ease; } .proj:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(14,40,32,.5); } .proj-media { position: relative; height: 280px; overflow: hidden; background: var(--dark); } .proj-media .stripes, .proj-media .media-img { transition: transform 1.2s var(--ease); } .proj:hover .proj-media .stripes, .proj:hover .proj-media .media-img { transform: scale(1.07); } .proj-status { position: absolute; inset-inline-end: 18px; top: 18px; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--dark); background: var(--mint); padding: 7px 11px; border-radius: 100px; } [dir="rtl"] .proj-status { font: 500 11px/1 var(--sans-ar); letter-spacing: 0; padding: 7px 12px; } .proj-body { padding: 28px 26px 32px; } .proj-loc { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--green); } .proj-title { margin-top: 12px; font: 600 21px/1.25 var(--sans); text-wrap: balance; } .proj-desc { margin: 10px 0 0; font: 400 14px/1.6 var(--sans); color: var(--muted-2); text-wrap: pretty; } [dir="rtl"] .proj-loc { font: 500 12px/1 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .proj-title { font: 600 21px/1.55 var(--sans-ar); } [dir="rtl"] .proj-desc { font: 400 15px/1.85 var(--sans-ar); } .proj-more { display: flex; justify-content: center; margin-top: 48px; } /* Full project index page: the grid is the whole page, so it gets a little more room above and the intro sits under the heading. */ .projects-page { padding-top: 56px; } .projects-page .section-head { align-items: flex-start; } .projects-lead { margin-top: 18px; max-width: 62ch; } /* ---------- 14. Story timeline ---------- */ .story { padding: 100px var(--pad); } .story .h2 { margin: 22px 0 20px; max-width: 900px; } [dir="rtl"] .story .h2 { max-width: 940px; } .story .body { margin-bottom: 60px; max-width: 700px; } [dir="rtl"] .story .body { max-width: 760px; } /* Duotone archive cards. The photograph is desaturated and sunk into the navy so the section reads as history rather than as another photo-card grid. */ .era-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .era { position: relative; overflow: hidden; min-height: 200px; border-radius: 16px; background: var(--navy); } .era .media-img { filter: grayscale(1) contrast(1.08); opacity: .5; transition: opacity .45s ease, transform 1.2s var(--ease); } .era-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,39,94,.35) 0%, rgba(18,39,94,.88) 100%); } .era-body { position: relative; padding: 26px 24px 28px; } .era:hover .media-img { opacity: .64; transform: scale(1.05); } [data-motion="off"] .era:hover .media-img { transform: none !important; } .era-y { font: 600 22px/1 var(--sans); color: var(--mint); letter-spacing: -.01em; } .era-t { margin: 14px 0 0; font: 400 14px/1.65 var(--sans); color: rgba(255,255,255,.75); text-wrap: pretty; } [dir="rtl"] .era-y { font: 600 21px/1.4 var(--kufi-ar); letter-spacing: 0; } [dir="rtl"] .era-t { font: 400 15px/1.9 var(--sans-ar); } /* ---------- 15. Fleet ---------- */ .fleet { background: var(--navy); color: #fff; padding: 100px var(--pad); } .fleet-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 96px; align-items: start; } .fleet .h2 { margin: 22px 0 24px; line-height: 1.12; } [dir="rtl"] .fleet .h2 { line-height: 1.4; } .fleet .body { margin-bottom: 34px; } .fleet-stats { display: flex; gap: 36px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.18); } [dir="rtl"] .fleet-stats { gap: 44px; } .fleet-num { font: 400 50px/1 var(--serif); color: var(--mint); } .fleet-cap { margin-top: 10px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; color: rgba(255,255,255,.55); } [dir="rtl"] .fleet-num { font: 600 42px/1.2 var(--kufi-ar); } [dir="rtl"] .fleet-num--ltr { direction: ltr; text-align: right; } [dir="rtl"] .fleet-cap { font: 500 13px/1.8 var(--sans-ar); letter-spacing: 0; } .fleet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .fleet-card { border: 1px solid rgba(255,255,255,.18); border-radius: 16px; overflow: hidden; transition: border-color .35s ease, background .35s ease; } .fleet-card:hover { border-color: var(--mint); background: rgba(63,214,164,.07); } .fleet-media { position: relative; height: 132px; } .fleet-body { padding: 20px 22px 24px; } .fleet-title { font: 600 16px/1.3 var(--sans); } .fleet-desc { margin-top: 8px; font: 400 13px/1.55 var(--sans); color: rgba(255,255,255,.6); text-wrap: pretty; } [dir="rtl"] .fleet-title { font: 600 17px/1.5 var(--sans-ar); } [dir="rtl"] .fleet-desc { font: 400 14px/1.8 var(--sans-ar); } /* ---------- 16. Sustainability ---------- */ .sustain { padding: 100px var(--pad); background: var(--mist); } .sustain-intro { max-width: 820px; margin-bottom: 64px; } [dir="rtl"] .sustain-intro { max-width: 880px; } .sustain-intro .h2 { margin: 22px 0 20px; line-height: 1.12; } [dir="rtl"] .sustain-intro .h2 { line-height: 1.4; } .green-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .green-card { position: relative; overflow: hidden; background: #fff; border-radius: 20px; border: 1px solid var(--line-2); } /* Subject texture sits behind a white veil: the card keeps the section's light feel and the text stays dark rather than needing a scrim and inverted type. */ .green-card .media-img { transition: transform 1.2s var(--ease); } /* Shared by the sustainability and capability cards. */ .card-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.66) 50%, rgba(255,255,255,.54) 100%); /* A slight blur softens high-frequency detail behind the text without washing out the colour, so the veil can stay light and the photo read. */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .45s ease; } .green-body { position: relative; padding: 34px 30px 38px; } .green-card:hover .media-img { transform: scale(1.06); } .green-card:hover .card-veil { opacity: .74; } [data-motion="off"] .green-card:hover .media-img { transform: none !important; } /* Darker than the other card sets: these sit on a deliberately light veil over photography rather than flat white, so they need the extra contrast. */ .green-no { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--muted-3); } .green-title { margin-top: 18px; font: 600 19px/1.3 var(--sans); text-wrap: balance; } .green-desc { margin: 12px 0 0; font: 400 14px/1.65 var(--sans); color: #2C3733; text-wrap: pretty; } [dir="rtl"] .green-no { font: 500 12px/1 var(--sans); letter-spacing: .1em; } [dir="rtl"] .green-title { font: 600 19px/1.6 var(--sans-ar); } [dir="rtl"] .green-desc { font: 400 15px/1.9 var(--sans-ar); } /* ---------- 16b. Certificates ---------- */ .certsec { padding: 100px var(--pad); } .certsec-intro { max-width: 70ch; margin-bottom: 52px; } .certsec-intro .h2 { margin-top: 14px; } .certsec-intro .body { margin-top: 18px; } .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .cert-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 18px; text-decoration: none; color: inherit; transition: border-color .18s ease, box-shadow .18s ease, translate .18s ease; } .cert-card:hover { border-color: var(--green); box-shadow: 0 14px 32px rgba(20, 40, 30, .10); translate: 0 -3px; } /* The certificate is a portrait document; the frame keeps its whole page in view rather than cropping to a band, because a cropped certificate reads as a stock image instead of a record. */ .cert-shot { display: block; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #fff; } .cert-shot img { display: block; width: 100%; height: auto; } .cert-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 4px 2px; } .cert-std { font: 600 17px/1.3 var(--sans); } .cert-name { font: 500 14px/1.4 var(--sans); color: var(--muted-4); margin-bottom: 8px; } .cert-meta { font: 400 12px/1.6 var(--mono); color: var(--muted-4); } .cert-view { margin-top: 12px; font: 500 13px/1 var(--sans); color: var(--green); } [dir="rtl"] .cert-std { font: 600 18px/1.6 var(--sans-ar); } [dir="rtl"] .cert-name { font: 500 15px/1.7 var(--sans-ar); } [dir="rtl"] .cert-meta { font: 400 13px/1.8 var(--sans-ar); } [dir="rtl"] .cert-view { font: 500 14px/1 var(--sans-ar); } /* ---------- 18. Clients ---------- */ .clients { padding: 0 var(--pad) 100px; } .clients-label { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--faint); margin-bottom: 32px; } [dir="rtl"] .clients-label { font: 500 13px/1 var(--sans-ar); letter-spacing: 0; } .clients-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .client { background: #fff; height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 0 18px; transition: background .35s ease; } /* Stays white on hover: two of the supplied logos came as JPGs and carry an opaque white background, which would show as a faint box against any tint. The colour returning to the mark is the hover feedback. */ .client:hover { background: #fff; } /* With a real logo the wordmark is redundant: the logo carries the name, and the name still reaches screen readers through the image's alt text. */ .client.has-logo .client-name, .client.has-logo .client-alt { display: none; } /* If the logo fails to load, JS drops .has-logo — which must also remove the broken image itself, not just bring the wordmark back. */ .client:not(.has-logo) .client-logo { display: none; } .client-name { font: 500 12px/1.35 var(--mono); letter-spacing: .08em; color: var(--muted-3); text-wrap: balance; transition: color .35s ease; } .client-alt { font: 400 12px/1.5 var(--sans-ar); color: var(--faint); text-wrap: balance; transition: color .35s ease; } .client:hover .client-name { color: var(--ink); } .client:hover .client-alt { color: var(--muted-2); } /* Arabic leads, Latin becomes the caption. */ [dir="rtl"] .client-name { font: 600 14px/1.7 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .client-alt { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; } /* Official logos, shown in full colour at all times. */ .client-logo { max-height: 64px; max-width: 84%; width: auto; object-fit: contain; transition: transform .45s var(--ease); } .client:hover .client-logo { transform: scale(1.04); } [data-motion="off"] .client:hover .client-logo { transform: none !important; } /* Optical sizing, tuned per mark after cropping. Equal pixel heights do not read as equal weight: these range from 0.6 (MODON, tall) to 2.0 (KAUST, wide), so heights are set to give each roughly the same visual area. */ .client-logo[data-logo="modon"] { max-height: 84px; } /* 316x528, tallest */ .client-logo[data-logo="qiddiya"] { max-height: 76px; } /* 264x337 */ .client-logo[data-logo="diriyah"] { max-height: 72px; } /* 600x600 seal */ .client-logo[data-logo="madinah-mun"] { max-height: 70px; } /* 600x559 */ .client-logo[data-logo="red-sea"] { max-height: 66px; } /* 600x501 */ .client-logo[data-logo="new-murabba"] { max-height: 64px; } /* 294x221, wordmark under the cube */ .client-logo[data-logo="moc"] { max-height: 56px; } /* 600x365 */ .client-logo[data-logo="jeddah-mun"] { max-height: 53px; } /* 600x321 */ .client-logo[data-logo="kaust"] { max-height: 50px; } /* 600x303 */ .client-logo[data-logo="riyadh-front"] { max-height: 48px; } /* 404x180 */ .client-logo[data-logo="amaala"] { max-height: 46px; } /* 474x195 */ /* KAPSARC carries two lines of type under the mark, so it gets a little more than its ratio alone would suggest or the wordmark turns to mush. */ .client-logo[data-logo="kapsarc"] { max-height: 44px; } /* 600x176, widest */ /* Blank cells that square off the last row. */ .client-pad, .client-pad:hover { background: #fff; } /* ---------- 19. News ---------- */ .news { padding: 0 var(--pad) 100px; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .news-card { display: block; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s ease; } .news-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(14,40,32,.4); } .news-media { position: relative; height: 220px; overflow: hidden; background: var(--dark); } .news-body { padding: 28px 26px 32px; } .news-meta { display: flex; gap: 14px; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--faint); } .news-meta .news-cat { color: var(--green); } .news-title { margin-top: 16px; font: 600 19px/1.35 var(--sans); text-wrap: balance; } [dir="rtl"] .news-meta { font: 500 12px/1 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .news-title { font: 600 19px/1.7 var(--sans-ar); } /* ---------- 19b. News article page ---------- A single story, so it reads as one column at a measure the eye can follow rather than filling the full page width the way the grids do. */ .post { padding: 0 var(--pad) 100px; } .post-wrap { max-width: 820px; margin: 0 auto; } .post-head { padding: 56px 0 30px; } .post-h1 { margin: 16px 0 0; font: 600 clamp(30px, 4vw, 44px)/1.16 var(--sans); letter-spacing: -.01em; text-wrap: balance; } .post-lead { margin: 22px 0 0; max-width: 62ch; font: 400 19px/1.65 var(--sans); color: var(--muted); text-wrap: pretty; } [dir="rtl"] .post-h1 { font: 600 clamp(27px, 3.6vw, 39px)/1.5 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .post-lead { font: 400 18px/1.95 var(--sans-ar); } .post-hero { position: relative; height: 460px; margin: 0; border-radius: 22px; overflow: hidden; background: var(--dark); } .post-body { padding-top: 40px; } /* Prose is capped by character count, not by the wrapper: the full 820px is right for the hero and the gallery but runs about 100 characters a line, which is past the point the eye tracks back reliably. */ .post-body p { margin: 0 0 20px; max-width: 70ch; font: 400 17px/1.75 var(--sans); color: var(--muted-4); text-wrap: pretty; } .post-h { margin: 40px 0 16px; font: 600 22px/1.3 var(--sans); } [dir="rtl"] .post-body p { font: 400 17px/2.05 var(--sans-ar); } [dir="rtl"] .post-h { font: 600 21px/1.7 var(--sans-ar); } .post-list { margin: 0 0 20px; max-width: 70ch; padding-inline-start: 22px; } .post-list li { margin-bottom: 9px; font: 400 17px/1.7 var(--sans); color: var(--muted-4); } .post-list li::marker { color: var(--green); } [dir="rtl"] .post-list li { font: 400 17px/1.95 var(--sans-ar); } /* The filing's hard numbers, pulled out so they survive a skim. */ .post-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 36px 0; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .post-fact { background: #fff; padding: 22px 24px; } .post-fact-k { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted-3); } .post-fact-v { margin-top: 10px; font: 600 16px/1.45 var(--sans); } [dir="rtl"] .post-fact-k { font: 500 12px/1 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .post-fact-v { font: 600 16px/1.7 var(--sans-ar); } .post-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .post-shot { position: relative; height: 200px; margin: 0; border-radius: 16px; overflow: hidden; background: var(--dark); } /* A single image set into the run of the story, captioned. Breaks out of the prose measure to the full column, the way the hero does. */ .post-figure { margin: 40px 0 0; } .post-figure-img { position: relative; height: 420px; border-radius: 22px; overflow: hidden; background: var(--dark); } /* A film keeps its own 16:9 rather than being cropped to a band. */ .post-film { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--dark); } .post-figure figcaption { margin-top: 14px; font: 400 14px/1.6 var(--sans); color: var(--muted-2); } [dir="rtl"] .post-figure figcaption { font: 400 14px/1.85 var(--sans-ar); } /* The same place at two points in the job, set side by side. */ .post-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; } .post-ba figure { margin: 0; } .post-ba-img { position: relative; height: 300px; border-radius: 18px; overflow: hidden; background: var(--dark); } .post-ba-tag { display: block; margin-bottom: 6px; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--green); } .post-ba figcaption { margin-top: 12px; font: 400 14px/1.6 var(--sans); color: var(--muted-2); } [dir="rtl"] .post-ba-tag { font: 500 12px/1 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .post-ba figcaption { font: 400 14px/1.85 var(--sans-ar); } /* Credit for the disclosure the figures come from. */ .post-source { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font: 400 15px/1.7 var(--sans); color: var(--muted-2); } .post-source a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } [dir="rtl"] .post-source { font: 400 15px/1.95 var(--sans-ar); } /* ---------- 20. Careers ---------- */ .careers { padding: 0 var(--pad) 100px; } .careers-box { position: relative; overflow: hidden; border-radius: 28px; background: var(--dark); padding: 80px 64px; display: flex; align-items: center; justify-content: space-between; gap: 70px; } .careers-copy { position: relative; color: #fff; } .careers-copy .h2 { margin: 20px 0 16px; font-size: 44px; line-height: 1.1; letter-spacing: 0; } [dir="rtl"] .careers-copy .h2 { font-size: 40px; line-height: 1.4; } .careers-copy .lead { max-width: 560px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.75); } [dir="rtl"] .careers-copy .lead { max-width: 600px; line-height: 1.95; } .careers .btn { position: relative; flex: 0 0 auto; } /* ---------- 21. Contact & footer ---------- */ .contact { background: var(--navy); color: #fff; padding: 96px var(--pad) 56px; } .contact-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 96px; padding-bottom: 72px; border-bottom: 1px solid rgba(255,255,255,.16); } .contact-top .h2 { margin-bottom: 20px; font-size: 52px; line-height: 1.08; } [dir="rtl"] .contact-top .h2 { font-size: 46px; line-height: 1.4; } .contact-top .lead { margin-bottom: 34px; max-width: 560px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.72); } [dir="rtl"] .contact-top .lead { max-width: 600px; line-height: 1.95; } .contact-cta { display: flex; gap: 14px; } /* ---------- 21b. Footprint: the Kingdom map and the four offices ---------- */ /* The panel sits directly under the map and matches its width, so the two read as one object rather than a drawing with a slab loose beside it. */ .fp-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; } .fp-map { display: flex; justify-content: center; align-items: center; width: 100%; } .fp-svg { width: 100%; max-width: 460px; height: auto; overflow: visible; } /* The readout under the map. Its height is reserved so choosing a city does not shove the page around, and clearing it does not snap back. */ .fp-info { width: 100%; max-width: 460px; min-height: 210px; } .fp-empty { border: 1px dashed rgba(255,255,255,.18); border-radius: 18px; padding: 22px 24px; } .fp-empty-h { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--mint); } .fp-empty-p { margin: 10px 0 0; font: 400 14px/1.65 var(--sans); color: rgba(255,255,255,.55); } .fp-panel { border: 1px solid rgba(63,214,164,.40); background: rgba(63,214,164,.06); border-radius: 18px; padding: 22px 24px; } .fp-panel-kind { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--mint); } .fp-panel-city { margin-top: 8px; font: 600 26px/1.15 var(--sans); color: #fff; } .fp-panel-note { margin: 10px 0 0; font: 400 14px/1.65 var(--sans); color: rgba(255,255,255,.66); } .fp-panel-sub { margin: 6px 0 0; font: 400 14px/1.65 var(--sans); color: rgba(255,255,255,.52); } .fp-panel-contact { margin-top: 14px; display: grid; gap: 5px; } /* Label column is fixed so phone and fax line up under each other. */ .fp-line { display: flex; gap: 10px; align-items: baseline; } .fp-line-k { flex: 0 0 52px; font: 500 10px/1.6 var(--mono); letter-spacing: .1em; color: rgba(255,255,255,.40); } .fp-line a, .fp-line span { font: 400 14px/1.5 var(--sans); color: rgba(255,255,255,.78); text-decoration: none; } .fp-line a:hover { color: var(--mint); } [dir="rtl"] .fp-panel-sub { font: 400 15px/1.8 var(--sans-ar); } [dir="rtl"] .fp-line-k { flex-basis: 48px; font: 500 12px/1.6 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .fp-line a, [dir="rtl"] .fp-line span { font: 400 15px/1.7 var(--sans-ar); } .fp-panel-h { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font: 500 10px/1 var(--mono); letter-spacing: .14em; color: rgba(255,255,255,.42); } .fp-panel-work { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .fp-panel-work a { font: 400 14px/1.5 var(--sans); color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid transparent; } .fp-panel-work a:hover { color: var(--mint); border-bottom-color: rgba(63,214,164,.5); } .fp-clear { margin-top: 18px; background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 16px; font: 500 13px/1 var(--sans); color: rgba(255,255,255,.75); cursor: pointer; transition: border-color .18s ease, color .18s ease; } .fp-clear:hover { border-color: var(--mint); color: #fff; } [dir="rtl"] .fp-empty-h { font: 600 12px/1.6 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .fp-empty-p { font: 400 15px/1.9 var(--sans-ar); } [dir="rtl"] .fp-panel-kind { font: 600 12px/1.6 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .fp-panel-city { font: 600 26px/1.5 var(--sans-ar); } [dir="rtl"] .fp-panel-note, [dir="rtl"] .fp-panel-work a { font: 400 15px/1.8 var(--sans-ar); } [dir="rtl"] .fp-panel-h { font: 600 12px/1.6 var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .fp-clear { font: 500 14px/1 var(--sans-ar); } .fp-outline { fill: rgba(63, 214, 164, .07); stroke: rgba(63, 214, 164, .55); stroke-width: 1.5; stroke-linejoin: round; } /* text-anchor is resolved against the inline base direction, so in the Arabic pane "start" means the right edge and every label runs back across its own pin. Pinning the element to ltr makes start/end mean left/right in both panes; the Arabic text itself still shapes and orders right-to-left inside its own run. */ .fp-label { direction: ltr; fill: rgba(255, 255, 255, .70); font: 500 13px/1 var(--sans); transition: fill .2s ease; } [dir="rtl"] .fp-label { font: 500 14px/1 var(--sans-ar); } .fp-dot { fill: var(--mint); transition: r .25s ease; } .fp-halo { fill: var(--mint); opacity: .18; transform-box: fill-box; transform-origin: center; } /* The pins breathe on their own so the map is alive before anyone touches it, staggered so they do not pulse in unison. */ @keyframes fp-breathe { 0%, 100% { transform: scale(.55); opacity: .30; } 50% { transform: scale(1); opacity: .04; } } .fp-pin .fp-halo { animation: fp-breathe 3.4s ease-in-out infinite; } .fp-pin:nth-of-type(2) .fp-halo { animation-delay: .85s; } .fp-pin:nth-of-type(3) .fp-halo { animation-delay: 1.7s; } .fp-pin:nth-of-type(4) .fp-halo { animation-delay: 2.55s; } /* Lit: the pin its card belongs to, or the card its pin belongs to. */ .fp-pin { cursor: pointer; } .fp-hit { fill: transparent; } .fp-pin:focus { outline: none; } .fp-pin:focus-visible .fp-hit { fill: rgba(63,214,164,.16); stroke: var(--mint); stroke-width: 1.5; } .fp-pin.is-lit .fp-dot { r: 8; } .fp-pin.is-lit .fp-halo { animation: none; transform: scale(1.35); opacity: .40; } .fp-pin.is-lit .fp-label { fill: #fff; } /* Chosen, as opposed to merely hovered: the ring stays put and the rest of the map recedes so the choice is legible at a glance. */ .fp-pin.is-selected .fp-dot { r: 8; } .fp-pin.is-selected .fp-halo { animation: none; transform: scale(1.5); opacity: .55; } .fp-pin.is-selected .fp-label { fill: #fff; font-weight: 600; } .fp-svg:has(.is-selected) .fp-pin:not(.is-selected) { opacity: .42; } @media (prefers-reduced-motion: reduce) { .fp-pin .fp-halo { animation: none; } } .footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; padding: 56px 0; flex-wrap: wrap; } .footer-brand { flex: 0 1 300px; min-width: 260px; } [dir="rtl"] .footer-brand { flex-basis: 320px; min-width: 280px; } .footer-logo { margin-bottom: 22px; } .footer-logo img { height: 50px; width: auto; filter: brightness(0) invert(1); } .footer-blurb { margin: 0; font: 400 14px/1.7 var(--sans); color: rgba(255,255,255,.55); } [dir="rtl"] .footer-blurb { font: 400 15px/1.9 var(--sans-ar); } .socials { display: flex; gap: 12px; margin-top: 24px; } .socials a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 100px; color: rgba(255,255,255,.75); transition: border-color .3s ease, color .3s ease, background .3s ease; } .socials a svg { width: 17px; height: 17px; display: block; } .socials a:hover { border-color: var(--mint); color: var(--mint); background: rgba(63,214,164,.08); } .footer-cols { flex: 1 1 700px; display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 40px; } .footer-col { display: flex; flex-direction: column; gap: 14px; } .footer-col-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: rgba(255,255,255,.4); } [dir="rtl"] .footer-col-h { font: 600 13px/1.6 var(--sans-ar); letter-spacing: 0; } .footer-link { font: 400 14px/1 var(--sans); color: rgba(255,255,255,.75); } [dir="rtl"] .footer-link { font: 400 15px/1.5 var(--sans-ar); } .footer-link:hover { color: #fff; } .legal { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); font: 400 13px/1 var(--sans); color: rgba(255,255,255,.45); } [dir="rtl"] .legal { font: 400 14px/1.6 var(--sans-ar); } .legal-links { display: flex; gap: 26px; } .legal-links a:hover { color: #fff; } /* ---------- 21b. Nav toggle (hidden on desktop) ---------- */ .nav-toggle { display: none; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--line-3); border-radius: 100px; cursor: pointer; transition: border-color .3s ease; } .nav-toggle:hover { border-color: var(--green); } .nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--muted-4); transition: transform .3s var(--ease), opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------- 21c. Careers form dialog ---------- */ .modal { border: 0; padding: 0; width: min(680px, 92vw); max-width: 92vw; /* Fill the available height rather than a fixed frame height: the form is cross-origin so its height cannot be measured, and every pixel given to it is a pixel the visitor does not have to scroll for. */ height: 92vh; max-height: 92vh; border-radius: 22px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(8,20,17,.55); } /* display MUST be scoped to [open]. Author styles beat the UA stylesheet's `dialog:not([open]) { display: none }`, so an unscoped `display: flex` here leaves the dialog rendered in the page flow after it closes — it looks stuck even though dlg.open is already false. */ .modal[open] { display: flex; flex-direction: column; } /* Background must not scroll behind an open modal. */ html.modal-open { overflow: hidden; } .modal::backdrop { background: rgba(8,20,17,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .modal-title { margin: 0; margin-inline-end: auto; font: 600 18px/1.3 var(--sans); } [dir="rtl"] .modal-title { font: 600 19px/1.6 var(--sans-ar); } .modal-close { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-3); border-radius: 100px; background: none; color: var(--muted-4); cursor: pointer; transition: border-color .3s ease, color .3s ease, background .3s ease; } .modal-close:hover { border-color: var(--green); color: var(--green); background: #F2F8F5; } .modal-frame { flex: 1 1 auto; min-height: 0; /* let it shrink inside the flex column */ display: block; width: 100%; border: 0; } @media (max-width: 480px) { .modal { width: 100vw; max-width: 100vw; height: 96vh; max-height: 96vh; border-radius: 18px 18px 0 0; } .modal-head { padding: 15px 16px; } } /* ---------- 22. Motion-off also stills hover transforms ---------- */ [data-motion="off"] .cap:hover, [data-motion="off"] .proj:hover, [data-motion="off"] .news-card:hover, [data-motion="off"] .proj:hover .stripes, [data-motion="off"] .proj:hover .media-img, [data-motion="off"] .person:hover .stripes { transform: none !important; } /* ============================================================ 23. Responsive The source comp is a fixed 1440px desktop design. Every rule below is either a clamp() that reaches its maximum at ~1440px or a max-width query, so rendering at >=1440px is unchanged. ============================================================ */ /* ---- Fluid display type ---- */ .h1 { font-size: clamp(38px, 6.2vw, 84px); } .h2 { font-size: clamp(30px, 3.6vw, 48px); } .feature-copy .h2 { font-size: clamp(34px, 4.3vw, 58px); } .careers-copy .h2 { font-size: clamp(28px, 3.3vw, 44px); } .contact-top .h2 { font-size: clamp(30px, 3.9vw, 52px); } .fact-v { font-size: clamp(38px, 4.0vw, 54px); } .fleet-num { font-size: clamp(36px, 3.7vw, 50px); } [dir="rtl"] .h1 { font-size: clamp(30px, 5.6vw, 76px); } [dir="rtl"] .h2 { font-size: clamp(26px, 3.3vw, 44px); } [dir="rtl"] .feature-copy .h2{ font-size: clamp(28px, 4.0vw, 54px); } [dir="rtl"] .careers-copy .h2{ font-size: clamp(25px, 3.0vw, 40px); } [dir="rtl"] .contact-top .h2 { font-size: clamp(27px, 3.4vw, 46px); } [dir="rtl"] .fact-v { font-size: clamp(32px, 3.4vw, 46px); } [dir="rtl"] .fleet-num { font-size: clamp(30px, 3.1vw, 42px); } /* ---- Laptop: relieve the widest gutters ---- */ @media (max-width: 1280px) { .capabilities, .fleet-inner, .contact-top { gap: 56px; } /* Nine nav items since E-services joined the run: tighten the spacing so the row still fits on one line above the 1024px collapse. */ .nav-links { gap: 22px; } [dir="rtl"] .nav-links { gap: 20px; } } /* ---- Nav collapses before the grids do ---- Nine links, the logo and the actions need about 1140px to sit on one line with air around them. Below that the row starts touching the logo and the Talk to us button, so the hamburger takes over here rather than at 1024. */ @media (max-width: 1180px) { .nav { flex-wrap: wrap; } .nav-toggle { display: flex; } .nav-links { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 14px; border-top: 1px solid var(--line); } .nav-links.is-open { display: flex; } .nav-links a { padding: 14px 2px; border-bottom: 1px solid var(--line); } .nav-links a:last-child { border-bottom: 0; } } /* ---- Tablet landscape and below: wide grids halve ---- */ @media (max-width: 1024px) { .facts { grid-template-columns: repeat(2, 1fr); } .capabilities { grid-template-columns: 1fr; gap: 48px; padding: 64px var(--pad) 80px; } .proj-grid, .news-grid, .cert-grid, .green-grid { grid-template-columns: repeat(2, 1fr); } .clients-grid { grid-template-columns: repeat(3, 1fr); } .post-hero { height: 360px; } .post-shot { height: 170px; } .post-figure-img { height: 320px; } .post-ba-img { height: 240px; } .client { height: 132px; } .fleet-inner, .contact-top { grid-template-columns: 1fr; gap: 48px; } /* Stacked, the map is a companion to the copy rather than the main event. */ .fp-svg { max-width: 380px; } .footer-cols { flex-basis: 100%; grid-template-columns: repeat(2, minmax(140px, 1fr)); } .herobox { height: min(72vh, 560px); } [data-hero="full-bleed"] .herobox { height: min(80vh, 620px) !important; } .feature { height: 520px; } .hero-copy, .feature-copy { inset-inline-start: var(--pad); inset-inline-end: var(--pad); max-width: none; } .hero-lead { max-width: 46ch; } /* Timeline cards stack two-up; five across is unreadable below this width. */ .era-grid { grid-template-columns: repeat(2, 1fr); } .era { min-height: 170px; } } /* ---- Tablet portrait and below: single-column content ---- */ @media (max-width: 768px) { .section-head { flex-direction: column; align-items: flex-start; gap: 22px; } .filters { flex-wrap: wrap; } .proj-grid, .news-grid, .green-grid, .fleet-grid { grid-template-columns: 1fr; } .certsec { padding: 72px var(--pad); } .cert-grid { grid-template-columns: 1fr; } .fp-svg { max-width: 320px; } /* The map scales down with the viewport, and with it the pins. Growing the invisible target keeps a pin at roughly 44px on a phone; 36 is the largest radius that still leaves the two closest cities, Jeddah and Al-Madinah, without overlapping targets. */ .fp-hit { r: 36; } .post-head { padding-top: 36px; } .post-hero { height: 240px; } .post-facts { grid-template-columns: 1fr; } .post-gallery { grid-template-columns: 1fr; } .post-shot { height: 220px; } .post-figure-img { height: 220px; } .post-ba { grid-template-columns: 1fr; } .post-ba-img { height: 220px; } .clients-grid { grid-template-columns: repeat(2, 1fr); } .careers-box { flex-direction: column; align-items: flex-start; gap: 32px; padding: 48px 28px; } .footer-main { flex-direction: column; gap: 40px; } .footer-brand, .footer-cols { flex: 1 1 auto; min-width: 0; } .legal { flex-direction: column; align-items: flex-start; gap: 14px; } .ph-note { display: none; } .feature { height: 460px; } .proj-media { height: 240px; } .story { padding-block: 72px; } .fleet, .sustain { padding-block: 72px; } } /* ---- Phone ---- */ @media (max-width: 480px) { .facts, .cap-grid, .era-grid, .footer-cols { grid-template-columns: 1fr; } .nav-logo img { height: 32px; } .nav-actions { gap: 8px; } .btn--nav, [dir="rtl"] .btn--nav { font-size: 13px; padding: 12px 15px; } .btn-lang, [dir="rtl"] .btn-lang { font-size: 13px; padding: 9px 12px; } .nav-toggle { width: 38px; height: 38px; } .hero-cta, .contact-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn, .contact-cta .btn { text-align: center; } .herobox { height: min(76vh, 500px); } [data-hero="full-bleed"] .herobox { height: min(82vh, 540px) !important; } .feature { height: 420px; } .fact { padding: 28px 24px 30px; } .careers-box { padding: 40px 22px; } .lead { font-size: 17px; } [dir="rtl"] .lead { font-size: 16px; } } /* ---------- 24. Voice assistant launcher and panel ---------- */ /* Sits where the old chat bubble sat. Logical inset so it moves to the left in the Arabic pane and the right in the English one, like everything else. */ .voice-btn { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border: 0; border-radius: 999px; background: var(--green); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; box-shadow: 0 10px 28px rgba(12, 60, 45, .30); transition: background .18s ease, translate .18s ease, box-shadow .18s ease; } .voice-btn:hover { background: var(--green-d); translate: 0 -2px; box-shadow: 0 14px 34px rgba(12,60,45,.36); } .voice-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .voice-btn.is-open svg { display: none; } [dir="rtl"] .voice-btn { font: 600 15px/1 var(--sans-ar); } .voice-panel { position: fixed; bottom: 86px; inset-inline-end: 22px; z-index: 60; width: min(400px, calc(100vw - 44px)); background: #fff; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 30, 24, .26); } .voice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 18px; background: var(--navy); color: #fff; } .voice-title { font: 600 14px/1 var(--sans); } [dir="rtl"] .voice-title { font: 600 15px/1 var(--sans-ar); } .voice-x { border: 0; background: none; color: rgba(255,255,255,.75); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .voice-x:hover { color: #fff; } /* The vendor's own height, capped so it never runs past the viewport. */ .voice-body { height: min(699px, calc(100vh - 190px)); } .voice-body iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 480px) { .voice-btn { bottom: 16px; inset-inline-end: 16px; padding: 12px 17px; font-size: 14px; } .voice-panel { bottom: 74px; inset-inline: 12px; width: auto; } .voice-body { height: min(699px, calc(100vh - 160px)); } } @media (prefers-reduced-motion: reduce) { .voice-btn { transition: none; } } /* ============================================================ 26. Project map Where the work is. Geometry comes from map-data.js, built by tools/build_globe.py; nothing here knows about longitude. The two zoom levels have their own units. At Kingdom zoom the viewBox is about 380 units wide, at group zoom about 30, so a radius that reads well in one is invisible in the other. Rather than scale anything at runtime, group markers and pin markers each carry sizes suited to their own level. */ .pmap { padding: 0 0 var(--s7); } .pmap-frame { position: relative; } .pmap-svg { display: block; width: 100%; height: clamp(340px, 52vw, 620px); background: var(--mist); border-radius: var(--r3); /* The globe is a diagram, so it reads left to right in both languages. */ direction: ltr; } /* The globe. Beyond its rim is the page, not more sea, which is what makes the opening read as the Earth rather than a rectangle of water. Colours are further apart than the first attempt: sea and land were within a few percent of each other and the whole map came out as one pale wash. */ .pmap-space { fill: var(--mist); } .pmap-ocean { fill: #BFD9E6; } .pmap-rim { fill: none; stroke: rgba(14,26,23,.10); stroke-width: 2; } .pmap-land { fill: #D9E3D5; } .pmap-saudi { fill: #9BCBB0; transition: opacity .45s ease; } .is-zoomed .pmap-saudi { opacity: 0; } /* No rim once we are inside the sphere; it would only be a stray arc. */ .pmap-svg:not(.x) .pmap-rim { opacity: 0; transition: opacity .5s ease; } .is-world .pmap-rim { opacity: 1; } /* Markers are drawn only after the flight lands, but belt and braces. */ .is-world .pmap-groups, .is-world .pmap-pins { opacity: 0; } /* ---- Kingdom level: one marker per region, carrying its count ---- */ .pmap-g { cursor: pointer; } .pmap-g-hit { fill: transparent; } /* Shared flag cloth and pole at both map zoom levels. */ .pmap-flag-pole-outline, .pmap-flag-pole { fill: none; stroke-linecap: round; } .pmap-flag-leader { fill: none; stroke: var(--green-d); opacity: .6; pointer-events: none; } .pmap-flag-pole-outline { stroke: #fff; } .pmap-flag-pole { stroke: var(--green-d); } .pmap-flag-cloth { fill: var(--green); stroke: #fff; stroke-linejoin: round; transition: fill .18s ease; } .pmap-g:hover .pmap-flag-cloth, .pmap-g:focus-visible .pmap-flag-cloth, .pmap-pin:hover .pmap-flag-cloth, .pmap-pin:focus-visible .pmap-flag-cloth { fill: var(--navy); } .pmap-g:focus { outline: none; } .pmap-g:focus-visible .pmap-g-hit { fill: rgba(18,39,94,.16); } .pmap-g-n { fill: #fff; font-weight: 700; font-family: var(--sans); pointer-events: none; } .pmap-g-t { fill: var(--ink); font: 600 7.5px/1 var(--sans); pointer-events: none; paint-order: stroke; stroke: rgba(242,248,245,.9); stroke-width: 2.4; } /* ---- Group level: one marker per project, each a real link ---- */ .pmap-pin { cursor: pointer; } /* The clickable area behind a name. Transparent, not none: a fill of none takes no pointer events at all, which is the whole problem it solves. */ .pmap-label-hit { fill: transparent; } .pmap-g .pmap-label-hit { cursor: pointer; } .pmap-pin-hit { fill: transparent; } .pmap-pin:focus { outline: none; } .pmap-pin:focus-visible .pmap-pin-hit { fill: rgba(18,39,94,.16); } /* Every project is named. Size and stroke width are set on the element by app.js, because they have to be converted from pixels into the units of whichever group is open; only the things that do not depend on scale are here. Any names that collide are lifted clear at draw time. */ .pmap-pin-t { fill: var(--ink); font-weight: 600; font-family: var(--sans); pointer-events: none; paint-order: stroke; stroke: rgba(242,248,245,.96); } .pmap-pin--name:hover .pmap-pin-t { fill: var(--green-d); } /* Whichever pin is named must sit above its neighbours' markers. */ .pmap-pin:hover, .pmap-pin:focus-visible { isolation: isolate; } [dir="rtl"] .pmap-g-t, [dir="rtl"] .pmap-pin-t { font-family: var(--sans-ar); } /* Replays the opening. Only offered once the flight has landed. */ .pmap-globe { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-3); background: #fff; cursor: pointer; background-image: radial-gradient(circle at 50% 50%, #BFD9E6 0 46%, transparent 47%), linear-gradient(#9BCBB0, #9BCBB0); background-size: 100% 100%, 16px 7px; background-position: center, center; background-repeat: no-repeat; } .pmap-globe:hover { border-color: var(--green); } .pmap-back { position: absolute; top: 14px; inset-inline-start: 14px; border: 1px solid var(--line-3); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px; cursor: pointer; font: 600 13px/1 var(--sans); } [dir="rtl"] .pmap-back { font: 600 14px/1 var(--sans-ar); } .pmap-back:hover { border-color: var(--green); color: var(--green-d); } .pmap-hint { margin: 12px 0 0; color: var(--muted); font: 500 14px/1.5 var(--sans); } [dir="rtl"] .pmap-hint { font: 500 15px/1.6 var(--sans-ar); } @media (max-width: 768px) { /* Taller than it looks like it needs to be. The viewBox follows the container aspect, so height is the only room a name can be given on a phone: at 300 px four of the eight Madinah names had nowhere to go. */ .pmap-svg { height: clamp(420px, 118vw, 520px); } /* Flag geometry and hit areas are sized from rendered pixels in app.js. */ /* 9px was legible only just, and the Kingdom view has room: seven names over a whole country. 11 tests clear of collisions on a 375px screen. */ .pmap-g-t { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .pmap-saudi, .pmap-flag-cloth { transition: none; } } /* Vision and mission. These first went in as two thin columns tucked under the story paragraph and were easy to miss, which is fair: small type with no ground of its own, between two stronger blocks. They get a band now. Light against the white section above and the navy one below, a rule between the two columns, and type at lead size so it reads as a statement rather than a caption. */ .vision { background: var(--mist); padding: 96px var(--pad); } .vision-inner { max-width: 1240px; margin: 0 auto; } .vision-head { max-width: 620px; margin: 0 0 52px; } .vision-head .h2 { margin: 20px 0 0; } .vision-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .vision-col { position: relative; } .vision-cols .vision-col + .vision-col { padding-inline-start: 64px; } .vision-cols .vision-col + .vision-col::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; width: 1px; background: var(--line-3); } .vision-h { margin: 0 0 18px; font: 400 34px/1.15 var(--serif); color: var(--green-d); } [dir="rtl"] .vision-h { font: 600 30px/1.4 var(--sans-ar); } .vision-p { margin: 0; color: var(--muted-4); } @media (max-width: 900px) { .vision { padding: 68px var(--pad); } .vision-head { margin-bottom: 36px; } .vision-cols { grid-template-columns: 1fr; gap: 36px; } .vision-cols .vision-col + .vision-col { padding-inline-start: 0; padding-top: 36px; } .vision-cols .vision-col + .vision-col::before { inset: 0 auto auto 0; width: 100%; height: 1px; inset-inline-start: 0; } .vision-h { font-size: 28px; } }