/*! Theme Name: ECOSILO - Тканевые силоса Theme URI: https://ecosilo.kz/ Author: ECOSILO Development Team Author URI: https://ecosilo.kz/ Description: Корпоративная тема для производителя тканевых силосов в Казахстане. Чистый код, Tailwind CSS, ACF Pro, Polylang. Version: 1.0.0 Tested up to: 6.4 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: ecoguard Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready ECOSILO Theme - Built with Performance and SEO in Mind Tailwind CSS обеспечивает всю основную стилизацию */ /*-------------------------------------------------------------- # CSS Variables --------------------------------------------------------------*/ :root { --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-text: #1f2937; --color-text-light: #6b7280; --color-border: #e5e7eb; } /*-------------------------------------------------------------- # Logo --------------------------------------------------------------*/ .site-branding .custom-logo-link { display: flex; align-items: center; } .site-branding .custom-logo { max-height: 50px; width: auto; height: auto; } /*-------------------------------------------------------------- # Navigation Menus --------------------------------------------------------------*/ #primary-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.5rem; } #primary-menu li, #mobile-primary-menu li { position: relative; margin: 0; padding: 0; } #primary-menu > li { display: inline-block; } #primary-menu a { display: block; padding: 0.5rem 0; color: var(--color-text); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: color 0.2s ease; } #primary-menu a:hover, #primary-menu a:focus { color: var(--color-primary); } #mobile-primary-menu a { display: block; padding: 0.75rem 1rem; color: var(--color-text); text-decoration: none; font-weight: 500; border-radius: 0.5rem; transition: all 0.2s ease; } #mobile-primary-menu a:hover, #mobile-primary-menu a:focus { background-color: #f3f4f6; color: var(--color-primary); } #primary-menu .current-menu-item > a, #primary-menu .current_page_item > a, #mobile-primary-menu .current-menu-item > a, #mobile-primary-menu .current_page_item > a { color: var(--color-primary); font-weight: 600; } /* Dropdown */ #primary-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: white; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); border-radius: 0.75rem; padding: 0.5rem; min-width: 240px; z-index: 1000; margin-top: 0.25rem; list-style: none; border: 1px solid #e5e7eb; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } /* Мост между родительским элементом и подменю для плавного перехода */ #primary-menu .menu-item-has-children > a::before { content: ''; position: absolute; top: 100%; left: -10px; right: -10px; height: 20px; display: block; } #primary-menu li:hover > .sub-menu, #primary-menu li:focus-within > .sub-menu { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; } #primary-menu .sub-menu li { display: block; position: relative; } #primary-menu .sub-menu a { padding: 0.75rem 1rem; font-size: 0.875rem; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.15s ease; } #primary-menu .sub-menu a:hover, #primary-menu .sub-menu a:focus { background-color: #eff6ff; color: var(--color-primary); padding-left: 1.25rem; } /* Стрелочка для пунктов с подменю */ #primary-menu .menu-item-has-children > a::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 0.5rem; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.2s ease; } #primary-menu .menu-item-has-children:hover > a::after { transform: rotate(180deg); } /* Вложенное подменю (3-й уровень) */ #primary-menu .sub-menu .sub-menu { top: 0; left: 100%; margin-top: 0; margin-left: 0.5rem; } #primary-menu .sub-menu li:hover > .sub-menu { left: 100%; } /*-------------------------------------------------------------- # Polylang Language Switcher --------------------------------------------------------------*/ .lang-item { display: inline-block; margin: 0; } .lang-item a { display: inline-block; padding: 0.25rem 0.5rem; color: var(--color-text-light); text-decoration: none; text-transform: uppercase; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; transition: all 0.2s ease; border-radius: 0.25rem; } .lang-item a:hover, .lang-item a:focus { color: var(--color-primary); background-color: #eff6ff; } .lang-item.current-lang a { color: var(--color-primary); background-color: #dbeafe; font-weight: 700; } .lang-item + .lang-item::before { content: '|'; color: var(--color-border); margin: 0 0.25rem; } /*-------------------------------------------------------------- # Footer Menus --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ .skip-link { position: absolute; left: -9999px; top: 2.5rem; z-index: 999999; background-color: var(--color-primary); color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 0.25rem; } .skip-link:focus { left: 1rem; } .screen-reader-text, .sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .screen-reader-text:focus, .sr-only:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /*-------------------------------------------------------------- # Mobile Menu - Tailwind-First Approach ( X Q  Q X!S X CSS) --------------------------------------------------------------*/ /*  U!! U!  Q! U! T!!9 ! Q! X � !  */ #mobile-menu.active { opacity: 1; visibility: visible; } #mobile-menu.active #mobile-menu-content { opacity: 1; transform: scale(1); } /* Submenu Visibility Control */ .mobile-menu-list .sub-menu { display: none; /* Tailwind T � �!!!9  header.php � U � �  �!! ! !! Q � Q (padding, bg), � � �!!  ! U �!  T U visibility */ } .mobile-menu-list .menu-item-has-children.submenu-open > .sub-menu { display: block; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ! ! � � T � (Chevron)  � CSS ! . T.  � �!  �! !! �  Q! !  SVG !! �! � � wp_nav_menu � � � Walker */ .mobile-menu-list .menu-item-has-children > a::after { content: ''; display: inline-block; width: 0.6em; height: 0.6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: 0.5rem; margin-top: -0.25rem; /* Visual alignment */ } .mobile-menu-list .menu-item-has-children.submenu-open > a::after { transform: rotate(-135deg); margin-top: 0.25rem; }