File: /var/www/e-tdr.com/e-tdr/wp-content/themes/e-tdr/header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title('|', true, 'right');
bloginfo('name'); ?></title>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<?php
if (is_front_page() || is_home() || get_page_template_slug() == 'front-page.php') {
$page_sections = get_field('page_sections');
if ($page_sections) {
foreach ($page_sections as $section) {
if (isset($section['acf_fc_layout']) && $section['acf_fc_layout'] == 'hero_section') {
$desktop_img = isset($section['banner_image']) ? $section['banner_image'] : null;
$mobile_img = isset($section['hero_image_mobile']) ? $section['hero_image_mobile'] : null;
// Mobile preload (Responsive)
if ($mobile_img && isset($mobile_img['url'])) {
$mob_srcset_parts = [];
// Full size (often 1080w)
$mob_srcset_parts[] = esc_url($mobile_img['url']) . ' ' . (int)($mobile_img['width'] ?? 1080) . 'w';
// Standard WP responsive sizes for mobile
if (isset($mobile_img['sizes']['large'])) {
$mob_srcset_parts[] = esc_url($mobile_img['sizes']['large']) . ' 1024w';
}
if (isset($mobile_img['sizes']['medium_large'])) {
$mob_srcset_parts[] = esc_url($mobile_img['sizes']['medium_large']) . ' 768w';
}
echo '<link rel="preload" as="image"'
. ' imagesrcset="' . esc_attr(implode(', ', $mob_srcset_parts)) . '"'
. ' imagesizes="100vw"'
. ' href="' . esc_url($mobile_img['url']) . '"'
. ' media="(max-width: 767px)"'
. ' fetchpriority="high">';
} elseif ($desktop_img && isset($desktop_img['url'])) {
$fallback = isset($desktop_img['sizes']['medium_large']) ? $desktop_img['sizes']['medium_large'] : $desktop_img['url'];
echo '<link rel="preload" as="image" href="' . esc_url($fallback) . '" media="(max-width: 767px)" fetchpriority="high">';
}
// Desktop preload
if ($desktop_img && isset($desktop_img['url'])) {
$srcset_parts = [];
$srcset_parts[] = esc_url($desktop_img['url']) . ' ' . (int)($desktop_img['width'] ?? 1920) . 'w';
if (isset($desktop_img['sizes']['large'])) {
$srcset_parts[] = esc_url($desktop_img['sizes']['large']) . ' 1024w';
}
if (isset($desktop_img['sizes']['medium_large'])) {
$srcset_parts[] = esc_url($desktop_img['sizes']['medium_large']) . ' 768w';
}
echo '<link rel="preload" as="image"'
. ' imagesrcset="' . esc_attr(implode(', ', $srcset_parts)) . '"'
. ' imagesizes="100vw"'
. ' href="' . esc_url($desktop_img['url']) . '"'
. ' media="(min-width: 768px)"'
. ' fetchpriority="high">';
}
break;
}
}
}
}
?>
<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<?php
// Preload the most common font weights to prevent any flash of unstyled text
$font_url = get_template_directory_uri() . '/fonts/';
?>
<link rel="preload" href="<?php echo $font_url; ?>urbanist-v18-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo $font_url; ?>urbanist-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('<?php echo $font_url; ?>urbanist-v18-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('<?php echo $font_url; ?>urbanist-v18-latin-700.woff2') format('woff2');
}
</style>
<style id="critical-css">
:root {
--brand: #0A3161;
--brand-dark: #061e3e;
--orange: #f07020;
--orange-dark: #d85e10;
--navy: #030c18;
--body-bg: #f0f3f8;
--white: #fff;
--border: #cdd8ea;
--text: #111827;
--muted: #566070
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0
}
html {
scroll-behavior: smooth
}
body {
font-family: 'Urbanist', sans-serif;
background: var(--body-bg);
color: var(--text);
font-size: 15px;
line-height: 1.65;
display: flex;
flex-direction: column;
min-height: 100vh
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
@media(min-width:576px) {
.container {
max-width: 540px
}
}
@media(min-width:768px) {
.container {
max-width: 720px
}
}
@media(min-width:992px) {
.container {
max-width: 960px
}
}
@media(min-width:1200px) {
.container {
max-width: 1140px
}
}
@media(min-width:1400px) {
.container {
max-width: 1320px
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}
[class*="col-"] {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px
}
@media(min-width:992px) {
.col-lg-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%
}
}
.d-flex {
display: flex !important
}
.flex-wrap {
flex-wrap: wrap !important
}
.gap-3 {
gap: 1rem !important
}
.position-relative {
position: relative !important
}
.text-start {
text-align: left !important
}
.text-center {
text-align: center !important
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important
}
.collapse:not(.show) {
display: none
}
.navbar {
background: #fff !important;
border-bottom: 1px solid var(--border);
padding: .6rem 0;
position: sticky;
top: 0;
z-index: 1020;
min-height: 60px;
display: flex;
align-items: center
}
@media(max-width:767px) {
.navbar {
min-height: 80px
}
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between
}
.navbar-logo-wrap {
min-width: 120px;
min-height: 40px;
display: flex;
align-items: center
}
.navbar-logo-wrap img {
height: 40px;
width: auto;
display: block
}
.navbar-toggler {
background: transparent;
border: none;
cursor: pointer;
padding: .25rem .75rem;
min-width: 44px;
min-height: 44px
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.btn-nav-demo {
background: var(--navy);
color: #fff;
font-size: .86rem;
font-weight: 700;
padding: .48rem 1.2rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none
}
.hero {
padding: 80px 0 90px;
color: #fff;
position: relative;
min-height: 500px;
overflow: hidden;
background: var(--brand)
}
.hero-bg-wrap {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none
}
.hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.hero-overlay {
position: absolute;
inset: 0;
background-image: linear-gradient(155deg, rgba(4, 15, 30, .9) 0%, rgba(10, 49, 97, .85) 55%, rgba(26, 82, 150, .8) 100%);
z-index: 1
}
.hero .container {
position: relative;
z-index: 2
}
.hero h1 {
font-size: 2.9rem;
font-weight: 900;
color: #fff;
line-height: 1.13
}
.hero-p {
color: rgba(255, 255, 255, .75);
font-size: .98rem;
max-width: 500px;
margin: 1.2rem 0 2.2rem;
line-height: 1.75
}
.btn-hero-primary,
.btn-hero-outline {
display: inline-flex;
align-items: center;
gap: 7px;
padding: .72rem 1.55rem;
border-radius: 8px;
text-decoration: none;
font-weight: 700
}
.btn-hero-primary {
background: var(--orange-dark);
color: #fff
}
.btn-hero-outline {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, .4)
}
.ct-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(4, 15, 30, 0.85);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center
}
@media(max-width:767px) {
.hero {
padding: 56px 0 64px;
min-height: 580px
}
.hero h1 {
font-size: 2rem;
margin-top: 0
}
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
color: rgba(255, 255, 255, .9);
font-size: .77rem;
font-weight: 600;
padding: .3rem .95rem;
border-radius: 50px;
margin-bottom: 1.6rem
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1.8rem;
margin-top: 2.5rem
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 7px;
color: rgba(255, 255, 255, .65);
font-size: .83rem;
font-weight: 500
}
.sec {
padding: 76px 0
}
.sec-white {
background: #fff
}
.sec-title {
font-size: 1.95rem;
font-weight: 800;
line-height: 1.22;
margin-bottom: .7rem
}
.blog-img-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: #eee;
border-radius: 12px;
overflow: hidden
}
/* Responsive images with intrinsic ratio protection */
img.wp-post-image, img.img-fluid { max-width: 100%; height: auto; }
.sec .sec-label,
.sec .sec-title,
.sec .sec-sub,
.sec .row>[class*="col-"] {
opacity: 0;
transition: opacity .6s ease;
will-change: opacity;
}
.sec .sec-label.is-visible,
.sec .sec-title.is-visible,
.sec .sec-sub.is-visible,
.sec .row>[class*="col-"].is-visible {
opacity: 1;
transform: translateY(0);
}
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<div class="navbar-logo-wrap">
<?php
$logo = get_field('header_logo', 'option');
if ($logo):
?>
<a href="<?php echo esc_url(home_url('/')); ?>">
<img src="<?php echo esc_url($logo['url']); ?>" alt="<?php echo esc_attr($logo['alt']); ?>">
</a>
<?php endif; ?>
</div>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<?php
wp_nav_menu(array(
'theme_location' => 'menu-1',
'menu_class' => 'navbar-nav mx-auto',
'container' => false,
'fallback_cb' => false,
));
?>
<a href="#" class="btn-nav-demo js-contact-modal">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="vertical-align:text-bottom;margin-right:6px"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/></svg> Contact Us
</a>
</div>
</div>
</nav>
<main id="primary" class="site-main">