/** * PER-PAGE CSS for the SERVICE INNER page family — and for nothing * else. Loaded ONLY on the templates listed in $tbi_ai_service_inner_templates * in functions.php (everything in service-inner-pages/). * * Do not put hire-page or service-LANDING CSS in this file. The three * families each have exactly one file and are never mixed: * * css/hire-common.css -> hire pages (body.hire-figma-page) * css/service-inner-common.css -> service inner pages (body.service-inner-page) * css/service-landing-common.css -> service landing (body.service-landing-page) * * Cross-family component CSS is NOT repeated here — it lives in * css/figma-pages-base.css: every hrf-* section under body.tbi-figma-page, * and the svcl-* service components (hero review card, catalog grid, * platform grid, insights) under body.tbi-service-page. This file holds * only what genuinely differs per inner page, which in practice is * background-image url()s for the hrf-hero / hrf-testi / hrf-cta2 / * hrf-faq sections plus the occasional svcl-* catalog background. * * Each block stays scoped under its own body.page-template-* class, which * body_class() derives from the sanitized template filename regardless of * subfolder — so service-inner-pages/page-services-foo.php is * body.page-template-page-services-foo, with no folder segment. * * Adding a new inner page: add its template filename to * $tbi_ai_service_inner_templates (used by both the enqueue block and the * body-class filter), then add ONE new scoped block at the end of this * file. Do NOT create a new page-specific stylesheet, and do NOT add the * rule to figma-pages-base.css unless it is identical across families. * * A rule identical for EVERY inner page but for no other family belongs * in this file scoped to body.service-inner-page, not repeated per page. * * History: split out of the mixed css/hire-common.css and the former * css/services-common.css on 2026-09-16. Where a page had a block in both * of those files, both blocks are kept verbatim and placed adjacently * under that page below. Every block is byte-identical to its pre-split * form. */ body.page-template-page-services-ecommerce .svcl-catalog__bg { content: url("../assets/images/services-ecommerce/catalog-bg.svg"); } /* --- page-services-ecommerce.php --- First page of the new "Services Landing Page" family — see that file's own header comment for the full section-reuse map. Its 3 genuinely new sections (and the hero's floating review card) are styled by css/services-common.css instead, not here. */ body.page-template-page-services-ecommerce .hrf-hero { background-image: url("../assets/images/services-ecommerce/hero-bg.png"); } body.page-template-page-services-ecommerce .hrf-testi { background-image: url("../assets/images/services-ecommerce/testi-bg.png"); } body.page-template-page-services-ecommerce .hrf-cta2 { background-image: url("../assets/images/services-ecommerce/cta-mid-bg.png"); } body.page-template-page-services-ecommerce .hrf-faq { background-image: url("../assets/images/services-ecommerce/faq-bg.png"); } /* --- page-services-b2b-ecommerce-development.php --- Second page in the Services Landing Page family. No Figma source exists for this page (built from a content brief only) — all four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same as HIRE_PAGE_TEMPLATE.md §7.1's "design — copy from base" rule. This page also reuses hrf-risk and hrf-hth (flat-color backgrounds, no override needed for either). */ body.page-template-page-services-b2b-ecommerce-development .hrf-hero { background-image: url("../assets/images/services-b2b-ecommerce-development/hero-bg.png"); } body.page-template-page-services-b2b-ecommerce-development .hrf-testi { background-image: url("../assets/images/services-b2b-ecommerce-development/testi-bg.png"); } body.page-template-page-services-b2b-ecommerce-development .hrf-cta2 { background-image: url("../assets/images/services-b2b-ecommerce-development/cta-mid-bg.png"); } body.page-template-page-services-b2b-ecommerce-development .hrf-faq { background-image: url("../assets/images/services-b2b-ecommerce-development/faq-bg.png"); } /* --- page-services-b2b-ecommerce-development.php --- No block needed: this page's content brief supplied no svcl-catalog, svcl-platforms or svcl-insights content and no Figma frame exists to design fresh ones from, so all three svcl-* sections are dropped (see the template's own header comment). It still enqueues this file (per §5.3's four-array registration, applied uniformly across the family) but has no svcl-* selector for any rule here to match — don't add one for an asset that doesn't exist. */ /* --- page-services-bigcommerce-development-services.php --- Third page in the Services Landing Page family. No Figma source exists for this page either — all four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same as HIRE_PAGE_TEMPLATE.md §7.1's "design — copy from base" rule. This page also reuses hrf-risk (flat-color background, no override needed). */ body.page-template-page-services-bigcommerce-development-services .hrf-hero { background-image: url("../assets/images/services-bigcommerce-development-services/hero-bg.png"); } body.page-template-page-services-bigcommerce-development-services .hrf-testi { background-image: url("../assets/images/services-bigcommerce-development-services/testi-bg.png"); } body.page-template-page-services-bigcommerce-development-services .hrf-cta2 { background-image: url("../assets/images/services-bigcommerce-development-services/cta-mid-bg.png"); } body.page-template-page-services-bigcommerce-development-services .hrf-faq { background-image: url("../assets/images/services-bigcommerce-development-services/faq-bg.png"); } /* --- page-services-bigcommerce-development-services.php --- This page's own brief supplies real C16 content, so svcl-catalog ships with its own 10-item grid (see the template's own header comment) — but no Figma frame exists to export a fresh background texture from, so this reuses page-services-ecommerce.php's own catalog-bg.svg verbatim (copied into this page's own asset folder, per SERVICE_PAGE_TEMPLATE.md §3's "the same background texture asset can be reused too" allowance). svcl-platforms and svcl-insights have no brief content and reuse the base page's own sections unchanged, including its unmodified background rules already covered above — no additional selector needed for either. */ body.page-template-page-services-bigcommerce-development-services .svcl-catalog__bg { content: url("../assets/images/services-bigcommerce-development-services/catalog-bg.svg"); } /* --- page-services-magento-development-company.php --- Fifth page in the Services Landing Page family, built from service-landing-pages-content/magento_development_company.md — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-risk and svcl-platforms (both flat-color/no background image). */ body.page-template-page-services-magento-development-company .hrf-hero { background-image: url("../assets/images/services-magento-development-company/hero-bg.png"); } body.page-template-page-services-magento-development-company .hrf-testi { background-image: url("../assets/images/services-magento-development-company/testi-bg.png"); } body.page-template-page-services-magento-development-company .hrf-cta2 { background-image: url("../assets/images/services-magento-development-company/cta-mid-bg.png"); } body.page-template-page-services-magento-development-company .hrf-faq { background-image: url("../assets/images/services-magento-development-company/faq-bg.png"); } /* --- page-services-magento-development-company.php --- This page's own brief supplies real C16 content, so svcl-catalog ships with its own 10-item grid and real URLs — but no Figma frame exists to export a fresh background texture from, so this reuses page-services-ecommerce.php's own catalog-bg.svg verbatim (copied into this page's own asset folder, same allowance used above). svcl-platforms carries the base page's own fallback content unchanged (no background image of its own — flat white section, no override needed). */ body.page-template-page-services-magento-development-company .svcl-catalog__bg { content: url("../assets/images/services-magento-development-company/catalog-bg.svg"); } /* --- page-services-omnichannel-commerce.php --- Built from service-landing-pages-content/omnichannel_commerce.md — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth and hrf-risk (both flat-color/no background image). */ body.page-template-page-services-omnichannel-commerce .hrf-hero { background-image: url("../assets/images/services-omnichannel-commerce/hero-bg.png"); } body.page-template-page-services-omnichannel-commerce .hrf-testi { background-image: url("../assets/images/services-omnichannel-commerce/testi-bg.png"); } body.page-template-page-services-omnichannel-commerce .hrf-cta2 { background-image: url("../assets/images/services-omnichannel-commerce/cta-mid-bg.png"); } body.page-template-page-services-omnichannel-commerce .hrf-faq { background-image: url("../assets/images/services-omnichannel-commerce/faq-bg.png"); } /* --- page-services-omnichannel-commerce.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ /* --- page-services-pos-integration.php --- Built from service-landing-pages-content/pos_integration_services.md — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth and hrf-risk (both flat-color/no background image). */ body.page-template-page-services-pos-integration .hrf-hero { background-image: url("../assets/images/services-pos-integration/hero-bg.png"); } body.page-template-page-services-pos-integration .hrf-testi { background-image: url("../assets/images/services-pos-integration/testi-bg.png"); } body.page-template-page-services-pos-integration .hrf-cta2 { background-image: url("../assets/images/services-pos-integration/cta-mid-bg.png"); } body.page-template-page-services-pos-integration .hrf-faq { background-image: url("../assets/images/services-pos-integration/faq-bg.png"); } /* --- page-services-pos-integration.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-pos-integration .svcl-catalog__bg { content: url("../assets/images/services-pos-integration/catalog-bg.svg"); } body.page-template-page-services-omnichannel-commerce .svcl-catalog__bg { content: url("../assets/images/services-omnichannel-commerce/catalog-bg.svg"); } /* --- page-services-digital-marketing.php --- Built from service-landing-pages-content/digital_marketing_services.md — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth and hrf-risk (both flat-color/no background image). */ body.page-template-page-services-digital-marketing .hrf-hero { background-image: url("../assets/images/services-digital-marketing/hero-bg.png"); } body.page-template-page-services-digital-marketing .hrf-testi { background-image: url("../assets/images/services-digital-marketing/testi-bg.png"); } body.page-template-page-services-digital-marketing .hrf-cta2 { background-image: url("../assets/images/services-digital-marketing/cta-mid-bg.png"); } body.page-template-page-services-digital-marketing .hrf-faq { background-image: url("../assets/images/services-digital-marketing/faq-bg.png"); } /* --- page-services-digital-marketing.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-digital-marketing .svcl-catalog__bg { content: url("../assets/images/services-digital-marketing/catalog-bg.svg"); } /* --- page-services-headless-commerce-development.php --- Built from service-landing-pages-content/headless_commerce_development.md — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth and hrf-risk (both flat-color/no background image). */ body.page-template-page-services-headless-commerce-development .hrf-hero { background-image: url("../assets/images/services-headless-commerce-development/hero-bg.png"); } body.page-template-page-services-headless-commerce-development .hrf-testi { background-image: url("../assets/images/services-headless-commerce-development/testi-bg.png"); } body.page-template-page-services-headless-commerce-development .hrf-cta2 { background-image: url("../assets/images/services-headless-commerce-development/cta-mid-bg.png"); } body.page-template-page-services-headless-commerce-development .hrf-faq { background-image: url("../assets/images/services-headless-commerce-development/faq-bg.png"); } /* --- page-services-headless-commerce-development.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-headless-commerce-development .svcl-catalog__bg { content: url("../assets/images/services-headless-commerce-development/catalog-bg.svg"); } /* --- page-services-personalization-tools.php --- Built from service-landing-pages-content/personalization_tools.md — no Figma source (real old live page instead, still 200 at build time). All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth (no background image; flat color). */ body.page-template-page-services-personalization-tools .hrf-hero { background-image: url("../assets/images/services-personalization-tools/hero-bg.png"); } body.page-template-page-services-personalization-tools .hrf-testi { background-image: url("../assets/images/services-personalization-tools/testi-bg.png"); } body.page-template-page-services-personalization-tools .hrf-cta2 { background-image: url("../assets/images/services-personalization-tools/cta-mid-bg.png"); } body.page-template-page-services-personalization-tools .hrf-faq { background-image: url("../assets/images/services-personalization-tools/faq-bg.png"); } /* --- page-services-personalization-tools.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-personalization-tools .svcl-catalog__bg { content: url("../assets/images/services-personalization-tools/catalog-bg.svg"); } /* --- page-services-shopify-development.php --- Built from service-landing-pages-content/shopify_development_services.md — no Figma source (real old live page instead, still 200 at build time). All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth (no background image; flat color) and hrf-risk (white background, no image). */ body.page-template-page-services-shopify-development .hrf-hero { background-image: url("../assets/images/services-shopify-development/hero-bg.png"); } body.page-template-page-services-shopify-development .hrf-testi { background-image: url("../assets/images/services-shopify-development/testi-bg.png"); } body.page-template-page-services-shopify-development .hrf-cta2 { background-image: url("../assets/images/services-shopify-development/cta-mid-bg.png"); } body.page-template-page-services-shopify-development .hrf-faq { background-image: url("../assets/images/services-shopify-development/faq-bg.png"); } /* --- page-services-shopify-development.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-shopify-development .svcl-catalog__bg { content: url("../assets/images/services-shopify-development/catalog-bg.svg"); } /* --- page-services-start-online-store.php --- Built from service-landing-pages-content/start_online_store.md — no Figma source (real old live page instead, confirmed 200 at build time). All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth and hrf-risk (neither has a background image; flat color). */ body.page-template-page-services-start-online-store .hrf-hero { background-image: url("../assets/images/services-start-online-store/hero-bg.png"); } body.page-template-page-services-start-online-store .hrf-testi { background-image: url("../assets/images/services-start-online-store/testi-bg.png"); } body.page-template-page-services-start-online-store .hrf-cta2 { background-image: url("../assets/images/services-start-online-store/cta-mid-bg.png"); } body.page-template-page-services-start-online-store .hrf-faq { background-image: url("../assets/images/services-start-online-store/faq-bg.png"); } /* --- page-services-start-online-store.php --- This page's own brief supplies real C16 content, so svcl-catalog ships with its own 8-item grid and real sibling-page URLs — but no Figma frame exists to export a fresh background texture from, so this reuses page-services-ecommerce.php's own catalog-bg.svg verbatim (copied into this page's own asset folder, same allowance used above). svcl-platforms and svcl-insights carry the base page's own fallback content unchanged (no background image of their own — flat white sections, no override needed). */ body.page-template-page-services-start-online-store .svcl-catalog__bg { content: url("../assets/images/services-start-online-store/catalog-bg.svg"); } /* --- page-services-website-redesign.php --- Built from service-landing-pages-content/website_redesign_services.md — no Figma source (real old live page instead, still 200 at build time). All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth and hrf-risk (neither has a background image; flat color). */ body.page-template-page-services-website-redesign .hrf-hero { background-image: url("../assets/images/services-website-redesign/hero-bg.png"); } body.page-template-page-services-website-redesign .hrf-testi { background-image: url("../assets/images/services-website-redesign/testi-bg.png"); } body.page-template-page-services-website-redesign .hrf-cta2 { background-image: url("../assets/images/services-website-redesign/cta-mid-bg.png"); } body.page-template-page-services-website-redesign .hrf-faq { background-image: url("../assets/images/services-website-redesign/faq-bg.png"); } /* --- page-services-website-redesign.php --- This page's own brief supplies real C16 content, so svcl-catalog ships with its own 12-item grid and real sibling-page URLs — but no Figma frame exists to export a fresh background texture from, so this reuses page-services-ecommerce.php's own catalog-bg.svg verbatim (copied into this page's own asset folder, same allowance used above). svcl-platforms and svcl-insights carry the base page's own fallback content unchanged (no background image of their own — flat white sections, no override needed). */ body.page-template-page-services-website-redesign .svcl-catalog__bg { content: url("../assets/images/services-website-redesign/catalog-bg.svg"); } /* --- page-services-woocommerce-development.php --- Built from service-landing-pages-content/woocommerce_development_services.md (RECIPE: HUB) — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-risk (white background, no image) but not hrf-hth (no C13 content in the brief). */ body.page-template-page-services-woocommerce-development .hrf-hero { background-image: url("../assets/images/services-woocommerce-development/hero-bg.png"); } body.page-template-page-services-woocommerce-development .hrf-testi { background-image: url("../assets/images/services-woocommerce-development/testi-bg.png"); } body.page-template-page-services-woocommerce-development .hrf-cta2 { background-image: url("../assets/images/services-woocommerce-development/cta-mid-bg.png"); } body.page-template-page-services-woocommerce-development .hrf-faq { background-image: url("../assets/images/services-woocommerce-development/faq-bg.png"); } /* --- page-services-woocommerce-development.php --- This page's own brief supplies real C16 content, so svcl-catalog ships with its own 10-item grid and real sibling-page URLs — but no Figma frame exists to export a fresh background texture from, so this reuses page-services-ecommerce.php's own catalog-bg.svg verbatim (copied into this page's own asset folder, same allowance used above). svcl-platforms and svcl-insights carry the base page's own fallback content unchanged (the brief's own C18/C17 blocks are both explicitly omitted) — no background image of their own, flat white sections, no override needed. */ /* --- service-inner-pages/page-services-website-migration.php --- Built from service-landing-pages-content/website_migration_services.md (RECIPE: SERVICE) — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth (3 steps) and hrf-risk (neither has a background image; flat color). */ body.page-template-page-services-website-migration .hrf-hero { background-image: url("../assets/images/services-website-migration/hero-bg.png"); } body.page-template-page-services-website-migration .hrf-testi { background-image: url("../assets/images/services-website-migration/testi-bg.png"); } body.page-template-page-services-website-migration .hrf-cta2 { background-image: url("../assets/images/services-website-migration/cta-mid-bg.png"); } body.page-template-page-services-website-migration .hrf-faq { background-image: url("../assets/images/services-website-migration/faq-bg.png"); } /* --- service-inner-pages/page-services-website-migration.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-website-migration .svcl-catalog__bg { content: url("../assets/images/services-website-migration/catalog-bg.svg"); } body.page-template-page-services-woocommerce-development .svcl-catalog__bg { content: url("../assets/images/services-woocommerce-development/catalog-bg.svg"); } /* --- service-inner-pages/page-services-shopify-dropshipping.php --- Built from service-landing-pages-content/shopify_dropshipping.md (RECIPE: SERVICE) — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also reuses hrf-hth (3 steps) and hrf-risk (neither has a background image; flat color). */ body.page-template-page-services-shopify-dropshipping .hrf-hero { background-image: url("../assets/images/services-shopify-dropshipping/hero-bg.png"); } body.page-template-page-services-shopify-dropshipping .hrf-testi { background-image: url("../assets/images/services-shopify-dropshipping/testi-bg.png"); } body.page-template-page-services-shopify-dropshipping .hrf-cta2 { background-image: url("../assets/images/services-shopify-dropshipping/cta-mid-bg.png"); } body.page-template-page-services-shopify-dropshipping .hrf-faq { background-image: url("../assets/images/services-shopify-dropshipping/faq-bg.png"); } /* --- service-inner-pages/page-services-shopify-dropshipping.php --- This page's own brief supplies no C16 content, so svcl-catalog, svcl-platforms and svcl-insights all carry page-services-ecommerce.php's own content unchanged (SERVICE_PAGE_TEMPLATE.md §2's fallback rule) — including that page's own catalog-bg.svg, copied verbatim into this page's own asset folder rather than cross-referenced, same as the other clones above. */ body.page-template-page-services-shopify-dropshipping .svcl-catalog__bg { content: url("../assets/images/services-shopify-dropshipping/catalog-bg.svg"); } /* --- service-inner-pages/page-services-psd-to-bigcommerce.php --- Built from service-inner-pages-content/psd_to_bigcommerce.md (RECIPE: SERVICE) — no Figma source of its own. All four backgrounds are the shared design-system assets, copied verbatim from assets/images/services-bigcommerce-development-services/ (itself a copy of the base ecommerce page's), same "design — copy from base" rule as every other clone above. This page uses both optional sections — hrf-hth (C13 PROCESS) and hrf-risk (C5 SPLIT NARRATIVE) — neither of which takes a background image, so neither needs a rule here. No svcl-* section other than the hero review card is used, so this page has no entry in services-common.css. */ body.page-template-page-services-psd-to-bigcommerce .hrf-hero { background-image: url("../assets/images/services-psd-to-bigcommerce/hero-bg.png"); } body.page-template-page-services-psd-to-bigcommerce .hrf-testi { background-image: url("../assets/images/services-psd-to-bigcommerce/testi-bg.png"); } body.page-template-page-services-psd-to-bigcommerce .hrf-cta2 { background-image: url("../assets/images/services-psd-to-bigcommerce/cta-mid-bg.png"); } body.page-template-page-services-psd-to-bigcommerce .hrf-faq { background-image: url("../assets/images/services-psd-to-bigcommerce/faq-bg.png"); } /* --- service-inner-pages/page-services-wix-development.php --- Built from service-inner-pages-content/wix_development_services.md (RECIPE: SERVICE) — no Figma source of its own. All four backgrounds are the shared design-system assets, copied verbatim from assets/images/services-ecommerce/ (the family's base page), same "design — copy from base" rule as every other clone above. This page uses both optional sections — hrf-hth (C13 PROCESS) and hrf-risk (C5 SPLIT NARRATIVE) — neither of which takes a background image, so neither needs a rule here. No svcl-* section other than the hero review card is used, so this page has no entry in services-common.css. The .hrf-testi__logo rule below is the FIRST non-background per-page override in this block, so it is deliberately called out: this page's testimonial logo is the real A2z Stores mark fetched from the live page (atoz-logo-new.svg, native 94x49 => 1.92:1). The shared rule above hardcodes .hrf-testi__logo to 130x25 — a 5.2:1 box that stretches this mark badly — so only the width is overridden here, keeping the shared 25px height so the attribution row still lines up with every sibling page. 48/25 = 1.92, matching the asset's own aspect ratio exactly. */ body.page-template-page-services-wix-development .hrf-hero { background-image: url("../assets/images/services-wix-development/hero-bg.png"); } body.page-template-page-services-wix-development .hrf-testi { background-image: url("../assets/images/services-wix-development/testi-bg.png"); } body.page-template-page-services-wix-development .hrf-cta2 { background-image: url("../assets/images/services-wix-development/cta-mid-bg.png"); } body.page-template-page-services-wix-development .hrf-faq { background-image: url("../assets/images/services-wix-development/faq-bg.png"); } body.page-template-page-services-wix-development .hrf-testi__logo { width: 48px; } /* --- service-inner-pages/page-services-inner-desktop-application-development.php --- Backgrounds are the shared design-system assets, copied verbatim from assets/images/services-software-development/ (itself the "design — copy from base" rule SERVICE_PAGE_TEMPLATE.md §7.1 documents) into this page's own asset folder. This page also uses hrf-hth (C13) and hrf-risk (C5) — flat colour, no background image on either, so neither needs an override. The selector uses the sanitized template filename only, with no folder segment: body_class() derives page-template-* that way regardless of subfolder (§5.4). */ body.page-template-page-services-inner-desktop-application-development .hrf-hero { background-image: url("../assets/images/services-desktop-application-development/hero-bg.png"); } body.page-template-page-services-inner-desktop-application-development .hrf-testi { background-image: url("../assets/images/services-desktop-application-development/testi-bg.png"); } body.page-template-page-services-inner-desktop-application-development .hrf-cta2 { background-image: url("../assets/images/services-desktop-application-development/cta-mid-bg.png"); } body.page-template-page-services-inner-desktop-application-development .hrf-faq { background-image: url("../assets/images/services-desktop-application-development/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-api-integration-services.php --- Built from service-inner-pages-content/api-integration-services.md (RECIPE: SERVICE). All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — reuse an existing copy" rule as the clones above (SERVICE_PAGE_TEMPLATE.md §7.1). This page carries all 14 sections, including hrf-hth and hrf-risk — both flat-coloured, so neither needs a background image here. No css/services-common.css block is needed either: the only svcl-* thing on the page is the hero review card, which has no page-specific background image. The selector uses the sanitized template filename with no folder segment, which is what body_class() derives page-template-* from regardless of subfolder (§5.4). */ body.page-template-page-services-inner-api-integration-services .hrf-hero { background-image: url("../assets/images/services-api-integration-services/hero-bg.png"); } body.page-template-page-services-inner-api-integration-services .hrf-testi { background-image: url("../assets/images/services-api-integration-services/testi-bg.png"); } body.page-template-page-services-inner-api-integration-services .hrf-cta2 { background-image: url("../assets/images/services-api-integration-services/cta-mid-bg.png"); } body.page-template-page-services-inner-api-integration-services .hrf-faq { background-image: url("../assets/images/services-api-integration-services/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-custom-software-development.php --- All four background images are the shared design assets, copied verbatim from assets/images/services-software-development/ (SERVICE_PAGE_TEMPLATE.md §7.1's "design — reuse an existing copy" rule) into this page's own asset folder. This page also uses hrf-hth (C13) and hrf-risk (C5) — flat colour, no background image on either, so neither needs an override. The selector uses the sanitized template filename only, with no folder segment: body_class() derives page-template-* that way regardless of subfolder (§5.4). */ body.page-template-page-services-inner-custom-software-development .hrf-hero { background-image: url("../assets/images/services-custom-software-development/hero-bg.png"); } body.page-template-page-services-inner-custom-software-development .hrf-testi { background-image: url("../assets/images/services-custom-software-development/testi-bg.png"); } body.page-template-page-services-inner-custom-software-development .hrf-cta2 { background-image: url("../assets/images/services-custom-software-development/cta-mid-bg.png"); } body.page-template-page-services-inner-custom-software-development .hrf-faq { background-image: url("../assets/images/services-custom-software-development/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-full-stack-development-company.php --- Built from service-inner-pages-content/full_stack_development_company.md (RECIPE: SERVICE) — no Figma source; the brief's own PAGE: URL is the real-content source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also uses hrf-hth (C13) and hrf-risk (C5); neither takes a background image (flat colour). No css/services-common.css block is needed — the only svcl-* markup it carries is the hero review card, which has no background image of its own. */ body.page-template-page-services-inner-full-stack-development-company .hrf-hero { background-image: url("../assets/images/services-full-stack-development-company/hero-bg.png"); } body.page-template-page-services-inner-full-stack-development-company .hrf-testi { background-image: url("../assets/images/services-full-stack-development-company/testi-bg.png"); } body.page-template-page-services-inner-full-stack-development-company .hrf-cta2 { background-image: url("../assets/images/services-full-stack-development-company/cta-mid-bg.png"); } body.page-template-page-services-inner-full-stack-development-company .hrf-faq { background-image: url("../assets/images/services-full-stack-development-company/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-mvp-development.php --- Built from service-inner-pages-content/mvp_development_services.md (RECIPE: SERVICE) — no Figma source of its own. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also uses hrf-hth (3 steps) and hrf-risk (neither has a background image; flat colour), and no svcl-* section with a background of its own — so it needs no block in services-common.css. Selector note: the sanitized template FILENAME is what WordPress derives page-template-page-* from, so the "inner-" segment of this page's filename belongs in the selector even though the asset folder is named for the brief's own vertical (services-mvp-development) without it. */ body.page-template-page-services-inner-mvp-development .hrf-hero { background-image: url("../assets/images/services-mvp-development/hero-bg.png"); } body.page-template-page-services-inner-mvp-development .hrf-testi { background-image: url("../assets/images/services-mvp-development/testi-bg.png"); } body.page-template-page-services-inner-mvp-development .hrf-cta2 { background-image: url("../assets/images/services-mvp-development/cta-mid-bg.png"); } body.page-template-page-services-inner-mvp-development .hrf-faq { background-image: url("../assets/images/services-mvp-development/faq-bg.png"); } /* --- service-inner-pages/page-services-plugins-development.php --- Built from service-inner-pages-content/plugins_development.md (RECIPE: SERVICE) — no Figma source; cloned from page-services-ecommerce.php. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page also carries hrf-hth (3 steps) and hrf-risk; neither has a background image (flat colour), so neither needs a rule here. No services-common.css block either: the only svcl-* thing this page uses is the hero review card, which is a flat white card. */ body.page-template-page-services-plugins-development .hrf-hero { background-image: url("../assets/images/services-plugins-development/hero-bg.png"); } body.page-template-page-services-plugins-development .hrf-testi { background-image: url("../assets/images/services-plugins-development/testi-bg.png"); } body.page-template-page-services-plugins-development .hrf-cta2 { background-image: url("../assets/images/services-plugins-development/cta-mid-bg.png"); } body.page-template-page-services-plugins-development .hrf-faq { background-image: url("../assets/images/services-plugins-development/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-figma-to-wordpres.php --- Built from service-inner-pages-content/figma_to_wordpress.md (RECIPE: SERVICE) — no Figma source. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as the other clones above. This page carries the full 14-section order, hrf-hth (C13) and hrf-risk (C5) included; neither takes a background image (flat #faf9fd / #ffffff), so neither needs a rule here. The asset folder is named for the brief's own vertical slug (services-figma-to-wordpress); the selector below uses the sanitized template filename, which is what body_class() derives page-template-* from regardless of subfolder (SERVICE_PAGE_TEMPLATE.md §5.4). */ body.page-template-page-services-inner-figma-to-wordpres .hrf-hero { background-image: url("../assets/images/services-figma-to-wordpress/hero-bg.png"); } body.page-template-page-services-inner-figma-to-wordpres .hrf-testi { background-image: url("../assets/images/services-figma-to-wordpress/testi-bg.png"); } body.page-template-page-services-inner-figma-to-wordpres .hrf-cta2 { background-image: url("../assets/images/services-figma-to-wordpress/cta-mid-bg.png"); } body.page-template-page-services-inner-figma-to-wordpres .hrf-faq { background-image: url("../assets/images/services-figma-to-wordpress/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-figma-to-wordpres.php --- No block needed. This page uses exactly one element styled by this file — the hero's floating review card (svcl-hero__review) — and that component has no page-specific background image. svcl-catalog, svcl-platforms and svcl-insights were removed from every inner page on 2026-09-16, so there is no svcl-* selector on this page for a rule here to match; don't add one for an asset that doesn't exist. It still enqueues this file, per §5.3's four-array registration applied uniformly across the family. */ /* --- service-inner-pages/page-services-inner-saas-development.php --- Built from service-inner-pages-content/saas_development_services.md (RECIPE: SERVICE) — no Figma frame of its own. All four backgrounds are the shared design-system assets copied verbatim from assets/images/services-ecommerce/, same "design — copy from base" rule as every clone above. This page carries the full 14 sections, hrf-hth (C13) and hrf-risk (C5) included; neither of those two has a background image, so neither needs an override. The asset folder is named for the brief's own vertical slug (services-saas-development), not for the "inner-" prefix the template filename carries — the selector below still uses the sanitized template filename, which is what body_class() derives page-template-* from regardless of subfolder (SERVICE_PAGE_TEMPLATE.md §5.4). */ body.page-template-page-services-inner-saas-development .hrf-hero { background-image: url("../assets/images/services-saas-development/hero-bg.png"); } body.page-template-page-services-inner-saas-development .hrf-testi { background-image: url("../assets/images/services-saas-development/testi-bg.png"); } body.page-template-page-services-inner-saas-development .hrf-cta2 { background-image: url("../assets/images/services-saas-development/cta-mid-bg.png"); } body.page-template-page-services-inner-saas-development .hrf-faq { background-image: url("../assets/images/services-saas-development/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-psd-to-shopify.php --- Same filename/slug split as the SaaS block above: the asset folder is named for the vertical (services-psd-to-shopify), while the selector uses the sanitized template filename, which is what body_class() derives page-template-* from regardless of subfolder (SERVICE_PAGE_TEMPLATE.md §5.4). No services-common.css block is needed — this page's only svcl-* section is the hero review card, which has no background image of its own. */ body.page-template-page-services-inner-psd-to-shopify .hrf-hero { background-image: url("../assets/images/services-psd-to-shopify/hero-bg.png"); } body.page-template-page-services-inner-psd-to-shopify .hrf-testi { background-image: url("../assets/images/services-psd-to-shopify/testi-bg.png"); } body.page-template-page-services-inner-psd-to-shopify .hrf-cta2 { background-image: url("../assets/images/services-psd-to-shopify/cta-mid-bg.png"); } body.page-template-page-services-inner-psd-to-shopify .hrf-faq { background-image: url("../assets/images/services-psd-to-shopify/faq-bg.png"); } /* --- service-inner-pages/page-services-inner-psd-to-magento.php --- Same filename/slug split as the psd-to-shopify block above: the asset folder is named for the vertical (services-psd-to-magento), while the selector uses the sanitized template filename, which is what body_class() derives page-template-* from regardless of subfolder (SERVICE_PAGE_TEMPLATE.md §5.4). All four backgrounds are the shared design-system assets, copied verbatim from assets/images/services-magento-development-company/ (§7.1). This page also uses both optional sections, hrf-hth (C13) and hrf-risk (C5) — flat colour, no background image on either, so neither needs a rule here. No services-common.css block is needed: this page's only svcl-* section is the hero review card, which has no background image of its own. The .hrf-testi__logo override is the same one page-services-wix-development.php added: this page's testimonial is the same real client (Dean, A2Z Stores) and cross-references that page's real A2z Stores mark (testi-logo-badge.svg, native 94x49 => 1.92:1). The shared rule hardcodes .hrf-testi__logo to 130x25, a 5.2:1 box that stretches this mark badly, so only the width is overridden — keeping the shared 25px height so the attribution row still lines up with every sibling page. 48/25 = 1.92, matching the asset's own aspect ratio exactly. */ body.page-template-page-services-inner-psd-to-magento .hrf-hero { background-image: url("../assets/images/services-psd-to-magento/hero-bg.png"); } body.page-template-page-services-inner-psd-to-magento .hrf-testi { background-image: url("../assets/images/services-psd-to-magento/testi-bg.png"); } body.page-template-page-services-inner-psd-to-magento .hrf-cta2 { background-image: url("../assets/images/services-psd-to-magento/cta-mid-bg.png"); } body.page-template-page-services-inner-psd-to-magento .hrf-faq { background-image: url("../assets/images/services-psd-to-magento/faq-bg.png"); } body.page-template-page-services-inner-psd-to-magento .hrf-testi__logo { width: 48px; }