/* ========================================================================== SBS — design system & components Navy + teal + gold from the SBS logo. Logical properties throughout so the same rules serve Arabic (RTL) and English (LTR). ========================================================================== */ /* ---------- Fonts (self-hosted, swap) ---------- */ /* Tajawal: the Arabic typeface (Arabic glyphs only, so Latin text keeps Alexandria / IBM Plex). */ @font-face { font-family: "Tajawal"; src: url(../fonts/tajawal-arabic-300.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; src: url(../fonts/tajawal-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; src: url(../fonts/tajawal-arabic-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; src: url(../fonts/tajawal-arabic-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; src: url(../fonts/tajawal-arabic-800.woff2) format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Alexandria"; src: url(../fonts/alexandria-arabic-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Alexandria"; src: url(../fonts/alexandria-latin-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/plex-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/plex-arabic-500.woff2) format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/plex-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/plex-latin-500.woff2) format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- */ :root { --navy-950: #050f26; --navy-900: #081b40; --navy-800: #0c2659; --navy-700: #11337a; --navy-600: #1b4596; --teal-600: #0b7290; --teal-500: #0e86a8; --teal-300: #5cc6de; --gold-600: #a8801f; --gold-500: #c79a2c; --gold-400: #dcb54f; --gold-200: #f2e3b8; --gold-grad: linear-gradient(135deg, #f0d48a 0%, #d0a23a 45%, #a8801f 100%); --ivory: #f8f6f1; --paper: #ffffff; --ink: #0d1a33; --ink-2: #2a3650; --muted: #5b667c; --line: #e5e1d6; --line-2: #d9d4c6; --ok: #11734b; --err: #b42318; --font-head: "Tajawal", "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif; --font-body: "Tajawal", "IBM Plex Sans Arabic", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); --fs-h4: clamp(1.15rem, 1.08rem + .3vw, 1.3rem); --fs-h3: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem); --fs-h1: clamp(2.2rem, 1.5rem + 3vw, 4.1rem); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(8, 27, 64, .06), 0 2px 8px rgba(8, 27, 64, .04); --shadow: 0 10px 30px -12px rgba(8, 27, 64, .22); --shadow-lg: 0 30px 60px -24px rgba(8, 27, 64, .35); --ease: cubic-bezier(.2, .7, .2, 1); --container: 1240px; --gutter: clamp(16px, 4vw, 40px); --header-h: 76px; --section: clamp(64px, 8vw, 120px); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.75; color: var(--ink); background: var(--ivory); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } html[lang^="en"] body { line-height: 1.65; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--teal-600); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--navy-700); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.3; margin: 0 0 .5em; color: var(--navy-900); letter-spacing: -.01em; } html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3 { letter-spacing: 0; line-height: 1.45; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold-200); color: var(--navy-900); } .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: absolute; inset-inline-start: 16px; top: -60px; z-index: 1000; background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 8px; } .skip-link:focus { top: 12px; color: #fff; } .icon { width: 1.25em; height: 1.25em; flex: none; } [dir="rtl"] .icon--arrow, [dir="rtl"] .icon--chevron { transform: scaleX(-1); } .hl { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .center { text-align: center; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(780px + var(--gutter) * 2); } .container--mid { max-width: calc(980px + var(--gutter) * 2); } .section { padding-block: var(--section); position: relative; } .section--tint { background: var(--paper); } .section--navy { background: var(--navy-900); color: #d7deeb; } .section--navy h2, .section--navy h3 { color: #fff; } .section--navy .section-intro { color: #b9c4d8; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 14px; } html[lang^="ar"] .eyebrow { letter-spacing: 0; font-size: var(--fs-sm); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-grad); border-radius: 2px; } .eyebrow--light, .section--navy .eyebrow { color: var(--gold-400); } .section-title { font-size: var(--fs-h2); margin-bottom: 14px; } .section-title--sm { font-size: var(--fs-h3); } .section-intro, .lead { color: var(--muted); font-size: var(--fs-lg); max-width: 62ch; margin: 0; } .lead { margin-bottom: 28px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; } .section-head__text { max-width: 760px; } .section-head--center { justify-content: center; text-align: center; } .section-head--center .section-intro { margin-inline: auto; } .section-head--center .eyebrow::after { content: ""; width: 28px; height: 2px; background: var(--gold-grad); border-radius: 2px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--navy-700); text-decoration: none; padding-block: 6px; border-bottom: 1px solid var(--gold-400); white-space: nowrap; } .link-arrow:hover .icon { transform: translateX(4px); } [dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); } .section--navy .link-arrow { color: #fff; } .link-arrow .icon { transition: transform .25s var(--ease); } /* ---------- Buttons ---------- */ .btn { --bg: var(--navy-800); --fg: #fff; --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--fg); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s; } .btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn .icon { transition: transform .25s var(--ease); } .btn:hover .icon--arrow { transform: translateX(3px); } [dir="rtl"] .btn:hover .icon--arrow { transform: scaleX(-1) translateX(3px); } .btn--primary { --bg: var(--navy-800); } .btn--primary:hover { --bg: var(--navy-700); } .btn--gold { --bg: var(--gold-500); --fg: var(--navy-950); background: var(--gold-grad); } .btn--gold:hover { --fg: var(--navy-950); box-shadow: 0 12px 30px -10px rgba(199, 154, 44, .65); } .btn--outline { --bg: transparent; --fg: var(--navy-800); --bd: var(--navy-800); } .btn--outline:hover { --bg: var(--navy-800); --fg: #fff; } .btn--ghost-light { --bg: rgba(255, 255, 255, .06); --fg: #fff; --bd: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); } .btn--ghost-light:hover { --bg: rgba(255, 255, 255, .14); --bd: rgba(255, 255, 255, .6); } .btn--lg { min-height: 56px; padding-inline: 32px; font-size: 1rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } /* ---------- Header ---------- */ /* The frosted background sits on ::before: backdrop-filter on the header itself would trap the fixed mobile menu inside it. */ .site-header { position: sticky; top: 0; z-index: 100; isolation: isolate; border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(248, 246, 241, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: background-color .3s; } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 0; } } .site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(8, 27, 64, .5); } .site-header.is-scrolled::before { background: rgba(255, 255, 255, .92); } /* Desktop: logo at the start, the main links right next to it, language + consultation at the end. Collapsed (menu button, see .nav-collapse): button | logo centred | language. */ .site-header__inner { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px); min-height: var(--header-h); max-width: calc(var(--container) + 120px + 2 * var(--gutter)); } .site-header__inner > .site-header__actions { margin-inline-start: auto; } .nav-collapse .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; direction: ltr; } .nav-collapse .site-header__inner > * { grid-row: 1; } [dir="rtl"].nav-collapse .site-header__inner > * { direction: rtl; } .nav-collapse .site-header__inner > .logo { grid-column: 2; justify-self: center; } .main-nav { min-width: 0; } .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; } .logo__mark { width: 92px; height: auto; } .logo__name { display: flex; flex-direction: column; line-height: 1.25; padding-inline-start: 12px; border-inline-start: 1px solid var(--line-2); } .logo__ar { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy-900); } .logo__en { font-family: var(--font-head); font-size: .68rem; color: var(--muted); letter-spacing: .02em; } .logo--light .logo__ar { color: #fff; } .logo--light .logo__en { color: #9fb0cc; } .logo--light .logo__name { border-color: rgba(255, 255, 255, .2); } .main-nav { margin: 0; align-self: stretch; display: flex; } .main-nav .menu { list-style: none; display: flex; align-items: stretch; gap: 2px; } .main-nav .menu > li { position: relative; display: flex; align-items: center; flex: none; } .main-nav .menu a { display: flex; align-items: center; gap: 4px; padding: 10px 10px; font-family: var(--font-head); font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 10px; white-space: nowrap; transition: color .2s, background-color .2s; } .main-nav .menu a:hover, .main-nav .menu .current-menu-item > a, .main-nav .menu .current-menu-ancestor > a, .main-nav .menu .current-menu-parent > a { color: var(--navy-800); background: rgba(12, 38, 89, .06); } .main-nav .menu .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--gold-400); } .sub-toggle { display: inline-grid; place-items: center; width: 26px; height: 28px; margin-inline-start: -4px; border: 0; background: none; color: var(--muted); border-radius: 8px; } .sub-toggle .icon { width: 16px; height: 16px; transition: transform .2s; } /* Top-level items fill the header height, so dropdowns open right under the header edge. Dropdowns open from\n the item's start edge (main.js flips one that would leave the viewport). */ .main-nav .sub-menu { list-style: none; position: absolute; top: calc(100% - 6px); inset-inline-start: 0; min-width: 250px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; z-index: 5; } .main-nav .sub-menu.sub-menu--end { inset-inline-start: auto; inset-inline-end: 0; } .main-nav .sub-menu::before { content: ""; position: absolute; inset-inline: 0; top: -10px; height: 10px; } .main-nav .sub-menu a { padding: 9px 12px; font-size: .88rem; } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu, .main-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .main-nav li.is-open > .sub-toggle .icon { transform: rotate(180deg); } .main-nav__mobile-extra { display: none; } .site-header__actions { display: flex; align-items: center; gap: 12px; flex: none; } .site-header__actions .btn { min-height: 42px; padding: 10px 18px; white-space: nowrap; } .lang-switch { list-style: none; display: flex; padding: 3px; background: rgba(12, 38, 89, .06); border-radius: 999px; } .lang-switch a, .lang-switch span { display: grid; place-items: center; min-width: 34px; height: 30px; padding-inline: 8px; border-radius: 999px; font-family: var(--font-head); font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none; } .lang-switch .is-current { background: #fff; color: var(--navy-900); box-shadow: var(--shadow-sm); } .lang-switch a:hover { color: var(--navy-800); } .nav-toggle { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-2); background: #fff; border-radius: 12px; color: var(--navy-900); } .nav-toggle .icon { width: 22px; height: 22px; } .nav-toggle__close { display: none; } .nav-open .nav-toggle__open { display: none; } .nav-open .nav-toggle__close { display: block; } /* The header shows only the logo mark, so the mark itself is what sits in the exact centre. */ .site-header .logo__name { display: none; } @media (max-width: 1920px) { .main-nav .menu a { padding-inline: 8px; font-size: .85rem; } .site-header__actions { gap: 10px; } .site-header__actions .btn { padding-inline: 16px; } } /* Collapsed (menu button) header. html.nav-collapse is set before first paint by an inline script (sbs_nav_collapse_script) and kept in sync by main.js whenever the menu would not fit on one line. */ .nav-measuring .site-header *, .nav-measuring .site-header *::before { transition: none !important; } .nav-collapse { --header-h: 68px; } .nav-collapse .nav-toggle { display: grid; } .nav-collapse .site-header__actions > .btn { display: none; } /* Collapsed: menu button on the left, logo centred, language switcher on the right. */ .nav-collapse .site-header__actions { display: contents; } .nav-collapse .nav-toggle { grid-row: 1; grid-column: 1; justify-self: start; } .nav-collapse .lang-switch { grid-row: 1; grid-column: 3; justify-self: end; } .nav-collapse .main-nav { display: block; justify-self: stretch; position: fixed; inset: var(--header-h) 0 0 0; margin: 0; background: var(--ivory); padding: 20px var(--gutter) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s; } .nav-collapse .admin-bar .main-nav { top: calc(var(--header-h) + 32px); } @media (max-width: 782px) { .nav-collapse .admin-bar .main-nav { top: calc(var(--header-h) + 46px); } } .nav-collapse.nav-open .main-nav { opacity: 1; visibility: visible; transform: none; } .nav-collapse.nav-open { overflow: hidden; } .nav-collapse .main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; } .nav-collapse .main-nav .menu > li { border-bottom: 1px solid var(--line); flex-wrap: wrap; } .nav-collapse .main-nav .menu > li > a { flex: 1; padding: 16px 4px; font-size: 1.05rem; } .nav-collapse .main-nav .menu .current-menu-item > a { box-shadow: none; background: none; color: var(--teal-600); } .nav-collapse .sub-toggle { width: 44px; height: 44px; margin: 0; } .nav-collapse .main-nav .sub-menu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 12px; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; display: none; } .nav-collapse .main-nav li.is-open > .sub-menu { display: block; } .nav-collapse .main-nav li:hover > .sub-menu { display: none; } .nav-collapse .main-nav li.is-open:hover > .sub-menu { display: block; } .nav-collapse .main-nav .sub-menu a { padding: 10px 16px; font-size: .95rem; } .nav-collapse .main-nav__mobile-extra { display: grid; gap: 20px; margin-top: 28px; } .nav-collapse .main-nav__mobile-extra .btn { width: 100%; } @media (max-width: 520px) { .logo__name { display: none; } .logo__mark { width: 80px; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; color: #cfd8e8; background: radial-gradient(120% 90% at 85% 10%, #163a86 0%, var(--navy-900) 46%, var(--navy-950) 100%); padding-block: clamp(56px, 8vw, 112px) clamp(64px, 8vw, 104px); isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 80%); } .hero__glow { position: absolute; width: 60vw; height: 60vw; inset-inline-end: -15vw; top: -25vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 198, 222, .22), transparent 70%); } .hero__arc { position: absolute; inset: auto 0 0 0; width: 100%; height: 75%; fill: none; } .hero__arc path { stroke: var(--gold-400); stroke-width: 2.2; opacity: .55; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.4s .3s var(--ease) forwards; } .hero__arc .hero__arc-head { stroke-dasharray: 200; stroke-dashoffset: 200; animation-delay: 2.2s; animation-duration: .6s; stroke-linecap: round; stroke-linejoin: round; } [dir="rtl"] .hero__arc { transform: scaleX(-1); } @keyframes draw { to { stroke-dashoffset: 0; } } .hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__title { color: #fff; font-size: var(--fs-h1); font-weight: 800; line-height: 1.2; margin-bottom: 22px; } html[lang^="ar"] .hero__title { line-height: 1.35; } .hero__text { font-size: var(--fs-lg); max-width: 58ch; color: #c3cee2; margin-bottom: 34px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__markets { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); } .hero__markets a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #e6ecf6; font-size: var(--fs-sm); text-decoration: none; transition: background-color .2s, border-color .2s; } [dir="rtl"] .hero__markets a { padding: 8px 10px 8px 16px; } .hero__markets a:hover { background: rgba(255, 255, 255, .12); border-color: var(--gold-400); color: #fff; } .flag { display: inline-block; width: 26px; height: 18px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); flex: none; } .flag svg { width: 100%; height: 100%; } .hero__visual { position: relative; aspect-ratio: 1; width: min(100%, 500px); justify-self: center; } .hero__badge { position: relative; z-index: 2; width: 74%; margin: 13%; border-radius: 50%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 10px rgba(255, 255, 255, .04), 0 0 0 1px rgba(220, 181, 79, .5); animation: float 7s ease-in-out infinite; } .orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(220, 181, 79, .35); animation: spin 60s linear infinite; } .orbit--2 { inset: 7%; border: 1px solid rgba(92, 198, 222, .2); animation-duration: 90s; animation-direction: reverse; } .orbit::after { content: ""; position: absolute; top: 50%; inset-inline-start: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 18px var(--gold-400); } .chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--navy-900); font-family: var(--font-head); font-weight: 600; font-size: .85rem; box-shadow: var(--shadow-lg); white-space: nowrap; animation: float 6s ease-in-out infinite; } .chip .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--navy-800); color: var(--gold-400); } .chip--1 { top: 8%; inset-inline-start: -6%; } .chip--2 { top: 66%; inset-inline-end: -6%; animation-delay: -2s; } .chip--3 { bottom: 4%; inset-inline-start: 4%; animation-delay: -4s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 960px) { .hero__inner { grid-template-columns: 1fr; } .hero__visual { width: min(60%, 260px); } .chip { font-size: .78rem; padding: 8px 12px; } .hero__arc { opacity: .35; } .chip--1 { inset-inline-start: -8%; } .chip--2 { inset-inline-end: -12%; } } @media (max-width: 520px) { .hero__actions .btn { width: 100%; } .chip--2 { display: none; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(100% 140% at 90% 0%, #163a86 0%, var(--navy-900) 50%, var(--navy-950) 100%); color: #c3cee2; padding-block: clamp(44px, 6vw, 84px) clamp(48px, 6vw, 80px); } .page-hero__bg { position: absolute; inset: 0; z-index: -1; } .page-hero__bg .arc { position: absolute; width: 900px; height: 900px; inset-inline-end: -380px; top: -520px; border-radius: 50%; border: 2px solid rgba(220, 181, 79, .35); box-shadow: inset 0 0 0 60px rgba(255, 255, 255, .015); } .page-hero__title { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); font-weight: 800; max-width: 22ch; margin-bottom: 14px; } .page-hero__intro { font-size: var(--fs-lg); max-width: 64ch; margin: 0; } .page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); margin-bottom: 22px; color: #94a4c1; } .breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 6px; opacity: .5; } .breadcrumbs a { color: #c3cee2; text-decoration: none; } .breadcrumbs a:hover { color: var(--gold-400); } .article-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sm); color: #aebad0; margin: 0; } .article-meta a { color: var(--gold-400); text-decoration: none; } /* ---------- Grids ---------- */ .grid { display: grid; gap: clamp(16px, 2vw, 24px); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--services { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); } .grid--team { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } .grid--why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--certs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 32px; } @media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3, .grid--why { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .grid--2, .grid--3, .grid--4, .grid--why { grid-template-columns: 1fr; } } /* ---------- Cards ---------- */ .card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.2vw, 30px); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .section--tint .card { background: var(--ivory); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .card__title { font-size: var(--fs-h4); margin: 0 0 10px; } .card__title a { color: inherit; text-decoration: none; } .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .card__text { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 18px; } .card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); } .card__more .icon { transition: transform .25s var(--ease); } .card:hover .card__more .icon { transform: translateX(4px); } [dir="rtl"] .card:hover .card__more .icon { transform: scaleX(-1) translateX(4px); } .card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(145deg, var(--navy-800), var(--navy-700)); color: var(--gold-400); margin-bottom: 22px; box-shadow: 0 10px 20px -10px rgba(12, 38, 89, .6); transition: transform .3s var(--ease); } .card__icon .icon { width: 26px; height: 26px; } .card:hover .card__icon { transform: rotate(-6deg) scale(1.05); } .card__num { position: absolute; top: 22px; inset-inline-end: 24px; font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: transparent; -webkit-text-stroke: 1px var(--line-2); } .card--service::before { content: ""; position: absolute; inset-inline: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-grad); transform: scaleX(0); transition: transform .4s var(--ease); } .card--service:hover::before { transform: scaleX(1); } .card--sector .card__icon { background: rgba(14, 134, 168, .1); color: var(--teal-600); box-shadow: none; width: 48px; height: 48px; margin-bottom: 16px; } .card--market { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); color: #c3cee2; } .section--navy .card--market .card__title { color: #fff; } .section--navy .card--market .card__text { color: #aebad0; } .section--navy .card--market .card__more { color: var(--gold-400); } .section--navy .card--market:hover { background: rgba(255, 255, 255, .07); border-color: rgba(220, 181, 79, .4); box-shadow: none; } .card__flag { display: block; width: 52px; height: 36px; border-radius: 6px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), var(--shadow-sm); } .card__flag svg { width: 100%; height: 100%; } .card--opp .card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .card__meta { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 8px; } .status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: #e8f5ee; color: var(--ok); } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status--study { background: #fdf3dc; color: #8a6510; } .status--closed { background: #eef0f4; color: var(--muted); } .card--post { padding: 0; overflow: hidden; } .card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .card--post:hover .card__media img { transform: scale(1.05); } .card__media-fallback { display: grid; place-items: center; height: 100%; color: var(--gold-400); } .card__media-fallback .icon { width: 48px; height: 48px; opacity: .7; } .card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } /* Ticks list */ .ticks { list-style: none; display: grid; gap: 12px; } .ticks li { display: flex; gap: 12px; align-items: flex-start; } .ticks .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(199, 154, 44, .15); color: var(--gold-600); margin-top: 3px; } .ticks--sm { gap: 8px; font-size: var(--fs-sm); margin-bottom: 20px; } .ticks--sm .icon { width: 18px; height: 18px; padding: 3px; margin-top: 4px; } .section--navy .ticks .icon { background: rgba(220, 181, 79, .15); color: var(--gold-400); } .ticks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } @media (max-width: 680px) { .ticks--grid { grid-template-columns: 1fr; } } /* ---------- Credentials ---------- */ .creds { padding-bottom: clamp(32px, 4vw, 56px); background: var(--paper); border-bottom: 1px solid var(--line); } .creds__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 48px; flex-wrap: wrap; margin-bottom: 32px; } .creds__head .section-intro { max-width: 52ch; font-size: var(--fs-base); } .partners { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; } .partner { display: grid; place-items: center; width: 150px; height: 96px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: box-shadow .3s, transform .3s var(--ease); } .partner:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .partner img { max-height: 76px; width: auto; object-fit: contain; } /* Certificates row: 5 / 4 / 3 cards across the container width (about 1.6 on phones) - compact by request. */ .rail { position: relative; --per: 5; --rail-gap: 18px; --cert-w: calc((min(100vw - 2 * var(--gutter), var(--container)) - (var(--per) - 1) * var(--rail-gap)) / var(--per)); } .rail__track { display: flex; gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 0 24px; scrollbar-width: none; } .rail__track::-webkit-scrollbar { display: none; } .rail__track .cert { flex: 0 0 var(--cert-w); min-width: 0; scroll-snap-align: start; } @media (max-width: 1100px) { .rail { --per: 4; } } @media (max-width: 800px) { .rail { --per: 3; --rail-gap: 14px; } } @media (max-width: 520px) { .rail { --cert-w: calc((100vw - 2 * var(--gutter)) * .62); } } /* Infinite marquee (homepage partners + certificates). main.js repeats the items to fill the row, sets --marquee-dist (one full set) and --marquee-dur, then adds .is-running. Static without JS. */ .marquee--partners { margin-bottom: 24px; } .marquee--partners .partners { margin-bottom: 0; } .marquee.is-running { overflow: hidden; direction: ltr; padding-block: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } [dir="rtl"] .marquee.is-running > * > * { direction: rtl; } .marquee.is-running > :first-child { display: flex; flex-wrap: nowrap; width: max-content; overflow: visible; scroll-snap-type: none; animation: sbs-marquee var(--marquee-dur, 40s) linear infinite; will-change: transform; } [dir="rtl"] .marquee.is-running > :first-child { animation-direction: reverse; } .marquee.is-running:hover > :first-child, .marquee.is-running:focus-within > :first-child { animation-play-state: paused; } .marquee.is-running .partner, .marquee.is-running .cert { flex: none; } .marquee.is-running .cert { width: var(--cert-w); } @keyframes sbs-marquee { to { transform: translateX(calc(-1 * var(--marquee-dist, 50%))); } } /* Certificate booklet (pages turn around the spine; Arabic turns left-to-right). Static row without JS. */ .booklet:not(.is-ready) .booklet__cover { display: none; } .booklet__src[hidden] { display: none !important; } .booklet__stage { perspective: 2400px; padding-block: 10px 6px; overflow: hidden; } .booklet__book { --page-pad: 18px; position: relative; width: min(100%, 1060px); margin-inline: auto; aspect-ratio: 2 / .86; transition: transform .7s var(--ease); } .booklet__book.is-start { transform: translateX(-25%); } .booklet__book.is-end { transform: translateX(25%); } [dir="rtl"] .booklet__book.is-start { transform: translateX(25%); } [dir="rtl"] .booklet__book.is-end { transform: translateX(-25%); } .booklet__leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3, .65, .25, 1); } .booklet__leaf.is-flipped { transform: rotateY(-180deg); } [dir="rtl"] .booklet__leaf { left: 0; transform-origin: right center; } [dir="rtl"] .booklet__leaf.is-flipped { transform: rotateY(180deg); } .booklet__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--page-pad); background: #fffdf8; border: 1px solid var(--line); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } .booklet__face--front { border-radius: 0 10px 10px 0; background-image: linear-gradient(90deg, rgba(8, 27, 64, .12), rgba(8, 27, 64, 0) 7%); box-shadow: 8px 10px 26px -18px rgba(8, 27, 64, .55); } .booklet__face--back { transform: rotateY(180deg); border-radius: 10px 0 0 10px; background-image: linear-gradient(270deg, rgba(8, 27, 64, .12), rgba(8, 27, 64, 0) 7%); box-shadow: -8px 10px 26px -18px rgba(8, 27, 64, .55); } [dir="rtl"] .booklet__face--front { border-radius: 10px 0 0 10px; background-image: linear-gradient(270deg, rgba(8, 27, 64, .12), rgba(8, 27, 64, 0) 7%); box-shadow: -8px 10px 26px -18px rgba(8, 27, 64, .55); } [dir="rtl"] .booklet__face--back { border-radius: 0 10px 10px 0; background-image: linear-gradient(90deg, rgba(8, 27, 64, .12), rgba(8, 27, 64, 0) 7%); box-shadow: 8px 10px 26px -18px rgba(8, 27, 64, .55); } .booklet__face:empty { background-color: #f7f3ea; } .booklet__face .cert { width: 100%; } .booklet__face .cert__link { box-shadow: 0 2px 10px rgba(8, 27, 64, .12); } .booklet__face .cert__cap { padding-top: 10px; } .booklet__face:has(.booklet__cover) { background: radial-gradient(120% 90% at 80% 10%, #163a86 0%, var(--navy-900) 50%, var(--navy-950) 100%); border-color: var(--navy-900); } .booklet__cover { display: grid; justify-items: center; gap: 10px; text-align: center; color: #cfd8e8; } .booklet__cover .logo__mark { width: clamp(110px, 16vw, 170px); } .booklet__cover .logo__name { display: none; } .booklet__cover-title { margin: 6px 0 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.9rem); color: var(--gold-400); } .booklet__cover-sub { margin: 0; font-size: var(--fs-sm); } .booklet__cover-hint { margin: 10px 0 0; font-size: var(--fs-xs); opacity: .65; } .booklet__book.is-single { aspect-ratio: 1 / .95; transform: none; } .booklet__book.is-single .booklet__leaf { left: 0; width: 100%; transform-origin: left center; transition: transform .75s cubic-bezier(.3, .65, .25, 1), opacity .25s .5s; } [dir="rtl"] .booklet__book.is-single .booklet__leaf { transform-origin: right center; } .booklet__book.is-single .booklet__leaf.is-flipped { opacity: 0; } .booklet__book.is-single .booklet__face { border-radius: 10px; --page-pad: 14px; } .booklet__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; } .booklet__nav[hidden] { display: none; } .booklet__count { min-width: 74px; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--muted); } .booklet__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--navy-900); transition: background-color .2s, color .2s, opacity .2s; } .booklet__btn:hover:not(:disabled) { background: var(--navy-800); color: #fff; } .booklet__btn:disabled { opacity: .35; cursor: default; } .booklet__btn[data-book-prev] .icon { transform: scaleX(-1); } [dir="rtl"] .booklet__btn[data-book-prev] .icon { transform: none; } [dir="rtl"] .booklet__btn[data-book-next] .icon { transform: scaleX(-1); } .booklet:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 6px; border-radius: 12px; } @media (prefers-reduced-motion: reduce) { .booklet__leaf, .booklet__book { transition: none !important; } }.cert { margin: 0; } .cert__link { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-900); box-shadow: 0 2px 6px rgba(8, 27, 64, .08), 0 18px 30px -22px rgba(8, 27, 64, .55); aspect-ratio: 3 / 2; } .cert__link img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s; } .cert__link:hover img { transform: scale(1.04); opacity: .9; } .cert__zoom { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy-900); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s var(--ease); } .cert__link:hover .cert__zoom, .cert__link:focus-visible .cert__zoom { opacity: 1; transform: none; } .cert__cap { display: grid; gap: 2px; padding: 12px 4px 0; font-size: var(--fs-sm); } .cert__cap strong { font-family: var(--font-head); font-weight: 600; color: var(--navy-900); font-size: .95rem; } .cert__cap span { color: var(--muted); font-size: var(--fs-xs); } /* ---------- About intro ---------- */ .about-intro__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .focus-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-2); } .focus-list li { display: flex; gap: 20px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--line-2); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h4); color: var(--navy-900); transition: padding .3s var(--ease), color .2s; } .focus-list li:hover { padding-inline-start: 10px; color: var(--teal-600); } .focus-list__num { font-size: var(--fs-xs); color: var(--gold-600); font-weight: 700; min-width: 2ch; } @media (max-width: 900px) { .about-intro__grid { grid-template-columns: 1fr; } } /* ---------- Journey ---------- */ .journey { background: linear-gradient(180deg, var(--ivory), #fff); } .journey__track { --progress: 0; list-style: none; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding-top: 10px; } .journey__track::before, .journey__track::after { content: ""; position: absolute; top: 37px; inset-inline: calc(100% / 14); height: 2px; background: var(--line-2); } .journey__track::after { background: var(--gold-grad); transform-origin: left; transform: scaleX(var(--progress)); transition: transform .2s linear; } [dir="rtl"] .journey__track::after { transform-origin: right; } .journey__step { position: relative; z-index: 1; text-align: center; padding-inline: 4px; } .journey__dot { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); font-family: var(--font-head); font-weight: 700; color: var(--muted); transition: background-color .4s, border-color .4s, color .4s, transform .4s var(--ease), box-shadow .4s; } .journey__step.is-active .journey__dot { background: var(--navy-800); border-color: var(--gold-400); color: var(--gold-400); transform: scale(1.08); box-shadow: 0 0 0 6px rgba(220, 181, 79, .15); } .journey__title { font-size: var(--fs-h4); margin-bottom: 6px; } .journey__text { font-size: var(--fs-sm); color: var(--muted); margin: 0; } @media (max-width: 960px) { .journey__track { grid-template-columns: 1fr; gap: 0; padding-inline-start: 0; } .journey__track::before, .journey__track::after { top: 28px; bottom: 28px; inset-inline-start: 27px; inset-inline-end: auto; width: 2px; height: auto; } .journey__track::after { transform-origin: top; transform: scaleY(var(--progress)); } [dir="rtl"] .journey__track::after { transform-origin: top; } .journey__step { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; text-align: start; padding-block: 0 26px; } .journey__dot { margin: 0; grid-row: span 2; } .journey__title { align-self: end; margin-top: 12px; } } /* ---------- Sector chips ---------- */ .sector-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; } .sector-chips a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy-900); font-family: var(--font-head); font-weight: 500; text-decoration: none; transition: all .25s var(--ease); } [dir="rtl"] .sector-chips a { padding: 12px 14px 12px 22px; } .sector-chips .icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(14, 134, 168, .1); color: var(--teal-600); transition: background-color .25s, color .25s; } .sector-chips a:hover { border-color: var(--navy-800); background: var(--navy-800); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); } .sector-chips a:hover .icon { background: rgba(255, 255, 255, .12); color: var(--gold-400); } /* ---------- Why ---------- */ .why-item { position: relative; padding: 30px 28px; border-radius: var(--radius); background: var(--ivory); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; } .section:not(.section--tint) .why-item { background: #fff; } .why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .why-item__num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; line-height: 1; margin-bottom: 18px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .why-item__title { font-size: var(--fs-h4); } .why-item__text { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .why-card { padding: 32px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; } .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .why-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--navy-800); color: var(--gold-400); margin-bottom: 20px; } .why-card__icon .icon { width: 26px; height: 26px; } .why-card__title { font-size: var(--fs-h4); } .why-card p { color: var(--muted); margin: 0; } .grid--why-page { margin-top: 40px; } /* ---------- Steps ---------- */ .method-home__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .method-home__sticky { position: sticky; top: calc(var(--header-h) + 40px); } @media (max-width: 900px) { .method-home__grid { grid-template-columns: 1fr; } .method-home__sticky { position: static; } } .steps { list-style: none; counter-reset: s; display: grid; gap: 14px; } .step { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); } .step:hover { border-color: var(--gold-400); box-shadow: var(--shadow); transform: translateX(4px); } [dir="rtl"] .step:hover { transform: translateX(-4px); } .step__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--navy-900); color: var(--gold-400); font-family: var(--font-head); font-weight: 700; } .step__title { font-size: var(--fs-h4); margin: 4px 0 6px; } .step__text { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .steps--timeline { position: relative; gap: 22px; margin-top: 40px; } .steps--timeline::before { content: ""; position: absolute; top: 24px; bottom: 24px; inset-inline-start: 47px; width: 2px; background: linear-gradient(var(--gold-400), var(--navy-700)); opacity: .4; } .steps--timeline .step { position: relative; } /* ---------- Team ---------- */ .team-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; } .section--tint .team-card { background: var(--ivory); } .team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .team-card__photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(160deg, #dfe5ef, #c9d2e1); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); } .team-card:hover .team-card__photo img { transform: scale(1.04); } .team-card__placeholder { display: grid; place-items: center; height: 100%; color: #9aa7bd; } .team-card__placeholder .icon { width: 64px; height: 64px; } .team-card__body { padding: 18px 20px 22px; border-top: 3px solid transparent; border-image: var(--gold-grad) 1; } .team-card__name { font-size: 1.05rem; margin-bottom: 4px; } .team-card__role { color: var(--teal-600); font-size: var(--fs-sm); font-weight: 500; margin: 0; line-height: 1.5; } .team-card__bio { color: var(--muted); font-size: var(--fs-sm); margin: 12px 0 0; } .team-card__in { display: inline-grid; place-items: center; margin-top: 12px; width: 34px; height: 34px; border-radius: 8px; background: var(--navy-800); color: #fff; } .team-card__in .icon { width: 16px; height: 16px; } /* ---------- Testimonials ---------- */ .quote { margin: 0; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; } .quote__mark { width: 36px; height: 36px; color: var(--gold-500); margin-bottom: 14px; } .quote__text { margin: 0 0 22px; color: var(--ink-2); font-size: var(--fs-base); flex: 1; } .quote__by { display: flex; align-items: center; gap: 12px; } .quote__by img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .quote__by span { display: grid; } .quote__by small { color: var(--muted); } /* ---------- Accordion ---------- */ .faq-home__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 900px) { .faq-home__grid { grid-template-columns: 1fr; } } .accordion { display: grid; gap: 10px; } .accordion__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s, box-shadow .2s; } .section--tint .accordion__item { background: var(--ivory); } .accordion__item[open] { border-color: var(--gold-400); box-shadow: var(--shadow-sm); } .accordion__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; color: var(--navy-900); } .accordion__q::-webkit-details-marker { display: none; } .accordion__q .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(12, 38, 89, .06); color: var(--navy-800); transition: transform .3s var(--ease), background-color .2s; } .accordion__item[open] .accordion__q .icon { transform: rotate(45deg); background: var(--navy-800); color: var(--gold-400); } .accordion__a { padding: 0 22px 20px; color: var(--muted); } .accordion__a p:last-child { margin: 0; } .faq-group + .faq-group { margin-top: 48px; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; background: var(--navy-950); padding-block: clamp(56px, 7vw, 96px); isolation: isolate; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 0%, rgba(92, 198, 222, .22), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(220, 181, 79, .2), transparent 60%); } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; } .cta-band__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); max-width: 24ch; } .cta-band__text { color: #aebad0; max-width: 56ch; margin: 0; font-size: var(--fs-lg); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Detail pages ---------- */ .detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; } .detail__main > * + * { margin-top: 40px; } .detail__aside { position: relative; } @media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } } .detail__flag { display: block; width: 72px; height: 48px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } .detail__flag svg { width: 100%; height: 100%; } .block-title { font-size: var(--fs-h3); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .block-title::before { content: ""; width: 6px; height: 26px; border-radius: 3px; background: var(--gold-grad); flex: none; } .callout { padding: 28px 30px; border-radius: var(--radius); background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #d3dcec; } .callout__title { color: var(--gold-400); font-size: var(--fs-h4); } .callout p { margin: 0; font-size: var(--fs-lg); } .callout--center { text-align: center; margin-top: 56px; } .callout--center p { margin-bottom: 20px; font-size: var(--fs-base); } .callout--center .callout__title { color: #fff; } .topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 680px) { .topic-grid { grid-template-columns: 1fr; } } .topic { padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--gold-500); border-radius: var(--radius-sm); } .topic__title { font-size: 1.02rem; margin-bottom: 6px; } .topic p { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .deliverables { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .deliverables li { display: flex; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; } .deliverables .icon { color: var(--ok); margin-top: 4px; } @media (max-width: 680px) { .deliverables { grid-template-columns: 1fr; } } .note, .disclaimer { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: var(--radius-sm); background: #fdf6e3; border: 1px solid #f0dfb1; color: #6d5212; font-size: var(--fs-sm); } .note .icon { margin-top: 3px; color: var(--gold-600); } .disclaimer { margin-top: 32px; display: block; } .aside-card { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .aside-card--sticky { position: sticky; top: calc(var(--header-h) + 24px); } .aside-card__title { font-size: var(--fs-h4); } .aside-card__cta { padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--line); } .aside-card__cta p { color: var(--muted); font-size: var(--fs-sm); } .aside-card__cta .btn { width: 100%; } .aside-card--navy { background: var(--navy-900); border-color: var(--navy-900); color: #c3cee2; } .aside-card--navy .aside-card__title { color: #fff; } .aside-card__contact { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; } .aside-card--navy a { color: var(--gold-400); } .aside-links { list-style: none; display: grid; gap: 4px; margin-bottom: 12px; } .aside-links a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); } .aside-links a:hover { background: var(--ivory); color: var(--navy-800); } .aside-links .icon { color: var(--teal-600); } .facts { display: grid; gap: 0; margin: 0 0 12px; } .facts div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px dashed var(--line-2); } .facts dt { color: var(--muted); font-size: var(--fs-sm); } .facts dd { margin: 0; font-weight: 600; color: var(--navy-900); text-align: end; } .mini-steps { margin: 0 0 20px; padding-inline-start: 20px; display: grid; gap: 10px; } .mini-steps li::marker { color: var(--gold-400); font-weight: 700; } /* ---------- Prose ---------- */ .prose { color: var(--ink-2); } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: var(--fs-h3); margin-top: 1.8em; } .prose h3 { font-size: var(--fs-h4); margin-top: 1.5em; } .prose ul, .prose ol { padding-inline-start: 1.4em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--gold-600); } .prose a { color: var(--teal-600); } .prose blockquote { margin: 1.5em 0; padding: 16px 24px; border-inline-start: 4px solid var(--gold-500); background: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .prose img { border-radius: var(--radius-sm); } .prose--lead { font-size: var(--fs-lg); } .prose--lead p:first-child { color: var(--navy-900); } .prose--light { color: #c3cee2; font-size: var(--fs-sm); } .updated { margin-top: 40px; color: var(--muted); font-size: var(--fs-sm); } .page-figure, .article__figure { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; } .article__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; } .tags { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tags a { padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); text-decoration: none; } .share { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-sm); } .share a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--navy-800); } .share a:hover { background: var(--navy-800); color: #fff; } .share .icon { width: 16px; height: 16px; } /* ---------- About page ---------- */ .about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .about-grid__badge { margin: 0; } .about-grid__badge img { border-radius: 50%; box-shadow: var(--shadow-lg); width: min(100%, 420px); margin-inline: auto; } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-grid__badge { order: -1; } .about-grid__badge img { width: 240px; } } .vm__card { padding: 36px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); } .vm__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--gold-grad); color: var(--navy-950); margin-bottom: 20px; } .vm__card p { margin: 0; font-size: var(--fs-lg); } .market-list { list-style: none; display: grid; gap: 10px; } .market-list a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); color: var(--navy-900); font-family: var(--font-head); font-weight: 600; text-decoration: none; } .market-list a .icon:last-child { margin-inline-start: auto; color: var(--gold-600); } .market-list a:hover { border-color: var(--navy-800); } .market-list--compact { display: flex; flex-wrap: wrap; gap: 8px; } .market-list--compact a { padding: 8px 14px; font-size: var(--fs-sm); background: var(--ivory); } /* ---------- Forms ---------- */ .form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 64px); align-items: start; } .form-layout--contact { grid-template-columns: 380px minmax(0, 1fr); } @media (max-width: 1000px) { .form-layout, .form-layout--contact { grid-template-columns: 1fr; } } .form-layout__alt { margin-top: 20px; color: var(--muted); } .form { padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .form__group { border: 0; padding: 0; margin: 0 0 28px; } .form__group legend { font-family: var(--font-head); font-weight: 700; color: var(--navy-900); font-size: var(--fs-h4); margin-bottom: 18px; padding: 0; } .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } @media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } } .field { display: grid; gap: 6px; align-content: start; } .field--full { grid-column: 1 / -1; } .field label, .field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); } .req { color: var(--err); margin-inline-start: 3px; } .field input, .field select, .field textarea, .search-form input { width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--ivory); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; } .field textarea { min-height: 130px; resize: vertical; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b667c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 14px center; padding-inline-end: 42px; } [dir="rtl"] .field select { background-position: left 14px center; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); background: #fff; box-shadow: 0 0 0 4px rgba(17, 51, 122, .1); } [dir="rtl"] .field input[dir="ltr"] { text-align: right; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); background: #fff6f5; } .field__error { margin: 0; min-height: 0; font-size: var(--fs-xs); color: var(--err); } .field__error:empty { display: none; } .choices { display: flex; flex-wrap: wrap; gap: 10px; } .choice { position: relative; } .choice input { position: absolute; opacity: 0; inset: 0; } .choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--ivory); cursor: pointer; font-size: var(--fs-sm); transition: all .2s; } .choice input:checked + span { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .choice input:focus-visible + span { outline: 3px solid var(--gold-400); outline-offset: 2px; } .hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__foot { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding-top: 8px; } .form__privacy { margin: 0; font-size: var(--fs-xs); color: var(--muted); max-width: 46ch; } .form__notice { padding: 16px 20px; border-radius: 12px; margin-bottom: 24px; font-weight: 500; } .form__notice.is-ok { background: #e8f5ee; color: var(--ok); border: 1px solid #bfe3cf; } .form__notice.is-error { background: #fdecea; color: var(--err); border: 1px solid #f6c6c0; } .form.is-sending [data-submit] { opacity: .7; pointer-events: none; } .form.is-done .form__group, .form.is-done .form__grid, .form.is-done .form__foot, .form.is-done .cf-turnstile { display: none; } .form.is-done .form__notice { margin: 0; font-size: var(--fs-lg); padding: 28px; } .cf-turnstile { margin-bottom: 20px; } .contact-card { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); } .contact-card .logo { margin-bottom: 20px; } .contact-card__title { font-size: 1rem; margin: 28px 0 12px; color: var(--muted); } .search-form { display: flex; gap: 10px; margin-bottom: 8px; } /* ---------- Footer ---------- */ .site-footer { position: relative; overflow: hidden; background: var(--navy-950); color: #9fb0cc; padding-top: clamp(56px, 7vw, 88px); font-size: var(--fs-sm); border-top: 1px solid rgba(220, 181, 79, .25); } .site-footer__arc { position: absolute; width: 900px; height: 900px; inset-inline-start: -520px; bottom: -640px; border-radius: 50%; border: 1px solid rgba(220, 181, 79, .25); pointer-events: none; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; } @media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__text { margin: 22px 0 10px; max-width: 42ch; } .site-footer__slogan { color: var(--gold-400); font-family: var(--font-head); font-weight: 600; } .site-footer__title { color: #fff; font-size: 1rem; margin-bottom: 18px; } .footer-menu { list-style: none; display: grid; gap: 10px; } .site-footer a { color: #c3cee2; text-decoration: none; } .site-footer a:hover { color: var(--gold-400); } .contact-list { list-style: none; display: grid; gap: 12px; margin-bottom: 24px; } .contact-list li { display: flex; gap: 12px; align-items: flex-start; } .contact-list .icon { margin-top: 3px; color: var(--gold-400); } .contact-list--lg li { padding-block: 14px; border-bottom: 1px solid var(--line); gap: 16px; margin: 0; } .contact-list--lg .icon { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--navy-800); margin: 0; } .contact-list--lg span { display: grid; } .contact-list--lg small { color: var(--muted); } .contact-list--lg a { color: var(--navy-900); font-weight: 600; text-decoration: none; } .socials { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; } .socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); color: #fff; transition: all .2s; } .socials a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); } .socials .icon { width: 18px; height: 18px; } .socials--nav a, .socials--contact a { border-color: var(--line-2); color: var(--navy-800); } .socials--nav a:hover, .socials--contact a:hover { color: var(--navy-950); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-xs); } .site-footer__bottom p { margin: 0; } .legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; } /* ---------- Misc ---------- */ .wa-float { position: fixed; z-index: 90; inset-block-end: 22px; inset-inline-end: 22px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6); transition: transform .2s var(--ease); } .wa-float:hover { color: #fff; transform: scale(1.08); } .wa-float .icon { width: 30px; height: 30px; } /* WhatsApp chooser (one number per country). */ .wa-float--menu { display: block; width: auto; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; } .wa-float--menu > summary { list-style: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6); cursor: pointer; transition: transform .2s var(--ease); } .wa-float--menu > summary::-webkit-details-marker { display: none; } .wa-float--menu > summary:hover { transform: scale(1.08); } /* Gentle attention cue: a soft beat with a fading ring, plus a short shake every 9s. Off with reduced motion. */ a.wa-float, .wa-float--menu:not([open]) > summary { animation: wa-beat 2.4s ease-in-out infinite, wa-shake 9s ease-in-out 4s infinite; } a.wa-float:hover, .wa-float--menu > summary:hover { animation-play-state: paused; } @keyframes wa-beat { 0%, 100% { transform: scale(1); box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .45); } 50% { transform: scale(1.07); box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6), 0 0 0 14px rgba(37, 211, 102, 0); } } @keyframes wa-shake { 0%, 92%, 100% { rotate: 0deg; } 93% { rotate: -12deg; } 95% { rotate: 10deg; } 97% { rotate: -6deg; } 99% { rotate: 3deg; } } @media (prefers-reduced-motion: reduce) { a.wa-float, .wa-float--menu > summary { animation: none !important; } } .wa-float__panel { position: absolute; inset-block-end: 70px; inset-inline-end: 0; width: min(290px, calc(100vw - 32px)); padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .wa-float__title { margin: 4px 8px 8px; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--navy-900); } .wa-float__panel a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--navy-900); text-decoration: none; } .wa-float__panel a:hover { background: rgba(37, 211, 102, .1); } .wa-float__panel a > span:last-child { display: grid; line-height: 1.35; } .wa-float__panel strong { font-size: .92rem; } .wa-float__panel bdi { font-size: .84rem; color: var(--muted); } .wa-float__panel .flag svg, .contact-list__office .flag svg, .office__head .flag svg { width: 28px; height: auto; border-radius: 4px; } /* Office cards (contact page, market pages) and footer office lines. */ .offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; } .offices--single { grid-template-columns: 1fr; } .office { display: grid; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .office__head { display: flex; align-items: center; gap: 12px; } .office__country { margin: 0; font-size: 1.1rem; } .office__badge { margin-inline-start: auto; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(12, 38, 89, .07); color: var(--muted); white-space: nowrap; } .office__badge--office { background: rgba(199, 154, 44, .14); color: var(--gold-600); } .office__address { display: flex; gap: 10px; margin: 0; color: var(--ink-2); font-size: var(--fs-sm); } .office__address .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--gold-500); } .office__actions { display: flex; flex-wrap: wrap; gap: 8px; } .btn--sm { min-height: 40px; padding: 8px 14px; font-size: .86rem; gap: 8px; } .btn--sm .icon { width: 17px; height: 17px; } .btn--wa { --bg: #25d366; --fg: #fff; --bd: #25d366; } .btn--wa:hover { --bg: #1ebe5a; --fg: #fff; } .btn--ghost { --bg: transparent; --fg: var(--navy-800); --bd: var(--line-2); } .btn--ghost:hover { --bg: rgba(12, 38, 89, .06); } .contact-list__office { align-items: center !important; } .contact-list__office-body { display: grid; line-height: 1.35; } .contact-list__office-body small { opacity: .7; } .contact-list__wa { display: grid; place-items: center; width: 34px; height: 34px; margin-inline-start: auto; border-radius: 50%; background: #25d366; color: #fff; } .contact-list .contact-list__wa .icon { margin: 0; width: 18px; height: 18px; color: #fff; } .empty-state { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 48px 24px; border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .6); color: var(--muted); } .empty-state > .icon { width: 40px; height: 40px; color: var(--gold-500); } .empty-state p { max-width: 56ch; margin: 0; } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .filter-bar a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); } .filter-bar a[aria-current], .filter-bar a:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; } .nav-links .current { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; background: rgba(5, 15, 38, .94); padding: 24px 12px; } .lightbox[hidden] { display: none; } .lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; } .lightbox__figure img { max-height: 82vh; width: auto; border-radius: 8px; box-shadow: var(--shadow-lg); } .lightbox__figure figcaption { color: #dfe6f2; font-size: var(--fs-sm); text-align: center; } .lightbox__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; justify-self: center; } .lightbox__btn:hover { background: rgba(255, 255, 255, .2); } .lightbox__close { position: absolute; top: 16px; inset-inline-end: 16px; } .lightbox__prev .icon { transform: scaleX(-1); } [dir="rtl"] .lightbox__prev .icon { transform: none; } [dir="rtl"] .lightbox__next .icon { transform: scaleX(-1); } @media (max-width: 600px) { .lightbox { grid-template-columns: 44px 1fr 44px; padding-inline: 4px; } .lightbox__btn { width: 40px; height: 40px; } } /* Reveal on scroll (only when JS is running) */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero__arc path { stroke-dashoffset: 0; } } @media print { .site-header, .site-footer, .cta-band, .wa-float, .lightbox { display: none !important; } .page-hero { background: none; color: #000; } .page-hero__title { color: #000; } } /* ========================================================================== Client brief Oct 2026: photo backgrounds, hero film, stats, markets order, flipbook, partners, government entities, packages, DELTA ERP. ========================================================================== */ /* Hero film: poster first, video fades in once it plays; a navy shade keeps the text readable. */ .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__video { opacity: 0; transition: opacity 1.2s ease; } .hero__video.is-playing { opacity: 1; } .hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 18, 46, .58) 0%, rgba(5, 18, 46, .78) 45%, rgba(5, 18, 46, .92) 100%), linear-gradient(0deg, rgba(5, 18, 46, .55), rgba(5, 18, 46, 0) 45%); } [dir="rtl"] .hero__shade { background: linear-gradient(270deg, rgba(5, 18, 46, .58) 0%, rgba(5, 18, 46, .78) 45%, rgba(5, 18, 46, .92) 100%), linear-gradient(0deg, rgba(5, 18, 46, .55), rgba(5, 18, 46, 0) 45%); } .hero__glow { opacity: .55; } .hero .bg-grid { opacity: .35; } @media (max-width: 960px) { .hero__shade, [dir="rtl"] .hero__shade { background: rgba(5, 18, 46, .8); } } /* Page heroes with a photo per page/service. */ .page-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero--photo .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 18, 46, .62), rgba(5, 18, 46, .9)); } [dir="rtl"] .page-hero--photo .page-hero__bg::after { background: linear-gradient(270deg, rgba(5, 18, 46, .62), rgba(5, 18, 46, .9)); } .page-hero--photo .page-hero__bg .arc, .page-hero--photo .page-hero__bg .bg-grid { z-index: 1; } /* Section photo backgrounds. */ .journey--photo, .markets-home--photo { position: relative; isolation: isolate; overflow: hidden; } .section-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .journey--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(250, 248, 243, .93), rgba(250, 248, 243, .88)); } .markets-home--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 27, 64, .9), rgba(5, 18, 46, .94)); } /* Markets: Oman > Saudi Arabia > Egypt > GCC (coming soon). */ .grid--markets { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid--markets { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid--markets { grid-template-columns: 1fr; } } .badge-soon { display: inline-block; margin-inline-start: 6px; padding: 2px 10px; border-radius: 999px; background: var(--gold-grad, #d9b45a); color: var(--navy-950); font-size: .72rem; font-weight: 700; vertical-align: middle; line-height: 1.6; } .hero__markets .badge-soon { font-size: .66rem; padding: 1px 8px; } /* SBS in numbers (count-up). */ .stats-home { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(36px, 5vw, 56px); color: #fff; } .stats-home__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .stats-home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 27, 64, .93), rgba(12, 38, 89, .88)); } .stats { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; } .stat { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 10px 6px; } .stat__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(217, 180, 90, .35); color: var(--gold-400); } .stat__icon .icon { width: 26px; height: 26px; } .stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; color: var(--gold-400); font-variant-numeric: tabular-nums; } .stat__label { font-size: var(--fs-sm); color: #cfd8e8; } @media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Certificates 3D flipbook (StPageFlip): light paper, original logo colours. */ .certs-home { background: linear-gradient(180deg, #f6f6f4, #ecedef); } .flipbook { position: relative; margin-top: 28px; } .flipbook__stage { max-width: 1240px; margin-inline: auto; } .flipbook:not(.is-ready) .flipbook__pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; } .flipbook:not(.is-ready) .fb-page--cover { display: none; } .flipbook__pages { direction: ltr; transition: transform .7s var(--ease); } .fb-closed-first .flipbook__pages { transform: translateX(-25%); } .fb-closed-last .flipbook__pages { transform: translateX(25%); } .fb-page { background: #fbfbfa; overflow: hidden; } .flipbook.is-ready .fb-page { box-shadow: inset 0 0 0 1px rgba(8, 27, 64, .06); } .fb-page--cert { background: linear-gradient(90deg, #f1f1ef, #fbfbfa 9%); } .fb-page--info { background: linear-gradient(270deg, #f1f1ef, #fbfbfa 9%); } [dir="rtl"] .fb-page--info, [dir="rtl"] .fb-page--cert { direction: rtl; } .fb-cover { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(120% 90% at 30% 10%, #ffffff 0%, #eef0f3 55%, #e2e5ea 100%); border: 1px solid #d9dde3; } [dir="rtl"] .fb-cover { direction: rtl; } .fb-cover__logo { width: min(62%, 240px); height: auto; } .fb-cover__title { margin: 6px 0 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.8rem); color: var(--navy-900); } .fb-cover__sub { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); } .fb-cover__hint { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-xs); } .fb-cert { height: 100%; margin: 0; padding: 7% 7% 5%; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .fb-cert__img { position: relative; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 10px rgba(8, 27, 64, .16); aspect-ratio: 3 / 2; background: #e9ebef; } .fb-cert__img img { width: 100%; height: 100%; object-fit: cover; } .fb-cert__zoom { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy-900); } .fb-cert__zoom .icon { width: 17px; height: 17px; } .fb-cert figcaption { display: grid; gap: 2px; } .fb-cert figcaption strong { font-family: var(--font-head); color: var(--navy-900); font-size: clamp(.82rem, 1.3vw, .98rem); line-height: 1.4; } .fb-cert figcaption span { color: var(--muted); font-size: var(--fs-xs); } .fb-info { height: 100%; padding: 8% 8% 6%; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .fb-info__logo { max-height: 56px; width: auto; object-fit: contain; } .fb-info__eyebrow { margin: 0; color: var(--gold-600); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; } .fb-info__name { margin: 0; font-size: clamp(1rem, 1.7vw, 1.3rem); color: var(--navy-900); line-height: 1.4; } .fb-info__facts { display: grid; gap: 6px; margin: 4px 0 0; } .fb-info__facts div { display: flex; gap: 10px; justify-content: space-between; padding-block: 6px; border-bottom: 1px dashed #d8dce3; font-size: var(--fs-sm); } .fb-info__facts dt { color: var(--muted); } .fb-info__facts dd { margin: 0; color: var(--navy-900); font-weight: 600; text-align: end; } .fb-info__bio { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; } .fb-info__note { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs); } .fb-info__note .icon { flex: none; width: 16px; height: 16px; color: var(--gold-500); } .flipbook__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; } .flipbook__nav[hidden] { display: none; } [dir="rtl"] .booklet__btn[data-fb-next] .icon, .booklet__btn[data-fb-prev] .icon { transform: scaleX(-1); } [dir="rtl"] .booklet__btn[data-fb-prev] .icon { transform: none; } .flipbook:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 8px; border-radius: 12px; } /* Partners (own section) and government entities. */ .partners-home .marquee--partners { margin: 8px 0 0; } .gov-home { background: #fff; } .gov-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; } .gov-item { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 170px; padding: 22px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; transition: box-shadow .3s, transform .3s var(--ease); } .gov-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .gov-item img { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; } .gov-item span { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; } .gov-note { margin: 18px auto 0; max-width: 70ch; text-align: center; color: var(--muted); font-size: var(--fs-xs); } /* Team: every member on the home page. */ .team-home .grid--team { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } /* Formation packages. */ .packages__intro { max-width: 760px; margin-bottom: 18px; } .packages__markets { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; } .packages__markets li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--navy-900); } .packages__markets .flag svg { width: 24px; height: auto; border-radius: 3px; } .packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } @media (max-width: 1000px) { .packages__grid { grid-template-columns: 1fr; max-width: 560px; } } .package { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .package .ticks { flex: 1; } .package .btn { align-self: flex-start; } .package--featured { border-color: var(--gold-400); box-shadow: 0 24px 50px -28px rgba(8, 27, 64, .45); background: linear-gradient(180deg, #fffdf6, #fff 40%); } .package__flag { position: absolute; top: -13px; inset-inline-start: 24px; padding: 4px 14px; border-radius: 999px; background: var(--navy-900); color: var(--gold-400); font-size: .75rem; font-weight: 700; } .package__num { font-family: var(--font-head); font-weight: 800; font-size: 1.8rem; color: transparent; -webkit-text-stroke: 1px var(--gold-400); } .package__name { margin: 0; font-size: var(--fs-h3, 1.5rem); } .package__desc { margin: 0; color: var(--muted); } .packages__note { margin-top: 26px; } /* DELTA ERP showcase (accounting systems page). */ .erp { border-top: 1px dashed var(--gold-400); } .erp__head { text-align: center; max-width: 860px; margin: 0 auto 36px; } .erp__partner { display: inline-block; margin-bottom: 14px; padding: 6px 16px; border-radius: 999px; background: #fff8e8; border: 1px solid var(--gold-400); color: var(--gold-600); font-weight: 700; font-size: var(--fs-sm); } .erp__title { direction: inherit; } .erp__core { padding: clamp(20px, 3vw, 34px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .erp__core-list { margin-bottom: 26px; } .erp__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .erp__shots figure { margin: 0; } .erp__shots img, .erp-sector__shot img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 40px -26px rgba(8, 27, 64, .6); } .erp__shots figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: var(--fs-sm); } .erp__sub { margin: 44px 0 18px; } .erp__sectors { display: grid; gap: 28px; } .erp-sector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding-bottom: 28px; border-bottom: 1px dashed var(--line-2); } .erp-sector--alt .erp-sector__shot { order: -1; } .erp-sector__num { color: var(--gold-500); font-family: var(--font-head); font-weight: 700; } .erp-sector__title { margin: 4px 0 2px; font-size: var(--fs-h3, 1.45rem); } .erp-sector__en { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-xs); text-align: start; } [dir="rtl"] .erp-sector__en { text-align: right; } .erp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; } .erp-tags li { padding: 6px 12px; border-radius: 999px; background: #eef2f8; color: var(--navy-800); font-size: var(--fs-xs); font-weight: 600; } .erp-clients { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--navy-900); color: #fff; } .erp-clients p { margin: 0 0 10px; color: var(--gold-400); font-weight: 700; font-size: var(--fs-sm); } .erp-clients ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .erp-clients li { padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); font-size: var(--fs-sm); } .erp__why { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; } .erp-why { padding: 20px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold-400); border-radius: var(--radius-sm); } .erp-why h4 { margin: 0 0 6px; } .erp-why p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); } .erp__cta { margin-top: 40px; padding: clamp(26px, 4vw, 44px); border-radius: var(--radius); background: linear-gradient(135deg, var(--navy-900), #163a86); color: #fff; text-align: center; } .erp__cta h3 { color: #fff; margin: 0 0 8px; } .erp__cta p { color: #cfd8e8; margin: 0 0 18px; } .erp__owner { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: var(--fs-xs); } @media (max-width: 900px) { .erp-sector { grid-template-columns: 1fr; } .erp-sector--alt .erp-sector__shot { order: 0; } .erp__shots { grid-template-columns: 1fr; } } /* Success partners: logo cards with name and a short description. */ .partner-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; margin: 0; padding: 0; } .partner-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .3s, transform .3s var(--ease); } .partner-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .partner-card__logo { display: block; aspect-ratio: 8 / 5; overflow: hidden; border-bottom: 1px solid var(--line); } .partner-card__logo img { width: 100%; height: 100%; object-fit: cover; } .partner-card__body { display: grid; gap: 4px; padding: 14px 16px 16px; } .partner-card__name { font-family: var(--font-head); color: var(--navy-900); font-size: 1rem; } .partner-card__bio { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Booklets section. */ .booklets { display: grid; gap: clamp(36px, 5vw, 60px); margin-top: 8px; } .booklet-block__head { max-width: 720px; margin: 0 auto 6px; text-align: center; } .booklet-block__title { margin: 0 0 6px; font-size: var(--fs-h3, 1.4rem); color: var(--navy-900); } .booklet-block__desc { margin: 0; color: var(--ink-2); } .fb-page--image { display: grid; place-items: center; background: #fff; } .fb-page--image img { width: 100%; height: 100%; object-fit: contain; } /* Government entities and platforms: linked logos, white logos on a navy tile. */ .gov-item { padding: 0; } .gov-item a { display: grid; justify-items: center; align-content: center; gap: 12px; width: 100%; height: 100%; padding: 22px 16px; color: inherit; text-decoration: none; } .gov-item__logo { display: grid; place-items: center; height: 80px; } .gov-item__logo img { max-height: 74px; max-width: 100%; width: auto; object-fit: contain; } .gov-item__name { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; } .gov-item--dark .gov-item__logo { width: 100%; height: 96px; padding: 8px; border-radius: 12px; background: var(--navy-900); } /* ========================================================================== Brief Oct 25: service hero (navy text panel + photo framed by the SBS arrow), website-development landing page, partner carousel, sector photos. ========================================================================== */ .svc-hero { position: relative; padding-block: clamp(26px, 4vw, 52px) clamp(30px, 5vw, 64px); background: linear-gradient(180deg, #f3f5f9, var(--paper, #faf8f3)); overflow: hidden; } .svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(22px, 4vw, 56px); align-items: center; } .svc-hero__text { position: relative; z-index: 1; padding: clamp(26px, 4vw, 52px); border-radius: 26px; color: #d6deec; background: radial-gradient(140% 120% at 85% 0%, #1d4596 0%, #0f2d6b 42%, #091d47 100%); box-shadow: 0 30px 60px -36px rgba(8, 27, 64, .75); } .svc-hero__text::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%); } .svc-hero__text .breadcrumbs, .svc-hero__text .breadcrumbs a { color: #a9b7d0; } .svc-hero__title { margin: 6px 0 12px; color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.2; } .svc-hero__title .hl { color: var(--gold-400); font-style: normal; } .svc-hero__intro { margin: 0 0 22px; font-size: var(--fs-lg, 1.1rem); line-height: 1.8; color: #cfd8e8; max-width: 56ch; } .svc-hero__visual { position: relative; } .svc-hero__art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 26px 40px rgba(8, 27, 64, .28)); } /* The arrow is always visible (no draw-in), so it never depends on animation support. */ @media (max-width: 900px) { .svc-hero__inner { grid-template-columns: 1fr; } .svc-hero__visual { max-width: 560px; margin-inline: auto; width: 100%; } } /* Draft sections (visible to logged-in editors only). */ .is-draft { position: relative; outline: 2px dashed #e0a800; outline-offset: -10px; } .draft-badge { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: #fff4cc; color: #7a5a00; font-size: .8rem; font-weight: 700; } /* Website development landing page. */ .web-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-bottom: clamp(30px, 4vw, 48px); } .web-intro__media { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -38px rgba(8, 27, 64, .7); aspect-ratio: 4 / 3; } .web-intro__img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .web-intro__grid { grid-template-columns: 1fr; } } .web-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #0f2d6b, #1d4596); color: var(--gold-400); box-shadow: 0 12px 24px -14px rgba(8, 27, 64, .7); } .web-icon .icon { width: 25px; height: 25px; } .web-icon--gold { background: linear-gradient(135deg, #d9b45a, #f2d27c); color: var(--navy-900); } .web-value { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; } .web-value__item { padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; transition: transform .3s var(--ease), box-shadow .3s; } .web-value__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .web-value__item h3 { margin: 14px 0 6px; font-size: 1.05rem; } .web-value__item p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; } @media (max-width: 1000px) { .web-value { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .web-value { grid-template-columns: 1fr; } } .web-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; } .web-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .web-card { position: relative; padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .web-card::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--gold-grad, #d9b45a); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .web-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .web-card:hover::after { transform: scaleX(1); } .web-card h3 { margin: 14px 0 6px; font-size: 1.05rem; } .web-card p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; } .web-feats__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; } .web-feats__grid li { display: grid; gap: 8px; align-content: start; padding: 26px 22px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); } .web-feats__grid strong { color: var(--navy-900); font-family: var(--font-head); } .web-feats__grid span:last-child { color: var(--ink-2); font-size: var(--fs-sm); } @media (max-width: 1000px) { .web-feats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .web-feats__grid { grid-template-columns: 1fr; } } .web-timeline { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin: 10px 0 0; padding: 0; counter-reset: s; position: relative; } .web-timeline::before { content: ""; position: absolute; top: 26px; inset-inline: 6%; height: 2px; background: linear-gradient(90deg, rgba(217, 180, 90, .2), #d9b45a, rgba(217, 180, 90, .2)); } .web-timeline li { position: relative; text-align: center; } .web-timeline__num { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy-950, #06122e); border: 2px solid var(--gold-400); color: var(--gold-400); font-family: var(--font-head); font-weight: 800; } .web-timeline h3 { margin: 12px 0 4px; color: #fff; font-size: .98rem; } .web-timeline p { margin: 0; color: #b9c5da; font-size: var(--fs-xs); line-height: 1.6; } @media (max-width: 1000px) { .web-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } .web-timeline::before { display: none; } } .web-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; } .web-project { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; } .web-project img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .web-project > div { padding: 16px 18px; } .web-project--placeholder { display: grid; place-items: center; min-height: 220px; padding: 20px; color: var(--muted); text-align: center; background: repeating-linear-gradient(135deg, #f6f7fa 0 12px, #eef1f6 12px 24px); } .web-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: start; } @media (max-width: 900px) { .web-faq__grid { grid-template-columns: 1fr; } } .web-faq__draft { margin-top: 16px; padding: 18px; } .web-final { padding-block: clamp(40px, 6vw, 72px); background: radial-gradient(120% 140% at 85% 0%, #1d4596 0%, #0c2659 45%, #06122e 100%); color: #cfd8e8; text-align: center; } .web-final h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.4rem); } .web-final h2 .hl { color: var(--gold-400); font-style: normal; } .web-final p { margin: 0 auto 22px; max-width: 60ch; } .web-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* Partner carousel. */ .partner-carousel { position: relative; display: flex; align-items: center; gap: 10px; } .partner-carousel__track { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 14px; scroll-behavior: auto; -webkit-overflow-scrolling: touch; cursor: grab; } .partner-carousel__track::-webkit-scrollbar { display: none; } .partner-carousel__track .partner-card { flex: 0 0 clamp(210px, 22vw, 260px); } .partner-carousel__btn { flex: none; } [dir="rtl"] .partner-carousel__btn[data-car-next] .icon, .partner-carousel__btn[data-car-prev] .icon { transform: scaleX(-1); } [dir="rtl"] .partner-carousel__btn[data-car-prev] .icon { transform: none; } @media (max-width: 640px) { .partner-carousel__btn { display: none; } }