/* Plus Jakarta Sans — self-hosted (APX-063: was a Google Fonts @import; the "Aether Beacon" design system ships the binaries, no CDN dependency). */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/PlusJakartaSans-200.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/PlusJakartaSans-300.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/PlusJakartaSans-400.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/PlusJakartaSans-500.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/PlusJakartaSans-600.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/PlusJakartaSans-700.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/PlusJakartaSans-800.ttf") format("truetype"); } /* ============================================================================ APX-063 — "Aether Beacon" design-system tokens Mapped from the design handoff `_ds` tokens onto the existing brand palette. BRAND-CLEAN: the off-brand `--apex-gradient` / `--apex-cyan` #4CBDD4 / `--apex-green` #00FF97 / `--apex-amber` #f0a830 are intentionally NOT ported (they're unused on every page). Teal/navy/black are the brand. ============================================================================ */ :root { /* ----- Brand core ----- */ --apex-teal: #53AEA6; /* primary accent */ --apex-teal-bright: #6FC9C0; /* hover */ --apex-teal-deep: #3F8E87; /* pressed */ --apex-navy: #07223F; /* surfaces & text-on-teal */ --apex-midnight: #0D1B2A; --apex-black: #00020f; /* page background */ --apex-white: #ffffff; /* ----- Text on dark ----- */ --apex-text-strong: #ffffff; --apex-text: rgba(255, 255, 255, 0.72); --apex-text-muted: rgba(255, 255, 255, 0.55); --apex-text-faint: rgba(255, 255, 255, 0.40); /* ----- Hairlines & fills on dark ----- */ --apex-border: rgba(255, 255, 255, 0.10); --apex-border-strong: rgba(255, 255, 255, 0.18); --apex-border-teal: rgba(83, 174, 166, 0.50); --apex-fill-subtle: rgba(255, 255, 255, 0.03); --apex-fill: rgba(255, 255, 255, 0.06); /* ----- Semantic aliases (use these in components) ----- */ --color-primary: var(--apex-teal); --color-primary-hover: var(--apex-teal-bright); --color-primary-active: var(--apex-teal-deep); --color-secondary: var(--apex-navy); /* Page background kept at the template's near-black #00020f (the legacy background images have it baked in; see the section padding note). */ --color-body: var(--apex-black); --color-on-primary: var(--apex-navy); /* navy text on teal fills (a11y) */ --surface-page: var(--apex-black); --surface-card: var(--apex-navy); --surface-raised: var(--apex-fill); --surface-subtle: var(--apex-fill-subtle); --text-strong: var(--apex-text-strong); --text-body: var(--apex-text); --text-muted: var(--apex-text-muted); --text-accent: var(--apex-teal); --border-hairline: var(--apex-border); --border-card: var(--apex-border); --border-hover: var(--apex-border-teal); /* ----- Type ----- */ --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: var(--font-body); --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --text-display: 64px; --text-h1: 48px; --text-h2: 38px; --text-h3: 28px; --text-h4: 22px; --text-lg: 18px; --text-base: 16px; --text-sm: 15px; --text-xs: 13px; --text-eyebrow: 11px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-display: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.12em; /* ----- Spacing / radius / motion ----- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-10: 56px; --space-12: 72px; --space-section: 100px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 16px; --radius-pill: 30px; --radius-round: 50%; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, 0.7); --glow-teal: 0 0 0 1px rgba(83, 174, 166, 0.5), 0 12px 40px -16px rgba(83, 174, 166, 0.45); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 0.2s; --duration: 0.3s; --lift-hover: translateY(-4px); --container-aether: 1168px; /* design content container (header uses 1280) */ } /* ----------------------------------------------------------------------------- Heading tracking + weight correction The template's heading letter-spacing (-0.06em to -0.08em) and font-weight 400 were calibrated for the original SportingGrotesque display font. Plus Jakarta Sans (the brand typeface) is wider and needs relaxed tracking and a heavier display weight, per the brand type scale (Display 700 / Headings 600). -------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; } .hero-content .title, .sec-title .title, .sec-title-three .title, .breadcrumb__title, .xb-project-content .xb-item--title, .xb-service-item .xb-item--title { font-weight: 700; letter-spacing: -0.02em; } /* ----------------------------------------------------------------------------- Sticky header background The sticky header pulls from --color-secondary, which is now brand Deep Navy (#07223F) for UI elements. Keep the header itself at the template's original near-black so it reads as intended over the page. -------------------------------------------------------------------------------- */ .header-style--one .xb-header-area-sticky { background: #00020f !important; } /* ----------------------------------------------------------------------------- Service "Powered by" partner badge Small uppercase tag shown above a service description to credit the technology partner (Google Cloud, Veeam, Fortinet, etc.). Uses the brand teal accent so it reads on the dark service cards. -------------------------------------------------------------------------------- */ .xb-item--partner { display: inline-block; margin-bottom: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .xb-item--partner::before { content: ""; display: inline-block; width: 14px; height: 1px; margin-right: 8px; vertical-align: middle; background: var(--color-primary); } /* The homepage "Our Main Services" accordion collapses each item to a vertical label by design; the partner badge doesn't fit that compact column and was leaking into it. Hide the badge there — it remains on the Services page cards and the service/partner detail pages. */ .xb-service-wrap .xb-item--partner { display: none; } /* ----------------------------------------------------------------------------- "Expertise" mega-menu — two columns: Services + Partners Column headings, a divider between the two columns, chevrons on the partner list, and a teal "All Partnerships" link. Inherits the template's dark mega-menu styling for the link list itself. -------------------------------------------------------------------------------- */ .megamenu_heading { margin: 0 0 16px; padding-bottom: 12px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* Menu item text follows the brand Body scale (Plus Jakarta Sans 15/400), overriding the template's bold 16px+ submenu link style that was stretching the dropdown. */ .mega_menu_box .icon_list > li > a, .mega_menu_box .icon_list .icon_list_text { font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; } /* The template spaces list items with a 29px flex gap, which stretched the menu. Tighten it to a compact, readable rhythm. */ .mega_menu_box .megamenu_widget ul { gap: 12px 22px !important; } @media (min-width: 1200px) { .expertise_col_border { border-left: 1px solid rgba(255, 255, 255, 0.10); padding-left: 40px; } } .expertise_partner_list li a { display: flex; align-items: center; justify-content: space-between; } .expertise_partner_list li a::after { content: "\203A"; /* › */ margin-left: 12px; font-size: 18px; line-height: 1; color: var(--color-primary); opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; } .expertise_partner_list li a:hover::after { opacity: 1; transform: translateX(4px); } /* APX-110 — render the Partner list in 2 balanced columns on the desktop megamenu (10 partners after APX-107). The template pins this list to display:flex via `.mega_menu_wrapper .megamenu_widget ul` (specificity 0,3,0), so a bare `.expertise_partner_list` (0,1,0) can't flip it — match the wrapper-scoped selector (0,3,1) to win, then override to a 2-col grid (fills row-wise, 5 rows × 2). The `gap` likewise beats the existing `!important` on `.mega_menu_box .megamenu_widget ul`. Desktop-only; the stacked mobile menu keeps its single column. */ @media (min-width: 1200px) { .mega_menu_box .megamenu_widget ul.expertise_partner_list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px !important; align-content: start; } } .expertise_all_link { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--color-primary); } .expertise_all_link:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- Hero — 3D Apex mark Replaces the old animated GIF with a real-time WebGL render of the Apex mark (assets/js/apex-mark-3d.js). The static 3D PNG below the canvas is the progressive-enhancement fallback for no-WebGL / reduced-motion visitors; the script adds .is-ready to reveal the canvas (and fade the image out) only once the model is built. Sizing mirrors the template's old `.hero-icon img` footprint (98.9%, 68% on tablet/mobile) so the hero layout is unchanged. -------------------------------------------------------------------------------- */ .hero-icon .apex-mark-3d { position: relative; width: 98.9%; aspect-ratio: 1 / 1; } @media (max-width: 991px) { .hero-icon .apex-mark-3d { width: 68%; } } .hero-icon .apex-mark-3d .apex-mark-3d__canvas, .hero-icon .apex-mark-3d .apex-mark-3d__fallback { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.6s ease; } .hero-icon .apex-mark-3d .apex-mark-3d__canvas { display: block; opacity: 0; } .hero-icon .apex-mark-3d .apex-mark-3d__fallback { object-fit: contain; } .hero-icon .apex-mark-3d.is-ready .apex-mark-3d__canvas { opacity: 1; } .hero-icon .apex-mark-3d.is-ready .apex-mark-3d__fallback { opacity: 0; } /* ----------------------------------------------------------------------------- Homepage "partners" strip (was the template clients marquee) The original section showed placeholder client logos ("120 Companies Work With Us"). It now carries the real technology-partner logos, which are full-colour (several with dark text), so each sits on a light rounded chip for consistent legibility on the dark band. Scoped to .brand so the inner-page brand strips are unaffected. -------------------------------------------------------------------------------- */ .brand .xb-brand-inner { gap: 32px; margin-right: 32px; } .brand .xb-brand-item { display: flex; align-items: center; justify-content: center; width: 180px; height: 84px; padding: 14px 24px; background: #ffffff; border-radius: 14px; } .brand .xb-brand-item img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; } .brand .xb-brand-item:hover { opacity: 1; transform: translateY(-3px); } /* ----------------------------------------------------------------------------- About — "How We Work" four-step band Replaces the template's decorative image marquee (placeholder shots) in the "Who We Are" section with the four steps of the brand promise: build, secure, document, hand over. Static (no decorative scroll) per the brand motion guidance. Navy contained cards on the near-black page, teal step numbers. -------------------------------------------------------------------------------- */ .xb-step { height: 100%; padding: 32px 28px; background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; transition: 0.3s; } .xb-step:hover { border-color: rgba(83, 174, 166, 0.5); transform: translateY(-4px); } .xb-step--num { display: block; margin-bottom: 18px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-primary); } .xb-step--title { margin: 0 0 12px; font-size: 22px; font-weight: 600; color: #fff; } .xb-step--text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } /* ----------------------------------------------------------------------------- Project references — case-study cards in the scroll-stack gallery The template's cards were placeholder images; these now carry the real client references (client + partner + scope + outcome). Each leads with the partner logo on a light chip (several partner logos are dark, so they need it) and ends with a teal-labelled outcome line. The card backdrop is a branded gradient (assets/img/bg/case-bg.svg) since there are no project photos. -------------------------------------------------------------------------------- */ .xb-case-logo { display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 10px 18px; margin-bottom: 26px; background: #fff; border-radius: 12px; } .xb-case-logo img { max-height: 42px; max-width: 170px; width: auto; object-fit: contain; } .xb-case-outcome { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 16px; line-height: 1.6; color: #fff; } .xb-case-outcome span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } /* Project references page (project.html) — static case-study card grid */ .xb-case-card { height: 100%; padding: 32px 28px; background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; transition: 0.3s; } .xb-case-card:hover { border-color: rgba(83, 174, 166, 0.5); transform: translateY(-4px); } .xb-case-tech { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); } .xb-case-client { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: #fff; } .xb-case-scope { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } /* ===== Insights hub ===== */ .xb-insights-intro { max-width: 640px; margin: 0 auto 50px; } .xb-insights-intro p { font-size: 18px; color: rgba(255, 255, 255, 0.65); margin: 0; } .xb-insights-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-bottom: 55px; } .xb-insights-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 0; } .xb-filter-btn { padding: 10px 26px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.8); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 200ms ease; } .xb-filter-btn:hover { border-color: var(--color-primary, #53aea6); color: #fff; } .xb-filter-btn.active { background: var(--color-primary, #53aea6); border-color: var(--color-primary, #53aea6); color: #07223f; } /* Isotope grid: items are positioned by Isotope (same engine as the careers job filter), so columns carry their own width + gutters instead of Bootstrap's. */ .xb-insights-grid { margin: 0 -15px; } .xb-insight-col { width: 33.333%; padding: 0 15px; margin-bottom: 30px; } /* Drives the filter/sort animation. With transitionDuration:0 Isotope repositions items instantly via left/top, so we ease those (plus opacity) to make the cards glide to their new spots like the careers job filter. Gated behind .is-ready (added after the first layout) so items don't animate in from the corner on page load. */ .xb-insights-grid.is-ready .xb-insight-col { transition: left 0.45s ease, top 0.45s ease, opacity 0.45s ease !important; } @media (max-width: 991px) { .xb-insight-col { width: 50%; } } @media (max-width: 575px) { .xb-insight-col { width: 100%; } } .xb-insight-card { display: flex; flex-direction: column; height: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; transition: transform 250ms ease, border-color 250ms ease; } .xb-insight-card:hover { transform: translateY(-6px); border-color: rgba(83, 174, 166, 0.5); } .xb-insight-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; } .xb-insight-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .xb-insight-card:hover .xb-insight-media img { transform: scale(1.05); } .xb-insight-media--logo { display: flex; align-items: center; justify-content: center; background: #fff; padding: 28px; } .xb-insight-media--logo img { width: auto; max-width: 70%; max-height: 80px; object-fit: contain; transform: none !important; } .xb-insight-sample { position: absolute; top: 12px; right: 12px; background: #53aea6; color: #07223f; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 4px; } .xb-insight-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px; } .xb-insight-badge { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary, #53aea6); border: 1px solid rgba(83, 174, 166, 0.4); border-radius: 4px; padding: 4px 10px; margin-bottom: 16px; } .xb-insight-title { font-size: 20px; font-weight: 600; line-height: 1.35; margin: 0 0 12px; /* APX-041: clamp to 2 lines + reserve the height so every card in a row is the same height regardless of title length (Isotope positions by natural height). */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 54px; /* 2 lines @ 20px/1.35 */ } .xb-insight-title a { color: #fff; transition: color 200ms ease; } .xb-insight-title a:hover { color: var(--color-primary, #53aea6); } .xb-insight-excerpt { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0 0 20px; /* APX-041: clamp to 3 lines + reserve the height (see .xb-insight-title). */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 72px; /* 3 lines @ 15px/1.6 */ } .xb-insight-meta { margin-top: auto; font-size: 13px; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, 0.45); /* APX-041: meta can wrap to 2 lines (e.g. Project Reference partners list); clamp + reserve so a 1-line meta doesn't make its card shorter. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; /* 2 lines @ 13px/1.6 */ } .xb-insights-empty { text-align: center; font-size: 18px; color: rgba(255, 255, 255, 0.6); margin-top: 30px; } /* ----- Insights tools: industry / sort dropdowns (borderless, centered) ----- */ .xb-insights-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 26px; margin-bottom: 0; } .xb-tool { display: inline-flex; align-items: baseline; gap: 9px; margin: 0; } .xb-tool-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.4); } .xb-tool-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.14); } .xb-select { appearance: none; -webkit-appearance: none; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2353aea6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0; color: #fff; font-size: 15px; font-weight: 600; padding: 4px 22px 6px 2px; cursor: pointer; transition: border-color 200ms ease, color 200ms ease; } .xb-select:hover, .xb-select:focus { border-bottom-color: var(--color-primary, #53aea6); color: var(--color-primary, #53aea6); outline: none; } .xb-select option { background: #07223f; color: #fff; } /* ----- Event cards ----- */ .xb-insight-media--event { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 22px; background: linear-gradient(135deg, rgba(83, 174, 166, 0.22), rgba(7, 34, 63, 0.55)); color: var(--color-primary, #53aea6); } .xb-event-format { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: rgba(83, 174, 166, 0.85); border-radius: 4px; padding: 4px 12px; } .xb-event-icon { align-self: flex-end; color: rgba(255, 255, 255, 0.85); } .xb-insight-card--event:hover .xb-insight-media--event { background: linear-gradient(135deg, rgba(83, 174, 166, 0.32), rgba(7, 34, 63, 0.55)); } .xb-insight-badge--event { color: #fff; border-color: rgba(255, 255, 255, 0.35); } /* ----------------------------------------------------------------------------- Footer — social links Centered icon row above the footer bottom bar (replaces the template's full-width social "table" rows). Inline SVGs, so the X and LinkedIn marks always render without a Font Awesome dependency. href is a placeholder until the live profile URLs are provided. -------------------------------------------------------------------------------- */ .xb-footer-social { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 20px 0 45px; } .footer .xb-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .footer .xb-footer-social-link svg { display: block; fill: currentColor; } .footer .xb-footer-social-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #07223F; transform: translateY(-3px); } /* ----------------------------------------------------------------------------- Expertise mega-menu - grouped services Services are clustered under the four practice-area sub-headings (matching the deck / About / homepage taxonomy) so the dropdown scans cleanly instead of a flat list of eight long names. -------------------------------------------------------------------------------- */ .megamenu_subgroup + .megamenu_subgroup { margin-top: 18px; } .megamenu_subgroup-title { display: block; margin: 0 0 10px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); } .megamenu_subgroup .icon_list { margin: 0; } /* ----------------------------------------------------------------------------- Feature/"why us" cards - equal height in their row (APX-029, was about-only) The theme stretches the Bootstrap COLUMNS but leaves the bordered inner card at content height, so shorter-text cards end up shorter than their row-mates (Khalid: "why does this keep happening?"). Make every feature card + its inner fill the column so all cards in a row match the tallest. Broadened from .about-page to ALL .xb-feature-item (homepage "why us" + about), EXCEPT the .xb-feature-item2 layout (homepage feature section — stacked left/right around the center graphic, not an equal-height row). See also APX-016 (success cards) / APX-024 (contact cards). -------------------------------------------------------------------------------- */ .xb-feature-item:not(.xb-feature-item2), .xb-feature-item:not(.xb-feature-item2) .xb-item--inner { height: 100%; } /* ----------------------------------------------------------------------------- Testimonials - equal-height slides The client testimonial cards (Nami / Thimar Al Jazirah / IPS) carry quotes of different lengths. Let each slide stretch and the card fill it so all three match the tallest card's height in the slider. -------------------------------------------------------------------------------- */ .testimonial .swiper-slide { height: auto; } .testimonial .xb-testimonial-item, .testimonial .xb-testimonial-item .xb-item--inner { height: 100%; } /* ----------------------------------------------------------------------------- Expertise mega-menu - tighten grouped service spacing Grouped service links inherited a tall ~33px line-height which, on top of the row gap, stretched the dropdown. Tighten line-height and the row gap so each group reads compactly. Higher specificity (.megamenu_subgroup) so it wins. -------------------------------------------------------------------------------- */ .mega_menu_box .megamenu_subgroup .icon_list { gap: 7px 22px !important; } .mega_menu_box .megamenu_subgroup .icon_list > li > a, .mega_menu_box .megamenu_subgroup .icon_list .icon_list_text { font-size: 15px !important; line-height: 1.3 !important; } /* ----------------------------------------------------------------------------- Reduced motion (brand principle: always respect prefers-reduced-motion) Neutralises CSS animation / transition / smooth-scroll. The JS-driven motion (Lenis smooth-scroll, parallax, marquee, gsap scroll reveals) is gated in main.js; the magic cursor in magiccursor.js; the WebGL hero mark already keeps its static fallback in apex-mark-3d.js. -------------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* WOW.js hides .wow elements until a scroll-reveal animation runs; with motion off, force them visible so no content depends on an animation that won't fire. */ .wow { visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; } /* The custom cursor is not instantiated under reduced motion; make sure its element (if any cached markup remains) never shows. */ .cb-cursor { display: none !important; } } /* ----------------------------------------------------------------------------- Footer polish (APX-013) - The contact email is a real address: keep it lowercase (the template's .contact-method applies text-transform: capitalize, which renders "Info@apexaether.sa"). The location span still capitalizes as before. - The fixed back-to-top button (bottom-right) overlapped the bottom-bar email at full scroll; add bottom clearance so the last row sits above it. -------------------------------------------------------------------------------- */ .footer .xb-footer-bottom a.contact-method { text-transform: none; } .footer .xb-footer-bottom { /* Clear the fixed back-to-top button: it sits 40px up + 40px tall = 80px from the viewport bottom, so the last row needs more than that of clearance. */ padding-bottom: 100px; } /* ----------------------------------------------------------------------------- About hero gallery — constrain image/column width (APX-009) The gallery columns size to the image's natural width (the template sets no width at desktop). The new photos are 2x-resolution (484px wide) for retina, which doubled each column and wrapped the 5-across row. Pin the image to its column width so source resolution no longer affects layout; the column is fixed to the template's intended 242px on desktop so the row stays 5-across. -------------------------------------------------------------------------------- */ .about-top-image .xb-img a img { width: 100%; height: auto; display: block; } @media (min-width: 1200px) { .about-top-image .img-hove-effect { flex: 0 0 242px; width: 242px; } } /* ----------------------------------------------------------------------------- Legal pages (Privacy / Terms) — APX-005 Subhead size (replaces the per-

