File: /var/www/html/wp-content/mu-plugins/ethnic-headless-commerce-development-page.php
<?php
/**
* Plugin Name: Ethnic Headless Commerce Development Page
* Description: Creates and renders the Headless Commerce Development sub-service page under eCommerce Development Services.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_headless_commerce_page_parent_id' ) ) {
function ethnic_headless_commerce_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_headless_commerce_page_get_target_page' ) ) {
function ethnic_headless_commerce_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/headless-commerce-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'headless-commerce-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_headless_commerce_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_ensure_page' ) ) {
function ethnic_headless_commerce_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_headless_commerce_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'Headless Commerce Development',
'post_name' => 'headless-commerce-development',
'post_parent' => $parent_id,
'post_status' => 'publish',
'post_content' => '',
'comment_status' => 'closed',
'ping_status' => 'closed',
);
$page = get_page_by_path( 'services/ecommerce-development/headless-commerce-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'Headless Commerce 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( 'headless-commerce-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_headless_commerce_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_headless_commerce_page_is_target' ) ) {
function ethnic_headless_commerce_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_headless_commerce_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_headless_commerce_page_url' ) ) {
function ethnic_headless_commerce_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_contact_url' ) ) {
function ethnic_headless_commerce_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_headless_commerce_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_case_studies_url' ) ) {
function ethnic_headless_commerce_page_case_studies_url() {
return function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_headless_commerce_page_url( 'case-studies' );
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_data' ) ) {
function ethnic_headless_commerce_page_data() {
static $data = null;
if ( null !== $data ) {
return $data;
}
$data = array(
'metaTitle' => 'Headless Commerce Development Services | Modern Commerce Architecture & Frontend Flexibility',
'metaDescription' => 'Explore headless commerce development services for flexible storefronts, frontend/backend separation, performance-focused architecture, modern technology stacks, and scalable commerce growth.',
'heroTitle' => 'Headless Commerce Development',
'heroText' => 'We build flexible, high-performance commerce experiences through decoupled architecture, modern frontend delivery, and headless commerce strategy designed for brands that need more control over speed, UX, and long-term platform flexibility.',
'heroPoints' => array(
'Decoupled commerce architecture',
'Flexible frontend experiences',
'Performance, scalability, and integration readiness',
),
'overviewParagraphs' => array(
'Our headless commerce development services support growing brands, complex commerce operations, and businesses that need more frontend freedom than traditional theme-based platforms can easily provide. We help shape the right headless commerce architecture around customer experience goals, operational realities, content needs, and long-term digital growth.',
'That includes strategy, architecture planning, frontend implementation, backend integration, API-driven workflows, and post-launch optimization. Whether the goal is a faster storefront, richer brand experience, multi-channel flexibility, or more modern commerce delivery, the implementation is tailored to the way the business needs to operate.',
'From discovery and stack selection to launch and long-term refinement, we focus on performance, scalability, user experience, and operational flexibility so the storefront experience can evolve without forcing the backend commerce engine to carry presentation-layer limitations.',
),
'overviewFeatures' => array(
array(
'icon' => 'layers',
'title' => 'Flexible Commerce Architecture',
'copy' => 'Commerce architecture shaped around experience control, integration needs, and future platform evolution.',
),
array(
'icon' => 'layout',
'title' => 'Modern Frontend Experiences',
'copy' => 'Custom storefronts built for richer UX, stronger design control, and content-led commerce presentation.',
),
array(
'icon' => 'api',
'title' => 'API-Driven Integrations',
'copy' => 'Frontend, commerce backend, CMS, and business systems connected through structured API-based delivery.',
),
array(
'icon' => 'growth',
'title' => 'Long-Term Scalability',
'copy' => 'Technical decisions planned around maintainability, experimentation, performance, and future growth.',
),
),
'explainerParagraphs' => array(
'What headless commerce is, in simple terms, is a model where the storefront presentation layer is separated from the backend commerce engine. Instead of tying the visual customer experience directly to the platform theme layer, the frontend is developed independently and communicates with the commerce backend through APIs.',
'This gives businesses more freedom to create custom frontend experiences while still using dependable commerce functionality behind the scenes for catalog, product, checkout, customer, and order operations. It is often a strong fit for brands that need speed, customization, and multi-channel adaptability without giving up backend commerce power.',
),
'explainerCards' => array(
array(
'icon' => 'swap',
'title' => 'Decoupled storefront architecture',
'copy' => 'The experience layer is built separately from the platform that manages products, carts, and orders.',
),
array(
'icon' => 'database',
'title' => 'Backend commerce engine remains intact',
'copy' => 'Core commerce operations continue to run in the backend while the frontend is free to evolve independently.',
),
array(
'icon' => 'spark',
'title' => 'Frontend freedom for custom experiences',
'copy' => 'Design, content, and interaction patterns can be tailored far beyond standard template constraints.',
),
array(
'icon' => 'api',
'title' => 'API-driven communication between systems',
'copy' => 'Frontend, backend, CMS, and operational tools exchange data through defined API layers.',
),
),
'fitParagraphs' => array(
'Headless commerce becomes the right choice when a business needs more frontend flexibility than traditional storefront setups allow. That often includes businesses that need stronger content control, custom customer journeys, higher performance expectations, or a more distinctive digital experience.',
'It is also a practical fit when commerce needs to connect into broader digital ecosystems, support multiple channels or touchpoints, or scale into more complex experience requirements over time.',
),
'fitCards' => array(
array(
'icon' => 'layout',
'title' => 'Complex UX requirements',
'copy' => 'The storefront needs a more tailored interface, richer interactions, or a more differentiated buying journey.',
),
array(
'icon' => 'store',
'title' => 'Multi-channel commerce experiences',
'copy' => 'Commerce experiences need to stretch across web, content, campaigns, regional experiences, or additional touchpoints.',
),
array(
'icon' => 'layers',
'title' => 'Content-rich storefront needs',
'copy' => 'Brand storytelling, editorial content, and merchandising flexibility play a larger role in conversion and engagement.',
),
array(
'icon' => 'mobile',
'title' => 'Performance-sensitive journeys',
'copy' => 'Speed, responsiveness, and smoother browsing matter heavily for mobile users and conversion outcomes.',
),
array(
'icon' => 'growth',
'title' => 'Large-scale growth or customization needs',
'copy' => 'The business expects more complexity over time and needs an architecture that can adapt without constant rework.',
),
array(
'icon' => 'api',
'title' => 'Integration-heavy commerce operations',
'copy' => 'The storefront experience needs to connect cleanly into CMS, search, personalization, or broader digital systems.',
),
),
'fitNote' => 'Headless commerce is not necessary for every business. The right choice depends on goals, complexity, budget, internal team structure, integration needs, and the long-term roadmap.',
'separationParagraphs' => array(
'Frontend and backend separation gives teams more freedom to shape the customer experience without forcing every change through a tightly coupled storefront layer. The frontend can be designed and developed independently, while the backend continues handling products, carts, checkout logic, catalog structures, customer data, and order operations.',
'This architecture supports more flexibility across experience design, engineering workflows, and multi-touchpoint delivery. It can make it easier to innovate on the presentation layer while preserving commerce stability behind the scenes.',
),
'separationCards' => array(
array(
'icon' => 'layout',
'title' => 'Independent frontend development',
'copy' => 'Build the storefront experience with more design and engineering freedom around UX, content, and interaction patterns.',
),
array(
'icon' => 'database',
'title' => 'Backend commerce operations',
'copy' => 'Keep product, checkout, order, pricing, and catalog operations managed in the commerce backend.',
),
array(
'icon' => 'api',
'title' => 'API-based communication',
'copy' => 'Frontend and backend layers exchange structured data cleanly through REST or GraphQL APIs.',
),
array(
'icon' => 'store',
'title' => 'Flexibility across touchpoints',
'copy' => 'Support web, mobile, campaign experiences, and content-led journeys from a more adaptable architecture.',
),
array(
'icon' => 'spark',
'title' => 'Easier experience-layer innovation',
'copy' => 'Refine interfaces, experiment faster, and evolve the storefront without overhauling the full commerce engine.',
),
),
'performanceParagraphs' => array(
'Headless commerce performance benefits often come from having better control over how the storefront is built, rendered, and optimized. That can support faster browsing, improved page responsiveness, and a cleaner experience for product discovery, content engagement, and mobile shopping journeys.',
'It also gives teams more flexibility to shape SEO-friendly and conversion-focused experiences without depending entirely on the limitations of a traditional coupled theme layer. The goal is not unrealistic speed claims, but a more performance-aware architecture that supports better UX and scalable storefront delivery.',
),
'performanceChecklist' => array(
'Faster frontend delivery',
'Better control over user experience',
'Performance-focused storefront architecture',
'Improved mobile browsing experience',
'SEO and conversion support',
'Scalable presentation layer',
),
'performanceCards' => array(
array(
'label' => 'Storefront',
'value' => 'Faster',
'copy' => 'Frontend delivery tuned around speed, responsiveness, and smoother browsing behavior.',
),
array(
'label' => 'Experience',
'value' => 'Sharper',
'copy' => 'More control over interfaces, merchandising flow, and content-led commerce experiences.',
),
array(
'label' => 'Architecture',
'value' => 'Scalable',
'copy' => 'A presentation layer that can adapt as channels, integrations, and experience needs grow.',
),
),
'stackParagraphs' => array(
'The right headless commerce stack depends on business goals, internal team needs, performance targets, content requirements, integration complexity, and long-term maintainability. We help shape a practical stack rather than pushing a one-size-fits-all architecture.',
'That can include a modern frontend framework, a compatible commerce backend, API and data-layer decisions, content tooling, and deployment infrastructure designed around the way the business wants to operate and grow.',
'For Adobe Commerce and Magento ecosystems, that may also include GraphCommerce, ScandiPWA, Adobe PWA Studio, or Hyva-led storefront direction depending on whether the business needs a fully headless build, a PWA approach, or a lower-complexity frontend modernization path.',
),
'stackCards' => array(
array(
'icon' => 'layout',
'title' => 'Frontend',
'description' => 'Modern frontend frameworks used to shape fast, custom storefront experiences with stronger control over UX and rendering.',
'items' => array( 'Next.js', 'React', 'Vue', 'Nuxt' ),
),
array(
'icon' => 'store',
'title' => 'Commerce Backend',
'description' => 'Commerce engines selected based on catalog complexity, business workflows, and the type of operational flexibility required.',
'items' => array( 'Adobe Commerce', 'Shopify', 'BigCommerce', 'Custom Commerce Backend' ),
),
array(
'icon' => 'spark',
'title' => 'Adobe Commerce Frontend Options',
'description' => 'When Adobe Commerce or Magento is the backend, the frontend path can be shaped around full headless delivery, PWA capability, or a faster storefront modernization approach.',
'items' => array( 'GraphCommerce', 'ScandiPWA', 'Adobe PWA Studio', 'Hyva' ),
),
array(
'icon' => 'api',
'title' => 'APIs / Data Layer',
'description' => 'Data exchange and orchestration decisions that keep the frontend, backend, and surrounding systems connected cleanly.',
'items' => array( 'REST API', 'GraphQL', 'Middleware', 'Search / Data Services' ),
),
array(
'icon' => 'layers',
'title' => 'CMS / Content Layer',
'description' => 'Content workflows that support editorial control, campaign velocity, and content-rich storefront delivery.',
'items' => array( 'Headless CMS', 'Structured Content Models', 'Editorial Workflows', 'Composable Content Blocks' ),
),
array(
'icon' => 'shield',
'title' => 'DevOps / Hosting',
'description' => 'Deployment and infrastructure choices that support reliability, collaboration, and scalable storefront delivery.',
'items' => array( 'Vercel', 'AWS', 'Docker', 'CI/CD' ),
),
),
'caseStudies' => array(
array(
'title' => 'Headless Shopify Storefront Rebuild for a D2C Brand',
'platform' => 'Shopify Backend',
'industry' => 'D2C Retail',
'service' => 'Headless Rebuild',
'challenge' => 'The brand needed more control over storefront UX, speed, and content-led merchandising than the existing setup allowed.',
'solution' => 'We reshaped the storefront around a headless frontend with API-driven commerce delivery and cleaner experience architecture.',
'outcome' => 'The business gained a more flexible storefront foundation for design iteration, mobile performance, and growth-focused merchandising.',
),
array(
'title' => 'Adobe Commerce Headless Frontend for Multi-Region Delivery',
'platform' => 'Adobe Commerce',
'industry' => 'Enterprise Retail',
'service' => 'Frontend Implementation',
'challenge' => 'The commerce program needed stronger frontend control across regional experiences without losing backend operational depth.',
'solution' => 'We implemented a decoupled storefront layer designed around experience flexibility, API connectivity, and scalable frontend delivery.',
'outcome' => 'The result was a cleaner path to region-specific experience management with better performance control and future extensibility.',
),
array(
'title' => 'Content-Rich Headless Retail Platform',
'platform' => 'Custom Headless Stack',
'industry' => 'Lifestyle',
'service' => 'Architecture & UX',
'challenge' => 'The retailer needed commerce and storytelling to work together across editorial, merchandising, and conversion journeys.',
'solution' => 'We planned a headless architecture that connected commerce functionality with a more flexible content and frontend delivery model.',
'outcome' => 'The platform gave the team stronger control over experience design, campaign execution, and long-term storefront evolution.',
),
),
'ctaTitle' => 'Considering Headless Commerce for Your Business?',
'ctaText' => 'Discuss frontend flexibility, performance goals, modern commerce architecture, platform selection, integration complexity, or headless migration plans with a team that can help shape the right delivery model for your business.',
'ctaHighlights' => array(
'Headless commerce strategy, architecture, and stack selection',
'Frontend and backend separation with API-driven commerce delivery',
'Performance-focused storefronts built for long-term flexibility',
),
'ctaSteps' => array(
array(
'title' => 'Share your commerce goals',
'copy' => 'Tell us about your storefront needs, performance priorities, content requirements, integrations, and growth plans.',
),
array(
'title' => 'Assess the right headless fit',
'copy' => 'We help evaluate whether headless commerce makes sense and what architecture direction fits the business best.',
),
array(
'title' => 'Move into solution planning',
'copy' => 'Leave with clearer next steps for stack selection, implementation scope, migration planning, and long-term delivery support.',
),
),
);
return $data;
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_heading' ) ) {
function ethnic_headless_commerce_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-headless-commerce-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-headless-commerce-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-headless-commerce-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-headless-commerce-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_icon' ) ) {
function ethnic_headless_commerce_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
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 'layout':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="4.2" width="16.4" height="15.6" rx="2" />
<path d="M3.8 9.2h16.4" />
<path d="M10 9.2v10.6" />
</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 '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 '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 '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 '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 'mobile':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="7" y="2.8" width="10" height="18.4" rx="2.3" />
<path d="M10 6.2h4" />
<path d="M9.6 14.5l2.1-2.1 2.6 2.6 2-2" />
</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 'rocket':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M14.6 4.2c2.5.3 4.9 2.7 5.2 5.2l-4.3 4.3-5.2-5.2z" />
<path d="M10.3 8.5 5.7 9.7 4 14.3l3.8-.8" />
<path d="M13.7 16.2 14.5 20 19 18.3l1.3-4.6" />
<path d="M8.2 15.8 5.6 18.4" />
</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 'compass':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="8.5" />
<path d="M15.8 8.2 13.6 13.6 8.2 15.8l2.2-5.4z" />
</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_headless_commerce_page_render' ) ) {
function ethnic_headless_commerce_page_render() {
$data = ethnic_headless_commerce_page_data();
$consultation_url = ethnic_headless_commerce_page_contact_url(
array(
'intent' => 'consultation',
'service' => 'headless-commerce-development',
)
);
$team_url = ethnic_headless_commerce_page_contact_url(
array(
'intent' => 'team',
'service' => 'headless-commerce-development',
)
);
$quote_url = ethnic_headless_commerce_page_contact_url(
array(
'intent' => 'quote',
'service' => 'headless-commerce-development',
)
);
$case_studies_url = ethnic_headless_commerce_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', 'headless-commerce' ),
'platform' => array( 'headless-commerce' ),
'category' => array( 'headless-commerce' ),
),
'fallback_items' => $data['caseStudies'],
)
)
: (array) $data['caseStudies'];
ob_start();
?>
<div class="ethnic-headless-commerce-page">
<section class="ethnic-headless-commerce-section ethnic-headless-commerce-section--hero">
<div class="ethnic-headless-commerce-shell">
<div class="ethnic-headless-commerce-hero">
<div class="ethnic-headless-commerce-hero__copy">
<p class="ethnic-headless-commerce-kicker">Headless Commerce</p>
<h1 class="ethnic-headless-commerce-hero__title"><?php echo esc_html( $data['heroTitle'] ); ?></h1>
<p class="ethnic-headless-commerce-hero__lead"><?php echo esc_html( $data['heroText'] ); ?></p>
<div class="ethnic-headless-commerce-actions">
<a class="ethnic-headless-commerce-button ethnic-headless-commerce-button--primary" href="<?php echo esc_url( $consultation_url ); ?>">Book a Free Consultation</a>
<a class="ethnic-headless-commerce-button ethnic-headless-commerce-button--secondary" href="<?php echo esc_url( ! empty( $case_studies ) ? '#case-studies' : $case_studies_url ); ?>">View Case Studies</a>
</div>
<ul class="ethnic-headless-commerce-hero__points" aria-label="Headless commerce service highlights">
<?php foreach ( (array) $data['heroPoints'] as $point ) : ?>
<li><?php echo esc_html( $point ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-headless-commerce-hero__visual">
<div class="ethnic-headless-commerce-visual">
<div class="ethnic-headless-commerce-visual__window">
<div class="ethnic-headless-commerce-visual__window-bar">
<span></span>
<span></span>
<span></span>
</div>
<div class="ethnic-headless-commerce-visual__window-body">
<div class="ethnic-headless-commerce-visual__toolbar">
<span>Frontend</span>
<span>API Layer</span>
<span>Commerce Engine</span>
</div>
<div class="ethnic-headless-commerce-visual__feature">
<div class="ethnic-headless-commerce-visual__feature-shot"></div>
<div class="ethnic-headless-commerce-visual__feature-copy">
<span class="ethnic-headless-commerce-visual__eyebrow">Architecture mockup</span>
<strong>Frontend freedom with backend commerce continuity.</strong>
<p>Decoupled storefront delivery shaped around performance, richer UX, and cleaner control across experience and commerce layers.</p>
<div class="ethnic-headless-commerce-visual__tags">
<span>Next.js</span>
<span>API-first</span>
<span>Composable UX</span>
</div>
</div>
</div>
<div class="ethnic-headless-commerce-visual__architecture">
<div class="ethnic-headless-commerce-visual__architecture-card">
<small>Frontend layer</small>
<strong>Custom storefront experience delivery</strong>
</div>
<div class="ethnic-headless-commerce-visual__architecture-card">
<small>Backend layer</small>
<strong>Catalog, checkout, orders, and operational continuity</strong>
</div>
</div>
</div>
</div>
<div class="ethnic-headless-commerce-visual__floating ethnic-headless-commerce-visual__floating--backend">
<p class="ethnic-headless-commerce-visual__floating-label">Commerce engine</p>
<strong>Backend operations stay intact</strong>
<div class="ethnic-headless-commerce-visual__metric-grid">
<div>
<small>Catalog</small>
<strong>Managed</strong>
</div>
<div>
<small>Checkout</small>
<strong>Connected</strong>
</div>
</div>
<div class="ethnic-headless-commerce-visual__progress">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="ethnic-headless-commerce-visual__floating ethnic-headless-commerce-visual__floating--performance">
<p class="ethnic-headless-commerce-visual__floating-label">Performance view</p>
<strong>Modern storefront delivery with faster, more flexible frontend control</strong>
<ul>
<li>Decoupled architecture</li>
<li>API-driven experiences</li>
<li>Multi-channel readiness</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-headless-commerce-section" id="overview">
<div class="ethnic-headless-commerce-shell">
<?php echo ethnic_headless_commerce_page_heading( 'Service Overview', 'Headless commerce development services for businesses that need more frontend flexibility and modern architecture.', 'We support strategy, architecture planning, frontend implementation, backend connectivity, long-term optimization, and commerce growth for brands moving beyond tightly coupled storefront delivery.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-headless-commerce-overview">
<div class="ethnic-headless-commerce-prose">
<?php foreach ( (array) $data['overviewParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-headless-commerce-card-grid ethnic-headless-commerce-card-grid--overview">
<?php foreach ( (array) $data['overviewFeatures'] as $feature ) : ?>
<article class="ethnic-headless-commerce-card">
<div class="ethnic-headless-commerce-card__icon">
<?php echo ethnic_headless_commerce_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-headless-commerce-section ethnic-headless-commerce-section--soft" id="what-headless-commerce-is">
<div class="ethnic-headless-commerce-shell">
<div class="ethnic-headless-commerce-split">
<div class="ethnic-headless-commerce-split__content">
<?php echo ethnic_headless_commerce_page_heading( 'What Headless Commerce Is', 'A simpler explanation of headless commerce for businesses evaluating custom storefront flexibility.', 'Headless commerce separates the storefront presentation layer from the backend commerce engine so businesses can build more tailored frontend experiences while keeping core commerce functionality operating behind the scenes.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['explainerParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-headless-commerce-split__visual">
<div class="ethnic-headless-commerce-panel">
<p class="ethnic-headless-commerce-panel__eyebrow">Headless Model</p>
<div class="ethnic-headless-commerce-panel__grid">
<?php foreach ( (array) $data['explainerCards'] as $card ) : ?>
<article class="ethnic-headless-commerce-panel__card">
<div class="ethnic-headless-commerce-card__icon">
<?php echo ethnic_headless_commerce_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-headless-commerce-section" id="when-businesses-need-it">
<div class="ethnic-headless-commerce-shell">
<?php echo ethnic_headless_commerce_page_heading( 'When Businesses Need It', 'When headless commerce becomes the right architectural choice for growth, UX control, and digital flexibility.', 'The right fit usually depends on how much experience control, performance sensitivity, content flexibility, and integration complexity the business needs to support.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-headless-commerce-prose ethnic-headless-commerce-prose--narrow">
<?php foreach ( (array) $data['fitParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-headless-commerce-card-grid ethnic-headless-commerce-card-grid--fit">
<?php foreach ( (array) $data['fitCards'] as $card ) : ?>
<article class="ethnic-headless-commerce-card ethnic-headless-commerce-card--fit">
<div class="ethnic-headless-commerce-card__icon">
<?php echo ethnic_headless_commerce_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>
<p class="ethnic-headless-commerce-note"><?php echo esc_html( $data['fitNote'] ); ?></p>
</div>
</section>
<section class="ethnic-headless-commerce-section ethnic-headless-commerce-section--soft" id="frontend-backend-separation">
<div class="ethnic-headless-commerce-shell">
<div class="ethnic-headless-commerce-split ethnic-headless-commerce-split--separation">
<div class="ethnic-headless-commerce-split__content">
<?php echo ethnic_headless_commerce_page_heading( 'Frontend and Backend Separation', 'Headless commerce architecture built around independent experience delivery and stable backend operations.', 'The frontend can be built independently for greater design, UX, and content control while the backend continues managing product, checkout, catalog, customer, and order operations.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['separationParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-headless-commerce-split__visual">
<div class="ethnic-headless-commerce-card-grid ethnic-headless-commerce-card-grid--separation">
<?php foreach ( (array) $data['separationCards'] as $card ) : ?>
<article class="ethnic-headless-commerce-card ethnic-headless-commerce-card--separation">
<div class="ethnic-headless-commerce-card__icon">
<?php echo ethnic_headless_commerce_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>
<section class="ethnic-headless-commerce-section" id="performance-benefits">
<div class="ethnic-headless-commerce-shell">
<div class="ethnic-headless-commerce-performance">
<div class="ethnic-headless-commerce-performance__copy">
<?php echo ethnic_headless_commerce_page_heading( 'Performance Benefits', 'Headless commerce performance benefits focused on faster UX, better control, and scalable storefront delivery.', 'A well-planned headless implementation can support more performance-aware storefront delivery, cleaner mobile browsing, SEO-friendly experience shaping, and better control over how customer journeys are built and optimized.' ); // 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-headless-commerce-checklist">
<?php foreach ( (array) $data['performanceChecklist'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-headless-commerce-performance__visual">
<div class="ethnic-headless-commerce-dashboard">
<p class="ethnic-headless-commerce-dashboard__eyebrow">Performance View</p>
<div class="ethnic-headless-commerce-dashboard__cards">
<?php foreach ( (array) $data['performanceCards'] as $card ) : ?>
<div class="ethnic-headless-commerce-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-headless-commerce-dashboard__journey">
<div class="ethnic-headless-commerce-dashboard__step">
<span>01</span>
<div>
<strong>Control the frontend layer</strong>
<p>Optimize rendering, content structure, and browsing flow with more direct experience-layer control.</p>
</div>
</div>
<div class="ethnic-headless-commerce-dashboard__step">
<span>02</span>
<div>
<strong>Reduce browsing friction</strong>
<p>Shape product discovery and content transitions around performance, clarity, and mobile responsiveness.</p>
</div>
</div>
<div class="ethnic-headless-commerce-dashboard__step">
<span>03</span>
<div>
<strong>Scale more flexibly</strong>
<p>Support future channels, richer UX, and evolving digital experience needs without rebuilding the full commerce engine.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-headless-commerce-section ethnic-headless-commerce-section--soft" id="suitable-stacks">
<div class="ethnic-headless-commerce-shell">
<?php echo ethnic_headless_commerce_page_heading( 'Suitable Stacks', 'Headless commerce stacks selected around business goals, integrations, team fit, and long-term maintainability.', 'There is no single stack that suits every business. The right combination depends on storefront ambitions, backend complexity, content needs, delivery speed, internal capabilities, and how the platform needs to scale over time.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-headless-commerce-prose ethnic-headless-commerce-prose--narrow">
<?php foreach ( (array) $data['stackParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-headless-commerce-stack-grid">
<?php foreach ( (array) $data['stackCards'] as $stack ) : ?>
<article class="ethnic-headless-commerce-stack-card">
<div class="ethnic-headless-commerce-card__icon">
<?php echo ethnic_headless_commerce_page_icon( $stack['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $stack['title'] ); ?></h3>
<p><?php echo esc_html( $stack['description'] ); ?></p>
<ul class="ethnic-headless-commerce-stack-card__badges">
<?php foreach ( (array) $stack['items'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<?php if ( ! empty( $case_studies ) ) : ?>
<section class="ethnic-headless-commerce-section ethnic-headless-commerce-section--contrast" id="case-studies">
<div class="ethnic-headless-commerce-shell">
<?php echo ethnic_headless_commerce_page_heading( 'Case Studies', 'Headless commerce examples shaped around performance, architecture flexibility, and richer storefront control.', 'These preview cards reflect the kinds of headless commerce delivery outcomes businesses often pursue when moving toward more modern, decoupled storefront architecture.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo ethnic_shared_case_study_showcase_render( $case_studies, array( 'carousel_label' => 'Headless commerce case studies showcase' ) ); ?>
</div>
</section>
<?php endif; ?>
<section class="ethnic-headless-commerce-section ethnic-headless-commerce-section--cta" id="cta">
<div class="ethnic-headless-commerce-shell">
<div class="ethnic-headless-commerce-cta">
<div class="ethnic-headless-commerce-cta__copy">
<div class="ethnic-headless-commerce-cta__intro">
<p class="ethnic-headless-commerce-kicker ethnic-headless-commerce-kicker--light">Ready to Talk</p>
<p class="ethnic-headless-commerce-cta__note">Planning for frontend flexibility, architecture decisions, performance goals, and long-term commerce scale.</p>
</div>
<h2><?php echo esc_html( $data['ctaTitle'] ); ?></h2>
<p class="ethnic-headless-commerce-cta__lead"><?php echo esc_html( $data['ctaText'] ); ?></p>
<div class="ethnic-headless-commerce-actions">
<a class="ethnic-headless-commerce-button ethnic-headless-commerce-button--primary" href="<?php echo esc_url( $team_url ); ?>">Talk to Our Team</a>
<a class="ethnic-headless-commerce-button ethnic-headless-commerce-button--secondary" href="<?php echo esc_url( $quote_url ); ?>">Get a Free Quote</a>
</div>
<ul class="ethnic-headless-commerce-cta__highlights" aria-label="Headless commerce CTA highlights">
<?php foreach ( (array) $data['ctaHighlights'] as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<aside class="ethnic-headless-commerce-cta__panel" aria-label="What happens next">
<div class="ethnic-headless-commerce-cta__panel-header">
<p class="ethnic-headless-commerce-cta__panel-eyebrow">What Happens Next</p>
<h3 class="ethnic-headless-commerce-cta__panel-title">Shape the right headless commerce architecture plan</h3>
</div>
<ol class="ethnic-headless-commerce-cta__steps">
<?php foreach ( (array) $data['ctaSteps'] as $index => $step ) : ?>
<li class="ethnic-headless-commerce-cta__step">
<span class="ethnic-headless-commerce-cta__step-number"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<div class="ethnic-headless-commerce-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-headless-commerce-cta__panel-note"><strong>Focus:</strong> headless commerce strategy, stack selection, frontend and backend separation, integration scope, and rollout planning.</div>
</aside>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_styles' ) ) {
function ethnic_headless_commerce_page_styles() {
return <<<'CSS'
body.ethnic-headless-commerce-development-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-headless-commerce-development-target .fullwidth-content > .ethnic-headless-commerce-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
body.ethnic-headless-commerce-development-target .block-content > .container {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.ethnic-headless-commerce-development-target .block-content > .container > .panel.row {
margin-left: 0;
margin-right: 0;
}
body.ethnic-headless-commerce-development-target .block-content > .container > .panel > .panel-center {
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.ethnic-headless-commerce-development-target .entry-content.post-content {
margin-bottom: 0;
}
.ethnic-headless-commerce-page {
--ethnic-headless-commerce-text: #0f172a;
--ethnic-headless-commerce-muted: #5e6c80;
--ethnic-headless-commerce-border: rgba(15, 23, 42, 0.09);
--ethnic-headless-commerce-surface: rgba(255, 255, 255, 0.96);
--ethnic-headless-commerce-surface-strong: #ffffff;
--ethnic-headless-commerce-soft: rgba(243, 248, 255, 0.96);
--ethnic-headless-commerce-accent: #34c3ff;
--ethnic-headless-commerce-accent-dark: #0d5f83;
--ethnic-headless-commerce-blue: #5076ff;
--ethnic-headless-commerce-lime: #ccff9d;
--ethnic-headless-commerce-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
--ethnic-headless-commerce-shadow-strong: 0 30px 80px rgba(15, 23, 42, 0.18);
color: var(--ethnic-headless-commerce-text);
overflow-x: clip;
}
.ethnic-headless-commerce-page,
.ethnic-headless-commerce-page *,
.ethnic-headless-commerce-page *::before,
.ethnic-headless-commerce-page *::after {
box-sizing: border-box;
}
.ethnic-headless-commerce-shell {
width: min(1240px, calc(100% - (var(--ethnic-headless-commerce-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-headless-commerce-section + .ethnic-headless-commerce-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-headless-commerce-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-headless-commerce-section--contrast {
padding: clamp(42px, 5vw, 58px) 0;
border-radius: 36px;
background: linear-gradient(180deg, rgba(8, 24, 46, 0.98), rgba(11, 34, 58, 0.98));
}
.ethnic-headless-commerce-page p,
.ethnic-headless-commerce-page li {
color: var(--ethnic-headless-commerce-muted);
font-size: 16px;
line-height: 1.78;
}
.ethnic-headless-commerce-kicker,
.ethnic-headless-commerce-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-headless-commerce-kicker::before,
.ethnic-headless-commerce-heading__eyebrow::before,
.ethnic-headless-commerce-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-headless-commerce-kicker--light,
.ethnic-headless-commerce-heading__eyebrow {
background: rgba(52, 195, 255, 0.1);
border-color: rgba(52, 195, 255, 0.16);
color: var(--ethnic-headless-commerce-accent) !important;
-webkit-text-fill-color: var(--ethnic-headless-commerce-accent);
text-shadow: none;
}
.ethnic-headless-commerce-heading {
max-width: 860px;
margin-bottom: clamp(28px, 4vw, 40px);
}
.ethnic-headless-commerce-heading__title,
.ethnic-headless-commerce-hero__title,
.ethnic-headless-commerce-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-headless-commerce-heading__title,
.ethnic-headless-commerce-cta h2 {
color: var(--ethnic-headless-commerce-text);
font-size: clamp(32px, 3vw, 44px);
line-height: 1.06;
}
.ethnic-headless-commerce-heading__copy,
.ethnic-headless-commerce-prose p,
.ethnic-headless-commerce-card p,
.ethnic-headless-commerce-case-card p,
.ethnic-headless-commerce-stack-card p,
.ethnic-headless-commerce-cta__lead,
.ethnic-headless-commerce-cta__step-copy p,
.ethnic-headless-commerce-performance__copy p {
margin: 18px 0 0;
}
.ethnic-headless-commerce-prose--narrow {
max-width: 78ch;
}
.ethnic-headless-commerce-section--hero {
position: relative;
background:
radial-gradient(circle at 15% 16%, rgba(52, 195, 255, 0.24), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(80, 118, 255, 0.2), transparent 20%),
linear-gradient(180deg, #081222, #0c2137 52%, #12314f);
}
.ethnic-headless-commerce-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-headless-commerce-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
gap: clamp(32px, 5vw, 68px);
align-items: center;
min-height: clamp(620px, 74vw, 780px);
padding: clamp(82px, 8vw, 128px) 0;
}
.ethnic-headless-commerce-hero__copy,
.ethnic-headless-commerce-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-headless-commerce-hero__title {
max-width: 9ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(44px, 5.2vw, 72px);
line-height: 0.98;
}
.ethnic-headless-commerce-hero__lead {
max-width: 62ch;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(17px, 1.45vw, 20px);
line-height: 1.82;
}
.ethnic-headless-commerce-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-headless-commerce-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-headless-commerce-button:hover,
.ethnic-headless-commerce-button:focus-visible {
transform: translateY(-1px);
text-decoration: none;
}
.ethnic-headless-commerce-button--primary {
background: var(--ethnic-headless-commerce-lime);
color: #0b1730 !important;
box-shadow: 0 20px 44px rgba(5, 14, 28, 0.24);
}
.ethnic-headless-commerce-button--primary:hover,
.ethnic-headless-commerce-button--primary:focus-visible {
background: #e4ffc1;
color: #0b1730 !important;
box-shadow: 0 24px 50px rgba(5, 14, 28, 0.28);
}
.ethnic-headless-commerce-button--secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
color: #ffffff !important;
}
.ethnic-headless-commerce-button--ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: #ffffff !important;
}
.ethnic-headless-commerce-button--ghost:hover,
.ethnic-headless-commerce-button--ghost:focus-visible {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.18);
}
.ethnic-headless-commerce-hero__points,
.ethnic-headless-commerce-checklist,
.ethnic-headless-commerce-cta__highlights,
.ethnic-headless-commerce-stack-card__badges {
display: grid;
gap: 12px;
padding: 0;
margin: 26px 0 0;
list-style: none;
}
.ethnic-headless-commerce-hero__points {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 860px;
}
.ethnic-headless-commerce-hero__points li,
.ethnic-headless-commerce-checklist li,
.ethnic-headless-commerce-cta__highlights li {
position: relative;
padding-left: 22px;
}
.ethnic-headless-commerce-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-headless-commerce-hero__points li::before,
.ethnic-headless-commerce-checklist li::before,
.ethnic-headless-commerce-cta__highlights li::before {
content: "";
position: absolute;
left: 0;
top: 0.38em;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ethnic-headless-commerce-lime);
box-shadow: 0 0 0 5px rgba(204, 255, 157, 0.16);
}
.ethnic-headless-commerce-hero__points li::before {
left: 18px;
top: 21px;
}
.ethnic-headless-commerce-visual {
position: relative;
min-height: 560px;
}
.ethnic-headless-commerce-visual__window,
.ethnic-headless-commerce-panel,
.ethnic-headless-commerce-dashboard,
.ethnic-headless-commerce-cta,
.ethnic-headless-commerce-cta__panel,
.ethnic-headless-commerce-card,
.ethnic-headless-commerce-stack-card,
.ethnic-headless-commerce-case-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.94));
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: var(--ethnic-headless-commerce-shadow);
}
.ethnic-headless-commerce-visual__window {
position: relative;
padding: 22px;
border-radius: 30px;
background:
radial-gradient(circle at top right, rgba(52, 195, 255, 0.22), transparent 28%),
radial-gradient(circle at bottom left, rgba(204, 255, 157, 0.16), transparent 22%),
linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 255, 0.96));
}
.ethnic-headless-commerce-visual__window-bar {
display: flex;
gap: 8px;
}
.ethnic-headless-commerce-visual__window-bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.14);
}
.ethnic-headless-commerce-visual__window-body {
display: grid;
gap: 18px;
margin-top: 18px;
padding: 18px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.ethnic-headless-commerce-visual__toolbar {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-headless-commerce-visual__toolbar span,
.ethnic-headless-commerce-visual__tags span,
.ethnic-headless-commerce-case-card__tags span,
.ethnic-headless-commerce-stack-card__badges li {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 8px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
}
.ethnic-headless-commerce-visual__toolbar span,
.ethnic-headless-commerce-stack-card__badges li {
background: rgba(15, 23, 42, 0.05);
color: var(--ethnic-headless-commerce-text);
}
.ethnic-headless-commerce-visual__feature {
display: grid;
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
gap: 18px;
align-items: center;
}
.ethnic-headless-commerce-visual__feature-shot {
position: relative;
min-height: 238px;
border-radius: 24px;
background:
radial-gradient(circle at 28% 28%, rgba(52, 195, 255, 0.48), transparent 16%),
radial-gradient(circle at 72% 34%, rgba(80, 118, 255, 0.46), transparent 18%),
radial-gradient(circle at 42% 76%, rgba(204, 255, 157, 0.42), transparent 18%),
linear-gradient(180deg, #0b1f37, #143a5d);
overflow: hidden;
}
.ethnic-headless-commerce-visual__feature-shot::before,
.ethnic-headless-commerce-visual__feature-shot::after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}
.ethnic-headless-commerce-visual__feature-shot::before {
inset: 20px 22px auto;
height: 70px;
background: rgba(255, 255, 255, 0.05);
}
.ethnic-headless-commerce-visual__feature-shot::after {
left: 24px;
right: 24px;
bottom: 24px;
height: 92px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 26px 26px;
}
.ethnic-headless-commerce-visual__eyebrow,
.ethnic-headless-commerce-panel__eyebrow,
.ethnic-headless-commerce-dashboard__eyebrow {
display: inline-flex;
margin: 0;
color: var(--ethnic-headless-commerce-accent-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-headless-commerce-visual__feature-copy strong,
.ethnic-headless-commerce-panel__card h3,
.ethnic-headless-commerce-card h3,
.ethnic-headless-commerce-case-card h3,
.ethnic-headless-commerce-stack-card h3,
.ethnic-headless-commerce-dashboard__card strong,
.ethnic-headless-commerce-dashboard__step strong {
color: var(--ethnic-headless-commerce-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
}
.ethnic-headless-commerce-visual__feature-copy strong {
display: block;
margin-top: 10px;
font-size: 24px;
line-height: 1.2;
}
.ethnic-headless-commerce-visual__feature-copy p {
margin: 12px 0 0;
}
.ethnic-headless-commerce-visual__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.ethnic-headless-commerce-visual__tags span {
background: rgba(52, 195, 255, 0.1);
color: var(--ethnic-headless-commerce-accent-dark);
}
.ethnic-headless-commerce-visual__architecture {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ethnic-headless-commerce-visual__architecture-card {
padding: 16px 18px;
border-radius: 20px;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.ethnic-headless-commerce-visual__architecture-card small,
.ethnic-headless-commerce-visual__floating-label,
.ethnic-headless-commerce-dashboard__card small {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
color: var(--ethnic-headless-commerce-accent-dark);
}
.ethnic-headless-commerce-visual__architecture-card strong,
.ethnic-headless-commerce-visual__floating strong {
display: block;
margin-top: 8px;
color: var(--ethnic-headless-commerce-text);
font-size: 16px;
line-height: 1.5;
}
.ethnic-headless-commerce-visual__floating {
position: absolute;
padding: 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(16px);
}
.ethnic-headless-commerce-visual__floating--backend {
right: -10px;
bottom: 116px;
width: min(240px, 48%);
}
.ethnic-headless-commerce-visual__floating--performance {
left: -8px;
bottom: -8px;
width: min(266px, 58%);
}
.ethnic-headless-commerce-visual__metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.ethnic-headless-commerce-visual__metric-grid div,
.ethnic-headless-commerce-dashboard__card {
padding: 14px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.05);
}
.ethnic-headless-commerce-visual__metric-grid small {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ethnic-headless-commerce-muted);
}
.ethnic-headless-commerce-visual__metric-grid strong {
display: block;
margin-top: 8px;
font-size: 17px;
}
.ethnic-headless-commerce-visual__progress {
display: flex;
gap: 10px;
margin-top: 16px;
}
.ethnic-headless-commerce-visual__progress span {
flex: 1 1 auto;
height: 7px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(52, 195, 255, 0.92), rgba(80, 118, 255, 0.9));
}
.ethnic-headless-commerce-visual__progress span:last-child {
max-width: 34%;
opacity: 0.55;
}
.ethnic-headless-commerce-visual__floating ul {
padding-left: 18px;
margin: 12px 0 0;
}
.ethnic-headless-commerce-overview,
.ethnic-headless-commerce-split,
.ethnic-headless-commerce-performance,
.ethnic-headless-commerce-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.96fr);
gap: clamp(24px, 4vw, 40px);
align-items: start;
}
.ethnic-headless-commerce-card-grid,
.ethnic-headless-commerce-panel__grid,
.ethnic-headless-commerce-stack-grid,
.ethnic-headless-commerce-dashboard__cards {
display: grid;
gap: 18px;
}
.ethnic-headless-commerce-card-grid--overview,
.ethnic-headless-commerce-panel__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-headless-commerce-card-grid--fit {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-headless-commerce-card-grid--separation {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-headless-commerce-card-grid--case-studies {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-headless-commerce-stack-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-headless-commerce-card,
.ethnic-headless-commerce-panel,
.ethnic-headless-commerce-dashboard,
.ethnic-headless-commerce-stack-card,
.ethnic-headless-commerce-case-card {
border-radius: 28px;
padding: 24px;
}
.ethnic-headless-commerce-card__icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: 16px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(52, 195, 255, 0.14), rgba(204, 255, 157, 0.14));
color: var(--ethnic-headless-commerce-accent-dark);
}
.ethnic-headless-commerce-card__icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ethnic-headless-commerce-card h3,
.ethnic-headless-commerce-panel__card h3,
.ethnic-headless-commerce-case-card h3,
.ethnic-headless-commerce-stack-card h3 {
margin: 0;
font-size: 22px;
line-height: 1.2;
}
.ethnic-headless-commerce-panel {
position: relative;
padding: 28px;
}
.ethnic-headless-commerce-panel__grid {
margin-top: 20px;
}
.ethnic-headless-commerce-panel__card {
padding: 20px;
border-radius: 22px;
background: rgba(15, 23, 42, 0.03);
border: 1px solid rgba(15, 23, 42, 0.05);
}
.ethnic-headless-commerce-note {
margin: 24px 0 0;
padding: 18px 20px;
border-radius: 22px;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.06);
color: var(--ethnic-headless-commerce-text);
font-weight: 600;
}
.ethnic-headless-commerce-dashboard {
position: relative;
padding: 28px;
}
.ethnic-headless-commerce-dashboard__cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 20px;
}
.ethnic-headless-commerce-dashboard__card strong {
display: block;
margin-top: 8px;
font-size: 24px;
line-height: 1;
}
.ethnic-headless-commerce-dashboard__card p {
margin: 12px 0 0;
}
.ethnic-headless-commerce-dashboard__journey,
.ethnic-headless-commerce-cta__steps {
display: grid;
gap: 16px;
margin-top: 20px;
}
.ethnic-headless-commerce-dashboard__step,
.ethnic-headless-commerce-cta__step {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
align-items: start;
}
.ethnic-headless-commerce-dashboard__step span,
.ethnic-headless-commerce-cta__step-number {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(52, 195, 255, 0.18), rgba(80, 118, 255, 0.22));
color: var(--ethnic-headless-commerce-text);
font-size: 15px;
font-weight: 800;
}
.ethnic-headless-commerce-stack-card__badges {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 20px;
}
.ethnic-headless-commerce-case-card {
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
background:
radial-gradient(circle at top right, rgba(52, 195, 255, 0.12), transparent 34%),
linear-gradient(180deg, rgba(18, 40, 66, 0.96), rgba(14, 31, 52, 0.96));
border-color: rgba(255, 255, 255, 0.12);
box-shadow: var(--ethnic-headless-commerce-shadow-strong);
}
.ethnic-headless-commerce-section--contrast .ethnic-headless-commerce-heading__title,
.ethnic-headless-commerce-section--contrast .ethnic-headless-commerce-heading__copy,
.ethnic-headless-commerce-case-card h3,
.ethnic-headless-commerce-case-card p,
.ethnic-headless-commerce-case-card strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-headless-commerce-case-card h3 {
margin: 0;
font-size: clamp(24px, 1.9vw, 30px);
line-height: 1.16;
letter-spacing: -0.035em;
text-wrap: balance;
}
.ethnic-headless-commerce-case-card__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 0;
}
.ethnic-headless-commerce-case-card__tags span {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.03em;
}
.ethnic-headless-commerce-case-card__summary {
display: grid;
gap: 14px;
margin-top: 0;
}
.ethnic-headless-commerce-case-card__summary p {
color: rgba(255, 255, 255, 0.82) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.82);
font-size: 15px;
line-height: 1.72;
}
.ethnic-headless-commerce-case-card__summary strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-headless-commerce-case-card .ethnic-headless-commerce-button {
align-self: flex-start;
margin-top: auto;
}
.ethnic-headless-commerce-cta {
position: relative;
padding: clamp(30px, 4vw, 38px);
border-radius: 32px;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(52, 195, 255, 0.16), transparent 28%),
radial-gradient(circle at top right, rgba(204, 255, 157, 0.18), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.95));
}
.ethnic-headless-commerce-cta::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(80, 118, 255, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(80, 118, 255, 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-headless-commerce-cta__copy {
position: relative;
display: grid;
align-content: center;
}
.ethnic-headless-commerce-cta__intro {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-bottom: 4px;
}
.ethnic-headless-commerce-cta .ethnic-headless-commerce-kicker--light {
margin-bottom: 0;
background: rgba(255, 255, 255, 0.9);
border-color: rgba(52, 195, 255, 0.18);
color: #16759b !important;
-webkit-text-fill-color: #16759b;
box-shadow: 0 14px 36px rgba(52, 195, 255, 0.14);
}
.ethnic-headless-commerce-cta__note {
margin: 0;
max-width: 42ch;
}
.ethnic-headless-commerce-cta h2 {
max-width: 11ch;
font-size: clamp(36px, 4.5vw, 60px);
line-height: 0.98;
letter-spacing: -0.06em;
}
.ethnic-headless-commerce-cta__lead {
max-width: 58ch;
color: rgba(15, 23, 42, 0.72);
font-size: clamp(16px, 1.35vw, 18px);
line-height: 1.82;
}
.ethnic-headless-commerce-cta .ethnic-headless-commerce-actions {
gap: 16px;
margin-top: 30px;
}
.ethnic-headless-commerce-section--cta .ethnic-headless-commerce-button--secondary {
background: rgba(255, 255, 255, 0.74);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ethnic-headless-commerce-text) !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(14px);
}
.ethnic-headless-commerce-section--cta .ethnic-headless-commerce-button--secondary:hover,
.ethnic-headless-commerce-section--cta .ethnic-headless-commerce-button--secondary:focus-visible {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(15, 23, 42, 0.18);
}
.ethnic-headless-commerce-cta__highlights {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
gap: 14px;
}
.ethnic-headless-commerce-cta__highlights li {
display: flex;
align-items: flex-start;
min-height: 100%;
padding: 18px 18px 18px 40px;
border-radius: 22px;
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-headless-commerce-text);
font-size: 14px;
font-weight: 600;
line-height: 1.55;
backdrop-filter: blur(16px);
}
.ethnic-headless-commerce-cta__highlights li::before {
left: 18px;
top: 20px;
}
.ethnic-headless-commerce-cta__panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(28px, 4vw, 34px);
border-radius: 30px;
background: linear-gradient(180deg, #143257, #0b203c);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 26px 70px rgba(6, 16, 30, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ethnic-headless-commerce-cta__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at top right, rgba(52, 195, 255, 0.24), transparent 34%),
radial-gradient(circle at bottom left, rgba(204, 255, 157, 0.16), transparent 26%);
pointer-events: none;
}
.ethnic-headless-commerce-cta__panel-header {
position: relative;
z-index: 1;
display: grid;
gap: 12px;
margin-bottom: 10px;
}
.ethnic-headless-commerce-cta__panel-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.94) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.94);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-headless-commerce-cta__panel-eyebrow::before {
background: var(--ethnic-headless-commerce-lime);
box-shadow: 0 0 0 5px rgba(204, 255, 157, 0.12);
}
.ethnic-headless-commerce-cta__panel-title {
margin: 0;
color: #f8fbff !important;
-webkit-text-fill-color: #f8fbff;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(28px, 2.6vw, 38px);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 1.1;
}
.ethnic-headless-commerce-cta__steps {
position: relative;
z-index: 1;
padding: 0;
list-style: none;
}
.ethnic-headless-commerce-cta__step + .ethnic-headless-commerce-cta__step {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 16px;
}
.ethnic-headless-commerce-cta__step-copy strong,
.ethnic-headless-commerce-cta__step-copy p {
color: #ffffff;
}
.ethnic-headless-commerce-cta__step-copy p {
max-width: none;
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.74);
font-size: 15px;
line-height: 1.7;
}
.ethnic-headless-commerce-cta__panel-note {
position: relative;
z-index: 1;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.74);
font-size: 15px;
line-height: 1.6;
}
.ethnic-headless-commerce-cta__panel-note strong {
color: #ffffff;
}
@media (max-width: 1200px) {
.ethnic-headless-commerce-hero__points,
.ethnic-headless-commerce-cta__highlights,
.ethnic-headless-commerce-stack-grid,
.ethnic-headless-commerce-card-grid--fit {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-headless-commerce-card-grid--case-studies {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.ethnic-headless-commerce-hero,
.ethnic-headless-commerce-overview,
.ethnic-headless-commerce-split,
.ethnic-headless-commerce-performance,
.ethnic-headless-commerce-cta {
grid-template-columns: 1fr;
}
.ethnic-headless-commerce-hero {
min-height: auto;
}
.ethnic-headless-commerce-hero__visual,
.ethnic-headless-commerce-cta__panel,
.ethnic-headless-commerce-performance__visual {
max-width: 760px;
}
}
@media (max-width: 767px) {
.ethnic-headless-commerce-page {
--ethnic-headless-commerce-shell-padding: 20px;
}
.ethnic-headless-commerce-section + .ethnic-headless-commerce-section {
margin-top: 58px;
}
.ethnic-headless-commerce-hero {
padding: 72px 0 68px;
}
.ethnic-headless-commerce-hero__title {
max-width: 100%;
font-size: clamp(36px, 10vw, 52px);
}
.ethnic-headless-commerce-heading__title,
.ethnic-headless-commerce-cta h2 {
font-size: clamp(28px, 8vw, 38px);
}
.ethnic-headless-commerce-button {
width: 100%;
}
.ethnic-headless-commerce-hero__points,
.ethnic-headless-commerce-card-grid--overview,
.ethnic-headless-commerce-panel__grid,
.ethnic-headless-commerce-card-grid--fit,
.ethnic-headless-commerce-card-grid--separation,
.ethnic-headless-commerce-dashboard__cards,
.ethnic-headless-commerce-stack-grid,
.ethnic-headless-commerce-card-grid--case-studies,
.ethnic-headless-commerce-cta__highlights,
.ethnic-headless-commerce-visual__architecture,
.ethnic-headless-commerce-stack-card__badges {
grid-template-columns: 1fr;
}
.ethnic-headless-commerce-card,
.ethnic-headless-commerce-panel,
.ethnic-headless-commerce-cta,
.ethnic-headless-commerce-cta__panel,
.ethnic-headless-commerce-stack-card,
.ethnic-headless-commerce-case-card,
.ethnic-headless-commerce-dashboard {
border-radius: 24px;
}
.ethnic-headless-commerce-visual {
min-height: auto;
}
.ethnic-headless-commerce-visual__window {
padding: 18px;
}
.ethnic-headless-commerce-visual__window-body {
padding: 14px;
}
.ethnic-headless-commerce-visual__feature {
grid-template-columns: 1fr;
}
.ethnic-headless-commerce-visual__feature-shot {
min-height: 180px;
}
.ethnic-headless-commerce-visual__floating {
position: static;
width: 100%;
margin-top: 16px;
}
.ethnic-headless-commerce-cta__intro {
gap: 10px;
}
.ethnic-headless-commerce-cta__panel {
padding: 24px 22px;
}
.ethnic-headless-commerce-dashboard__step,
.ethnic-headless-commerce-cta__step {
grid-template-columns: 44px 1fr;
gap: 14px;
}
.ethnic-headless-commerce-dashboard__step span,
.ethnic-headless-commerce-cta__step-number {
width: 44px;
height: 44px;
border-radius: 15px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_headless_commerce_page_body_class' ) ) {
function ethnic_headless_commerce_page_body_class( $classes ) {
if ( ethnic_headless_commerce_page_is_target() ) {
$classes[] = 'ethnic-headless-commerce-development-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_headless_commerce_page_body_class' );
}
if ( ! function_exists( 'ethnic_headless_commerce_page_print_head_assets' ) ) {
function ethnic_headless_commerce_page_print_head_assets() {
if ( ! ethnic_headless_commerce_page_is_target() ) {
return;
}
$data = ethnic_headless_commerce_page_data();
?>
<style id="ethnic-headless-commerce-development-page-inline-css" type="text/css">
<?php echo ethnic_headless_commerce_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_headless_commerce_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_headless_commerce_page_document_title' ) ) {
function ethnic_headless_commerce_page_document_title( $title ) {
if ( ethnic_headless_commerce_page_is_target() ) {
$data = ethnic_headless_commerce_page_data();
return $data['metaTitle'];
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_headless_commerce_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_headless_commerce_page_replace_content' ) ) {
function ethnic_headless_commerce_page_replace_content( $content ) {
if ( ! ethnic_headless_commerce_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_headless_commerce_page_render();
}
add_filter( 'the_content', 'ethnic_headless_commerce_page_replace_content', 1000 );
}