File: /var/www/viitorcloud.stgviitor.com/Viitorcloud3.0-wp/wp-content/themes/viitorcloud/header.php
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package viitorcloud
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<?php
$main_logo = get_field('main_logo', 'option');
$sticky_logo = get_field('sticky_logo', 'option');
?>
<head>
<link rel="preload" as="image" href="<?php echo $main_logo['url']; ?>">
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="preconnect" href="https://code.jquery.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="dns-prefetch" href="https://code.jquery.com">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/assets/fonts/jost/Jost-Book.woff2" as="font" type="font/woff2" crossorigin>
<script>
document.documentElement.classList.add('loading');
window.addEventListener('load', function() {
document.documentElement.classList.remove('loading');
});
</script>
<style>
.loading header div nav a,
.loading header div nav div,
.loading header div nav div ul,
.loading header div nav div ul li,
.loading header div nav div ul li a,
.loading header div nav div ul li a span {
pointer-events: none !important;
}
body {
font-family: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.home-banner {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
padding-bottom: 2rem;
overflow: hidden
}
.home-banner .container {
position: relative;
z-index: 1
}
.home-banner img {
position: absolute;
height: 100%;
width: 100%;
inset: 0;
object-fit: cover
}
.bg-crayola-900 {
background-color: var(--crayola-900)
}
.bg-verdigris-900 {
background-color: var(--verdigris-900)
}
.text-white {
color: #fff
}
.text-grey-100 {
color: var(--grey-100)
}
.text-\[\#00EBD2\] {
color: #00EBD2
}
@media(min-width:768px) {
.home-banner {
min-height: 600px;
align-items: center;
padding-bottom: 0
}
}
@media(min-width:1024px) {
.home-banner {
min-height: 840px
}
}
@media(min-width:1280px) {
.home-banner {
min-height: 100vh
}
}
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<header id="masthead" class="site-header fixed top-0 left-0 w-full z-50 transition-all duration-300 hover:bg-white bg-transparent">
<div class="site-branding container mx-auto flex items-center justify-between">
<div class="flex-shrink-0">
<div class="cs-logo">
<a href="<?php echo home_url(); ?>" class="xl:w-[209px] xl:h-[38px] w-[130px] h-[34px] block mb-1 md:my-4">
<!-- Default logo (visible at top) -->
<img src="<?php echo $main_logo['url']; ?>" fetchpriority="high" class="default-logo block transition-opacity duration-300" width="210" height="40" alt="Logo">
<!-- Sticky logo (hidden initially) -->
<img src="<?php echo $sticky_logo['url']; ?>" class="sticky-logo hidden opacity-0 transition-opacity duration-300" width="130" height="40" alt="Logo" loading="lazy">
</a>
</div>
</div>
<div class="flex items-center flex-shrink-0 gap-2">
<nav id="site-navigation" class="main-navigation lg:block">
<?php
wp_nav_menu([
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'menu_class' => 'flex space-x-4 xl:space-x-8 text-white font-medium transition-colors duration-300',
]);
?>
</nav>
<div class="flex items-center space-x-1 sm:space-x-2">
<a href="tel:+918488964723" aria-label="Call Us" class="cta-btn-modal lg:hidden rounded-[6px] transition duration-300 ease-in-out inline-flex items-center bg-indigo-800 text-black-900 hover:bg-black-900 hover:text-white focus:bg-black-900 focus:text-white xl:text-body8 text-body9 px-2 min-h-[28px] font-semibold md:font-normal"> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/phone-icon.svg'); ?>" alt="phone Icon" width="20" height="20" class="w-5 h-5 sm:w-5 sm:h-5"> </a>
<button type="submit" class="cta-btn-modal hidden lg:inline-flex rounded-[6px] transition duration-300 ease-in-out inline-flex items-center bg-indigo-800 text-black-900 hover:bg-black-900 hover:text-white focus:bg-black-900 focus:text-white xl:text-body8 text-body9 px-5 min-h-[32px] font-semibold md:font-normal" data-modal-class="modal">Let's Connect</button>
<a href="https://wa.me/918488964723" target="_blank" class="flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 transition duration-300 ease-in-out text-white hover:opacity-90 focus:opacity-90 pl-2">
<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/whatsapp-icon.svg'); ?>" alt="WhatsApp Icon" width="25" height="25">
</a>
<?php echo do_shortcode('[gtranslate]'); ?>
</div>
</div>
</div>
</header>