/* Guest vs signed-in chrome. Class is set on in auth-nav.js before paint. */ /* Text fields: the existing border turns green on focus. No outline ring — width, radius, and shape stay whatever that field already uses. */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):focus, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border-color: var(--brand) !important; } input.is-invalid:focus, input.is-invalid:focus-visible, textarea.is-invalid:focus, textarea.is-invalid:focus-visible { border-color: rgba(248, 113, 113, 0.85) !important; } /* Same global scrollbar as vantafin.com marketing pages: thin 6px thumb, #6f6f6f on a transparent track (WebKit + Firefox). */ html { color-scheme: dark; --scrollbar-thumb: #6f6f6f; --scrollbar-track: transparent; font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", "Helvetica Neue", Arial, sans-serif; } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; } *::-webkit-scrollbar-corner { background: transparent; } /* Products / Resources: extra space before the chevron, and flip it up while the dropdown group is hovered (same behavior as vantafin.com). */ .nav-link.flex.items-center { gap: 0.4rem; } /* Solid fill, no backdrop-filter. Blur on the pill (or a ::before) is split by Chromium into two colors around the green CTA / logo invert. */ /* The header is a full-width hit target. Clicks in the gap between the two pills should reach whatever sits there (pricing toggle, etc.). */ header.fixed { pointer-events: none; } header.fixed .nav-pill { pointer-events: auto; } .nav-pill { position: relative; isolation: isolate; background: rgba(20, 23, 29, 0.88) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); } .nav-pill::before { content: none; } .nav-products-dd { position: fixed !important; top: 0; padding-top: 12px !important; width: min(1360px, calc(100vw - 2rem)) !important; max-width: calc(100vw - 2rem) !important; } html.nav-dd-js .nav-products-dd.nav-dd-fitted { transform: none !important; justify-content: center; } html.nav-dd-js .nav-products-dd.nav-dd-measure { display: flex !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Same zoom on both menus so they shrink together and stay the same height. */ .nav-products-dd > .card, .nav-resources-dd > .card { zoom: var(--nav-dd-zoom, 1); } /* Invisible bridge under the Products trigger only — a full-width bridge sat on top of Resources and delayed the swap. */ html.nav-dd-js .relative.group:has(.nav-products-dd.nav-dd-on)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; height: 2rem; pointer-events: auto; } html.nav-dd-js [data-nav-menu].nav-menu-open { z-index: 60; } /* Same 12px air under the pill as Products — JS pins both wrappers to the pill bottom so the menus open on one line. */ .nav-resources-dd { position: fixed !important; width: 680px; max-width: 46vw; padding-top: 12px !important; } #nav-dd-host { position: fixed; inset: 0; z-index: 60; pointer-events: none; } /* JS-driven open + Products↔Resources swap (same fade/slide as vantafin.com). Tailwind's transition-all on the wrappers fights the swap, so kill it. */ .nav-products-dd, .nav-resources-dd, html.nav-dd-js .nav-products-dd, html.nav-dd-js .nav-resources-dd { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: none !important; } html.nav-dd-js .nav-products-dd.nav-dd-on, html.nav-dd-js .nav-resources-dd.nav-dd-on { display: flex !important; opacity: 1 !important; visibility: visible !important; } html.nav-dd-js .nav-products-dd.nav-dd-open, html.nav-dd-js .nav-resources-dd.nav-dd-open, html.nav-dd-js .nav-products-dd.nav-dd-entering, html.nav-dd-js .nav-resources-dd.nav-dd-entering { pointer-events: none; z-index: 51; } html.nav-dd-js .nav-products-dd.nav-dd-open > .card, html.nav-dd-js .nav-resources-dd.nav-dd-open > .card, html.nav-dd-js .nav-products-dd.nav-dd-entering > .card, html.nav-dd-js .nav-resources-dd.nav-dd-entering > .card { pointer-events: auto; } html.nav-dd-js .nav-products-dd.nav-dd-exiting, html.nav-dd-js .nav-resources-dd.nav-dd-exiting { pointer-events: none; z-index: 50; } html.nav-dd-js .nav-products-dd.nav-dd-entering > .card { animation: nav-dd-enter-products 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } html.nav-dd-js .nav-products-dd.nav-dd-exiting > .card { animation: nav-dd-exit-products 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } html.nav-dd-js .nav-resources-dd.nav-dd-entering > .card { animation: nav-dd-enter-resources 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } html.nav-dd-js .nav-resources-dd.nav-dd-exiting > .card { animation: nav-dd-exit-resources 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes nav-dd-enter-products { from { opacity: 0; transform: translateX(1.25rem); } to { opacity: 1; transform: translateX(0); } } @keyframes nav-dd-exit-products { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(1.25rem); } } @keyframes nav-dd-enter-resources { from { opacity: 0; transform: translateX(-1.25rem); } to { opacity: 1; transform: translateX(0); } } @keyframes nav-dd-exit-resources { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-1.25rem); } } @media (prefers-reduced-motion: reduce) { html.nav-dd-js .nav-products-dd.nav-dd-entering > .card, html.nav-dd-js .nav-products-dd.nav-dd-exiting > .card, html.nav-dd-js .nav-resources-dd.nav-dd-entering > .card, html.nav-dd-js .nav-resources-dd.nav-dd-exiting > .card { animation: none; } } /* Height is synced to the Products card in auth-nav.js. Fallback matches the 11rem product previews used on most pages (homepage uses 14rem). */ .nav-resources-dd > .card { min-height: 19.72rem; display: flex; flex-direction: column; } .nav-resources-dd > .card > .grid { flex: 1 1 auto; align-items: stretch; min-height: 0; } .nav-resources-dd > .card > .grid > div:first-child { justify-content: stretch; gap: 0.5rem; } .nav-resources-dd .grid > div:last-child { align-items: center; justify-content: center; text-align: center; } .nav-resources-dd .grid > div:last-child > div { font-size: 1.2rem; font-weight: 700; } .nav-resources-dd .grid > div:last-child p { margin-top: 0.45rem; font-size: 0.92rem; line-height: 1.55; } .nav-resources-dd .grid > div:last-child form { width: 100%; margin-top: 1rem; gap: 0.65rem; } .nav-resources-dd .grid > div:last-child input, .nav-resources-dd .grid > div:last-child button { font-size: 0.95rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } .nav-resources-dd input[type="email"], .vega-email { border: 1px solid var(--border); } .vega-email.is-invalid, .nav-resources-dd input[type="email"].is-invalid { border-color: rgba(248, 113, 113, 0.85) !important; } .nav-res-item { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 0.75rem; text-decoration: none; } .nav-res-item:hover { background: rgba(255, 255, 255, 0.05); } .nav-res-item-text { display: flex; flex-direction: column; min-width: 0; } .nav-res-item-label { font-size: 1.05rem; font-weight: 700; color: var(--text); } .nav-res-item-sub { margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); } .nav-res-item-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--text); opacity: 0; transform: translateX(-2px); transition: opacity 0.15s ease, transform 0.15s ease; } .nav-res-item:hover .nav-res-item-chev { opacity: 0.75; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .nav-res-item-chev { transition: none; } } /* Nav CTA matches the 42px wordmark so the right pill is the same height as the left. Body line-height was stretching Get started taller. No green glow / hover-lift: those create a second compositing region and make the right half of the frost a different color. */ .nav-pill .nav-link { opacity: 1; } .btn-primary.nav-cta, .nav-pill .btn-primary { height: 42px; padding: 0 1.25rem; font-size: 0.9rem; line-height: 1; border-radius: 999px; box-shadow: none !important; filter: none; } .btn-primary.nav-cta:hover, .btn-primary.nav-cta:active, .nav-pill .btn-primary:hover, .nav-pill .btn-primary:active { transform: none; box-shadow: none !important; } .nav-chev { flex-shrink: 0; transition: transform 0.2s ease; } .group:hover .nav-chev, .group.nav-menu-open .nav-chev { transform: rotate(180deg); } /* Click-to-close leaves the pointer on the trigger. Don't keep the chevron flipped via :hover — let it ease back to default. */ .group.nav-menu-click-closed .nav-chev, .group.nav-menu-click-closed:hover .nav-chev { transform: none; } /* Products' fixed panel covers its trigger, so :hover on the button drops when swapping from Resources. Keep the open trigger in the hover style. */ .group.nav-menu-open > .nav-link { color: var(--text); opacity: 1; background-color: rgba(255, 255, 255, 0.05); } @media (prefers-reduced-motion: reduce) { .nav-chev { transition: none; } } html.is-logged-in [data-auth-guest] { display: none !important; } html:not(.is-logged-in) [data-auth-user] { display: none !important; } .footer-copy { display: inline-flex; align-items: center; gap: 0.5rem; } .footer-logo { width: 1.5rem; height: auto; flex-shrink: 0; filter: brightness(0) invert(1); } .footer-disclaimer a { color: #c4c4c4; text-decoration: underline; text-underline-offset: 2px; } .footer-disclaimer a:hover { color: #fff; } .footer-top { display: flex; flex-direction: column; gap: 2.5rem; } @media (min-width: 1024px) { .footer-top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 4rem; } .footer-top .grid { flex: 1; } } .footer-actions { display: flex; flex-direction: column; align-items: stretch; width: fit-content; flex-shrink: 0; gap: 1.5rem; } .footer-wordmark { display: block; line-height: 0; margin-bottom: -0.5rem; pointer-events: none; user-select: none; } .footer-wordmark img { height: 42px; width: auto; display: block; filter: invert(1); } @media (max-width: 1023px) { .footer-actions { align-self: flex-end; } } .footer-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.5rem; padding: 0 1.75rem; border-radius: 0.25rem; background: #fff; color: #0d0d0e; font-size: 0.875rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: background-color 0.15s ease; } .footer-login-btn:hover { background: #f5f5f5; color: #0d0d0e; } .footer-login-btn svg { flex-shrink: 0; } .footer-social { display: flex; align-items: center; justify-content: space-between; width: 100%; } .footer-social a { display: inline-flex; color: #fff; transition: color 0.15s ease; } .footer-social a:hover { color: #d4d4d4; } .footer-social svg { width: 1.25rem; height: 1.25rem; } /* Closing CTA + moon: About is the source of truth. Page-level copies used to set moon-hero to 760px (Home) or 1350px (Pricing), which made the gap under the buttons look different on every page. */ .cta-close { padding-top: 4rem; padding-bottom: 4rem; text-align: center; } @media (min-width: 768px) { .cta-close { padding-top: 6rem; padding-bottom: 6rem; } } .moon-hero { position: relative; overflow: hidden; min-height: 480px; margin-top: -180px; background: linear-gradient(to bottom, transparent 0%, rgba(22,56,39,0.55) 40%, rgba(22,56,39,0.92) 60%, #245e3f 82%, #3c8a5c 100%); } .moon-shape { position: absolute; left: 50%; bottom: -350px; transform: translateX(-50%); width: 142vw; height: 520px; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(closest-side, var(--bg) 0%, var(--bg) 80%, #6bd39a 92%, #eafff2 100%); box-shadow: 0 -70px 160px -30px rgba(126,203,156,0.3); } .moon-wordmark { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(4rem, 13vw, 10rem); line-height: 1; color: var(--text, #f5f2ea); white-space: nowrap; z-index: 1; pointer-events: none; user-select: none; } @media (max-width: 640px) { .moon-wordmark { bottom: 80px; font-size: clamp(3rem, 16vw, 5rem); } } /* FAQ rows: Chrome does not toggle
when you click empty flex space inside a display:flex . Cover the whole row (and the card padding) so any click on the question bar opens it. */ details.card { padding: 0; } details.card > summary { list-style: none; cursor: pointer; position: relative; width: 100%; padding: 1rem; } details.card[open] > summary { padding-bottom: 0; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::after { content: ""; position: absolute; inset: 0; } details.card > :not(summary) { margin-top: 0; padding: 0.5rem 1rem 1rem; } details.card[open] .chev { transform: rotate(180deg); } /* No scroll-in hide/blur. Content paints immediately, same as the landing hero. */ .reveal-stagger, .reveal-stagger.reveal-scale { opacity: 1; filter: none; transform: none; transition: none; } /* Hero photos are real elements so the browser treats them as LCP, same as a first-screen image — not a low-priority CSS background that waits behind Tailwind and the nav screenshots. */ .hero-photo > img, .parallax-layer--bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-photo > img { object-position: center 40%; } .parallax-layer--bg > img { object-position: center 42%; } .vega-band { border: 0; padding-top: 4.5rem; padding-bottom: 4.5rem; background: linear-gradient( to bottom, rgba(23, 26, 33, 0) 0%, rgba(23, 26, 33, 0.38) 32%, rgba(23, 26, 33, 0.38) 68%, rgba(23, 26, 33, 0) 100% ); } /* Same edge fade as .vega-band, for landing sections that used a hard full-width border. Transparent at the seams, soft --bg-soft wash in the middle. */ .section-fade { border: 0 !important; background: linear-gradient( to bottom, rgba(23, 26, 33, 0) 0%, rgba(23, 26, 33, 0.38) 32%, rgba(23, 26, 33, 0.38) 68%, rgba(23, 26, 33, 0) 100% ); } .vega-mark { width: 2.75rem; height: 2.75rem; flex-shrink: 0; object-fit: contain; background: transparent; } .vega-band .vega-title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; } .vega-band .vega-lead { margin-top: 0.3rem; font-size: 0.98rem; color: var(--text-dim); } .vega-band .vega-email { min-height: 3.05rem; padding: 0.7rem 1.2rem; font-size: 0.95rem; } .vega-band .btn-primary { min-height: 3.05rem; padding: 0.7rem 1.7rem; font-size: 0.95rem; } /* Products dropdown: still screenshot, animated GIF on hover. */ .prod-preview { position: relative; } .prod-preview .prod-still, .prod-preview .prod-gif { width: 100%; height: 100%; object-fit: cover; object-position: left top; } .prod-preview .prod-still { transition: opacity 0.55s ease; } .prod-preview .prod-gif { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } .prod-preview.is-playing .prod-gif { opacity: 1; } .prod-preview.is-playing .prod-still { opacity: 0; } @media (prefers-reduced-motion: reduce) { .prod-preview.is-playing .prod-gif { opacity: 0; } .prod-preview.is-playing .prod-still { opacity: 1; } }