/* Infinite Marketing header & navigation. Fixed header of constant height (no layout shift); compact state changes only paint. */ /* Plus Jakarta Sans, self-hosted (SIL OFL 1.1, assets/fonts/OFL.txt) and preloaded instead of the theme's and Elementor's Google Fonts requests (includes/header.php), so the brand font is ready before first paint. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched fallback, used only until the font is ready, so text does not rewrap (layout shift) when it swaps in. size-adjust = measured Plus Jakarta Sans width / Arial width per weight. */ @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"); font-weight: 100 449; size-adjust: 104.27%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"); font-weight: 450 549; size-adjust: 105.43%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 649; size-adjust: 99.68%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 650 749; size-adjust: 100.72%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 750 900; size-adjust: 88.59%; } :root:root { --wdtFontTypo_Base: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; --wdtFontTypo_Alt: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; } :root { --im-navy-950: #050816; --im-navy-900: #0a1030; --im-navy-800: #111a45; --im-blue: #2f6bff; --im-blue-400: #5b8cff; --im-cyan: #22d3ee; --im-violet: #7b4dff; --im-ink: #e8ecff; --im-muted: #a8b1d6; --im-line: rgba(160, 180, 255, 0.16); --im-header-h: 76px; --im-header-top: var(--wp-admin--admin-bar--height, 0px); --im-font-head: var(--wdtFontTypo_Alt, "Plus Jakarta Sans", system-ui, sans-serif); --im-font-body: var(--wdtFontTypo_Base, system-ui, sans-serif); } @media (max-width: 1199px) { :root { --im-header-h: 64px; } } .im-has-header .screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .im-header-spacer { height: var(--im-header-h); } .im-header { position: fixed; top: var(--im-header-top); left: 0; right: 0; z-index: 9990; height: var(--im-header-h); background: linear-gradient(180deg, rgba(5, 8, 22, 0.92), rgba(5, 8, 22, 0.78)); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; font-family: var(--im-font-body); transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .im-header.is-scrolled { background: rgba(5, 8, 22, 0.96); border-bottom-color: var(--im-line); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); } .im-header__inner { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; } .im-header__brand { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; } .im-header__logo { height: 46px; width: auto; max-width: 160px; object-fit: contain; transform-origin: left center; transition: transform .25s ease; } .im-header.is-scrolled .im-header__logo { transform: scale(.88); } .im-header__wordmark { font-family: var(--im-font-head); font-weight: 700; color: #fff; font-size: 20px; } /* ---------- Desktop navigation ---------- */ .im-nav { flex: 1 1 auto; display: flex; justify-content: center; } .im-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .im-nav__item { position: relative; margin: 0; } .im-nav__top { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 10px; background: none; border: 0; cursor: pointer; color: var(--im-ink); font: 600 15px/1 var(--im-font-head); letter-spacing: .01em; text-decoration: none; transition: color .2s ease, background-color .2s ease; } .im-nav__top:hover, .im-nav__top:focus-visible, .im-nav__toggle[aria-expanded="true"] { color: #fff; background: rgba(91, 140, 255, 0.12); } .im-nav__item.is-current > .im-nav__top { color: #fff; box-shadow: inset 0 -2px 0 var(--im-cyan); } .im-nav__chev { transition: transform .2s ease; } .im-nav__toggle[aria-expanded="true"] .im-nav__chev { transform: rotate(180deg); } .im-nav a:focus-visible, .im-nav button:focus-visible, .im-header__actions a:focus-visible, .im-header__actions button:focus-visible, .im-header__brand:focus-visible { outline: 2px solid var(--im-cyan); outline-offset: 2px; border-radius: 10px; } .im-nav__panel { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 290px; padding: 14px; background: linear-gradient(160deg, rgba(17, 26, 69, 0.98), rgba(7, 11, 31, 0.98)); border: 1px solid var(--im-line); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(47, 107, 255, 0.08); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .im-nav__panel::before { /* hover bridge */ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .im-nav__item.is-open > .im-nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease, visibility 0s; } .im-nav__item--mega > .im-nav__panel { width: min(920px, calc(100vw - 48px)); padding: 22px; } .im-nav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; } .im-nav__col-title { margin: 4px 10px 8px; font: 700 12px/1.2 var(--im-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--im-cyan); } .im-nav__col ul, .im-nav__simple { list-style: none; margin: 0; padding: 0; } .im-nav__col li, .im-nav__simple li { margin: 0; } .im-nav__link { display: block; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--im-ink); transition: background-color .15s ease, color .15s ease; } .im-nav__link .im-nav__link-label { display: block; font: 600 14.5px/1.3 var(--im-font-head); } .im-nav__link .im-nav__link-desc { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--im-muted); } .im-nav__link:hover, .im-nav__link:focus-visible { background: rgba(91, 140, 255, 0.14); color: #fff; } .im-nav__link.is-current { background: rgba(34, 211, 238, 0.1); } .im-nav__panel-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--im-line); } .im-nav__footer-link { display: inline-flex; padding: 6px 10px; color: var(--im-blue-400); font: 600 14px/1.2 var(--im-font-head); text-decoration: none; } .im-nav__footer-link::after { content: " →"; white-space: pre; } .im-nav__footer-link:hover, .im-nav__footer-link:focus-visible { color: #fff; } /* ---------- Actions ---------- */ .im-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .im-header__icon-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; border-radius: 10px; border: 0; background: none; color: var(--im-ink); cursor: pointer; text-decoration: none; font: 600 14px/1 var(--im-font-head); } .im-header__icon-btn:hover, .im-header__icon-btn[aria-expanded="true"] { background: rgba(91, 140, 255, 0.12); color: #fff; } .im-btn-cta { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, var(--im-blue) 0%, var(--im-violet) 100%); color: #fff !important; font: 700 14.5px/1 var(--im-font-head); letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(47, 107, 255, 0.85); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .im-btn-cta:hover, .im-btn-cta:focus-visible { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 30px -10px rgba(47, 107, 255, 0.95); } /* ---------- Search ---------- */ .im-search { position: absolute; left: 0; right: 0; top: 100%; background: rgba(7, 11, 31, 0.98); border-bottom: 1px solid var(--im-line); padding: 16px 24px; } .im-search__form { max-width: 760px; margin: 0 auto; display: flex; gap: 10px; } .im-search__form input { flex: 1; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--im-line); background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 16px; } .im-search__form input:focus { outline: 2px solid var(--im-cyan); outline-offset: 1px; } .im-search__form button { height: 48px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--im-blue); color: #fff; font-weight: 700; cursor: pointer; } /* ---------- Burger / drawer (tablet & mobile) ---------- */ .im-header__burger, .im-nav__drawer-head, .im-nav__drawer-cta { display: none; } /* Below the header's stacking context so the drawer (inside the header) stays on top. */ .im-nav-backdrop { position: fixed; inset: 0; background: rgba(2, 4, 12, 0.6); z-index: 9989; } @media (max-width: 1365px) { .im-header__inner { gap: 16px; } .im-nav__top { padding: 0 10px; font-size: 14.5px; } .im-header__phone-text { display: none; } } @media (max-width: 1199px) { /* backdrop-filter would make the header the containing block of the fixed drawer. */ .im-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 8, 22, 0.97); } .im-header__inner { padding: 0 16px; } .im-header__logo { height: 40px; } .im-header__actions { margin-left: auto; } .im-header__cta { display: none; } .im-header__burger { display: inline-flex; order: 3; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--im-line); background: rgba(255, 255, 255, 0.03); cursor: pointer; } .im-header__burger-lines { display: grid; gap: 5px; width: 20px; } .im-header__burger-lines span { display: block; height: 2px; border-radius: 2px; background: #fff; } .im-nav { position: fixed; top: var(--im-header-top); right: 0; bottom: 0; z-index: 9992; width: min(420px, 100vw); display: flex; flex-direction: column; justify-content: flex-start; background: linear-gradient(170deg, var(--im-navy-800), var(--im-navy-950)); border-left: 1px solid var(--im-line); transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; overflow-y: auto; overscroll-behavior: contain; } .im-nav.is-open { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; } .im-nav__drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--im-line); } .im-nav__drawer-title { color: var(--im-muted); font: 700 12px/1 var(--im-font-head); letter-spacing: .14em; text-transform: uppercase; } .im-nav__close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--im-line); background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .im-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px; } .im-nav__item { border-bottom: 1px solid var(--im-line); } .im-nav__top { width: 100%; justify-content: space-between; height: 56px; font-size: 17px; padding: 0 8px; } .im-nav__item.is-current > .im-nav__top { box-shadow: none; color: var(--im-cyan); } .im-nav__panel, .im-nav__item--mega > .im-nav__panel { position: static; width: auto; min-width: 0; transform: none; opacity: 1; visibility: visible; display: none; padding: 0 0 12px; background: none; border: 0; box-shadow: none; transition: none; } .im-nav__panel::before { display: none; } .im-nav__item.is-open > .im-nav__panel { display: block; transform: none; } .im-nav__cols { grid-template-columns: 1fr; gap: 6px; } .im-nav__link { padding: 10px 8px; } .im-nav__link .im-nav__link-desc { display: none; } .im-nav__drawer-cta { display: grid; gap: 12px; padding: 20px 16px 28px; margin-top: auto; } .im-nav__drawer-cta .im-btn-cta { height: 52px; font-size: 16px; } .im-nav__phone { text-align: center; color: var(--im-ink); font: 600 16px/1 var(--im-font-head); text-decoration: none; padding: 12px; border: 1px solid var(--im-line); border-radius: 999px; } .im-search { padding: 12px 16px; } } @media (max-width: 380px) { .im-header__phone { display: none; } } html.im-menu-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .im-header, .im-header__logo, .im-nav, .im-nav__panel, .im-btn-cta, .im-nav__chev { transition: none !important; } } /* ---------- Theme isolation: the ai-globe theme styles every