.gradual-blur-inner { position: relative; width: 100%; height: 100%; } .gradual-blur-inner > div { -webkit-backdrop-filter: inherit; backdrop-filter: inherit; } .gradual-blur { isolation: isolate; } @supports not (backdrop-filter: blur(1px)) { .gradual-blur-inner > div { background: rgba(0, 0, 0, 0.3); opacity: 0.5; } } .gradual-blur-fixed { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; } ._button_1o0m9_1 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 8px 24px; border-radius: 12px; background-color: rgb(247, 246, 242); border: 1px solid hsl(0, 0%, 15%); color: rgb(24, 24, 26); font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; position: relative; overflow: hidden; /* Crisp contact shadow + a soft diffuse one underneath — reads as real depth instead of a single flat blur — plus a faint inset top highlight, like light catching the top edge of the pill. */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Radial glow, masked to fade in on hover — matches the inset highlight, not a flat overlay. */ ._button_1o0m9_1::before { content: ''; position: absolute; inset: 10px; border-radius: 8px; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%); opacity: 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } ._button_1o0m9_1:hover:not(:disabled) { background-color: rgb(255, 255, 255); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 28px rgba(247, 246, 242, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); } ._button_1o0m9_1:hover:not(:disabled)::before { opacity: 1; } ._button_1o0m9_1:active:not(:disabled) { transform: translateY(0); transition-duration: 0.1s; } ._button_1o0m9_1:disabled { background-color: rgba(247, 246, 242, 0.5); color: rgb(24, 24, 26); cursor: not-allowed; box-shadow: none; } ._button_1o0m9_1:disabled::before { display: none; } ._nav_isjye_1 { position: sticky; top: 0; z-index: 100; overflow: visible; } ._inner_isjye_8 { position: relative; z-index: 1; width: 100%; display: grid; /* Two equal flanking columns make the center column sit at the bar's true visual center regardless of how wide the logo or CTA are — a flex space-between layout would center it relative to the logo/CTA content instead, which drifts whenever either one's width changes. */ grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 44px; gap: 16px; } ._logo_isjye_23 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--color-text); flex-shrink: 0; text-decoration: none; justify-self: start; } /* Fix height, let width follow the SVG's own aspect ratio (505:404, not square) — this is how every navbar logo is sized in practice (Stripe, Linear, GitHub, etc.). Forcing both width AND height to equal values, like the old 46.5×46.5, squashes a non-square mark into a square box no matter what number you pick — the distortion is the bug, not the size. */ ._logo_isjye_23 img { height: 32px; width: auto; } /* BlurText's per-letter reveal (see components/ui/BlurText.tsx) — :global because the letter spans are plain, unscoped ".blur-text-letter" markup on purpose: this exact HTML/CSS also has to work as static, generated output with no CSS Modules build step behind it (the blog's copy — see scripts/generate-blog-chrome.mjs). A scoped/hashed class name wouldn't survive that trip; a native :hover trigger needs no JS in either place. */ .blur-text-letter { filter: blur(8px); opacity: 0; transition-property: filter, opacity; transition-timing-function: ease-out; } ._logo_isjye_23:hover .blur-text-letter { filter: blur(0); opacity: 1; } ._center_isjye_65 { display: flex; align-items: center; justify-self: center; } ._right_isjye_71 { display: flex; align-items: center; justify-self: end; } ._navLink_isjye_77 { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--color-text); text-decoration: none; opacity: 0.75; } ._navLink_isjye_77:hover { opacity: 1; } /* Both render always; only one is ever visible — see Navbar/index.tsx's ctaTextMobile comment for why this is CSS, not a JS resize listener. */ ._ctaShort_isjye_92 { display: none; } @media (max-width: 767px) { ._inner_isjye_8 { padding: 10px 20px; gap: 10px; } ._logo_isjye_23 { font-size: 1.5rem; } ._logo_isjye_23 span { /* !important: BlurText sets display: inline-flex via inline style on its own wrapper span, which otherwise always wins over this rule regardless of media query or specificity — the logo text has been incorrectly showing on mobile (icon-only nav was the intent) since BlurText replaced the plain . */ display: none !important; } ._ctaFull_isjye_115 { display: none; } ._ctaShort_isjye_92 { display: inline; } } ._footer_zipz4_1 { /* Pinned rather than left to inherit — .social and the bare