/* Theme Name: HyproMagUSA Theme URI: https://hypromagusa.com/ Author: Norvaris Author URI: https://norvaris.com Description: HyproMag Premium Theme Version: 1.4.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: hypro Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready Hypro — base styles. Extend in assets/css/main.css or child theme. */ /* Reset-ish baseline */ *, *::before, *::after { box-sizing: border-box; } :root { /* Inner page heroes (About banner, Approach, Technology, etc.) — not homepage hero */ --hypro-page-hero-height: clamp(26rem, 41.67vw, 37.5rem); } body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.5; color: #1a1a1a; background: #fff; } a { color: #0b57d0; } a:hover, a:focus { text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: middle; } .site { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .site-header { border-bottom: 1px solid #e5e5e5; padding: 1rem 0; } .site-header__inner { max-width: 90rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-logo { display: flex; align-items: center; gap: 0.5rem; } .site-logo__mark { width: 40px; height: auto; flex-shrink: 0; } .site-logo__wordmark { height: auto; max-height: 40px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; } .site-logo__combined { height: 40px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; display: block; } .main-navigation { display: flex; align-items: center; gap: 1.875rem; flex-wrap: wrap; justify-content: flex-end; } .main-navigation ul.menu { gap: 1.25rem; } .site-header__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 1.25rem; border: 1px solid #2ec4e6; border-radius: 1000px; font-family: Saira, Inter, sans-serif; font-weight: 500; font-size: 0.8125rem; line-height: 1.3; color: #262a35; text-decoration: none; white-space: nowrap; } .site-header__cta:hover, .site-header__cta:focus { color: #0b9cbc; } .site-title { margin: 0; font-size: 1.5rem; } .site-title a { text-decoration: none; color: inherit; } .site-description { margin: 0.25rem 0 0; font-size: 0.9rem; color: #555; } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; } .main-navigation a { text-decoration: none; color: #313644; font-size: 0.875rem; letter-spacing: 0.04em; } .site-main { padding: 2rem 0 3rem; } .site-footer { border-top: 1px solid #e5e5e5; padding: 1.5rem 0; font-size: 0.9rem; color: #555; } .entry-header { margin-bottom: 1rem; } .entry-title { margin: 0 0 0.5rem; font-size: 1.75rem; } .entry-title a { color: inherit; text-decoration: none; } .entry-meta { font-size: 0.875rem; color: #666; } /* WordPress adds class `page` to on static pages — margin here showed as a gap below the footer. */ .post, .page { margin-bottom: 0; } .post-thumbnail { margin-bottom: 1rem; } .pagination { margin-top: 2rem; } .pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; } .widget-area { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e5e5; } .widget { margin-bottom: 1.5rem; } .widget-title { font-size: 1.1rem; margin: 0 0 0.5rem; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 100%; } /* ─── Mobile navigation (≤1023px): overlay panel + backdrop —──────────────── */ .site-header__inner { position: relative; } .site-header__toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-left: auto; padding: 0; border: 1px solid rgba(49, 54, 68, 0.25); border-radius: 0.5rem; background: transparent; color: #313644; cursor: pointer; flex-shrink: 0; z-index: 102; transition: border-color 0.2s ease, color 0.2s ease; } .site-header__toggle:hover, .site-header__toggle:focus-visible { border-color: #2ec4e6; color: #0b9cbc; outline: none; } .site-header__toggle:focus-visible { box-shadow: 0 0 0 2px rgba(46, 196, 230, 0.45); } .site-header__icon { display: block; } .site-header__icon--close { display: none; } .site-header--menu-open .site-header__icon--menu { display: none; } .site-header--menu-open .site-header__icon--close { display: block; } .site-header__backdrop { display: none; position: fixed; inset: 0; z-index: 98; background: rgba(6, 8, 12, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.hypro-menu-open .site-header__backdrop { display: block; } @media (max-width: 1023px) { /* * Glass headers use backdrop-filter; in CSS that creates a containing block for * position:fixed descendants. The drawer + scrim would then size to the header bar * instead of the viewport. Disable blur on mobile so the slide-out menu positions correctly. */ .site-header--hero { -webkit-backdrop-filter: none; backdrop-filter: none; } .hypro-landing .site-header--hero, body.hypro-unified-nav .site-header--hero { background: rgba(26, 30, 40, 0.94); } .site-header__toggle { display: inline-flex; } .main-navigation { position: fixed; top: 0; right: 0; bottom: 0; /* Use vw / none — never max-width:100% here: % resolves vs containing block and can shrink the drawer to the header width when ancestors establish a narrow fixed CB. */ width: min(22rem, 100vw); max-width: 100vw; box-sizing: border-box; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 4.75rem) max(1.25rem, env(safe-area-inset-right, 0px)) 2rem max(1.25rem, env(safe-area-inset-left, 0px)); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; flex-wrap: nowrap; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f7f7f8; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18); z-index: 99; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.hypro-menu-open .main-navigation { transform: translateX(0); } .main-navigation ul.menu { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0 !important; width: 100%; } .main-navigation .menu > li { width: 100%; border-bottom: 1px solid rgba(49, 54, 68, 0.1); } .main-navigation .menu > li > a { display: block; padding: 1rem 0.25rem; font-size: 1rem; } .site-header__cta { margin-top: 1.25rem; align-self: stretch; text-align: center; justify-content: center; width: 100%; box-sizing: border-box; } body.admin-bar .main-navigation { padding-top: calc(env(safe-area-inset-top, 0px) + 6.25rem); } } @media (min-width: 1024px) { .site-header__backdrop { display: none !important; } /* Figma 2317:13057 — desktop primary nav: 30px gap between items */ .site-header--hero .main-navigation ul.menu { gap: 1.875rem; } /* Active page — gradient underline (Electric Cyan default → dark) */ .site-header--hero .main-navigation .menu > li.current-menu-item > a { position: relative; display: inline-block; padding-bottom: 0.35rem; } .site-header--hero .main-navigation .menu > li.current-menu-item > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #2ec4e6 0%, #0b9cbc 100%); border-radius: 1px; pointer-events: none; } }