/* Top bar + primary nav + mega menu + skip link + shared reveal primitives — loads globally. */ /* ============ INSULATION FROM LEGACY / ELEMENTOR GLOBALS ============ The new-design header/footer must render identically on pages where Elementor and the legacy app-style.css are still loaded. Explicitly set the baseline properties that those stylesheets mutate on (font, line-height, color) so nothing leaks in via inheritance. */ .top-bar, nav#nav, footer.pt-footer-new, .pt-mobile-drawer, .sticky-bar { font-family: var(--sans); font-style: normal; line-height: 1.4; letter-spacing: normal; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .top-bar *, .top-bar *::before, .top-bar *::after, nav#nav *, nav#nav *::before, nav#nav *::after, footer.pt-footer-new *, footer.pt-footer-new *::before, footer.pt-footer-new *::after, .pt-mobile-drawer *, .pt-mobile-drawer *::before, .pt-mobile-drawer *::after, .sticky-bar *, .sticky-bar *::before, .sticky-bar *::after { box-sizing: border-box; font-family: inherit; /* Elementor / legacy globals sometimes inject a text-shadow on links and headings. The redesigned chrome is a flat system — kill it outright. */ text-shadow: none; } .top-bar a, nav#nav a, .pt-mobile-drawer a, .sticky-bar a, footer.pt-footer-new a { text-decoration: none; color: inherit; } nav#nav ul, .pt-mobile-drawer ul, footer.pt-footer-new ul { list-style: none; margin: 0; padding: 0; } .top-bar button, #nav button, footer.pt-footer-new button, .sticky-bar button { all: revert; font-family: var(--sans); cursor: pointer; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; background: var(--ink); color: var(--brand-lime); padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; transition: top 200ms var(--ease); } .skip-link:focus { top: 16px; } .color-teal { color: var(--brand-teal); } /* ============ REVEAL ============ */ .rv { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); } .rv.vis { opacity: 1; transform: none; } .d1 { transition-delay: 80ms; } .d2 { transition-delay: 160ms; } .d3 { transition-delay: 240ms; } .d4 { transition-delay: 320ms; } /* ============ TOP BAR ============ */ .top-bar { background: var(--ink); color: var(--bg); padding: 10px 32px; text-align: center; font-size: 13px; font-weight: 400; } .top-bar b { font-weight: 600; color: var(--brand-lime); } .top-bar a { text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; } .top-bar--trustpilot { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .top-bar--trustpilot .tb-stars { /* colour is provided by .stars-rated layers — don't override it here, or the base grey stars get turned green too */ font-size: 14px; } /* ---- Shared fractional-star display --------------------------------- Renders a star row that matches a real numeric rating by layering a coloured fill on top of a grey base. Set --stars-rating inline to the 0–5 value (e.g. 4.6). Use for aggregate Trustpilot/product scores — NOT for individual 5-star user reviews, which should stay all-filled. Usage: */ .stars-rated { position: relative; display: inline-block; letter-spacing: 1px; line-height: 1; /* !important because several scoped rules (`.hero-trust .stars`, `.catalog-trust .stars`, etc.) set color on the same element and would otherwise tint the base layer amber/orange. The fill layer below also needs to override, so both pseudo rules use !important. */ color: #d4d4d8 !important; white-space: nowrap; } .stars-rated::before { content: "★★★★★"; display: inline-block; color: inherit; } .stars-rated::after { content: "★★★★★"; position: absolute; top: 0; left: 0; width: calc(var(--stars-rating, 5) / 5 * 100%); max-width: 100%; overflow: hidden; white-space: nowrap; color: #00b67a !important; letter-spacing: inherit; pointer-events: none; } .top-bar--trustpilot .tb-sep { opacity: .5; } .top-bar--trustpilot .tb-muted { opacity: .7; font-weight: 400; } .top-bar--trustpilot a { margin-left: 0; color: var(--brand-lime); } @media (max-width: 640px) { .top-bar--trustpilot { gap: 6px; font-size: 12px; } .top-bar--trustpilot .tb-stars { font-size: 12px; } } /* ============ NAV ============ */ nav#nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .8); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid transparent; padding: 0 32px; height: 76px; display: flex; align-items: center; justify-content: space-between; transition: border-color 300ms, background 300ms; } nav#nav.scrolled { border-bottom-color: var(--rule); } #nav .logo, footer.pt-footer-new .logo, .pt-mobile-drawer .logo { font-size: 28px; font-weight: 600; letter-spacing: -.3px; display: inline-block; } #nav .logo-g, footer.pt-footer-new .logo-g, .pt-mobile-drawer .logo-g { color: var(--brand-lime-deep); font-weight: 600; } #nav .logo-t, footer.pt-footer-new .logo-t, .pt-mobile-drawer .logo-t { color: var(--brand-teal); font-weight: 400; } #nav .nav-links { display: flex; align-items: center; gap: 8px; } #nav .nav-link { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 8px 16px; border-radius: var(--r-pill); transition: all 200ms; } #nav .nav-link:hover { background: var(--bg-soft); color: var(--ink); } /* ============ MEGAMENU ============ */ #nav .nav-item { position: relative; } #nav .nav-item.has-mega .nav-mega-trigger { background: none; border: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } #nav .nav-chev { transition: transform 300ms var(--ease); color: var(--ink-4); } #nav .nav-item.has-mega.open .nav-chev, #nav .nav-item.has-mega:hover .nav-chev { transform: rotate(-180deg); color: var(--ink); } #nav .nav-item.has-mega.open .nav-link, #nav .nav-item.has-mega:hover .nav-mega-trigger { background: var(--bg-soft); color: var(--ink); } #nav .mega { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-8px); width: 980px; max-width: calc(100vw - 40px); /* Cap total height so the panel never exceeds the viewport. The 25-test side list plus a dense multi-column right panel can otherwise stretch past the bottom of the screen. Side and right panel scroll independently inside this cap. Flex column so the inner grid can fill remaining height — needed so `.mega-side`'s overflow-y engages (pure max-height + overflow:hidden on the parent would clip the side list without making it scrollable). */ max-height: calc(100vh - 140px); display: flex; flex-direction: column; background: var(--bg); border: 1.5px solid var(--ink); border-radius: var(--r-xl); box-shadow: 8px 8px 0 var(--ink); padding: 22px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms var(--ease), transform 320ms var(--ease), visibility 260ms linear; z-index: 110; } /* invisible bridge so the gap between trigger and panel doesn't close it */ #nav .mega::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } #nav .nav-item.has-mega:hover .mega, #nav .nav-item.has-mega.open .mega, #nav .mega:hover, #nav .mega:focus-within { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } #nav .mega-inner { display: grid; grid-template-columns: 240px 1fr; gap: 24px; /* Fill remaining vertical space inside the capped flex-column .mega so the two scrollers below resolve against a real height. min-height:0 is the critical piece — without it the grid row can't shrink below its intrinsic content height and the inner overflow-y never engages. */ flex: 1 1 auto; min-height: 0; } #nav .mega-side { border-right: 1px solid var(--rule); padding-right: 12px; display: flex; flex-direction: column; gap: 2px; /* The 25-test list doesn't fit at ≤ ~900px viewport height. Give the list its own vertical scroller so the right panel remains visible. */ overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; } #nav .mega-side::-webkit-scrollbar { width: 6px; } #nav .mega-side::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 999px; } #nav .mega-side::-webkit-scrollbar-track { background: transparent; } #nav .mega-side-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: 10px 14px 14px; } #nav .mega-test { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; text-align: left; padding: 10px 14px; border-radius: var(--r-sm); font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background 180ms, color 180ms, padding-left 200ms var(--ease); letter-spacing: -.005em; } #nav .mega-test::after { content: '→'; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--brand-teal); opacity: 0; transform: translateX(-4px); transition: opacity 200ms, transform 200ms; } #nav .mega-test:hover { background: var(--bg-soft); color: var(--ink); padding-left: 18px; } #nav .mega-test:hover::after { opacity: 1; transform: translateX(0); } #nav .mega-test.active { background: var(--ink); color: var(--brand-lime); padding-left: 14px; } #nav .mega-test.active::after { color: var(--brand-lime); opacity: 1; transform: translateX(0); } #nav .mega-content { position: relative; padding: 4px 4px 0; display: flex; flex-direction: column; /* Allow the right-hand panel (head + columns + foot) to scroll independently when a test's link list is tall. */ overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; } #nav .mega-content::-webkit-scrollbar { width: 6px; } #nav .mega-content::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 999px; } #nav .mega-content::-webkit-scrollbar-track { background: transparent; } #nav .mega-panel { opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 220ms var(--ease), transform 300ms var(--ease); position: absolute; inset: 4px 4px 0; display: flex; flex-direction: column; } #nav .mega-panel.active { opacity: 1; pointer-events: auto; transform: none; position: relative; inset: auto; } #nav .mega-panel-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); } #nav .mega-panel-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); } #nav .mega-panel-head h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; letter-spacing: -.015em; color: var(--brand-teal); line-height: 1; } #nav .mega-panel-all { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); transition: color 200ms, gap 200ms; } #nav .mega-panel-all:hover { color: var(--brand-teal); } #nav .mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; flex: 1; } #nav .mega-col { display: flex; flex-direction: column; } #nav .mega-col-head { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } #nav .mega-link { display: block; padding: 8px 0; font-size: 14px; color: var(--ink-2); font-weight: 500; letter-spacing: -.005em; line-height: 1.4; transition: color 180ms, padding-left 200ms var(--ease); position: relative; } #nav .mega-link:hover { color: var(--brand-teal); padding-left: 10px; } #nav .mega-link::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 1.5px; background: var(--brand-teal); opacity: 0; transform: translateX(-6px); transition: opacity 200ms, transform 200ms; } #nav .mega-link:hover::before { opacity: 1; transform: translateX(0); } #nav .mega-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 14px 18px; background: var(--bg-soft); border-radius: var(--r-md); font-size: 13px; color: var(--ink-3); } #nav .mega-foot-link { font-weight: 600; color: var(--ink); padding-bottom: 2px; border-bottom: 1.5px solid var(--ink); transition: color 200ms, border-color 200ms; } #nav .mega-foot-link:hover { color: var(--brand-teal); border-bottom-color: var(--brand-teal); } @media (max-width: 1024px) { #nav .nav-item.has-mega { display: none; } } #nav .nav-right { display: flex; align-items: center; gap: 14px; } @media (max-width: 900px) { #nav .nav-links { display: none; } } #nav .nav-login { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; } #nav .nav-login:hover { color: var(--ink); } #nav .nav-cta { font-size: 14px; font-weight: 600; background: var(--ink); color: var(--bg); padding: 11px 22px; border-radius: var(--r-pill); transition: all 300ms var(--ease); } #nav .nav-cta:hover { background: var(--brand-teal-dark); transform: translateY(-1px); } /* ============ MOBILE (<= 640px) nav adjustments ============ */ @media (max-width: 640px) { nav#nav { height: 64px; padding: 0 20px; } #nav .logo { font-size: 20px; } #nav .nav-cta { padding: 9px 16px; font-size: 13px; } #nav .nav-login { font-size: 13px; } } /* ============ MOBILE (<= 480px) nav + top-bar adjustments ============ */ @media (max-width: 480px) { .top-bar { padding: 8px 16px; font-size: 12px; } nav#nav { padding: 0 16px; } } /* ============ MOBILE DRAWER ============ */ #nav .pt-nav-burger { display: none; width: 40px; height: 40px; padding: 10px 8px; background: transparent; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; } #nav .pt-nav-burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 200ms var(--ease), opacity 200ms var(--ease); } @media (max-width: 900px) { #nav .pt-nav-burger { display: flex; } #nav .nav-right { display: none; } } .pt-mobile-drawer { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 320ms var(--ease); visibility: hidden; } .pt-mobile-drawer.open { transform: translateX(0); visibility: visible; } /* Never show the drawer at desktop widths, even if the .open class survived a resize. */ @media (min-width: 901px) { .pt-mobile-drawer, .pt-mobile-drawer.open { transform: translateX(100%) !important; visibility: hidden !important; } } .pt-drawer-inner { padding: 16px 20px 80px; max-width: 560px; margin: 0 auto; } .pt-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 24px; } .pt-drawer-close { width: 40px; height: 40px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer; } .pt-drawer-cta { display: flex; gap: 12px; margin-bottom: 24px; } .pt-drawer-login, .pt-drawer-get { flex: 1; text-align: center; padding: 14px 20px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; } /* Both selectors are scoped under .pt-mobile-drawer so their specificity beats the insulation block's `.pt-mobile-drawer a { color: inherit; }` — otherwise the drawer's ink color would bleed into the filled CTA and render black-on-black. */ .pt-mobile-drawer .pt-drawer-login { border: 1.5px solid var(--rule-2); color: var(--ink); } .pt-mobile-drawer .pt-drawer-get { background: var(--ink); color: var(--bg); } .pt-mobile-drawer .pt-drawer-get:hover, .pt-mobile-drawer .pt-drawer-get:focus { color: var(--bg); } .pt-drawer-section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 8px 0 12px; } .pt-drawer-tests { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--rule); } .pt-drawer-test { border-bottom: 1px solid var(--rule); } .pt-drawer-test-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; background: transparent; border: 0; text-align: left; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; } .pt-drawer-test-toggle svg { transition: transform 200ms var(--ease); } .pt-drawer-test-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .pt-drawer-test-panel { display: none; padding: 4px 4px 18px; } .pt-drawer-test-toggle[aria-expanded="true"] + .pt-drawer-test-panel { display: block; } .pt-drawer-col-head { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin: 12px 0 6px; } .pt-drawer-link { display: block; padding: 8px 0; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid transparent; } .pt-drawer-link:hover { color: var(--brand-teal); } .pt-drawer-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; padding-top: 8px; } .pt-drawer-links a { padding: 14px 4px; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--rule); } .pt-drawer-browse-all { display: block; margin-top: 16px; padding: 12px 0; font-weight: 600; color: var(--brand-teal); } body.pt-no-scroll { overflow: hidden; }