@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-300-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:300;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-300-italic.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-400-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-400-italic.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-500-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:500;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-500-italic.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-600-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:600;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-600-italic.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-700-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:700;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-700-italic.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-800-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:800;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/plus-jakarta-sans/PlusJakartaSans-800-italic.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:normal;font-weight:300;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-300-normal.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:italic;font-weight:300;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-300-italic.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:normal;font-weight:400;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-400-normal.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:italic;font-weight:400;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-400-italic.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:normal;font-weight:500;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-500-normal.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:italic;font-weight:500;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-500-italic.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:normal;font-weight:700;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-700-normal.woff2') format('woff2')}@font-face{font-family:'Amulya';font-style:italic;font-weight:700;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/amulya/Amulya-700-italic.woff2') format('woff2')}@font-face{font-family:'Buydog';font-style:normal;font-weight:400;font-display:swap;src:url('https://cgifurniture.com/wp/wp-content/mu-plugins/cgi-assets/fonts/buydog/Buydog-400-normal.otf') format('opentype')} :root{ --cgi-font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --cgi-font-display:'Amulya','Plus Jakarta Sans',sans-serif; --cgi-accent:#0ea5e9; /* sky-500 = NuxtUI primary-500 */ --cgi-accent-600:#0284c7; /* sky-600 */ --cgi-pink:#db2777; /* pink-600 (stats) */ --cgi-container:1536px; /* UContainer constrained = max-w-screen-2xl */ } /* ============ CONTAINER WIDTH (reference UContainer max-w-screen-2xl) ============ */ /* WP marks the group inner-container is-layout-constrained, but Kadence resets the children's max-width to none so full-bleed sections sprawl edge-to-edge (~1860px on 1920). Cap the content of every full-bleed section to 1536px, centred — but leave intentionally full-bleed children (cover heroes, alignfull/alignwide media) alone. */ .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > :not(.alignfull):not(.alignwide):not(.cgi-logo-wall):not(.cgi-brands-wall):not(.cgi-svc-wrap):not(.cgi-faq-desc):not(.cgi-sec-desc):not(.cgi-faq-sub), .entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container > :not(.alignfull):not(.alignwide):not(.cgi-logo-wall):not(.cgi-brands-wall):not(.cgi-svc-wrap):not(.cgi-faq-desc):not(.cgi-sec-desc):not(.cgi-faq-sub){ max-width:var(--cgi-container)!important;margin-left:auto!important;margin-right:auto!important} /* FAQ intro description = reference max-w-3xl, left-aligned (excluded from the cap above) */ .entry-content .cgi-faq-desc{max-width:48rem!important;margin-left:0!important;margin-right:auto!important} /* terms-faq hero subtitle = centered max-w-3xl (excluded from the cap above) */ .entry-content .cgi-faq-sub{max-width:48rem!important;margin-left:auto!important;margin-right:auto!important} /* Section-heading description (reference Heading.vue

): max-w-3xl text-lg xl:text-xl leading-relaxed, left-aligned — was rendering full container width (1376) at 17px. */ .entry-content .cgi-sec-desc{max-width:48rem!important;margin-left:0!important;margin-right:auto!important;margin-top:2rem!important; font-size:1.125rem!important;line-height:1.625!important} @media(min-width:1280px){.entry-content .cgi-sec-desc{font-size:1.25rem!important;margin-top:4rem!important}} /* centered sections (brands "Trusted by Leading Brands", stats) — reference uses mx-auto on the description, so the max-w-3xl block is centered (was left-pushed via margin-left:0 above). */ .entry-content .cgi-sec-desc-c,.entry-content p.has-text-align-center.cgi-sec-desc{margin-left:auto!important;margin-right:auto!important;text-align:center!important} /* /3d-modeling-terms-faq/ hero rhythm now lives in cgi-about.php (prod-redesign metrics) */ html.cgi-dark .page-id-10087 .entry-content h1.has-text-align-center + p{color:#d4d4d4} /* HOME hero h1 = reference 72px (4.5rem); was clamping up to 80px (5rem) */ .home .entry-content h1.wp-block-heading{font-size:clamp(2.5rem,1.5rem + 4vw,4.5rem)!important} .home .entry-content h1.wp-block-heading + p{margin-top:1.5rem!important}/* hero h1→sub gap (reference mt-6) */ /* Home FAQ section needs the reference UContainer edge padding (px-4 sm:px-6 lg:px-8) — the alignfull inner-container has none, so content sat flush at viewport edge (left:0). */ .entry-content .wp-block-group__inner-container:has(> .cgi-faq){max-width:var(--cgi-container,1536px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:1rem!important;padding-right:1rem!important} @media(min-width:640px){.entry-content .wp-block-group__inner-container:has(> .cgi-faq){padding-left:1.5rem!important;padding-right:1.5rem!important}} @media(min-width:1024px){.entry-content .wp-block-group__inner-container:has(> .cgi-faq){padding-left:2rem!important;padding-right:2rem!important}} /* HOME: every full-bleed section's inner-container = the reference UContainer (max-w-screen-2xl 1536 + px-4 sm:px-6 lg:px-8). Without the padding, capped content sat at gutter 192 on wide screens (1536 centred) instead of 224, and touched the edge (0) below 1536 instead of 16/24/32 — i.e. no horizontal gutter. Capping+padding the inner-container (not the child) makes the content box 1472 starting at 224, matching the reference exactly. Full-bleed children (cover hero bg, .cgi-svc-wrap slider, .cgi-fullbleed guide CTA) keep their 100vw via calc(50% - 50vw) margins — the static offset cancels, so they still reach the true viewport edge. Scoped to .home so the other (separately verified) pages are unchanged. */ .home .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container, .home .entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container{ max-width:var(--cgi-container,1536px)!important;margin-left:auto!important;margin-right:auto!important; padding-left:1rem!important;padding-right:1rem!important} @media(min-width:640px){.home .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container,.home .entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container{padding-left:1.5rem!important;padding-right:1.5rem!important}} @media(min-width:1024px){.home .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container,.home .entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container{padding-left:2rem!important;padding-right:2rem!important}} /* …and zero any horizontal padding the GROUP itself carries (Kadence gives some alignfull groups, e.g. the rounded brands section, a ~30px side padding) so it doesn't STACK with the inner-container padding above (the brands eyebrow was at 62 instead of 32). Left/right only — vertical section rhythm is preserved. */ .home .entry-content > .wp-block-group.alignfull{padding-left:0!important;padding-right:0!important} /* brand wall keeps its own max-w-6xl (≈1152px) so 21 logos sit in clean 3×7 rows */ .entry-content .cgi-logo-wall{max-width:72rem!important;margin-left:auto!important;margin-right:auto!important;align-items:center;gap:2rem 1.5rem!important} /* ============ HEADER CTA (reference: sky pill, WHITE text — matches prod) ============ */ #main-header .menu-item.cgi-nav-cta > a, body.cgi-hero-dark .item-at-start #main-header .menu-item.cgi-nav-cta > a{ background:#0ea5e9!important;color:#fff!important} #main-header .menu-item.cgi-nav-cta > a:hover{background:#0284c7!important}/* prod hover = primary-600 (was sky-400) */ /* CTA text stays white on hover (Kadence nav-hover would turn it blue) */ #main-header .menu-item.cgi-nav-cta > a:hover, body.cgi-hero-dark .item-at-start #main-header .menu-item.cgi-nav-cta > a:hover{color:#fff!important} /* dark: prod flips to sky-400 with DARK text, hover sky-500 (text stays dark) */ html.cgi-dark #main-header .menu-item.cgi-nav-cta > a{background:#38bdf8!important;color:#171717!important} html.cgi-dark #main-header .menu-item.cgi-nav-cta > a:hover{background:#0ea5e9!important;color:#171717!important} /* theme toggle icon size (was being squished to 6px) */ #main-header .cgi-theme-toggle svg,.cgi-theme-toggle svg{width:22px!important;height:22px!important;flex:0 0 auto} /* widen header container to match content width (was 1290 → too-wide side gutters) */ #main-header .site-container,#masthead .site-container{max-width:1536px!important} /* eyebrow → heading gap (reference Heading flex gap-3 ≈ .75rem, WP block-gap too large) */ .entry-content p[style*="text-transform:uppercase"][style*="letter-spacing"]{margin-bottom:0!important} .entry-content p[style*="text-transform:uppercase"][style*="letter-spacing"] + h2.wp-block-heading{margin-top:.5rem!important} /* full-bleed last section (guide CTA) should sit flush against the footer — kill content bottom padding */ /* Home body = white (reference). Kadence boxes the content white on a gray (#F7FAFC) body, so transparent full-bleed sections (FAQ) showed gray edges around a white centre. Dark mode keeps its dark body (html.cgi-dark body rule is more specific). */ body.home{background:#fff} .home .content-area,.home .entry-content-wrap,.home .site-main,.home .content-container{padding-bottom:0!important;margin-bottom:0!important} .home .entry-content{margin-bottom:0!important} .home .entry-content > :last-child{margin-bottom:0!important} /* …and on EVERY page that shows the Guide CTA (singles, archives) — match Home/About. Covers the CTA nested inside the content wrapper AND emitted as a sibling after it (CPT singles), killing Kadence's .content-area 5rem bottom margin. */ .content-area:has(.cgi-tpl-guide),.content-area:has(+ .cgi-tpl-guide),.content-area:has(+ .cgi-tp-section), .entry-content-wrap:has(.cgi-tpl-guide),.site-main:has(.cgi-tpl-guide){padding-bottom:0!important;margin-bottom:0!important} .entry-content:has(.cgi-tpl-guide) > :last-child{margin-bottom:0!important} /* ============ TYPOGRAPHY (reference: Plus Jakarta body, Amulya display) ============ */ body,button,input,select,textarea,.entry-content,.wp-block-group{font-family:var(--cgi-font-body)} h1,h2,h3,h4,h5,h6,.wp-block-heading,.entry-title,.site-title,.cgi-h,.cgi-mega-title{ font-family:var(--cgi-font-display)!important;letter-spacing:-.015em} /* prod guide-chapter prose headings use the BODY font (Plus Jakarta), not Amulya */ .single-guide_chapter .cgi-single-content :is(h2,h3,h4).wp-block-heading{font-family:var(--cgi-font-body)!important} /* prod blog/case archive card titles are h2 in the BODY font */ h2.cgi-bl-feat-h,h2.cgi-bl-card-h{font-family:var(--cgi-font-body)!important;letter-spacing:normal!important} .font-handwritten{font-family:'Buydog',cursive} /* ============ ACCENT = SKY (reference primary) ============ */ /* highlighted words (==mark==) render sky on transparent bg, like layouts/default.vue */ mark{background-color:transparent!important;color:var(--cgi-accent)!important} html.cgi-dark mark{color:#38bdf8!important}/* prod: accent text = sky-400 in dark mode */ /* recolor every inline brand-blue left in converted post content (#2563eb) to sky. :not(background-color) so it doesn't match elements whose *bg* is #2563eb (e.g. buttons). */ [style*="color:#2563eb"]:not([style*="background-color:#2563eb"]){color:var(--cgi-accent)!important} [style*="background-color:#2563eb"],[style*="background:#2563eb"]{background-color:var(--cgi-accent)!important} /* solid sky buttons (Schedule a demo / CTAs) → WHITE text (matches prod) */ .wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="background-color:#2563eb"], .wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="background-color:#0ea5e9"]{color:#fff!important} .entry-content .cgi-roomset-cta,.cgi-roomset-cta{color:#111827!important} /* content links — prod uses dark text for prose + listing/card/pill/pagination/tag links (NOT sky); only the FAQ CTA links stay sky (excluded below). */ .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.cgi-nav-cta):not([class*="-btn"]):not(.cgi-bl-faq-link):not(.cgi-faq-link){color:#0f172a} html.cgi-dark .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.cgi-nav-cta):not([class*="-btn"]):not(.cgi-bl-faq-link):not(.cgi-faq-link){color:#e2e8f0} /* legal pages: the light type scale pins h1 #0a0a0a which vanished on the dark body */ html.cgi-dark :is(.page-id-49,.page-id-50) .entry-content h1{color:#fafafa!important} /* pages WITHOUT the transparent-header meta (404, stray pages) keep Kadence's white header bar in dark */ html.cgi-dark body.non-transparent-header #masthead.site-header{background:#0a0a0a} /* lightbox media tags stay muted grey (prod ModalPortfolioItem), not the dark content default */ .cgi-lb-tags a{color:#737373!important} .cgi-lb-tags a:hover{color:#404040!important} /* primary buttons → sky pill, gentle hover */ .wp-block-button__link{transition:filter .15s ease,background-color .15s ease} .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{filter:brightness(.93)} /* ============ SECTION HEADINGS (Heading.vue size lg) ============ */ .entry-content h2.wp-block-heading[style*="font-size:2.25rem"], .entry-content h2.wp-block-heading[style*="font-size:2rem"]{ font-size:clamp(1.875rem,1.1rem + 2.6vw,3rem)!important; font-weight:700!important;line-height:1.1!important;letter-spacing:-.025em!important} /* eyebrow (Heading.vue subheading sm): text-sm uppercase tracking-widest, inherits colour */ .entry-content p[style*="text-transform:uppercase"][style*="letter-spacing"]{ color:inherit!important;opacity:.65;font-weight:600;letter-spacing:.1em!important; font-size:.8125rem!important;margin-bottom:.25rem} /* ============ STATS (SectionStats.vue: text-5xl sm:text-8xl font-display pink-600) ============ */ /* stat numbers = a colour-styled heading at 3rem (static pages) / 2.5rem (converter); section-label headings (font-size:1.5rem) stay sky via the generic accent rule. */ .entry-content :is(h1,h2,h3).wp-block-heading[style*="color:#2563eb"][style*="font-size:3rem"], .entry-content :is(h1,h2,h3).wp-block-heading[style*="color:#2563eb"][style*="font-size:2.5rem"]{ color:var(--cgi-pink)!important;font-family:var(--cgi-font-display)!important; font-size:clamp(2.75rem,2rem + 4vw,6rem)!important;font-weight:700!important;line-height:1!important} /* ============ SECTION RHYTHM (py-12 sm:py-32) ============ */ .entry-content .wp-block-group.alignfull[style*="padding-top:4rem"]{ padding-top:clamp(3rem,4vw + 1rem,8rem)!important; padding-bottom:clamp(3rem,4vw + 1rem,8rem)!important} /* ============ FEATURE / SERVICE CARDS (bg-gray-200 rounded-xl shadow-md) ============ */ .entry-content .wp-block-column.has-cinder-background-color{ background-color:#e5e7eb!important;border-radius:.75rem!important;padding:1.5rem!important; box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.06)!important} .entry-content .wp-block-column.has-cinder-background-color, .entry-content .wp-block-column.has-cinder-background-color *{color:#0a0a0a!important} .entry-content .wp-block-column.has-cinder-background-color h3{font-weight:700!important;margin-bottom:1rem!important} .entry-content .wp-block-column.has-cinder-background-color p{color:#374151!important} /* ============ HERO COVER (SectionHero.vue scale) ============ */ .entry-content .wp-block-cover h1{ font-family:var(--cgi-font-display)!important;font-weight:800!important; font-size:clamp(2.5rem,1.5rem + 5vw,5rem)!important;line-height:1.05!important;color:#fff!important} .entry-content .wp-block-cover h1 + p,.entry-content .wp-block-cover p[style*="1.25rem"]{ font-weight:300!important;font-size:clamp(1.05rem,1rem + .6vw,1.5rem)!important} /* ============ GUIDE CTA FORM (reference: white inputs floating on the image) ============ */ .cgi-guide-form .ff-el-group label,.cgi-guide-form .ff-el-input--label label,.cgi-guide-form label{color:#fff!important;font-weight:500} /* reference rendering-guide form: white field labels (the cgi-zapform ) + red required asterisk */ .cgi-guide-form .cgi-zapform-field>span{color:#fff!important} .cgi-req{color:#f87171;font-style:normal} .cgi-guide-form input,.cgi-guide-form .ff-el-form-control,.cgi-guide-form select,.cgi-guide-form textarea{ background:#fff!important;border:0!important;border-radius:.5rem!important;color:#111827!important; box-shadow:0 2px 6px rgba(0,0,0,.25)!important;padding:.75rem .9rem!important} /* Fluent Form submit buttons = sky (reference primary), WHITE text. Guide form (below) is more specific → stays violet. */ .ff-btn-submit,.fluentform .ff-btn-submit,.fluentform button[type="submit"]{ background:#0ea5e9!important;color:#fff!important;border:0!important;border-radius:.6rem!important;font-weight:700!important} .ff-btn-submit:hover,.fluentform .ff-btn-submit:hover,.fluentform button[type="submit"]:hover{background:#0284c7!important;color:#fff!important} .cgi-guide-form .ff-btn-submit,.cgi-guide-form button[type="submit"]{ background:#5b21b6!important;color:#fff!important;border:0!important;border-radius:.6rem!important; width:100%!important;font-weight:700!important;padding:.9rem 1rem!important;font-size:1rem!important} .cgi-guide-form .ff-btn-submit:hover{background:#6d28d9!important} .cgi-guide-form .ff-message-success{color:#fff!important} .cgi-guide-lines p{margin-top:.1rem!important;margin-bottom:.1rem!important;line-height:1.5} /* ============ CGI Zapier forms (donor FormPriceList / Get In Touch) ============ */ .cgi-zapform-fields{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1rem} .cgi-zapform-field{display:block} /* matched 1:1 to the donor NuxtUI UForm (measured @1440): UInput = 6px radius, 10/14 pad, 1px neutral-300 ring (not a drop shadow), neutral-900 text; label = 14px/500 neutral-600; UButton = 12px radius, 12/16 pad, weight 600. */ .cgi-zapform-field>span{display:block;font-size:.875rem;font-weight:500;color:#404040;margin-bottom:.3rem} .cgi-zapform-field input,.cgi-zapform-field textarea{width:100%;background:#fff;border:0;border-radius:6px;color:#171717; box-shadow:0 0 0 1px #d4d4d4;padding:10px 14px;font-size:1rem;font-family:inherit;line-height:1.5} .cgi-zapform-field textarea{resize:vertical;min-height:5rem} .cgi-zapform .cgi-zapform-field input:focus,.cgi-zapform .cgi-zapform-field select:focus,.cgi-zapform .cgi-zapform-field textarea:focus{outline:none!important;box-shadow:0 0 0 2px #0ea5e9!important}/* prod sky focus ring — ancestor-prefixed (0,3,1) + !important to beat theme/landing input:focus overrides */ /* dark mode: zapform fields on normal (theme-dark) surfaces — partnership, get-in-touch, landing. Prod dark field = transparent bg + #404040 border + white text + light label (mirrors .cgi-demo-field). */ html.cgi-dark .cgi-zapform-field input,html.cgi-dark .cgi-zapform-field textarea{background:transparent;color:#fff;box-shadow:0 0 0 1px #404040} html.cgi-dark .cgi-zapform-field>span{color:#e5e5e5} /* keep fields LIGHT on the permanently-coloured CTA cards (guide CTA violet, blog/case CTA dark-blue) — they aren't theme-dark surfaces */ html.cgi-dark :is(.cgi-tpl-guide,.cgi-cta-card-form,.cgi-cta-formwrap) .cgi-zapform-field input,html.cgi-dark :is(.cgi-tpl-guide,.cgi-cta-card-form,.cgi-cta-formwrap) .cgi-zapform-field textarea{background:#fff;color:#171717;box-shadow:0 0 0 1px #d4d4d4} html.cgi-dark :is(.cgi-tpl-guide,.cgi-cta-card-form,.cgi-cta-formwrap) .cgi-zapform-field>span{color:#fff} /* phone country-selector box in dark mode (partnership uses page-gated CSS, so assert here globally) */ html.cgi-dark .cgi-pn-phonerow{background:transparent;border-color:#404040} html.cgi-dark .cgi-pn-ccwrap,html.cgi-dark .cgi-pn-dial,html.cgi-dark .cgi-pn-phonerow input[name=phone]{color:#fff} .cgi-zapform-btn{background:#0ea5e9;color:#fff;border:0;border-radius:12px;font-weight:600; padding:12px 16px;font-size:1rem;cursor:pointer;width:100%;transition:background .15s} .cgi-zapform-btn:hover{background:#0284c7} .cgi-zapform-btn:disabled{opacity:.6;cursor:default} .cgi-zapform-msg{font-size:.85rem;margin:.25rem 0 0;min-height:1em;color:inherit} .cgi-zapform-msg:empty{display:none;margin:0;min-height:0} html.cgi-dark .entry-content li::marker,html.cgi-dark .cgi-single-content li::marker{color:#d4d4d4}/* bullets follow the neutral text color in dark (stray tw blue-grays looked off) *//* prod has no spacer between fields and button (btn mt-4 = 16px total) */ .cgi-zapform-msg.err{color:#ef4444}/* prod error red-500, was red-300 */ /* donor UForm per-field errors: message under each invalid field + red-500 ring on the input (prod shows ALL field errors at once; the ring stays red while invalid, incl. on focus) */ .cgi-zapform .cgi-zapform-field .cgi-zf-ferr,html.cgi-dark .cgi-zapform .cgi-zapform-field .cgi-zf-ferr{color:#ef4444!important;font-size:.8125rem;line-height:1.3;margin:.35rem 0 0}/* stays red in dark too (generic dark p-recolors were washing it) */ .cgi-zapform .cgi-zapform-field input.cgi-zf-invalid,.cgi-zapform .cgi-zapform-field textarea.cgi-zf-invalid, .cgi-zapform .cgi-zapform-field input.cgi-zf-invalid:focus,.cgi-zapform .cgi-zapform-field textarea.cgi-zf-invalid:focus{box-shadow:0 0 0 1px #ef4444!important}/* prod ring-1 */ /* guide CTA (violet card, stays violet in dark): heading + intro lines pinned WHITE in dark — the generic dark text recolors dimmed them to slate-300 (user report) */ html.cgi-dark .cgi-tpl-guide .cgi-tpl-guide-h,html.cgi-dark .cgi-tpl-guide .cgi-tpl-guide-lines p{color:#fff!important} .cgi-zapform-done{font-size:1rem;line-height:1.6} /* On the dark price-list CTA card the labels/copy are light */ .cgi-cta-card-form .cgi-zapform-field>span,.cgi-cta-card-form .cgi-zapform-done{color:#e5e7eb} /* ============ FAQ (core/details — reference accordion w/ chevron-right) ============ */ .entry-content .wp-block-details{border-bottom:1px solid #e5e7eb;padding:0;margin:0} /* prod post/case FAQ: the heading before the details list is a small uppercase label (blocks.faq h2 text-sm) */ .cgi-single-content h2.wp-block-heading:has(+ .wp-block-details){font-size:.875rem!important;text-transform:uppercase;letter-spacing:.1em;font-weight:400!important;margin:4rem 0 2rem!important} /* prod BlockImage rhythm: my-8 sm:my-12 */ @media(min-width:640px){.cgi-single-content figure.wp-block-image,.cgi-single-content .cgi-cmp,.cgi-single-content .cgi-cs-gallery{margin-top:3rem;margin-bottom:3rem}} /* reference SectionFaq: question 16px/700/lh24, chevron top-aligned with the first line (not centered), answer 16px/lh28, smooth height collapse */ .entry-content .wp-block-details summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;font-weight:700;font-size:1rem;line-height:1.5;cursor:pointer;font-family:var(--cgi-font-body);list-style:none;padding:1.25rem 0} .single-guide_chapter .entry-content .wp-block-details summary{font-weight:500}/* prod guide FAQ rows are medium */ .entry-content .wp-block-details summary::-webkit-details-marker{display:none} /* FAQ questions are H3 (prod accordion semantics) inside summary; typography = the summary row, not article h3 */ .entry-content .wp-block-details summary h3.cgi-faq-sq{display:inline!important;font-size:inherit!important;font-weight:inherit!important;font-family:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;color:inherit!important;margin:0!important;padding:0!important} .entry-content .wp-block-details summary::after{display:none} /* chevron: Chrome does NOT paint summary::after here — draw it as a background-image on the summary (same technique as .cgi-tpl-faq-item). Solid heroicons chevron-right, swaps to down on [open]. */ .entry-content .wp-block-details summary{padding-right:2rem;background-repeat:no-repeat;background-position:right center;background-size:1.4rem 1.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%230a0a0a' fill-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E")} .entry-content .wp-block-details[open] summary{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%230a0a0a' fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E")} html.cgi-dark .entry-content .wp-block-details summary{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E")} html.cgi-dark .entry-content .wp-block-details[open] summary{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E")} .entry-content .wp-block-details > :not(summary){padding-right:3rem;padding-bottom:1rem;margin-top:.25rem;font-size:1rem;line-height:1.75} .entry-content .wp-block-details > :not(summary) p,.entry-content .wp-block-details > :not(summary) li{font-size:1rem;line-height:1.75} /* smooth collapse (Chrome 129+; snaps gracefully elsewhere) */ .entry-content .wp-block-details{interpolate-size:allow-keywords} .entry-content .wp-block-details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete;content-visibility:hidden} .entry-content .wp-block-details[open]::details-content{block-size:auto;content-visibility:visible} /* reference SectionFaq uses divide-y: dividers BETWEEN items only — no decorative line above the first item or below the last. (Per column, since the FAQ is 2-col.) */ .entry-content .cgi-faq .wp-block-details:last-child{border-bottom:0} .entry-content a.cgi-faq-link{color:var(--cgi-accent-600);font-weight:600;text-decoration:none} .entry-content a.cgi-faq-link:hover{text-decoration:underline} /* Home FAQ → canonical SectionFaq spacing/heading, identical to the blog/services .cgi-bl-faq sections (and prod): 3rem mobile / 8rem ≥640px padding, heading clamped to 48px. */ .home .entry-content .wp-block-group.alignfull:has(.cgi-faq){padding-top:3rem!important;padding-bottom:3rem!important} @media(min-width:640px){.home .entry-content .wp-block-group.alignfull:has(.cgi-faq){padding-top:8rem!important;padding-bottom:8rem!important}} .home .entry-content .wp-block-group.alignfull:has(.cgi-faq) h2.wp-block-heading{font-size:clamp(1.875rem,1rem + 2.5vw,3rem)!important;line-height:1.1!important} /* ============ DARK THEME REFINEMENTS ============ */ html.cgi-dark .entry-content .wp-block-column.has-cinder-background-color{background-color:#262626!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.4)!important} html.cgi-dark .entry-content .wp-block-column.has-cinder-background-color, html.cgi-dark .entry-content .wp-block-column.has-cinder-background-color *{color:#e5e7eb!important} html.cgi-dark .entry-content .wp-block-column.has-cinder-background-color p{color:#9ca3af!important} html.cgi-dark .entry-content .wp-block-details{border-bottom-color:#262626} /* full-width "white" sections = body bg in dark (reference: non-contrast sections sit on the dark body, so cards/sliders stand out). Card-level white groups keep the lighter surface. */ html.cgi-dark .entry-content > .wp-block-group.alignfull.has-white-background-color, html.cgi-dark .entry-content .wp-block-group.alignfull.cgi-rounded-hero.has-white-background-color{background-color:#0a0a0a!important} /* striped tables: core gives odd rows a light bg → darken for dark theme (e.g. price-list contents) */ html.cgi-dark .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background-color:#262626!important} html.cgi-dark .wp-block-table.is-style-stripes td,html.cgi-dark .wp-block-table.is-style-stripes th{color:#e5e7eb!important} /* Tailwind-utility shim: two migrated rich-text sections (the industry page + one case study) shipped raw Tailwind-classed HTML that was decoded to wp:html blocks. Emulate the handful of utilities they use so they match the reference. These class names appear ONLY in those decoded blocks (the rest of the site is pure WP blocks). */ .entry-content .uppercase{text-transform:uppercase} .entry-content .tracking-widest{letter-spacing:.12em} .entry-content .italic{font-style:italic} .entry-content .font-bold{font-weight:700} .entry-content .font-semibold{font-weight:600} .entry-content .font-black{font-weight:800} .entry-content .font-display{font-family:var(--cgi-font-display,inherit)} .entry-content .text-sm{font-size:.875rem} .entry-content .text-lg{font-size:1.125rem;line-height:1.7} .entry-content .text-2xl{font-size:1.5rem;line-height:1.3} .entry-content .text-5xl{font-size:clamp(2rem,1.3rem + 2.6vw,3rem);line-height:1.1} .entry-content .max-w-prose{max-width:65ch} .entry-content .mt-0{margin-top:0} .entry-content .mb-2{margin-bottom:.5rem} .entry-content .py-4{padding-top:1rem;padding-bottom:1rem} .entry-content .text-sm.uppercase.tracking-widest{color:#6b7280;margin-bottom:.5rem} html.cgi-dark .entry-content .text-sm.uppercase.tracking-widest{color:#a3a3a3} /* ---- global full-bleed + Guide CTA (reference SectionRenderingGuide), used on every page ---- */ .cgi-fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .cgi-tpl-guide{position:relative;margin-top:0;background:#4c1d95;overflow:hidden} .cgi-tpl-guide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:77% 60%;z-index:0} @media(min-width:768px) and (max-width:1023px){.cgi-tpl-guide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(89,46,29,.8) 0%,rgba(139,94,66,.66) 50%,rgba(139,94,66,0) 75%);pointer-events:none}} .cgi-tpl-guide-inner{position:relative;z-index:2;max-width:1536px;margin:0 auto;width:100%;padding:3rem 2rem 5rem;display:grid;gap:3rem} @media(min-width:768px){.cgi-tpl-guide-inner{padding:6rem 2rem 9rem}} @media(min-width:1024px){.cgi-tpl-guide-inner{grid-template-columns:28rem 28rem 1fr;gap:6rem;padding:6rem 2rem 24rem}}/* prod lg:pb-96 → секція 784 на 1024-1535 */ @media(min-width:1536px){.cgi-tpl-guide-inner{padding-bottom:16rem}}/* prod 2xl:pb-64 → секція ~656 */ .cgi-tpl-guide-text{max-width:28rem;color:#fff} .cgi-tpl-guide-h{color:#fff;font-family:var(--cgi-font-display,sans-serif);font-size:clamp(1.5rem,1rem + 2vw,2.25rem);font-weight:600;margin:0;line-height:1.2} .cgi-tpl-guide-lines{margin-top:1.5rem} .cgi-tpl-guide-lines p{color:#fff;margin:.35rem 0;line-height:1.5} /* прод-типографіка @desktop: title lh40 (text-4xl), lines 16/24 без міжабзацних маржинів */ @media(min-width:1024px){.cgi-tpl-guide-h{line-height:2.5rem}.cgi-tpl-guide-lines p{font-size:1rem;line-height:1.5rem;margin:0}} .cgi-tpl-guide-form{max-width:28rem;width:100%} @media(max-width:767px){ .cgi-tpl-guide{overflow:visible;padding-top:0;display:flow-root;margin-top:3rem} /* reference SectionRenderingGuide mobile image: rounded-xl -mt-12 inline-block shadow-2xl (pulled up, slightly inset, not full-bleed) */ .cgi-tpl-guide-bg{position:relative;display:block;height:auto;width:auto;max-width:calc(100% - 4rem);margin:-3rem auto 1.5rem;border-radius:.75rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)} /* text + form columns centred on phones (reference mx-auto md:mx-0) */ .cgi-tpl-guide-text,.cgi-tpl-guide-form{margin-left:auto;margin-right:auto} }