/* ============================================================ CANONICAL SITE HEADER The one header used on every page. Self-contained: it does not depend on main.css, editorial.css or service-pages.css, and it is linked last so it always wins. Values here are the measured values of the 2026-07-31 editorial redesign, which is the brand of record. Do not restate header or nav rules in any other stylesheet — that divergence is what made the nav render differently from page to page. ============================================================ */ .skip-link { position: absolute; top: -100px; left: 12px; z-index: 2100; padding: 12px 18px; background: #111a21; color: #fff; font: 600 0.92rem/1.2 Arial, Helvetica, sans-serif; text-decoration: none; border: 2px solid #f5b400; transition: top .15s ease; } .skip-link:focus { top: 12px; } .header { position: sticky; top: 0; z-index: 1000; padding: 0; background: #fbfaf7; border-top: 4px solid #f5b400; border-bottom: 1px solid #d5d0c7; box-shadow: none; backdrop-filter: none; font-family: Arial, Helvetica, sans-serif; } .header .container { width: min(100% - 56px, 1160px); max-width: none; margin: 0 auto; padding: 0; } .header .navbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; } .header .logo { display: flex; align-items: baseline; gap: 0; font: 700 1.55rem/1 Arial, Helvetica, sans-serif; letter-spacing: -0.065em; text-decoration: none; } .header .logo .logo-brand { color: #111a21; font-weight: 800; } .header .logo .logo-product { color: #c58f00; font-weight: 500; } .header .nav-links { display: flex; align-items: center; gap: 26px; } .header .nav-links > a, .header .nav-links .services-nav-menu > summary { position: relative; padding: 26px 0 24px; color: #465059; font-family: Arial, Helvetica, sans-serif; font-size: 0.92rem; font-weight: 600; line-height: 1.65; text-decoration: none; } .header .nav-links > a:hover, .header .nav-links .services-nav-menu:hover > summary, .header .nav-links .services-nav-menu[open] > summary { color: #111a21; } /* Hover/open underline. The summary's ::after carries the chevron, so its bar goes on ::before — same geometry either way. */ .header .nav-links > a::after, .header .nav-links .services-nav-menu > summary::before { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background: #f5b400; transition: width .3s ease; } .header .nav-links > a:hover::after, .header .nav-links > a:focus-visible::after, .header .nav-links .services-nav-menu:hover > summary::before, .header .nav-links .services-nav-menu[open] > summary::before { width: 100%; } /* Matched against `.header .nav-links > a` above, which is (0,2,1) — so the CTA rules carry the class on the element to stay ahead of it. */ .header .nav-links > a.nav-cta { padding: 11px 16px; background: #111a21; color: #fff; border: 1px solid #111a21; border-radius: 2px; transition: background .2s ease, border-color .2s ease, color .2s ease; } .header .nav-links > a.nav-cta:hover, .header .nav-links > a.nav-cta:focus-visible { background: #f5b400; border-color: #f5b400; color: #111a21; } .header .nav-links > a.nav-cta::after { display: none; } .header .menu-toggle { display: none; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid #d5d0c7; border-radius: 2px; cursor: pointer; } .header .menu-toggle-bar { display: block; width: 17px; height: 2px; margin: 4px auto; background: #111a21; transition: transform .2s ease, opacity .2s ease; } .header .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; } .header .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .header a:focus-visible, .header button:focus-visible { outline: 2px solid #111a21; outline-offset: 3px; } @media (max-width: 1024px) { .header .nav-links { gap: 18px; } .header .nav-links > a, .header .nav-links .services-nav-menu > summary { font-size: 0.84rem; } } @media (max-width: 900px) { .header .nav-links { position: fixed; top: var(--services-menu-top, 81px); right: 0; left: 0; z-index: 1500; gap: 0; max-height: calc(100vh - var(--services-menu-top, 81px)); padding: 6px 28px 24px; overflow-y: auto; background: #fbfaf7; border-bottom: 1px solid #d5d0c7; box-shadow: 0 10px 30px rgba(17, 26, 33, .1); flex-direction: column; align-items: stretch; opacity: 0; visibility: hidden; transform: translateY(-100%); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .header .nav-links.active { opacity: 1; visibility: visible; transform: translateY(0); } /* One row shape for every item, so the stack reads as one list. */ .header .nav-links > a, .header .nav-links .services-nav-menu > summary { width: 100%; padding: 13px 0; font-size: 0.92rem; border-bottom: 1px solid #d5d0c7; } .header .nav-links > a::after, .header .nav-links .services-nav-menu > summary::before { display: none; } .header .nav-links > a.nav-cta { margin-top: 14px; padding: 13px 16px; border-bottom: 1px solid #111a21; text-align: center; } .header .menu-toggle { display: block; } } /* ---- Footer social icons (Yeevu brand accounts) ---- Lives here because site-header.css is the only stylesheet loaded by all 41 pages; both footer variants (.service-footer and .footer) are dark. */ .yv-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .yv-social__link { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #c7d0dd; text-decoration: none; transition: color .2s ease, border-color .2s ease, transform .2s ease; } .yv-social__link::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--yv-icon) center / contain no-repeat; mask: var(--yv-icon) center / contain no-repeat; } .yv-social__link:hover, .yv-social__link:focus-visible { color: #f5b400; border-color: #f5b400; transform: translateY(-2px); } .yv-social__link--linkedin { --yv-icon: url("data:image/svg+xml,"); } .yv-social__link--x { --yv-icon: url("data:image/svg+xml,"); } .yv-social__link--facebook { --yv-icon: url("data:image/svg+xml,"); } .yv-social__link--instagram { --yv-icon: url("data:image/svg+xml,"); } .yv-social__link--youtube { --yv-icon: url("data:image/svg+xml,"); } .yv-social__link--tiktok { --yv-icon: url("data:image/svg+xml,"); } @media (prefers-reduced-motion: reduce) { .yv-social__link { transition: none; } .yv-social__link:hover { transform: none; } } /* ---- Self-contained expert-support CTA ---- For pages that load neither service-pages.css nor authority-pages.css (the editorial/main.css set). Mirrors the .content-band look. */ .yv-cta { padding: 72px 0; background: #fff8df; border-block: 1px solid #efd480; } .yv-cta__inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; } .yv-cta__kicker { margin: 0 0 16px; color: #9a6700; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; } .yv-cta h2 { max-width: 760px; margin: 0; color: #0b1220; font: 750 clamp(30px, 4vw, 46px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; text-wrap: balance; } .yv-cta p { max-width: 700px; margin: 16px 0 0; color: #526071; font: 400 16px/1.65 Arial, Helvetica, sans-serif; } .yv-cta__note { color: #6b7a8d !important; font-size: 13px !important; } .yv-cta__actions { display: flex; flex-direction: column; gap: 10px; min-width: 264px; } .yv-cta__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 4px; font: 700 14px/1 Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .yv-cta__btn:hover { transform: translateY(-2px); } .yv-cta__btn--primary { background: #f5b400; color: #111827; } .yv-cta__btn--primary:hover { background: #ffc832; } .yv-cta__btn--secondary { border-color: #d8c27e; background: transparent; color: #0b1220; } .yv-cta__btn--secondary:hover { border-color: #9a6700; } @media (max-width: 900px) { .yv-cta__inner { grid-template-columns: 1fr; gap: 34px; } .yv-cta__actions { min-width: 0; } } @media (max-width: 640px) { .yv-cta { padding: 56px 0; } .yv-cta__inner { width: min(100% - 28px, 1180px); } } @media (prefers-reduced-motion: reduce) { .yv-cta__btn { transition: none; } .yv-cta__btn:hover { transform: none; } }