/* ========================================================================== GPS Solar — v4 Every token below can be overridden from Appearance → Customize → تصميم GPS. Calm iOS-like system: white + soft tint, layered glass, 16px corners. Brand: Blue #1D56A5 · Sky #5A8AD8 · Sun #F4A51C (sparingly) · Leaf #5BA244 Type: IBM Plex Sans Arabic (Arabic) · Inter (English & numbers) ========================================================================== */ :root { --blue: #1D56A5; --blue-d: #174A91; --sky: #5A8AD8; --ice: #EAF1FC; --sun: #F4A51C; --leaf: #5BA244; --wa: #1DAA58; --ink: #0F1E36; --text: #33425A; --muted: #6B7A90; --bg: #FFFFFF; --tint: #F5F7FA; --line: rgba(15, 30, 54, .08); --line-2: rgba(15, 30, 54, .12); --glass: rgba(255, 255, 255, .62); --glass-b: rgba(255, 255, 255, .75); --glass-blur: saturate(180%) blur(22px); --shadow-s: 0 1px 2px rgba(15, 30, 54, .05); --shadow: 0 1px 2px rgba(15, 30, 54, .04), 0 14px 36px -18px rgba(15, 30, 54, .28); --r: 16px; --r-sm: 12px; --font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --font-en: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; --num: "Inter", system-ui, sans-serif; --font: var(--font-ar); --wrap: 1160px; --gutter: clamp(16px, 4vw, 32px); --sec: clamp(56px, 7vw, 88px); --header-h: 64px; --ease: cubic-bezier(.3, .7, .2, 1); } html[lang="en"] { --font: var(--font-en); } .gps a, .gps button { -webkit-tap-highlight-color: transparent; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } } body.gps { margin: 0; padding-top: var(--header-h); font-family: var(--font); font-size: var(--fs-body, 15.5px); line-height: 1.75; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[lang="en"] body.gps { line-height: 1.6; font-size: calc(var(--fs-body, 15.5px) - .5px); } .gps img { max-width: 100%; height: auto; display: block; } .gps a { color: var(--blue); text-decoration: none; } .gps h1, .gps h2, .gps h3, .gps h4 { color: var(--ink); margin: 0; font-weight: var(--fw-head, 600); line-height: 1.35; text-wrap: balance; } html[lang="en"] .gps h1, html[lang="en"] .gps h2 { letter-spacing: -.02em; line-height: 1.15; } .gps p { margin: 0; } .gps :focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 8px; } .gps [hidden] { display: none !important; } .gps-hp { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .screen-reader-text:focus { clip-path: none; width: auto; height: auto; top: 8px; inset-inline-start: 8px; z-index: 999; background: #fff; padding: 8px 14px; border-radius: 10px; } .gps-ico { flex: none; } [dir="ltr"] .gps-ico-chev { transform: scaleX(-1); } [dir="ltr"] [data-scroll="prev"] .gps-ico-chev, [dir="ltr"] .gps-btn--back .gps-ico-chev { transform: none; } [dir="rtl"] [data-scroll="prev"] .gps-ico-chev, [dir="rtl"] .gps-btn--back .gps-ico-chev { transform: scaleX(-1); } b, strong { font-weight: 600; } .gps-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .gps-sec { padding-block: var(--sec); } .gps-sec--tight { padding-block: calc(var(--sec) * .55); } .gps-sec--tint { background: var(--tint); } .gps-center { text-align: center; margin-top: 28px; } .gps-muted { color: var(--muted); font-size: 13.5px; } .gps-note { color: var(--muted); font-size: 12.5px; text-align: center; max-width: 640px; margin: 16px auto 0 !important; } .gps-empty { color: var(--muted); text-align: center; padding: 32px 16px; } /* ---------- type ---------- */ .gps-kicker { color: var(--blue); font-size: 13px; font-weight: 500; margin-bottom: 8px !important; } .gps-h2 { font-size: clamp(22px, 2.6vw, var(--fs-h2, 32px)); } .gps-h3 { font-size: 18px; } .gps-h4 { font-size: 15px; } .gps-lead { color: var(--muted); font-size: 16px; max-width: 60ch; margin-top: 8px !important; } .gps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .gps-head--center { justify-content: center; text-align: center; } .gps-head--center .gps-lead { margin-inline: auto; } /* ---------- surfaces ---------- */ .gps-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-s); } .gps-glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-b); box-shadow: var(--shadow); } .gps-glass-dark { background: rgba(10, 22, 42, .30); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); color: #fff; } .gps-glass-panel { background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(15,30,54,.06), 0 24px 48px -16px rgba(15,30,54,.32); border-radius: var(--r); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gps-glass, .gps-glass-panel { background: rgba(255,255,255,.96); } .gps-glass-dark { background: rgba(10,22,42,.7); } } /* ---------- buttons ---------- */ .gps-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--r-btn, var(--r-sm)); border: 0; font: 500 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .12s, opacity .2s; text-decoration: none; } .gps-btn:active { transform: scale(.98); } .gps-btn[disabled] { opacity: .45; cursor: not-allowed; } .gps-btn--primary { background: var(--blue); color: #fff !important; box-shadow: 0 1px 2px rgba(29,86,165,.3), inset 0 1px 0 rgba(255,255,255,.14); } .gps-btn--primary:not([disabled]):hover { background: var(--blue-d); } .gps-btn--soft { background: rgba(15,30,54,.05); color: var(--ink) !important; } .gps-btn--soft:hover { background: rgba(15,30,54,.08); } .gps-btn--back { background: #fff; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); padding-inline: 14px 18px; } .gps-btn--back:hover { background: var(--tint); } .gps-btn--wa { background: var(--wa); color: #fff !important; } .gps-btn--wa:hover { background: #17924B; } .gps-btn--block { width: 100%; } /* Glass buttons over imagery */ .gps-btn--glass-blue { height: 48px; padding: 0 22px; color: #fff !important; background: linear-gradient(180deg, rgba(43,107,196,.82), rgba(29,86,165,.82)); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px -12px rgba(10,30,70,.7); } .gps-btn--glass-blue:hover { background: linear-gradient(180deg, rgba(43,107,196,.92), rgba(29,86,165,.92)); } .gps-btn--glass-light { height: 48px; padding: 0 22px; color: #fff !important; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.28); } .gps-btn--glass-light:hover { background: rgba(255,255,255,.24); } /* Glass button on light backgrounds */ .gps-btn--glass-solid { height: 48px; padding: 0 18px; color: var(--ink) !important; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(15,30,54,.08), 0 8px 24px -14px rgba(15,30,54,.4); } .gps-btn--glass-solid:hover { background: #fff; } .gps-round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-grid; place-items: center; background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, opacity .2s; flex: none; } .gps-round:hover { background: var(--tint); } .gps-round:disabled { opacity: .35; cursor: default; } .gps-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gps-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--tint); color: var(--text) !important; font: 500 13px var(--font); border: 0; cursor: default; } button.gps-chip, a.gps-chip { cursor: pointer; } button.gps-chip:hover { background: var(--ice); } .gps-chip.is-on { background: var(--blue); color: #fff !important; } .gps-chip--blue { background: var(--blue); color: #fff !important; } .gps-chip--sun { background: #FEF3DE; color: #8A5A00 !important; } .gps-chips--num .gps-chip { font-family: var(--num); } /* ---------- header ---------- */ .gps-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; } .gps-header.is-scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.82); } .admin-bar .gps-header { top: 32px; } @media (max-width: 782px) { .admin-bar .gps-header { top: 46px; } } .gps-brand img { height: var(--logo-h, 40px); width: auto; } /* ---------- hero banner ---------- */ .gps-hero { padding-top: 12px; } .gps-hero__banner { position: relative; border-radius: var(--r); overflow: hidden; min-height: clamp(520px, 74vh, 660px); display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; background: var(--ink); } .gps .gps-hero__img, .gps .gps-sector__banner > img, .gps .gps-sector-link img { height: 100%; } .gps-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .gps-hero__shade { position: absolute; inset: 0; z-index: -1; opacity: calc(var(--hero-shade, .55) / .55); --side: 90deg; background: linear-gradient(var(--side), rgba(8,20,40,.55) 0%, rgba(8,20,40,0) 62%), linear-gradient(180deg, rgba(8,20,40,.1) 0%, rgba(8,20,40,.3) 45%, rgba(8,20,40,.8) 100%); } [dir="rtl"] .gps-hero__shade { --side: 270deg; } .gps-hero__content { padding: clamp(28px, 5vw, 56px); padding-bottom: 0; max-width: 680px; margin-top: auto; } .gps-hero__kicker { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font: 500 12.5px var(--num); margin-bottom: 16px !important; direction: ltr; } .gps-hero__kicker .gps-ico { color: var(--sun); } .gps-hero__title { color: #fff !important; font-size: clamp(30px, 4.8vw, var(--fs-hero, 52px)); font-weight: var(--fw-head, 600); } .gps-hero__sub { color: rgba(255,255,255,.86); font-size: clamp(15px, 1.4vw, 17px); max-width: 52ch; margin-top: 14px !important; } .gps-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .gps-hero__stats { list-style: none; margin: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px); padding: 16px 8px; border-radius: 14px; display: grid; grid-template-columns: repeat(3, 1fr); } .gps-hero__stats li { display: grid; justify-items: center; text-align: center; gap: 2px; padding-inline: 8px; } .gps-hero__stats li + li { border-inline-start: 1px solid rgba(255,255,255,.18); } .gps-hero__stats b { font: 600 clamp(22px, 2.6vw, 32px)/1.15 var(--num); color: #fff; direction: ltr; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .gps-hero__stats li > span { font-size: 13px; color: rgba(255,255,255,.78); } @media (max-width: 640px) { .gps-hero__banner { min-height: 0; } .gps-hero__stats li > span { font-size: 11.5px; } .gps-hero__content { padding: 88px 20px 0; } .gps-hero__actions .gps-btn { flex: 1 1 auto; } .gps-hero__stats { margin: 24px 12px 12px; padding: 12px 4px; } } /* ---------- intro: about + services ---------- */ .gps-intro { position: relative; isolation: isolate; overflow: hidden; } .gps-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 15% 30%, rgba(90,138,216,.22), transparent 70%), radial-gradient(35% 55% at 85% 70%, rgba(244,165,28,.14), transparent 70%), radial-gradient(30% 50% at 60% 10%, rgba(91,162,68,.10), transparent 70%); } .gps-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gps-gcard { background: rgba(255,255,255,.58); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(15,30,54,.04); border-radius: var(--r); padding: clamp(18px, 2.4vw, 24px); display: grid; align-content: start; gap: 8px; } .gps-gcard__text { color: var(--text); font-size: 14.5px; } .gps-vm { margin: 6px 0 0; display: grid; gap: 8px; } .gps-vm div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); } .gps-vm dt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 13.5px; white-space: nowrap; } .gps-vm dt .gps-ico { color: var(--blue); } .gps-vm dd { margin: 0; color: var(--muted); font-size: 13.5px; } .gps-svcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .gps-svcs li { border-radius: 14px; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.04); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .gps-svcs li:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15,30,54,.05), 0 14px 28px -20px rgba(15,30,54,.35); } .gps-svcs__in { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; padding: 12px; color: inherit !important; height: 100%; } .gps .gps-svcs__ico3d { grid-row: span 2; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(15,30,54,.16)); transition: transform .5s var(--ease); } .gps-svcs li:hover .gps-svcs__ico3d { transform: translateY(-3px) rotate(-4deg) scale(1.04); } .gps-svcs b { font-size: 14px; color: var(--ink); line-height: 1.4; align-self: end; } .gps-svcs small { font-size: 12.5px; color: var(--muted); line-height: 1.5; align-self: start; } .gps .gps-intro__logo { height: 44px; width: auto; margin-bottom: 6px; } @media (max-width: 860px) { .gps-intro__grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .gps-svcs { grid-template-columns: 1fr; } } /* ---------- glass segmented control with liquid indicator ---------- */ .gps-seg { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; isolation: isolate; } .gps-seg::-webkit-scrollbar { display: none; } .gps-seg__blob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,30,54,.08), 0 3px 10px -4px rgba(15,30,54,.16), inset 0 0 0 .5px rgba(15,30,54,.04); pointer-events: none; will-change: left, width, transform; } .gps .gps-seg__btn:focus { outline: none; } .gps .gps-seg__btn:focus-visible { outline: none; color: var(--ink) !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(15,30,54,.25); } .gps-seg__btn { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; position: relative; z-index: 1; flex: none; height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--muted) !important; font: 500 13.5px/34px var(--font); cursor: pointer; transition: color .25s; } .gps-seg__btn:hover, .gps-seg__btn.is-active { color: var(--ink) !important; } /* ---------- projects ---------- */ .gps-carousel__nav { display: flex; gap: 8px; flex: none; } .gps-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 8px; scrollbar-width: none; overscroll-behavior-x: contain; } .gps-carousel::-webkit-scrollbar { display: none; } .gps-carousel > * { scroll-snap-align: start; } @media (max-width: 520px) { .gps-carousel { grid-auto-columns: 78%; } .gps-carousel__nav { display: none; } } .gps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .gps-pcard { min-width: 0; } .gps-pcard.is-in { animation: gps-cardin .4s var(--ease) both; } @keyframes gps-cardin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .gps-pcard__link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: inherit !important; transition: box-shadow .25s; } .gps-pcard__link:hover { box-shadow: var(--shadow); } .gps-pcard__media { position: relative; aspect-ratio: 4/3; background: var(--tint); overflow: hidden; max-width: 100%; } .gps-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .gps-pcard__link:hover .gps-pcard__media img { transform: scale(1.03); } .gps-pcard__ph { display: grid; place-items: center; height: 100%; color: var(--sky); } .gps-pcard__cap, .gps-pcard__flag { position: absolute; top: 10px; height: 28px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font: 500 12.5px var(--num); color: var(--ink); } .gps-pcard__cap { inset-inline-start: 10px; direction: ltr; } .gps-pcard__flag { inset-inline-end: 10px; font-family: var(--font); font-size: 12px; } .gps-pcard__body { padding: 12px 14px 14px; display: grid; gap: 3px; flex: 1; align-content: start; } .gps-pcard__cat { font-size: 12px; color: var(--blue); font-weight: 500; } .gps-pcard__title { font-size: 15px; font-weight: 600; line-height: 1.4; } .gps-pcard__place { display: flex; gap: 4px; align-items: center; color: var(--muted); font-size: 13px; } .gps-pcard__facts { margin: 10px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .gps-pcard__facts div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 12.5px; } .gps-pcard__facts div + div { border-top: 1px solid var(--line); } .gps-pcard__facts dt { color: var(--muted); } .gps-pcard__facts dd { margin: 0; color: var(--ink); font: 500 12.5px var(--num); } .gps-pcard__more { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-size: 13px; font-weight: 500; } /* ---------- calculator ---------- */ .gps-calc { max-width: 900px; margin-inline: auto; display: grid; grid-template-columns: 230px 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .gps-calc__side { background: var(--tint); border-inline-end: 1px solid var(--line); padding: 24px 18px; } .gps-stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; } .gps-stepper li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 6px; border-radius: 12px; transition: background .2s; } .gps-stepper li + li::before { content: ""; position: absolute; inset-inline-start: 19px; top: -10px; height: 16px; width: 2px; background: var(--line-2); border-radius: 2px; } .gps-stepper li.is-done + li::before, .gps-stepper li.is-done::before { background: var(--blue); } .gps-stepper__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted); font: 600 12.5px var(--num); transition: background .25s, color .25s, box-shadow .25s; } .gps-stepper__n .gps-ico { display: none; } .gps-stepper li.is-active { background: #fff; box-shadow: var(--shadow-s); } .gps-stepper li.is-active .gps-stepper__n { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(29,86,165,.14); } .gps-stepper li.is-done .gps-stepper__n { background: var(--blue); color: #fff; box-shadow: none; } .gps-stepper li.is-done .gps-stepper__n span { display: none; } .gps-stepper li.is-done .gps-stepper__n .gps-ico { display: block; } .gps-stepper__t { display: grid; align-content: center; min-width: 0; } .gps-stepper__t b { font-size: 13.5px; color: var(--muted); font-weight: 500; line-height: 1.4; } .gps-stepper li.is-active .gps-stepper__t b, .gps-stepper li.is-done .gps-stepper__t b { color: var(--ink); } .gps-stepper__t small { font: 500 12px var(--font); color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gps-stepper__t small:empty { display: none; } .gps-calc__main { padding: clamp(20px, 3vw, 32px); min-width: 0; display: grid; } .gps-calc__form { display: grid; align-content: start; min-height: 360px; } .gps-calc__count { color: var(--muted); font: 500 12.5px var(--font); margin-bottom: 6px !important; } .gps-calc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .gps-calc__step { display: none; } .gps-calc__step.is-active { display: grid; gap: 14px; animation: gps-in .3s var(--ease); } @keyframes gps-in { from { opacity: 0; transform: translateX(var(--in-x, 10px)); } to { opacity: 1; transform: none; } } [dir="rtl"] .gps-calc__step.is-active { --in-x: -10px; } .gps-calc__q { font-size: clamp(18px, 2vw, 21px); font-weight: 600; color: var(--ink); padding: 0; line-height: 1.4; } .gps-calc__hint { color: var(--muted); font-size: 13.5px; margin-top: -6px !important; max-width: 56ch; } .gps-calc__eg { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; } .gps-calc__types { display: grid; gap: 8px; } .gps-type { position: relative; display: block; } .gps-type input { position: absolute; opacity: 0; pointer-events: none; } .gps-type__card { display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; } .gps-type__card:hover { border-color: var(--sky); } .gps-type__ico { width: 40px; height: 40px; border-radius: 11px; background: var(--tint); color: var(--ink); display: grid; place-items: center; transition: background .2s, color .2s; } .gps-type__txt { display: grid; gap: 1px; } .gps-type__txt b { color: var(--ink); font-size: 14.5px; } .gps-type__txt small { color: var(--muted); font-size: 12.5px; line-height: 1.5; } .gps-type__radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, background .2s; } .gps-type input:checked + .gps-type__card { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: #F7FAFF; } .gps-type input:checked + .gps-type__card .gps-type__ico { background: var(--blue); color: #fff; } .gps-type input:checked + .gps-type__card .gps-type__radio { background: var(--blue); box-shadow: inset 0 0 0 6px var(--blue), inset 0 0 0 11px #fff; } .gps-type input:focus-visible + .gps-type__card { outline: 2px solid var(--sky); outline-offset: 2px; } .gps-amount { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--r-sm); background: #fff; border: 1.5px solid var(--line-2); transition: border-color .2s, box-shadow .2s; } .gps-amount:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(29,86,165,.12); } .gps-amount.is-invalid { border-color: #E4504A; box-shadow: 0 0 0 4px rgba(228,80,74,.12); } .gps .gps-amount input { flex: 1; min-width: 0; width: 100%; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; padding: 14px 0; font: 600 20px/1.4 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; text-align: start; } [dir="rtl"] .gps-amount input { text-align: right; } .gps-amount input::placeholder { color: #C6CFDB; } .gps .gps-amount input:focus-visible { outline: none; } .gps-amount__unit { flex: none; display: grid; text-align: end; color: var(--ink); font-weight: 500; font-size: 14px; line-height: 1.3; } .gps-amount__unit small { color: var(--muted); font-weight: 400; font-size: 12px; } .gps-calc__privacy { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; } .gps-calc__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .gps-calc__nav [data-next], .gps-calc__nav [data-submit] { margin-inline-start: auto; min-width: 150px; } .gps-calc__err { color: #B42318; font-size: 13.5px; margin-top: 12px !important; } @media (max-width: 760px) { .gps-calc { grid-template-columns: 1fr; } .gps-calc__side { border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 12px; } .gps-stepper { grid-template-columns: repeat(4, 1fr); gap: 4px; } .gps-stepper li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; padding: 6px 2px; } .gps-stepper li + li::before { inset-inline-start: calc(-50% + 18px); top: 19px; width: calc(100% - 36px); height: 2px; } .gps-stepper li.is-active { background: transparent; box-shadow: none; } .gps-stepper__t b { font-size: 11.5px; } .gps-stepper__t small { display: none; } .gps-calc__form { min-height: 0; } .gps-amount { min-height: 54px; padding: 0 14px; } .gps .gps-amount input { font-size: 18px; } } /* fields */ .gps-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gps-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); } .gps-field--full { grid-column: 1 / -1; } .gps-field input, .gps-field select, .gps-field textarea { width: 100%; font: 400 15px var(--font); color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 14px; min-height: 46px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .gps-field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 34px; } [dir="rtl"] .gps-field select { background-position: 13px 50%, 18px 50%; } .gps-field input:focus, .gps-field select:focus, .gps-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(29,86,165,.12); } .gps-field .is-invalid, .gps-field input.is-invalid { border-color: #E4504A; } @media (max-width: 560px) { .gps-fields { grid-template-columns: 1fr; } } /* result */ .gps-res { display: grid; gap: 14px; } .gps-res__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .gps-res__head h3 { font-size: 19px; } .gps-res__head span { color: var(--muted); font-size: 13px; } .gps-res__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; } .gps-res__cost { position: relative; overflow: hidden; border-radius: var(--r); padding: 20px; color: #fff; background: linear-gradient(140deg, var(--blue) 0%, #2B6BC4 100%); display: grid; align-content: space-between; gap: 18px; } .gps-res__cost::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; inset-inline-end: -60px; top: -80px; background: radial-gradient(circle, rgba(244,165,28,.35), transparent 70%); } .gps-res__cost small { color: rgba(255,255,255,.78); font-size: 13px; } .gps-res__cost b { display: block; font: 600 clamp(22px, 3vw, 30px)/1.2 var(--num); direction: ltr; text-align: start; margin-top: 4px; } [dir="rtl"] .gps-res__cost b { text-align: right; } .gps-res__cost span { color: rgba(255,255,255,.82); font-size: 12.5px; } .gps-res__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .gps-kpi { background: var(--tint); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 2px; align-content: center; } .gps-kpi span { color: var(--muted); font-size: 12.5px; } .gps-kpi b { font: 600 19px/1.3 var(--num); color: var(--ink); } .gps-kpi b small { font-size: 12px; font-weight: 500; color: var(--muted); font-family: var(--font); } .gps-res__bar { display: grid; gap: 6px; } .gps-res__bar-lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } .gps-res__bar-lbl b { color: var(--ink); font-family: var(--num); } .gps-res__bar-track { height: 6px; border-radius: 6px; background: var(--tint); overflow: hidden; } .gps-res__bar-track span { display: block; height: 100%; width: 0; background: var(--leaf); border-radius: 6px; transition: width 1s var(--ease); } .gps-res__warn { background: #FEF7E8; color: #7A5200; border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px; } .gps-res__sketch { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .gps-res__sketch-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; } .gps-res__sketch-head b { color: var(--ink); } .gps-res__sketch-head span { color: var(--muted); font-size: 12.5px; } .gps-res__sketch svg { display: block; width: 100%; height: auto; background: #FBFCFE; } .gps-res__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .gps-res__specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .gps-res__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .gps-res__again { justify-self: center; display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 700px) { .gps-res__top { grid-template-columns: 1fr; } .gps-res__specs { grid-template-columns: 1fr 1fr; } .gps-res__actions { grid-template-columns: 1fr; } } /* ---------- dropdowns (visit / call) ---------- */ .gps-drop { position: relative; display: inline-block; } /* Caret: points down when closed, flips up when open (both languages). */ .gps-drop__caret { display: inline-grid; transition: transform .3s var(--ease); transform: rotate(-90deg); } .gps-drop__caret .gps-ico-chev { transform: none !important; } .gps-drop [aria-expanded="true"] .gps-drop__caret { transform: rotate(90deg); } .gps-drop__panel { position: absolute; z-index: 80; top: calc(100% + 10px); left: 50%; width: min(400px, calc(100vw - 32px)); padding: 18px; text-align: start; transform: translateX(-50%); transform-origin: top center; animation: gps-drop .26s var(--ease); display: grid; gap: 10px; } .gps-drop--up .gps-drop__panel { top: auto; bottom: calc(100% + 14px); transform-origin: bottom center; animation-name: gps-dropup; } .gps-drop__panel--sm { width: min(320px, calc(100vw - 32px)); } @keyframes gps-drop { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } } @keyframes gps-dropup { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } } .gps-drop__title { font-weight: 600; color: var(--ink); font-size: 15px; } .gps-callrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(15,30,54,.04); } .gps-callrow b { font: 600 16px var(--num); color: var(--ink); } .gps-callrow__acts { display: flex; gap: 6px; } .gps-visit { text-align: center; padding-block: 8px 48px; } .gps-insp { display: grid; gap: 12px; } .gps-insp__msg { font-size: 13.5px; padding: 12px 14px; border-radius: var(--r-sm); background: #EEF8EA; color: #2D5A1F; } .gps-insp__msg a { font-weight: 500; } .gps-insp__msg.is-error { background: #FFF1F0; color: #8E2A1F; } /* ---------- project page ---------- */ .gps-phead { padding-top: clamp(24px, 4vw, 40px); } .gps-phead--archive { padding-bottom: 8px; } .gps-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .gps-crumbs a { color: var(--muted) !important; } .gps-crumbs a:hover { color: var(--ink) !important; } .gps-phead__title { font-size: clamp(26px, 3.4vw, 40px); } .gps-chips--meta { margin-top: 14px; } .gps-phead__media { margin: 24px 0 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/7; background: var(--tint); max-width: 100%; } .gps-phead__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 640px) { .gps-phead__media { aspect-ratio: 4/3; } } .gps-phead--archive + .gps-projects { padding-top: 28px; } .gps-pbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 40px); padding-block: 28px var(--sec); align-items: start; } .gps-pbody__side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 12px; } @media (max-width: 920px) { .gps-pbody { grid-template-columns: 1fr; } .gps-pbody__side { position: static; } } .gps-pstats { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .gps-pstats li { padding: 14px; display: grid; gap: 2px; } .gps-pstats__ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ice); color: var(--blue); margin-bottom: 6px; } .gps-pstats__label { color: var(--muted); font-size: 12.5px; } .gps-pstats b { font: 600 19px/1.3 var(--num); color: var(--ink); } .gps-pstats b small { font: 500 12px var(--font); color: var(--muted); } .gps-pblock { display: grid; gap: 12px; margin-top: 32px; } .gps-pblock:first-of-type { margin-top: 0; } .gps-prose { max-width: 68ch; font-size: 15.5px; } .gps-prose p + p { margin-top: 1em; } .gps-pmedia { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); } .gps-pmedia img { width: 100%; } .gps-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gps-gallery a { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4/3; display: block; } .gps-gallery img { width: 100%; height: 100%; object-fit: cover; } .gps-video { position: relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; max-width: 100%; } .gps-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .gps-spec { padding: 18px; } .gps-spec dl { margin: 10px 0 0; } .gps-spec dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13.5px; } .gps-spec dl div + div { border-top: 1px solid var(--line); } .gps-spec dt { color: var(--muted); } .gps-spec dd { margin: 0; color: var(--ink); font-weight: 500; text-align: end; } .gps-spec .gps-link { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; } .gps-want { padding: 18px; display: grid; gap: 10px; } .gps-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,30,54,.85); display: grid; place-items: center; padding: 20px; cursor: zoom-out; } .gps-lightbox img { max-height: 90vh; border-radius: var(--r); } /* ---------- sector pages ---------- */ .gps-sector { --accent: var(--blue); } .gps-sector__head { padding-top: clamp(20px, 3vw, 32px); } .gps-sector__banner { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); min-height: clamp(320px, 46vh, 440px); display: flex; flex-direction: column; justify-content: flex-end; background: var(--ink); } .gps-sector__banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .gps-sector__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--accent) 55%, #08142a) 100%); opacity: .92; } .gps-sector__copy { padding: clamp(20px, 4vw, 40px); padding-bottom: 16px; max-width: 640px; color: #fff; } .gps-sector__title { color: #fff !important; font-size: clamp(30px, 4vw, 46px); } .gps-sector__copy p { color: rgba(255,255,255,.88); margin-top: 8px !important; } .gps-sector__stats { list-style: none; margin: 0 clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px); padding: 12px 8px; border-radius: 14px; display: grid; grid-template-columns: repeat(2, 1fr); max-width: 420px; } .gps-sector__stats li { display: grid; justify-items: center; text-align: center; } .gps-sector__stats li + li { border-inline-start: 1px solid rgba(255,255,255,.18); } .gps-sector__stats b { font: 600 24px/1.2 var(--num); color: #fff; } .gps-sector__stats b small { font-size: 13px; font-weight: 500; } .gps-sector__stats li > span { color: rgba(255,255,255,.78); font-size: 12.5px; } .gps-sector .gps-seg__blob { background: #fff; } .gps-sector .gps-pcard__cat, .gps-sector .gps-pcard__more { color: var(--accent); } .gps-sector__others .gps-h3 { margin-bottom: 14px; } .gps-sector-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .gps-sector-link { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; height: 120px; border-radius: var(--r); color: #fff !important; } .gps-sector-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; } .gps-sector-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--accent) 60%, #08142a) 100%); } .gps-sector-link:hover img { transform: scale(1.05); } .gps-sector-link span { display: grid; padding: 12px 14px; } .gps-sector-link b { font-size: 15px; } .gps-sector-link small { font-size: 12px; opacity: .85; } /* ---------- footer ---------- */ .gps-footer { background: var(--tint); border-top: 1px solid var(--line); padding-top: 48px; font-size: 13.5px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .gps-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; padding-bottom: 32px; } .gps-footer__brand img { height: 36px; width: auto; margin-bottom: 14px; } .gps-footer__brand p { color: var(--muted); max-width: 36ch; } .gps-footer__social { display: flex; gap: 6px; margin-top: 16px; } .gps-footer__social { gap: 8px; } .gps-footer__social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s; } .gps-footer__social a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(15,30,54,.35); } .gps-footer__social svg { display: block; } .gps-footer h3 { font-size: 13.5px; margin-bottom: 12px; } .gps-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .gps-footer ul a, .gps-footer ul span { color: var(--muted) !important; } .gps-footer ul a:hover { color: var(--ink) !important; } .gps-footer__contact li { display: flex; align-items: center; gap: 8px; } .gps-footer__contact .gps-ico { color: var(--blue); } .gps-footer__contact a[dir="ltr"] { font-family: var(--num); } .gps-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; } .gps-footer__lang { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink) !important; font-size: 13px; } @media (max-width: 860px) { .gps-footer__grid { grid-template-columns: 1fr 1fr; } .gps-footer__brand { grid-column: 1 / -1; } } @media (max-width: 460px) { .gps-footer__grid { grid-template-columns: 1fr; } } /* ---------- floating dock ---------- */ .gps-dock { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; transition: opacity .3s, transform .3s; } .gps-dock.is-away { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; } .gps-dock > a, .gps-dock .gps-dock__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--ink) !important; font: 500 13.5px var(--font); cursor: pointer; transition: background .2s; white-space: nowrap; } .gps-dock .gps-dock__wa { background: var(--wa); color: #fff !important; padding: 0 16px; } .gps-dock .gps-dock__wa:hover { background: #17924B; } .gps-dock .gps-dock__btn { padding: 0 12px; } .gps-dock .gps-dock__btn:hover, .gps-dock .gps-dock__btn[aria-expanded="true"], .gps-dock .gps-dock__lang:hover { background: rgba(15,30,54,.06); } .gps-dock__sep { width: 1px; height: 20px; background: var(--line-2); margin-inline: 2px; } .gps-dock .gps-dock__lang { width: 40px; font-family: var(--num); font-weight: 600; } html[lang="en"] .gps-dock .gps-dock__lang { font-family: var(--font-ar); } .gps-dock .gps-drop__panel { left: 50%; } @media (max-width: 560px) { .gps-dock__label { display: none; } .gps-dock .gps-drop { position: static; } .gps-dock .gps-drop__panel { left: 50%; width: calc(100vw - 24px); } } /* ---------- Elementor ---------- */ .elementor-section.elementor-section-boxed > .elementor-container .gps-wrap { padding-inline: 0; } /* ========================================================================== v4 — entrance motion, glass panels, impact, sector tiles, archive banner ========================================================================== */ /* Entrance motion (enabled from Customizer; JS adds .gps-reveal-on) */ .gps-reveal-on [data-reveal] { opacity: 0; transform: translate3d(0, var(--anim-dist, 18px), 0); transition: opacity var(--anim-dur, 700ms) cubic-bezier(.22, .8, .24, 1), transform var(--anim-dur, 700ms) cubic-bezier(.22, .8, .24, 1); transition-delay: var(--d, 0ms); } .gps-reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; } .gps-reveal-on .gps-hero__img { animation: gps-settle 1.8s cubic-bezier(.22, .8, .24, 1) both; } @keyframes gps-settle { from { transform: scale(1.06); } to { transform: none; } } @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } } /* Premium separation: a soft glass "sheet" like iOS grouped sections */ .gps-projects { position: relative; isolation: isolate; } .gps-projects::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 50% at 8% 18%, rgba(90,138,216,.16), transparent 70%), radial-gradient(34% 46% at 92% 82%, rgba(91,162,68,.10), transparent 70%); } .gps-panel { position: relative; border-radius: calc(var(--r) + 8px); padding: clamp(18px, 3vw, 32px); background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(245,247,250,.62)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(15,30,54,.05), 0 30px 60px -48px rgba(15,30,54,.35); } .gps-panel .gps-seg { background: rgba(15,30,54,.05); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .gps-panel .gps-head { margin-bottom: 18px; } .gps-panel .gps-center { margin-top: 22px; } .gps-panel .gps-pcard__link { border-color: rgba(15,30,54,.06); } @media (max-width: 640px) { .gps-projects > .gps-wrap { padding-inline: 10px; } .gps-panel { padding: 16px 12px; border-radius: var(--r); } } /* Our impact */ .gps-impact { position: relative; isolation: isolate; padding-block: calc(var(--sec) * .7); } .gps-impact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, var(--tint) 30%, var(--tint) 70%, transparent); } .gps-impact__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); } .gps-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px; background: rgba(255,255,255,.8); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.06); color: var(--ink); font-weight: 600; font-size: 15px; } .gps-impact__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 40px) clamp(10px, 2vw, 20px); } .gps-impact__card { position: relative; padding: clamp(30px, 4vw, 46px) clamp(10px, 2vw, 22px) clamp(14px, 2vw, 22px); border-radius: var(--r); background: rgba(255,255,255,.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.05), 0 20px 40px -34px rgba(15,30,54,.4); text-align: center; display: grid; gap: 4px; align-content: start; } .gps .gps-impact__ico { position: absolute; top: clamp(-30px, -2.6vw, -18px); right: clamp(-8px, -.6vw, -2px); height: clamp(40px, 6.4vw, 84px); width: auto; max-width: 36%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(15,30,54,.18)); transition: transform .5s cubic-bezier(.22,.8,.24,1); } .gps-impact__card:hover .gps-impact__ico { transform: translateY(-4px) rotate(-3deg); } .gps-impact__num { color: var(--blue); line-height: 1.1; direction: ltr; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px; } .gps-impact__num b { font: 700 clamp(22px, 3.6vw, 40px)/1.1 var(--num); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .gps-impact__num small { font: 600 clamp(11px, 1.4vw, 16px) var(--num); color: var(--blue); } .gps-impact__label { color: var(--muted); font-size: clamp(11.5px, 1.3vw, 14.5px); line-height: 1.45; } @media (max-width: 520px) { .gps-impact__grid { gap: 26px 8px; } .gps-impact__card { padding: 24px 6px 12px; } .gps .gps-impact__ico { height: 36px; top: -16px; right: -2px; } .gps-impact__card { padding-top: 26px; } .gps-impact__num b { font-size: 21px; } .gps-impact__num small { font-size: 10.5px; } .gps-impact__label { font-size: 11px; } } /* Sector tiles */ .gps-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.6vw, 16px); } .gps-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: clamp(140px, 19vw, 230px); padding: clamp(14px, 2vw, 22px); border-radius: var(--r); color: #fff !important; background: var(--ink); } .gps-tiles > .gps-tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: clamp(130px, 15vw, 190px); } .gps .gps-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.22,.8,.24,1); } .gps-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,20,40,0) 30%, color-mix(in srgb, var(--accent) 45%, rgba(8,20,40,.85)) 100%); } .gps-tile:hover img { transform: scale(1.05); } .gps-tile__txt { display: grid; gap: 2px; } .gps-tile__txt b { font-size: clamp(15px, 1.8vw, 20px); font-weight: 600; } .gps-tile__txt small { font-size: 13px; opacity: .85; } .gps-tile__go { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transition: background .25s; } .gps-tile:hover .gps-tile__go { background: rgba(255,255,255,.3); } [dir="rtl"] .gps-tile__go .gps-ico-chev { transform: none; } [dir="ltr"] .gps-tile__go .gps-ico-chev { transform: scaleX(-1); } @media (max-width: 520px) { .gps-tile__go { display: none; } .gps-tile__txt small { font-size: 12px; } } .gps-sectors { padding-bottom: calc(var(--sec) * .5); } /* Projects archive */ .gps-archive-head { padding-top: clamp(20px, 3vw, 32px); } .gps-archive-banner { --accent: var(--blue); min-height: clamp(360px, 52vh, 500px); } .gps-archive-banner .gps-sector__copy { max-width: 720px; } .gps-archive-banner .gps-hero__kicker { direction: inherit; font-family: var(--font); } .gps-archive-banner .gps-sector__title { font-size: clamp(28px, 3.8vw, 44px); } .gps-sectors + .gps-projects { padding-top: calc(var(--sec) * .4); } /* ========================================================================== v5 — footer contact, FAQ, calculator page ========================================================================== */ .gps-footer__contact ul { gap: 4px; } .gps-footer__contact li { display: block; } .gps-footer__btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; margin-inline: -8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted) !important; font: inherit; cursor: pointer; text-align: start; transition: background .2s, color .2s; } .gps-footer__btn:hover, .gps-footer__btn[aria-expanded="true"] { background: rgba(15,30,54,.05); color: var(--ink) !important; } .gps-footer__btn .gps-ico { color: var(--blue); flex: none; } .gps-footer__btn span[dir="ltr"] { font-family: var(--num); font-weight: 500; } .gps-footer__phone { position: relative; } .gps-footer .gps-drop__panel { left: auto; inset-inline-start: -8px; transform: none; animation-name: gps-dropup-plain; width: min(320px, calc(100vw - 32px)); } @keyframes gps-dropup-plain { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } } .gps-footer .gps-drop__panel .gps-btn--wa { height: 44px; } .gps-faq__wrap { max-width: 860px; } .gps-faq__list { display: grid; gap: 10px; } .gps-faq__item { border-radius: var(--r); background: rgba(255,255,255,.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.05); overflow: hidden; } .gps-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; color: var(--ink); font-weight: 600; font-size: 15.5px; -webkit-tap-highlight-color: transparent; } .gps-faq__item summary::-webkit-details-marker { display: none; } .gps-faq__item summary i { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--ice); transition: transform .35s var(--ease), background .25s; } .gps-faq__item summary i::before, .gps-faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: var(--blue); transform: translate(-50%, -50%); } .gps-faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); } .gps-faq__item[open] summary i { background: var(--blue); } .gps-faq__item[open] summary i::before, .gps-faq__item[open] summary i::after { background: #fff; } .gps-faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); } .gps-faq__a { padding: 0 20px 18px; color: var(--text); font-size: 14.5px; line-height: 1.8; } .gps-faq__item[open] .gps-faq__a { animation: gps-faq-in .45s var(--ease); } @keyframes gps-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .gps-calc-hero { padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(24px, 4vw, 40px); } .gps-calc-hero__box { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(36px, 6vw, 64px) clamp(18px, 4vw, 48px); border-radius: calc(var(--r) + 8px); background: linear-gradient(160deg, var(--ice), #fff 55%, #FEF6E7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(15,30,54,.05); display: grid; justify-items: center; gap: 12px; } .gps-calc-hero__box::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1; background: radial-gradient(circle, rgba(90,138,216,.25), transparent 65%); } .gps .gps-calc-hero__ico { width: clamp(64px, 8vw, 88px); height: auto; filter: drop-shadow(0 12px 16px rgba(15,30,54,.18)); animation: gps-float 5s ease-in-out infinite; } @keyframes gps-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } } .gps-calc-hero__title { font-size: clamp(26px, 3.6vw, 42px); max-width: 22ch; } .gps-calc-hero .gps-lead { margin-inline: auto; text-align: center; } .gps-calc-hero__share { margin-top: 4px; } .gps-calc-hero + .gps-sec { padding-top: 28px; } @media (prefers-reduced-motion: reduce) { .gps .gps-calc-hero__ico { animation: none; } } /* Small interaction polish */ .gps-btn { transition: background .2s, box-shadow .25s, transform .2s var(--ease), opacity .2s; } .gps-btn:not([disabled]):hover { transform: translateY(-1px); } .gps-pcard__link { transition: box-shadow .3s, transform .35s var(--ease); } .gps-pcard__link:hover { transform: translateY(-3px); } /* ========================================================================== v6 — readability bump, contrast fixes, partners, blog, articles ========================================================================== */ /* Slightly larger type everywhere (body size comes from the Customizer). */ .gps-kicker { font-size: 14px; } .gps-lead { font-size: 17px; } .gps-h3 { font-size: 19.5px; } .gps-muted { font-size: 14.5px; } .gps-note { font-size: 13.5px; } .gps-chip { font-size: 13.5px; height: 34px; } .gps-btn { font-size: 15.5px; } .gps-gcard__text, .gps-vm dd, .gps-vm dt { font-size: 15px; } .gps-svcs b { font-size: 15.5px; } .gps-svcs small { font-size: 13.5px; } .gps-pcard__title { font-size: 16px; } .gps-pcard__place, .gps-pcard__cat, .gps-pcard__facts div, .gps-pcard__facts dd { font-size: 13.5px; } .gps-calc__hint { font-size: 14.5px; } .gps-type__txt b { font-size: 15.5px; } .gps-type__txt small { font-size: 13.5px; } .gps-stepper__t b { font-size: 14.5px; } .gps-impact__label { font-size: clamp(12px, 1.35vw, 15.5px); } .gps-footer { font-size: 14.5px; } .gps-footer h3 { font-size: 15px; } .gps-crumbs { font-size: 14px; } .gps-faq__item summary { font-size: 16.5px; } .gps-faq__a { font-size: 15.5px; } /* White text on coloured buttons — always (footer link colours must not leak in). */ .gps .gps-btn--primary, .gps .gps-btn--wa, .gps .gps-chip--blue, .gps .gps-dock .gps-dock__wa, .gps .gps-footer a.gps-btn--wa, .gps .gps-footer a.gps-chip--blue, .gps .gps-footer .gps-drop__panel a.gps-btn--wa { color: #fff !important; } .gps .gps-btn--wa .gps-ico, .gps .gps-btn--primary .gps-ico { color: #fff; } /* Call menu: clearer, larger */ .gps-drop__title { font-size: 16.5px; } .gps-callrow { padding: 12px 14px; } .gps-callrow b { font-size: 19px; font-weight: 700; letter-spacing: .01em; color: var(--ink) !important; } .gps-callrow .gps-chip { height: 38px; padding: 0 16px; font-size: 14.5px; font-weight: 600; } .gps-callrow .gps-chip:not(.gps-chip--blue) { background: #fff; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); } .gps-drop__panel .gps-btn--wa { height: 48px; font-size: 16px; font-weight: 600; } /* ---------- partners marquee ---------- */ .gps-partners { padding-block: calc(var(--sec) * .6); overflow: hidden; } .gps-partners .gps-head { margin-bottom: 18px; } .gps-marquee { position: relative; overflow: hidden; padding-block: 8px; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .gps-marquee.is-drag { cursor: grabbing; } .gps-marquee__track { display: flex; gap: 14px; width: max-content; will-change: transform; } .gps-marquee__item { flex: none; display: grid; place-items: center; height: 84px; min-width: 180px; padding: 0 26px; border-radius: var(--r); background: rgba(255,255,255,.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.05); transition: box-shadow .3s, transform .3s var(--ease); } .gps .gps-marquee__item img { height: 44px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) opacity(.72); transition: filter .35s; pointer-events: none; } .gps-marquee__item:hover img { filter: none; } .gps-marquee__item:hover { box-shadow: 0 0 0 1px rgba(15,30,54,.07), 0 14px 26px -18px rgba(15,30,54,.35); } @media (max-width: 640px) { .gps-marquee__item { height: 70px; min-width: 140px; padding: 0 18px; } .gps .gps-marquee__item img { height: 36px; } } /* ---------- blog cards ---------- */ .gps-carousel--blog { grid-auto-columns: 320px; } @media (max-width: 520px) { .gps-carousel--blog { grid-auto-columns: 84%; } } .gps-bcard { min-width: 0; height: 100%; } .gps-bcard__link { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.8); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.05); color: inherit !important; transition: transform .35s var(--ease), box-shadow .35s; } .gps-bcard__link:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 22px 40px -28px rgba(15,30,54,.45); } .gps-bcard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ice); } .gps .gps-bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .gps-bcard__link:hover .gps-bcard__media img { transform: scale(1.05); } .gps-bcard__ph { display: grid; place-items: center; height: 100%; color: var(--sky); } .gps-bcard__cat { position: absolute; top: 12px; inset-inline-start: 12px; height: 28px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink); } .gps-bcard__body { padding: 16px 18px 18px; display: grid; gap: 8px; flex: 1; align-content: start; } .gps-bcard__title { font-size: 17px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gps-bcard__ex { color: var(--muted); font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gps-bcard__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } .gps-bcard__meta span { display: inline-flex; align-items: center; gap: 5px; } .gps-blog-home { position: relative; isolation: isolate; } .gps-blog-home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(36% 50% at 90% 20%, rgba(244,165,28,.10), transparent 70%), radial-gradient(40% 50% at 10% 80%, rgba(90,138,216,.14), transparent 70%); } /* ---------- blog index ---------- */ .gps-blog-hero { padding-top: clamp(20px, 3vw, 32px); } .gps-blog-hero__box { position: relative; isolation: isolate; overflow: hidden; text-align: center; display: grid; justify-items: center; gap: 12px; padding: clamp(36px, 6vw, 64px) clamp(18px, 4vw, 48px); border-radius: calc(var(--r) + 8px); background: linear-gradient(150deg, #EEF4FD, #fff 50%, #F2F8EE); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(15,30,54,.05); } .gps-blog-hero__box::before, .gps-blog-hero__box::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(10px); } .gps-blog-hero__box::before { width: 340px; height: 340px; inset: -120px auto auto -80px; background: radial-gradient(circle, rgba(90,138,216,.28), transparent 70%); } .gps-blog-hero__box::after { width: 300px; height: 300px; inset: auto -60px -140px auto; background: radial-gradient(circle, rgba(244,165,28,.22), transparent 70%); } .gps-blog-hero__title { font-size: clamp(28px, 4vw, 46px); max-width: 20ch; } .gps-blog-hero .gps-lead { text-align: center; margin-inline: auto; max-width: 64ch; } .gps-blog-search { display: flex; align-items: center; gap: 10px; width: min(520px, 100%); height: 52px; padding: 0 18px; margin-top: 8px; border-radius: 999px; color: var(--muted); } .gps .gps-blog-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15.5px var(--font); color: var(--ink); height: 100%; } .gps-blog { padding-top: 28px; } .gps-seg--links { margin-inline: auto; margin-bottom: 26px; } .gps-seg--links .gps-seg__btn { text-decoration: none; display: inline-flex; align-items: center; } .gps-bfeat { margin-bottom: 22px; } .gps-bfeat__link { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: calc(var(--r) + 6px); overflow: hidden; background: rgba(255,255,255,.82); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.05), 0 30px 60px -48px rgba(15,30,54,.45); color: inherit !important; } .gps-bfeat__media { min-height: 300px; overflow: hidden; } .gps .gps-bfeat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .gps-bfeat__link:hover .gps-bfeat__media img { transform: scale(1.04); } .gps-bfeat__body { padding: clamp(22px, 3.4vw, 40px); display: grid; gap: 12px; align-content: center; } .gps-bfeat__chips { display: flex; flex-wrap: wrap; gap: 6px; } .gps-bfeat__title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; } .gps-bfeat__ex { color: var(--muted); font-size: 16px; line-height: 1.8; } .gps-bfeat__more { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; } @media (max-width: 820px) { .gps-bfeat__link { grid-template-columns: 1fr; } .gps-bfeat__media { min-height: 0; aspect-ratio: 16/9; } } .gps-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 980px) { .gps-bgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .gps-bgrid { grid-template-columns: 1fr; } } .gps-pager { display: flex; justify-content: center; gap: 6px; margin-top: 30px; } .gps-pager a { min-width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); color: var(--ink) !important; font: 600 15px var(--num); } .gps-pager a.is-active { background: var(--blue); border-color: var(--blue); color: #fff !important; } /* ---------- article ---------- */ .gps-progress { position: fixed; z-index: 65; inset: var(--header-h) 0 auto 0; height: 3px; pointer-events: none; } .admin-bar .gps-progress { top: calc(var(--header-h) + 32px); } .gps-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky), var(--sun)); transform: scaleX(0); transform-origin: left; } [dir="rtl"] .gps-progress span { transform-origin: right; } .gps-ahead { padding-top: clamp(20px, 3vw, 32px); } .gps-ahead__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(18px, 3vw, 36px); align-items: center; padding: clamp(18px, 3vw, 32px); border-radius: calc(var(--r) + 8px); background: linear-gradient(160deg, #EEF4FD, #fff 60%); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(15,30,54,.05); } .gps-ahead__copy { display: grid; gap: 14px; } .gps-ahead__chips { display: flex; flex-wrap: wrap; gap: 6px; } .gps-ahead__chips .gps-chip { gap: 6px; } .gps-ahead__title { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.35; } html[lang="en"] .gps-ahead__title { line-height: 1.15; } .gps-ahead__lead { color: var(--text); font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.85; } .gps-ahead__meta { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .gps-ahead__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; } .gps .gps-ahead__avatar img { width: 34px; height: auto; } .gps-ahead__meta b { display: block; color: var(--ink); font-size: 15px; } .gps-ahead__meta small { color: var(--muted); font-size: 13.5px; } .gps-ahead__cover { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px -40px rgba(15,30,54,.5); } .gps .gps-ahead__cover img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .gps-ahead__grid { grid-template-columns: 1fr; } .gps-ahead__cover { aspect-ratio: 16/9; order: -1; } } .gps-abody { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-block: clamp(28px, 4vw, 48px) var(--sec); align-items: start; } .gps-abody__side { position: sticky; top: calc(var(--header-h) + 22px); display: grid; gap: 12px; } .gps-toc, .gps-share { border-radius: var(--r); padding: 16px; } .gps-toc__t { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 8px !important; } .gps-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 52vh; overflow: auto; scrollbar-width: thin; } .gps-toc a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--muted) !important; font-size: 14px; line-height: 1.5; border-inline-start: 2px solid transparent; transition: background .2s, color .2s, border-color .2s; } .gps-toc a:hover { background: rgba(15,30,54,.04); color: var(--ink) !important; } .gps-toc a.is-active { background: var(--ice); color: var(--blue) !important; border-inline-start-color: var(--blue); font-weight: 600; } .gps-toc__l3 a { padding-inline-start: 22px; font-size: 13.5px; } .gps-share__row { display: flex; gap: 6px; flex-wrap: wrap; } .gps-share__row a, .gps-share__row button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ink) !important; cursor: pointer; transition: transform .25s var(--ease); } .gps-share__row a:hover, .gps-share__row button:hover { transform: translateY(-2px); } .gps-share__row .gps-share__wa { color: var(--wa) !important; } @media (max-width: 980px) { .gps-abody { grid-template-columns: 1fr; } .gps-abody__side { position: static; order: -1; } .gps-toc ol { max-height: none; } .gps-share { display: none; } } /* Article typography */ .gps-acontent { max-width: 760px; font-size: 17.5px; line-height: 2; color: var(--text); } html[lang="en"] .gps-acontent { font-size: 17.5px; line-height: 1.8; } .gps-acontent > * + * { margin-top: 1.1em; } .gps-acontent p { margin: 0; } .gps-acontent h2 { position: relative; font-size: clamp(23px, 2.4vw, 29px); margin-top: 2em; padding-top: 18px; scroll-margin-top: calc(var(--header-h) + 24px); } .gps-acontent h2::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--sky)); } .gps-acontent h3 { font-size: clamp(19px, 1.9vw, 22px); margin-top: 1.6em; scroll-margin-top: calc(var(--header-h) + 24px); } .gps-acontent a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(29,86,165,.3); text-underline-offset: 4px; } .gps-acontent a:hover { text-decoration-color: var(--blue); } .gps-acontent strong { color: var(--ink); } .gps-acontent ul, .gps-acontent ol { padding-inline-start: 0; list-style: none; display: grid; gap: 10px; } .gps-acontent ul > li { position: relative; padding-inline-start: 26px; } .gps-acontent ul > li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .78em; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px var(--ice); } .gps-acontent ol { counter-reset: gps-ol; } .gps-acontent ol > li { position: relative; counter-increment: gps-ol; padding-inline-start: 42px; min-height: 30px; } .gps-acontent ol > li::before { content: counter(gps-ol); position: absolute; inset-inline-start: 0; top: .2em; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; font: 600 14px/1 var(--num); } .gps-acontent blockquote { margin: 1.6em 0; padding: 22px 26px; border-radius: var(--r); background: linear-gradient(135deg, #FFF8EA, #fff); border: 1px solid #F8E3B6; font-size: 1.12em; color: var(--ink); position: relative; } .gps-acontent blockquote::before { content: "”"; position: absolute; top: -18px; inset-inline-start: 18px; font: 700 64px/1 Georgia, serif; color: var(--sun); } .gps-acontent blockquote p { margin: 0; } .gps-acontent img { border-radius: var(--r); } .gps-acontent figure { margin: 1.6em 0; } .gps-acontent figcaption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 8px; } .gps-acontent iframe, .gps-acontent .wp-block-embed__wrapper iframe, .gps-acontent video { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--r); } .gps-acontent hr { border: 0; height: 1px; background: var(--line-2); margin: 2em 0; } .gps-a-table { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(15,30,54,.03); } .gps-a-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; min-width: 520px; } .gps-a-table th { background: var(--ice); color: var(--ink); font-weight: 600; text-align: start; padding: 12px 14px; } .gps-a-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; } .gps-a-table tr:nth-child(even) td { background: rgba(245,247,250,.6); } .gps-a-take { padding: 20px 22px; border-radius: var(--r); background: linear-gradient(135deg, rgba(234,241,252,.9), rgba(255,255,255,.8)); border: 1px solid rgba(90,138,216,.22); } .gps-a-take__t { display: flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 700; font-size: 16px; margin-bottom: 10px !important; } .gps-a-take__t .gps-ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--blue); color: #fff; } .gps-a-take ul > li::before { background: var(--leaf); box-shadow: 0 0 0 4px #E8F3E3; } .gps-a-note { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 20px; border-radius: var(--r); border: 1px solid; font-size: 16px; line-height: 1.85; } .gps-a-note__i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; } .gps-a-note__t { font-weight: 700; color: var(--ink); margin-bottom: 4px !important; } .gps-a-note p + p { margin-top: .6em; } .gps-a-note--tip { background: #F1F8EE; border-color: #D4EAC9; } .gps-a-note--tip .gps-a-note__i { background: var(--leaf); } .gps-a-note--info { background: #EEF4FD; border-color: #D3E1F6; } .gps-a-note--info .gps-a-note__i { background: var(--blue); } .gps-a-note--warn { background: #FFF7E8; border-color: #F6DFAE; } .gps-a-note--warn .gps-a-note__i { background: var(--sun); } .gps-a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .gps-a-stat { padding: 18px; border-radius: var(--r); background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,30,54,.06); display: grid; gap: 4px; text-align: center; } .gps-a-stat b { font: 700 clamp(24px, 2.6vw, 32px)/1.1 var(--num); color: var(--blue); } .gps-a-stat span { color: var(--muted); font-size: 14px; line-height: 1.5; } .gps-a-cta { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; margin-top: 2em !important; padding: 20px 22px; border-radius: calc(var(--r) + 4px); background: linear-gradient(135deg, var(--blue), #2B6BC4); color: #fff; box-shadow: 0 24px 48px -32px rgba(29,86,165,.8); } .gps .gps-a-cta img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); } .gps-a-cta__t { font-weight: 700; font-size: 19px; color: #fff; } .gps-a-cta p { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.7; margin: 0; } .gps .gps-a-cta .gps-btn { background: #fff; color: var(--blue) !important; text-decoration: none; } .gps .gps-a-cta .gps-btn .gps-ico { color: var(--blue); } [dir="ltr"] .gps-a-cta .gps-ico-chev { transform: scaleX(-1); } @media (max-width: 640px) { .gps-a-cta { grid-template-columns: 56px 1fr; } .gps .gps-a-cta img { width: 56px; height: 56px; } .gps-a-cta .gps-btn { grid-column: 1 / -1; } } .gps-atags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2em !important; } .gps-author { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; margin-top: 2em !important; padding: 18px 20px; border-radius: var(--r); } .gps .gps-author img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 0 0 1px var(--line-2); } .gps-author__n { font-weight: 700; color: var(--ink); } .gps-author p { font-size: 15px; line-height: 1.75; margin: 0; } .gps-faq--article, .gps-faq--project { padding-top: 0; } .gps-toc summary { list-style: none; cursor: pointer; } .gps-toc summary::-webkit-details-marker { display: none; } .gps-toc summary i { margin-inline-start: auto; width: 10px; height: 10px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease); } .gps-toc[open] summary i { transform: rotate(-135deg); } @media (min-width: 981px) { .gps-toc summary { pointer-events: none; } .gps-toc summary i { display: none; } } .gps-marquee__item--text b { font: 700 19px/1 var(--num); letter-spacing: .02em; color: #5B6B82; white-space: nowrap; transition: color .3s; } .gps-marquee__item--text:hover b { color: var(--blue); } .gps-partners--partners + .gps-partners--suppliers { padding-top: 0; } /* Call menu panels: never wider than the screen, rows wrap neatly */ .gps-drop__panel { grid-template-columns: minmax(0, 1fr); } .gps-footer .gps-drop__panel, .gps-drop__panel--sm { width: min(340px, calc(100vw - 32px)); } .gps-callrow { flex-wrap: wrap; row-gap: 10px; } .gps-callrow b { flex: 1 1 auto; min-width: 0; font-size: 18px; } .gps-callrow__acts { flex: none; margin-inline-start: auto; } .gps-drop__panel .gps-btn--wa { white-space: normal; text-align: center; } @media (max-width: 560px) { .gps-footer .gps-drop__panel { position: fixed; left: 16px !important; right: 16px !important; width: auto; top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); inset-inline-start: auto; transform: none; } } .gps-bcard.is-in { animation: gps-cardin .45s var(--ease) both; } .gps-blog__list .gps-seg--links { display: flex; } /* Articles: never wider than the screen; tables become stacked cards on phones */ .gps-abody > * { min-width: 0; } @media (max-width: 980px) { .gps-abody { grid-template-columns: minmax(0, 1fr); } } .gps-acontent { overflow-wrap: anywhere; } @media (max-width: 680px) { .gps-a-table { overflow: visible; border: 0; background: transparent; box-shadow: none; } .gps-a-table table { min-width: 0; font-size: 15px; } .gps-a-table thead { display: none; } .gps-a-table table, .gps-a-table tbody, .gps-a-table tr, .gps-a-table td { display: block; width: 100%; } .gps-a-table tr { margin-bottom: 10px; border-radius: var(--r); background: rgba(255,255,255,.88); border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(15,30,54,.03); overflow: hidden; } .gps-a-table tr:nth-child(even) td { background: transparent; } .gps-a-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); text-align: end; } .gps-a-table td:first-child { border-top: 0; background: var(--ice) !important; color: var(--ink); font-weight: 700; text-align: start; } .gps-a-table td:first-child::before { display: none; } .gps-a-table td::before { content: attr(data-label); flex: none; max-width: 48%; color: var(--muted); font-weight: 500; font-size: 13.5px; text-align: start; } } /* Logo strips: no hover/press shadow, no tap highlight */ .gps .gps-marquee__item, .gps .gps-marquee__item:hover, .gps .gps-marquee__item:active, .gps .gps-marquee__item:focus { box-shadow: 0 0 0 1px rgba(15,30,54,.05); transform: none; outline: none; -webkit-tap-highlight-color: transparent; } .gps .gps-marquee__item img { -webkit-user-drag: none; } /* ========================================================================= * v6.1 — Blue glass header + menu sheet, soft blue glass home sections * ====================================================================== */ .gps-header { display: block; } .gps-header__bar { position: relative; height: var(--header-h); max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .gps-header__bar > .gps-brand { grid-column: 2; display: block; } .gps-burger { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.6); color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer; transition: background .25s, border-color .25s, transform .25s var(--ease); } .gps-burger:hover { transform: translateY(-1px); } .gps-burger__lines { position: relative; width: 18px; height: 12px; display: block; } .gps-burger__lines i { position: absolute; inset-inline-start: 0; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s, width .35s var(--ease); } .gps-burger__lines i:nth-child(1) { top: 0; } .gps-burger__lines i:nth-child(2) { top: 5.2px; width: 12px; } .gps-burger__lines i:nth-child(3) { top: 10.4px; } .gps-header.is-menu .gps-burger__lines i:nth-child(1) { transform: translateY(5.2px) rotate(45deg); } .gps-header.is-menu .gps-burger__lines i:nth-child(2) { opacity: 0; width: 0; } .gps-header.is-menu .gps-burger__lines i:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); } .gps-header__lang { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.6); color: var(--ink) !important; font: 600 13px/1 var(--num); transition: background .25s; } @media (max-width: 520px) { .gps-burger__txt { display: none; } .gps-burger { width: 40px; padding: 0; justify-content: center; } .gps-header__lang { padding: 0 10px; } } /* Blue glass */ .gps-header--blue .gps-brand img { height: calc(var(--logo-h, 40px) + 4px); } .gps-header--blue { background: linear-gradient(180deg, rgba(29,86,165,.88), rgba(22,70,140,.84)); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .gps-header--blue::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 30%, rgba(255,255,255,.28) 70%, transparent); } .gps-header--blue.is-scrolled { background: linear-gradient(180deg, rgba(25,78,152,.90), rgba(19,62,126,.86)); border-bottom-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px -22px rgba(8,20,42,.55); } .gps-header--blue .gps-burger, .gps-header--blue .gps-header__lang { color: #fff !important; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); } .gps-header--blue .gps-burger:hover, .gps-header--blue .gps-header__lang:hover { background: rgba(255,255,255,.18); } /* Menu sheet */ .gps-menu { position: absolute; top: 100%; inset-inline: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px)); z-index: -1; } .gps-menu[hidden] { display: none; } .gps-menu__scrim { position: absolute; inset: 0; background: rgba(8,20,42,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s var(--ease); } .gps-menu__sheet { position: relative; max-height: calc(100dvh - var(--header-h) - 24px); overflow: auto; overscroll-behavior: contain; padding-block: clamp(22px, 4vw, 40px) clamp(24px, 4vw, 44px); border-radius: 0 0 28px 28px; color: #fff; background: linear-gradient(180deg, rgba(22,70,140,.96), rgba(13,42,90,.98)); -webkit-backdrop-filter: saturate(160%) blur(26px); backdrop-filter: saturate(160%) blur(26px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 30px 60px -30px rgba(8,20,42,.6); opacity: 0; transform: translateY(-14px); transition: opacity .35s var(--ease), transform .45s var(--ease); } .gps-menu__sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(40% 70% at 90% 0%, rgba(90,138,216,.35), transparent 70%), radial-gradient(30% 60% at 5% 100%, rgba(244,165,28,.10), transparent 70%); } .gps-menu.is-open .gps-menu__scrim { opacity: 1; } .gps-menu.is-open .gps-menu__sheet { opacity: 1; transform: none; } .gps-menu__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: clamp(20px, 4vw, 48px); } .gps-menu h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6) !important; } .gps-menu ul { list-style: none; margin: 0; padding: 0; } .gps-menu__links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.09); color: #fff !important; font-size: 17px; font-weight: 500; transition: padding .3s var(--ease), color .2s; } .gps-menu__links--sm a { font-size: 15px; padding-block: 9px; color: rgba(255,255,255,.88) !important; } .gps-menu__links a .gps-ico { opacity: .45; transition: opacity .25s, transform .3s var(--ease); } .gps-menu__links a:hover { padding-inline-start: 6px; } .gps-menu__links a:hover .gps-ico { opacity: 1; } .gps-menu__links li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 28ms + 80ms); } .gps-menu.is-open .gps-menu__links li { opacity: 1; transform: none; } .gps-menu__contact { display: grid; gap: 10px; align-content: start; } .gps-menu__contact .gps-btn--wa { height: 48px; font-size: 15.5px; font-weight: 600; } .gps-menu__row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff !important; font-size: 14.5px; transition: background .25s; } .gps-menu__row:hover { background: rgba(255,255,255,.13); } .gps-menu__row .gps-ico { color: #BFD3F3; } .gps-menu__row span { min-width: 0; overflow-wrap: anywhere; } .gps-menu__row span[dir="ltr"] { font-family: var(--num); font-weight: 600; letter-spacing: .02em; } .gps-menu__row em { margin-inline-start: auto; font-style: normal; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); } .gps-menu__social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .gps-menu__social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; transition: transform .25s var(--ease); } .gps-menu__social a:hover { transform: translateY(-2px); } .gps-menu__social a.gps-menu__lang { width: auto; padding: 0 14px; display: inline-flex; gap: 6px; margin-inline-start: auto; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); color: #fff !important; font-size: 13.5px; } @media (max-width: 860px) { .gps-menu__grid { grid-template-columns: 1fr 1fr; } .gps-menu__contact { grid-column: 1 / -1; } } @media (max-width: 560px) { .gps-menu__grid { grid-template-columns: 1fr; gap: 26px; } .gps-menu__sheet { max-height: calc(100dvh - var(--header-h)); border-radius: 0 0 22px 22px; } } html.gps-menu-open, html.gps-menu-open body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .gps-menu__sheet, .gps-menu__links li, .gps-menu__scrim { transition: none; } } /* Soft blue glass backdrop for the home Projects + Articles sections */ .gps-sec-blue .gps-projects:not(.gps-projects--grid), .gps-sec-blue .gps-blog-home { background: linear-gradient(180deg, #EDF3FC 0%, #DDE8F8 50%, #E8F0FB 100%); } .gps-sec-blue .gps-projects:not(.gps-projects--grid)::before, .gps-sec-blue .gps-blog-home::before { background: radial-gradient(42% 55% at 88% 12%, rgba(90,138,216,.34), transparent 70%), radial-gradient(38% 50% at 8% 88%, rgba(29,86,165,.20), transparent 70%), radial-gradient(30% 40% at 50% 50%, rgba(255,255,255,.55), transparent 75%); } .gps-sec-blue .gps-projects:not(.gps-projects--grid)::after, .gps-sec-blue .gps-blog-home::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 1px 0 rgba(29,86,165,.06), inset 0 -1px 0 rgba(29,86,165,.06); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel, .gps-sec-blue .gps-blog-home .gps-panel { color: #fff; border: 1px solid rgba(255,255,255,.16); background: radial-gradient(60% 80% at 100% 0%, rgba(90,138,216,.45), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(10,36,80,.55), transparent 65%), linear-gradient(160deg, rgba(31,92,176,.92) 0%, rgba(22,70,140,.94) 50%, rgba(14,46,96,.96) 100%); -webkit-backdrop-filter: saturate(160%) blur(24px); backdrop-filter: saturate(160%) blur(24px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06), 0 40px 80px -48px rgba(14,46,96,.65), 0 2px 6px -2px rgba(14,46,96,.25); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-h2, .gps-sec-blue .gps-blog-home .gps-panel .gps-h2 { color: #fff !important; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-lead, .gps-sec-blue .gps-blog-home .gps-panel .gps-lead { color: rgba(255,255,255,.78) !important; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-kicker, .gps-sec-blue .gps-blog-home .gps-panel .gps-kicker { color: #BFD3F3 !important; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-seg, .gps-sec-blue .gps-blog-home .gps-panel .gps-seg { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-seg__btn, .gps-sec-blue .gps-blog-home .gps-panel .gps-seg__btn { color: rgba(255,255,255,.80) !important; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-seg__btn.is-active, .gps-sec-blue .gps-blog-home .gps-panel .gps-seg__btn.is-active { color: var(--blue) !important; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-round, .gps-sec-blue .gps-blog-home .gps-panel .gps-round { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-round:hover, .gps-sec-blue .gps-blog-home .gps-panel .gps-round:hover { background: rgba(255,255,255,.22); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-btn--soft, .gps-sec-blue .gps-blog-home .gps-panel .gps-btn--soft { background: rgba(255,255,255,.14); color: #fff !important; border: 1px solid rgba(255,255,255,.22); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-btn--soft:hover, .gps-sec-blue .gps-blog-home .gps-panel .gps-btn--soft:hover { background: rgba(255,255,255,.22); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-btn--primary, .gps-sec-blue .gps-blog-home .gps-panel .gps-btn--primary { background: #fff; color: var(--blue) !important; } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-btn--primary .gps-ico, .gps-sec-blue .gps-blog-home .gps-panel .gps-btn--primary .gps-ico { color: var(--blue); } .gps-sec-blue .gps-projects:not(.gps-projects--grid) .gps-panel .gps-pcard__link, .gps-sec-blue .gps-blog-home .gps-panel .gps-pcard__link { border-color: rgba(255,255,255,.5); box-shadow: 0 18px 40px -26px rgba(5,20,50,.6); } @media (max-width: 560px) { .gps-menu__links--sm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gps-menu__links--sm a { justify-content: center; padding: 11px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); } .gps-menu__links--sm a .gps-ico { display: none; } .gps-menu__links a { padding-block: 10px; font-size: 16px; } } .gps-sec-blue .gps-blog-home .gps-bcard__link { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.6); box-shadow: 0 18px 40px -26px rgba(5,20,50,.6); } /* Elementor's global "img { height:auto }" must not shrink cover images (left a grey strip under card photos). */ body.gps .gps-hero__img, body.gps .gps-pcard__media img, body.gps .gps-phead__media img, body.gps .gps-gallery img, body.gps .gps-sector__banner > img, body.gps .gps-sector-link img, body.gps .gps-tile img, body.gps .gps-bcard__media img, body.gps .gps-bfeat__media img, body.gps .gps-ahead__cover img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none; }