/* * Creative GOAT design system - reusable layout and component geometry. * Phase 3 Step 3A. Child theme 1.1.0. * * Scope: maximum widths, side padding, section padding, grid columns and * gaps, card geometry, alignment, responsive stacking, subtle hover * movement, image object-fit. No brand colours, backgrounds, fonts, * button colours, copy or form behaviour - those live in Elementor * Global Colors / Global Fonts. No !important declarations. * Accessibility rules live in cg-foundation.css and are not duplicated. */ /* Page-level hooks */ .cg-page, .cg-page--service, .cg-hero, .cg-section--dark, .cg-section--light { position: relative; } /* Container: 1200px max, 44/32/20 side padding */ .cg-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 44px; padding-right: 44px; } /* Section rhythm: 72 standard, 48 compact, 96/64 hero */ .cg-section { padding-top: 72px; padding-bottom: 72px; } .cg-section--compact { padding-top: 48px; padding-bottom: 48px; } .cg-hero--standard { padding-top: 96px; padding-bottom: 64px; } /* Grids: 32/24/16 gaps, responsive stacking */ .cg-grid { display: grid; gap: 32px; align-items: stretch; } .cg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cg-process-grid { display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } /* Cards: 8px radius, 1px border geometry, 32/24 padding, equal height */ .cg-card, .cg-card--dark, .cg-card--service { border-radius: 8px; border-width: 1px; border-style: solid; padding: 32px; height: 100%; display: flex; flex-direction: column; transition: transform 0.2s ease; } .cg-card:hover { transform: translateY(-2px); } /* CTA band and eyebrow spacing */ .cg-cta { padding-top: 72px; padding-bottom: 72px; } .cg-eyebrow { display: block; margin-bottom: 12px; } /* Media behaviour */ .cg-card img, .cg-hero img { max-width: 100%; height: auto; object-fit: cover; } /* Tablet */ @media (max-width: 1024px) { .cg-container { padding-left: 32px; padding-right: 32px; } .cg-grid, .cg-process-grid { gap: 24px; } .cg-grid--3, .cg-grid--4, .cg-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile */ @media (max-width: 767px) { .cg-container { padding-left: 20px; padding-right: 20px; } .cg-grid, .cg-process-grid { gap: 16px; } .cg-grid--2, .cg-grid--3, .cg-grid--4, .cg-process-grid { grid-template-columns: minmax(0, 1fr); } .cg-card, .cg-card--dark, .cg-card--service { padding: 24px; } } /* ============================================================ CREATIVE GOAT - CROSS-PAGE ALIGNMENT LAYER Phase 3 Step 4. Added 2026-08-13. Purpose: one place to control heading, card and label sizing across every page. Every value below is a value already in use on Home V2 - this layer does not introduce a new design, it makes the rest of the site agree with Home V2. HOW TO CHANGE THE SITE Edit a token in the :root block. Every page that uses the matching cgv2-* section class follows automatically, including pages built later. Nothing else in this file should need edits. TWO SECTION-HEADING TIERS (owner decision, 2026-08-13) Tier A --cg-a-h2-major 62/62/34 narrative + feature sections Tier B --cg-a-h2-grid clamp card-grid + list sections Both tiers exist on Home V2 today; this layer applies them consistently rather than collapsing them into one size. SPECIFICITY NOTE The 112 KB WPCode snippet that styles the site carries 1,239 !important declarations, so these rules need both !important and a higher specificity to take effect. The repeated [class] selectors do nothing except raise specificity. When that snippet is eventually retired they can all be removed. NO COLOUR, CONTENT, LAYOUT, RADIUS OR HERO CHANGES. ============================================================ */ :root{ /* Section headings */ --cg-a-h2-major: 62px; --cg-a-h2-grid: clamp(30px, 3vw, 44px); /* Page banner - the Home V2 hero is deliberately excluded */ --cg-a-h1-banner: clamp(34px, 4.6vw, 58px); --cg-a-lede-banner: 17px; /* Labels */ --cg-a-eyebrow: 16px; /* Cards */ --cg-a-card-title: 31px; --cg-a-card-title-compact: 23px; --cg-a-card-text: 15px; --cg-a-card-pad: 28px 30px 26px; --cg-a-card-pad-compact: 76px 38px 38px; --cg-a-card-pad-dark: 32px; --cg-a-grid-gap: 1px; } /* Mobile steps - mirrors how Home V2 already behaves below 768px */ @media (max-width:767px){ :root{ --cg-a-h2-major: 34px; --cg-a-card-title: 23px; --cg-a-card-title-compact: 20px; --cg-a-card-text: 14.5px; --cg-a-lede-banner: 16px; } } /* ---------- Tier A: major narrative / feature sections ---------- */ [class][class][class][class][class]:is( .cgv2-cost, .cgv2-process, .cgv2-stories, .cgv2-support, .cgv2-cta, .cgv2-why ) h2{ font-size: var(--cg-a-h2-major) !important; } /* Kept out of the :is() above on purpose. :is() takes the highest specificity of its arguments, so folding this two-class selector in would raise the whole rule and break the eyebrow override. */ [class][class][class][class][class].cgv2-services.cgv2-lean h2{ font-size: var(--cg-a-h2-major) !important; } /* Industry detail pages: "Why " is a major section. .page-child is what separates the four industry pages from About, which uses the same cgv2-why2 class for its smaller sections. */ [class][class][class][class][class].page-child .cgv2-why2 h2{ font-size: var(--cg-a-h2-major) !important; } /* ---------- Tier B: card-grid / list sections ---------- */ [class][class][class][class][class]:is(.cgv2-services,.cgv2-why2) h2{ font-size: var(--cg-a-h2-grid) !important; } /* Case Studies (181) and Insights (186) use cost/support as card grids rather than narrative sections, so they take Tier B. */ [class][class][class][class][class]:is(.page-id-181,.page-id-186) :is(.cgv2-cost,.cgv2-support) h2{ font-size: var(--cg-a-h2-grid) !important; } /* ---------- Page banners ---------- */ [class][class][class][class][class] .cgv2-hero--page h1{ font-size: var(--cg-a-h1-banner) !important; } [class][class][class][class][class] .cgv2-hero--page .cgv2-lede{ font-size: var(--cg-a-lede-banner) !important; } /* ---------- Eyebrow labels ---------- */ [class][class][class][class][class] .cgv2-eyebrow{ font-size: var(--cg-a-eyebrow) !important; } /* Eyebrow labels that happen to be marked up as

. The markup and heading semantics are left exactly as they are - only the rendered size changes, so they match every other eyebrow on the site. Six [class] repeats so this outranks the Tier rules above regardless of source order. */ [class][class][class][class][class][class] :is(.cg-ctabox-mark,.cgv2-aside__head) h2{ font-size: var(--cg-a-eyebrow) !important; } /* ---------- Card titles ---------- */ [class][class][class][class][class] :is(.cgv2-services,.cgv2-support) .cgv2-svc h3{ font-size: var(--cg-a-card-title) !important; } /* Compact card titles. Placed after the rule above by design. */ [class][class][class][class][class] .cgv2-cost__card h3{ font-size: var(--cg-a-card-title-compact) !important; } [class][class][class][class][class] .cgv2-faq .cgv2-svc h3{ font-size: var(--cg-a-card-title-compact) !important; } [class][class][class][class][class].page-id-186 .cgv2-svc h3{ font-size: var(--cg-a-card-title-compact) !important; } /* About's stat grid reuses cgv2-svc h3 for large figures, not card titles. Explicitly restored so it keeps its own size. */ [class][class][class][class][class] .cgv2-statgrid .cgv2-svc h3{ font-size: 46px !important; } @media (max-width:1024px){ [class][class][class][class][class] .cgv2-statgrid .cgv2-svc h3{ font-size: 40px !important; } } @media (max-width:767px){ [class][class][class][class][class] .cgv2-statgrid .cgv2-svc h3{ font-size: 34px !important; } } /* ---------- Card body text ---------- */ [class][class][class][class][class] :is(.cgv2-svc,.cgv2-cost__card) p{ font-size: var(--cg-a-card-text) !important; } /* ---------- Card grids and padding ---------- */ [class][class][class][class][class] :is(.cgv2-cost__grid,.cgv2-svc__grid){ gap: var(--cg-a-grid-gap) !important; } /* Case Studies and Insights build this grid with flexbox and cards that do not grow, so the width freed by the smaller gap collected as dead space at the right edge. Letting the cards grow makes the row fill exactly as Home V2 does. Inert on Home V2 itself, which uses CSS grid, where flex-grow does nothing. */ /* Same two grids: align-items was start, so cards in a row ended at different heights and left grey slivers once the gap shrank. Every other card grid on the site already produces equal-height rows, Home V2 included. Inert where that is already the case. */ [class][class][class][class][class] .cgv2-cost__grid{ align-items: stretch !important; } [class][class][class][class][class] .cgv2-cost__grid > *{ flex-grow: 1 !important; /* These cards carry a resolved height that blocks the stretch above. height:auto restores it, which is what equalises the rows. Without this line align-items has no effect here. */ height: auto !important; } [class][class][class][class][class] .cgv2-services .cgv2-svc{ padding: var(--cg-a-card-pad) !important; } [class][class][class][class][class] .cgv2-support .cgv2-svc{ padding: var(--cg-a-card-pad-dark) !important; } [class][class][class][class][class] .cgv2-cost__card{ padding: var(--cg-a-card-pad-compact) !important; } /* ---------- Story-card number + hover (Case Studies, Insights) ---------- These two pages render the card number as a CSS counter on the card's ::before instead of as a real element the way Home V2 does. That pseudo had top AND bottom set, which stretched it to the full card height, and a 1px border, so it drew a tall rectangle behind the number. Collapsing it to its own size removes the rectangle. The hover then had two separate blockers. A page-scoped background rule (0,2,1) outranked the site-wide :hover rule (0,2,0), so the card never darkened. And the card text is painted with -webkit-text-fill-color, which wins over color, so setting color alone left the text dark navy on a navy card - invisible. Result: these cards now hover exactly like Home V2's - navy fill, cyan number, white title, light body. Inert on Home V2 itself, where the ::before has no content and the number is a real .cgv2-num. ------------------------------------------------------------------ */ [class][class][class][class][class] .cgv2-cost__card::before{ bottom: auto !important; height: auto !important; border: 0 !important; } [class][class][class][class][class] .cgv2-cost__card:hover{ background-color: var(--cgv2-navy) !important; } [class][class][class][class][class] .cgv2-cost__card:hover::before{ color: var(--cgv2-cyan) !important; -webkit-text-fill-color: var(--cgv2-cyan) !important; } [class][class][class][class][class] .cgv2-cost__card:hover .cgv2-cost__t, [class][class][class][class][class] .cgv2-cost__card:hover .cgv2-cost__t *{ color: #fff !important; -webkit-text-fill-color: #fff !important; } [class][class][class][class][class] .cgv2-cost__card:hover .cgv2-cost__b, [class][class][class][class][class] .cgv2-cost__card:hover .cgv2-cost__b *{ color: rgba(230,236,247,.78) !important; -webkit-text-fill-color: rgba(230,236,247,.78) !important; } /* ---------- Card call-to-action alignment (site-wide) ---------- Every card is a flex column, but the link sat directly after the body text, so its vertical position followed the length of the copy above it. In a row of equal-height cards that left the links on different lines - up to 70px apart on the Services hub. margin-top:auto pushes the link to the bottom of its card, so every link in a row lands on one line. It only consumes slack that was already inside the card: card heights, row heights and document heights are unchanged at every width. This applies to Home V2 as well, which had the same problem ([270,293,293] on its service row) and so could not serve as the reference here. ------------------------------------------------------------- */ [class][class][class][class][class] .cgv2-svc .cgv2-explore, [class][class][class][class][class] .cgv2-cost__card .cg-card-cta{ margin-top: auto !important; } /* ---------- Diamond outline on every light card ---------- The rotated-square hairline already existed on .cgv2-svc cards and on the CTA and form panels. It was missing from .cgv2-cost__card, so Home's cost cards and the Case Studies / Insights story cards had none. Extended to those, using the same geometry, so the motif reads as one system. Both selectors are driven from the tokens below, so size, offset, colour and hover growth are changed in one place. Layering: isolation:isolate on the card plus z-index:-1 on the pseudo puts the outline above the card background but behind the text - "in the background", and it means no child element has to be repositioned. That matters: forcing children to position:relative broke Home's absolutely-positioned card number and grew those cards by 64px. Verified layout-neutral - card heights and document heights are unchanged on all seven card pages. ---------------------------------------------------------- */ :root{ --cg-a-deco-size: 230px; --cg-a-deco-offset: -70px; --cg-a-deco-color: rgba(34,211,238,.35); --cg-a-deco-scale: 1.2; } [class][class][class][class][class] :is(.cgv2-svc,.cgv2-cost__card){ position: relative !important; overflow: hidden !important; isolation: isolate !important; } [class][class][class][class][class] :is(.cgv2-svc,.cgv2-cost__card)::after{ content: "" !important; position: absolute !important; top: auto !important; left: auto !important; right: var(--cg-a-deco-offset) !important; bottom: var(--cg-a-deco-offset) !important; width: var(--cg-a-deco-size) !important; height: var(--cg-a-deco-size) !important; border: 1px solid var(--cg-a-deco-color) !important; background: none !important; transform: rotate(45deg) !important; transition: transform .5s ease !important; pointer-events: none !important; z-index: -1 !important; } [class][class][class][class][class] :is(.cgv2-svc,.cgv2-cost__card):hover::after{ transform: rotate(45deg) scale(var(--cg-a-deco-scale)) !important; } /* ---------- Footer: contact icons and column widths ---------- The four contact icons (location, phone, email, hours) were filled #0F1626 - the footer's own background - so they were invisible. They now use the cyan already carrying the social icons and the "Office Hours:" label. Scoped to .cgf-contact so the social glyphs, which are correctly dark-on-cyan discs, are untouched. Column widths: the Industries column was 185px but its longest link needs 210px, so all four wrapped to two lines. Company only needs 99px of its 185. Reallocating fixes Industries and buys the Contact column enough room for the address to sit on two lines. Totals are unchanged, so the row still fills the same width. Desktop 183 / 212 / 100 / 272 (was 185 / 185 / 185 / 239). Total is held under the 1140px container so the five columns stay on one row down to about 1280px. Below that the contact block wraps to a second row - a deliberate trade, since the alternative is four two-line links in the Industries column. Tablet 185 / 215 / 120 / 340 (was 162 / 162 / 162 / 382) - Services wrapped at tablet too; this fixes both. Mobile untouched - the footer stacks to one column per row. ---------------------------------------------------------- */ [class][class][class][class][class] .cgf-contact .elementor-icon, [class][class][class][class][class] .cgf-contact .elementor-icon svg{ color: var(--cgv2-cyan) !important; fill: var(--cgv2-cyan) !important; } @media (min-width:1025px){ [class][class][class][class][class] .cgf-links .cgf-col:nth-child(2){flex:0 0 183px !important;} [class][class][class][class][class] .cgf-links .cgf-col:nth-child(3){flex:0 0 212px !important;} [class][class][class][class][class] .cgf-links .cgf-col:nth-child(4){flex:0 0 100px !important;} [class][class][class][class][class] .cgf-links .cgf-contact{flex:0 0 334px !important;} /* Contact column widened 272 -> 334, the row gutter trimmed 24 -> 14, and the contact rows' own 10px side padding removed, so the TOLL-FREE label sits beside 1-888-831-GOAT (4628) and "Serving Canada & the United States" stays on one line instead of breaking to a third row. Five columns still share one row: 250.8 + 183 + 212 + 100 + 334 + 4x14 = 1135.8 in a 1140 container. .cgv2-hero__foot .cgv2-meta gets flex:0 0 auto for the same reason: spelling out "United States" makes that line 503px, 8px more than the flex row was giving it, which orphaned "States" onto a second line. */ [class][class][class][class][class] .cgf-links > .e-con-inner{column-gap:14px !important;} [class][class][class][class][class] .cgf-contact > .e-con{padding-left:0 !important;padding-right:0 !important;} [class][class][class][class][class] .cgv2-hero__foot .cgv2-meta{flex:0 0 auto !important;} } @media (min-width:768px) and (max-width:1024px){ [class][class][class][class][class] .cgf-links .cgf-col:nth-child(2){flex:0 0 185px !important;} [class][class][class][class][class] .cgf-links .cgf-col:nth-child(3){flex:0 0 215px !important;} [class][class][class][class][class] .cgf-links .cgf-col:nth-child(4){flex:0 0 120px !important;} [class][class][class][class][class] .cgf-links .cgf-contact{flex:0 0 340px !important;} } /* ---------- Sidebar rail: Get a Quote button ---------- The floating quote button used linear-gradient(135deg, #0B5FFF, #22D3EE). The #0B5FFF end is the stray Elementor default kit blue that Phase 1 flagged - it is not a brand colour. Replaced with flat #22D3EE. Glyph and label go to #050810 rather than staying white: the site's own primary button (hero "Request a project review") is #050810 on #22D3EE at 11.1_1, and white on this cyan is 1.8_1, which Phase 2 4A prohibits outright. Same treatment applied to hover so the gradient cannot come back on interaction. The phone button below it is untouched - transparent with a cyan hairline, which is correct as the secondary action. -------------------------------------------------- */ [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"], [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"]:hover, [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"]:focus{ background-image: none !important; background-color: #22D3EE !important; color: #050810 !important; } [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"] svg, [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"]:hover svg{ stroke: #050810 !important; color: #050810 !important; } [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"] span, [class][class][class][class][class] .cg-vsb2-btn[href*="get-a-quote"] .cg-vsb2-lbl{ color: #050810 !important; -webkit-text-fill-color: #050810 !important; } /* ---------- Contact: hero buttons uncovered, ghost unified ---------- REGRESSION FIX. Step 3 standardised every page banner to 88/56. The Contact banner was 88/150, and I recorded all 150px as excess padding. It was not: the section below it carries margin-top:-96px so its card overlaps the hero edge by ~22px, and 96px of that 150 was reserving room for the pull. Cutting to 56 left the following section's background sitting on top of the two hero buttons - 30px of them at desktop, 46px at mobile - so they read as clipped. The dead-space sweep could not have caught this: it measured space not accounted for by padding, and this padding WAS accounted for - it was just load-bearing rather than decorative. Restored as 96 (what the negative margin consumes) + 56 (the standard banner bottom) = 152. Tablet 96+48=144, mobile 96+40=136. Contact keeps the standard visible breathing room; the extra is structural. Verified clearance: 66px desktop, 58 tablet, 50 mobile, with the card overlap preserved at 22/30px. NOTE ON THE SELECTOR: the [class] guards sit on the target compound, not before body. "[class]x5 body ..." would require to be a descendant of a classed element, which it is not - that form silently never matches. Ghost: .cg-ghost stroke moved from cyan to the same white as .cgv2-ghost on every other hero, and tapered to 1px on mobile to match. Requested after the 17-page hero rollout. ---------------------------------------------------------------- */ body.page-id-195 [class][class][class][class][class].cgv2-sec.cgv2-hero--page{padding-bottom:152px !important;} @media (min-width:768px) and (max-width:1024px){ body.page-id-195 [class][class][class][class][class].cgv2-sec.cgv2-hero--page{padding-bottom:144px !important;} } @media (max-width:767px){ body.page-id-195 [class][class][class][class][class].cgv2-sec.cgv2-hero--page{padding-bottom:136px !important;} } [class][class][class][class][class] .cg-ghost{-webkit-text-stroke-color:rgba(255,255,255,.55) !important;} @media (max-width:767px){ [class][class][class][class][class] .cg-ghost{-webkit-text-stroke-width:1px !important;} } /* ---------- CTA band: Case Studies and Insights ---------- Most CTA bands are: eyebrow 16 + H2 headline 62 + body 16 + button, and land between 418 and 573px tall. Case Studies and Insights have no H2 headline at all - their eyebrow is followed by a single

at 49px/600, doing headline duty. Insights' copy is ~150 characters, so at 49px it wrapped to seven lines and the band reached 760px desktop and 781px on mobile. Worth being explicit: raising these to 62 to "match" the other CTA headlines makes it worse, not better - Insights would reach 874px. No font size reconciles a 150-character sentence with a 62px headline slot. 23px (an existing site size, the compact-card title) brings both bands inside the reference range while keeping the text above body weight. The text widget was also only 303px wide inside a 1140px container - Elementor had it set to shrink-to-fit (.elementor-widget__width-initial) in a column flex with align-items:flex-start. Widening it to a 900px measure drops Insights from six lines to three and leaves room to raise the type rather than shrink it. Desktop 32px / 900px measure, tablet 28px, mobile 20px. Mobile deliberately stays at 20: the column cannot widen at 390px, so a larger size there only adds lines (22px tested at eight lines / 538px, worse than the 20px baseline). Result: Insights 760 -> 461 desktop (6 lines -> 3), 515 -> 429 tablet, 504 mobile unchanged. Case Studies 515 -> 374 desktop, its short line now setting on one row. THE REAL FIX IS EDITORIAL, NOT CSS. These two CTAs want a short headline plus a separate body line, like every other CTA has. That is a copy decision, so it is flagged rather than invented here. -------------------------------------------------------- */ body:is(.page-id-181,.page-id-186) [class][class][class][class][class].cgv2-cta .elementor-widget__width-initial{ width: 100% !important; max-width: 900px !important; } body:is(.page-id-181,.page-id-186) [class][class][class][class][class].cgv2-cta p{ font-size: 32px !important; line-height: 1.35 !important; max-width: 900px !important; width: auto !important; } @media (min-width:768px) and (max-width:1024px){ body:is(.page-id-181,.page-id-186) [class][class][class][class][class].cgv2-cta p{font-size:28px !important;} } @media (max-width:767px){ body:is(.page-id-181,.page-id-186) [class][class][class][class][class].cgv2-cta p{font-size:20px !important;line-height:1.45 !important;} } /* ---------- CTA eyebrow: white on every page ---------- The CTA eyebrow ("Still deciding?", "Have a part or facility to capture?", etc.) was #0E7490 on most pages but already white on Home - another same-component-two-values case. Now white everywhere, per owner request. Two selectors because the markup differs: most pages wrap it in .cgv2-eyebrow, Case Studies and Insights use .cg-ctabox-mark. In both the painted colour sits on the inner heading element, not the wrapper, so descendants are targeted too. CONTRAST, RECORDED DELIBERATELY: on the cyan band (#22D3EE) white measures 1.81_1. The previous #0E7490 measured 2.96_1, so this text already failed the 4.5_1 minimum for normal text and white makes it worse rather than introducing a new problem. #050810 - the same near-black as the CTA heading below it - would measure 11.08_1 and is the accessible alternative if this is ever revisited. Owner chose white with the trade-off stated. ------------------------------------------------ */ [class][class][class][class][class] .cgv2-cta .cgv2-eyebrow, [class][class][class][class][class] .cgv2-cta .cgv2-eyebrow *, [class][class][class][class][class] .cgv2-cta .cg-ctabox-mark, [class][class][class][class][class] .cgv2-cta .cg-ctabox-mark *{ color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ---------- Footer phone labels ---------- "Sudbury" and "Toll-free" sit beside their numbers in the footer contact column, matching the label treatment used on the Contact page. Cyan per owner request. Markup lives in the CG Site Footer template (ID 30) as ; this rule is the styling only. ------------------------------------- */ [class][class][class][class][class] .cgf-contact .cgf-telmark{ display: inline-block !important; margin-left: 6px !important; font-family: "Space Grotesk", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #22D3EE !important; -webkit-text-fill-color: #22D3EE !important; white-space: nowrap !important; vertical-align: middle !important; } /* ============================================================ SPACING NORMALIZATION (relocated from Customizer 2026-08-13) Originally published to Appearance > Customize > Additional CSS in Phase 3 Steps 3 and 3b. Moved here so the whole design layer lives in one file that travels with the theme. Customizer CSS is tied to the theme slug and is the least portable of the options. Content below is byte-identical to what was in the Customizer. ============================================================ */ /* ============================================================ Creative GOAT - spacing normalization (Phase 3, Step 3) Added 2026-08-13. SPACING ONLY. Changes section vertical padding, removes two forced card min-heights, removes one trailing wrapper padding on the legal pages, and evens out the home hero's internal rhythm. No colour, font, font size, button, image, animation, layout, structure, menu, header, footer, form, SEO, link or content change is made by this block. The repeated [class] selectors are a specificity guard only: the existing cgv2 design-system CSS declares its padding with !important at up to five classes, so these rules have to outrank it. To revert, delete this whole block. ============================================================ */ /* --- Desktop --- */ [class][class][class][class][class].cgv2-sec{padding-top:64px !important;padding-bottom:64px !important} [class][class][class][class][class].cgv2-sec.cgv2-legal{padding-top:40px !important;padding-bottom:56px !important} [class][class][class][class][class].cgv2-sec.cgv2-hero--page{padding-top:88px !important;padding-bottom:56px !important} /* Home hero: top padding paired with the logo offset below - do not change one without the other */ [class][class][class][class][class].cgv2-sec.cgv2-hero:not(.cgv2-hero--page){padding-top:132px !important;padding-bottom:40px !important} /* Legal pages: drop the 88px of trailing padding inside the content wrapper */ [class][class][class].cgv2-legal > .e-con-inner{padding-bottom:0 !important} /* Card grids: remove forced min-heights, let the grid equalise card heights */ .cgv2-support [class][class][class].cgv2-svc{min-height:0 !important} /* Home hero: even rhythm between eyebrow, headline, lede and buttons */ @media (min-width:1025px){ [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__inner{grid-template-rows:min-content min-content min-content 1fr min-content 0 min-content !important} } [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__scroll{margin-top:0 !important} /* --- Tablet --- */ @media (max-width:1024px){ [class][class][class][class][class].cgv2-sec{padding-top:56px !important;padding-bottom:56px !important} [class][class][class][class][class].cgv2-sec.cgv2-legal{padding-top:40px !important;padding-bottom:48px !important} [class][class][class][class][class].cgv2-sec.cgv2-hero--page{padding-top:72px !important;padding-bottom:48px !important} [class][class][class][class][class].cgv2-sec.cgv2-hero:not(.cgv2-hero--page){padding-top:110px !important;padding-bottom:56px !important} } /* --- Mobile --- */ @media (max-width:767px){ [class][class][class][class][class].cgv2-sec{padding-top:40px !important;padding-bottom:40px !important} [class][class][class][class][class].cgv2-sec.cgv2-legal{padding-top:32px !important;padding-bottom:40px !important} [class][class][class][class][class].cgv2-sec.cgv2-hero--page{padding-top:56px !important;padding-bottom:40px !important} [class][class][class][class][class].cgv2-sec.cgv2-hero:not(.cgv2-hero--page){padding-top:110px !important;padding-bottom:40px !important} } /* ============================================================ Home V2 hero - fit the whole hero in one desktop screen. Added 2026-08-13 (Step 3b), desktop only (>=1025px). Tablet and mobile are deliberately untouched by this block. The hero's height was driven by an image column whose height came from the two photos' own aspect ratio at full column width. The column is now capped to the viewport, the images fill it with object-fit:cover, and each carries its own focal point (standing exception S2) so the crop keeps the subject: the scanning tech in the first, the SCAN TO CAD board and monitor in the second. The column is also pulled up by 123px so its top edge lines up with the logo, which buys height for the images without making the hero any taller. Keep margin-top and max-height in step: the max-height already includes the 123px. Net effect: hero 1400px -> 945px, images larger than before the cap on most screens, and they scale up further on taller monitors. The min(1040px) is a ceiling so very tall windows cannot stretch the frames past the photos own proportions. ============================================================ */ @media (min-width:1025px){ [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-brand{top:26px !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__inner{row-gap:14px !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__foot{padding-top:8px !important;padding-bottom:6px !important;row-gap:14px !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-pipeline{padding-top:8px !important;padding-bottom:8px !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__scroll{padding-top:4px !important;padding-bottom:4px !important;margin-top:0 !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__media{margin-top:-123px !important;max-height:min(1040px, max(663px, calc(100vh - 307px))) !important;grid-template-rows:1fr 1fr !important;row-gap:14px !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__img{min-height:0 !important;overflow:hidden !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__img img{height:100% !important;width:100% !important;object-fit:cover !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__img:first-child img{object-position:50% 52% !important} [class][class][class].cgv2-hero:not(.cgv2-hero--page) .cgv2-hero__img:last-child img{object-position:50% 30% !important} } /* ============================================================ * [2026-08-14] Case study pages - client-requested corrections * * Hook: body.parent-pageid-181 = every child page of /case-studies/, * so duplicating the template picks these rules up automatically. * * The [class] repeats on body are a specificity guard, not a style * decision: WPCode snippet #766 declares the same properties with * !important at up to (0,5,0), so these must outrank it. * * Rollback: delete this whole block. Nothing else references it. * ============================================================ */ /* 1. Remove the 64px grid-square pattern from the light sections. * #766 paints it via background-image on > .e-con.cgv2-faq. */ body.parent-pageid-181[class][class][class][class] .e-con.cgv2-faq { background-image: none !important; } /* 2. CTA band typography. * #766 sets --cg-a-h2-major (62px) on the heading, and * clamp(32px, 3.4vw, 52px) on EVERY heading widget inside .cgv2-cta - * which also caught the subline paragraph (its Elementor value is 15px). * Restored to the page's own scale: * H1 58 > "At a glance" 44 > CTA heading 38 > lede 19. */ body.parent-pageid-181[class][class][class][class] .cgv2-cta .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(28px, 2.6vw, 38px) !important; } body.parent-pageid-181[class][class][class][class] .cgv2-cta .elementor-widget-heading p.elementor-heading-title { font-size: clamp(16px, 1.1vw, 19px) !important; line-height: 1.55 !important; } /* ------------------------------------------------------------ * [2026-08-14] Case study download block (gated PDF) * * Markup: Elementor HTML widget (.cg-dl) + Shortcode widget * (#cg-dl-form) holding WPForms form 1276, inside a container * classed .cgv2-sec.cg-dlsec. The form is hidden until the * button toggles .is-open on #cg-dl-form. * * Rollback: delete this block and the container in Elementor. * ------------------------------------------------------------ */ body.parent-pageid-181[class][class][class][class] .cg-dlsec > .e-con-inner { max-width: 1240px; background: #0B1220; border-top: 3px solid #22D3EE; /* #766 zeroes .e-con-inner padding with !important on these pages */ padding: 44px 40px !important; gap: 0; } .cg-dl__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #22D3EE; } .cg-dl__title { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #FFFFFF; } .cg-dl__lede { margin: 0 0 26px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: #CBD5E1; } .cg-dl__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 14px 26px; border: 0; border-radius: 2px; cursor: pointer; background: #22D3EE; color: #0B1220; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .cg-dl__btn::after { content: "\2193"; } .cg-dl__btn[aria-expanded="true"]::after { content: "\2191"; } .cg-dl__btn:hover { background: #67E8F9; } .cg-dl__btn:active { transform: translateY(1px); } .cg-dl__btn:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; } .cg-dl__note { margin: 14px 0 0; font-size: 13px; color: #94A3B8; } /* The gated form itself */ #cg-dl-form { display: none; } #cg-dl-form.is-open { display: block; margin-top: 28px; } #cg-dl-form .wpforms-field-label { color: #E2E8F0; font-size: 13px; font-weight: 600; } #cg-dl-form .wpforms-required-label { color: #22D3EE; } #cg-dl-form input[type="text"], #cg-dl-form input[type="email"] { width: 100%; min-height: 48px; padding: 12px 14px; background: #0F1626; border: 1px solid #1E293B; border-radius: 2px; color: #F1F5F9; font-size: 15px; } #cg-dl-form input::placeholder { color: #64748B; } #cg-dl-form input:focus { border-color: #22D3EE; outline: none; } #cg-dl-form .wpforms-submit { min-height: 48px; padding: 14px 26px; border: 0; border-radius: 2px; background: #22D3EE; color: #0B1220; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } #cg-dl-form .wpforms-submit:hover { background: #67E8F9; } /* Confirmation state (AJAX replaces the form in place) */ #cg-dl-form .wpforms-confirmation-container, #cg-dl-form .wpforms-confirmation-container-full { padding: 22px 24px; background: #0F1626; border: 1px solid #22D3EE; border-radius: 2px; color: #E2E8F0; } #cg-dl-form .wpforms-confirmation-container a { color: #22D3EE; } #cg-dl-form .wpforms-confirmation-container a.cg-dl-link, #cg-dl-form .wpforms-confirmation-container-full a.cg-dl-link { display: inline-block; margin: 8px 0; padding: 13px 24px; background: #22D3EE !important; color: #0B1220 !important; border-radius: 2px; font-size: 15px; font-weight: 600; text-decoration: none !important; } #cg-dl-form .wpforms-confirmation-container a.cg-dl-link:hover, #cg-dl-form .wpforms-confirmation-container-full a.cg-dl-link:hover { background: #67E8F9 !important; } @media (max-width: 767px) { body.parent-pageid-181[class][class][class][class] .cg-dlsec > .e-con-inner { padding: 32px 22px !important; } .cg-dl__btn { width: 100%; justify-content: center; } } /* ------------------------------------------------------------ * [2026-08-25] Download gate form layout - client requested * Name split into First Name + Last Name side by side, optional * Phone beside Email, "Work email" relabelled "Email". * Forms 1276 / 1421 / 1473 share the same field IDs: * 1 First Name, 7 Last Name, 2 Email, 8 Phone, 3 Company. * Hidden fields (4, 5) and the WPForms anti-spam honeypot are * out of flow, so they never occupy a grid cell. * Rollback: delete this block. * ------------------------------------------------------------ */ #cg-dl-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } #cg-dl-form .wpforms-field[data-field-id="3"] { grid-column: 1 / -1; } @media (max-width: 640px) { #cg-dl-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); } #cg-dl-form .wpforms-field[data-field-id="3"] { grid-column: auto; } } /* ------------------------------------------------------------ * [2026-08-14] Case study sections restyled to match /services/ * * "At a glance" keeps the light surface and takes the services * hairline card grid. "The story" takes the .cgv2-support dark * surface treatment. Background and card style only - no eyebrow * labels, no heading size changes, no copy changes. * * Reference values measured live on /services/: * light section #F6F8FB, grid gap 1px on rgba(15,22,38,.14), * cards #F6F8FB, no border, no radius * dark section #0F1626, grid gap 1px on rgba(255,255,255,.02), * cards #0B1220, h3 #FFF, body rgba(230,236,247,.68) * * Hooks added in Elementor: .cg-cs-grid on both card grids, * .cg-cs-dark on the story section. * * Rollback: delete this block and remove those two classes. * ------------------------------------------------------------ */ /* --- Card grid: 20px gaps and bordered cards become one block with 1px hairline dividers, as on /services/ --- */ body.parent-pageid-181[class][class][class][class] .cg-cs-grid { gap: 1px !important; padding: 0 !important; background: rgba(15, 22, 38, .14) !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc { background: #F6F8FB !important; border: 0 !important; border-radius: 0 !important; } /* --- "At a glance" heading was #E6ECF7 on #F6F8FB (1.05:1, effectively invisible). Solid, as on /services/. --- */ body.parent-pageid-181[class][class][class][class] .cgv2-sec.cgv2-faq:not(.cg-cs-dark) > .e-con-inner > .elementor-widget-heading h2 { /* #766 also sets -webkit-text-fill-color, which wins at paint time */ color: #050810 !important; -webkit-text-fill-color: #050810 !important; } /* --- "The story": dark surface, matching .cgv2-support --- */ body.parent-pageid-181[class][class][class][class] .cg-cs-dark { background-color: #0F1626 !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid { background: rgba(255, 255, 255, .02) !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc { background: #0B1220 !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark > .e-con-inner > .elementor-widget-heading h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid h3, body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid h3 a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid p { color: rgba(230, 236, 247, .68) !important; -webkit-text-fill-color: rgba(230, 236, 247, .68) !important; } /* --- The 01/02/03 card counters are ::before pseudo-elements coloured rgba(15,22,38,.28) - invisible on the dark cards. Inverted to the same weight on the dark surface. --- */ body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc::before { color: rgba(230, 236, 247, .22) !important; -webkit-text-fill-color: rgba(230, 236, 247, .22) !important; } /* --- Hover state removed: these cards are not interactive. * Verified: zero inside any of the six, cursor:auto. * #766's .cgv2-svc:hover repaints the card to --cgv2-ink (#050810) * and relies on .cgv2-svc__t / __p / __b child classes to flip the * text light. The case study cards are plain Elementor heading and * text widgets and carry none of those classes, so only the * background changed - text stayed #0F1626 on #050810, about 1.1:1. * That treatment belongs on /services/, where the cards really are * links with an "Explore" affordance. Here it was both unreadable * and a false affordance, so the whole hover is neutralised. --- */ body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover { background-color: #F6F8FB !important; transform: none !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc:hover { background-color: #0B1220 !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover::after { transform: rotate(45deg) !important; } /* --- #766 also repaints the card text on hover (.cgv2-faq .cgv2-svc:hover h3 * -> #FFF, ::before -> cyan, body copy -> light). With the hover * background now pinned, that left white text on a white card. * Every hovered value is pinned back to its resting value, measured * live from a non-hovered card. --- */ /* Light section ("At a glance") */ body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover h3, body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover .elementor-heading-title { color: rgb(15, 22, 38) !important; -webkit-text-fill-color: rgb(15, 22, 38) !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover p, body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover .elementor-widget-text-editor { color: rgba(15, 22, 38, .65) !important; -webkit-text-fill-color: rgba(15, 22, 38, .65) !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-grid > .cgv2-svc:hover::before { color: rgba(15, 22, 38, .28) !important; -webkit-text-fill-color: rgba(15, 22, 38, .28) !important; } /* Dark section ("The story") */ body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc:hover h3, body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc:hover .elementor-heading-title { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc:hover p, body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc:hover .elementor-widget-text-editor { color: rgba(230, 236, 247, .68) !important; -webkit-text-fill-color: rgba(230, 236, 247, .68) !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-dark .cg-cs-grid > .cgv2-svc:hover::before { color: rgba(230, 236, 247, .22) !important; -webkit-text-fill-color: rgba(230, 236, 247, .22) !important; } /* ------------------------------------------------------------ * [2026-08-14] "At a glance" teaser + jump link * * The three metric cards were removed at the owner's request and * replaced by a short description of the PDF plus an anchor link * to the FULL REPORT section (container 8927854, CSS ID * "full-report"). * ------------------------------------------------------------ */ body.parent-pageid-181[class][class][class][class] .cg-cs-intro p { max-width: 82ch; margin: 0 0 28px; font-size: 17px; line-height: 1.75; color: rgba(15, 22, 38, .72); -webkit-text-fill-color: rgba(15, 22, 38, .72); } body.parent-pageid-181[class][class][class][class] .cg-cs-intro__link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 26px; border-radius: 2px; background: #050810; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none !important; transition: background-color .22s, color .22s; } body.parent-pageid-181[class][class][class][class] .cg-cs-intro__link:hover { background: #22D3EE; color: #050810 !important; -webkit-text-fill-color: #050810 !important; } body.parent-pageid-181[class][class][class][class] .cg-cs-intro__link:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; } /* Anchor landing offset so the section heading is not flush to the top */ body.parent-pageid-181[class][class][class][class] #full-report { scroll-margin-top: 48px; } /* Smooth scroll deliberately NOT used: something on this page * (Elementor / Xpro scroll handling) cancels the animation part-way, * leaving the jump link short of its target. The default instant * jump lands exactly on scroll-margin-top and is reliable. */ @media (max-width: 767px) { body.parent-pageid-181[class][class][class][class] .cg-cs-intro p { font-size: 16px; } body.parent-pageid-181[class][class][class][class] .cg-cs-intro__link { width: 100%; justify-content: center; } } /* ------------------------------------------------------------ * [2026-08-14] Toll-free number added site-wide * * 1-888-831-GOAT (4628) -> tel:+18888314628 * Sudbury local 705-479-0207 -> tel:+17054790207 * Order everywhere: Sudbury local first, toll-free second. * * Locations: footer contact block (template 30), header rail * (template 40, #cg-vsb2-tollfree), Contact page chips and aside * (page 195). Get a Quote has no page-level phone block - it * inherits header and footer. * * .cg-tel-tag is the small muted qualifier after each number. * ------------------------------------------------------------ */ .cg-tel-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .55; } /* ========================================================================= Insights article reading column (added 2026-08-19, Insights build) Scope: .cgv2-article only. Applies to /insights/ article pages. Tokens: Phase 2 §5 type scale, §4 colours. Remove this block to revert. ========================================================================= */ .cgv2-article > .e-con-inner { max-width: 860px; margin-left: auto; margin-right: auto; } .cgv2-article .elementor-widget-heading .elementor-heading-title { color: #E6ECF7; font-family: "Space Grotesk", sans-serif; font-weight: 600; } .cgv2-article h2.elementor-heading-title { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -0.5px; margin-top: 24px; margin-bottom: 12px; } .cgv2-article h3.elementor-heading-title { font-size: clamp(22px, 2vw, 26px); line-height: 1.3; margin-top: 16px; margin-bottom: 8px; } .cgv2-article .elementor-widget-text-editor { color: #E6ECF7; font-family: Inter, sans-serif; font-size: 17px; line-height: 1.68; } .cgv2-article .elementor-widget-text-editor p { margin: 0 0 16px; } .cgv2-article .elementor-widget-text-editor ul, .cgv2-article .elementor-widget-text-editor ol { margin: 0 0 16px; padding-left: 0; list-style: none; } .cgv2-article .elementor-widget-text-editor li { position: relative; padding-left: 20px; margin: 0 0 8px; line-height: 1.6; } .cgv2-article .elementor-widget-text-editor ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--cgv2-cyan, #22D3EE); } .cgv2-article .elementor-widget-text-editor ol { counter-reset: cg-article-ol; } .cgv2-article .elementor-widget-text-editor ol li { counter-increment: cg-article-ol; } .cgv2-article .elementor-widget-text-editor ol li::before { content: counter(cg-article-ol) "."; position: absolute; left: 0; top: 0; color: var(--cgv2-cyan, #22D3EE); font-weight: 600; } .cgv2-article .elementor-widget-text-editor a { color: var(--cgv2-cyan, #22D3EE); text-decoration: underline; text-underline-offset: 2px; } .cgv2-article .elementor-widget-text-editor a:hover { color: #67E8F9; } .cgv2-article .cgv2-pullquote .elementor-heading-title { color: #FFFFFF; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; border-left: 2px solid var(--cgv2-cyan, #22D3EE); padding-left: 20px; } .cgv2-article .cgv2-article-meta .elementor-widget-container { color: #94A3B8; font-size: 15px; line-height: 1.6; } .cgv2-article .cgv2-article-meta p { margin: 0 0 4px; } @media (max-width: 767px) { .cgv2-article .elementor-widget-text-editor { font-size: 16px; } .cgv2-article h2.elementor-heading-title { margin-top: 20px; } } /* Insights article — hero measure + meta line (2026-08-19b) */ .cgv2-hero--article .cgv2-shell.cgv2-hero__inner { max-width: 860px; margin-left: auto; margin-right: auto; } .cgv2-article .cgv2-article-meta, .cgv2-article .cgv2-article-meta p { font-size: 15px; line-height: 1.6; color: #94A3B8; } .cgv2-article .cgv2-article-meta p { margin: 0 0 4px; } .cgv2-article .cgv2-article-meta { margin-bottom: 8px; } /* Insights article — contextual CTA band (2026-08-19c) */ .cgv2-cta--article .cgv2-cta__left .elementor-heading-title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.3px; } /* Insights article — comparison tables (2026-08-19d) */ .cgv2-article .elementor-widget-text-editor table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; } .cgv2-article .elementor-widget-text-editor th, .cgv2-article .elementor-widget-text-editor td { border: 1px solid rgba(255,255,255,0.10); padding: 12px 14px; vertical-align: top; text-align: left; } .cgv2-article .elementor-widget-text-editor th { color: #FFFFFF; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.2px; } @media (max-width: 767px) { .cgv2-article .elementor-widget-text-editor table { display: block; overflow-x: auto; font-size: 15px; } } /* Insights listing — clickable article cards (2026-08-19e) */ .cgv2-insights-cards .cg-card { position: relative; } .cgv2-insights-cards .cgv2-card__link a { display: inline-flex; align-items: center; gap: 6px; color: var(--cgv2-cyan, #22D3EE); font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .cgv2-insights-cards .cgv2-card__link a::after { content: ""; position: absolute; inset: 0; } .cgv2-insights-cards .cg-card:hover .cgv2-card__link a { color: #67E8F9; } .cgv2-insights-cards .cgv2-card__link a:focus-visible { outline: 2px solid var(--cgv2-cyan, #22D3EE); outline-offset: 3px; } .cgv2-insights-cards .cgv2-card__link { margin-top: auto; } .cgv2-insights-cards .cgv2-card__link p { margin: 0; } /* Insights listing — card grid geometry + portable title colour (2026-08-19f) */ .cgv2-insights-cards { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; } .cgv2-insights-cards > .cg-card { flex: 1 1 calc(50% - 12px) !important; min-width: 280px !important; } .cgv2-insights-cards .cgv2-cost__t .elementor-heading-title { color: #0F1626 !important; } @media (max-width: 767px) { .cgv2-insights-cards { gap: 16px !important; } .cgv2-insights-cards > .cg-card { flex-basis: 100% !important; } } /* Insights card design options — preview + production candidates (2026-08-19g) Variants: A light card, B dark card, C editorial row. Tokens: Phase 2 §4 colours, §5 type, §9 cards. */ .cgv2-igrid { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 24px !important; align-items: stretch !important; } .cgv2-igrid > .cgv2-icard { flex: 1 1 calc(50% - 12px) !important; min-width: 280px !important; position: relative; display: flex; flex-direction: column; } .cgv2-icard .elementor-widget { width: 100%; } .cgv2-icard .cgv2-icat p { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .cgv2-icard .elementor-heading-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.2px; } .cgv2-icard .cgv2-iex p { margin: 10px 0 0; font-family: Inter, sans-serif; font-size: 16px; line-height: 1.6; } .cgv2-icard .cgv2-iread { margin-top: auto; padding-top: 18px; } .cgv2-icard .cgv2-iread p { margin: 0; } .cgv2-icard .cgv2-iread a { display: inline-flex; align-items: center; gap: 6px; font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .cgv2-icard .cgv2-iread a::after { content: ""; position: absolute; inset: 0; } .cgv2-icard .cgv2-iread a:focus-visible { outline: 2px solid #22D3EE; outline-offset: 4px; } /* A — light card */ .cgv2-icard--a { background: #FFFFFF; border: 1px solid #DCE3EC; border-radius: 8px; padding: 32px 24px; transition: border-color .18s ease, transform .18s ease; } .cgv2-icard--a:hover { border-color: #22D3EE; transform: translateY(-2px); } .cgv2-icard--a .cgv2-icat p { color: #0E7490; } .cgv2-icard--a .elementor-heading-title { color: #0F1626; } .cgv2-icard--a .cgv2-iex p { color: #475569; } .cgv2-icard--a .cgv2-iread a { color: #0E7490; } /* B — dark card */ .cgv2-icard--b { background: #0F1626; border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; padding: 32px 24px; transition: border-color .18s ease, transform .18s ease; } .cgv2-icard--b:hover { border-color: #22D3EE; transform: translateY(-2px); } .cgv2-icard--b .cgv2-icat p { color: #22D3EE; } .cgv2-icard--b .elementor-heading-title { color: #E6ECF7; } .cgv2-icard--b .cgv2-iex p { color: #94A3B8; } .cgv2-icard--b .cgv2-iread a { color: #22D3EE; } /* C — editorial row */ .cgv2-igrid--c { flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important; } .cgv2-igrid--c > .cgv2-icard--c { flex: 1 1 100% !important; } .cgv2-icard--c { border-top: 1px solid rgba(255,255,255,0.10); padding: 28px 0; transition: border-color .18s ease; } .cgv2-icard--c:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); } .cgv2-icard--c .cgv2-icat p { color: #22D3EE; } .cgv2-icard--c .elementor-heading-title { color: #E6ECF7; font-size: 26px; transition: color .18s ease; } .cgv2-icard--c:hover .elementor-heading-title { color: #22D3EE; } .cgv2-icard--c .cgv2-iex p { color: #94A3B8; max-width: 70ch; } .cgv2-icard--c .cgv2-iread a { color: #22D3EE; } @media (max-width: 767px) { .cgv2-igrid { gap: 16px !important; } .cgv2-igrid > .cgv2-icard { flex-basis: 100% !important; } .cgv2-icard--a, .cgv2-icard--b { padding: 24px 20px; } .cgv2-icard--c .elementor-heading-title { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .cgv2-icard--a, .cgv2-icard--b { transition: border-color .18s ease; } .cgv2-icard--a:hover, .cgv2-icard--b:hover { transform: none; } } /* Preview page chrome only (2026-08-19h) — labels on the card-options page */ .cgv2-preview-h .elementor-heading-title { color: #E6ECF7 !important; font-family: "Space Grotesk", sans-serif; font-size: 32px; font-weight: 600; } .cgv2-preview-note p { color: #94A3B8 !important; font-family: Inter, sans-serif; font-size: 15px; line-height: 1.6; margin: 8px 0 28px; max-width: 80ch; } /* Insights category lists — Selected Projects card, one per row (2026-08-19i) */ .cgv2-costlist > * { flex: 1 1 100% !important; } /* Insights category lists — two-column card layout, matching Selected Projects (2026-08-19j) */ .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card { display: grid !important; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important; gap: 24px clamp(28px, 4vw, 64px) !important; align-items: start !important; padding-top: 76px !important; /* clears the ghost number band (20–64px) — do not reduce */ } .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card > .cgv2-cost__t { grid-area: 1 / 1 !important; margin: 0 !important; } .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card > .cgv2-cost__b { grid-area: 1 / 2 / span 2 !important; margin: 0 !important; } .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card > .cg-card-cta { grid-area: 2 / 1 !important; align-self: end !important; } @media (max-width: 767px) { .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card { grid-template-columns: 1fr !important; } .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card > .cgv2-cost__t { grid-area: auto / 1 !important; } .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card > .cgv2-cost__b { grid-area: auto / 1 !important; } .cgv2-costlist[class][class][class][class][class] .cgv2-cost__card > .cg-card-cta { grid-area: auto / 1 !important; } } /* Insights articles — vertical rhythm + CTA heading scale (2026-08-19k) Widget gaps removed; spacing comes from paragraph and heading margins only. */ .cgv2-article > .e-con-inner { gap: 0 !important; } .cgv2-article > .e-con-inner > .elementor-widget { margin-top: 0 !important; margin-bottom: 0 !important; } .cgv2-article .elementor-widget-text-editor p:last-child, .cgv2-article .elementor-widget-text-editor ul:last-child, .cgv2-article .elementor-widget-text-editor ol:last-child { margin-bottom: 16px; } .cgv2-article .cgv2-article-meta { margin-bottom: 12px !important; } .cgv2-article .cgv2-pullquote .elementor-heading-title { margin: 8px 0 20px; } .cgv2-cta--article[class][class][class][class][class] .elementor-widget-heading .elementor-heading-title { font-size: clamp(26px, 3vw, 38px) !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } /* Insight articles — close the gap under the hero and above the CTA (2026-08-19l) Was: hero 56 + section 64 + inner 40 = 160px between the deck and the byline. */ .cgv2-hero--article[class][class][class][class][class][class][class][class][class] { padding-bottom: 24px !important; } .cgv2-article[class][class][class][class][class] { padding-top: 24px !important; padding-bottom: 48px !important; } .cgv2-article[class][class][class][class][class] > .e-con-inner { padding-top: 0 !important; padding-bottom: 24px !important; } @media (max-width: 767px) { .cgv2-hero--article[class][class][class][class][class][class][class][class][class] { padding-bottom: 16px !important; } .cgv2-article[class][class][class][class][class] { padding-top: 20px !important; padding-bottom: 36px !important; } .cgv2-article[class][class][class][class][class] > .e-con-inner { padding-bottom: 16px !important; } } /* Insight articles — back link to the Insights index (2026-08-19m) */ .cgv2-hero--article[class][class][class][class][class][class][class][class][class] .cgv2-hero__inner { display: flex !important; flex-direction: column !important; gap: 14px !important; } .cgv2-backlink a { display: inline-flex; align-items: center; gap: 8px; font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #22D3EE; text-decoration: none; } .cgv2-backlink a:hover { color: #67E8F9; text-decoration: underline; text-underline-offset: 3px; } .cgv2-backlink a:focus-visible { outline: 2px solid #22D3EE; outline-offset: 4px; } .cgv2-backlink p { margin: 0 !important; } .cgv2-backlink { margin-bottom: 2px !important; } /* Footer — link-list rhythm and contact-row alignment (2026-08-21) */ footer [class][class][class][class][class] .elementor-widget-icon-list .elementor-icon-list-item:not(:last-child) { padding-bottom: 6px !important; } footer [class][class][class][class][class] .elementor-widget-icon-list .elementor-icon-list-item:not(:first-child) { padding-top: 6px !important; } footer :is(.e-con, .e-con-inner):has(> .elementor-widget-icon):has(> .elementor-widget-text-editor) { align-items: flex-start !important; } footer :is(.e-con, .e-con-inner):has(> .elementor-widget-icon):has(> .elementor-widget-text-editor) > .elementor-widget-icon { margin: 6px 0 0 !important; width: 16px !important; text-align: center !important; } footer :is(.e-con, .e-con-inner):has(> .elementor-widget-icon):has(> .elementor-widget-text-editor) > .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; } /* Footer contact rows — keep icon and text side by side at small widths (2026-08-21b) */ footer :is(.e-con, .e-con-inner):has(> .elementor-widget-icon):has(> .elementor-widget-text-editor) { flex-wrap: nowrap !important; } footer :is(.e-con, .e-con-inner):has(> .elementor-widget-icon):has(> .elementor-widget-text-editor) > .elementor-widget-text-editor { flex: 1 1 auto !important; min-width: 0 !important; } footer :is(.e-con, .e-con-inner):has(> .elementor-widget-icon):has(> .elementor-widget-text-editor) > .elementor-widget-icon { flex: 0 0 auto !important; } /* Footer — brand block moved below the link columns (2026-08-21c) Targets the logo/tagline/social container by its Elementor element id. Template post 30 is NOT edited (that post type stores no revisions). */ footer .cgf-links[class][class] > .e-con-inner > .cgf-brand { order: 9 !important; flex: 0 0 100% !important; max-width: 100% !important; padding-top: 8px !important; } footer .cgf-links[class][class] > .e-con-inner { justify-content: space-between !important; column-gap: 40px !important; } /* Footer — Industries column width for title-case labels (2026-08-24) */ @media (min-width: 1025px) { [class][class][class][class][class] .cgf-links .cgf-col:nth-child(3) { flex: 0 0 228px !important; } } @media (min-width: 768px) and (max-width: 1024px) { [class][class][class][class][class] .cgf-links .cgf-col:nth-child(3) { flex: 0 0 232px !important; } } /* Service & industry pages — back link to the section index (2026-08-24) */ .cgv2-hero--split .cgv2-hero__inner > .cgv2-backlink { grid-area: 1 / 1 !important; } .cgv2-hero--split .cgv2-hero__inner:has(> .cgv2-backlink) > .cgv2-eyebrow { grid-area: 2 / 1 !important; } .cgv2-hero--split .cgv2-hero__inner:has(> .cgv2-backlink) > .cgv2-h1 { grid-area: 3 / 1 !important; } .cgv2-hero--split .cgv2-hero__inner:has(> .cgv2-backlink) > .cgv2-lede { grid-area: 4 / 1 !important; } /* Numbered cards — ghost number must survive the dark hover state (2026-08-24) */ [class][class][class][class][class] .cgv2-svc:hover .cgv2-num, [class][class][class][class][class] .cgv2-svc:hover .cgv2-num *, [class][class][class][class][class] .cgv2-cost__card:hover .cgv2-num, [class][class][class][class][class] .cgv2-cost__card:hover .cgv2-num * { color: var(--cgv2-cyan) !important; -webkit-text-fill-color: var(--cgv2-cyan) !important; } /* Dark support sections — eyebrow must use the dark-background cyan (2026-08-24) */ /* #0E7490 is the light-background eyebrow colour (5.0:1 on #F6F8FB). On the dark support section it falls to 3.4:1, so the section takes the cyan the hero, process and why sections already use on dark. No single colour clears 4.5:1 on both grounds, so this must stay keyed to the section. */ [class][class][class][class][class] .cgv2-sec.cgv2-support .cgv2-eyebrow, [class][class][class][class][class] .cgv2-sec.cgv2-support .cgv2-eyebrow * { color: var(--cgv2-cyan) !important; -webkit-text-fill-color: var(--cgv2-cyan) !important; } /* Eyebrows — 12px was below comfortable reading size (2026-08-24) */ /* Both eyebrow classes were authored at 12px in per-widget Elementor settings on every page. 14px matches the back-link that now sits above them in the same heroes. Tracking stays at its authored value, so the ratio tightens from .20em to .17em, which reads better at the larger size. Line height is 1.4em and scales on its own — do not pin it in px here. */ [class][class][class][class][class] .cgv2-eyebrow, [class][class][class][class][class] .cgv2-eyebrow *, [class][class][class][class][class] .cg-eyebrow, [class][class][class][class][class] .cg-eyebrow * { font-size: 14px !important; } /* Mobile — tap-to-call restored (2026-08-24) */ /* The rail (#cg-vsb2) is switched off below 961px by the header template, which also drops its two tel: buttons — the one thing on it that matters more on a phone than on a desktop. This re-surfaces just that bottom cluster as a compact stack above the existing menu button, reusing the rail's own markup and icons. Quote is omitted: Get a Quote is already in the slide-out panel. */ @media (max-width: 960px) { html body #cg-vsb2 { display: flex !important; top: auto !important; bottom: 84px !important; right: 27px !important; left: auto !important; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none; } html body #cg-vsb2 > *:not(#cg-vsb2-bot) { display: none !important; } html body #cg-vsb2 #cg-vsb2-bot { pointer-events: auto; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 0 !important; } html body #cg-vsb2 #cg-vsb2-quote { display: none !important; } html body #cg-vsb2 .cg-vsb2-btn { background: #0F1626 !important; border-color: rgba(34, 211, 238, .38) !important; color: #22D3EE !important; } /* out of the way while the slide-out menu is open */ html body:has(#cg-sb2-panel.on) #cg-vsb2 { display: none !important; } } /* Case study CTA — body copy must not inherit the display heading’s 20ch measure (2026-08-24) */ /* The CTA rule for these pages sets max-width:20ch on every heading widget in the band. On the case study pages the body copy is ALSO a heading widget, so it was inheriting a 20-character measure — 211-251px, four to five lines, against a ~490px heading. 47ch tracks the heading closely (within ~2px at 1440) and keeps the block to two lines. 181 and 186 are excluded: a later max-width:900px rule already wins there and they render correctly. */ body:is(.page-id-183, .page-id-1418, .page-id-1476) .cgv2-cta .elementor-widget-heading p.elementor-heading-title { max-width: 47ch !important; }