/* Theme Name: High Tech Supplies Theme URI: https://www.hightech-ndt.com/ Description: Custom theme based on Kadence Author: Melvin Nava Author URI: http://www.advance-e.com Template: kadence Version: 1.0.0 */ /************************************************** * style.css * * Date : 2026-02-05 12:53 * * Last : 2026-04-13 04:11 * * Author : Melvin D. Nava * * URL : https://www.advance-e.com/ * *************************************************** /*************************** Header ***************************/ /* Mark currently active language (flag) */ .lang-item.current-lang a { position: relative; display: inline-block; } .lang-item.current-lang a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: darkblue; } /* Smooth transition for the logo */ .site-logo-img { transition: all 0.3s ease-in-out; } .is-sticky .site-logo-img { max-width: 120px; } /* Shrink logo when header is sticky */ .kadence-sticky-header.is-sticky { box-shadow: 0 4px 10px rgba(0,0,0,0.1); } /* Add a subtle shadow to the sticky header */ .site-branding { display: flex; align-items: center; transition: padding 0.3s ease; } /* Ensure the branding container has a stable base */ .site-branding img { transition: max-height 0.3s ease-in-out, transform 0.3s ease-in-out !important; display: block; } /* Transition the logo image height smoothly */ .kadence-sticky-header.is-sticky .site-branding img { max-height: 40px !important; } /* Target the sticky state specifically */ .main-header-bar-inner { transition: padding 0.3s ease-in-out, min-height 0.3s ease-in-out; } /* Prevents the 'jump' by keeping the row height transition synced */ /*************************** Remove padding between header and content ***************************/ /* Remove margin/padding between header and content */ /* 1. Only strip top padding on the Homepage (for the flush hero image) */ .home #content.site-content { padding-top: 0 !important; } /* 2. Restore space for Breadcrumbs on all other pages */ .kadence-breadcrumbs { padding-top: 25px; padding-bottom: 15px; margin-top: 0; } #inner-wrap { padding-top: 0 !important; margin-top: 0 !important; } #content { padding-top: 0 !important; } .entry-content > .wp-block-kadence-rowlayout:first-child { margin-top: 0 !important; } /* If you have the Page Title enabled, it adds its own padding */ .entry-header { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Remove vertical padding from the main content container */ #content.site-content { padding-top: 0 !important; } /* Remove top margin from the main container and the first element */ #primary, #main, article.page { margin-top: 0 !important; padding-top: 0 !important; } /* Ensure the first image or block in the content area has no top margin */ .entry-content > *:first-child { margin-top: 0 !important; } /* Fix for WordPress block images with 'alignfull' */ .wp-block-image.alignfull { margin-top: 0 !important; } /*************************** HTML Search Form ***************************/ /* Container for the search form */ /* Container for the search to prevent collapse */ .hts-search-wrapper { display: flex; align-items: center; padding: 5px 0; } .hts-header-search { display: flex; align-items: center; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; overflow: hidden; height: 32px; width: 220px; } .hts-header-search .search-field { background: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important; font-size: 14px !important; padding: 0 10px !important; width: 100% !important; height: 100% !important; outline: none !important; } .hts-header-search .search-field::placeholder { color: rgba(255, 255, 255, 0.7); } /* Make placeholder visible */ .hts-header-search .search-submit { background: #0073aa; border: none; color: white; padding: 0 10px; height: 100%; cursor: pointer; font-size: 14px; transition: background 0.2s ease; } .hts-header-search .search-submit:hover { background: #005177; } /*************************** DROPDOWN MENU LIGHTER COLORS ***************************/ #site-navigation .sub-menu { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1) !important; padding: 10px 0 !important; } #site-navigation .sub-menu .menu-item a { color: #334155 !important; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } #site-navigation .sub-menu .menu-item a:hover { background-color: #f8fafc !important; color: #0D2941 !important; padding-left: 25px !important; } #site-navigation .sub-menu::-webkit-scrollbar { width: 8px; } #site-navigation .sub-menu::-webkit-scrollbar-track { background: #e2e8f0; } #site-navigation .sub-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #e2e8f0; } #site-navigation .sub-menu::-webkit-scrollbar-thumb:hover { background: #94a3b8; } #site-navigation .sub-menu .menu-item-has-children > a::after { border-color: #64748b !important; } /* Add a subtle line separator between each menu item */ #site-navigation .sub-menu li { border-bottom: 1px solid #e2e8f0 !important; /* Very light gray separator */ } #site-navigation .sub-menu li a { padding-top: 10px !important; padding-bottom: 10px !important; display: block !important; } #site-navigation .sub-menu li:last-child { border-bottom: none !important; } #site-navigation .sub-menu .sub-menu { border-left: 2px solid #e2e8f0 !important; margin-left: 10px; } /* Force 'Current' sub-menu items to stay light */ #site-navigation .sub-menu li.current-menu-item > a, #site-navigation .sub-menu li.current_page_item > a, #site-navigation .sub-menu li.current-menu-ancestor > a { background-color: #ffffff !important; color: #334155 !important; /* The lighter slate color you used */ } /* Ensure the hover still works even when it is the current item */ #site-navigation .sub-menu li.current-menu-item > a:hover, #site-navigation .sub-menu li.current-page-item > a:hover { background-color: #f8fafc !important; color: #0D2941 !important; padding-left: 25px !important; } /* Create a bridge for the first-level dropdown and nested (side) submenus */ /* This prevents menus from closing suddenly if the mouse is moved to slow to reach a sub-menu */ .menu-item-has-children > ul.sub-menu::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px; display: block; } .sub-menu .menu-item-has-children > ul.sub-menu::before { top: 0; left: -20px; width: 20px; height: 100%; } /*************************** HOMEPAGE MODS ***************************/ /* Homepage rounded image for "About Us" snippet (can be removed if that block is removed)*/ .custom-rounded-shadow img, .custom-rounded-shadow { border: none !important; outline: none !important; box-shadow: none; border-radius: 20px !important; filter: drop-shadow(6px 9px 4px rgba(0, 0, 0, 0.5)); overflow: hidden; } /* Animate: Homepage "Everest Mentor Visual iQ" */ /* Can be expanded to be used in other places */ .reveal-from-right { opacity: 0; transform: translateX(80px); transition: all 1s ease-out; } .reveal-from-top { opacity: 0; transform: translateY(-80px); transition: all 1s ease-out; } /* "Active" States (Triggered by JS in footer.php) */ /* Consider: Don't hide here, and make the JS make the hidding, it case it fails, content is shown */ .reveal-from-right.is-visible, .reveal-from-top.is-visible { opacity: 1; transform: translate(0, 0); } /* Homepage Hover: Products, Supplies, and Consumibles */ .cat-card-hover { min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; background: #fff; border-radius: 15px; transition: all 0.3s ease; } /*************************** FOOTER ***************************/ /* Custom Footer Styles */ .custom-main-footer { background-color: #0D2941; color: #ffffff; padding: 20px 0 20px 0; font-family: inherit; } .footer-grid-container { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 20px; } .footer-column h3 { color: #ffffff; font-size: 1.2rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; } .footer-column p { font-size: 1.1rem; line-height: 1.6; opacity: 0.9;} /* Footer Links Styling */ .footer-grid-container a { color: #ffffff; text-decoration: underline; transition: opacity 0.3s ease; } .footer-grid-container a:hover { color: #ffffff !important; } .footer-grid-container a.footer-contact-btn { text-decoration: none; color: #0D2941 !important; opacity: 1; } .footer-contact-btn { display: inline-block; background-color: #ffffff; color: #0D2941 !important; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: bold; margin-top: 15px; transition: background-color 0.3s ease; } .footer-contact-btn:hover { background-color: #f0f0f0; } /* Redions sub-column Wrapper */ .footer-sub-grid { display: flex; gap: 30px; /* Space between the two lists */ } .footer-sub-grid ul { padding: 0; margin: 0; flex: 1; /* Ensures both sub-columns take equal width */ } .footer-sub-grid li { font-size: 0.95rem; line-height: 1.8; margin-bottom: 5px; } .footer-sub-grid li { color: rgba(255, 255, 255, 0.9); } /* Ensure non-linked text is also white/readable */ /* 1. Reset & Layout */ .custom-main-footer { background-color: #001A33; /* Your navy */ color: white; padding: 60px 20px; } .footer-grid-container { display: grid; grid-template-columns: 2fr 1fr 1fr; /* Desktop: Big bio, small regions, small contact */ gap: 40px; max-width: 1200px; margin: 0 auto; } /* 2. Fix the "Ugly" List Bullets */ .footer-column ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .footer-column li { margin-bottom: 10px; font-size: 14px; } /* 3. The "Regions" Sub-grid */ .footer-sub-grid { display: flex; gap: 30px; } /* 4. Tablet View (Portrait) */ @media (max-width: 992px) { .footer-grid-container { grid-template-columns: 1fr 1fr; /* Two columns */ } .footer-column:first-child { grid-column: span 2; /* Bio takes full width */ } } /* 5. Mobile View (The Fix for your screenshot) */ @media (max-width: 600px) { .footer-grid-container { grid-template-columns: 1fr; /* Everything stacks */ text-align: center; } .footer-sub-grid { justify-content: center; text-align: left; /* Keep names aligned but center the group */ } .header-social-inner-wrap { justify-content: center; /* Center the icons */ } .footer-contact-btn { display: inline-block; margin-top: 20px; } } /* Reset the Top Row Container to allow absolute positioning */ /* Prevent the numbers from showing in the Main/Mobile menu if they leak */ /*.primary-menu-container .hts-top-contact-wrapper,*/ /*#mobile-site-navigation .hts-top-contact-wrapper {*/ /* display: none !important;*/ /*}*/ /*#top-heder .site-header-row-layout-contained {*/ /* display: flex !important;*/ /* justify-content: space-between !important;*/ /* align-items: center;*/ /*}*/ /*.hts-top-contact-wrapper {*/ /* display: flex !important;*/ /* gap: 20px;*/ /* list-style: none !important;*/ /* margin-right: auto;*/ /*}*/ /*.hts-top-link {*/ /* color: white !important;*/ /* font-size: 13px;*/ /* font-weight: 500;*/ /* text-decoration: none;*/ /*}*/ /*.hts-wa-green {*/ /* color: #25D366 !important;*/ /*}*/