hesabixWpTheme/header.php

<?php
/**
 * هدر - طرح جدید با پالت چندرنگ
 *
 * @package Hesabix2
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> dir="rtl" class="scroll-smooth">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <?php wp_head(); ?>
    <?php
    $font_dir = get_template_directory() . '/assets/fonts';
    $font_regular = $font_dir . '/woff2/YekanBakhFaNum-Regular.woff2';
    $font_bold    = $font_dir . '/woff2/YekanBakhFaNum-Bold.woff2';
    $data_regular = is_readable( $font_regular ) ? base64_encode( file_get_contents( $font_regular ) ) : '';
    $data_bold    = is_readable( $font_bold ) ? base64_encode( file_get_contents( $font_bold ) ) : '';
    $font_base    = get_template_directory_uri() . '/assets/fonts';
    ?>
    <style id="hesabix2-fonts-inline">
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: <?php if ( $data_regular ) : ?>url(data:font/woff2;base64,<?php echo $data_regular; ?>) format('woff2')<?php else : ?>url('<?php echo esc_url( $font_base ); ?>/woff2/YekanBakhFaNum-Regular.woff2') format('woff2'), url('<?php echo esc_url( $font_base ); ?>/woff/YekanBakhFaNum-Regular.woff') format('woff')<?php endif; ?>;
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: <?php if ( $data_bold ) : ?>url(data:font/woff2;base64,<?php echo $data_bold; ?>) format('woff2')<?php else : ?>url('<?php echo esc_url( $font_base ); ?>/woff2/YekanBakhFaNum-Bold.woff2') format('woff2'), url('<?php echo esc_url( $font_base ); ?>/woff/YekanBakhFaNum-Bold.woff') format('woff')<?php endif; ?>;
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('<?php echo esc_url( $font_base ); ?>/woff2/YekanBakhFaNum-Thin.woff2') format('woff2'), url('<?php echo esc_url( $font_base ); ?>/woff/YekanBakhFaNum-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('<?php echo esc_url( $font_base ); ?>/woff2/YekanBakhFaNum-Light.woff2') format('woff2'), url('<?php echo esc_url( $font_base ); ?>/woff/YekanBakhFaNum-Light.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('<?php echo esc_url( $font_base ); ?>/woff2/YekanBakhFaNum-ExtraBold.woff2') format('woff2'), url('<?php echo esc_url( $font_base ); ?>/woff/YekanBakhFaNum-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Yekan Bakh FaNum';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('<?php echo esc_url( $font_base ); ?>/woff2/YekanBakhFaNum-Black.woff2') format('woff2'), url('<?php echo esc_url( $font_base ); ?>/woff/YekanBakhFaNum-Black.woff') format('woff');
}
    </style>
</head>
<body <?php body_class('bg-light-50 text-slate-800'); ?>>
<?php wp_body_open(); ?>

<header class="sticky top-0 z-50 bg-white border-b border-slate-200/80 shadow-[0_1px_3px_0_rgba(0,0,0,0.06)]">
    <!-- نوار تاکید بالایی -->
    <div class="h-0.5 w-full bg-gradient-to-l from-brand-500 via-brand-400 to-accent-400"></div>
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16 sm:h-[4.25rem] gap-3 w-full min-w-0">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="site-brand flex items-center gap-3.5 group no-underline min-w-0">
                <?php
                $custom_logo_id = get_theme_mod('custom_logo');
                $site_icon_url   = get_site_icon_url(96);
                if ($custom_logo_id) :
                    $logo = wp_get_attachment_image_src($custom_logo_id, 'medium');
                    if ($logo) :
                ?>
                    <span class="site-brand-icon flex-shrink-0 w-11 h-11 rounded-xl overflow-hidden ring-2 ring-slate-100 group-hover:ring-brand-200 transition-all duration-200 group-hover:scale-[1.02] bg-white flex items-center justify-center">
                        <img src="<?php echo esc_url($logo[0]); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" class="w-full h-full object-contain" width="44" height="44" loading="eager">
                    </span>
                <?php
                    endif;
                elseif ($site_icon_url) : ?>
                    <span class="site-brand-icon flex-shrink-0 w-11 h-11 rounded-xl overflow-hidden ring-2 ring-slate-100 group-hover:ring-brand-200 transition-all duration-200 group-hover:scale-[1.02] bg-white flex items-center justify-center">
                        <img src="<?php echo esc_url($site_icon_url); ?>" alt="" class="w-full h-full object-contain" width="44" height="44" loading="eager">
                    </span>
                <?php else : ?>
                    <span class="site-brand-letter flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center text-white text-lg font-bold shadow-md shadow-brand-500/25 group-hover:shadow-lg group-hover:shadow-brand-500/30 group-hover:scale-[1.02] transition-all duration-200">
                        <?php echo esc_html(mb_substr(get_bloginfo('name'), 0, 1)); ?>
                    </span>
                <?php endif; ?>
                <span class="site-brand-name text-xl font-bold text-slate-800 tracking-tight group-hover:text-brand-600 transition-colors duration-200">
                    <?php echo esc_html(get_bloginfo('name')); ?>
                </span>
            </a>
            <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1 justify-end">
                <nav class="hidden lg:flex items-center gap-1 header-desktop-nav flex-shrink-0" aria-label="<?php esc_attr_e( 'منوی اصلی', 'hesabix2' ); ?>">
                    <?php if (has_nav_menu('primary')) : ?>
                        <?php wp_nav_menu(array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'header-menu flex items-center gap-1 [&>li]:m-0 [&>li>a]:px-4 [&>li>a]:py-2.5 [&>li>a]:rounded-lg [&>li>a]:text-sm [&>li>a]:transition [&>li>a]:inline-block [&>li>a]:font-medium')); ?>
                    <?php else : ?>
                        <a href="<?php echo esc_url(home_url('/')); ?>#features" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">امکانات پلتفرم</a>
                        <a href="<?php echo esc_url(home_url('/')); ?>#online-business" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">کسب‌وکار آنلاین</a>
                        <a href="<?php echo esc_url(home_url('/')); ?>#guide" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">راهنمای جامع</a>
                        <a href="<?php echo esc_url(home_url('/pishibani-sazmani/')); ?>" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">پشتیبانی سازمانی</a>
                        <a href="<?php echo esc_url(get_option('page_for_posts') ? get_permalink(get_option('page_for_posts')) : home_url('/')); ?>" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">وبلاگ</a>
                        <a href="<?php echo esc_url(home_url('/')); ?>#supporters" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">حامیان</a>
                        <a href="<?php echo esc_url(home_url('/contact/')); ?>" class="px-4 py-2.5 rounded-lg text-slate-600 hover:text-brand-600 hover:bg-light-100 text-sm font-medium transition">تماس</a>
                    <?php endif; ?>
                </nav>
                <form role="search" method="get" class="header-site-search hidden lg:flex items-center flex-1 max-w-[9.5rem] xl:max-w-[13rem] min-w-0" action="<?php echo esc_url(home_url('/')); ?>">
                    <label for="header-search-field" class="sr-only"><?php esc_html_e('جستجو در سایت', 'hesabix2'); ?></label>
                    <input type="search" id="header-search-field" name="s" value="<?php echo esc_attr(get_search_query()); ?>" class="w-full text-sm px-3 py-2 rounded-xl border border-slate-200 bg-slate-50/80 text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition" placeholder="<?php esc_attr_e('جستجو...', 'hesabix2'); ?>" autocomplete="off">
                </form>
                <?php if ( function_exists( 'hesabix2_wc_render_header_cart' ) ) : ?>
                    <?php hesabix2_wc_render_header_cart(); ?>
                <?php endif; ?>
            </div>
            <button type="button" id="menu-toggle" class="lg:hidden relative z-[60] w-11 h-11 rounded-xl flex items-center justify-center text-slate-600 hover:text-brand-600 hover:bg-slate-100 active:bg-slate-200 transition-colors touch-manipulation border-0 cursor-pointer flex-shrink-0" aria-label="<?php esc_attr_e( 'باز و بسته کردن منو', 'hesabix2' ); ?>" aria-expanded="false" aria-controls="mobile-menu">
                <span class="menu-icon-open inline-flex flex-col gap-1.5" aria-hidden="true">
                    <span class="w-6 h-0.5 bg-current rounded-full"></span>
                    <span class="w-6 h-0.5 bg-current rounded-full"></span>
                    <span class="w-6 h-0.5 bg-current rounded-full"></span>
                </span>
                <span class="menu-icon-close hidden w-6 h-6" aria-hidden="true">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                </span>
            </button>
        </div>
    </div>
</header>
<?php // منوی موبایل بیرون از header: backdrop-filter روی header.sticky باعث می‌شود fixed فرزند فقط به جعبهٔ هدر محدود شود. ?>
<!-- منوی موبایل: پس‌زمینه تیره + دراور از راست -->
<div id="mobile-menu" class="hesabix-mobile-menu lg:hidden fixed inset-0 z-40" aria-hidden="true" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e( 'منوی ناوبری', 'hesabix2' ); ?>">
    <div id="mobile-menu-backdrop" class="hesabix-mobile-backdrop absolute inset-0 bg-slate-900/50 backdrop-blur-sm" style="touch-action: none;"></div>
    <div class="hesabix-mobile-drawer absolute top-0 right-0 bottom-0 w-full max-w-[min(20rem,85vw)] bg-white border-l border-slate-200 shadow-2xl flex flex-col overflow-hidden">
        <div class="flex items-center justify-between flex-shrink-0 h-16 px-4 border-b border-slate-100">
            <span class="text-slate-500 text-sm font-medium"><?php esc_html_e( 'منو', 'hesabix2' ); ?></span>
            <button type="button" id="menu-close" class="w-10 h-10 rounded-xl flex items-center justify-center text-slate-600 hover:text-brand-600 hover:bg-slate-100 transition-colors -me-1" aria-label="<?php esc_attr_e( 'بستن منو', 'hesabix2' ); ?>">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <nav class="flex flex-col gap-0.5 flex-1 overflow-y-auto py-4 px-3" aria-label="<?php esc_attr_e( 'منوی موبایل', 'hesabix2' ); ?>">
            <?php if ( function_exists( 'hesabix2_wc_render_mobile_cart_link' ) ) : ?>
                <?php hesabix2_wc_render_mobile_cart_link(); ?>
            <?php endif; ?>
            <?php if (has_nav_menu('primary')) : ?>
                <?php wp_nav_menu(array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'flex flex-col gap-0.5 list-none m-0 p-0 nav-mobile-list')); ?>
            <?php else : ?>
                <form role="search" method="get" class="px-3 pb-2" action="<?php echo esc_url(home_url('/')); ?>">
                    <label for="mobile-search-field" class="sr-only"><?php esc_html_e('جستجو در سایت', 'hesabix2'); ?></label>
                    <input type="search" id="mobile-search-field" name="s" class="w-full text-sm px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500" placeholder="<?php esc_attr_e('جستجو در نوشته‌ها و برگه‌ها...', 'hesabix2'); ?>">
                </form>
                <a href="<?php echo esc_url(home_url('/')); ?>#features" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">امکانات پلتفرم</a>
                <a href="<?php echo esc_url(home_url('/')); ?>#online-business" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">کسب‌وکار آنلاین</a>
                <a href="<?php echo esc_url(home_url('/')); ?>#guide" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">راهنمای جامع</a>
                <a href="<?php echo esc_url(home_url('/pishibani-sazmani/')); ?>" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">پشتیبانی سازمانی</a>
                <a href="<?php echo esc_url(get_option('page_for_posts') ? get_permalink(get_option('page_for_posts')) : home_url('/')); ?>" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">وبلاگ</a>
                <a href="<?php echo esc_url(home_url('/')); ?>#supporters" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">حامیان</a>
                <a href="<?php echo esc_url(home_url('/contact/')); ?>" class="hesabix-mobile-link py-4 px-4 rounded-xl text-slate-700 hover:text-brand-600 hover:bg-light-100 font-medium transition">تماس</a>
            <?php endif; ?>
        </nav>
    </div>
</div>
<script>
(function(){
    function initMobileMenu() {
        var btn = document.getElementById('menu-toggle');
        var closeBtn = document.getElementById('menu-close');
        var panel = document.getElementById('mobile-menu');
        var backdrop = document.getElementById('mobile-menu-backdrop');
        if (!btn || !panel) return;

        var iconOpen = btn.querySelector('.menu-icon-open');
        var iconClose = btn.querySelector('.menu-icon-close');

        function openMenu() {
            panel.classList.add('is-open');
            panel.setAttribute('aria-hidden', 'false');
            if (btn) btn.setAttribute('aria-expanded', 'true');
            if (iconOpen) iconOpen.classList.add('hidden');
            if (iconClose) iconClose.classList.remove('hidden');
            document.body.classList.add('hesabix-menu-open');
            document.documentElement.style.overflow = 'hidden';
            document.body.style.overflow = 'hidden';
        }
        function closeMenu() {
            panel.classList.remove('is-open');
            panel.setAttribute('aria-hidden', 'true');
            if (btn) btn.setAttribute('aria-expanded', 'false');
            if (iconOpen) iconOpen.classList.remove('hidden');
            if (iconClose) iconClose.classList.add('hidden');
            document.body.classList.remove('hesabix-menu-open');
            document.documentElement.style.overflow = '';
            document.body.style.overflow = '';
        }

        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (panel.classList.contains('is-open')) closeMenu(); else openMenu();
        });
        if (closeBtn) closeBtn.addEventListener('click', closeMenu);
        if (backdrop) backdrop.addEventListener('click', closeMenu);

        var nav = panel.querySelector('nav');
        if (nav) {
            nav.addEventListener('click', function(e) {
                var a = e.target.closest('a');
                if (a && a.href) closeMenu();
            });
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && panel.classList.contains('is-open')) closeMenu();
        });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileMenu);
    } else {
        initMobileMenu();
    }
})();
</script>