File: /var/www/html/wp-content/mu-plugins/ethnic-about-page.php
<?php
/**
* Plugin Name: Ethnic About Page
* Description: Replaces the About page inner content with a custom responsive agency layout.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_about_page_is_target' ) ) {
function ethnic_about_page_is_target() {
return ! is_admin() && is_page( 114 );
}
}
if ( ! function_exists( 'ethnic_about_page_url' ) ) {
function ethnic_about_page_url( $path ) {
return esc_url( home_url( '/' . ltrim( $path, '/' ) . '/' ) );
}
}
if ( ! function_exists( 'ethnic_about_page_image' ) ) {
function ethnic_about_page_image( $src, $alt, $modifier = '', $args = array() ) {
if ( empty( $src ) ) {
return '';
}
$classes = 'ethnic-about-media';
if ( $modifier ) {
$classes .= ' ' . sanitize_html_class( $modifier );
}
$loading = ! empty( $args['loading'] ) ? $args['loading'] : 'lazy';
$decoding = ! empty( $args['decoding'] ) ? $args['decoding'] : 'async';
$fetchpriority = ! empty( $args['fetchpriority'] ) ? $args['fetchpriority'] : '';
ob_start();
?>
<div class="<?php echo esc_attr( $classes ); ?>">
<img
src="<?php echo esc_url( $src ); ?>"
alt="<?php echo esc_attr( $alt ); ?>"
loading="<?php echo esc_attr( $loading ); ?>"
decoding="<?php echo esc_attr( $decoding ); ?>"
<?php if ( $fetchpriority ) : ?>
fetchpriority="<?php echo esc_attr( $fetchpriority ); ?>"
<?php endif; ?>
/>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_about_page_placeholder' ) ) {
function ethnic_about_page_placeholder( $label, $modifier = '' ) {
$classes = 'ethnic-about-placeholder';
if ( $modifier ) {
$classes .= ' ' . sanitize_html_class( $modifier );
}
ob_start();
?>
<div class="<?php echo esc_attr( $classes ); ?>">
<span class="ethnic-about-placeholder__tag"><?php echo esc_html( $label ); ?></span>
<div class="ethnic-about-placeholder__frame" aria-hidden="true">
<span class="ethnic-about-placeholder__line ethnic-about-placeholder__line--wide"></span>
<span class="ethnic-about-placeholder__line"></span>
<span class="ethnic-about-placeholder__line ethnic-about-placeholder__line--short"></span>
</div>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_about_page_heading' ) ) {
function ethnic_about_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-about-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-about-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-about-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-about-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_about_page_value_icon' ) ) {
function ethnic_about_page_value_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'clarity':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4 7h16" />
<path d="M7 12h10" />
<path d="M10 17h4" />
</svg>
<?php
break;
case 'ownership':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3l6 2.5v5.6c0 4-2.4 7.6-6 9.4-3.6-1.8-6-5.4-6-9.4V5.5L12 3z" />
<path d="M9.3 12.2l1.8 1.8 3.8-4.1" />
</svg>
<?php
break;
case 'business':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 19V9" />
<path d="M12 19V5" />
<path d="M19 19v-7" />
<path d="M3 19h18" />
</svg>
<?php
break;
case 'craft':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M6 16l7.8-7.8 4 4L10 20H6v-4z" />
<path d="M12.8 7l2.2-2.2a1.8 1.8 0 0 1 2.5 0l1.7 1.7a1.8 1.8 0 0 1 0 2.5L17 11.2" />
</svg>
<?php
break;
case 'partnership':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M8 9.5l2.2 2.2a2.5 2.5 0 0 0 3.5 0L16 9.5" />
<path d="M6 7l3.2 3.2" />
<path d="M18 7l-3.2 3.2" />
<path d="M4.5 9.5l2.7 7h9.6l2.7-7" />
</svg>
<?php
break;
case 'momentum':
default:
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 16l4-4 3 3 6-6" />
<path d="M14 9h4v4" />
</svg>
<?php
break;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_about_page_process_icon' ) ) {
function ethnic_about_page_process_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'discover':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="11" cy="11" r="5.5" />
<path d="M16 16l4 4" />
</svg>
<?php
break;
case 'strategy':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="7" />
<circle cx="12" cy="12" r="2.5" />
<path d="M12 5v2" />
<path d="M19 12h-2" />
<path d="M12 19v-2" />
<path d="M5 12h2" />
</svg>
<?php
break;
case 'design':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4 17.5L15.5 6 18 8.5 6.5 20H4v-2.5z" />
<path d="M13 8.5l2.5 2.5" />
<path d="M14 4h6v6" />
</svg>
<?php
break;
case 'development':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M9 8l-4 4 4 4" />
<path d="M15 8l4 4-4 4" />
<path d="M13 5l-2 14" />
</svg>
<?php
break;
case 'testing':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3l6 2.5v5.2c0 4-2.4 7.7-6 9.6-3.6-1.9-6-5.6-6-9.6V5.5L12 3z" />
<path d="M9.2 11.8l1.8 1.8 3.8-4" />
</svg>
<?php
break;
case 'launch':
default:
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M14.5 4.5c2.5 0 4.5 2 4.5 4.5 0 4.8-4.2 8.7-9 9 .3-4.8 4.2-9 9-9z" />
<path d="M10 14l-4 4" />
<path d="M8 10l-3 1 1 3" />
<path d="M14 7l3 3" />
</svg>
<?php
break;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_about_page_normalize_team_text' ) ) {
function ethnic_about_page_normalize_team_text( $text ) {
$text = wp_strip_all_tags( (string) $text );
$text = preg_replace( '/\s*\(demo\)\s*/i', ' ', $text );
$text = preg_replace( '/\s+/', ' ', (string) $text );
return trim( (string) $text );
}
}
if ( ! function_exists( 'ethnic_about_page_get_team_members' ) ) {
function ethnic_about_page_get_team_members() {
$query_args = array(
'post_type' => 'thegem_team_person',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'menu_order title',
'order' => 'ASC',
);
$posts = array();
$preferred_term = get_term_by( 'slug', 'about-us', 'thegem_teams' );
if ( $preferred_term instanceof WP_Term ) {
$posts = get_posts(
array_merge(
$query_args,
array(
'tax_query' => array(
array(
'taxonomy' => 'thegem_teams',
'field' => 'term_id',
'terms' => array( (int) $preferred_term->term_id ),
),
),
)
)
);
}
if ( empty( $posts ) ) {
$posts = get_posts( $query_args );
}
if ( empty( $posts ) ) {
return array();
}
$non_demo_posts = array_filter(
$posts,
static function ( $post ) {
$person_data = get_post_meta( $post->ID, 'thegem_team_person_data', true );
$raw_name = ! empty( $person_data['name'] ) ? $person_data['name'] : $post->post_title;
return ! preg_match( '/\(demo\)/i', (string) $raw_name );
}
);
if ( ! empty( $non_demo_posts ) ) {
$posts = array_values( $non_demo_posts );
}
$members = array();
foreach ( $posts as $post ) {
$person_data = get_post_meta( $post->ID, 'thegem_team_person_data', true );
$name = ethnic_about_page_normalize_team_text( ! empty( $person_data['name'] ) ? $person_data['name'] : $post->post_title );
$role = ethnic_about_page_normalize_team_text( $person_data['position'] ?? '' );
$bio_source = ! empty( $post->post_excerpt ) ? $post->post_excerpt : $post->post_content;
$bio = trim( wp_strip_all_tags( strip_shortcodes( (string) $bio_source ) ) );
$members[] = array(
'id' => (int) $post->ID,
'name' => $name ? $name : ethnic_about_page_normalize_team_text( $post->post_title ),
'role' => $role,
'bio' => $bio ? wp_trim_words( $bio, 24, '...' ) : '',
'image_html' => has_post_thumbnail( $post->ID ) ? get_the_post_thumbnail(
$post->ID,
'medium_large',
array(
'loading' => 'lazy',
'alt' => $name ? $name : ethnic_about_page_normalize_team_text( $post->post_title ),
)
) : '',
);
}
return $members;
}
}
if ( ! function_exists( 'ethnic_about_page_render' ) ) {
function ethnic_about_page_render() {
$section_images = array(
'hero_background' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/ab_bk_1.jpg',
'intro' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/ab_2.jpg',
'founder' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/ab_3.jpeg',
);
$milestones = array(
array(
'year' => '2020-2021',
'title' => 'Started As Partners And Formed The Company',
'description' => 'We began working together as partners in 2020, building trust through shared projects and a hands-on way of working. In 2021, that partnership became the foundation of our company.',
),
array(
'year' => '2022-2023',
'title' => 'Built Our Delivery Foundation',
'description' => 'We focused on strengthening our process, serving clients with consistency, and building a delivery model centered on clear communication, reliability, and practical execution.',
),
array(
'year' => '2024-2025',
'title' => 'Scaled The Business And Became Private Limited',
'description' => 'As our work, team, and client relationships continued to grow, we moved into a more mature phase of the business. In 2025, we officially became a Private Limited company.',
),
array(
'year' => 'Today',
'title' => 'Growing With Long-Term Focus',
'description' => 'Today, we continue building as a committed technology partner, helping clients with dependable delivery while growing on the foundation we started in 2020.',
),
);
$leadership = ethnic_about_page_get_team_members();
if ( empty( $leadership ) ) {
$leadership = array(
array(
'name' => 'Pragnesh Boghani',
'role' => 'Director & CEO',
'bio' => 'Leads company direction, senior client partnerships, and the operating standards that keep delivery grounded in business outcomes.',
'image_html' => '',
),
array(
'name' => 'Nina Sharma',
'role' => 'Director of Delivery',
'bio' => 'Oversees planning, execution, and reporting across active engagements to keep programs transparent, realistic, and on track.',
'image_html' => '',
),
array(
'name' => 'Rohan Desai',
'role' => 'Head of Commerce Engineering',
'bio' => 'Guides platform architecture, performance, integration strategy, and engineering quality for scalable digital commerce builds.',
'image_html' => '',
),
array(
'name' => 'Mira Patel',
'role' => 'Head of Experience Strategy',
'bio' => 'Shapes user journeys, content structure, and experience decisions that connect design clarity with measurable commercial impact.',
'image_html' => '',
),
);
}
$values = array(
array(
'icon' => 'clarity',
'title' => 'Clarity Over Noise',
'description' => 'We keep communication direct, decisions documented, and priorities visible so delivery stays aligned.',
),
array(
'icon' => 'ownership',
'title' => 'Ownership At Every Stage',
'description' => 'We do not disappear after strategy or after launch. Accountability runs through planning, build, QA, and support.',
),
array(
'icon' => 'business',
'title' => 'Business-First Thinking',
'description' => 'Every recommendation has to make sense commercially, not just technically.',
),
array(
'icon' => 'craft',
'title' => 'Craft With Purpose',
'description' => 'We value strong engineering and thoughtful UX, but only when they contribute to a better result for users and teams.',
),
array(
'icon' => 'partnership',
'title' => 'Partnership Mindset',
'description' => 'We work best as an extension of in-house teams, bringing perspective without creating friction.',
),
array(
'icon' => 'momentum',
'title' => 'Momentum You Can Trust',
'description' => 'We build processes that help projects keep moving, even when priorities shift or complexity increases.',
),
);
$partners = array(
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p1.webp',
'alt' => 'Certification and partnership logo 1',
),
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p2.webp',
'alt' => 'Certification and partnership logo 2',
),
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p3.webp',
'alt' => 'Certification and partnership logo 3',
),
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p4.webp',
'alt' => 'Certification and partnership logo 4',
),
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p5.webp',
'alt' => 'Certification and partnership logo 5',
),
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p6.webp',
'alt' => 'Certification and partnership logo 6',
),
array(
'src' => 'https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/p7.webp',
'alt' => 'Certification and partnership logo 7',
),
);
$steps = array(
array(
'number' => '01',
'icon' => 'discover',
'title' => 'Discover',
'description' => 'We align on goals, users, constraints, and the operational reality behind the brief.',
),
array(
'number' => '02',
'icon' => 'strategy',
'title' => 'Strategy',
'description' => 'We shape the roadmap, solution direction, scope priorities, and measurable success criteria.',
),
array(
'number' => '03',
'icon' => 'design',
'title' => 'Design',
'description' => 'We define experience patterns, structure, and interface decisions that support confidence and conversion.',
),
array(
'number' => '04',
'icon' => 'development',
'title' => 'Development',
'description' => 'We build with maintainability, performance, and integration quality in mind from the start.',
),
array(
'number' => '05',
'icon' => 'testing',
'title' => 'Testing',
'description' => 'We validate flows, devices, handoffs, and edge cases so releases feel controlled instead of risky.',
),
array(
'number' => '06',
'icon' => 'launch',
'title' => 'Launch & Support',
'description' => 'We stay present through release, iteration, and post-launch priorities to help teams keep momentum.',
),
);
$benefits = array(
'Senior technical expertise across ecommerce, digital platforms, and complex delivery environments.',
'Transparent communication with clear priorities, visible timelines, and practical decision-making.',
'Scalable solutions designed for maintainability, platform growth, and operational ease.',
'Long-term support that helps teams keep improving instead of restarting from scratch.',
'A business-first approach that ties UX, engineering, and roadmap decisions back to outcomes.',
'Structured delivery that reduces surprises and keeps stakeholders confident throughout the work.',
);
$locations = array(
array(
'name' => 'India',
'role' => 'Delivery & Engineering Hub',
'description' => 'Core delivery operations, engineering leadership, QA, and execution oversight.',
),
array(
'name' => 'United Kingdom',
'role' => 'Client Strategy Coverage',
'description' => 'Commercial alignment, stakeholder workshops, and growth-focused advisory support.',
),
array(
'name' => 'North America',
'role' => 'Collaboration Across Time Zones',
'description' => 'Responsive delivery support for teams that need reliable overlap and clear account ownership.',
),
);
$culture = array(
array(
'image' => 'https://plus.unsplash.com/premium_photo-1661377022073-0352b0cf01c1?auto=format&fit=crop&crop=entropy&w=640&h=360&fm=webp&q=45',
'alt' => 'Team members reviewing work together in a meeting room',
'title' => 'Shared Reviews',
'description' => 'Design, engineering, and QA review work together early so quality is built in, not checked in later.',
),
array(
'image' => 'https://plus.unsplash.com/premium_photo-1661277656560-1b89ee88ad3c?auto=format&fit=crop&crop=entropy&w=640&h=360&fm=webp&q=45',
'alt' => 'Team workshop and learning session in a bright office',
'title' => 'Learning Rhythm',
'description' => 'We invest in internal learning so the team keeps sharpening technical depth and delivery judgement.',
),
array(
'image' => 'https://plus.unsplash.com/premium_photo-1723485609184-d17ae4f6c0ad?auto=format&fit=crop&crop=entropy&w=640&h=360&fm=webp&q=45',
'alt' => 'Organized overhead view of a calm, structured office workspace',
'title' => 'Calm Execution',
'description' => 'We prefer organised delivery, thoughtful planning, and measured pace over chaotic last-minute heroics.',
),
array(
'image' => 'https://plus.unsplash.com/premium_photo-1661782589470-6d2e76a36b9d?auto=format&fit=crop&crop=entropy&w=640&h=360&fm=webp&q=45',
'alt' => 'Team members reviewing reports and taking accountability for project work',
'title' => 'Team Accountability',
'description' => 'Everyone understands the goal, the context, and the standard expected for client-facing work.',
),
);
ob_start();
?>
<div class="ethnic-about-page" data-ethnic-about-page>
<section class="ethnic-about-section ethnic-about-section--hero" style="<?php echo esc_attr( sprintf( '--ethnic-about-hero-image: url("%s");', esc_url_raw( $section_images['hero_background'] ) ) ); ?>">
<div class="ethnic-about-shell ethnic-about-hero">
<div class="ethnic-about-hero__content">
<p class="ethnic-about-kicker" style="color: #ffffff; -webkit-text-fill-color: #ffffff;">About Us</p>
<h1 class="ethnic-about-hero__title" style="color: #ffffff; -webkit-text-fill-color: #ffffff;">We build digital commerce and technology experiences with the discipline of a delivery partner, not just a vendor.</h1>
<p class="ethnic-about-hero__lead">Our work brings together strategy, design, engineering, and support to help ambitious teams launch better platforms, improve customer journeys, and scale with more confidence.</p>
<p class="ethnic-about-hero__trust">Trusted by teams that value accountability, clear communication, and execution that stays reliable after launch.</p>
<div class="ethnic-about-actions">
<a class="ethnic-about-button ethnic-about-button--primary" href="<?php echo ethnic_about_page_url( 'contact-us' ); ?>">Talk To Our Team</a>
<a class="ethnic-about-button ethnic-about-button--secondary" href="<?php echo esc_url( function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_about_page_url( 'case-studies' ) ); ?>">View Case Studies</a>
</div>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell ethnic-about-grid ethnic-about-grid--intro">
<div class="ethnic-about-prose">
<?php echo ethnic_about_page_heading( 'Company Introduction', 'A trusted digital, ecommerce, and technology partner for teams that need delivery they can rely on.', 'We work with growing brands, established businesses, and ambitious teams that need more than execution alone. Our role is to bring structure, technical depth, and practical thinking to the work so ideas turn into dependable digital outcomes.' ); ?>
<p>From ecommerce builds and platform improvements to broader digital delivery, we help organisations plan better, move faster, and make stronger decisions across the lifecycle of a project. We are at our best when we are helping clients balance growth goals with delivery realism.</p>
<p>That means understanding the business context, designing for the user, engineering for scale, and supporting teams long after the first release is complete.</p>
</div>
<div class="ethnic-about-intro__visual">
<?php echo ethnic_about_page_image( $section_images['intro'], 'Company Introduction', 'ethnic-about-media--medium' ); ?>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Mission & Vision', 'Grounded in clear thinking, long-term trust, and measurable digital progress.' ); ?>
<div class="ethnic-about-card-grid ethnic-about-card-grid--two">
<article class="ethnic-about-card ethnic-about-card--mission">
<span class="ethnic-about-card__badge">Mission</span>
<h3>Turn digital ambition into dependable execution.</h3>
<p>Our mission is to help clients move from fragmented ideas and complex requirements to well-designed, well-built digital solutions that support growth and stay maintainable over time.</p>
</article>
<article class="ethnic-about-card ethnic-about-card--vision">
<span class="ethnic-about-card__badge">Vision</span>
<h3>Be the delivery partner clients trust when the work truly matters.</h3>
<p>We want to be known for calm execution, sharp technical judgement, and partnerships that continue because the work keeps delivering value after go-live.</p>
</article>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Our Journey', 'From a working partnership in 2020 to a Private Limited company in 2025.', 'Our growth has been steady and practical. We started by working together as partners, formalised the business in 2021, and kept strengthening our delivery model until becoming a Private Limited company in 2025.' ); ?>
<ol class="ethnic-about-timeline" aria-label="Company journey">
<?php foreach ( $milestones as $milestone ) : ?>
<li class="ethnic-about-timeline__item">
<article class="ethnic-about-timeline__card">
<p class="ethnic-about-timeline__year"><?php echo esc_html( $milestone['year'] ); ?></p>
<h3><?php echo esc_html( $milestone['title'] ); ?></h3>
<p><?php echo esc_html( $milestone['description'] ); ?></p>
</article>
</li>
<?php endforeach; ?>
</ol>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<div class="ethnic-about-founder">
<div class="ethnic-about-founder__visual">
<?php echo ethnic_about_page_image( $section_images['founder'], 'Founder Message', 'ethnic-about-media--portrait' ); ?>
</div>
<div class="ethnic-about-founder__content">
<p class="ethnic-about-kicker">Founder Message</p>
<blockquote>
We built Ethnic Infotech to be the kind of partner clients could depend on when timelines are real, systems are complex, and trust matters as much as capability. Our goal has always been to combine thoughtful strategy with disciplined execution so our clients feel supported at every stage.
</blockquote>
<div class="ethnic-about-founder__meta">
<strong>Pragnesh Boghani</strong>
<span>Director & CEO</span>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Leadership Team', 'A cross-functional leadership group focused on strategy, delivery, and long-term client success.' ); ?>
<div class="ethnic-about-card-grid ethnic-about-card-grid--team">
<?php foreach ( $leadership as $member ) : ?>
<article class="ethnic-about-team-card">
<div class="ethnic-about-team-card__media">
<?php if ( ! empty( $member['image_html'] ) ) : ?>
<?php echo $member['image_html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php else : ?>
<?php echo ethnic_about_page_placeholder( 'Team Photo', 'ethnic-about-placeholder--team' ); ?>
<?php endif; ?>
</div>
<div class="ethnic-about-team-card__body">
<h3><?php echo esc_html( $member['name'] ); ?></h3>
<?php if ( ! empty( $member['role'] ) ) : ?>
<p class="ethnic-about-team-card__role"><?php echo esc_html( $member['role'] ); ?></p>
<?php endif; ?>
<?php if ( ! empty( $member['bio'] ) ) : ?>
<p><?php echo esc_html( $member['bio'] ); ?></p>
<?php endif; ?>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Company Values', 'The standards that shape how we work with clients and with each other.' ); ?>
<div class="ethnic-about-card-grid ethnic-about-card-grid--values">
<?php foreach ( $values as $value ) : ?>
<article class="ethnic-about-value-card">
<span class="ethnic-about-value-card__icon" aria-hidden="true">
<?php echo ethnic_about_page_value_icon( $value['icon'] ?? '' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<h3><?php echo esc_html( $value['title'] ); ?></h3>
<p><?php echo esc_html( $value['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Certifications & Partnerships', 'We work within a broader technology ecosystem and keep our delivery standards aligned with recognised platforms and practices.' ); ?>
<div class="ethnic-about-logo-grid">
<?php foreach ( $partners as $partner ) : ?>
<div class="ethnic-about-logo-box">
<img
src="<?php echo esc_url( $partner['src'] ); ?>"
alt="<?php echo esc_attr( $partner['alt'] ); ?>"
loading="lazy"
decoding="async"
/>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<div class="ethnic-about-process-overview">
<div class="ethnic-about-process-overview__copy">
<?php echo ethnic_about_page_heading( 'Delivery Process', 'A structured methodology that keeps work visible, decisions grounded, and releases controlled.' ); ?>
<p class="ethnic-about-process-overview__lede">From first discovery to post-launch support, each phase is designed to reduce ambiguity, surface decisions early, and keep momentum steady across teams.</p>
</div>
<div class="ethnic-about-process-overview__visual" aria-hidden="true">
<div class="ethnic-about-process-route">
<?php foreach ( $steps as $step ) : ?>
<div class="ethnic-about-process-route__stop">
<span class="ethnic-about-process-route__icon">
<?php echo ethnic_about_page_process_icon( $step['icon'] ?? '' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<span class="ethnic-about-process-route__label"><?php echo esc_html( $step['title'] ); ?></span>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="ethnic-about-process">
<?php foreach ( $steps as $step ) : ?>
<article class="ethnic-about-process__step">
<div class="ethnic-about-process__step-top">
<p class="ethnic-about-process__number"><?php echo esc_html( $step['number'] ); ?></p>
<span class="ethnic-about-process__icon" aria-hidden="true">
<?php echo ethnic_about_page_process_icon( $step['icon'] ?? '' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
</div>
<h3><?php echo esc_html( $step['title'] ); ?></h3>
<p><?php echo esc_html( $step['description'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Why Clients Work With Us', 'The value clients look for when they need a delivery team that can think clearly and execute responsibly.' ); ?>
<div class="ethnic-about-benefits">
<?php foreach ( $benefits as $benefit ) : ?>
<article class="ethnic-about-benefit">
<span class="ethnic-about-benefit__marker" aria-hidden="true"></span>
<p><?php echo esc_html( $benefit ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-about-section">
<div class="ethnic-about-shell">
<?php echo ethnic_about_page_heading( 'Culture Highlights', 'A working culture designed to support quality, consistency, and sustainable delivery.' ); ?>
<div class="ethnic-about-card-grid ethnic-about-card-grid--culture">
<?php foreach ( $culture as $item ) : ?>
<article class="ethnic-about-culture-card">
<div class="ethnic-about-culture-card__media">
<img
src="<?php echo esc_url( $item['image'] ); ?>"
alt="<?php echo esc_attr( $item['alt'] ); ?>"
loading="lazy"
decoding="async"
/>
</div>
<div class="ethnic-about-culture-card__body">
<h3><?php echo esc_html( $item['title'] ); ?></h3>
<p><?php echo esc_html( $item['description'] ); ?></p>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-about-section ethnic-about-section--cta">
<div class="ethnic-about-shell">
<div class="ethnic-about-final-cta">
<div class="ethnic-about-final-cta__copy">
<p class="ethnic-about-kicker">Let’s Build Something Meaningful</p>
<h2>Looking for a digital partner that can think strategically and deliver with confidence?</h2>
<p>Whether you are planning a new platform, improving an existing experience, or scaling a delivery roadmap, we can help you move with more clarity and stronger execution.</p>
</div>
<div class="ethnic-about-actions">
<a class="ethnic-about-button ethnic-about-button--primary" href="<?php echo ethnic_about_page_url( 'contact-us' ); ?>">Start A Conversation</a>
<a class="ethnic-about-button ethnic-about-button--secondary" href="<?php echo ethnic_about_page_url( 'services' ); ?>">Explore Services</a>
</div>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_about_page_styles' ) ) {
function ethnic_about_page_styles() {
return <<<'CSS'
.page-id-114 .fullwidth-content > .ethnic-about-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
.page-id-114 #page-title.page-title-block.custom-page-title {
display: none;
}
.ethnic-about-page {
--ethnic-about-text: #0f172a;
--ethnic-about-muted: #53657d;
--ethnic-about-border: rgba(15, 23, 42, 0.1);
--ethnic-about-surface: rgba(255, 255, 255, 0.9);
--ethnic-about-surface-strong: #ffffff;
--ethnic-about-surface-soft: rgba(248, 251, 255, 0.96);
--ethnic-about-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
--ethnic-about-shadow-hover: 0 28px 70px rgba(15, 23, 42, 0.12);
--ethnic-about-accent: #2f6bff;
--ethnic-about-accent-soft: rgba(47, 107, 255, 0.12);
--ethnic-about-accent-alt: #ff7a59;
--ethnic-about-radius: 28px;
color: var(--ethnic-about-text);
}
.ethnic-about-page *,
.ethnic-about-page *::before,
.ethnic-about-page *::after {
box-sizing: border-box;
}
.ethnic-about-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-about-section + .ethnic-about-section {
margin-top: clamp(64px, 8vw, 112px);
}
.ethnic-about-section--hero {
position: relative;
padding: 0;
background: #071324;
overflow: hidden;
}
.ethnic-about-section--hero::before,
.ethnic-about-section--hero::after {
content: "";
position: absolute;
inset: 0;
}
.ethnic-about-section--hero::before {
background:
linear-gradient(92deg, rgba(5, 14, 28, 0.88) 0%, rgba(7, 18, 35, 0.8) 34%, rgba(9, 20, 38, 0.52) 66%, rgba(7, 18, 35, 0.72) 100%),
linear-gradient(180deg, rgba(7, 18, 35, 0.16), rgba(7, 18, 35, 0.5)),
var(--ethnic-about-hero-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ethnic-about-section--hero::after {
background:
radial-gradient(circle at 14% 18%, rgba(47, 107, 255, 0.26), transparent 24%),
radial-gradient(circle at 82% 22%, rgba(231, 255, 137, 0.16), transparent 18%);
pointer-events: none;
}
.ethnic-about-heading {
max-width: 760px;
margin-bottom: clamp(28px, 4vw, 40px);
}
.ethnic-about-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 30px;
margin: 0 0 14px;
padding: 6px 12px;
border-radius: 999px;
background: var(--ethnic-about-accent-soft);
color: var(--ethnic-about-accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-about-heading__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 28px;
margin: 0 0 14px;
padding: 6px 12px;
border-radius: 999px;
background: var(--ethnic-about-accent-soft);
color: var(--ethnic-about-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-about-heading__title,
.ethnic-about-hero__title,
.ethnic-about-final-cta h2 {
margin: 0;
color: var(--ethnic-about-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-about-hero__title {
max-width: 10.8ch;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.04;
letter-spacing: -0.04em;
}
.ethnic-about-heading__title,
.ethnic-about-final-cta h2 {
font-size: clamp(28px, 2.4vw, 38px);
line-height: 1.08;
letter-spacing: -0.04em;
}
.ethnic-about-page p {
color: var(--ethnic-about-muted);
font-size: 16px;
line-height: 1.7;
}
.ethnic-about-page li,
.ethnic-about-heading__copy,
.ethnic-about-hero__lead,
.ethnic-about-hero__trust {
color: var(--ethnic-about-muted);
line-height: 1.7;
}
.ethnic-about-page li,
.ethnic-about-heading__copy {
font-size: 16px;
}
.ethnic-about-hero {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: clamp(500px, 62vw, 720px);
padding: clamp(72px, 8vw, 124px) 0;
}
.ethnic-about-hero__content {
max-width: min(720px, 100%);
}
.ethnic-about-hero__lead {
margin: 18px 0 0;
max-width: 54ch;
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.75;
}
.ethnic-about-hero__trust {
max-width: 56ch;
margin: 18px 0 0;
font-size: 15px;
line-height: 1.65;
}
.ethnic-about-section--hero .ethnic-about-kicker {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff !important;
font-size: 9px;
backdrop-filter: blur(12px);
text-shadow: 0 1px 2px rgba(5, 14, 28, 0.28);
}
.ethnic-about-section--hero .ethnic-about-hero__title,
.ethnic-about-section--hero .ethnic-about-hero__lead,
.ethnic-about-section--hero .ethnic-about-hero__trust {
color: #ffffff !important;
text-shadow: 0 2px 18px rgba(5, 14, 28, 0.34);
}
.ethnic-about-section--hero .ethnic-about-hero__lead {
color: rgba(255, 255, 255, 0.9);
}
.ethnic-about-section--hero .ethnic-about-hero__trust {
color: rgba(255, 255, 255, 0.76);
}
.ethnic-about-section--hero .ethnic-about-button--primary {
background: #e7ff89;
color: #0b1730 !important;
box-shadow: 0 18px 40px rgba(5, 14, 28, 0.24);
}
.ethnic-about-section--hero .ethnic-about-button--primary:hover,
.ethnic-about-section--hero .ethnic-about-button--primary:focus-visible {
box-shadow: 0 24px 50px rgba(5, 14, 28, 0.28);
}
.ethnic-about-section--hero .ethnic-about-button--secondary {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
color: #ffffff !important;
backdrop-filter: blur(10px);
}
.ethnic-about-section--hero .ethnic-about-button--secondary:hover,
.ethnic-about-section--hero .ethnic-about-button--secondary:focus-visible {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.32);
}
.ethnic-about-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.ethnic-about-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.ethnic-about-button:hover,
.ethnic-about-button:focus-visible {
transform: translateY(-1px);
outline: none;
}
.ethnic-about-button--primary {
background: linear-gradient(135deg, var(--ethnic-about-accent), #6b7dff);
color: #ffffff !important;
box-shadow: 0 18px 40px rgba(47, 107, 255, 0.2);
}
.ethnic-about-button--primary:hover,
.ethnic-about-button--primary:focus-visible {
box-shadow: 0 24px 48px rgba(47, 107, 255, 0.24);
}
.ethnic-about-button--secondary {
background: rgba(255, 255, 255, 0.72);
border-color: var(--ethnic-about-border);
color: var(--ethnic-about-text) !important;
}
.ethnic-about-button--secondary:hover,
.ethnic-about-button--secondary:focus-visible {
border-color: rgba(47, 107, 255, 0.26);
background: rgba(255, 255, 255, 0.92);
}
.ethnic-about-grid {
display: grid;
gap: clamp(24px, 4vw, 44px);
align-items: start;
}
.ethnic-about-grid--intro,
.ethnic-about-grid--presence {
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}
.ethnic-about-prose p + p {
margin-top: 18px;
}
.ethnic-about-heading__copy {
margin-top: 10px;
}
.ethnic-about-card-grid {
display: grid;
gap: 24px;
}
.ethnic-about-card-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-about-card,
.ethnic-about-team-card,
.ethnic-about-value-card,
.ethnic-about-location-card,
.ethnic-about-culture-card,
.ethnic-about-benefit,
.ethnic-about-process__step,
.ethnic-about-timeline__card,
.ethnic-about-final-cta,
.ethnic-about-founder {
border: 1px solid var(--ethnic-about-border);
border-radius: var(--ethnic-about-radius);
background: var(--ethnic-about-surface);
box-shadow: var(--ethnic-about-shadow);
}
.ethnic-about-card,
.ethnic-about-value-card,
.ethnic-about-location-card,
.ethnic-about-process__step,
.ethnic-about-benefit,
.ethnic-about-timeline__card {
padding: clamp(24px, 3vw, 34px);
}
.ethnic-about-card,
.ethnic-about-team-card,
.ethnic-about-value-card,
.ethnic-about-location-card,
.ethnic-about-culture-card,
.ethnic-about-benefit,
.ethnic-about-process__step,
.ethnic-about-timeline__card,
.ethnic-about-final-cta,
.ethnic-about-founder {
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ethnic-about-heading__eyebrow {
font-size: 12px !important;
}
.ethnic-about-card:hover,
.ethnic-about-team-card:hover,
.ethnic-about-value-card:hover,
.ethnic-about-location-card:hover,
.ethnic-about-culture-card:hover,
.ethnic-about-benefit:hover,
.ethnic-about-process__step:hover,
.ethnic-about-timeline__card:hover,
.ethnic-about-final-cta:hover,
.ethnic-about-founder:hover {
transform: translateY(-3px);
box-shadow: var(--ethnic-about-shadow-hover);
border-color: rgba(47, 107, 255, 0.18);
}
.ethnic-about-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.08);
color: var(--ethnic-about-accent);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ethnic-about-card h3,
.ethnic-about-team-card h3,
.ethnic-about-value-card h3,
.ethnic-about-location-card h3,
.ethnic-about-culture-card h3,
.ethnic-about-process__step h3,
.ethnic-about-timeline__card h3 {
margin: 20px 0 0;
color: var(--ethnic-about-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(19px, 1.5vw, 24px);
line-height: 1.2;
letter-spacing: -0.04em;
}
.ethnic-about-card p,
.ethnic-about-team-card p,
.ethnic-about-value-card p,
.ethnic-about-location-card p,
.ethnic-about-culture-card p,
.ethnic-about-process__step p,
.ethnic-about-timeline__card p,
.ethnic-about-benefit p {
margin: 14px 0 0;
}
.ethnic-about-timeline {
position: relative;
display: grid;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.ethnic-about-timeline::before {
content: "";
position: absolute;
left: 18px;
top: 10px;
bottom: 10px;
width: 1px;
background: linear-gradient(180deg, rgba(47, 107, 255, 0.18), rgba(47, 107, 255, 0.02));
}
.ethnic-about-timeline__item {
position: relative;
padding-left: 56px;
}
.ethnic-about-timeline__item::before {
content: "";
position: absolute;
left: 9px;
top: 22px;
width: 18px;
height: 18px;
border: 4px solid #ffffff;
border-radius: 50%;
background: linear-gradient(135deg, var(--ethnic-about-accent), #6b7dff);
box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.08);
}
.ethnic-about-timeline__year,
.ethnic-about-process__number,
.ethnic-about-team-card__role,
.ethnic-about-location-card__role {
margin: 0;
color: var(--ethnic-about-accent);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ethnic-about-founder {
display: grid;
grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
gap: clamp(24px, 4vw, 40px);
padding: clamp(24px, 4vw, 40px);
background:
radial-gradient(circle at top right, rgba(47, 107, 255, 0.08), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
}
.ethnic-about-founder blockquote {
margin: 0;
color: var(--ethnic-about-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.72;
letter-spacing: -0.03em;
}
.ethnic-about-founder__meta {
display: grid;
gap: 6px;
margin-top: 24px;
}
.ethnic-about-founder__meta strong {
font-size: 1rem;
}
.ethnic-about-founder__meta span {
color: var(--ethnic-about-muted);
}
.ethnic-about-card-grid--team,
.ethnic-about-card-grid--culture {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethnic-about-team-card,
.ethnic-about-culture-card {
overflow: hidden;
}
.ethnic-about-team-card__media {
position: relative;
aspect-ratio: 1 / 1.02;
background: linear-gradient(180deg, rgba(247, 250, 255, 0.94), rgba(255, 255, 255, 1));
overflow: hidden;
}
.ethnic-about-culture-card__media {
position: relative;
aspect-ratio: 1.18 / 0.72;
background: linear-gradient(180deg, rgba(247, 250, 255, 0.94), rgba(255, 255, 255, 1));
overflow: hidden;
}
.ethnic-about-team-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ethnic-about-culture-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ethnic-about-team-card__media .ethnic-about-placeholder {
height: 100%;
min-height: 100%;
border: 0;
border-radius: 0;
}
.ethnic-about-team-card__body,
.ethnic-about-culture-card__body {
padding: 24px;
}
.ethnic-about-card-grid--values {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-about-value-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(47, 107, 255, 0.18), rgba(255, 122, 89, 0.15)),
#ffffff;
border: 1px solid rgba(47, 107, 255, 0.16);
color: var(--ethnic-about-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ethnic-about-value-card__icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-about-logo-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 18px;
}
.ethnic-about-logo-box {
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
padding: 20px;
border: 1px dashed rgba(15, 23, 42, 0.16);
border-radius: 22px;
background: rgba(255, 255, 255, 0.68);
color: var(--ethnic-about-muted);
font-size: 0.9rem;
font-weight: 600;
text-align: center;
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.ethnic-about-logo-box img {
display: block;
width: 100%;
max-width: 120px;
max-height: 56px;
object-fit: contain;
}
.ethnic-about-logo-box:hover {
transform: translateY(-2px);
border-color: rgba(47, 107, 255, 0.2);
background: rgba(255, 255, 255, 0.88);
}
.ethnic-about-process-overview {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
gap: clamp(24px, 4vw, 40px);
margin-bottom: 24px;
padding: clamp(26px, 4vw, 38px);
border: 1px solid var(--ethnic-about-border);
border-radius: calc(var(--ethnic-about-radius) + 4px);
background:
radial-gradient(circle at top left, rgba(47, 107, 255, 0.12), transparent 28%),
radial-gradient(circle at bottom right, rgba(255, 122, 89, 0.12), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
box-shadow: var(--ethnic-about-shadow);
overflow: hidden;
}
.ethnic-about-process-overview__copy {
position: relative;
z-index: 1;
}
.ethnic-about-process-overview__copy .ethnic-about-heading {
margin-bottom: 14px;
}
.ethnic-about-process-overview__lede {
max-width: 56ch;
margin: 0;
}
.ethnic-about-process-overview__visual {
position: relative;
z-index: 1;
align-self: center;
}
.ethnic-about-process-route {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.ethnic-about-process-route::before {
content: "";
position: absolute;
left: 12%;
right: 12%;
top: 24px;
height: 1px;
background: linear-gradient(90deg, rgba(47, 107, 255, 0.12), rgba(47, 107, 255, 0.36), rgba(255, 122, 89, 0.18));
}
.ethnic-about-process-route__stop {
position: relative;
display: grid;
justify-items: start;
gap: 10px;
padding: 12px 14px 14px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 23, 42, 0.08);
backdrop-filter: blur(10px);
}
.ethnic-about-process-route__icon,
.ethnic-about-process__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(47, 107, 255, 0.18), rgba(255, 122, 89, 0.15)),
#ffffff;
border: 1px solid rgba(47, 107, 255, 0.14);
color: var(--ethnic-about-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.ethnic-about-process-route__icon svg,
.ethnic-about-process__icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-about-process-route__label {
color: var(--ethnic-about-text);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.35;
}
.ethnic-about-process {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.ethnic-about-process__step {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: clamp(24px, 3vw, 32px);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
}
.ethnic-about-process__step-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ethnic-about-benefits {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.ethnic-about-benefit {
display: flex;
gap: 16px;
align-items: flex-start;
}
.ethnic-about-benefit__marker {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ethnic-about-accent), #7e91ff);
box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.08);
}
.ethnic-about-location-list {
display: grid;
gap: 18px;
}
.ethnic-about-final-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: end;
padding: clamp(28px, 5vw, 48px);
background:
radial-gradient(circle at top left, rgba(47, 107, 255, 0.12), transparent 26%),
radial-gradient(circle at bottom right, rgba(255, 122, 89, 0.12), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
}
.ethnic-about-final-cta p {
max-width: 720px;
}
.ethnic-about-media {
position: relative;
min-height: 280px;
border: 1px solid var(--ethnic-about-border);
border-radius: 32px;
background: rgba(247, 250, 255, 0.92);
box-shadow: var(--ethnic-about-shadow);
line-height: 0;
overflow: hidden;
}
.ethnic-about-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ethnic-about-media--hero {
min-height: 520px;
}
.ethnic-about-media--portrait {
min-height: 420px;
}
.ethnic-about-media--medium {
min-height: 360px;
}
.ethnic-about-founder__visual .ethnic-about-media img {
object-position: center top;
}
.ethnic-about-placeholder {
position: relative;
display: flex;
align-items: stretch;
justify-content: stretch;
min-height: 280px;
border: 1px dashed rgba(15, 23, 42, 0.16);
border-radius: 32px;
background:
radial-gradient(circle at top right, rgba(47, 107, 255, 0.12), transparent 24%),
radial-gradient(circle at 12% 20%, rgba(255, 122, 89, 0.12), transparent 22%),
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 255, 0.94));
overflow: hidden;
}
.ethnic-about-placeholder::before,
.ethnic-about-placeholder::after {
content: "";
position: absolute;
inset: auto auto -12% -10%;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(47, 107, 255, 0.08);
filter: blur(4px);
}
.ethnic-about-placeholder::after {
inset: -12% -8% auto auto;
background: rgba(255, 122, 89, 0.08);
}
.ethnic-about-placeholder__tag {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--ethnic-about-text);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ethnic-about-placeholder__frame {
position: relative;
z-index: 1;
display: grid;
align-content: center;
gap: 14px;
width: min(72%, 360px);
margin: auto;
}
.ethnic-about-placeholder__line {
display: block;
height: 12px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(47, 107, 255, 0.24), rgba(47, 107, 255, 0.08));
}
.ethnic-about-placeholder__line--wide {
width: 100%;
}
.ethnic-about-placeholder__line--short {
width: 52%;
}
.ethnic-about-placeholder--hero {
min-height: 520px;
}
.ethnic-about-placeholder--portrait {
min-height: 420px;
}
.ethnic-about-placeholder--medium,
.ethnic-about-placeholder--map {
min-height: 360px;
}
.ethnic-about-placeholder--team,
.ethnic-about-placeholder--culture {
min-height: 220px;
border-radius: 24px;
}
@media (max-width: 1200px) {
.ethnic-about-card-grid--team,
.ethnic-about-card-grid--culture {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-about-logo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-about-process-overview {
grid-template-columns: 1fr;
}
.ethnic-about-process-route {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-about-process {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.ethnic-about-grid--intro,
.ethnic-about-grid--presence,
.ethnic-about-founder,
.ethnic-about-final-cta {
grid-template-columns: 1fr;
}
.ethnic-about-card-grid--two,
.ethnic-about-card-grid--values,
.ethnic-about-benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-about-media--hero {
min-height: 420px;
}
.ethnic-about-placeholder--hero {
min-height: 420px;
}
}
@media (max-width: 767px) {
.ethnic-about-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 16px) * 2)));
}
.ethnic-about-section + .ethnic-about-section {
margin-top: 56px;
}
.ethnic-about-actions {
flex-direction: column;
align-items: stretch;
}
.ethnic-about-button {
width: 100%;
}
.ethnic-about-hero__title {
max-width: 100%;
font-size: clamp(22px, 6.8vw, 32px);
}
.ethnic-about-heading__title,
.ethnic-about-final-cta h2 {
font-size: clamp(24px, 7vw, 32px);
}
.ethnic-about-founder blockquote {
font-size: 15px;
line-height: 1.7;
}
.ethnic-about-page p,
.ethnic-about-page li,
.ethnic-about-heading__copy,
.ethnic-about-hero__lead {
font-size: 16px;
line-height: 1.68;
}
.ethnic-about-hero__trust {
font-size: 14px;
line-height: 1.65;
}
.ethnic-about-hero {
min-height: clamp(440px, 118vw, 620px);
padding: 56px 0;
align-items: flex-end;
}
.ethnic-about-card-grid--team,
.ethnic-about-card-grid--culture,
.ethnic-about-card-grid--two,
.ethnic-about-card-grid--values,
.ethnic-about-logo-grid,
.ethnic-about-process,
.ethnic-about-benefits {
grid-template-columns: 1fr;
}
.ethnic-about-process-route {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-about-process-route::before {
display: none;
}
.ethnic-about-timeline::before {
left: 14px;
}
.ethnic-about-timeline__item {
padding-left: 44px;
}
.ethnic-about-timeline__item::before {
left: 5px;
}
.ethnic-about-card,
.ethnic-about-value-card,
.ethnic-about-location-card,
.ethnic-about-process__step,
.ethnic-about-benefit,
.ethnic-about-timeline__card,
.ethnic-about-team-card__body,
.ethnic-about-culture-card__body,
.ethnic-about-final-cta,
.ethnic-about-founder {
padding: 22px;
}
.ethnic-about-placeholder--hero,
.ethnic-about-placeholder--portrait,
.ethnic-about-placeholder--medium,
.ethnic-about-placeholder--map {
min-height: 280px;
}
.ethnic-about-media--hero,
.ethnic-about-media--portrait,
.ethnic-about-media--medium {
min-height: 280px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_about_page_body_class' ) ) {
function ethnic_about_page_body_class( $classes ) {
if ( ethnic_about_page_is_target() ) {
$classes[] = 'ethnic-about-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_about_page_body_class' );
}
if ( ! function_exists( 'ethnic_about_page_enqueue_assets' ) ) {
function ethnic_about_page_enqueue_assets() {
if ( ! ethnic_about_page_is_target() ) {
return;
}
wp_dequeue_style( 'elementor-post-114' );
wp_deregister_style( 'elementor-post-114' );
}
add_action( 'wp_enqueue_scripts', 'ethnic_about_page_enqueue_assets', 120 );
}
if ( ! function_exists( 'ethnic_about_page_print_styles' ) ) {
function ethnic_about_page_print_styles() {
if ( ! ethnic_about_page_is_target() ) {
return;
}
?>
<style id="ethnic-about-page-inline-css" type="text/css">
<?php echo ethnic_about_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<?php
}
add_action( 'wp_head', 'ethnic_about_page_print_styles', 120 );
}
if ( ! function_exists( 'ethnic_about_page_replace_content' ) ) {
function ethnic_about_page_replace_content( $content ) {
if ( ! ethnic_about_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_about_page_render();
}
add_filter( 'the_content', 'ethnic_about_page_replace_content', 1000 );
}