/* Theme Name: Commercial Gear — Blue Theme URI: https://commercialgear.com Description: Blue-accent child theme of Hello Elementor for Commercial Gear & Sprocket. A full copy of "Hello Elementor Child" with the highlighting colour remapped from coral (#B83230 / #EC5F53) to the logo blue (#1B3FA0 / #16358A), and dark section backgrounds from navy (#0C1825) to near-black (#0B0F17) so the blue gear logo reads on them. Palette derived from next-js-blue-theme/src/app/globals.css ("LOGO-DRIVEN BRAND COLOR SYSTEM"). Content structure (CPTs, ACF) lives in a site-specific plugin, not here. Author: Commercial Gear & Sprocket Template: hello-elementor Version: 1.0.0 Requires PHP: 7.4 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: commercial-gear-blue */ /* ============================================================ Blue-accent theme — Elementor Global Colour overrides. The site's highlighting colour is set in the Elementor Kit (post 7), which a theme cannot edit. This block re-points the Kit's generated CSS custom properties so every Elementor widget/section that references a Global Colour turns blue when THIS theme is active — no Kit change, fully reversible by switching back to "Hello Elementor Child". Per-widget HARDCODED colours (e.g. the "Site Header" and "Site Footer" templates set some values inline) do NOT follow globals and are not covered here — recolour those in the Elementor editor if needed. Token source: next-js-blue-theme/src/app/globals.css ============================================================ */ /* `body.elementor-kit-7` (specificity 0,1,1) outranks Elementor's own `.elementor-kit-7` (0,1,0) rule regardless of stylesheet load order. */ :root, body.elementor-kit-7, body.elementor-page { /* Accent — was #B83230 / surface #EC5F53 */ --e-global-color-accent: #1B3FA0; --e-global-color-cgacsrf: #1B3FA0; /* Accent Surface */ --e-global-color-cgacsrh: #16358A; /* Accent Surface Hover */ --e-global-color-cgacinh: #16358A; /* Accent Ink Hover */ --e-global-color-cgacond: #9DB0E4; /* Accent On Dark */ /* Dark surfaces — navy → near-black so the blue logo reads */ --e-global-color-primary: #0B0F17; --e-global-color-secondary: #070A10; --e-global-color-cgbrdod: #1C2129; /* Border On Dark */ --e-global-color-cgbrddd: #141922; /* Border On Dark Deep */ } /* Intentionally otherwise a straight copy of the parent child theme. Every colour below was remapped mechanically from coral/navy to blue/near-black; layout, spacing and behaviour are unchanged. Document further additions in wordpress-migration/MIGRATION-LOG.md per PROJECT.md's Custom Code Rules. */ /* ============================================================ Global base rules — Stage 05 §10. These exist because Elementor Site Settings cannot express them cleanly. Every rule below is documented in wordpress-migration/05-elementor-global/ELEMENTOR-SETTINGS.md ============================================================ */ /* 1. Global focus ring. Elementor has no global :focus-visible setting. Reference: globals.css base layer. Accessibility requirement. */ :focus-visible { outline: 2px solid #1b3fa0; outline-offset: 2px; } /* 2. Heading overflow guard. Long uppercase tokens ("MANUFACTURING", part numbers) overflow viewports at 320–375px without this. */ h1, h2, h3, h4 { overflow-wrap: break-word; } /* 3. Tabular figures — spec and capacity tables compare values column-wise; lining figures keep digits aligned. */ table { font-variant-numeric: tabular-nums; } /* 4. Reduced-motion guard. Every hover-lift in the Next.js build is guarded with motion-reduce; Elementor applies transforms unconditionally, so this restores the guarantee. */ @media (prefers-reduced-motion: reduce) { .elementor-button:hover, .e-con:hover, [class*="elementor-widget"]:hover { transform: none !important; } } /* 5. Stop iOS Safari inflating text on orientation change. */ html { -webkit-text-size-adjust: 100%; } /* 6. Nav Menu widget text-transform override. Elementor Pro's nav-menu widget hard-wires its main-menu typography group's text-transform to the "Primary" global font (uppercase, -0.025em) via a base default rule with no scoped selector. Verified: setting menu_typography_text_transform on the widget itself is silently accepted into postmeta but never emitted into the generated per-widget CSS rule — confirmed by diffing the compiled Elementor CSS file directly. This is the one documented exception to "avoid unnecessary plugins/custom code": Elementor cannot express "no transform, no extra tracking" on this widget through its own controls. Reference: MainNav.tsx items are text-sm font-medium with no transform/tracking. */ .elementor-widget-nav-menu .elementor-nav-menu .elementor-item { text-transform: none; letter-spacing: normal; } /* 7. Section 3 "Our Products" — loop-grid card ordinals and hover states. Elementor's Loop Grid has no built-in loop-index dynamic tag and no per-item hover propagation to sibling elements. Both are solved here. Reference: next-js/src/app/page.tsx, the products .map() block — `group grid grid-cols-[1fr_auto] items-start gap-5 border-t ... pt-6`, ordinal `mt-3`/title, description `mt-2`, image `h-32 w-32 rounded-card overflow-hidden` with `group-hover:scale-105` on a 500ms transition. Ordinals (01–09): CSS counter on the loop container, emitted as ::before on the HTML-widget's .cgprod-ordinal span. Zero custom JS, zero extra DB fields. Hover state (matches Next.js's `group`/`group-hover:`): the card is an element that fills the whole .e-loop-item box, so hovering either hits the same area. On hover: ordinal + title turn Accent (#1b3fa0), and the image zooms to 105% inside its own clipped, rounded frame. Transitions are disabled for users who prefer reduced motion. */ /* Counter accumulates on each loop item */ .cgprod-grid .elementor-loop-container { counter-reset: product-n; } .cgprod-grid .e-loop-item { counter-increment: product-n; } /* Ordinal rendered as ::before on the empty span */ .cgprod-ordinal::before { content: counter(product-n, decimal-leading-zero); display: block; font-family: 'Geist Mono', 'Courier New', monospace; font-size: 1.875rem; /* 30px — text-3xl */ font-weight: 700; line-height: 1; color: #6b6f72; /* Border Strong — var(--e-global-color-cgbords) */ transition: color 150ms ease; } /* Card layout — matches next-js/src/app/page.tsx's products .map() exactly: `grid grid-cols-[1fr_auto] items-start gap-5` on the card [1841676]. Text block [9845b10] (ordinal, title, description) is ONE grid item in column 1; the image [d73db53] is the other grid item in column 2. `items-start` means each column aligns to the top of the row and is NOT stretched — when the text column is taller than the image, the reference genuinely leaves blank space below the shorter image. That's the literal Next.js behavior, not a bug to design around here. */ .cgprod-grid .e-loop-item [data-id="1841676"] { display: grid !important; grid-template-columns: 1fr auto !important; column-gap: 20px !important; align-items: start !important; } .cgprod-grid .e-loop-item [data-id="9845b10"] { display: flex !important; flex-direction: column !important; gap: 0 !important; } .cgprod-grid .e-loop-item [data-id="904880c"] { margin-top: 12px !important; /* ordinal → title, mt-3 */ } .cgprod-grid .e-loop-item [data-id="420e8e8"] { margin-top: 8px !important; /* title → description, mt-2 */ } /* Hover: ordinal and title turn Accent (#1b3fa0). !important on the title half only: Elementor emits its own per-widget rule `.elementor-145 .elementor-element-904880c .elementor-heading-title` at the same 4-class specificity as ours, and it's injected after this stylesheet — without !important it wins the tie on source order and the hover color never shows. */ .cgprod-grid .e-loop-item:hover .cgprod-ordinal::before { color: #1b3fa0; /* Accent Ink — var(--e-global-color-accent) */ } .cgprod-grid .e-loop-item:hover .elementor-heading-title { color: #1b3fa0 !important; } /* Title transition matches ordinal */ .cgprod-grid .e-loop-item .elementor-heading-title { transition: color 150ms ease; } /* Reduce-motion: skip the color and zoom animation */ @media (prefers-reduced-motion: reduce) { .cgprod-ordinal::before, .cgprod-grid .e-loop-item .elementor-heading-title, .cgprod-grid .e-loop-item .elementor-widget-image img { transition: none; } .cgprod-grid .e-loop-item:hover .elementor-widget-image img { transform: none; } } /* Image: clip to square without fixed-size container breaking flex layout. The card is a flex row [text block, image widget]; the image WIDGET DIV (not the ) is the actual flex item, and Elementor's `flex: 0 1 auto` let it shrink to fill leftover space — the 's own `max-width: 100%` then capped it to that shrunk width, silently overriding width:128px below. flex-shrink:0 + max-width on the widget div itself fixes both. border-radius + overflow:hidden move to this wrapper (rather than the img) so it acts as the clipping frame for the hover zoom below — the zoomed img's edges stay masked at the rounded corner, matching `rounded-card overflow-hidden` on the Next.js wrapper. */ .cgprod-grid .e-loop-item .elementor-widget-image { flex-shrink: 0; width: 128px; max-width: 128px; border-radius: 14px; /* --radius-card */ overflow: hidden; } .cgprod-grid .e-loop-item .elementor-widget-image img { width: 128px; height: 128px; max-width: 128px; object-fit: cover; flex-shrink: 0; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); } /* Hover: image zooms to 105%, clipped by the wrapper above */ .cgprod-grid .e-loop-item:hover .elementor-widget-image img { transform: scale(1.05); } /* ============================================================ 8. Site Footer — fixes for issues Elementor cannot express Reference: next-js/src/components/layout/Footer.tsx ============================================================ */ /* 8a. Footer logo — constrain to 48px tall, auto width. The image widget loads attachment-full (1294px) but CSS clips it. Reference: className="h-12 w-auto sm:h-14" (48px / 56px) */ .elementor-element-cgftr005 img { height: 48px !important; width: auto !important; max-width: 220px !important; object-fit: contain; } @media (min-width: 640px) { .elementor-element-cgftr005 img { height: 56px !important; } } /* 8a-bis. Footer CTA buttons — "Call / Email us" pair. Reference: Footer.tsx contact CTAs — solid coral button + ghost outline button. */ .cgftr-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; } .cgftr-cta-btn { display: inline-flex; align-items: center; padding: 14px 28px 14px 28px; border-radius: 5px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease; } .cgftr-cta-btn--solid { background: #1B3FA0; color: #ffffff; } .cgftr-cta-btn--solid:hover { background: #15327F; color: #ffffff; } .cgftr-cta-btn--ghost { background: transparent; border: 1px solid #FFFFFF; color: #ffffff; } .cgftr-cta-btn--ghost:hover { color: #ffffff; border-color: #1B3FA0; } @media (prefers-reduced-motion: reduce) { .cgftr-cta-btn { transition: none; } } /* 8b. AGMA member note — coral left border + dark tinted background. Reference: border-l-2 border-coral-500 bg-navy-900/60 px-4 py-3 text-xs */ .elementor-element-cgftr009 .elementor-widget-container { border-left: 2px solid #1b3fa0; background: rgba(12, 24, 37, 0.6); padding: 12px 16px; font-size: 12px; line-height: 1.5; margin-top: 4px; } /* 8f. Footer nav column toggles — always expanded (no hamburger at any width). Reference: FooterNavGroup.tsx — mobile collapses by max-height, not a button. Use .elementor-location-footer scope so header menu is unaffected. */ .elementor-location-footer .elementor-nav-menu--toggle .elementor-menu-toggle { display: none !important; } .elementor-location-footer .elementor-nav-menu--toggle nav.elementor-nav-menu--main { display: block !important; opacity: 1 !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; } /* Mobile: tighter gap between stacked nav-menu items. (The flex-direction/gap rule that used to live here targeted [data-id="cgftr010"] — an id from an earlier footer iteration not present in this template at all; mobile column-stacking is handled by the accordion script/CSS further down instead.) */ @media (max-width: 767px) { .elementor-location-footer .elementor-nav-menu.sm-vertical li { padding: 3px 0 !important; } } /* 8f-bis. Footer nav columns — mobile accordion (cg_footer_accordion_script in functions.php does the class/height work; this is its paired CSS). Each column collapses to just its heading by default on mobile — with all three columns previously rendering every link expanded at once (per 8f above, intentional on every other breakpoint), the footer ran to roughly 2,500px tall on a 390px phone. */ /* Icon is injected by the script regardless of viewport (so it's already in place if the window is later resized down to mobile); hidden by default and shown only inside the mobile rule below. */ .cgftr-acc-icon { display: none; } @media (max-width: 767px) { .cgftr-acc-toggle .elementor-heading-title { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 0 !important; padding: 10px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1); } .cgftr-acc-icon { display: block; flex-shrink: 0; color: #6ba8c4; transition: transform 200ms ease; } .cgftr-acc-toggle.is-open .cgftr-acc-icon { transform: rotate(180deg); } .cgftr-acc-panel { transition: height 220ms ease; } .cgftr-acc-panel .elementor-nav-menu { padding-top: 4px !important; padding-bottom: 18px !important; } /* Last column's own bottom border reads as a divider before the copyright bar, matching the border-top rhythm of the other two. */ [data-id="90c88d2"] .cgftr-acc-panel { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* cgftr003 (the row holding the address block + 3 nav columns) carries a 40px flex-gap sized for its desktop side-by-side row — not scoped down for the column stack it becomes on mobile. Each column wrapper (153b90d / a65cbd8 / 90c88d2) AND its own inner wrapper (321b6c3 / 36b0414 / d62d6f8) also have no padding set in their own Elementor settings, so each silently inherits Elementor's default 10px top+bottom — stacked two deep, that's 40px of pure inherited padding per column on top of the 40px row-gap. With the heading's own border-top now doing the job of separating columns, all of this was pure dead space. Zeroed everywhere collapsed columns don't need it. */ [data-id="cgftr003"] { gap: 0 !important; } [data-id="153b90d"], [data-id="a65cbd8"], [data-id="90c88d2"], [data-id="321b6c3"], [data-id="36b0414"], [data-id="d62d6f8"] { padding-top: 0 !important; padding-bottom: 0 !important; } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .cgftr-acc-panel, .cgftr-acc-icon { transition: none !important; } } /* 8g. Bottom bar utility nav — always horizontal, never toggles. Reference: flex items in a row, hover:text-white, sm:border-t */ .elementor-element-cgftr022 .elementor-menu-toggle { display: none !important; } .elementor-element-cgftr022 nav.elementor-nav-menu--dropdown { display: none !important; } .elementor-element-cgftr022 nav.elementor-nav-menu--main { display: block !important; } .elementor-element-cgftr022 ul.elementor-nav-menu { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .elementor-element-cgftr022 .elementor-item { color: #9bb0bf !important; font-size: 14px !important; padding: 4px 12px !important; } /* Separator dots between bottom-bar links */ .elementor-element-cgftr022 li + li .elementor-item::before { content: '\00B7' !important; display: inline !important; margin-right: 12px !important; color: #4a6070 !important; } .elementor-element-cgftr022 .elementor-item:hover { color: #fff !important; } /* 8h. Bottom bar layout — border-top, proper spacing. Reference: border-t border-navy-800 mt-14 pt-8 flex justify-between */ .elementor-element-cgftr020 { border-top: 1px solid #1c2129 !important; padding-top: 32px !important; padding-bottom: 0 !important; flex-wrap: wrap; gap: 16px; align-items: center; } .elementor-element-cgftr021 .elementor-widget-container, .elementor-element-cgftr021 p { color: #9bb0bf; font-size: 14px; margin: 0; } /* typography.css's body-copy

size out-ranks the rule above, which left the copyright line noticeably larger than the legal links beside it. */ .elementor-location-footer .elementor-element.elementor-element-cgftr021 p { font-size: 14px; letter-spacing: .02em; line-height: 1.5; } /* 8i. Footer main nav columns — no gap between heading and list. Elementor adds default padding/margin on heading widget; neutralise it. */ .elementor-element-cgftr011.elementor-widget-heading, .elementor-element-cgftr015.elementor-widget-heading, .elementor-element-cgftr018.elementor-widget-heading { margin-bottom: 0 !important; } /* 8j. Footer main nav row — 3 columns, no wrapping at desktop. Root cause: 36 + 34 + 24 = 94% plus 2 × 40px gap overflows the inner container between 1025–1380px, dropping the Capabilities+Company column to a new row. Fix: nowrap + redistribute widths so gaps are accounted for. Reference: Footer.tsx three-column layout (brand | products | nav). */ @media (min-width: 1025px) { .elementor-element-cgftr003 { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 40px !important; } /* Contact / brand column — fixed at 34%, enough for logo + address */ .elementor-element-cgftr004 { flex: 0 0 34% !important; max-width: 34% !important; width: 34% !important; box-sizing: border-box !important; } /* Products nav column — fixed at 30% (2-col menu fits comfortably) */ .elementor-element-cgftr010 { flex: 0 0 30% !important; max-width: 30% !important; width: 30% !important; box-sizing: border-box !important; } /* Capabilities + Company column — fills all remaining space */ .elementor-element-cgftr013 { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; width: auto !important; } } /* 8j2. Capabilities → Company gap within the combined column */ .elementor-element-cgftr017 { margin-top: 40px; padding-top: 40px; border-top: 1px solid #1c2129; } @media (max-width: 1024px) { .elementor-element-cgftr017 { margin-top: 0; padding-top: 0; border-top: none; } } /* 8k. Footer contact column — border-bottom separator on mobile/tablet */ @media (max-width: 1024px) { .elementor-element-cgftr004 { padding-bottom: 32px; margin-bottom: 8px; } .cgcontact-primary { font-size: 14px; } .cgcontact-secondary { font-size: 13px; } } /* ============================================================ 9. Homepage sections §4–§13 + CTAs 1–4 Reference: next-js/src/app/page.tsx and each section component. Elementor cannot express: ghost ordinals, sticky columns, JS slider dot nav, details/summary accordion state, card hover propagation from container → child text. Everything below is the minimal CSS to match the reference design. ============================================================ */ /* ── §4 Why Choose Us ──────────────────────────────────────── */ /* Reference: WhyChooseUs.tsx — 3×2 card grid, white cards on #f3f5f6, dark-navy icon badge, ghost ordinal top-right, bold uppercase title. */ /* 3-column card grid */ .cgwhy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1024px) { .cgwhy-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cgwhy-grid { grid-template-columns: 1fr; } } /* Individual card */ .cgwhy-card { background: #ffffff; border: 1px solid #e8eaeb; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 0; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; position: relative; overflow: hidden; } .cgwhy-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(4,10,21,0.09); border-color: #d0d8dd; } @media (prefers-reduced-motion: reduce) { .cgwhy-card { transition: none; } .cgwhy-card:hover { transform: none; box-shadow: none; } } /* Top row: icon badge (left) + ghost ordinal (right) */ .cgwhy-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; } /* Icon badge — rounded square, filled with the theme Accent global (Elementor Global Colors → Accent = logo blue #1B3FA0). Falls back to the blue hex if the variable is absent. The SVG glyph is stroked white inline, so it reads on any accent hue. */ .cgwhy-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--e-global-color-accent, #1b3fa0); border-radius: 12px; flex-shrink: 0; } /* Ghost ordinal — top-right, large mono, very light */ .cgwhy-num { font-family: 'Geist Mono', 'Courier New', monospace; font-size: 3.5rem; /* ~56px */ font-weight: 700; line-height: 0.9; color: #dce2e6; user-select: none; pointer-events: none; letter-spacing: -0.02em; margin-top: -4px; } /* Card title — bold uppercase */ .cgwhy-card-title { font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #0b0f17; margin: 0 0 12px; line-height: 1.3; transition: color 150ms ease; } .cgwhy-card:hover .cgwhy-card-title { color: #1b3fa0; } /* Card body */ .cgwhy-card-body { font-family: Inter, sans-serif; font-size: 14px; line-height: 1.5em; letter-spacing: 0.04em; color: #657e91; margin: 0; } /* Legacy selectors kept in case any other code references them */ .cgwhy-title { transition: color 150ms ease; } /* ── §5 Capabilities (loop-grid, light bg) ─────────────────── */ /* Cap card: white card, lift + coral left border accent on hover. Reference: CapabilitiesGrid.tsx "group hover:-translate-y-1 hover:border-l-2 hover:border-coral-500" */ .cgcap-card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .cgcap-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(4,10,21,0.10); border-color: #1b3fa0 !important; /* coral-500 */ } .cgcap-title { transition: color 150ms ease; } .cgcap-card:hover .cgcap-title { color: #1b3fa0 !important; /* accent-ink */ } @media (prefers-reduced-motion: reduce) { .cgcap-card { transition: none; } .cgcap-card:hover { transform: none; } } /* ── §6 Industries (loop-grid, dark bg) ────────────────────── */ /* Reference: IndustriesGrid.tsx — dark glass cards, 3-col grid, title + description + arrow, coral border + bg-darken on hover NOTE: custom_css_classes not reliable in Elementor 4.x → use data-id selectors */ /* "All Industries" (button widget data-id=67dcc93) — REMOVED 2026-09-12. This block used to hardcode background, border, color, padding, font-size, font-weight, letter-spacing, text-transform, underline and the hover state, every one with !important — which meant those same controls in Elementor's Style tab were dead: changing the colour or padding in the editor produced no visible change, because this file always won. The button is now the site's standard primary button and every one of those values lives in the widget's own settings, so it is editable from Elementor with nothing here to override it. Its layout placement (right/bottom aligned beside the section heading) is NOT styling and stays below, where the surrounding flex-row layout is defined. */ /* Card container: A tag data-id=8e2e8fd */ [data-id="8e2e8fd"].e-con { transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease; text-decoration: none !important; /* Elementor's own container gap (20px) between the [title+arrow row] and the description was the last big chunk of the reported dead space, stacking on top of the title's own margin-bottom. */ gap: 8px !important; } /* [data-id="8e2e8fd"].e-con:hover { border-color: #1b3fa0 !important; background: rgba(4,10,21,0.75) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } */ /* Arrow span (class added directly in HTML widget so it IS in DOM) */ .cgind-arrow { display: inline-block; color: #3d5f74; font-size: 16px; line-height: 1; flex-shrink: 0; transition: transform 150ms ease, color 150ms ease; } [data-id="8e2e8fd"].e-con:hover .cgind-arrow { transform: translate(2px, -2px); color: #1b3fa0; } @media (prefers-reduced-motion: reduce) { [data-id="8e2e8fd"].e-con, .cgind-arrow, [data-id="ee3de92"] .elementor-heading-title { transition: none; } [data-id="8e2e8fd"].e-con:hover { transform: none; box-shadow: none; } [data-id="8e2e8fd"].e-con:hover .cgind-arrow { transform: none; } } /* FIX: "All Industries" wraps below because 9232770 is e-con-full (width:100%). Override to flex-grow so it only takes needed space, freeing the right side for the button. */ [data-id="35991a9"] > [data-id="9232770"] { width: auto !important; flex: 1 1 auto !important; max-width: calc(100% - 180px) !important; } /* Button sits on the right, vertically bottom-aligned */ [data-id="35991a9"] > [data-id="67dcc93"] { flex-shrink: 0 !important; align-self: flex-end !important; white-space: nowrap !important; } /* FIX: card header row — push arrow ↗ to far right of card */ [data-id="2e51a2c"].e-con { justify-content: space-between !important; align-items: flex-start !important; } /* Arrow icon — slightly larger and better colour */ .cgind-arrow { font-size: 14px !important; color: #3d5f74 !important; line-height: 1 !important; margin-top: 2px !important; } [data-id="8e2e8fd"].e-con:hover .cgind-arrow { color: #1b3fa0 !important; transform: translate(3px, -3px); } /* Card description text colour */ [data-id="db39314"] p { color: #7a97a8 !important; font-size: 13px !important; line-height: 1.55 !important; } /* ── §7 Process — heading/track left-edge alignment fix ───────────── "How We Work" / "OUR PROCESS" (inside container 1990eb6) rendered 10px to the right of the zigzag track below it (inside html widget 05d94d6) — measured directly, reproducible at every viewport width tested (1920 down to 1100px), not a responsive-only glitch. 1990eb6 carries no explicit padding of its own in its Elementor settings; the 10px is Elementor's own default container padding leaking through where 05d94d6's sibling container (bf16fcf) explicitly zeroes its padding instead. Pulling 1990eb6 left by that same 10px lines its content up exactly with the track/cards underneath it. */ [data-id="1990eb6"] { margin-left: -10px !important; } /* ── Site-wide left-alignment QA pass (2026-09-08) ─────────────────── Audited every homepage section's eyebrow/heading/description against its content grid's left edge (measured via getBoundingClientRect at five viewport widths, 1100–1920px). Same root cause as the Process fix above in both cases found: a heading-group container with no explicit padding of its own inherits Elementor's default 10px container padding, while its sibling content grid (a loop-grid or a container that DOES explicitly zero its padding) doesn't — so the heading reads 10-20px further right than the grid below it. Sections NOT listed here (Why Choose Us, CTA1/2, Capabilities, Industries, Quality, Reviews, FAQ, Contact) were measured and are already correctly aligned — nothing to change there. The "All Products"/"All Industries"/"All Articles" links sitting far from these numbers in the same audit are not bugs: All Products is deliberately centered below its grid, and Industries/Blog's links were deliberately moved to the right of their heading earlier this session — none of the three are meant to share the left edge. */ /* Products (58e92f2 > 713c9cb) — negative margin REMOVED 2026-09-12. This used to pull the heading group 10px LEFT to match the loop-grid container's edge. That was right at the time, but the product card's own text column (9845b10 in loop template 145) was itself leaking Elementor's default 10px container padding, so the visible ordinal / title / description sat 10px INSIDE the grid container — the heading lined up with the container while looking 10px left of the actual card text. 9845b10 now has explicit zero padding (set in Elementor, editable there), so the card text sits flush with the grid container's edge. With the text where it belongs, this -10px hack would push the heading 10px left of everything else, so it is gone: heading, divider and card text now share one natural edge with no offset correction on either side. */ /* Blog (846c1fb > dc5a0b2): heading group measured 20px right of the loop-grid (4a44b01) — two stacked leaks here, not one: 846c1fb itself (holding dc5a0b2 and the "All Articles" link) has no explicit padding either, so its own 10px leak shifts dc5a0b2's starting position, and dc5a0b2 leaks another 10px on top of that. Correcting dc5a0b2 alone by the full 20px cancels both without touching 846c1fb (and so without disturbing the "All Articles" link's already-correct position within it). */ [data-id="dc5a0b2"] { margin-left: -20px !important; } /* Footer (Site Footer template, post 130) vs. the rest of the page. Two separate bugs found here, fixed in order: 1) Internal: the company logo/address block (cgftr004) measured 10px right of its own parent row (cgftr003) and the copyright bar below it (cgftr020) — the same unset-padding-leaks- Elementor's-default-10px pattern as Process/Products/Blog above. This template isn't in the homepage's own _elementor_data (it's a global Theme Builder template shared by every page), which is why the earlier homepage-only audit didn't catch it. 2) Page-wide: even fixed internally, the whole footer still sat 34px right of every other section's content (e.g. Contact directly above it, measured at 116px from the left at 1440px viewport width). Every homepage section centers a 1248px box with no padding of its own; the footer's content box (cgftr002) instead used a plain "width:1248px" PLUS an explicit 24px left/ right padding on top of it (nothing else on the page does that), plus the same 10px default-padding leak as #1, but one layer up — 24 + 10 = 34. cgftr002 itself is only the OUTER full-width wrapper (class e-con-boxed); the width/padding settings actually land on its `.e-con-inner` CHILD, the real boxed content box — same two- layer pattern as every other boxed container on this site (see the cgcta3_o > .e-con-inner rule elsewhere in this file). Overriding padding alone left the box at 1140px instead of 1248px: Elementor derives this inner box's width from a calc() built from the width/padding settings together, not independent properties, so overriding just one fed a stale value into that formula. Replacing width/margin/padding outright with a plain, ordinary centered box sidesteps the formula entirely — sized to 1208px (not 1248px) specifically so a normally-centered box lands its left edge at exactly 116px, matching Contact, rather than at the 96px a plain 1248px box would center to on its own. */ [data-id="cgftr002"] > .e-con-inner { width: 100% !important; max-width: 1208px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } [data-id="cgftr004"] { margin-left: -10px !important; } /* ── §7 Process timeline — enterprise redesign (2026-09-12) ──────────── Replaces the 2026-09-07 zigzag. Same DOM, same class names, same content, icons, font families, font sizes and text colors — this is a layout/surface/rhythm pass only, so the two functions.php scripts that drive it (cg_process_curtain_reveal_script + cg_process_pulse_travel_ script) keep working untouched. The stem height stays 22px because that script hardcodes STEM = 22 to plot its zigzag waypoints; changing it here alone would desync the traveling pulse from the cards. What changed and why: - Cards were a fixed 270px tall to force a shared baseline, which left 3 of 6 with a large empty bottom. Now each grid ROW stretches its cards to the tallest in that row (align-self:stretch + height:100%), so they still align perfectly but the box is only as tall as the row genuinely needs. - Cards were width:calc(100% + 40px) capped at max-width:240px — the cap meant they never used the bleed on a wide viewport, so the row read as small islands with big gaps. The cap is looser now and the bleed derives from the column-gap token. - The 1.5px hairline and 9px dot read as unfinished at enterprise scale. The rail is now a soft gradient spine and each dot gets a ring + halo, so the line reads deliberate rather than leftover. - Depth: a two-layer resting shadow and a deeper hover lift replace the flat 1px shadow. - New: a 768–1023px tablet tier (2-up card grid). Previously tablet fell into the 1-column mobile list, wasting half the viewport. */ .cgproc-track { --cgproc-line: rgba(12, 24, 37, .13); --cgproc-dot: #1b3fa0; --cgproc-icon-bg: #eef2fb; --cgproc-icon-fg: #1b3fa0; /* Surface tokens derived from the existing navy / #E8EAEB palette already used site-wide; no new hues introduced. */ --cgproc-card-bd: #e8eaeb; --cgproc-card-bd-hover: #c9d4e8; --cgproc-gap: 20px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto auto; column-gap: var(--cgproc-gap); row-gap: 26px; margin: 48px 0 0 19px; align-items: stretch; } .cgproc-col { display: contents; } /* Place each column's children into their own grid column (1–6) */ .cgproc-col:nth-child(1) > * { grid-column: 1; } .cgproc-col:nth-child(2) > * { grid-column: 2; } .cgproc-col:nth-child(3) > * { grid-column: 3; } .cgproc-col:nth-child(4) > * { grid-column: 4; } .cgproc-col:nth-child(5) > * { grid-column: 5; } .cgproc-col:nth-child(6) > * { grid-column: 6; } /* Dot marker on the baseline. justify-self:stretch (no explicit width) makes each dotwrap span its FULL column, so its own baseline segment can be trimmed per-column to end exactly at this dot's center. */ .cgproc-dotwrap { grid-row: 2; justify-self: stretch; align-self: center; position: relative; height: 28px; display: flex; align-items: center; justify-content: center; } /* Baseline segment — each dot draws only ITS OWN column's slice, so consecutive segments join into one continuous line while the line still does not exist beyond the first/last dot's center. The overhang is half the column gap on both sides so segments meet inside the gap instead of leaving a visible break at every dot. Tied to the gap token so the two cannot drift apart. */ .cgproc-baseline-seg { position: absolute; left: calc(var(--cgproc-gap) / -2); right: calc(var(--cgproc-gap) / -2); top: 50%; transform: translateY(-50%); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(27, 63, 160, .14) 0%, rgba(27, 63, 160, .22) 50%, rgba(27, 63, 160, .14) 100%); z-index: 0; } .cgproc-col:nth-child(1) .cgproc-baseline-seg { left: 50%; } .cgproc-col:nth-child(6) .cgproc-baseline-seg { right: 50%; } /* Dot — a ringed marker rather than a plain disc, so the rail reads as a deliberate station. The white ring keeps it legible where it crosses the line; the outer halo gives it presence at this size. */ .cgproc-dot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--cgproc-dot); box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px rgba(27, 63, 160, .28), 0 0 0 10px rgba(27, 63, 160, .07); transition: box-shadow 220ms ease, transform 220ms ease; } /* Short stem linking each dot to its card. Height MUST stay 22px — cg_process_pulse_travel_script() hardcodes STEM = 22. */ .cgproc-dotwrap--up::before, .cgproc-dotwrap--down::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(var(--cgproc-line), rgba(27, 63, 160, .22)); transition: background 220ms ease, height 220ms ease; } .cgproc-dotwrap--up::before { bottom: 100%; } .cgproc-dotwrap--down::after { top: 100%; } /* Traveling pulse — unchanged mechanism, driven per-frame from measured dot positions by cg_process_pulse_travel_script(). */ .cgproc-pulse { grid-column: 1 / -1; grid-row: 2; position: relative; align-self: center; height: 0; pointer-events: none; z-index: 2; } .cgproc-pulse-dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--cgproc-dot); box-shadow: 0 0 10px 3px rgba(27, 63, 160, .45); opacity: 0; } .cgproc-pulse-trail { position: absolute; top: 0; left: 0; height: 2px; width: 0; border-radius: 2px; background: var(--cgproc-dot); box-shadow: 0 0 6px 1px rgba(27, 63, 160, .3); opacity: 0; } .cgproc-mobile-rail { display: none; } @media (prefers-reduced-motion: reduce) { .cgproc-pulse { display: none; } } /* Cards: one row above the baseline (up), one row below (down). align-self:stretch (not end/start) is what lets every card in a row share the tallest card's height WITHOUT a hardcoded pixel value. */ .cgproc-card--up { grid-row: 1; align-self: stretch; } .cgproc-card--down { grid-row: 3; align-self: stretch; } .cgproc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cgproc-card-bd); border-radius: 16px; padding: 22px 20px; /* Bleed past the card's own grid column — safe because cards alternate up/down, so the neighbouring column in the SAME row is always empty. Derived from the gap token: the card reclaims one full gap on each side. The old fixed 240px max-width capped this away on wide screens, leaving small islands. */ width: calc(100% + (var(--cgproc-gap) * 2)); max-width: 300px; margin-left: calc(var(--cgproc-gap) * -1); margin-right: calc(var(--cgproc-gap) * -1); /* Row-stretched instead of the old fixed height:270px, which left a large empty bottom on the 3 shorter cards. */ height: 100%; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 24, 37, .04), 0 4px 16px rgba(12, 24, 37, .04); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease, clip-path 950ms cubic-bezier(.16, 1, .3, 1); } /* Accent edge on the side the card's stem connects from — a quiet cue tying each card back to its dot, and the main thing that makes the two rows read as one system rather than two loose bands. */ .cgproc-card::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cgproc-dot), rgba(27, 63, 160, .35)); transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(.16, 1, .3, 1); } .cgproc-card--down::after { top: 0; } .cgproc-card--up::after { bottom: 0; } .cgproc-card:hover::after, .cgproc-card.is-active::after { transform: scaleX(1); } /* Curtain reveal — direction mirrors each card's position relative to its dot so both variants grow AWAY from the connecting stem. `round 16px` must match this card's border-radius or inset() clips to square corners throughout the reveal. */ .cgproc-card--down { clip-path: inset(0 0 100% 0 round 16px); } .cgproc-card--down.is-revealed { clip-path: inset(0 0 0% 0 round 16px); } .cgproc-card--up { clip-path: inset(100% 0 0 0 round 16px); } .cgproc-card--up.is-revealed { clip-path: inset(0% 0 0 0 round 16px); } /* One-time landing glow after the curtain finishes opening. */ @keyframes cgproc-landing-glow { 0% { box-shadow: 0 1px 2px rgba(12, 24, 37, .04), 0 4px 16px rgba(12, 24, 37, .04), 0 0 0 0 rgba(27, 63, 160, 0); } 35% { box-shadow: 0 1px 2px rgba(12, 24, 37, .04), 0 4px 16px rgba(12, 24, 37, .04), 0 0 0 8px rgba(27, 63, 160, .18); } 100% { box-shadow: 0 1px 2px rgba(12, 24, 37, .04), 0 4px 16px rgba(12, 24, 37, .04), 0 0 0 0 rgba(27, 63, 160, 0); } } .cgproc-card.just-landed { animation: cgproc-landing-glow 750ms ease-out; } .cgproc-col:nth-child(1) .cgproc-card { transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms; } .cgproc-col:nth-child(2) .cgproc-card { transition-delay: 0ms, 0ms, 0ms, 0ms, 90ms; } .cgproc-col:nth-child(3) .cgproc-card { transition-delay: 0ms, 0ms, 0ms, 0ms, 180ms; } .cgproc-col:nth-child(4) .cgproc-card { transition-delay: 0ms, 0ms, 0ms, 0ms, 270ms; } .cgproc-col:nth-child(5) .cgproc-card { transition-delay: 0ms, 0ms, 0ms, 0ms, 360ms; } .cgproc-col:nth-child(6) .cgproc-card { transition-delay: 0ms, 0ms, 0ms, 0ms, 450ms; } .cgproc-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(12, 24, 37, .05), 0 12px 28px rgba(12, 24, 37, .10); border-color: var(--cgproc-card-bd-hover); } .cgproc-card:hover .cgproc-icon { background: var(--cgproc-dot); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(27, 63, 160, .28); } /* is-active — lit by cg_process_pulse_travel_script() when the traveling dot reaches this card, and left lit until the lap resets. The one moment on the page meant to look dimensional; recoloured from the old coral glow to the section's own navy so the palette stays as specified. */ .cgproc-card.is-active { transform: translateY(-6px); border-color: var(--cgproc-dot); background: linear-gradient(180deg, #ffffff 0%, #f7f9fe 100%); box-shadow: 0 3px 8px rgba(27, 63, 160, .14), 0 12px 24px rgba(27, 63, 160, .16), 0 28px 52px rgba(27, 63, 160, .12); } .cgproc-card.is-active .cgproc-icon { background: var(--cgproc-dot); color: #fff; box-shadow: 0 6px 14px rgba(27, 63, 160, .3); } /* Stem + dot halo recolor once THIS dot has been visited. Stem LENGTH also adjusts: .is-active lifts its card 6px, so a down card moves 6px closer to its dot (stem shrinks to 16px) and an up card moves 6px farther (stem grows to 28px), keeping the stem meeting the card's real edge rather than overshooting. */ .cgproc-dotwrap--up.is-visited::before, .cgproc-dotwrap--down.is-visited::after { background: var(--cgproc-dot); } .cgproc-dotwrap--down.is-visited::after { height: 16px; } .cgproc-dotwrap--up.is-visited::before { height: 28px; } .cgproc-dotwrap.is-visited .cgproc-dot { transform: scale(1.15); box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(27, 63, 160, .45), 0 0 0 12px rgba(27, 63, 160, .12); } /* Icon — squircle rather than a circle, which reads more current at enterprise scale and echoes the card's own 16px radius. Size, colors and the SVG inside are unchanged. */ .cgproc-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--cgproc-icon-bg); color: var(--cgproc-icon-fg); margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(27, 63, 160, .07); transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .cgproc-step-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9bb0bf; margin-bottom: 4px; } .cgproc-title { font-size: 15px; font-weight: 600; color: #0b0f17; margin: 0 0 6px; line-height: 1.3; } .cgproc-body { font-size: 13.5px; line-height: 1.6; color: #657e91; margin: 0; } /* ── Tablet (768–1023px): 2-up card grid ────────────────────────────── The 6-column zigzag cannot survive this width (columns fall under ~110px), and dropping straight to the 1-column mobile list wastes half the viewport. A 2-column grid with no rail is the honest layout here: same cards, same order, no fake timeline. */ @media (min-width: 768px) and (max-width: 1023px) { .cgproc-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 20px; row-gap: 20px; margin-top: 4px; } .cgproc-col { display: block; } .cgproc-col > * { grid-column: auto; } .cgproc-dotwrap, .cgproc-pulse, .cgproc-mobile-rail { display: none; } .cgproc-card--up, .cgproc-card--down { grid-row: auto; align-self: stretch; } .cgproc-card { width: 100%; max-width: none; margin-left: 0; margin-right: 0; height: 100%; clip-path: none; } .cgproc-card--up::after, .cgproc-card--down::after { top: 0; bottom: auto; } } /* ── Mobile (<768px): single-column vertical timeline ─────────────── */ @media (max-width: 767px) { .cgproc-track { position: relative; display: flex; flex-direction: column; row-gap: 0; } .cgproc-col { display: flex; align-items: stretch; gap: 16px; padding-bottom: 20px; } .cgproc-col:last-child { padding-bottom: 0; } .cgproc-col > * { grid-column: unset; } .cgproc-dotwrap { order: -1; align-self: flex-start; justify-self: auto; width: 26px; margin-top: 26px; /* aligns the dot with the card's icon row */ flex-shrink: 0; } .cgproc-dotwrap--up::before, .cgproc-dotwrap--down::after, .cgproc-baseline-seg { display: none; } .cgproc-pulse { display: block; position: absolute; inset: 0; height: auto; grid-column: unset; grid-row: unset; align-self: unset; } /* Vertical rail — spans exactly first-dot-center to last-dot-center, positioned by cg_process_pulse_travel_script(), not CSS. */ .cgproc-mobile-rail { display: block; position: absolute; left: 13px; width: 2px; border-radius: 2px; background: var(--cgproc-line); z-index: 0; } .cgproc-pulse-trail { left: 13px; top: 0; width: 2px; height: 0; } .cgproc-card--up, .cgproc-card--down { grid-row: unset; align-self: unset; } .cgproc-card { max-width: none; height: auto; overflow: visible; /* No grid to bleed into here — a plain flex column, one card per row — so the desktop bleed would overflow the viewport. */ width: 100%; margin-left: 0; margin-right: 0; } /* Accent edge sits on the left on mobile, where the rail is. */ .cgproc-card::after { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, var(--cgproc-dot), rgba(27, 63, 160, .35)); transform: scaleY(0); transform-origin: top center; transition: transform 320ms cubic-bezier(.16, 1, .3, 1); } .cgproc-card:hover::after, .cgproc-card.is-active::after { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .cgproc-card { transition: none; clip-path: inset(0 0 0% 0 round 16px); } .cgproc-card:hover { transform: none; } .cgproc-card::after { transition: none; } } /* ── §8 Quality ─────────────────────────────────────────────── */ /* Quality image — full-bleed within its column. Reference: QualityCriteria.tsx — image fills column, rounded-2xl */ .cgqual-img img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; } /* ── §9 Awards — AGMA badge area ───────────────────────────── */ /* AGMA badge — dimmed on rest, full opacity on hover */ .cgagma-badge img { opacity: 0.75; transition: opacity 200ms ease; max-height: 80px; width: auto; object-fit: contain; } .cgagma-badge:hover img { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cgagma-badge img { transition: none; } } /* ── §10 Recent Blogs (loop-grid, light bg) ─────────────────── */ /* Blog card: white card, hover lift. Reference: RecentBlogs.tsx "group hover:-translate-y-1 shadow-lift" NOTE: this card is a rendered Loop Grid item (template post 151), repeated once per post — its custom_css_classes setting ("cgblog- card" / "cgblog-title") never actually reaches the rendered markup in this Elementor version (verified directly in the DOM: the class list on the live card is only the stock elementor-element-* ones), so every rule below targets [data-id="d626ebf"]/[data-id="5ddcbea"] instead — the one attribute that DOES render, identically on all three repeated cards, matching the pattern used for every other loop-template widget on this page (Products/Capabilities/Industries cards all hit this same "custom class silently doesn't render" Elementor quirk earlier this session too). */ [data-id="d626ebf"] { transition: transform 200ms ease, box-shadow 200ms ease; /* Fixed so all three cards match regardless of title/excerpt length. Now that the title block above is itself a fixed height (see [data-id="5ddcbea"] below), content bottom sits at a known, identical position on every card — measured at ~458px from the card top, so 490px leaves a consistent ~32px footer margin instead of the ~87px of dead space the old 545px value left once the title-height fix stopped that gap from varying by post. */ overflow: hidden !important; } [data-id="d626ebf"]:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(4,10,21,0.10); } [data-id="5ddcbea"] .elementor-heading-title { transition: color 150ms ease; } [data-id="d626ebf"]:hover [data-id="5ddcbea"] .elementor-heading-title { color: #1b3fa0 !important; } /* Title → excerpt gap: the card's own flex `gap:20px` (between every child) plus the excerpt widget's own 4px padding-top stack to 24px — tightened to 8px via a negative margin-top on the excerpt only, so image→title and excerpt→"Read article" spacing stay untouched. */ .elementor-element-cgblog_exc { margin-top: -12px !important; } @media (prefers-reduced-motion: reduce) { [data-id="d626ebf"] { transition: none; } [data-id="d626ebf"]:hover { transform: none; } } /* ── §11 Reviews — infinite auto-scroll marquee (2026-09-08 redesign, Launch-UI-style) ─────────────────────────────────────────────── Replaces the old manual prev/next+dots single-quote carousel with a continuously scrolling row of testimonial cards: track holds the 3 sample quotes TWICE back-to-back (.cgtest-card + an aria-hidden duplicate set) and animates translateX(0 → -50%) on an infinite loop — since the second half is pixel-identical to the first, the reset from -50% back to 0% is invisible, giving a seamless loop with no JS at all. Hover pauses it (a11y: users who want to actually read a card no longer have to chase it); prefers-reduced-motion users get a static, non-animating row instead — never fully hidden, since the content itself is still worth reading, just not endlessly moving. The "Sample — pending client confirmation" badge carries over unchanged: these are still not real customer testimonials, and nothing here should read as if they were (no fabricated personal names/photos — avatars are initials drawn from each quote's job title, exactly as already attributed, not invented identities). */ .cgtest-marquee { position: relative; margin-top: 20px; overflow: hidden; } .cgtest-track { display: flex; width: max-content; gap: 20px; animation: cgtest-scroll 38s linear infinite; } .cgtest-marquee:hover .cgtest-track { animation-play-state: paused; } @keyframes cgtest-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cgtest-card { flex: 0 0 340px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; padding: 24px; } .cgtest-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .cgtest-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; } .cgtest-name { margin: 0; font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.3; } .cgtest-role { margin: 2px 0 0; font-size: 12.5px; color: #9bb0bf; line-height: 1.3; } .cgtest-quote { margin: 0; font-family: Inter, sans-serif; font-size: 14px; line-height: 1.5em; letter-spacing: 0.04em; color: #657e91; } @media (max-width: 639px) { .cgtest-card { flex-basis: 280px; padding: 20px; } } @media (prefers-reduced-motion: reduce) { .cgtest-track { animation: none; } /* Without the animation, the duplicated second half (there only to make the loop seamless) would just sit visible next to the first, showing the same 3 quotes twice in a row — hide it. */ .cgtest-track > [aria-hidden="true"] { display: none; } } /* ── §12 FAQ ─────────────────────────────────────────────────── */ /* Left intro column — sticky at desktop so it anchors while the accordion scrolls past it. Reference: FaqAccordion.tsx — sticky left column in lg layout. */ .cgfaq-intro { position: sticky; top: 100px; align-self: flex-start; padding-right: 24px; } @media (max-width: 1024px) { .cgfaq-intro { position: static; padding-right: 0; padding-bottom: 40px; margin-bottom: 8px; border-bottom: 1px solid #e8eaeb; } } /* "Browse all FAQs" link in intro column */ .cgfaq-all-link { display: inline-flex; align-items: center; gap: 8px; color: #1b3fa0; font-weight: 600; font-size: 14px; text-decoration: none; text-transform: uppercase; transition: gap 150ms ease, color 150ms ease; } .cgfaq-all-link:hover { color: #1b3fa0; gap: 12px; } @media (prefers-reduced-motion: reduce) { .cgfaq-all-link { transition: none; } .cgfaq-all-link:hover { gap: 8px; } } /* Accordion container */ .cgfaq-list { border-bottom: 1px solid #e8eaeb; } /* Each FAQ item */ .cgfaq-item { border-top: 1px solid #e8eaeb; } .cgfaq-item[open] { /* Subtle bg tint when open to lift the active item */ background: #fafbfc; margin: 0 -20px; padding: 0 20px; border-radius: 4px; } /* Summary row */ .cgfaq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; user-select: none; } .cgfaq-item summary::-webkit-details-marker { display: none; } /* Question text */ .cgfaq-q { font-size: 15px; font-weight: 600; line-height: 1.45; color: #0b0f17; transition: color 150ms ease; } .cgfaq-item[open] .cgfaq-q { color: #1b3fa0; } /* +/× toggle icon */ .cgfaq-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: #f3f5f6; border: 1px solid #e8eaeb; color: #0b0f17; font-size: 17px; font-weight: 400; line-height: 1; flex-shrink: 0; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } .cgfaq-item[open] .cgfaq-icon { background: #1b3fa0; border-color: #1b3fa0; color: #fff; } /* Answer body — height-animated open/close. .cgfaq-ans is the clip box (height driven by JS, 0 → scrollHeight → auto); .cgfaq-ans-inner carries the padding so the clip box's own box-sizing never fights the measured height. Override the UA

rule (details:not([open]) > *:not(summary) { display:none }) so the content stays in the render tree — and animatable — through the whole collapse, only the JS-driven height hides it. */ .cgfaq-item > .cgfaq-ans { display: block !important; height: 0; overflow: hidden; transition: height 280ms ease; } .cgfaq-ans-inner { padding-bottom: 22px; } .cgfaq-ans-inner p { margin: 0; font-size: 14px; line-height: 1.5em; font-family: Inter, sans-serif; font-weight: 400; line-height: 1.5em; letter-spacing: 0.04em; color: rgb(138, 147, 163); } @media (prefers-reduced-motion: reduce) { .cgfaq-q, .cgfaq-icon, .cgfaq-ans { transition: none; } } /* ── CTA banners ─────────────────────────────────────────────── */ /* CTA 1 — coral diagonal gradient section. The diagonal gradient is set in Elementor background settings; CSS here adds the clip-path skew effect that matches CtaDiagonal.tsx */ .cgcta1 { position: relative; overflow: hidden; } /* Diagonal skew via pseudo element — decorative only */ .cgcta1::before { content: ''; position: absolute; top: -40px; right: -5%; width: 40%; height: calc(100% + 80px); background: rgba(0,0,0,0.08); transform: skewX(-8deg); pointer-events: none; } /* ── Section spacing — ensure each section has comfortable padding ── */ /* Sections that don't already define padding in Elementor settings */ #cgsec4_o, #cgsec5_o, #cgsec6_o, #cgsec7_o, #cgsec8_o, #cgsec9_o, #cgsec10_o, #cgsec11_o, #cgsec12_o, #cgsec13_o { scroll-margin-top: 80px; } /* ── Eyebrow / section-label utility ────────────────────────── */ /* Elementor's heading widget has no eyebrow concept. We use the "HTML tag = span" heading, relying on the global-style eyebrow token. This just ensures the text widget that carries the eyebrow label renders inline-block so it doesn't stretch full width. */ .elementor-widget-heading .elementor-heading-title[style*="text-transform: uppercase"][style*="font-size: 11px"], .elementor-widget-heading .elementor-heading-title[style*="text-transform:uppercase"][style*="font-size:11px"] { display: inline-block; } /* ── Loop grid gap normalization ───────────────────────────── */ /* Loop grids for capabilities and blogs share 3-col layout. Elementor's gap setting sometimes needs reinforcement on mobile. */ .cgcap-grid .elementor-loop-container, .cgblog-grid .elementor-loop-container { gap: 24px !important; } @media (max-width: 767px) { .cgcap-grid .elementor-loop-container, .cgblog-grid .elementor-loop-container { gap: 16px !important; } } /* ============================================================ 10. FAQ + Contact two-column side-by-side layout fix. Root cause: Elementor flex_size:'grow' does not always emit flex-grow:1 in the generated CSS. The second column defaults to its natural content width (~1228px) which, combined with flex-wrap:wrap on the row, causes it to fall below the first column. Fix: force nowrap + flex:1 on both second columns. ============================================================ */ /* §12 FAQ — row: no wrap; accordion column: fill remaining space */ @media (min-width: 1025px) { /* Intro column — fixed at 32% */ .elementor-element-2d5c897 { flex: 0 0 32% !important; max-width: 32% !important; width: 32% !important; box-sizing: border-box !important; } /* Accordion column — fills all remaining space */ .elementor-element-80a23ce { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; } } /* §13 Contact — row: no wrap; form column: fill remaining space */ @media (min-width: 1025px) { /* Info column — fixed at 38% */ .elementor-element-442a888 { flex: 0 0 38% !important; max-width: 38% !important; width: 38% !important; box-sizing: border-box !important; } /* Form column — fills remaining 62% minus gap */ .elementor-element-d444c84 { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; } } /* ============================================================ 11. §2 Stats / Counter panel — dark card on very dark bg. Reference: StatCounters.tsx - Dark panel card (border #1c2129, radius 20px) centered - Large white bold counter numbers (~60px) - Coral uppercase labels (#1b3fa0) - Muted gray descriptions (#9bb0bf) - Vertical dividers between the 4 columns ============================================================ */ /* Ensure stat columns share width equally */ .cgstat-panel > .elementor-container, .cgstat-panel > * { display: flex !important; flex-direction: row !important; } .cgstat-col { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Vertical dividers between the stat tiles. These are NOT drawn by this border — the visible hairline is the 1px grid-gap on cgs2grid letting that container's own background show through between the white tiles, so cgs2grid's BACKGROUND COLOUR is what actually sets the divider colour (both are #E8EAEB, set in Elementor on cgs2grid — editable there, not here). The border below is kept only as the fallback for the mobile 2x2 stack further down, and is matched to the same colour so the two techniques can never disagree. It was #f7faff, a leftover from when this card was dark navy, which was invisible on today's white tiles. */ [data-id="cgs2t2"], [data-id="cgs2t3"], [data-id="cgs2t4"] { border-left: 1px solid #E8EAEB !important; } /* Counter number — Elementor counter widget renders .elementor-counter-number */ .cgstat-col .elementor-counter-number-wrapper { font-size: 60px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1 !important; letter-spacing: -0.02em !important; font-family: inherit !important; } .cgstat-col .elementor-counter-number, .cgstat-col .elementor-counter-number-prefix, .cgstat-col .elementor-counter-number-suffix { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* Override any Elementor-generated typography for counter numbers (these are set via style attribute by the widget JS) */ .cgstat-col .elementor-counter-number-wrapper[style] { font-size: 60px !important; color: #ffffff !important; } @media (max-width: 767px) { /* On mobile, stack 2×2 */ .cgstat-panel { flex-wrap: wrap !important; } [data-id="cgs2t1"], [data-id="cgs2t2"], [data-id="cgs2t3"], [data-id="cgs2t4"] { flex: 0 0 50% !important; min-width: 50% !important; border-left: none !important; } /* Bottom dividers for top row */ [data-id="cgs2t1"], [data-id="cgs2t2"] { border-bottom: 1px solid #E8EAEB !important; } /* Right divider between the two in each row */ [data-id="cgs2t1"], [data-id="cgs2t3"] { border-right: 1px solid #E8EAEB !important; } } /* ============================================================ 12. Capabilities loop grid — equal card heights + hover. Widget: [data-id="ed8de9e"] Template: elementor-149 Card: .elementor-element-5513af7 (border #e8eaeb, radius 14px, padding 28px, flex-column) Problem: custom_css_classes ('cgcap-grid') is not reliably applied by Elementor 4.x, so target by data-id instead. CSS grid stretches the e-loop-item cells to row height, but the chain inside doesn't pass that height down to the card. Fix: make each level in the chain flex:1 / flex-column. ============================================================ */ /* 1. Reinforce align-items: stretch on the grid */ [data-id="ed8de9e"] .elementor-loop-container { align-items: stretch !important; } /* 2. e-loop-item (direct grid child) → flex column so inner .elementor wrapper can grow to fill the grid-cell height */ [data-id="ed8de9e"] .e-loop-item { display: flex !important; flex-direction: column !important; } /* 3. .elementor root inside the loop item → grow & flex */ [data-id="ed8de9e"] .e-loop-item > .elementor { flex: 1 !important; display: flex !important; flex-direction: column !important; } /* 4. Card container fills all remaining height */ [data-id="ed8de9e"] .elementor-element-5513af7 { flex: 1 !important; min-height: 0 !important; } /* ── Redesign (2026-09-08, per client-supplied Next.js reference) ────── Back to the section's original single-column header (eyebrow/title/ description stacked on top, full width) — the two-column sticky- sidebar layout from the previous request is gone, along with the photo-led card designs before it (both the "1 featured + 2×2 grid" mockup and the "single card per line" list). The Next.js reference uses a plain bordered card — no image at all — title, description, and (added per this request; the reference itself doesn't have one) a "Read More" link. Grid: 3 cards on row 1, 2 on row 2, matching the reference exactly. */ [data-id="cgsec5_i"] > .e-con-inner { flex-direction: column !important; } [data-id="cgcapleft"] { flex: 1 1 auto !important; max-width: none !important; position: static !important; } [data-id="ed8de9e"] { /* Elementor gives this widget its own internal default width (a flex-basis computed from a --container-widget-flex-grow custom property, independent of the parent's flex-direction) that was quietly rendering it at exactly 50% of the section width — width and flex-basis both forced to override it. */ flex: 1 1 100% !important; width: 100% !important; } [data-id="ed8de9e"] .elementor-loop-container { max-height: none !important; overflow: visible !important; padding-right: 0 !important; } /* No image in this section — the card template still carries the image widget (6b80a53) for the sections that DO use it elsewhere; simplest to hide it here than to strip it from a shared template. */ [data-id="ed8de9e"] .elementor-element-6b80a53 { display: none !important; } /* Bordered card, no photo — title, description, "Read More" link. */ [data-id="ed8de9e"] .elementor-element-5513af7 { border-radius: 12px !important; padding: 28px !important; overflow: visible !important; gap: 0 !important; transition: border-color 200ms ease, box-shadow 200ms ease; } [data-id="ed8de9e"] .elementor-element-5513af7:hover { border-color: #1b3fa0 !important; box-shadow: 0 8px 24px rgba(4, 10, 21, 0.08); } [data-id="ed8de9e"] .elementor-element-5513af7:hover [data-id="0269ef9"] .elementor-heading-title { color: #1b3fa0 !important; } .cgcap-learnmore { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #1b3fa0; transition: gap 150ms ease; } [data-id="ed8de9e"] .elementor-element-5513af7:hover .cgcap-learnmore { gap: 10px; } /* Desktop: 3 cards on row 1, 2 on row 2 — a 6-column base so both row widths divide evenly (row-1 cards each span 2 of 6, row-2 cards each span 3 of 6); normal grid auto-flow then places row 2 on its own line with no explicit grid-row needed. nth-of-type, not nth-child — Elementor injects one leading