File: /var/www/html/wp-content/mu-plugins/ethnic-magento-development-page.php
<?php
/**
* Plugin Name: Ethnic Magento Development Page
* Description: Creates and renders the Magento Development sub-service page under eCommerce Development Services.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_magento_development_page_parent_id' ) ) {
function ethnic_magento_development_page_parent_id() {
static $parent_id = null;
if ( null !== $parent_id ) {
return $parent_id;
}
$page = get_page_by_path( 'services/ecommerce-development' );
if ( $page instanceof WP_Post ) {
$parent_id = (int) $page->ID;
} else {
$fallback = get_page_by_path( 'ecommerce-development' );
$parent_id = $fallback instanceof WP_Post ? (int) $fallback->ID : 0;
}
return $parent_id;
}
}
if ( ! function_exists( 'ethnic_magento_development_page_get_target_page' ) ) {
function ethnic_magento_development_page_get_target_page() {
static $page = false;
if ( false !== $page ) {
return $page instanceof WP_Post ? $page : null;
}
$page = get_page_by_path( 'services/ecommerce-development/magento-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'magento-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_magento_development_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_magento_development_page_ensure_page' ) ) {
function ethnic_magento_development_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_magento_development_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'Magento Development',
'post_name' => 'magento-development',
'post_parent' => $parent_id,
'post_status' => 'publish',
'post_content' => '',
'comment_status' => 'closed',
'ping_status' => 'closed',
);
$page = get_page_by_path( 'services/ecommerce-development/magento-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'Magento Development' !== $page->post_title
|| (int) $page->post_parent !== $parent_id
|| 'publish' !== $page->post_status;
if ( $needs_update ) {
wp_update_post(
array_merge(
$postarr,
array(
'ID' => (int) $page->ID,
)
)
);
clean_post_cache( (int) $page->ID );
}
return;
}
$fallback = get_page_by_path( 'magento-development' );
if ( $fallback instanceof WP_Post ) {
wp_update_post(
array_merge(
$postarr,
array(
'ID' => (int) $fallback->ID,
)
)
);
clean_post_cache( (int) $fallback->ID );
return;
}
wp_insert_post( $postarr );
}
add_action( 'init', 'ethnic_magento_development_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_magento_development_page_is_target' ) ) {
function ethnic_magento_development_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_magento_development_page_get_target_page();
if ( ! ( $page instanceof WP_Post ) ) {
return false;
}
return (int) get_queried_object_id() === (int) $page->ID || is_page( (int) $page->ID );
}
}
if ( ! function_exists( 'ethnic_magento_development_page_url' ) ) {
function ethnic_magento_development_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_magento_development_page_contact_url' ) ) {
function ethnic_magento_development_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_magento_development_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_magento_development_page_case_studies_url' ) ) {
function ethnic_magento_development_page_case_studies_url() {
return function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_magento_development_page_url( 'case-studies' );
}
}
if ( ! function_exists( 'ethnic_magento_development_page_data' ) ) {
function ethnic_magento_development_page_data() {
static $data = null;
if ( null !== $data ) {
return $data;
}
$data = array(
'metaTitle' => 'Magento Development Services | Adobe Commerce Development, Integrations & Support',
'metaDescription' => 'Looking for Magento development services? We provide Magento and Adobe Commerce expertise, custom module development, integrations, B2B support, performance optimization, migration, and long-term maintenance.',
'heroTitle' => 'Magento Development',
'heroText' => 'We build scalable, flexible, and enterprise-ready Magento and Adobe Commerce solutions for growing merchants, B2B operations, and complex commerce environments that need stronger workflows, integrations, and long-term platform control.',
'heroPoints' => array(
'Magento / Adobe Commerce expertise',
'Custom development and integrations',
'B2B support, optimization, and long-term maintenance',
),
'overviewParagraphs' => array(
'Our Magento development services support brands, merchants, manufacturers, distributors, and enterprise businesses that need a commerce platform built around flexibility, scale, and business-specific workflows. We work across Magento Open Source and Adobe Commerce to shape storefronts, operational logic, and integration layers around how the business actually sells.',
'That includes new builds, replatforming, custom features, performance improvements, and ongoing enhancements. Whether the project is a modern commerce rebuild or a more complex Adobe Commerce implementation with heavier operational requirements, we focus on usability, extensibility, and platform longevity.',
'From planning and implementation to optimization and long-term growth support, we help businesses use Magento as a flexible commerce foundation rather than a rigid template with limited room to adapt.',
),
'overviewFeatures' => array(
array(
'icon' => 'module',
'title' => 'Custom Magento Solutions',
'copy' => 'Commerce implementations shaped around your workflows, pricing logic, user journeys, and operational requirements.',
),
array(
'icon' => 'layers',
'title' => 'Scalable Commerce Architecture',
'copy' => 'Platform decisions planned for catalog growth, integrations, performance demands, and long-term maintainability.',
),
array(
'icon' => 'workflow',
'title' => 'Complex Workflow Support',
'copy' => 'Support for B2B processes, catalog rules, custom checkout logic, admin tools, and operational flexibility.',
),
array(
'icon' => 'growth',
'title' => 'Long-Term Technical Partnership',
'copy' => 'Launch is followed by optimization, support, iteration, and technical guidance as the platform evolves.',
),
),
'expertiseParagraphs' => array(
'We support Magento Open Source and Adobe Commerce delivery across storefront UX, catalog configuration, backend logic, checkout flows, and the internal workflows that keep complex commerce operations moving. The goal is to adapt the platform around the business model rather than forcing the business into rigid patterns.',
'That makes Magento a strong fit for growth-stage stores with custom needs as well as larger, more complex commerce environments that depend on advanced catalog structures, integrations, pricing rules, and workflow control.',
),
'expertiseCards' => array(
array(
'icon' => 'store',
'title' => 'Magento Open Source development',
'copy' => 'Flexible Magento builds for merchants that need deeper customization and more control over commerce functionality.',
),
array(
'icon' => 'briefcase',
'title' => 'Adobe Commerce implementation support',
'copy' => 'Support for more advanced commerce environments with stronger operational, catalog, and integration requirements.',
),
array(
'icon' => 'workflow',
'title' => 'Custom commerce workflows',
'copy' => 'Storefront, admin, catalog, and order handling logic tailored around the way your business actually operates.',
),
array(
'icon' => 'spark',
'title' => 'Flexible platform customization',
'copy' => 'Adapt Magento to the needs of the business instead of relying only on rigid prebuilt patterns.',
),
array(
'icon' => 'shield',
'title' => 'Enterprise-ready architecture support',
'copy' => 'Platform planning shaped around scale, long-term support, and operational complexity.',
),
),
'moduleParagraphs' => array(
'Custom Magento module development is often essential when core features or off-the-shelf extensions do not fully support the business model. We build custom modules for unique checkout rules, admin workflows, fulfillment logic, catalog behavior, pricing requirements, and business-specific operational processes.',
'The focus stays on clean implementation, maintainability, and upgrade-aware development practices so the platform remains extensible without creating unnecessary long-term risk.',
),
'moduleAreas' => array(
array(
'icon' => 'cart',
'title' => 'Custom checkout functionality',
'copy' => 'Extend checkout behavior to support business rules, B2B logic, and user flows that standard setups do not cover.',
),
array(
'icon' => 'dashboard',
'title' => 'Admin workflow modules',
'copy' => 'Support internal teams with cleaner operational tools, status handling, and more business-specific admin experiences.',
),
array(
'icon' => 'grid',
'title' => 'Catalog and pricing logic',
'copy' => 'Implement custom rules for product structures, customer segmentation, pricing behavior, and promotional workflows.',
),
array(
'icon' => 'truck',
'title' => 'Order and fulfillment customizations',
'copy' => 'Shape post-purchase workflows around how orders, shipping, and internal processing need to work.',
),
array(
'icon' => 'api',
'title' => 'Business-specific features',
'copy' => 'Add tailored functionality when core platform capabilities do not fully match the business requirement.',
),
array(
'icon' => 'upgrade',
'title' => 'Upgrade-aware custom development',
'copy' => 'Build customizations with long-term maintainability and platform evolution in mind.',
),
),
'integrationsIntro' => 'Magento often sits at the center of a broader commerce and operations stack. We support ERP, CRM, PIM, payment, shipping, marketplace, analytics, and API-based integrations that connect Magento with the systems businesses rely on every day.',
'integrations' => array(
array(
'icon' => 'layers',
'title' => 'ERP Integration',
'copy' => 'Connect inventory, pricing, order flow, finance, and operational workflows with core business systems.',
),
array(
'icon' => 'users',
'title' => 'CRM Integration',
'copy' => 'Improve customer visibility, account handling, sales support, and cross-team workflow continuity.',
),
array(
'icon' => 'grid',
'title' => 'PIM Integration',
'copy' => 'Support cleaner product information flow, catalog consistency, and merchandising efficiency across systems.',
),
array(
'icon' => 'card',
'title' => 'Payment Gateway Integration',
'copy' => 'Implement dependable payment flows that support customer trust, business rules, and checkout performance.',
),
array(
'icon' => 'truck',
'title' => 'Shipping & Fulfillment Systems',
'copy' => 'Connect delivery, rate logic, fulfillment tools, and post-purchase workflows to reduce friction after checkout.',
),
array(
'icon' => 'globe',
'title' => 'Marketplace / Channel Integrations',
'copy' => 'Support multi-channel selling with stronger product, stock, order, and pricing synchronization across platforms.',
),
array(
'icon' => 'api',
'title' => 'Custom API Integrations',
'copy' => 'Create integration logic around real operational requirements when prebuilt connectors do not fit.',
),
array(
'icon' => 'chart',
'title' => 'Reporting & Analytics Connections',
'copy' => 'Support visibility, performance reporting, and business decision-making with stronger data flow and tracking.',
),
),
'b2bParagraphs' => array(
'Magento and Adobe Commerce are often chosen for more complex commerce requirements, especially when B2B logic, customer-specific pricing, quote processes, or advanced catalog structures are part of the operating model. We support those use cases through platform configuration, custom development, and more flexible operational logic.',
'That includes account-based experiences, bulk ordering, sales-assisted flows, product complexity, pricing rules, and catalog control that need more than a standard storefront setup.',
),
'b2bCards' => array(
array(
'title' => 'B2B Commerce Support',
'icon' => 'briefcase',
'description'=> 'Commerce features shaped around account structures, pricing complexity, approvals, and business buying behavior.',
'items' => array(
'Account-based experiences',
'Quote workflows',
'Bulk ordering',
'Customer-specific pricing',
'Sales rep or internal order support',
),
),
array(
'title' => 'Advanced Catalog Support',
'icon' => 'store',
'description'=> 'Catalog structures and merchandising logic built for scale, flexibility, and more complex product handling.',
'items' => array(
'Configurable and complex product structures',
'Category and merchandising flexibility',
'Pricing rules and promotional logic',
'Scalable catalog management',
),
),
),
'performanceParagraphs' => array(
'Magento performance optimization should support both customer-facing speed and the technical stability needed for larger commerce environments. We help improve storefront responsiveness, checkout flow, backend performance, and the system-level considerations that influence day-to-day usability.',
'That can include code refinement, caching considerations, database-aware improvements, mobile UX adjustments, and technical optimization work that supports better conversion and stronger platform scalability over time.',
),
'performanceChecklist' => array(
'Storefront speed optimization',
'Checkout experience refinement',
'Mobile performance improvements',
'Backend and database tuning',
'Scalability support',
'Conversion-supporting UX improvements',
),
'performanceCards' => array(
array(
'label' => 'Storefront',
'value' => 'Faster',
'copy' => 'Improve customer-facing page speed, browsing flow, and shopping responsiveness across devices.',
),
array(
'label' => 'Backend',
'value' => 'Stronger',
'copy' => 'Tune performance factors that influence admin usability, data handling, and day-to-day platform operation.',
),
array(
'label' => 'Checkout',
'value' => 'Cleaner',
'copy' => 'Reduce friction through more deliberate checkout refinement, trust cues, and user flow clarity.',
),
),
'migrationParagraphs' => array(
'We support migration to Magento and Adobe Commerce for businesses that need more flexibility, catalog capability, B2B logic, or integration depth than their current platform provides. We also support older Magento version upgrades, modernization work, and more stable post-launch platform care.',
'That can include replatforming from Shopify, WooCommerce, legacy eCommerce systems, or older Magento versions while balancing business continuity, technical cleanup, and the opportunity to improve the storefront and operations model at the same time.',
),
'migrationHighlights' => array(
'Replatforming to Magento',
'Magento version upgrades',
'Ongoing maintenance and support',
'Feature enhancements',
'Technical issue resolution',
'Long-term platform care',
),
'migrationCards' => array(
array(
'icon' => 'swap',
'title' => 'Migration from Shopify',
'copy' => 'Support platform transitions when commerce complexity, integrations, or workflow needs outgrow a simpler setup.',
),
array(
'icon' => 'store',
'title' => 'Migration from WooCommerce',
'copy' => 'Move toward a more scalable commerce foundation for catalogs, pricing logic, and operational flexibility.',
),
array(
'icon' => 'database',
'title' => 'Legacy eCommerce systems',
'copy' => 'Modernize older commerce environments and restructure the platform around current business priorities.',
),
array(
'icon' => 'upgrade',
'title' => 'Older Magento versions',
'copy' => 'Upgrade and modernize existing Magento builds while addressing maintainability and performance concerns.',
),
),
'caseStudies' => array(
array(
'title' => 'Adobe Commerce B2B Portal Build for an Industrial Supplier',
'platform' => 'Magento / Adobe Commerce',
'industry' => 'Manufacturing',
'service' => 'B2B Portal',
'challenge'=> 'The supplier needed customer-specific pricing, quote support, and stronger operational visibility across a more complex buying model.',
'solution' => 'We shaped an Adobe Commerce delivery model around B2B workflows, account-based experiences, and better integration planning.',
'outcome' => 'The business gained a more scalable commerce environment for B2B growth, customer self-service, and internal efficiency.',
),
array(
'title' => 'Magento Performance and Checkout Optimization Project',
'platform' => 'Magento / Adobe Commerce',
'industry' => 'Retail',
'service' => 'Optimization',
'challenge'=> 'The store struggled with performance bottlenecks, friction across purchase flow, and weaker mobile shopping experience.',
'solution' => 'We focused on performance improvements, checkout refinement, and UX updates that supported a cleaner path to purchase.',
'outcome' => 'The platform became easier to shop, easier to operate, and better positioned for ongoing commercial improvement.',
),
array(
'title' => 'Complex Catalog and Integration Implementation',
'platform' => 'Magento / Adobe Commerce',
'industry' => 'Distribution',
'service' => 'Integration Build',
'challenge'=> 'The merchant needed more flexible catalog handling and stronger connections between commerce, pricing, and backend systems.',
'solution' => 'We delivered Magento customization and integration planning designed around product complexity and operational workflow needs.',
'outcome' => 'The new setup created a stronger commerce backbone for complex catalog management and future platform scale.',
),
),
'ctaTitle' => 'Looking for Magento Development Services?',
'ctaText' => 'Discuss Magento builds, Adobe Commerce projects, custom modules, integrations, B2B requirements, performance improvements, migration plans, or long-term support needs with a team that understands complex commerce delivery.',
'ctaHighlights' => array(
'Magento and Adobe Commerce development aligned to complex business workflows',
'Custom Magento module development, integrations, and B2B support',
'Performance optimization, migration, upgrades, and long-term maintenance',
),
'ctaSteps' => array(
array(
'title' => 'Share your Magento goals',
'copy' => 'Tell us about your platform, commerce workflows, integrations, catalog complexity, and any B2B or scaling needs.',
),
array(
'title' => 'Review the right Adobe Commerce path',
'copy' => 'We help map the architecture direction, platform scope, integration requirements, and the right delivery model for the project.',
),
array(
'title' => 'Move into planning',
'copy' => 'Leave with clearer next steps for implementation, optimization, migration, or long-term Magento support.',
),
),
);
return $data;
}
}
if ( ! function_exists( 'ethnic_magento_development_page_heading' ) ) {
function ethnic_magento_development_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-magento-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-magento-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-magento-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-magento-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_magento_development_page_icon' ) ) {
function ethnic_magento_development_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'module':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="6" height="6" rx="1.2" />
<rect x="14" y="4" width="6" height="6" rx="1.2" />
<rect x="9" y="14" width="6" height="6" rx="1.2" />
<path d="M10 7h4" />
<path d="M12 10v4" />
</svg>
<?php
break;
case 'layers':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 4l8 4.2-8 4.2-8-4.2z" />
<path d="M4 12l8 4.2 8-4.2" />
<path d="M4 15.8l8 4.2 8-4.2" />
</svg>
<?php
break;
case 'workflow':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="5" width="6.4" height="4.8" rx="1.1" />
<rect x="13.8" y="5" width="6.4" height="4.8" rx="1.1" />
<rect x="8.8" y="14.2" width="6.4" height="4.8" rx="1.1" />
<path d="M10.2 7.4h3.6" />
<path d="M12 9.8v4.4" />
</svg>
<?php
break;
case 'growth':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 18.5h15" />
<path d="M7 15.2l3-3 3 3 4.5-5" />
<path d="M14.7 10.2h3.8V14" />
</svg>
<?php
break;
case 'store':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.2 9.2h15.6l-1.2 10.2H5.4L4.2 9.2z" />
<path d="M6.2 9.2 7.5 5h9l1.3 4.2" />
<path d="M9.2 13h5.6" />
</svg>
<?php
break;
case 'briefcase':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="7.2" width="16.4" height="11" rx="2" />
<path d="M9 7.2V5.8A1.8 1.8 0 0 1 10.8 4h2.4A1.8 1.8 0 0 1 15 5.8v1.4" />
<path d="M3.8 11.5h16.4" />
</svg>
<?php
break;
case 'spark':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3.5l1.8 4.7 4.7 1.8-4.7 1.8-1.8 4.7-1.8-4.7-4.7-1.8 4.7-1.8z" />
<path d="M18.3 15.2l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9z" />
</svg>
<?php
break;
case 'shield':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3.5 18 6v5.2c0 4-2.4 7.6-6 9.4-3.6-1.8-6-5.4-6-9.4V6L12 3.5z" />
<path d="M9.2 12.2l1.9 1.9 3.7-3.8" />
</svg>
<?php
break;
case 'cart':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 5h2l1.6 8h8.7l1.7-5.2H8.7" />
<circle cx="10.2" cy="18.2" r="1.4" />
<circle cx="16.4" cy="18.2" r="1.4" />
</svg>
<?php
break;
case 'dashboard':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="4.5" width="16.4" height="15" rx="2" />
<path d="M3.8 9.2h16.4" />
<path d="M8.8 13.2h2.4" />
<path d="M13.4 13.2h2.4" />
<path d="M8.8 16.4h7" />
</svg>
<?php
break;
case 'grid':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="6" height="6" rx="1.2" />
<rect x="14" y="4" width="6" height="6" rx="1.2" />
<rect x="4" y="14" width="6" height="6" rx="1.2" />
<rect x="14" y="14" width="6" height="6" rx="1.2" />
</svg>
<?php
break;
case 'truck':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M3.5 7.8h10.8v7.1H3.5z" />
<path d="M14.3 10h3.3l2.9 2.9v2H14.3z" />
<circle cx="7.5" cy="17.2" r="1.5" />
<circle cx="17.5" cy="17.2" r="1.5" />
</svg>
<?php
break;
case 'api':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M8.2 8.2 5 12l3.2 3.8" />
<path d="M15.8 8.2 19 12l-3.2 3.8" />
<path d="M13.2 6.5 10.8 17.5" />
</svg>
<?php
break;
case 'upgrade':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 4.2a7.8 7.8 0 1 1-7.1 4.5" />
<path d="M4.8 5.5v4h4" />
<path d="M12 8.5v3.7l2.6 1.6" />
</svg>
<?php
break;
case 'users':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="8" cy="9" r="2.4" />
<circle cx="16.4" cy="9.4" r="2" />
<path d="M4.5 18c.6-2.2 2.3-3.5 4.7-3.5s4.1 1.3 4.7 3.5" />
<path d="M13.4 17.6c.4-1.7 1.8-2.7 3.7-2.7 1.4 0 2.6.6 3.4 1.8" />
</svg>
<?php
break;
case 'card':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.5" y="5.5" width="17" height="13" rx="2" />
<path d="M3.5 10h17" />
<path d="M7.5 14.2h3.4" />
</svg>
<?php
break;
case 'globe':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="8.5" />
<path d="M3.8 12h16.4" />
<path d="M12 3.5a13.5 13.5 0 0 1 0 17" />
<path d="M12 3.5a13.5 13.5 0 0 0 0 17" />
</svg>
<?php
break;
case 'chart':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 18.5h15" />
<rect x="6.2" y="11" width="2.6" height="7.5" rx=".8" />
<rect x="10.8" y="8" width="2.6" height="10.5" rx=".8" />
<rect x="15.4" y="5.2" width="2.6" height="13.3" rx=".8" />
</svg>
<?php
break;
case 'swap':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 7.2h10.2" />
<path d="m14.8 4.8 2.4 2.4-2.4 2.4" />
<path d="M17 16.8H6.8" />
<path d="m9.2 14.4-2.4 2.4 2.4 2.4" />
</svg>
<?php
break;
case 'database':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<ellipse cx="12" cy="6.6" rx="6.6" ry="2.8" />
<path d="M5.4 6.6v10.8c0 1.6 3 2.8 6.6 2.8s6.6-1.2 6.6-2.8V6.6" />
<path d="M5.4 12c0 1.6 3 2.8 6.6 2.8s6.6-1.2 6.6-2.8" />
</svg>
<?php
break;
case 'check':
default:
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="8.5" />
<path d="M8.6 12.3 10.8 14.5 15.4 9.9" />
</svg>
<?php
break;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_magento_development_page_render' ) ) {
function ethnic_magento_development_page_render() {
$data = ethnic_magento_development_page_data();
$consultation_url = ethnic_magento_development_page_contact_url(
array(
'intent' => 'consultation',
'service' => 'magento-development',
)
);
$team_url = ethnic_magento_development_page_contact_url(
array(
'intent' => 'team',
'service' => 'magento-development',
)
);
$quote_url = ethnic_magento_development_page_contact_url(
array(
'intent' => 'quote',
'service' => 'magento-development',
)
);
$case_studies_url = ethnic_magento_development_page_case_studies_url();
$case_studies = function_exists( 'ethnic_case_studies_service_page_cards' )
? ethnic_case_studies_service_page_cards(
array(
'page_id' => get_queried_object_id(),
'limit' => 3,
'filters' => array(
'service' => array( 'ecommerce-development' ),
'platform' => array( 'magento', 'adobe-commerce' ),
'category' => array( 'magento' ),
),
'fallback_items' => $data['caseStudies'],
)
)
: (array) $data['caseStudies'];
$case_studies_anchor = ! empty( $case_studies ) ? '#case-studies' : $case_studies_url;
ob_start();
?>
<div class="ethnic-magento-page">
<section class="ethnic-magento-section ethnic-magento-section--hero">
<div class="ethnic-magento-shell">
<div class="ethnic-magento-hero">
<div class="ethnic-magento-hero__copy">
<p class="ethnic-magento-kicker">Enterprise Commerce</p>
<h1 class="ethnic-magento-hero__title"><?php echo esc_html( $data['heroTitle'] ); ?></h1>
<p class="ethnic-magento-hero__lead"><?php echo esc_html( $data['heroText'] ); ?></p>
<div class="ethnic-magento-actions">
<a class="ethnic-magento-button ethnic-magento-button--primary" href="<?php echo esc_url( $consultation_url ); ?>">Book a Free Consultation</a>
<a class="ethnic-magento-button ethnic-magento-button--secondary" href="<?php echo esc_url( $case_studies_anchor ); ?>">View Case Studies</a>
</div>
<ul class="ethnic-magento-hero__points" aria-label="Magento service highlights">
<?php foreach ( (array) $data['heroPoints'] as $point ) : ?>
<li><?php echo esc_html( $point ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-magento-hero__visual">
<div class="ethnic-magento-visual">
<div class="ethnic-magento-visual__window">
<div class="ethnic-magento-visual__window-bar">
<span></span>
<span></span>
<span></span>
</div>
<div class="ethnic-magento-visual__window-body">
<div class="ethnic-magento-visual__toolbar">
<span>Catalog</span>
<span>Pricing</span>
<span>Checkout</span>
</div>
<div class="ethnic-magento-visual__feature">
<div class="ethnic-magento-visual__feature-shot"></div>
<div class="ethnic-magento-visual__feature-copy">
<span class="ethnic-magento-visual__eyebrow">Storefront mockup</span>
<strong>Magento storefront and checkout UI built for performance, flexibility, and complex product structures.</strong>
<p>Merchandising control, trust cues, product logic, and configurable buying journeys shaped for more demanding commerce environments.</p>
<div class="ethnic-magento-visual__tags">
<span>Complex catalogs</span>
<span>B2B logic</span>
<span>Integration-ready</span>
</div>
</div>
</div>
<div class="ethnic-magento-visual__catalog">
<div class="ethnic-magento-visual__catalog-card">
<small>Catalog management</small>
<strong>Configurable products, pricing, and merchandising flexibility</strong>
</div>
<div class="ethnic-magento-visual__catalog-card">
<small>Checkout support</small>
<strong>Payment, shipping, tax, and workflow refinement</strong>
</div>
</div>
</div>
</div>
<div class="ethnic-magento-visual__floating ethnic-magento-visual__floating--admin">
<p class="ethnic-magento-visual__floating-label">Admin panel</p>
<strong>Commerce operations and workflow control</strong>
<div class="ethnic-magento-visual__metric-grid">
<div>
<small>Catalog</small>
<strong>Advanced</strong>
</div>
<div>
<small>Workflows</small>
<strong>Custom</strong>
</div>
</div>
<div class="ethnic-magento-visual__progress">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="ethnic-magento-visual__floating ethnic-magento-visual__floating--ops">
<p class="ethnic-magento-visual__floating-label">Commerce dashboard</p>
<strong>Catalog, integrations, and B2B support built into the platform model</strong>
<ul>
<li>Custom modules</li>
<li>Operational integrations</li>
<li>Enterprise-ready support</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-magento-section" id="overview">
<div class="ethnic-magento-shell">
<?php echo ethnic_magento_development_page_heading( 'Service Overview', 'Magento development services for complex commerce delivery.', 'We support planning, implementation, custom development, integration work, performance improvements, and long-term Adobe Commerce growth through a delivery model designed for flexibility and scale.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-magento-overview">
<div class="ethnic-magento-prose">
<?php foreach ( (array) $data['overviewParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-magento-card-grid ethnic-magento-card-grid--overview">
<?php foreach ( (array) $data['overviewFeatures'] as $feature ) : ?>
<article class="ethnic-magento-card">
<div class="ethnic-magento-card__icon">
<?php echo ethnic_magento_development_page_icon( $feature['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $feature['title'] ); ?></h3>
<p><?php echo esc_html( $feature['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-magento-section ethnic-magento-section--soft" id="expertise">
<div class="ethnic-magento-shell">
<div class="ethnic-magento-split">
<div class="ethnic-magento-split__content">
<?php echo ethnic_magento_development_page_heading( 'Magento / Adobe Commerce Expertise', 'Platform expertise across Magento Open Source and Adobe Commerce.', 'We support storefront delivery, backend workflows, catalog complexity, checkout logic, and business-specific commerce implementation across both growth-stage and enterprise-oriented Magento environments.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['expertiseParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-magento-split__visual">
<div class="ethnic-magento-panel">
<p class="ethnic-magento-panel__eyebrow">Platform Capability</p>
<div class="ethnic-magento-panel__grid">
<?php foreach ( (array) $data['expertiseCards'] as $card ) : ?>
<article class="ethnic-magento-panel__card">
<div class="ethnic-magento-card__icon">
<?php echo ethnic_magento_development_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-magento-section" id="module-development">
<div class="ethnic-magento-shell">
<?php echo ethnic_magento_development_page_heading( 'Custom Module Development', 'Custom Magento module development for business-specific commerce requirements.', 'We extend Magento beyond out-of-the-box behavior when checkout logic, admin workflows, catalog rules, order handling, or operational needs require more deliberate implementation.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-magento-prose ethnic-magento-prose--narrow">
<?php foreach ( (array) $data['moduleParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-magento-card-grid ethnic-magento-card-grid--modules">
<?php foreach ( (array) $data['moduleAreas'] as $area ) : ?>
<article class="ethnic-magento-card ethnic-magento-card--module">
<div class="ethnic-magento-card__icon">
<?php echo ethnic_magento_development_page_icon( $area['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $area['title'] ); ?></h3>
<p><?php echo esc_html( $area['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-magento-section ethnic-magento-section--soft" id="integrations">
<div class="ethnic-magento-shell">
<?php echo ethnic_magento_development_page_heading( 'Integrations', 'Magento integrations designed around real operational requirements.', $data['integrationsIntro'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-magento-card-grid ethnic-magento-card-grid--integrations">
<?php foreach ( (array) $data['integrations'] as $integration ) : ?>
<article class="ethnic-magento-card ethnic-magento-card--integration">
<div class="ethnic-magento-card__icon">
<?php echo ethnic_magento_development_page_icon( $integration['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $integration['title'] ); ?></h3>
<p><?php echo esc_html( $integration['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-magento-section" id="b2b-catalog">
<div class="ethnic-magento-shell">
<div class="ethnic-magento-b2b">
<div class="ethnic-magento-b2b__copy">
<?php echo ethnic_magento_development_page_heading( 'B2B and Advanced Catalog Support', 'Complex commerce requirements supported through Magento flexibility.', 'We help businesses use Magento and Adobe Commerce for B2B workflows, account-based logic, customer-specific pricing, and advanced product structures that need more control than simpler platforms typically allow.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['b2bParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-magento-b2b__grid">
<?php foreach ( (array) $data['b2bCards'] as $card ) : ?>
<article class="ethnic-magento-card ethnic-magento-card--b2b">
<div class="ethnic-magento-card__icon">
<?php echo ethnic_magento_development_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['description'] ); ?></p>
<ul class="ethnic-magento-checklist">
<?php foreach ( (array) $card['items'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-magento-section ethnic-magento-section--soft" id="performance">
<div class="ethnic-magento-shell">
<div class="ethnic-magento-performance">
<div class="ethnic-magento-performance__copy">
<?php echo ethnic_magento_development_page_heading( 'Performance Optimization', 'Magento performance work that supports speed, stability, and conversion outcomes.', 'We improve storefront speed, backend behavior, checkout flow, and technical efficiency so Magento can better support both user experience and operational scale.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['performanceParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
<ul class="ethnic-magento-checklist">
<?php foreach ( (array) $data['performanceChecklist'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-magento-performance__visual">
<div class="ethnic-magento-dashboard">
<p class="ethnic-magento-dashboard__eyebrow">Optimization Blueprint</p>
<div class="ethnic-magento-dashboard__cards">
<?php foreach ( (array) $data['performanceCards'] as $card ) : ?>
<div class="ethnic-magento-dashboard__card">
<small><?php echo esc_html( $card['label'] ); ?></small>
<strong><?php echo esc_html( $card['value'] ); ?></strong>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</div>
<?php endforeach; ?>
</div>
<div class="ethnic-magento-dashboard__journey">
<div class="ethnic-magento-dashboard__step">
<span>01</span>
<div>
<strong>Speed up storefront experience</strong>
<p>Improve product browsing, page response, and the performance factors that shape customer perception.</p>
</div>
</div>
<div class="ethnic-magento-dashboard__step">
<span>02</span>
<div>
<strong>Stabilize technical flow</strong>
<p>Refine backend behavior, performance bottlenecks, and the infrastructure-aware concerns that affect daily operation.</p>
</div>
</div>
<div class="ethnic-magento-dashboard__step">
<span>03</span>
<div>
<strong>Support better conversion</strong>
<p>Combine technical improvements with UX and checkout refinements that reduce friction for buyers.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-magento-section" id="migration-maintenance">
<div class="ethnic-magento-shell">
<div class="ethnic-magento-split ethnic-magento-split--migration">
<div class="ethnic-magento-split__content">
<?php echo ethnic_magento_development_page_heading( 'Migration / Maintenance', 'Migration, upgrades, and long-term Magento platform care.', 'We support replatforming to Magento, Adobe Commerce modernization, version upgrades, feature enhancements, and long-term maintenance for commerce operations that need dependable technical continuity.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['migrationParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
<ul class="ethnic-magento-checklist">
<?php foreach ( (array) $data['migrationHighlights'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-magento-split__visual">
<div class="ethnic-magento-card-grid ethnic-magento-card-grid--migration">
<?php foreach ( (array) $data['migrationCards'] as $card ) : ?>
<article class="ethnic-magento-card ethnic-magento-card--migration">
<div class="ethnic-magento-card__icon">
<?php echo ethnic_magento_development_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<?php if ( ! empty( $case_studies ) ) : ?>
<section class="ethnic-magento-section ethnic-magento-section--contrast" id="case-studies">
<div class="ethnic-magento-shell">
<?php echo ethnic_magento_development_page_heading( 'Case Studies', 'Magento and Adobe Commerce delivery examples for complex commerce projects.', 'These case study previews reflect the type of B2B, optimization, integration, and migration work Magento is often chosen to support.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo ethnic_shared_case_study_showcase_render( $case_studies, array( 'carousel_label' => 'Magento case studies showcase' ) ); ?>
</div>
</section>
<?php endif; ?>
<section class="ethnic-magento-section ethnic-magento-section--cta" id="cta">
<div class="ethnic-magento-shell">
<div class="ethnic-magento-cta">
<div class="ethnic-magento-cta__copy">
<div class="ethnic-magento-cta__intro">
<p class="ethnic-magento-kicker ethnic-magento-kicker--light">Ready to Talk</p>
<p class="ethnic-magento-cta__note">Planning for Magento builds, Adobe Commerce projects, custom modules, integrations, and long-term support.</p>
</div>
<h2><?php echo esc_html( $data['ctaTitle'] ); ?></h2>
<p class="ethnic-magento-cta__lead"><?php echo esc_html( $data['ctaText'] ); ?></p>
<div class="ethnic-magento-actions">
<a class="ethnic-magento-button ethnic-magento-button--primary" href="<?php echo esc_url( $team_url ); ?>">Talk to Our Team</a>
<a class="ethnic-magento-button ethnic-magento-button--secondary" href="<?php echo esc_url( $quote_url ); ?>">Get a Free Quote</a>
</div>
<ul class="ethnic-magento-cta__highlights" aria-label="Magento CTA highlights">
<?php foreach ( (array) $data['ctaHighlights'] as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<aside class="ethnic-magento-cta__panel" aria-label="What happens next">
<div class="ethnic-magento-cta__panel-header">
<p class="ethnic-magento-cta__panel-eyebrow">What Happens Next</p>
<h3 class="ethnic-magento-cta__panel-title">Plan the right Magento delivery model</h3>
</div>
<ol class="ethnic-magento-cta__steps">
<?php foreach ( (array) $data['ctaSteps'] as $index => $step ) : ?>
<li class="ethnic-magento-cta__step">
<span class="ethnic-magento-cta__step-number"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<div class="ethnic-magento-cta__step-copy">
<strong><?php echo esc_html( $step['title'] ); ?></strong>
<p><?php echo esc_html( $step['copy'] ); ?></p>
</div>
</li>
<?php endforeach; ?>
</ol>
<div class="ethnic-magento-cta__panel-note"><strong>Focus:</strong> architecture, custom development scope, integration planning, performance priorities, and long-term platform care.</div>
</aside>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_magento_development_page_styles' ) ) {
function ethnic_magento_development_page_styles() {
return <<<'CSS'
body.ethnic-magento-development-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-magento-development-target .fullwidth-content > .ethnic-magento-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
body.ethnic-magento-development-target .block-content > .container {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.ethnic-magento-development-target .block-content > .container > .panel.row {
margin-left: 0;
margin-right: 0;
}
body.ethnic-magento-development-target .block-content > .container > .panel > .panel-center {
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.ethnic-magento-development-target .entry-content.post-content {
margin-bottom: 0;
}
.ethnic-magento-page {
--ethnic-magento-text: #0f172a;
--ethnic-magento-muted: #5d6d83;
--ethnic-magento-border: rgba(15, 23, 42, 0.09);
--ethnic-magento-surface-strong: #ffffff;
--ethnic-magento-accent: #f97316;
--ethnic-magento-accent-dark: #9a3412;
--ethnic-magento-blue: #2f6bff;
--ethnic-magento-lime: #e7ff89;
--ethnic-magento-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
color: var(--ethnic-magento-text);
overflow-x: clip;
}
.ethnic-magento-page,
.ethnic-magento-page *,
.ethnic-magento-page *::before,
.ethnic-magento-page *::after {
box-sizing: border-box;
}
.ethnic-magento-shell {
width: min(1240px, calc(100% - (var(--ethnic-magento-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-magento-section + .ethnic-magento-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-magento-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-magento-section--contrast {
padding: clamp(42px, 5vw, 58px) 0;
border-radius: 36px;
background: linear-gradient(180deg, rgba(10, 24, 45, 0.98), rgba(20, 36, 61, 0.98));
}
.ethnic-magento-page p,
.ethnic-magento-page li {
color: var(--ethnic-magento-muted);
font-size: 16px;
line-height: 1.78;
}
.ethnic-magento-kicker,
.ethnic-magento-heading__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
min-height: 34px;
margin: 0 0 16px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.ethnic-magento-kicker::before,
.ethnic-magento-heading__eyebrow::before,
.ethnic-magento-cta__panel-eyebrow::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.ethnic-magento-kicker--light,
.ethnic-magento-heading__eyebrow {
background: rgba(249, 115, 22, 0.1);
border-color: rgba(249, 115, 22, 0.16);
color: var(--ethnic-magento-accent) !important;
-webkit-text-fill-color: var(--ethnic-magento-accent);
}
.ethnic-magento-heading {
max-width: 820px;
margin-bottom: clamp(28px, 4vw, 40px);
}
.ethnic-magento-heading__title,
.ethnic-magento-hero__title,
.ethnic-magento-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-magento-heading__title,
.ethnic-magento-cta h2 {
color: var(--ethnic-magento-text);
font-size: clamp(32px, 3vw, 44px);
line-height: 1.06;
}
.ethnic-magento-heading__copy,
.ethnic-magento-prose p,
.ethnic-magento-card p,
.ethnic-magento-case-card p,
.ethnic-magento-performance__copy p,
.ethnic-magento-cta__lead,
.ethnic-magento-cta__step-copy p {
margin: 18px 0 0;
}
.ethnic-magento-prose--narrow {
max-width: 76ch;
}
.ethnic-magento-section--hero {
position: relative;
background:
radial-gradient(circle at 16% 18%, rgba(249, 115, 22, 0.2), transparent 24%),
radial-gradient(circle at 82% 16%, rgba(47, 107, 255, 0.16), transparent 20%),
linear-gradient(180deg, #091328, #10263f 54%, #15324f);
}
.ethnic-magento-section--hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 80%);
pointer-events: none;
}
.ethnic-magento-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
gap: clamp(32px, 5vw, 68px);
align-items: center;
min-height: clamp(600px, 72vw, 760px);
padding: clamp(82px, 8vw, 128px) 0;
}
.ethnic-magento-hero__copy,
.ethnic-magento-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-magento-hero__title {
max-width: 8ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(44px, 5.2vw, 72px);
line-height: 0.98;
}
.ethnic-magento-hero__lead {
max-width: 61ch;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(17px, 1.45vw, 20px);
line-height: 1.82;
}
.ethnic-magento-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-magento-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 14px 24px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ethnic-magento-button:hover,
.ethnic-magento-button:focus-visible {
transform: translateY(-1px);
text-decoration: none;
}
.ethnic-magento-button--primary {
background: var(--ethnic-magento-lime);
color: #0b1730 !important;
box-shadow: 0 20px 44px rgba(5, 14, 28, 0.24);
}
.ethnic-magento-button--primary:hover,
.ethnic-magento-button--primary:focus-visible {
background: #f1ffb7;
color: #0b1730 !important;
box-shadow: 0 24px 50px rgba(5, 14, 28, 0.28);
}
.ethnic-magento-button--secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
color: #ffffff !important;
}
.ethnic-magento-button--ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: #ffffff !important;
}
.ethnic-magento-hero__points,
.ethnic-magento-checklist,
.ethnic-magento-cta__highlights {
display: grid;
gap: 12px;
padding: 0;
margin: 26px 0 0;
list-style: none;
}
.ethnic-magento-hero__points {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 860px;
}
.ethnic-magento-hero__points li,
.ethnic-magento-checklist li,
.ethnic-magento-cta__highlights li {
position: relative;
padding-left: 22px;
}
.ethnic-magento-hero__points li {
padding: 16px 18px 16px 42px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
font-weight: 600;
line-height: 1.5;
}
.ethnic-magento-hero__points li::before,
.ethnic-magento-checklist li::before,
.ethnic-magento-cta__highlights li::before {
content: "";
position: absolute;
left: 0;
top: 0.38em;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ethnic-magento-lime);
box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.16);
}
.ethnic-magento-hero__points li::before {
left: 18px;
top: 20px;
}
.ethnic-magento-visual {
position: relative;
min-height: 560px;
}
.ethnic-magento-visual__window {
position: relative;
padding: 22px;
border-radius: 34px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
rgba(9, 20, 38, 0.76);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 30px 80px rgba(5, 14, 28, 0.32);
backdrop-filter: blur(18px);
}
.ethnic-magento-visual__window-bar {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.ethnic-magento-visual__window-bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.52);
}
.ethnic-magento-visual__window-body {
padding: 18px;
border-radius: 26px;
background:
radial-gradient(circle at top right, rgba(249, 115, 22, 0.14), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.96));
border: 1px solid rgba(255, 255, 255, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.ethnic-magento-visual__toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.ethnic-magento-visual__toolbar span,
.ethnic-magento-visual__tags span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(249, 115, 22, 0.1);
color: var(--ethnic-magento-accent-dark);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.ethnic-magento-visual__feature {
display: grid;
grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1fr);
gap: 18px;
padding: 18px;
border-radius: 24px;
background: var(--ethnic-magento-surface-strong);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.ethnic-magento-visual__feature-shot {
min-height: 188px;
border-radius: 20px;
background:
radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), transparent 22%),
linear-gradient(150deg, rgba(249, 115, 22, 0.18), rgba(47, 107, 255, 0.08)),
linear-gradient(180deg, #eff6ff, #ffe9dd);
position: relative;
overflow: hidden;
}
.ethnic-magento-visual__feature-shot::before,
.ethnic-magento-visual__feature-shot::after {
content: "";
position: absolute;
border-radius: 18px;
}
.ethnic-magento-visual__feature-shot::before {
inset: 16px;
background: linear-gradient(180deg, #ffffff, #fff2ea);
border: 1px solid rgba(249, 115, 22, 0.14);
}
.ethnic-magento-visual__feature-shot::after {
left: 34px;
right: 34px;
bottom: 24px;
height: 42px;
background: rgba(249, 115, 22, 0.14);
}
.ethnic-magento-visual__eyebrow,
.ethnic-magento-panel__eyebrow,
.ethnic-magento-dashboard__eyebrow,
.ethnic-magento-cta__note {
display: inline-flex;
color: rgba(15, 23, 42, 0.58);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-magento-visual__feature-copy strong,
.ethnic-magento-dashboard__step strong,
.ethnic-magento-cta__step-copy strong {
display: block;
margin: 0;
color: var(--ethnic-magento-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.ethnic-magento-visual__eyebrow {
margin-bottom: 8px;
color: var(--ethnic-magento-accent);
}
.ethnic-magento-visual__feature-copy p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.7;
}
.ethnic-magento-visual__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.ethnic-magento-visual__catalog {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.ethnic-magento-visual__catalog-card {
padding: 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}
.ethnic-magento-visual__catalog-card small,
.ethnic-magento-dashboard__card small,
.ethnic-magento-visual__metric-grid small {
display: block;
color: rgba(15, 23, 42, 0.54);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-magento-visual__catalog-card strong,
.ethnic-magento-visual__floating strong,
.ethnic-magento-dashboard__card strong {
display: block;
margin-top: 8px;
color: var(--ethnic-magento-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
line-height: 1.42;
}
.ethnic-magento-visual__catalog-card strong {
font-size: 16px;
}
.ethnic-magento-visual__floating {
position: absolute;
padding: 18px;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9)),
var(--ethnic-magento-surface-strong);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 20px 50px rgba(5, 14, 28, 0.16);
backdrop-filter: blur(16px);
}
.ethnic-magento-visual__floating-label {
display: inline-flex;
color: rgba(15, 23, 42, 0.58);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-magento-visual__floating strong {
font-size: 17px;
}
.ethnic-magento-visual__floating ul {
display: grid;
gap: 10px;
padding: 0;
margin: 14px 0 0;
list-style: none;
}
.ethnic-magento-visual__floating li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.6;
}
.ethnic-magento-visual__floating li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ethnic-magento-accent);
box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}
.ethnic-magento-visual__floating--admin {
left: -14px;
top: 58px;
width: min(260px, 100%);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
linear-gradient(180deg, #3a190d, #4b1e10);
border-color: rgba(255, 255, 255, 0.1);
}
.ethnic-magento-visual__floating--admin .ethnic-magento-visual__floating-label,
.ethnic-magento-visual__floating--admin strong,
.ethnic-magento-visual__floating--admin small {
color: #ffffff;
}
.ethnic-magento-visual__floating--ops {
right: -14px;
bottom: 22px;
width: min(320px, 100%);
}
.ethnic-magento-visual__metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.ethnic-magento-visual__metric-grid div {
padding: 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.ethnic-magento-visual__metric-grid strong {
font-size: 16px;
}
.ethnic-magento-visual__progress {
display: grid;
gap: 8px;
margin-top: 16px;
}
.ethnic-magento-visual__progress span {
display: block;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(231, 255, 137, 0.9), rgba(249, 115, 22, 0.9));
}
.ethnic-magento-visual__progress span:nth-child(2) {
width: 82%;
}
.ethnic-magento-visual__progress span:nth-child(3) {
width: 68%;
}
.ethnic-magento-overview,
.ethnic-magento-split,
.ethnic-magento-performance,
.ethnic-magento-b2b {
display: grid;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
gap: clamp(28px, 4vw, 48px);
align-items: start;
}
.ethnic-magento-card-grid {
display: grid;
gap: 20px;
}
.ethnic-magento-card-grid--overview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-magento-card,
.ethnic-magento-case-card,
.ethnic-magento-panel,
.ethnic-magento-dashboard,
.ethnic-magento-cta {
border-radius: 28px;
border: 1px solid var(--ethnic-magento-border);
box-shadow: var(--ethnic-magento-shadow);
}
.ethnic-magento-card,
.ethnic-magento-panel,
.ethnic-magento-dashboard {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96)),
var(--ethnic-magento-surface-strong);
}
.ethnic-magento-card {
padding: 24px;
}
.ethnic-magento-card__icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: rgba(249, 115, 22, 0.1);
color: var(--ethnic-magento-accent);
}
.ethnic-magento-card__icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-magento-card h3,
.ethnic-magento-case-card h3 {
margin: 18px 0 0;
color: var(--ethnic-magento-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.ethnic-magento-panel {
padding: 26px;
}
.ethnic-magento-panel__eyebrow,
.ethnic-magento-dashboard__eyebrow {
margin-bottom: 18px;
}
.ethnic-magento-panel__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ethnic-magento-panel__card {
padding: 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.ethnic-magento-panel__card h3 {
margin: 16px 0 0;
font-size: 18px;
}
.ethnic-magento-panel__card p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.68;
}
.ethnic-magento-card-grid--modules {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
}
.ethnic-magento-card-grid--integrations {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethnic-magento-b2b__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.ethnic-magento-card-grid--migration,
.ethnic-magento-card-grid--case-studies {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-magento-checklist li {
font-size: 14px;
font-weight: 600;
line-height: 1.62;
}
.ethnic-magento-checklist li::before,
.ethnic-magento-cta__highlights li::before {
background: var(--ethnic-magento-accent);
box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12);
}
.ethnic-magento-dashboard {
padding: 28px;
background:
radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.96));
}
.ethnic-magento-dashboard__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.ethnic-magento-dashboard__card {
padding: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}
.ethnic-magento-dashboard__card strong {
font-size: 24px;
line-height: 1;
}
.ethnic-magento-dashboard__card p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.65;
}
.ethnic-magento-dashboard__journey {
display: grid;
gap: 0;
margin-top: 20px;
}
.ethnic-magento-dashboard__step {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
padding: 18px 0;
}
.ethnic-magento-dashboard__step + .ethnic-magento-dashboard__step {
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.ethnic-magento-dashboard__step span {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(249, 115, 22, 0.1);
color: var(--ethnic-magento-accent);
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.ethnic-magento-dashboard__step p {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.7;
}
.ethnic-magento-section--contrast .ethnic-magento-heading__title,
.ethnic-magento-section--contrast .ethnic-magento-heading__copy,
.ethnic-magento-section--contrast .ethnic-magento-heading__eyebrow {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-magento-section--contrast .ethnic-magento-heading__copy {
opacity: 0.78;
}
.ethnic-magento-section--contrast .ethnic-magento-heading__eyebrow {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
.ethnic-magento-case-card {
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
padding: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 22px 60px rgba(5, 14, 28, 0.2);
}
.ethnic-magento-case-card h3,
.ethnic-magento-case-card p,
.ethnic-magento-case-card strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-magento-case-card h3 {
margin: 0;
font-size: clamp(24px, 1.9vw, 30px);
line-height: 1.16;
letter-spacing: -0.035em;
text-wrap: balance;
}
.ethnic-magento-case-card__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-magento-case-card__tags span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1;
}
.ethnic-magento-case-card__summary {
display: grid;
gap: 12px;
margin-top: 0;
}
.ethnic-magento-case-card__summary p {
margin: 0;
font-size: 15px;
line-height: 1.72;
color: rgba(255, 255, 255, 0.82) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.82);
}
.ethnic-magento-case-card__summary strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-magento-case-card .ethnic-magento-button--ghost {
align-self: flex-start;
margin-top: auto;
}
.ethnic-magento-section--cta {
padding-top: clamp(16px, 2vw, 24px);
}
.ethnic-magento-cta {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
gap: clamp(26px, 4vw, 54px);
align-items: stretch;
padding: clamp(34px, 4vw, 52px);
text-align: left;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 12% 18%, rgba(249, 115, 22, 0.16), transparent 25%),
radial-gradient(circle at 84% 12%, rgba(231, 255, 137, 0.28), transparent 20%),
radial-gradient(circle at 78% 72%, rgba(47, 107, 255, 0.08), transparent 24%),
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 1) 50%, rgba(238, 245, 255, 0.98));
border: 1px solid rgba(117, 144, 190, 0.2);
box-shadow:
0 26px 80px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.ethnic-magento-cta::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(249, 115, 22, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(249, 115, 22, 0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 76%);
pointer-events: none;
z-index: -1;
}
.ethnic-magento-cta__copy {
position: relative;
display: grid;
align-content: center;
}
.ethnic-magento-cta__intro {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
margin-bottom: 4px;
}
.ethnic-magento-cta .ethnic-magento-kicker--light {
margin-bottom: 0;
background: rgba(255, 255, 255, 0.92);
border-color: rgba(249, 115, 22, 0.16);
color: var(--ethnic-magento-accent-dark) !important;
-webkit-text-fill-color: var(--ethnic-magento-accent-dark);
box-shadow: 0 14px 36px rgba(249, 115, 22, 0.12);
}
.ethnic-magento-cta__note {
margin: 0;
max-width: 40ch;
}
.ethnic-magento-cta h2 {
max-width: 10ch;
font-size: clamp(36px, 4.5vw, 60px);
line-height: 0.98;
letter-spacing: -0.06em;
}
.ethnic-magento-cta__lead {
max-width: 58ch;
color: rgba(15, 23, 42, 0.72);
font-size: clamp(16px, 1.35vw, 18px);
line-height: 1.82;
}
.ethnic-magento-cta .ethnic-magento-actions {
gap: 16px;
margin-top: 30px;
}
.ethnic-magento-section--cta .ethnic-magento-button--secondary {
background: rgba(255, 255, 255, 0.74);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ethnic-magento-text) !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(14px);
}
.ethnic-magento-cta__highlights {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
gap: 14px;
}
.ethnic-magento-cta__highlights li {
display: flex;
align-items: flex-start;
min-height: 100%;
padding: 16px 18px 16px 40px;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 255, 0.76)),
rgba(255, 255, 255, 0.74);
border: 1px solid rgba(255, 255, 255, 0.72);
color: var(--ethnic-magento-text);
font-size: 14px;
font-weight: 600;
line-height: 1.55;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
backdrop-filter: blur(16px);
}
.ethnic-magento-cta__highlights li::before {
left: 18px;
top: 20px;
}
.ethnic-magento-cta__panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28px;
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
linear-gradient(180deg, #102240, #0f1d37 58%, #0b172e);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 30px 70px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ethnic-magento-cta__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at top right, rgba(249, 115, 22, 0.16), transparent 34%),
radial-gradient(circle at bottom left, rgba(231, 255, 137, 0.14), transparent 26%);
pointer-events: none;
}
.ethnic-magento-cta__panel-header {
position: relative;
z-index: 1;
display: grid;
gap: 10px;
margin-bottom: 10px;
}
.ethnic-magento-cta__panel-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.92) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.92);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-magento-cta__panel-eyebrow::before {
background: var(--ethnic-magento-lime);
box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.12);
}
.ethnic-magento-cta__panel-title {
margin: 0;
color: #f8fbff !important;
-webkit-text-fill-color: #f8fbff;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(22px, 2.3vw, 28px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
}
.ethnic-magento-cta__steps {
position: relative;
z-index: 1;
display: grid;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.ethnic-magento-cta__step {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
padding: 18px 0;
align-items: start;
}
.ethnic-magento-cta__step + .ethnic-magento-cta__step {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ethnic-magento-cta__step-number {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #ffffff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 16px 28px rgba(5, 14, 28, 0.18);
}
.ethnic-magento-cta__step-copy strong,
.ethnic-magento-cta__step-copy p {
color: #ffffff;
}
.ethnic-magento-cta__step-copy p {
max-width: none;
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.74);
font-size: 14px;
line-height: 1.7;
}
.ethnic-magento-cta__panel-note {
position: relative;
z-index: 1;
margin-top: 20px;
padding: 16px 18px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
font-weight: 600;
line-height: 1.6;
}
.ethnic-magento-cta__panel-note strong {
color: #ffffff;
}
@media (max-width: 1200px) {
.ethnic-magento-hero__points,
.ethnic-magento-cta__highlights,
.ethnic-magento-card-grid--integrations {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-magento-card-grid--modules,
.ethnic-magento-card-grid--case-studies {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.ethnic-magento-hero,
.ethnic-magento-overview,
.ethnic-magento-split,
.ethnic-magento-performance,
.ethnic-magento-b2b,
.ethnic-magento-cta {
grid-template-columns: 1fr;
}
.ethnic-magento-hero {
min-height: auto;
}
.ethnic-magento-hero__visual,
.ethnic-magento-performance__visual,
.ethnic-magento-cta__panel {
max-width: 760px;
}
}
@media (max-width: 767px) {
.ethnic-magento-page {
--ethnic-magento-shell-padding: 20px;
}
.ethnic-magento-section + .ethnic-magento-section {
margin-top: 58px;
}
.ethnic-magento-hero {
padding: 72px 0 68px;
}
.ethnic-magento-hero__title {
max-width: 100%;
font-size: clamp(36px, 10vw, 52px);
}
.ethnic-magento-heading__title,
.ethnic-magento-cta h2 {
font-size: clamp(28px, 8vw, 38px);
}
.ethnic-magento-button {
width: 100%;
}
.ethnic-magento-hero__points,
.ethnic-magento-card-grid--overview,
.ethnic-magento-panel__grid,
.ethnic-magento-card-grid--modules,
.ethnic-magento-card-grid--integrations,
.ethnic-magento-b2b__grid,
.ethnic-magento-dashboard__cards,
.ethnic-magento-card-grid--migration,
.ethnic-magento-card-grid--case-studies,
.ethnic-magento-visual__catalog,
.ethnic-magento-cta__highlights {
grid-template-columns: 1fr;
}
.ethnic-magento-card,
.ethnic-magento-panel,
.ethnic-magento-dashboard,
.ethnic-magento-case-card,
.ethnic-magento-cta,
.ethnic-magento-cta__panel {
border-radius: 24px;
}
.ethnic-magento-visual {
min-height: auto;
}
.ethnic-magento-visual__window {
padding: 18px;
}
.ethnic-magento-visual__window-body {
padding: 14px;
}
.ethnic-magento-visual__feature {
grid-template-columns: 1fr;
}
.ethnic-magento-visual__feature-shot {
min-height: 160px;
}
.ethnic-magento-visual__floating {
position: static;
width: 100%;
margin-top: 16px;
}
.ethnic-magento-section--contrast {
padding: 40px 0;
border-radius: 28px;
}
.ethnic-magento-cta__intro {
gap: 10px;
}
.ethnic-magento-cta__panel {
padding: 24px 22px;
}
.ethnic-magento-cta__step {
grid-template-columns: 44px 1fr;
gap: 14px;
}
.ethnic-magento-cta__step-number,
.ethnic-magento-dashboard__step span {
width: 44px;
height: 44px;
border-radius: 15px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_magento_development_page_body_class' ) ) {
function ethnic_magento_development_page_body_class( $classes ) {
if ( ethnic_magento_development_page_is_target() ) {
$classes[] = 'ethnic-magento-development-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_magento_development_page_body_class' );
}
if ( ! function_exists( 'ethnic_magento_development_page_print_head_assets' ) ) {
function ethnic_magento_development_page_print_head_assets() {
if ( ! ethnic_magento_development_page_is_target() ) {
return;
}
$data = ethnic_magento_development_page_data();
?>
<style id="ethnic-magento-development-page-inline-css" type="text/css">
<?php echo ethnic_magento_development_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<meta name="description" content="<?php echo esc_attr( $data['metaDescription'] ); ?>" />
<?php
}
add_action( 'wp_head', 'ethnic_magento_development_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_magento_development_page_document_title' ) ) {
function ethnic_magento_development_page_document_title( $title ) {
if ( ethnic_magento_development_page_is_target() ) {
$data = ethnic_magento_development_page_data();
return $data['metaTitle'];
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_magento_development_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_magento_development_page_replace_content' ) ) {
function ethnic_magento_development_page_replace_content( $content ) {
if ( ! ethnic_magento_development_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_magento_development_page_render();
}
add_filter( 'the_content', 'ethnic_magento_development_page_replace_content', 1000 );
}