@charset "UTF-8"; /* ================================================================== Globynix Solutions — Brand layer ------------------------------------------------------------------ Sits on top of the base template. Two jobs: 1. Re-tone the whole theme to the logo palette (navy + rose). 2. Provide the premium components the Globynix pages are built from (prefixed .gx-* so nothing collides with template classes). Palette sampled directly from logo.jpg: navy #34487D rose #BE4065 ================================================================== */ /* ================================================================== 1. Design tokens ================================================================== */ :root { /* -- Brand ------------------------------------------------------ */ --gx-navy: #34487D; --gx-navy-deep: #22305A; --gx-navy-darker: #16203D; --gx-navy-soft: #4A5F9E; --gx-navy-mist: #EDF0F8; --gx-rose: #BE4065; --gx-rose-deep: #9E3253; --gx-rose-soft: #D46187; --gx-rose-mist: #FCEDF1; /* -- Neutrals --------------------------------------------------- */ --gx-ink: #131A2E; --gx-body: #5B657C; /* Lightest grey that still clears WCAG AA (4.5:1) for small text on white, --gx-surface-soft and --gx-surface-tint alike. */ --gx-muted: #667085; --gx-line: #E4E8F2; --gx-surface: #FFFFFF; --gx-surface-soft: #F6F8FC; --gx-surface-tint: #F2F5FC; /* -- Gradients -------------------------------------------------- */ --gx-grad: linear-gradient(120deg, #34487D 0%, #4A5F9E 45%, #BE4065 100%); --gx-grad-navy: linear-gradient(135deg, #34487D 0%, #22305A 100%); --gx-grad-rose: linear-gradient(135deg, #BE4065 0%, #9E3253 100%); --gx-grad-soft: linear-gradient(135deg, #EDF0F8 0%, #FCEDF1 100%); /* -- Elevation -------------------------------------------------- */ --gx-sh-xs: 0 1px 2px rgba(19, 26, 46, .06); --gx-sh-sm: 0 2px 8px rgba(19, 26, 46, .06); --gx-sh-md: 0 10px 30px rgba(34, 48, 90, .08); --gx-sh-lg: 0 24px 60px rgba(34, 48, 90, .14); --gx-sh-navy: 0 14px 34px rgba(52, 72, 125, .30); --gx-sh-rose: 0 14px 34px rgba(190, 64, 101, .28); /* -- Geometry --------------------------------------------------- */ --gx-r-sm: 10px; --gx-r: 16px; --gx-r-lg: 22px; --gx-r-xl: 30px; --gx-ease: cubic-bezier(.22, 1, .36, 1); --gx-t: .4s var(--gx-ease); /* -- Re-tone the base template --------------------------------- */ --color-primary: #34487D; --color-secondary: #BE4065; --color-heading: #131A2E; --color-paragraph: #5B657C; --bg-gray: #F6F8FC; --box-shadow-secondary: 0 10px 30px rgba(52, 72, 125, .28); --bg-gradient: linear-gradient(120deg, #34487D 0%, #BE4065 100%); --bg-gradient-secondary: linear-gradient(120deg, #BE4065 0%, #34487D 100%); } /* ================================================================== 2. Base typography ================================================================== */ /* The off-canvas drawer sits beyond the right edge until opened. Clipping on alone is unreliable in iOS Safari, so clip on too. Safe here because the header is position:fixed — nothing on the site uses sticky. */ html { overflow-x: hidden; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--gx-body); background: var(--gx-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--gx-ink); font-weight: 700; letter-spacing: -.02em; } h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4.1rem); line-height: 1.08; letter-spacing: -.035em; } h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.85rem); line-height: 1.16; letter-spacing: -.03em; } h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.24; } h4 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); line-height: 1.32; } h5 { font-size: 1.05rem; line-height: 1.4; } p { color: var(--gx-body); line-height: 1.78; } a { color: var(--gx-navy); transition: color .28s var(--gx-ease); } a:hover, a:focus { color: var(--gx-rose); text-decoration: none; } ::selection { background: var(--gx-navy); color: #fff; } ::-moz-selection { background: var(--gx-navy); color: #fff; } :focus-visible { outline: 3px solid rgba(190, 64, 101, .45); outline-offset: 3px; border-radius: 4px; } .gx-lead { font-size: clamp(1.02rem, .97rem + .28vw, 1.19rem); line-height: 1.75; color: var(--gx-body); } /* Screen-reader-only text (skip link). Provided here rather than pulled in with a whole utility library. */ .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; } .sr-only-focusable:focus, .sr-only-focusable:active { position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 22px; margin: 0; overflow: visible; clip: auto; z-index: 1100; background: var(--gx-navy); color: #fff; border-radius: 100px; font-weight: 700; box-shadow: var(--gx-sh-lg); } /* Scrollbar ------------------------------------------------------- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--gx-surface-soft); } ::-webkit-scrollbar-thumb { background: #C3CBDF; border-radius: 10px; border: 3px solid var(--gx-surface-soft); } ::-webkit-scrollbar-thumb:hover { background: var(--gx-navy-soft); } /* Grid gutter. The template stylesheet used to force 30px gutters over Bootstrap's default 24px. Now that it is no longer loaded, set it here so the spacing the design was built around stays exactly the same. */ .row { --bs-gutter-x: 1.875rem; } /* Two-column "media beside text" blocks. A 30px gutter is far too tight when an image sits directly against a paragraph — the two read as one joined block. Widening the gutter opens the gap between the columns while the outer edges stay flush with the container, because Bootstrap offsets the row by half the gutter. Only above the lg breakpoint: below it the columns stack, where the extra padding would just indent the content. */ @media (min-width: 992px) { .gx-split { --bs-gutter-x: 5rem; } } @media (min-width: 1400px) { .gx-split { --bs-gutter-x: 6.25rem; } } /* ================================================================== 3. Layout rhythm & shared section furniture ================================================================== */ .gx-section { padding: clamp(64px, 4.4vw, 110px) 0; position: relative; } .gx-section-sm { padding: clamp(48px, 3.2vw, 76px) 0; position: relative; } .gx-soft { background: var(--gx-surface-soft); } .gx-tint { background: var(--gx-grad-soft); } .gx-navy-bg { background: var(--gx-grad-navy); color: rgba(255,255,255,.82); } .gx-navy-bg h1, .gx-navy-bg h2, .gx-navy-bg h3, .gx-navy-bg h4, .gx-navy-bg h5 { color: #fff; } .gx-navy-bg p { color: rgba(255,255,255,.78); } /* Eyebrow --------------------------------------------------------- */ .gx-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .745rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gx-rose); background: var(--gx-rose-mist); border: 1px solid rgba(190, 64, 101, .16); padding: 7px 16px 7px 13px; border-radius: 100px; margin-bottom: 20px; } .gx-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gx-rose); box-shadow: 0 0 0 3px rgba(190, 64, 101, .18); } .gx-navy-bg .gx-eyebrow, .gx-eyebrow.is-light { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); } .gx-navy-bg .gx-eyebrow::before, .gx-eyebrow.is-light::before { background: var(--gx-rose-soft); box-shadow: 0 0 0 3px rgba(255,255,255,.18); } /* Section heading ------------------------------------------------- */ /* Lets a page use the correct heading level without changing how it looks — e.g. the thank-you and 404 pages need an

for accessibility but should still read at section-heading size. / .gx-h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.85rem); line-height: 1.16; letter-spacing: -.03em; } .gx-head { margin-bottom: clamp(38px, 3vw, 62px); } .gx-head.is-center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; } .gx-head h2 { margin-bottom: 16px; } .gx-head h2 em { font-style: normal; color: var(--gx-rose); } .gx-head h2 .gx-grad-text { background: var(--gx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gx-head p { margin-bottom: 0; font-size: 1.045rem; } .gx-head.is-center p{ margin-left: auto; margin-right: auto; } / Base-template heading override ---------------------------------- / .site-heading h2 span { color: var(--gx-rose); } .site-heading h4::before { background: var(--gx-rose); } / ================================================================== 4. Buttons ================================================================== / .gx-btn { --btn-bg: var(--gx-navy); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; font-size: .935rem; font-weight: 700; letter-spacing: -.005em; line-height: 1; border: 1px solid transparent; border-radius: 100px; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform .34s var(--gx-ease), box-shadow .34s var(--gx-ease), background .3s var(--gx-ease), color .3s var(--gx-ease), border-color .3s var(--gx-ease); box-shadow: var(--gx-sh-navy); } .gx-btn i { font-size: .88em; transition: transform .34s var(--gx-ease); } .gx-btn::before { content: ""; position: absolute; inset: 0; background: var(--gx-grad-rose); opacity: 0; transition: opacity .34s var(--gx-ease); z-index: -1; } .gx-btn:hover, .gx-btn:focus { color: #fff; transform: translateY(-3px); box-shadow: var(--gx-sh-rose); } .gx-btn:hover::before, .gx-btn:focus::before { opacity: 1; } .gx-btn:hover i { transform: translateX(4px); } .gx-btn:active { transform: translateY(-1px); } .gx-btn.is-rose { --btn-bg: var(--gx-rose); box-shadow: var(--gx-sh-rose); } .gx-btn.is-rose::before { background: var(--gx-grad-navy); } .gx-btn.is-rose:hover { box-shadow: var(--gx-sh-navy); } .gx-btn.is-ghost { --btn-bg: transparent; --btn-fg: var(--gx-navy); border-color: rgba(52, 72, 125, .28); box-shadow: none; } .gx-btn.is-ghost:hover { border-color: transparent; box-shadow: var(--gx-sh-rose); } .gx-btn.is-light { --btn-bg: #fff; --btn-fg: var(--gx-navy); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); } .gx-btn.is-light::before { background: var(--gx-grad-rose); } .gx-btn.is-outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255, 255, 255, .38); box-shadow: none; } .gx-btn.is-outline-light:hover { border-color: transparent; } .gx-btn.is-lg { padding: 18px 38px; font-size: 1rem; } .gx-btn.is-sm { padding: 12px 24px; font-size: .86rem; } .gx-btn.is-block { width: 100%; } / Text link with sweeping underline -------------------------------- / .gx-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--gx-navy); position: relative; } .gx-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--gx-rose); transform: scaleX(0); transform-origin: right; transition: transform .42s var(--gx-ease); } .gx-link:hover { color: var(--gx-rose); } .gx-link:hover::after { transform: scaleX(1); transform-origin: left; } .gx-link i { transition: transform .34s var(--gx-ease); font-size: .82em; } .gx-link:hover i { transform: translateX(5px); } / ================================================================== 5. Header / navigation ================================================================== / / The top bar and the nav travel together inside one fixed shell, so the bar is never hidden underneath the nav and the spacer below matches the real rendered height exactly. / .gx-header-shell { position: fixed; inset: 0 0 auto 0; z-index: 999; } .gx-header { position: relative; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: background .35s var(--gx-ease), box-shadow .35s var(--gx-ease), border-color .35s var(--gx-ease); } .gx-header-shell.is-stuck .gx-header { background: rgba(255, 255, 255, .96); border-bottom-color: var(--gx-line); box-shadow: 0 4px 24px rgba(19, 26, 46, .07); } .gx-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; transition: height .35s var(--gx-ease); } .gx-header-shell.is-stuck .gx-header-inner { height: 66px; } .gx-brand { display: inline-flex; align-items: center; flex-shrink: 0; } .gx-brand img { height: 40px; width: auto; transition: height .35s var(--gx-ease); } .gx-header-shell.is-stuck .gx-brand img { height: 35px; } / Top-bar (contact strip) ----------------------------------------- / .gx-topbar { background: var(--gx-navy-darker); color: rgba(255, 255, 255, .74); font-size: .82rem; / Slides away on scroll so the nav alone follows the reader down. / max-height: 44px; overflow: hidden; transition: max-height .38s var(--gx-ease), opacity .28s var(--gx-ease); } .gx-header-shell.is-stuck .gx-topbar { max-height: 0; opacity: 0; } .gx-topbar a { color: rgba(255, 255, 255, .74); } .gx-topbar a:hover { color: #fff; } .gx-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 44px; } .gx-topbar ul { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; flex-wrap: wrap; } .gx-topbar li { display: inline-flex; align-items: center; gap: 8px; } .gx-topbar i { color: var(--gx-rose-soft); font-size: .86em; } .gx-topbar .gx-topbar-social a { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background .3s var(--gx-ease), transform .3s var(--gx-ease); } .gx-topbar .gx-topbar-social a:hover { background: var(--gx-rose); transform: translateY(-2px); } / Primary nav ------------------------------------------------------ / .gx-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 auto; list-style: none; padding: 0; } .gx-nav > li { position: relative; } .gx-nav > li > a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 15px; font-size: .935rem; font-weight: 600; color: var(--gx-ink); border-radius: 100px; transition: color .28s var(--gx-ease), background .28s var(--gx-ease); white-space: nowrap; } .gx-nav > li > a:hover, .gx-nav > li.is-current > a { color: var(--gx-navy); background: var(--gx-navy-mist); } .gx-nav > li.is-current > a { color: var(--gx-rose); } .gx-nav .gx-caret { font-size: .62em; opacity: .6; transition: transform .3s var(--gx-ease); } .gx-nav > li:hover .gx-caret { transform: rotate(180deg); } .gx-nav-badge { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--gx-grad-rose); color: #fff; padding: 3px 7px; border-radius: 5px; line-height: 1; } / Mega menu -------------------------------------------------------- / .gx-mega { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 12px); width: min(760px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-lg); box-shadow: var(--gx-sh-lg); padding: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--gx-ease), transform .3s var(--gx-ease), visibility .3s; z-index: 60; } .gx-nav > li:hover .gx-mega, .gx-nav > li:focus-within .gx-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .gx-mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .gx-mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } .gx-mega-item { display: flex; align-items: flex-start; gap: 13px; padding: 13px 14px; border-radius: var(--gx-r); transition: background .28s var(--gx-ease); } .gx-mega-item:hover { background: var(--gx-surface-soft); } .gx-mega-item .ico { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--gx-navy-mist); color: var(--gx-navy); font-size: 1rem; transition: background .3s var(--gx-ease), color .3s var(--gx-ease), transform .3s var(--gx-ease); } .gx-mega-item:hover .ico { background: var(--gx-grad-navy); color: #fff; transform: rotate(-6deg); } .gx-mega-item h6 { font-size: .9rem; font-weight: 700; color: var(--gx-ink); margin: 0 0 3px; } .gx-mega-item span { font-size: .795rem; color: var(--gx-muted); line-height: 1.5; display: block; } .gx-mega-foot { margin-top: 10px; padding: 14px 16px; border-radius: var(--gx-r); background: var(--gx-grad-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .gx-mega-foot p { margin: 0; font-size: .855rem; color: var(--gx-ink); font-weight: 600; } / Burger ----------------------------------------------------------- / .gx-burger { display: none; width: 46px; height: 46px; border: 1px solid var(--gx-line); background: #fff; border-radius: 13px; padding: 0; place-items: center; cursor: pointer; color: var(--gx-navy); transition: background .28s var(--gx-ease), color .28s var(--gx-ease), border-color .28s; } .gx-burger:hover { background: var(--gx-navy); color: #fff; border-color: var(--gx-navy); } .gx-burger span { position: relative; display: block; width: 19px; height: 2px; border-radius: 2px; background: currentColor; transition: background .2s var(--gx-ease); } .gx-burger span::before, .gx-burger span::after { content: ""; position: absolute; left: 0; width: 19px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .34s var(--gx-ease), top .24s var(--gx-ease); } .gx-burger span::before { top: -6px; } .gx-burger span::after { top: 6px; } .gx-burger.is-open span { background: transparent; } .gx-burger.is-open span::before { top: 0; transform: rotate(45deg); } .gx-burger.is-open span::after { top: 0; transform: rotate(-45deg); } / Mobile drawer ---------------------------------------------------- / .gx-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; z-index: 1001; transform: translateX(100%); transition: transform .46s var(--gx-ease); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -20px 0 60px rgba(19, 26, 46, .18); padding: 22px; } .gx-drawer.is-open { transform: translateX(0); } .gx-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } / width:auto is essential — the file carries width/height attributes, so without it the intrinsic width wins and the mark renders stretched. / .gx-drawer-head img { height: 36px; width: auto; } .gx-drawer-close { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--gx-line); background: #fff; color: var(--gx-ink); font-size: 1rem; cursor: pointer; display: grid; place-items: center; } .gx-drawer-close:hover { background: var(--gx-rose); color: #fff; border-color: var(--gx-rose); } .gx-drawer nav ul { list-style: none; margin: 0; padding: 0; } .gx-drawer nav > ul > li { border-bottom: 1px solid var(--gx-line); } .gx-drawer nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 4px; font-weight: 650; font-size: .98rem; color: var(--gx-ink); } .gx-drawer nav a:hover, .gx-drawer nav li.is-current > a { color: var(--gx-rose); } .gx-drawer .gx-sub { padding: 0 0 12px 12px; display: none; } .gx-drawer .gx-sub.is-open { display: block; } .gx-drawer .gx-sub a { padding: 10px 4px; font-size: .89rem; font-weight: 550; color: var(--gx-body); } .gx-drawer .gx-sub a i { color: var(--gx-navy-soft); font-size: .82em; } .gx-drawer-toggle { border: 0; background: transparent; color: var(--gx-muted); padding: 6px; cursor: pointer; } .gx-drawer-cta { margin-top: 26px; display: grid; gap: 10px; } .gx-overlay { position: fixed; inset: 0; background: rgba(19, 26, 46, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s var(--gx-ease), visibility .4s; z-index: 1000; } .gx-overlay.is-open { opacity: 1; visibility: visible; } / Spacer matching the fixed shell exactly: top bar 44 + nav 76 + 1px bottom border = 121. / .gx-header-offset { height: 121px; } / ================================================================== 6. Hero ================================================================== / .gx-hero { position: relative; padding: clamp(60px, 5vw, 104px) 0 clamp(70px, 5.5vw, 118px); background: linear-gradient(168deg, #F7F9FD 0%, #EFF2FA 42%, #FBEFF3 100%); overflow: hidden; } .gx-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(52, 72, 125, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 72, 125, .05) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 25%, transparent 75%); pointer-events: none; } .gx-blob { position: absolute; border-radius: 50%; filter: blur(85px); opacity: .5; pointer-events: none; } .gx-blob.b1 { width: 480px; height: 480px; background: rgba(52, 72, 125, .34); top: -170px; right: -110px; } .gx-blob.b2 { width: 400px; height: 400px; background: rgba(190, 64, 101, .26); bottom: -180px; left: -120px; } .gx-hero .container { position: relative; z-index: 2; } .gx-hero h1 { margin-bottom: 22px; } .gx-hero h1 .gx-grad-text { background: var(--gx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gx-hero-sub { font-size: clamp(1.02rem, .96rem + .34vw, 1.2rem); line-height: 1.72; max-width: 620px; margin-bottom: 34px; } .gx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .gx-hero-trust { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; } .gx-hero-trust .t { display: inline-flex; align-items: center; gap: 10px; font-size: .885rem; font-weight: 600; color: var(--gx-ink); } .gx-hero-trust .t i { color: var(--gx-rose); font-size: 1.02rem; } / Hero visual ------------------------------------------------------ / .gx-hero-visual { position: relative; } / Images are wrapped in for WebP delivery, so match the img at any depth rather than as a direct child. / .gx-hero-visual > img, .gx-hero-visual > picture > img { position: relative; z-index: 2; width: 100%; height: auto; animation: gxFloat 7s ease-in-out infinite; } @keyframes gxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } .gx-float-card { position: absolute; z-index: 3; background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--gx-r); box-shadow: var(--gx-sh-md); padding: 14px 17px; display: flex; align-items: center; gap: 12px; animation: gxFloat 5.5s ease-in-out infinite; } .gx-float-card .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: .96rem; background: var(--gx-grad-navy); flex-shrink: 0; } .gx-float-card.is-rose .ic { background: var(--gx-grad-rose); } .gx-float-card b { display: block; font-size: 1.02rem; color: var(--gx-ink); line-height: 1.1; } .gx-float-card span { font-size: .755rem; color: var(--gx-muted); } .gx-float-card.fc1 { top: 8%; left: -22px; animation-delay: .6s; } .gx-float-card.fc2 { bottom: 12%; right: -18px; animation-delay: 1.4s; } / ================================================================== 7. Page banner (inner pages) ================================================================== / .gx-banner { position: relative; padding: clamp(56px, 4.2vw, 96px) 0 clamp(56px, 4.2vw, 92px); background: var(--gx-grad-navy); overflow: hidden; text-align: center; } .gx-banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 40%, #000 20%, transparent 74%); mask-image: radial-gradient(ellipse 72% 76% at 50% 40%, #000 20%, transparent 74%); } .gx-banner::after { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 64, 101, .5) 0%, transparent 68%); right: -170px; top: -230px; pointer-events: none; } .gx-banner .container { position: relative; z-index: 2; } .gx-banner h1 { color: #fff; margin-bottom: 16px; font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.25rem); } .gx-banner p { color: rgba(255, 255, 255, .8); max-width: 720px; margin: 0 auto; font-size: 1.045rem; } .gx-crumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; font-size: .855rem; } .gx-crumb li { color: rgba(255, 255, 255, .58); display: inline-flex; align-items: center; gap: 10px; } .gx-crumb li + li::before { content: "/"; color: rgba(255, 255, 255, .3); } .gx-crumb a { color: rgba(255, 255, 255, .82); font-weight: 600; } .gx-crumb a:hover { color: #fff; } .gx-crumb li[aria-current] { color: var(--gx-rose-soft); font-weight: 600; } / ================================================================== 8. Cards ================================================================== / .gx-card { position: relative; height: 100%; background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-lg); padding: 32px 28px; overflow: hidden; transition: transform .44s var(--gx-ease), box-shadow .44s var(--gx-ease), border-color .44s var(--gx-ease); } .gx-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gx-grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--gx-ease); } .gx-card:hover { transform: translateY(-8px); box-shadow: var(--gx-sh-lg); border-color: transparent; } .gx-card:hover::after { transform: scaleX(1); } .gx-card h3, .gx-card h4 { margin-bottom: 12px; } .gx-card p { margin-bottom: 0; font-size: .945rem; line-height: 1.72; } .gx-card.is-soft { background: var(--gx-surface-soft); border-color: transparent; } / Icon plate ------------------------------------------------------- / .gx-ico { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 17px; font-size: 1.44rem; color: var(--gx-navy); background: var(--gx-navy-mist); margin-bottom: 22px; position: relative; transition: background .44s var(--gx-ease), color .44s var(--gx-ease), transform .44s var(--gx-ease), box-shadow .44s var(--gx-ease); } .gx-card:hover .gx-ico, .gx-service-card:hover .gx-ico { background: var(--gx-grad-navy); color: #fff; transform: rotate(-8deg) scale(1.06); box-shadow: var(--gx-sh-navy); } .gx-ico.is-rose { background: var(--gx-rose-mist); color: var(--gx-rose); } .gx-card:hover .gx-ico.is-rose { background: var(--gx-grad-rose); box-shadow: var(--gx-sh-rose); } .gx-ico.is-sm { width: 48px; height: 48px; font-size: 1.1rem; border-radius: 13px; margin-bottom: 16px; } / Service card ----------------------------------------------------- / .gx-service-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-lg); padding: 34px 30px 30px; overflow: hidden; transition: transform .44s var(--gx-ease), box-shadow .44s var(--gx-ease), border-color .44s var(--gx-ease); } .gx-service-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(52,72,125,.045) 0%, rgba(190,64,101,.05) 100%); opacity: 0; transition: opacity .44s var(--gx-ease); pointer-events: none; } .gx-service-card:hover { transform: translateY(-9px); box-shadow: var(--gx-sh-lg); border-color: transparent; } .gx-service-card:hover::before { opacity: 1; } .gx-service-card > { position: relative; z-index: 1; } .gx-service-card h3 { font-size: 1.235rem; margin-bottom: 12px; } .gx-service-card h3 a { color: inherit; } .gx-service-card:hover h3 a { color: var(--gx-navy); } .gx-service-card p { font-size: .93rem; margin-bottom: 22px; flex-grow: 1; } .gx-service-card .gx-num { position: absolute; top: 20px; right: 24px; font-size: 3.1rem; font-weight: 800; color: rgba(52, 72, 125, .055); line-height: 1; letter-spacing: -.05em; transition: color .44s var(--gx-ease); } .gx-service-card:hover .gx-num { color: rgba(190, 64, 101, .1); } /* Feature row (icon + text, no box) --------------------------------- / .gx-feature { display: flex; gap: 18px; align-items: flex-start; } .gx-feature .gx-ico { margin-bottom: 0; flex-shrink: 0; } .gx-feature h3, .gx-feature h4 { font-size: 1.08rem; margin-bottom: 8px; } .gx-feature p { font-size: .925rem; margin-bottom: 0; } / ================================================================== 9. Checklist ================================================================== / .gx-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .gx-check li { position: relative; padding-left: 36px; font-size: .965rem; line-height: 1.62; color: var(--gx-ink); font-weight: 550; } .gx-check li::before { content: "\f00c"; font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro"; font-weight: 900; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; font-size: .62rem; background: var(--gx-navy-mist); color: var(--gx-navy); transition: background .3s var(--gx-ease), color .3s var(--gx-ease); } .gx-check li:hover::before { background: var(--gx-grad-rose); color: #fff; } .gx-check.is-light li { color: rgba(255, 255, 255, .88); } .gx-check.is-light li::before { background: rgba(255, 255, 255, .16); color: #fff; } .gx-check.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; } / ================================================================== 10. Stats ================================================================== / .gx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .gx-stat { text-align: center; padding: 8px 10px; position: relative; } .gx-stat + .gx-stat::before { content: ""; position: absolute; left: -12px; top: 18%; width: 1px; height: 64%; background: var(--gx-line); } .gx-navy-bg .gx-stat + .gx-stat::before { background: rgba(255, 255, 255, .16); } .gx-stat .n { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.15rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; background: var(--gx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 10px; } .gx-navy-bg .gx-stat .n { background: none; -webkit-text-fill-color: #fff; color: #fff; } .gx-stat .l { font-size: .875rem; font-weight: 600; color: var(--gx-muted); letter-spacing: .01em; } .gx-navy-bg .gx-stat .l { color: rgba(255, 255, 255, .68); } / ================================================================== 11. Process timeline ================================================================== / .gx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; } .gx-step { position: relative; background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-lg); padding: 34px 28px 28px; transition: transform .44s var(--gx-ease), box-shadow .44s var(--gx-ease), border-color .44s var(--gx-ease); height: 100%; } .gx-step:hover { transform: translateY(-7px); box-shadow: var(--gx-sh-lg); border-color: transparent; } .gx-step .s-no { position: absolute; top: -19px; left: 28px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--gx-grad-navy); color: #fff; font-weight: 800; font-size: .95rem; box-shadow: var(--gx-sh-navy); transition: background .4s var(--gx-ease), box-shadow .4s var(--gx-ease); } .gx-step:hover .s-no { background: var(--gx-grad-rose); box-shadow: var(--gx-sh-rose); } .gx-step h3, .gx-step h4 { margin: 18px 0 10px; font-size: 1.11rem; } .gx-step p { font-size: .925rem; margin: 0; } / ================================================================== 12. Accordion / FAQ ================================================================== / .gx-acc { display: grid; gap: 14px; } .gx-acc-item { background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r); overflow: hidden; transition: border-color .34s var(--gx-ease), box-shadow .34s var(--gx-ease); } .gx-acc-item.is-open { border-color: transparent; box-shadow: var(--gx-sh-md); } .gx-acc-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 22px 58px 22px 24px; font-size: 1.015rem; font-weight: 700; color: var(--gx-ink); cursor: pointer; position: relative; line-height: 1.5; letter-spacing: -.012em; transition: color .3s var(--gx-ease); } .gx-acc-q:hover { color: var(--gx-navy); } .gx-acc-item.is-open .gx-acc-q { color: var(--gx-navy); } .gx-acc-q::after { content: "\f067"; font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro"; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: .68rem; background: var(--gx-navy-mist); color: var(--gx-navy); transition: transform .38s var(--gx-ease), background .34s var(--gx-ease), color .34s var(--gx-ease); } .gx-acc-item.is-open .gx-acc-q::after { content: "\f068"; background: var(--gx-grad-rose); color: #fff; transform: translateY(-50%) rotate(180deg); } .gx-acc-a { display: none; padding: 0 24px 24px; } .gx-acc-a p { margin: 0; font-size: .955rem; line-height: 1.78; } / ================================================================== 13. Testimonials ================================================================== / .gx-quote { position: relative; background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-lg); padding: 34px 30px 30px; height: 100%; transition: transform .44s var(--gx-ease), box-shadow .44s var(--gx-ease), border-color .44s var(--gx-ease); } .gx-quote:hover { transform: translateY(-7px); box-shadow: var(--gx-sh-lg); border-color: transparent; } .gx-quote .mark { position: absolute; top: 24px; right: 28px; font-size: 2.6rem; line-height: 1; color: rgba(52, 72, 125, .09); } / "via Google" provenance badge — signals the review is verifiable. / .gx-quote .gx-src { position: absolute; top: 22px; right: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px; background: var(--gx-surface-soft); border: 1px solid var(--gx-line); font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--gx-muted); } .gx-quote .gx-src i { color: #4285F4; font-size: .82rem; } .gx-quote .stars { color: #F5A623; font-size: .84rem; margin-bottom: 16px; letter-spacing: 2px; } .gx-quote p { font-size: .965rem; line-height: 1.8; color: var(--gx-body); margin-bottom: 22px; } .gx-quote .who { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--gx-line); } .gx-quote .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gx-grad-navy); color: #fff; font-weight: 800; font-size: 1rem; flex-shrink: 0; } .gx-quote .who h5, .gx-quote .who .name { margin: 0 0 2px; font-size: .965rem; } .gx-quote .who span { font-size: .8rem; color: var(--gx-muted); } / ================================================================== 14. CTA band ================================================================== / .gx-cta { position: relative; background: var(--gx-grad-navy); border-radius: var(--gx-r-xl); padding: clamp(42px, 4vw, 72px) clamp(28px, 4vw, 66px); overflow: hidden; color: #fff; } .gx-cta::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 64, 101, .55) 0%, transparent 68%); right: -140px; bottom: -220px; } .gx-cta::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(74, 95, 158, .55) 0%, transparent 68%); left: -140px; top: -190px; } .gx-cta > { position: relative; z-index: 2; } .gx-cta h2 { color: #fff; margin-bottom: 16px; } .gx-cta p { color: rgba(255, 255, 255, .8); margin-bottom: 0; font-size: 1.055rem; } .gx-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* ================================================================== 15. Logo / industry marquee ================================================================== / .gx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .gx-marquee-track { display: flex; gap: 14px; width: max-content; animation: gxMarquee 42s linear infinite; } .gx-marquee:hover .gx-marquee-track { animation-play-state: paused; } @keyframes gxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .gx-pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 100px; background: #fff; border: 1px solid var(--gx-line); font-size: .915rem; font-weight: 650; color: var(--gx-ink); white-space: nowrap; transition: border-color .3s var(--gx-ease), transform .3s var(--gx-ease), box-shadow .3s var(--gx-ease); } .gx-pill i { color: var(--gx-rose); font-size: 1rem; } .gx-pill:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--gx-sh-md); } / Tech chips ------------------------------------------------------- / .gx-chips { display: flex; flex-wrap: wrap; gap: 10px; } .gx-chip { padding: 9px 18px; border-radius: 100px; background: var(--gx-surface-soft); border: 1px solid var(--gx-line); font-size: .845rem; font-weight: 650; color: var(--gx-ink); transition: background .3s var(--gx-ease), color .3s var(--gx-ease), border-color .3s var(--gx-ease); } .gx-chip:hover { background: var(--gx-grad-navy); color: #fff; border-color: transparent; } / ================================================================== 16. Split media block ================================================================== / .gx-media { position: relative; } .gx-media img { width: 100%; height: auto; border-radius: var(--gx-r-xl); position: relative; z-index: 2; } .gx-media::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; border-radius: var(--gx-r-xl); background: var(--gx-grad-soft); z-index: 1; } .gx-media.is-plain::before { display: none; } / ================================================================== 17. Contact ================================================================== / .gx-form-card { background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-xl); padding: clamp(26px, 3vw, 44px); box-shadow: var(--gx-sh-md); } .gx-field { margin-bottom: 20px; } .gx-field label { display: block; font-size: .845rem; font-weight: 700; color: var(--gx-ink); margin-bottom: 8px; letter-spacing: -.005em; } .gx-field label .req { color: var(--gx-rose); } .gx-field .form-control, .gx-field input, .gx-field select, .gx-field textarea { width: 100%; padding: 14px 17px; font-size: .95rem; font-family: inherit; color: var(--gx-ink); background: var(--gx-surface-soft); border: 1px solid var(--gx-line); border-radius: 13px; box-shadow: none; height: auto; transition: border-color .3s var(--gx-ease), background .3s var(--gx-ease), box-shadow .3s var(--gx-ease); } .gx-field textarea { min-height: 138px; resize: vertical; } .gx-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B657C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 17px; padding-right: 42px; } .gx-field .form-control:focus, .gx-field input:focus, .gx-field select:focus, .gx-field textarea:focus { outline: none; background: #fff; border-color: var(--gx-navy-soft); box-shadow: 0 0 0 4px rgba(52, 72, 125, .1); } .gx-field.has-error input, .gx-field.has-error select, .gx-field.has-error textarea { border-color: var(--gx-rose); background: var(--gx-rose-mist); } .gx-field .err { display: block; margin-top: 7px; font-size: .795rem; color: var(--gx-rose); font-weight: 600; } .gx-alert { border-radius: 14px; padding: 16px 20px; font-size: .93rem; font-weight: 600; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; } .gx-alert i { font-size: 1.05rem; margin-top: 2px; } .gx-alert.is-ok { background: #E9F7EF; color: #1B7A45; border: 1px solid #BFE6D0; } .gx-alert.is-err { background: var(--gx-rose-mist); color: var(--gx-rose-deep); border: 1px solid rgba(190, 64, 101, .22); } / Contact detail tiles --------------------------------------------- / .gx-contact-tile { display: flex; gap: 18px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid var(--gx-line); border-radius: var(--gx-r-lg); height: 100%; transition: transform .4s var(--gx-ease), box-shadow .4s var(--gx-ease), border-color .4s var(--gx-ease); } .gx-contact-tile:hover { transform: translateY(-6px); box-shadow: var(--gx-sh-lg); border-color: transparent; } .gx-contact-tile .gx-ico { margin-bottom: 0; } .gx-contact-tile:hover .gx-ico { background: var(--gx-grad-navy); color: #fff; transform: rotate(-8deg) scale(1.06); } .gx-contact-tile h3, .gx-contact-tile h4 { font-size: 1.02rem; margin-bottom: 8px; } .gx-contact-tile a, .gx-contact-tile p { display: block; font-size: .935rem; color: var(--gx-body); margin: 0 0 3px; } .gx-contact-tile a:hover { color: var(--gx-rose); } / ================================================================== 18. Footer ================================================================== / .gx-footer { background: var(--gx-navy-darker); color: rgba(255, 255, 255, .68); position: relative; overflow: hidden; } .gx-footer::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(52, 72, 125, .5) 0%, transparent 68%); left: -220px; top: -280px; pointer-events: none; } .gx-footer::after { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 64, 101, .3) 0%, transparent 68%); right: -180px; bottom: -240px; pointer-events: none; } .gx-footer .container { position: relative; z-index: 2; } .gx-footer-main { padding: clamp(52px, 4vw, 86px) 0 clamp(34px, 2.6vw, 52px); } .gx-footer h5, .gx-footer h2 { color: #fff; font-size: .96rem; font-weight: 700; letter-spacing: .01em; margin-bottom: 22px; position: relative; padding-bottom: 13px; } .gx-footer h5::after, .gx-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--gx-rose); border-radius: 2px; } .gx-footer p { color: rgba(255, 255, 255, .62); font-size: .925rem; line-height: 1.78; } .gx-footer-logo { height: 42px; width: auto; margin-bottom: 22px; } .gx-footer ul { list-style: none; margin: 0; padding: 0; } .gx-footer-links li { margin-bottom: 12px; } .gx-footer-links a { color: rgba(255, 255, 255, .64); font-size: .92rem; display: inline-flex; align-items: center; gap: 9px; transition: color .3s var(--gx-ease), transform .3s var(--gx-ease); } .gx-footer-links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .26); transition: background .3s var(--gx-ease), transform .3s var(--gx-ease); flex-shrink: 0; } .gx-footer-links a:hover { color: #fff; transform: translateX(4px); } .gx-footer-links a:hover::before { background: var(--gx-rose); transform: scale(1.5); } .gx-footer-contact li { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 17px; font-size: .92rem; color: rgba(255, 255, 255, .64); line-height: 1.6; } .gx-footer-contact li i { color: var(--gx-rose-soft); font-size: .92rem; margin-top: 4px; width: 16px; flex-shrink: 0; } .gx-footer-contact a { color: rgba(255, 255, 255, .64); } .gx-footer-contact a:hover { color: #fff; } .gx-social { display: flex; gap: 10px; flex-wrap: wrap; } .gx-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .78); font-size: .93rem; transition: background .32s var(--gx-ease), transform .32s var(--gx-ease), color .32s var(--gx-ease), border-color .32s; } .gx-social a:hover { background: var(--gx-grad-rose); color: #fff; transform: translateY(-4px); border-color: transparent; } .gx-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 0; font-size: .865rem; } .gx-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .gx-footer-bottom p { margin: 0; color: rgba(255, 255, 255, .52); font-size: .865rem; } .gx-footer-bottom ul { display: flex; gap: 22px; flex-wrap: wrap; } .gx-footer-bottom a { color: rgba(255, 255, 255, .58); } .gx-footer-bottom a:hover { color: #fff; } / ================================================================== 18b. Long-form / legal prose ================================================================== / .gx-legal h2 { font-size: clamp(1.24rem, 1.1rem + .6vw, 1.55rem); margin: 44px 0 16px; padding-top: 26px; border-top: 1px solid var(--gx-line); } .gx-legal h2:first-of-type { margin-top: 34px; } .gx-legal h3 { font-size: 1.12rem; margin: 28px 0 12px; } .gx-legal p { margin-bottom: 16px; font-size: .975rem; } .gx-legal .gx-lead { margin-bottom: 8px; } .gx-legal ul:not(.gx-check) { padding-left: 20px; margin-bottom: 18px; } .gx-legal ul:not(.gx-check) li { margin-bottom: 9px; font-size: .975rem; line-height: 1.72; } .gx-legal a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .gx-legal strong { color: var(--gx-ink); font-weight: 700; } / ================================================================== 19. Floating actions ================================================================== / .gx-fab { position: fixed; right: 20px; bottom: 22px; z-index: 900; display: grid; gap: 11px; } .gx-fab a, .gx-fab button { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 0; color: #fff; font-size: 1.16rem; cursor: pointer; box-shadow: 0 8px 22px rgba(19, 26, 46, .24); transition: transform .32s var(--gx-ease), box-shadow .32s var(--gx-ease); } .gx-fab a:hover, .gx-fab button:hover { transform: translateY(-4px) scale(1.05); } .gx-fab .wa { background: #25D366; } .gx-fab .call { background: var(--gx-grad-navy); } .gx-fab .top { background: var(--gx-grad-rose); opacity: 0; visibility: hidden; } .gx-fab .top.is-on { opacity: 1; visibility: visible; } / ================================================================== 20. Scroll reveal ------------------------------------------------------------------ The hidden start state is applied ONLY when the inline head script has confirmed JavaScript is alive (html.gx-js). If scripts are blocked or fail, every .gx-reveal simply renders as normal content instead of leaving the page blank. ================================================================== / .gx-js .gx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .78s var(--gx-ease), transform .78s var(--gx-ease); will-change: opacity, transform; } .gx-js .gx-reveal.is-in { opacity: 1; transform: none; } / ================================================================== 21. Responsive ================================================================== / @media (max-width: 1199px) { .gx-nav > li > a { padding: 11px 11px; font-size: .89rem; } .gx-float-card.fc1 { left: 0; } .gx-float-card.fc2 { right: 0; } } @media (max-width: 991px) { .gx-burger { display: grid; } .gx-nav, .gx-header .gx-header-cta { display: none; } .gx-header-inner { height: 70px; } .gx-header-shell.is-stuck .gx-header-inner { height: 64px; } .gx-header-offset { height: 71px; } / nav 70 + 1px border, no top bar / .gx-topbar { display: none; } .gx-stats { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } .gx-stat + .gx-stat::before { display: none; } .gx-steps { grid-template-columns: repeat(2, 1fr); } .gx-hero-visual { margin-top: 52px; } .gx-media::before { display: none; } .gx-cta { text-align: center; } .gx-cta-actions { justify-content: center; } .gx-footer-main { padding-top: 54px; } .gx-footer .col-lg-3, .gx-footer .col-lg-4, .gx-footer .col-md-6 { margin-bottom: 36px; } } @media (max-width: 991px) { / Touch targets — WCAG 2.5.8 asks for at least 24 × 24 CSS px. These are text links whose line box lands a few pixels short on a phone. Grow the hit area, not the type, so nothing shifts visually. / .gx-footer-links a, .gx-link, .gx-crumb a, .gx-contact-tile a { min-height: 24px; } .gx-footer-contact a, .gx-footer-bottom a, .gx-crumb a, .gx-service-card h3 a { display: inline-block; min-height: 24px; line-height: 24px; } / Links sitting inside a sentence are exempt from 2.5.8 (the "inline" exception) — padding them would break the line rhythm of the prose. / } @media (max-width: 767px) { .gx-steps { grid-template-columns: 1fr; gap: 32px; } .gx-check.is-2col { grid-template-columns: 1fr; } .gx-float-card { display: none; } .gx-section { padding: 58px 0; } .gx-hero { padding: 46px 0 62px; } .gx-hero-actions .gx-btn { width: 100%; } .gx-acc-q { font-size: .955rem; padding: 19px 52px 19px 18px; } .gx-acc-a { padding: 0 18px 20px; } .gx-footer-bottom-inner { flex-direction: column; text-align: center; } .gx-fab { right: 14px; bottom: 14px; } .gx-fab a, .gx-fab button { width: 46px; height: 46px; font-size: 1.06rem; } } @media (max-width: 575px) { .gx-stats { grid-template-columns: 1fr 1fr; } .gx-card, .gx-service-card { padding: 26px 22px; } .gx-quote { padding: 26px 22px; } } / ================================================================== 22. Motion & print ================================================================== / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .gx-reveal, .gx-js .gx-reveal { opacity: 1; transform: none; } } @media print { .gx-header, .gx-topbar, .gx-fab, .gx-footer, .gx-cta, .gx-drawer, .gx-overlay { display: none !important; } body { color: #000; } a[href]::after { content: " (" attr(href) ")"; font-size: .8em; } }