inline style="font-size:20px") + a small centered legal-links row in the footer bottom bar. -------------------------------------------------------------------------------- */ .legal-subhead { font-size: 20px; } .footer-legal-links { margin-top: 6px; font-size: 14px; } .footer-legal-links a { color: rgba(255, 255, 255, 0.7); } .footer-legal-links a:hover { color: var(--color-primary); } /* ----------------------------------------------------------------------------- Homepage success-story cards — Partner/Solution list (APX-016) The template lays `.xb-item--list` out as a flex row with a 127px gap. When the Partner/Solution items fit on one line (Nami) the card looks clean; when the text is wider (Thimar, IPS) they wrap and that 127px becomes a huge vertical row-gap, leaving a big empty band mid-card. Stack the two lines in a column with consistent spacing so all three cards match. -------------------------------------------------------------------------------- */ .xb-project-content .xb-item--list { flex-direction: column; align-items: flex-start; gap: 10px; } /* ----------------------------------------------------------------------------- Blog meta (category + date) — sentence/proper case, not ALL CAPS (APX-012) The template force-uppercases the meta row, which turned dates into "MARCH 24,2025". Brand type scale leans sentence case; source text now carries the correct casing ("Cloud", "March 24, 2025"), so drop the transform. -------------------------------------------------------------------------------- */ .xb-blog-item .xb-item--meta li { text-transform: none; } /* ----------------------------------------------------------------------------- Testimonial tag pill (APX-012) The lone star icon read as a fake 1-star rating (and used an off-brand colour); it's been removed, leaving an honest category tag. Drop the leftover left margin the template added to the (former) second item so the single label sits flush. -------------------------------------------------------------------------------- */ .xb-testimonial-item .xb-item--rating li:last-child { margin-left: 0; } /* ----------------------------------------------------------------------------- Homepage "Our Main Services" slider — full-bleed image + navy overlay (APX-018) Option A (Khalid). The template panel is 800–920px tall but the service image rendered as a ~335×311 box floating in empty navy. Make the image the panel's full-bleed background (object-fit:cover) and lay the title / partner / description over it behind a navy #07223F gradient (brand §08 navy-duotone hero treatment). The panel's images are an identical 4-up stack (the template's hover-reveal); here we flatten them to one full-cover layer and drop the circular hover-scale so the art reads as integrated, not a thumbnail. (Sitewide hover-zoom removal = APX-020.) -------------------------------------------------------------------------------- */ .xb-service-item .xb-item--img { position: absolute; inset: 0; z-index: 0; } .xb-service-item .xb-item--img a { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; transform: none; } .xb-service-item .xb-item--img img { width: 100%; height: 100%; object-fit: cover; } /* navy gradient so the overlaid white text stays legible over any image */ .xb-service-item .xb-item--img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 34, 63, 0.72) 0%, rgba(7, 34, 63, 0.45) 42%, rgba(7, 34, 63, 0.92) 100%); } /* lift the text above the full-bleed image + gradient */ .xb-service-item .xb-item--head-item, .xb-service-item .xb-item--partner, .xb-service-item .xb-item--content { position: relative; z-index: 2; } /* ----------------------------------------------------------------------------- Remove the image hover "zoom-out" (APX-020) The template's .img-hove-effect shrinks its stacked image copies on hover (scale .9/.7/.5), which reads as the image zooming away / getting harder to see (Khalid). Hold them static on hover instead. This is the sitewide gallery effect (about, careers, blog, service/partner detail galleries). Subtle zoom-INs elsewhere (1.05–1.1 on insight/blog cards) are left — the ticket allows a very subtle, non-distracting effect. No new motion, so prefers-reduced-motion (APX-011) is unaffected. -------------------------------------------------------------------------------- */ .img-hove-effect:hover .xb-img a:nth-child(2), .img-hove-effect:hover .xb-img a:nth-child(3), .img-hove-effect:hover .xb-img a:nth-child(4) { transform: none; } /* ----------------------------------------------------------------------------- Contact cards — equal height, CTA pinned to the bottom (APX-024) The three cards are content-driven, so card 1 (whose value wraps to two lines) grew ~33px taller and the CTA buttons fell out of alignment. The Bootstrap row already stretches the columns to the tallest; make the card fill that height and turn the body into a flex column so the button sits at the bottom of every card. -------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Detail-page hero — constrain to a wide banner (APX-026) The hero img scaled to full width with auto height, so reused non-wide heroes rendered as towers (e.g. about-01-datacenter 484×820 → 1290×2186). Lock every detail hero to a 2/1 banner (≈ the original 1290×600 intent; matches the new wide 1280×640 service heroes natively) and cover-crop any source cleanly. -------------------------------------------------------------------------------- */ .service-det-img img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center; } /* ----------------------------------------------------------------------------- Contact cards — equal height, CTA pinned to the bottom (APX-024) The three cards are content-driven, so card 1 (whose value wraps to two lines) grew ~33px taller and the CTA buttons fell out of alignment. The Bootstrap row already stretches the columns to the tallest; make the card fill that height and turn the body into a flex column so the button sits at the bottom of every card. -------------------------------------------------------------------------------- */ .contact .xb-contact-items, .contact .xb-contact-items .xb-item--inner { height: 100%; } .contact .xb-contact-items .xb-item--inner { display: flex; flex-direction: column; } .contact .xb-contact-items .xb-item--holder { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; } .contact .xb-contact-items .xb-item--holder .form-btn { margin-top: auto; } /* ----------------------------------------------------------------------------- Expertise megamenu — cap to viewport + scroll (APX-027) The desktop Expertise mega panel lists 20 items and opened ~918px tall on an 827px viewport, so the bottom CTAs/All-Partnerships were clipped and unreachable. Cap the visible panel to the viewport (below the ~88px header) and let it scroll. Scoped to .main-menu so the mobile/collapsed nav is unaffected. -------------------------------------------------------------------------------- */ .main-menu .mega_menu_wrapper_inner { max-height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden; /* APX-075: brand navy panel (overrides main.css's template-default #222746 indigo). Stays fully opaque, so no APX-069 bleed-through regression. */ background: var(--apex-navy); /* APX-076: the panel top met the Get Started button's bottom edge (both at y95) with no gap, so they read as overlapping. Drop the panel down to open clear space below the header. */ margin-top: 16px; } /* ----------------------------------------------------------------------------- Expertise megamenu v4 — original design kept, services split into 2 columns (APX-027 v4). Khalid: v3's 2×2/partners-removed restructure broke the dropdown. Restored the original design (services + partners + promo + CTA banner), still data-driven (services/partners loop the JSON). The height fix is laying the 4 service category groups across TWO columns (2+2) inside the Services column so the panel is short enough to show fully without scrolling on a normal laptop. (The ?v=27 cap+scroll above stays as a very-short-window fallback.) -------------------------------------------------------------------------------- */ .expertise_services_2col > [class*="col-"] + [class*="col-"] .megamenu_subgroup:first-child { /* keep the top of both inner columns aligned */ margin-top: 0; } /* ----------------------------------------------------------------------------- Expertise megamenu v5 — CSS-only spacing trim so the panel fully fits (APX-027 v5) v4 kept the original design (828→719px) but still overflowed ~800px viewports. No markup/content/structure change — just remove the excess vertical whitespace: the biggest waste was .social_area's 70px/35px padding (≈105px); also tighten the section-heading and category-group gaps. Target panel ≤ ~660px so it shows fully, no scroll, no stretch, on a ~800px-tall laptop. (?v=27 cap+scroll stays as backstop.) -------------------------------------------------------------------------------- */ .mega_menu_wrapper .social_area { padding: 24px 0 18px; } .mega_menu_box .megamenu_heading { margin-bottom: 10px; padding-bottom: 8px; } .mega_menu_box .megamenu_subgroup + .megamenu_subgroup { margin-top: 12px; } /* ----------------------------------------------------------------------------- Footer email icon — match the location icon's size (APX-030) email-icon.svg had a 52×46 intrinsic size (vs location-icon's 25×25) and a near-black fill; the SVG fill is now brand teal (#53AEA6), and this caps it to the same ~25px slot so the two footer-bottom icons match. Aspect preserved. -------------------------------------------------------------------------------- */ .xb-footer-bottom .contact-item img { width: 25px; height: auto; } /* ----------------------------------------------------------------------------- Homepage "latest" section — Articles/Blogs type toggle (APX-037) Restored the original 1-big-2-small layout; this is the new left-panel toggle that switches the right column between the Articles set and the Blogs set (auto-rotation in index.njk's inline script). Inactive set uses [hidden]. -------------------------------------------------------------------------------- */ .xb-blog-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); } .xb-blog-tab { padding: 8px 20px; border: 0; border-radius: 7px; background: transparent; color: #b2b3b7; font-family: var(--font-heading); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .xb-blog-tab:hover { color: #fff; } .xb-blog-tab.active { background: var(--color-primary); /* APX-041 follow-up: navy (not white) on teal — white-on-teal is 2.63:1 (fails WCAG AA); navy #07223f is 6.09:1 and matches .xb-filter-btn.active. */ color: #07223f; } .xb-blog-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ----------------------------------------------------------------------------- Homepage "latest" — compact cards + switch transition (APX-038) APX-037 left the big image uncapped (~615px) so the 1-big-2-small set spanned ~1246px and the two small cards fell below the fold. Cap the image heights and tighten the holder so the whole set fits (~600px) within a ~770px viewport. Also fade/slide the active type-set in on toggle + auto-rotate (reduced-motion off). -------------------------------------------------------------------------------- */ .blog .xb-blog-item .xb-img img { width: 100%; height: 205px; object-fit: cover; display: block; } .blog .xb-blog-item.xb-small-blog-item .xb-img img { height: 140px; } .blog .xb-blog-item .xb-item--holder { padding: 14px 22px 16px 22px; } .blog .xb-blog-item .xb-item--title { font-size: 18px; margin-top: 6px; line-height: 1.3; } .blog .xb-blog-item.xb-small-blog-item .xb-item--title { font-size: 16px; } /* ----------------------------------------------------------------------------- Per-card switch fade + equal card size + no load flash (APX-039 → APX-040) - Inactive set is CSS-hidden by default (no first-paint flash of both sets); JS just toggles .is-active. The per-card entrance is a keyframe (re-runs each time a set becomes .is-active / display:block), staggered 0/70/140ms. - Titles clamped to 2 lines + reserved min-height on BOTH the big and small cards so Article and Blog cards are identical at every width (no toggle jump). (APX-040 adds the big card; APX-039 did the smalls.) -------------------------------------------------------------------------------- */ .blog .xb-blog-set:not(.is-active) { display: none; } .blog .xb-blog-set.is-active .xb-blog-item { animation: xbBlogFadeUp 0.4s ease both; } .blog .xb-blog-set.is-active .row > div:nth-child(2) .xb-blog-item { animation-delay: 0.07s; } .blog .xb-blog-set.is-active .row > div:nth-child(3) .xb-blog-item { animation-delay: 0.14s; } @keyframes xbBlogFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* equal size across types: clamp titles to 2 lines + reserve the height */ .blog .xb-blog-item .xb-item--title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog .xb-blog-item:not(.xb-small-blog-item) .xb-item--title { min-height: 47px; } .blog .xb-blog-item.xb-small-blog-item .xb-item--title { min-height: 42px; } @media (prefers-reduced-motion: reduce) { .blog .xb-blog-set.is-active .xb-blog-item { animation: none; } } /* ----------------------------------------------------------------------------- Screen-reader-only utility (APX-043) Visually hidden but exposed to assistive tech — used for section

s that keep the heading outline contiguous (h1 → h2 → h3) on the listing pages without changing the visible design. -------------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- CTA funnel form additions (APX-034) — honeypot, consent, error, thank-you. Reuses the template's existing contact-form styling for the inputs; only the new elements are styled here. -------------------------------------------------------------------------------- */ /* Honeypot: removed from layout + a11y tree; off-screen so bots still fill it. */ .xb-hp { position: absolute !important; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .xb-field-note { margin: 8px 2px 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .xb-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); cursor: pointer; } .xb-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary, #53aea6); } .xb-consent a { color: var(--color-primary, #53aea6); text-decoration: underline; } .xb-funnel-error { margin: 18px 0 0; padding: 12px 16px; background: rgba(220, 53, 69, 0.12); border: 1px solid rgba(220, 53, 69, 0.5); border-radius: 8px; color: #ffb3ba; font-size: 14px; } .xb-funnel-thankyou { text-align: center; padding: 24px 20px; } .xb-funnel-thankyou .title { margin-bottom: 12px; } .xb-funnel-ref strong { display: inline-block; margin: 6px 0 14px; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-primary, #53aea6); } /* Events empty-state (APX-034 / events hidden until real ones exist) */ .xb-events-none { max-width: 620px; margin: 40px auto 0; padding: 48px 28px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; } .xb-events-none h3 { font-size: 22px; font-weight: 600; margin: 0 0 12px; color: #fff; } .xb-events-none p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0; } .xb-events-none a { color: var(--color-primary, #53aea6); text-decoration: underline; } /* ----------------------------------------------------------------------------- "Who We Are" section redesign (APX-045) Editorial two-column header + horizontal Build·Secure·Document·Hand Over flow. Brand-conformed: teal #53aea6 throughout (no off-brand green); --color-* vars; bg is the documented #00020f --color-body. Motion reuses .wow fadeInUp (reduced- motion already guarded, APX-011). -------------------------------------------------------------------------------- */ .xb-whoweare { position: relative; overflow: hidden; } .xb-whoweare .container { position: relative; z-index: 1; } .xb-wwa-glow { position: absolute; top: -180px; right: -120px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(83, 174, 166, 0.14), rgba(83, 174, 166, 0) 70%); pointer-events: none; z-index: 0; } /* Header */ .xb-wwa-header { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 80px; align-items: start; padding-bottom: 90px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .xb-wwa-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary, #53aea6); } .xb-wwa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary, #53aea6); box-shadow: 0 0 14px rgba(83, 174, 166, 0.8); } .xb-wwa-lead { margin: 22px 0 0; max-width: 300px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); } .xb-wwa-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 36px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .xb-wwa-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary, #53aea6); box-shadow: 0 0 10px rgba(83, 174, 166, 0.8); } .xb-wwa-headline { margin: 0; font-size: 62px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .xb-wwa-accent { color: var(--color-primary, #53aea6); } /* Process flow */ .xb-wwa-flow { margin-top: 80px; } .xb-wwa-flow-head { display: flex; align-items: center; gap: 20px; margin-bottom: 44px; } .xb-wwa-flow-label { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); white-space: nowrap; } .xb-wwa-flow-rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(83, 174, 166, 0.5), transparent); } .xb-wwa-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; } /* Connector line behind the step nodes */ .xb-wwa-steps::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.1); } .xb-wwa-step { position: relative; } .xb-wwa-node { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: #00020f; border: 1px solid rgba(83, 174, 166, 0.5); position: relative; z-index: 1; } .xb-wwa-node-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary, #53aea6); box-shadow: 0 0 12px rgba(83, 174, 166, 0.7); } .xb-wwa-step-num { display: block; margin: 22px 0 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.18em; color: var(--color-primary, #53aea6); } .xb-wwa-step-title { margin: 0 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } .xb-wwa-step-text { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.55); } @media (max-width: 1023px) { .xb-wwa-header { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; } .xb-wwa-headline { font-size: 44px; } } @media (max-width: 767px) { .xb-wwa-headline { font-size: 34px; } .xb-wwa-flow { margin-top: 56px; } .xb-wwa-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } .xb-wwa-steps::before { display: none; } } @media (max-width: 479px) { .xb-wwa-steps { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- Testimonials section redesign (APX-046) 3 real consented testimonials (Nami / Thimar / IPS) as equal-height cards with a teal gradient accent. Brand-conformed: no off-brand cyan/green, teal family only. Replaces the old Swiper slider. -------------------------------------------------------------------------------- */ .xb-tnew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .xb-tnew-card { position: relative; display: flex; flex-direction: column; height: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 36px 32px 30px; overflow: hidden; text-align: left; transition: transform 250ms ease, border-color 250ms ease; } /* teal gradient accent bar (was the off-brand cyan→green gradient) */ .xb-tnew-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(120deg, #53aea6 0%, #6fc9c0 60%, #53aea6 100%); } .xb-tnew-card:hover { transform: translateY(-6px); border-color: rgba(83, 174, 166, 0.5); } .xb-tnew-quote { font-family: Georgia, "Times New Roman", serif; font-size: 52px; line-height: 0.8; color: var(--color-primary, #53aea6); opacity: 0.45; margin-bottom: 10px; } .xb-tnew-tag { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary, #53aea6); border: 1px solid rgba(83, 174, 166, 0.4); border-radius: 4px; padding: 4px 10px; margin-bottom: 18px; } .xb-tnew-text { margin: 0 0 26px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); font-style: normal; } .xb-tnew-author { display: flex; align-items: center; gap: 14px; margin-top: auto; } .xb-tnew-logo { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; } .xb-tnew-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .xb-tnew-name { display: block; font-size: 17px; font-weight: 600; color: #fff; } .xb-tnew-desig { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; } @media (max-width: 991px) { .xb-tnew-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .xb-tnew-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- About Us redesign (APX-049) Bespoke editorial About page (base.njk layout, no breadcrumb). Dark surface, brand teal accents only (0 off-brand cyan/green), white headings, layered text tints for AA contrast. Border-ruled / numbered blocks instead of card grids. -------------------------------------------------------------------------------- */ .xb-ab { position: relative; padding: 70px 0 30px; overflow: hidden; } .xb-ab .container { position: relative; z-index: 1; } .xb-ab section { position: relative; } /* Shared section heads */ .xb-ab-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary, #53aea6); } .xb-ab-eyebrow-center { justify-content: center; } .xb-ab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary, #53aea6); box-shadow: 0 0 14px rgba(83, 174, 166, 0.8); } .xb-ab-h2 { margin: 18px 0 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-wrap: balance; } /* HERO */ .xb-ab-hero { padding: 16px 0 64px; } .xb-ab-glow { position: absolute; top: -200px; right: -140px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(83, 174, 166, 0.14), rgba(83, 174, 166, 0) 70%); pointer-events: none; z-index: 0; } /* Decorative apex-mark watermark (from the design source) */ .xb-ab-watermark { position: absolute; pointer-events: none; z-index: 0; width: 380px; height: auto; } .xb-ab-watermark-hero { top: -50px; right: -70px; opacity: 0.06; } .xb-ab-watermark-cta { left: 50%; top: 50%; width: 320px; transform: translate(-50%, -50%); opacity: 0.05; } .xb-ab-cta > *:not(.xb-ab-watermark) { position: relative; z-index: 1; } .xb-ab-hero-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .xb-ab-meta { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .xb-ab-h1 { margin: 44px 0 0; font-size: clamp(44px, 8.2vw, 92px); line-height: 0.98; font-weight: 700; letter-spacing: -0.03em; color: #fff; text-wrap: balance; } .xb-ab-accent { color: var(--color-primary, #53aea6); } .xb-ab-hero-lede { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 54px; max-width: 880px; } .xb-ab-hero-lede p { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); } /* IMAGE COLLAGE */ .xb-ab-collage { position: relative; height: 380px; margin-bottom: 80px; } .xb-ab-collage-main, .xb-ab-collage-inset { position: absolute; border-radius: 16px; overflow: hidden; } .xb-ab-collage-main { left: 0; top: 0; width: 62%; height: 330px; border: 1px solid rgba(255, 255, 255, 0.1); } .xb-ab-collage-inset { right: 0; bottom: 0; width: 46%; height: 250px; border: 1px solid rgba(83, 174, 166, 0.5); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8); } .xb-ab-collage img { width: 100%; height: 100%; object-fit: cover; display: block; } .xb-ab-collage-veil { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7, 34, 63, 0.4), rgba(0, 2, 15, 0.45)); } .xb-ab-collage-tag { position: absolute; left: 22px; bottom: 18px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } /* THREE PRINCIPLES */ .xb-ab-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 80px; } .xb-ab-principle .xb-ab-rule { display: block; width: 40px; height: 2px; background: var(--color-primary, #53aea6); margin-bottom: 20px; } .xb-ab-principle h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .xb-ab-principle p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); } /* MISSION / VISION */ .xb-ab-mv { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 52px; padding: 52px 0 80px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .xb-ab-mv-divider { background: rgba(255, 255, 255, 0.1); } .xb-ab-label { display: block; margin-bottom: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary, #53aea6); } .xb-ab-statement { margin: 0; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.45; font-weight: 500; letter-spacing: -0.015em; color: #fff; } .xb-ab-statement-note { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-primary, #53aea6); } /* WHY APEX */ .xb-ab-why { padding-bottom: 80px; } .xb-ab-why-list { margin-top: 40px; } .xb-ab-why-row { display: grid; grid-template-columns: 60px minmax(220px, 360px) 1fr; gap: 32px; align-items: baseline; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .xb-ab-why-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .xb-ab-why-num { font-size: 18px; font-weight: 700; color: var(--color-primary, #53aea6); } .xb-ab-why-head { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .xb-ab-why-text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } /* VALUES */ .xb-ab-values { padding-bottom: 80px; } .xb-ab-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 30px; } .xb-ab-value h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-primary, #53aea6); } .xb-ab-value p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } /* APPROACH */ .xb-ab-approach { padding: 52px 0 88px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .xb-ab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: none; } .xb-ab-step { padding: 0 28px; } .xb-ab-step:first-child { padding-left: 0; } .xb-ab-step:last-child { padding-right: 0; } .xb-ab-step-num { display: block; font-size: 13px; letter-spacing: 0.12em; color: var(--color-primary, #53aea6); margin-bottom: 16px; } .xb-ab-step-rule { display: block; height: 1px; background: linear-gradient(90deg, var(--color-primary, #53aea6), rgba(255, 255, 255, 0.1)); margin-bottom: 20px; } .xb-ab-step h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .xb-ab-step p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } /* CTA */ .xb-ab-cta { text-align: center; padding: 90px 0 70px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .xb-ab-cta-title { margin: 18px auto; max-width: 780px; } .xb-ab-cta-text { margin: 0 auto 34px; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } .xb-ab-cta-btn { display: flex; justify-content: center; } /* Responsive */ @media (max-width: 991px) { .xb-ab-hero-lede { grid-template-columns: 1fr; gap: 24px; } .xb-ab-principles { grid-template-columns: 1fr; gap: 32px; } .xb-ab-mv { grid-template-columns: 1fr; gap: 40px; } .xb-ab-mv-divider { display: none; } .xb-ab-why-row { grid-template-columns: 40px 1fr; gap: 8px 20px; } .xb-ab-why-text { grid-column: 2; } .xb-ab-values-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .xb-ab-steps { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } .xb-ab-step, .xb-ab-step:first-child, .xb-ab-step:last-child { padding: 0; } } @media (max-width: 600px) { .xb-ab-collage { height: auto; margin-bottom: 56px; } .xb-ab-collage-main, .xb-ab-collage-inset { position: relative; width: 100%; height: 220px; } .xb-ab-collage-inset { margin-top: 16px; } .xb-ab-values-grid { grid-template-columns: 1fr; } .xb-ab-steps { grid-template-columns: 1fr; gap: 32px; } .xb-ab-why-row { grid-template-columns: 1fr; gap: 6px; } .xb-ab-why-text { grid-column: 1; } } /* ----------------------------------------------------------------------------- Partner page redesign (APX-055) Shared by all 8 partner pages (partner-detail.njk, base.njk). Immersive hero + capabilities grid + 3-step model + CTA band. Brand teal only; data-driven. -------------------------------------------------------------------------------- */ .xb-pt { position: relative; } .xb-pt-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary, #53aea6); } .xb-pt-eyebrow-center { justify-content: center; } .xb-pt-rule { width: 14px; height: 1px; background: var(--color-primary, #53aea6); } .xb-pt-h2 { margin: 16px 0 0; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-wrap: balance; } .xb-pt-body { max-width: 720px; margin: 22px auto 0; font-size: 17px; line-height: 1.66; color: rgba(255, 255, 255, 0.72); } /* HERO */ .xb-pt-hero { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; padding: 96px 24px 84px; overflow: hidden; text-align: center; } .xb-pt-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .xb-pt-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 2, 15, 0.62) 0%, rgba(7, 34, 63, 0.55) 45%, rgba(0, 2, 15, 0.94) 100%); } .xb-pt-hero-glow { position: absolute; top: -15%; left: 50%; width: 760px; height: 520px; max-width: 100%; transform: translateX(-50%); background: radial-gradient(circle, rgba(83, 174, 166, 0.22), transparent 60%); pointer-events: none; } .xb-pt-hero-inner { position: relative; z-index: 1; max-width: 720px; display: flex; flex-direction: column; align-items: center; } .xb-pt-crumb { margin-bottom: 30px; font-size: 13px; color: rgba(255, 255, 255, 0.55); } .xb-pt-crumb a { color: rgba(255, 255, 255, 0.78); } .xb-pt-crumb a:hover { color: var(--color-primary, #53aea6); } .xb-pt-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; justify-content: center; } .xb-pt-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 118px; height: 58px; padding: 10px 22px; background: #fff; border-radius: 14px; } .xb-pt-chip img { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; } .xb-pt-h1 { margin: 0; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-wrap: balance; } .xb-pt-sub { margin: 24px 0 0; max-width: 600px; font-size: 18px; line-height: 1.62; color: rgba(255, 255, 255, 0.78); } .xb-pt-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 40px; } /* Play-to-watch link */ .xb-pt-play { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; } .xb-pt-play-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); } .xb-pt-play-btn svg { margin-left: 3px; } .xb-pt-play-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-primary, #53aea6); animation: apexPulse 2.4s ease-out infinite; } .xb-pt-play-label { display: flex; flex-direction: column; text-align: left; line-height: 1.2; } .xb-pt-play-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary, #53aea6); } .xb-pt-play-text { font-size: 15px; color: #fff; } @keyframes apexPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.85); opacity: 0; } } /* Centered section heads */ .xb-pt-intro, .xb-pt-caps-sec, .xb-pt-model, .xb-pt-cta-sec { text-align: center; } .xb-pt-intro { padding: 92px 0 4px; } .xb-pt-caps-sec { padding: 72px 0 0; } .xb-pt-model { padding: 72px 0 0; } /* CAPABILITIES grid */ .xb-pt-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; text-align: left; } .xb-pt-cap { display: flex; flex-direction: column; gap: 16px; height: 100%; box-sizing: border-box; padding: 28px 26px; background: var(--color-secondary, #07223f); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .xb-pt-cap:hover { transform: translateY(-4px); border-color: rgba(83, 174, 166, 0.5); } .xb-pt-cap-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--color-primary, #53aea6); } .xb-pt-cap-icon svg { width: 26px; height: 26px; } .xb-pt-cap-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #fff; } /* PARTNERSHIP MODEL */ .xb-pt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; text-align: left; } .xb-pt-step { height: 100%; box-sizing: border-box; padding: 32px 28px; background: var(--color-secondary, #07223f); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .xb-pt-step:hover { transform: translateY(-4px); border-color: rgba(83, 174, 166, 0.5); } .xb-pt-step-num { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-primary, #53aea6); } .xb-pt-step h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .xb-pt-step p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } /* CTA BAND */ .xb-pt-cta-sec { padding: 80px 0 110px; } .xb-pt-cta { position: relative; overflow: hidden; padding: 64px 56px; background: var(--color-secondary, #07223f); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; } .xb-pt-cta-glow { position: absolute; top: -40%; left: 50%; width: 560px; height: 480px; max-width: 100%; transform: translateX(-50%); background: radial-gradient(circle, rgba(83, 174, 166, 0.2), transparent 60%); pointer-events: none; } .xb-pt-cta-title { position: relative; margin: 0 auto; max-width: 640px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #fff; text-wrap: balance; } .xb-pt-cta-text { position: relative; margin: 16px auto 30px; max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } .xb-pt-cta .thm-btn { position: relative; } /* Responsive */ @media (max-width: 1024px) { .xb-pt-caps { grid-template-columns: repeat(2, 1fr); } .xb-pt-steps { grid-template-columns: 1fr; } } @media (max-width: 600px) { .xb-pt-hero { min-height: 520px; padding: 80px 18px 64px; } .xb-pt-caps { grid-template-columns: 1fr; } .xb-pt-cta { padding: 48px 26px; } } /* Reduced motion — neutralize hover lifts, the play-ring pulse, and glows */ @media (prefers-reduced-motion: reduce) { .xb-pt-cap, .xb-pt-step { transition: none; } .xb-pt-cap:hover, .xb-pt-step:hover { transform: none; } .xb-pt-play-ring { animation: none; } } /* ----------------------------------------------------------------------------- APX-059 — Arabic / RTL layer Applies only on (Arabic pages); English is untouched. Cairo for Arabic; relax the Latin negative tracking; mirror the bits the template hard-codes LTR (text-align, the rotating CTA arrow chips, eyebrow rules). -------------------------------------------------------------------------------- */ html[dir="rtl"] body, html[dir="rtl"] .sub-title, html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] li, html[dir="rtl"] span, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: "Cairo", "Plus Jakarta Sans", sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { font-family: "Cairo", "Plus Jakarta Sans", sans-serif; letter-spacing: 0; /* Latin negative tracking crushes Arabic */ line-height: 1.4; } /* Default text flow flips with dir=rtl; force-align blocks the template pins LTR */ html[dir="rtl"] .xb-ab-hero-top, html[dir="rtl"] .xb-ab-why-row, html[dir="rtl"] .xb-pt-actions { text-align: right; } /* The rotating arrow chip in .thm-btn points right (LTR); flip it for RTL */ html[dir="rtl"] .thm-btn .arrow, html[dir="rtl"] .xb-pt-play-btn svg, html[dir="rtl"] .xb-ab-step-rule, html[dir="rtl"] .xb-pt-rule, html[dir="rtl"] .xb-wwa-flow-rule { transform: scaleX(-1); } /* Eyebrow/lockup rows: keep icon-then-text order mirrored */ html[dir="rtl"] .xb-ab-eyebrow, html[dir="rtl"] .xb-pt-eyebrow, html[dir="rtl"] .xb-wwa-eyebrow { flex-direction: row-reverse; } /* nice-select (custom