/* ========================================================================== LANDMARK Projects — light, bilingual theme. Brand: navy #111633 (ink), orange #D8641C (accent), blue #00A8E8 (secondary). Light surfaces, hairline borders, one accent, restrained motion. Everything uses logical properties so AR (rtl) and EN (ltr) share one sheet. ========================================================================== */ :root { --ink: #111633; --ink-2: #1c2450; --text: #454c6b; --muted: #6b7391; --line: rgb(17 22 51 / 0.1); --line-2: rgb(17 22 51 / 0.16); --soft: #f6f8fc; --soft-2: #eef2f9; --bg: #fff; --surface: #fff; --header-bg: rgb(255 255 255 / 0.92); /* Always-dark sections (hero, CTA, footer) keep the brand navy in both themes. */ --navy: #111633; --navy-2: #1c2450; --orange: #d8641c; --orange-deep: #bc5415; --orange-soft: rgb(216 100 28 / 0.1); /* Brand orange is 3.65:1 on white — fine for large type and fills, not for small text. */ --orange-text: #b04f13; --blue: #00a8e8; /* Brand blue is 2.7:1 on white — the readable variant is used for text. */ --blue-text: #0a6fc4; --blue-soft: rgb(0 168 232 / 0.1); --shadow: 0 1px 2px rgb(17 22 51 / 0.04); --shadow-lift: 0 10px 30px -12px rgb(17 22 51 / 0.18); --radius: 14px; --radius-sm: 10px; --radius-btn: 8px; --container: 1180px; --gutter: clamp(20px, 4vw, 40px); --section: clamp(64px, 7vw, 100px); --header: 78px; --font: "Almarai", "Segoe UI", Tahoma, system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Dark theme ---------- Set on by the head script (saved choice, else the OS setting). Only the tokens change; the navy sections stay as they are. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #eef1fb; --ink-2: #dde2f3; --text: #b8bfd6; --muted: #8d95b2; --line: rgb(255 255 255 / 0.09); --line-2: rgb(255 255 255 / 0.16); --soft: #0f1531; --soft-2: #161d3f; --bg: #0a0e23; --surface: #121937; --header-bg: rgb(10 14 35 / 0.88); --orange-text: #f08b4c; --orange-soft: rgb(216 100 28 / 0.16); --blue-text: #4fc4f2; --blue-soft: rgb(0 168 232 / 0.14); --shadow: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-lift: 0 12px 32px -12px rgb(0 0 0 / 0.6); } /* Navy sections sit a shade above the dark page, so give them an edge. */ [data-theme="dark"] .cta, [data-theme="dark"] .site-footer, [data-theme="dark"] .process { border-top: 1px solid var(--line); } /* The profile's service icons are navy line art; draw them light on dark. */ [data-theme="dark"] .card__icon img, [data-theme="dark"] .service__icon img { filter: brightness(0) invert(0.92); } /* Header logo: navy wordmark on light, white wordmark on dark. */ .brand__logo--on-dark, [data-theme="dark"] .brand__logo--on-light { display: none; } [data-theme="dark"] .brand__logo--on-dark { display: block; } /* Theme switch */ .theme-toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.25s, color 0.25s; } .theme-toggle:hover { border-color: var(--orange); color: var(--orange); } .theme-toggle__moon, .theme-toggle__sun { display: grid; place-items: center; line-height: 0; } .theme-toggle .icon { display: block; width: 19px; height: 19px; } .no-js .theme-toggle, .theme-toggle__sun, [data-theme="dark"] .theme-toggle__moon { display: none; } [data-theme="dark"] .theme-toggle__sun { display: grid; } @media (max-width: 991px) { .theme-toggle { width: 44px; height: 44px; margin-inline-start: auto; } .theme-toggle + .nav-toggle { margin-inline-start: 0; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.9; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.lang-en { line-height: 1.75; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } bdi { unicode-bidi: isolate; } ::selection { background: var(--orange); color: #fff; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } #main:focus { outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 100; padding: 10px 18px; border-radius: var(--radius-btn); background: var(--navy); color: #fff; transform: translateY(-180%); transition: transform 0.3s var(--ease); } .skip-link:focus { transform: none; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .icon { width: 1.15em; height: 1.15em; flex: none; } /* ---------- Type ---------- */ .kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.01em; color: var(--orange-text); } .kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; } .h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.4; color: var(--ink); text-wrap: balance; } .h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 800; line-height: 1.5; color: var(--ink); } .h2--light { color: #fff; } .lead { margin-top: 14px; font-size: 1.05rem; color: var(--text); } .section { padding-block: var(--section); } .section--soft { background: var(--soft); } .sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--center .kicker { justify-content: center; } .sec-cta { margin-top: clamp(28px, 3vw, 40px); text-align: center; } .prose p { margin-bottom: 1em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 28px; border-radius: var(--radius-btn); border: 1px solid transparent; font-weight: 700; font-size: 0.975rem; line-height: 1.2; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s; } .btn .icon { width: 1.05em; height: 1.05em; transition: transform 0.25s var(--ease); } .btn--sm { min-height: 42px; padding: 8px 20px; font-size: 0.9rem; } .btn--primary { background: var(--orange); border-color: var(--orange); color: #fff; } .btn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgb(216 100 28 / 0.8); } .btn--ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); } .btn--light { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.35); color: #fff; } .btn--light:hover { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.6); transform: translateY(-2px); } .btn:hover .icon { transform: translateX(-3px); } .lang-en .btn:hover .icon, [dir="ltr"] .btn:hover .icon { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); } .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); } .site-header__bar { display: flex; align-items: center; gap: 24px; height: var(--header); } .brand { flex: none; min-width: 180px; display: flex; align-items: center; } .brand img { height: 56px; width: auto; transition: opacity 0.25s; } .brand:hover img { opacity: 0.82; } .nav { flex: 1; display: flex; align-items: center; gap: 24px; } .nav__list { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.2vw, 36px); margin-inline: auto; } .nav__link { position: relative; display: block; padding-block: 8px; font-size: 0.95rem; font-weight: 700; color: var(--text); transition: color 0.2s; } .nav__link::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__side { flex: none; min-width: 180px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; } .lang-switch { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-btn); font-size: 0.85rem; font-weight: 700; color: var(--ink); transition: border-color 0.25s, color 0.25s, background-color 0.25s; } .lang-switch .icon { width: 16px; height: 16px; color: var(--muted); transition: color 0.25s; } .lang-switch:hover { border-color: var(--orange); color: var(--orange); } .lang-switch:hover .icon { color: var(--orange); } .nav-toggle { display: none; place-items: center; width: 44px; height: 44px; margin-inline-start: auto; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: var(--surface); color: var(--ink); transition: border-color 0.25s; } .nav-toggle:hover { border-color: var(--ink); } .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; } @media (max-width: 991px) { .nav-toggle { display: grid; } .nav { position: absolute; top: 100%; inset-inline: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift); } .nav.is-open, .no-js .nav { display: flex; } .no-js .nav-toggle { display: none; } .no-js .nav { position: static; flex-basis: 100%; } .no-js .site-header__bar { height: auto; flex-wrap: wrap; padding-block: 10px; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; } .nav__link { padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 1.02rem; } .nav__link::after { display: none; } .brand { min-width: 0; } .nav__side { min-width: 0; justify-content: space-between; margin-top: 16px; } .brand img { height: 48px; } } /* ---------- Home hero — full-bleed image band ---------- */ .hero { position: relative; display: flex; align-items: center; min-height: clamp(620px, 88vh, 840px); padding-block: clamp(80px, 9vw, 120px) clamp(110px, 11vw, 170px); /* Bottom edge cut in the chevron of the LANDMARK mark */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 52px), 50% 100%, 0 calc(100% - 52px)); background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgb(17 22 51 / 0.93) 0%, rgb(17 22 51 / 0.76) 46%, rgb(17 22 51 / 0.42) 100%), linear-gradient(to top, rgb(17 22 51 / 0.55), transparent 42%); } [dir="ltr"] .hero__bg::after { background: linear-gradient(to right, rgb(17 22 51 / 0.96) 0%, rgb(17 22 51 / 0.88) 52%, rgb(17 22 51 / 0.45) 85%, transparent 100%), linear-gradient(to top, rgb(17 22 51 / 0.65), transparent 45%); } .hero__inner { position: relative; } .hero__content { max-width: 700px; } [dir="ltr"] .hero__content { max-width: 940px; } .kicker--light { color: #f3a26b; } .hero__title { display: grid; gap: 6px; font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.4rem); font-weight: 800; line-height: 1.35; color: #fff; text-wrap: balance; } [dir="ltr"] .hero__title { line-height: 1.22; gap: 8px; text-wrap: unset; } .hero__title .accent { color: #f3a26b; } .hero__lead { max-width: 56ch; margin-top: 18px; font-size: 1.075rem; color: rgb(255 255 255 / 0.85); } [dir="ltr"] .hero__lead { max-width: 72ch; font-size: 1.12rem; line-height: 1.7; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero__badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding: 9px 18px; border-radius: 999px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.88rem; font-weight: 700; color: #fff; } .hero__badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgb(74 222 128 / 0.22); } /* ---------- Stats ---------- */ .stats { padding-block: clamp(26px, 4vw, 44px) clamp(12px, 2vw, 24px); } .stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); overflow: hidden; } .stat { display: grid; justify-items: center; gap: 2px; padding: 30px 18px; text-align: center; transition: background-color 0.3s; } .stat + .stat { border-inline-start: 1px solid var(--line); } .stat:hover { background: var(--surface); } .stat__value { font-size: clamp(2.5rem, 1.7rem + 2.4vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--orange); font-variant-numeric: lining-nums tabular-nums; } .stat__label { font-size: 0.95rem; font-weight: 700; color: var(--ink); } /* ---------- About ---------- */ .about__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .about__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); } .about__text .btn { margin-top: 26px; } .leader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); } .leader__label { display: block; font-size: 0.85rem; color: var(--muted); } .leader__name { font-size: 1.2rem; font-weight: 800; color: var(--ink); } .leader__badges { display: flex; gap: 8px; } .leader__badges li { padding: 6px 14px; border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--line); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.04em; color: var(--orange); } /* ---------- Card grids ---------- */ .cards { display: grid; gap: 18px; } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { display: grid; align-content: start; gap: 8px; padding: 26px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .card:hover { border-color: rgb(216 100 28 / 0.4); transform: translateY(-4px); box-shadow: var(--shadow-lift); } .card__icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 6px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); transition: background-color 0.3s; } .card:hover .card__icon { background: var(--orange-soft); } .card__icon img { width: 36px; height: 36px; } .card__title { font-size: 1.1rem; font-weight: 800; line-height: 1.55; color: var(--ink); } .card__term { font-size: 0.82rem; font-weight: 700; color: var(--blue-text); } .card__text { font-size: 0.96rem; line-height: 1.85; color: var(--muted); } /* ---------- Values ---------- */ .values__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .value { display: grid; align-content: start; gap: 8px; padding: 26px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .value:hover { border-color: rgb(216 100 28 / 0.4); transform: translateY(-4px); box-shadow: var(--shadow-lift); } .value__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--orange-soft); color: var(--orange); } .value__name { font-size: 1.15rem; font-weight: 800; color: var(--ink); } .value__text { font-size: 0.96rem; line-height: 1.85; color: var(--muted); } /* ---------- Projects — showcase tiles ---------- */ .showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); } .showcase__link { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; background: var(--navy); isolation: isolate; transition: transform 0.35s var(--ease), box-shadow 0.35s; } .showcase__link:hover, .showcase__link:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .showcase__media { position: absolute; inset: 0; display: block; } .showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .showcase__link:hover .showcase__media img { transform: scale(1.06); } .showcase__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(17 22 51 / 0.92) 4%, rgb(17 22 51 / 0.62) 38%, rgb(17 22 51 / 0.1) 72%); } .showcase__count { position: absolute; top: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgb(17 22 51 / 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / 0.2); color: #fff; font-size: 0.8rem; font-weight: 700; } .showcase__count .icon { width: 15px; height: 15px; } .showcase__body { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 5px; padding: clamp(18px, 2.4vw, 28px); color: #fff; } .showcase__dev { font-size: 0.82rem; font-weight: 700; color: #f3a26b; } .showcase__name { font-size: clamp(1.12rem, 0.98rem + 0.55vw, 1.5rem); font-weight: 800; line-height: 1.45; color: #fff; } .showcase__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 0.86rem; color: rgb(255 255 255 / 0.8); } .showcase__sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.55; } .showcase__cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.9rem; font-weight: 700; color: #fff; transition: gap 0.25s var(--ease); } .showcase__cue .icon { width: 17px; height: 17px; color: #f3a26b; } .showcase__link:hover .showcase__cue { gap: 13px; } .projects__more { margin-top: clamp(28px, 3vw, 40px); text-align: center; } /* ---------- Page hero (inner pages) — image band ---------- */ .page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 52vh, 560px); padding-block: clamp(96px, 11vw, 150px) clamp(42px, 5vw, 70px); background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; } .page-hero__bg { position: absolute; inset: 0; z-index: -1; } .page-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(17 22 51 / 0.94) 2%, rgb(17 22 51 / 0.72) 42%, rgb(17 22 51 / 0.34) 100%), linear-gradient(to left, rgb(17 22 51 / 0.5), transparent 62%); } [dir="ltr"] .page-hero__bg::after { background: linear-gradient(to top, rgb(17 22 51 / 0.94) 2%, rgb(17 22 51 / 0.72) 42%, rgb(17 22 51 / 0.34) 100%), linear-gradient(to right, rgb(17 22 51 / 0.5), transparent 62%); } .page-hero__inner { position: relative; width: 100%; } .crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.86rem; color: rgb(255 255 255 / 0.72); } .crumbs a { transition: color 0.2s; } .crumbs a:hover { color: #f3a26b; } .page-hero__title { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.2rem); font-weight: 800; line-height: 1.32; color: #fff; text-wrap: balance; } .page-hero__lead { /* Wide enough to keep the About sub-headline on a single desktop line. */ max-width: min(100%, 74ch); margin-top: 14px; font-size: 1.07rem; color: rgb(255 255 255 / 0.86); } /* ---------- Vision ---------- */ .vision__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; } .vision__points { display: grid; gap: 12px; } .point { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s var(--ease); } .point:hover { border-color: rgb(216 100 28 / 0.4); transform: translateY(-3px); } .point__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); } .point p { font-weight: 700; color: var(--ink); } /* ---------- Objectives ---------- */ .objectives__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .objective { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s var(--ease); } .objective:hover { border-color: rgb(216 100 28 / 0.4); transform: translateY(-3px); } .objective__check { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; } .objective__check .icon { width: 16px; height: 16px; } .objective p { font-weight: 700; color: var(--ink); } /* ---------- Services page ---------- */ .services-full__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .service { padding: clamp(24px, 3vw, 32px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 0.3s, box-shadow 0.3s; } .service:hover { border-color: rgb(216 100 28 / 0.4); box-shadow: var(--shadow-lift); } .service__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .service__icon { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); transition: background-color 0.3s; } .service:hover .service__icon { background: var(--orange-soft); } .service__icon img { width: 38px; height: 38px; } .service__num { display: block; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; color: var(--orange-text); } .service__title { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); font-weight: 800; line-height: 1.5; color: var(--ink); } .service__term { font-size: 0.85rem; font-weight: 700; color: var(--blue-text); } .service__list { display: grid; gap: 10px; } .service__list li { position: relative; padding-inline-start: 24px; font-size: 0.99rem; line-height: 1.85; } .service__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); } /* ---------- Contact page ---------- */ .contact-quick { background: var(--soft); padding-bottom: 0; } .contact-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .tile { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .tile:hover { border-color: rgb(216 100 28 / 0.4); transform: translateY(-4px); box-shadow: var(--shadow-lift); } .tile__link { display: grid; justify-items: center; gap: 4px; padding: 30px 22px; text-align: center; } .tile__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); transition: transform 0.3s var(--ease); } .tile:hover .tile__icon { transform: scale(1.07); } .tile--wa .tile__icon { background: rgb(30 169 82 / 0.12); color: #1ea952; } .tile--mail .tile__icon { background: var(--blue-soft); color: #0a6fa8; } .tile__label { font-size: 0.85rem; color: var(--muted); } .tile__value { font-size: 1.25rem; font-weight: 800; color: var(--ink); transition: color 0.2s; } .tile:hover .tile__value { color: var(--orange); } .tile__value--sm { font-size: 1rem; word-break: break-word; } .contact-main { padding-top: clamp(32px, 4vw, 48px); } .contact-main__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: stretch; } .form-card { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); } .form-card .h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); } .form-card__note { margin-top: 10px; margin-bottom: 28px; color: var(--muted); } .office-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--navy); color: rgb(255 255 255 / 0.78); } .office-card .h3 { color: #fff; } .office-list { display: grid; gap: 20px; margin-top: 22px; margin-bottom: 24px; } .office-list li { display: grid; gap: 3px; } .office-list__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%; border: 1px solid rgb(243 162 107 / 0.4); color: #f3a26b; } .office-list__label { font-size: 0.85rem; color: rgb(255 255 255 / 0.6); } .office-list__value { font-size: 1rem; font-weight: 700; line-height: 1.8; color: #fff; } .office-card__map { overflow: hidden; border-radius: var(--radius-sm); border: 1px solid rgb(255 255 255 / 0.12); margin-top: auto; margin-bottom: 20px; height: 220px; min-height: 180px; background: var(--navy-2); } .office-card__map iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; } .office-card__btn { width: 100%; } /* ---------- Form (Contact Form 7) ---------- */ /* CF7 puts its own dir on the .wpcf7 wrapper, from the form's locale. The page language is what should win, so restate it here. */ .lmp-form-wrap[dir="rtl"], .lmp-form-wrap[dir="rtl"] .wpcf7, .lmp-form-wrap[dir="rtl"] form { direction: rtl; text-align: right; } .lmp-form-wrap[dir="ltr"], .lmp-form-wrap[dir="ltr"] .wpcf7, .lmp-form-wrap[dir="ltr"] form { direction: ltr; text-align: left; } .lmp-form .lmp-field { display: grid; gap: 7px; margin-bottom: 16px; } .lmp-form .lmp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lmp-form label { font-size: 0.9rem; font-weight: 700; color: var(--ink); } .lmp-form .req { color: var(--orange); } .lmp-form input[type="text"], .lmp-form input[type="email"], .lmp-form input[type="tel"], .lmp-form textarea { width: 100%; padding: 13px 16px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-btn); transition: border-color 0.25s, box-shadow 0.25s; } .lmp-form textarea { min-height: 150px; resize: vertical; } /* Emails and phone numbers always read left-to-right, even inside the RTL form. */ .lmp-form input[type="email"], .lmp-form input[type="tel"] { direction: ltr; text-align: start; } .lmp-form input::placeholder, .lmp-form textarea::placeholder { color: #9aa1b8; } .lmp-form input:focus, .lmp-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); } .lmp-form .lmp-submit { margin-top: 22px; } .lmp-form input[type="submit"] { min-width: 200px; cursor: pointer; } .lmp-form .wpcf7-not-valid-tip { font-size: 0.85rem; font-weight: 700; color: #c62828; } .lmp-form input.wpcf7-not-valid, .lmp-form textarea.wpcf7-not-valid { border-color: #c62828; } .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-width: 1px; border-radius: var(--radius-btn); font-size: 0.95rem; font-weight: 700; } .wpcf7 form.sent .wpcf7-response-output { border-color: #1ea952; background: rgb(30 169 82 / 0.08); color: #14713a; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #c62828; background: rgb(198 40 40 / 0.07); color: #a11d1d; } .wpcf7-spinner { margin-inline-start: 10px; } .notice-box { padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--soft); color: var(--muted); } /* ---------- Closing CTA ---------- */ .cta { padding-block: clamp(56px, 6vw, 84px); background: var(--navy); color: rgb(255 255 255 / 0.82); } .cta__inner { display: grid; justify-items: center; gap: 10px; text-align: center; } .cta__lead { max-width: 56ch; font-size: 1.05rem; } .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; } /* ---------- Footer ---------- */ .site-footer { position: relative; padding-top: clamp(50px, 6vw, 74px); background: var(--navy); color: rgb(255 255 255 / 0.72); } .site-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--orange)); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-bottom: 40px; } .site-footer__brand img { height: 76px; width: auto; } .site-footer__tagline { margin-top: 14px; max-width: 28ch; font-size: 0.95rem; line-height: 1.85; } .site-footer__title { margin-bottom: 14px; font-size: 1rem; font-weight: 800; color: #fff; } .site-footer__col ul { display: grid; gap: 10px; font-size: 0.93rem; } .site-footer__col a { display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; } .site-footer__col a .icon { width: 16px; height: 16px; color: var(--orange); } .site-footer__col a:hover { color: #fff; } .site-footer__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.87rem; } .to-top { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.22); color: #fff; transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease); } .to-top:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-3px); } /* ---------- Floating WhatsApp ---------- */ .wa-float { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 40; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 22px -8px rgb(37 211 102 / 0.9); transition: transform 0.25s var(--ease); } .wa-float:hover { transform: scale(1.07); } /* ---------- Lightbox ---------- */ .lightbox { width: min(960px, 94vw); max-width: none; max-height: 94vh; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .lightbox[open] { display: grid; gap: 12px; } .lightbox::backdrop { background: rgb(17 22 51 / 0.7); } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lightbox__title { font-weight: 800; } .lightbox__close, .lightbox__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.25s, color 0.25s; } .lightbox__close:hover, .lightbox__btn:hover { border-color: var(--orange); color: var(--orange); } .lightbox__img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--soft); } .lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 16px; } .lightbox__btn .icon { transform: scaleX(-1); } .lightbox__btn--next .icon { transform: none; } .lightbox__count { min-width: 4ch; text-align: center; font-weight: 700; color: var(--muted); } /* ---------- Reveal (the only scroll motion) ---------- */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } } /* ---------- Section head on a dark band ---------- */ .sec-head--light .h2 { color: #fff; } .sec-head--light .kicker { color: #f3a26b; } .sec-head--light .lead { color: rgb(255 255 255 / 0.82); } /* ---------- Process — "how we work" image band ---------- */ .process { position: relative; padding-block: var(--section); background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; } .process__bg { position: absolute; inset: 0; z-index: -1; } .process__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .process__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(17 22 51 / 0.93), rgb(17 22 51 / 0.97)); } .process__inner { position: relative; } .process__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: none; } .step { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 24px); border-radius: var(--radius); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease); } .step:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(243 162 107 / 0.5); transform: translateY(-4px); } .step__num { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; color: #f3a26b; } .step__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(243 162 107 / 0.16); color: #f3a26b; } .step__icon .icon { width: 23px; height: 23px; } .step__title { font-size: 1.05rem; font-weight: 800; line-height: 1.5; color: #fff; } .step__text { font-size: 0.93rem; line-height: 1.85; color: rgb(255 255 255 / 0.76); } /* The handset leans right, so mirror it when the icon sits right of the number. */ [dir="rtl"] .icon--phone { transform: scaleX(-1); } /* ---------- Projects page ---------- */ .pgroup__head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(30px, 3.5vw, 46px); } .pgroup__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 54px; height: 54px; border-radius: 14px; background: var(--orange-soft); color: var(--orange); } .pgroup__icon .icon { width: 27px; height: 27px; } .pshow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 54px); align-items: center; } .pshow + .pshow { margin-top: clamp(44px, 5vw, 76px); padding-top: clamp(44px, 5vw, 76px); border-top: 1px solid var(--line); } .pshow:nth-of-type(even) .pshow__gallery { order: 2; } .pshow__gallery { display: grid; gap: 12px; } .pshow__main { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--soft-2); } .pshow__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .pshow__main:hover img { transform: scale(1.05); } .pshow__count { position: absolute; top: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgb(17 22 51 / 0.72); color: #fff; font-size: 0.8rem; font-weight: 700; } .pshow__count .icon { width: 15px; height: 15px; } .pshow__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; } .pshow__thumb { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft-2); border: 1px solid transparent; transition: border-color 0.25s, transform 0.25s var(--ease); } .pshow__thumb img { width: 100%; height: 100%; object-fit: cover; } .pshow__thumb:hover { border-color: var(--orange); transform: translateY(-3px); } .pshow__info { display: grid; align-content: start; gap: 14px; } .pshow__index { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; color: var(--orange-text); } .pshow__name { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); font-weight: 800; line-height: 1.4; color: var(--ink); } .pshow__meta { display: grid; gap: 12px; margin: 4px 0 0; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--soft); border: 1px solid var(--line); } .pshow__meta > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; } .pshow__meta dt { font-size: 0.82rem; font-weight: 700; color: var(--muted); } .pshow__meta dd { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); } .pshow__scope-label { margin-bottom: 10px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); } .pshow__scope { display: grid; gap: 9px; } .pshow__scope li { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; color: var(--text); } .pshow__scope .icon { flex: none; width: 17px; height: 17px; color: var(--orange); } /* ---------- FAQ ---------- */ .faq-list { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; } .qa { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } .qa[open] { border-color: var(--line-2); box-shadow: var(--shadow-lift); } .qa__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-size: 1.02rem; font-weight: 800; line-height: 1.6; color: var(--ink); transition: color 0.2s; } .qa__q::-webkit-details-marker { display: none; } .qa__q:hover { color: var(--orange-text); } .qa__mark { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-soft); } .qa__mark::before, .qa__mark::after { content: ""; position: absolute; inset-inline-start: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--orange); transform: translate(-50%, -50%); transition: transform 0.25s var(--ease), opacity 0.25s; } [dir="rtl"] .qa__mark::before, [dir="rtl"] .qa__mark::after { transform: translate(50%, -50%); } .qa__mark::after { transform: translate(-50%, -50%) rotate(90deg); } [dir="rtl"] .qa__mark::after { transform: translate(50%, -50%) rotate(90deg); } .qa[open] .qa__mark::after { opacity: 0; } .qa__a { padding: 0 22px 20px; } .qa__a p { max-width: 78ch; font-size: 0.97rem; line-height: 1.95; color: var(--text); } .faq-group + .faq-group { margin-top: clamp(38px, 4.5vw, 64px); } .faq-group__title { display: flex; align-items: center; gap: 12px; max-width: 900px; margin-inline: auto; margin-bottom: 18px; font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem); font-weight: 800; color: var(--ink); } .faq-group__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--orange-soft); font-size: 0.85rem; color: var(--orange-text); } .faq-ask { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; max-width: 900px; margin: clamp(44px, 5vw, 72px) auto 0; padding: clamp(26px, 3vw, 38px); border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); } .faq-ask__title { font-size: 1.2rem; font-weight: 800; color: var(--ink); } .faq-ask__lead { margin-top: 6px; font-size: 0.95rem; color: var(--muted); } .faq-ask__actions { display: flex; flex-wrap: wrap; gap: 10px; } .faq-teaser__more { margin-top: clamp(26px, 3vw, 36px); text-align: center; } /* ---------- Responsive ---------- */ @media (max-width: 1099px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { .about__grid, .vision__grid, .contact-main__grid { grid-template-columns: 1fr; } .hero { min-height: 0; padding-block: clamp(48px, 8vw, 72px) clamp(76px, 12vw, 110px); } .about__media { order: 2; } .about__media img { aspect-ratio: 16 / 10; } .services-full__list { grid-template-columns: 1fr; } .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .pshow { grid-template-columns: 1fr; } .pshow:nth-of-type(even) .pshow__gallery { order: 0; } .page-hero { min-height: clamp(320px, 42vh, 420px); } } @media (max-width: 639px) { :root { --header: 66px; } body { font-size: 1rem; } .hero__actions .btn { flex: 1; } .cards--4, .values__list, .objectives__list, .contact-tiles, .site-footer__grid { grid-template-columns: 1fr; } .lmp-form .lmp-row { grid-template-columns: 1fr; } .leader { flex-direction: column; align-items: flex-start; } .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px)); } .hero__badge { margin-top: 20px; padding: 8px 14px; font-size: 0.82rem; } .wa-float { width: 50px; height: 50px; bottom: 16px; inset-inline-start: 16px; } .site-footer__base { flex-direction: column; gap: 14px; padding-bottom: 84px; text-align: center; } .showcase, .process__list { grid-template-columns: 1fr; } .showcase__link { aspect-ratio: 4 / 3; } .pshow__meta > div { grid-template-columns: 1fr; gap: 2px; } .faq-ask { flex-direction: column; align-items: flex-start; } .faq-ask__actions .btn { flex: 1; } .qa__q { padding: 16px 18px; font-size: 0.97rem; } .qa__a { padding: 0 18px 18px; } }