/* ===================================================================== Pyrra floating chrome — the ONE home for the nav. Loaded on every page (marketing + legal) alongside scripts/site.js, which injects the markup. Fully self-contained: its own --pf-* tokens (ember-dark glass, the same on light or dark pages) so it never collides with a page's own theme tokens (site.css / shared.css). Springs are framer-motion 12.26.2's real solver output baked to CSS linear(). ===================================================================== */ :root { --pf-glass: rgba(26, 22, 18, 0.5); --pf-glass-strong: rgba(26, 22, 18, 0.74); --pf-accent: #e87c3e; --pf-accent-2: #f5a46b; --pf-border: #332b25; --pf-text: #e8e3df; --pf-text-dim: #a59b93; --pf-heading: #ffffff; --pf-ember: linear-gradient(90deg, var(--pf-accent-2), var(--pf-accent)); /* spring(stiffness 300, damping 30) — dampingRatio .866, settles .359s */ --pf-spring-a-dur: 0.359s; --pf-spring-a: linear(0, 0.011, 0.0404, 0.0831, 0.1351, 0.1931, 0.2545, 0.3172, 0.3795, 0.4402, 0.4984, 0.5535, 0.605, 0.6527, 0.6965, 0.7364, 0.7724, 0.8048, 0.8336, 0.8591, 0.8816, 0.9013, 0.9184, 0.9333, 0.946, 0.9568, 0.9661, 0.9738, 0.9803, 0.9856, 0.9901, 0.9936, 0.9965, 0.9988, 1.0005, 1.0018, 1.0028, 1.0035, 1.004, 1.0042, 1); /* spring(stiffness 100, damping 15) — dampingRatio .75, settles .879s */ --pf-spring-b-dur: 0.879s; --pf-spring-b: linear(0, 0.0216, 0.0772, 0.1551, 0.2456, 0.3417, 0.4378, 0.5299, 0.6154, 0.6927, 0.7608, 0.8196, 0.8693, 0.9104, 0.9436, 0.9698, 0.9899, 1.0048, 1.0153, 1.0222, 1.0263, 1.0281, 1.0283, 1.0272, 1.0254, 1.023, 1.0204, 1.0176, 1.0149, 1.0124, 1.01, 1.0079, 1.0061, 1.0045, 1.0032, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 1); --pf-bez: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* keep anchored sections (homepage sections + legal ToC jumps) clear of the pill */ html { scroll-padding-top: 88px; } /* entrances fire when gets .nav-ready (set on a later frame by site.js) */ /* 1 · brand chip — spring(300,30), delay .2s */ .pf-brand { position: fixed; top: 16px; left: 16px; z-index: 100; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 16px; background: var(--pf-glass); border: 1px solid var(--pf-border); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-30px) scale(0.8); transition: transform var(--pf-spring-a-dur) var(--pf-spring-a) 0.2s, opacity var(--pf-spring-a-dur) var(--pf-spring-a) 0.2s, box-shadow 0.2s ease; } .nav-ready .pf-brand { opacity: 1; transform: none; } .pf-brand:hover { box-shadow: 0 12px 30px -12px rgba(232, 124, 62, 0.5); text-decoration: none; } .pf-brand img { width: 26px; height: 26px; flex: 0 0 auto; } .pf-brand b { color: var(--pf-heading); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; } /* 1b · language switcher chip (top-right, same glass family as the brand chip) */ .pf-lang { position: fixed; top: 16px; right: 16px; z-index: 100; opacity: 0; transform: translateY(-30px) scale(0.8); transition: transform var(--pf-spring-a-dur) var(--pf-spring-a) 0.25s, opacity var(--pf-spring-a-dur) var(--pf-spring-a) 0.25s; } .nav-ready .pf-lang { opacity: 1; transform: none; } .pf-lang-btn { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--pf-glass); border: 1px solid var(--pf-border); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); color: var(--pf-text); font: inherit; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; cursor: pointer; } .pf-lang-btn:hover { border-color: var(--pf-accent); } .pf-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); display: none; flex-direction: column; min-width: 68px; padding: 6px; border-radius: 14px; background: var(--pf-glass-strong); border: 1px solid var(--pf-border); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.65); } .pf-lang.open .pf-lang-menu { display: flex; } .pf-lang-menu a { padding: 8px 12px; border-radius: 9px; color: var(--pf-text-dim); font-weight: 700; font-size: 0.85rem; text-align: center; } .pf-lang-menu a:hover { background: rgba(232, 124, 62, 0.18); color: var(--pf-heading); text-decoration: none; } .pf-lang-menu a.on { color: var(--pf-accent-2); } /* 2 · compact pill header — spring(100,15) in; indicator spring(300,30) */ .pf-navwrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; } .pf-pill { position: relative; display: flex; align-items: center; padding: 6px; border-radius: 999px; background: var(--pf-glass); border: 1px solid var(--pf-border); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.65); pointer-events: auto; opacity: 0; transform: translateY(-50px) scale(0.8); transition: transform var(--pf-spring-b-dur) var(--pf-spring-b), opacity var(--pf-spring-b-dur) var(--pf-spring-b); } .nav-ready .pf-pill { opacity: 1; transform: none; } .pf-indicator { position: absolute; top: 6px; left: 6px; height: calc(100% - 12px); width: 104px; border-radius: 999px; background: var(--pf-ember); z-index: 0; box-shadow: 0 4px 14px -4px rgba(232, 124, 62, 0.7); transform: translateX(var(--x, 0)); opacity: 0; /* hidden until a section is active (stays hidden on sub-pages) */ transition: transform var(--pf-spring-a-dur) var(--pf-spring-a), opacity 0.2s ease; } .pf-pill.has-active .pf-indicator { opacity: 1; } .pf-pill a { position: relative; z-index: 1; width: 104px; text-align: center; padding: 8px 0; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--pf-text-dim); transition: color 0.2s ease, transform 0.15s ease; } .pf-pill a:hover { transform: scale(1.05); text-decoration: none; } .pf-pill a.hot { color: #1a0f08; } /* 3 · floating Join-the-TestFlight CTA — spring(300,30) delay .3; loops 1:1 */ .pf-cta-dock { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; justify-content: center; align-items: center; pointer-events: none; } /* Ember glow sits BEHIND the button, kept short so it never spills below the button's bottom edge (iOS 26 Safari clips anything down there). */ .pf-cta-dock::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(88vw, 320px); height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( ellipse closest-side, rgba(232, 124, 62, 0.62), transparent 74% ); filter: blur(14px); opacity: 0.82; z-index: 0; } .pf-cta-enter { opacity: 0; transform: translateY(30px) scale(0.8); transition: transform var(--pf-spring-a-dur) var(--pf-spring-a) 0.3s, opacity var(--pf-spring-a-dur) var(--pf-spring-a) 0.3s; } .nav-ready .pf-cta-enter { opacity: 1; transform: none; } .pf-cta { position: relative; z-index: 1; pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 1.02rem; /* ethereal ember glass: translucent warm gradient over a backdrop blur, layered rim + inner highlight outlines, cream text, breathing glow */ color: #ffe9cf; text-shadow: 0 1px 8px rgba(255, 140, 60, 0.35); background: linear-gradient( 135deg, rgba(255, 158, 92, 0.50), rgba(214, 84, 38, 0.32) 55%, rgba(255, 128, 64, 0.44) ); -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7); border: 1px solid rgba(255, 200, 150, 0.68); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 226, 200, 0.4), inset 0 -8px 18px -12px rgba(150, 40, 10, 0.55), 0 8px 32px -10px rgba(238, 118, 60, 0.62); animation: pf-breathe 3.6s ease-in-out infinite; transition: transform 0.2s var(--pf-spring-a), box-shadow 0.25s, border-color 0.25s; } @keyframes pf-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 226, 200, 0.4), inset 0 -8px 18px -12px rgba(150, 40, 10, 0.55), 0 8px 30px -10px rgba(238, 118, 60, 0.45); } 50% { box-shadow: inset 0 1px 0 rgba(255, 226, 200, 0.5), inset 0 -8px 18px -12px rgba(150, 40, 10, 0.5), 0 10px 40px -10px rgba(255, 150, 80, 0.65); } } .pf-cta:hover { transform: translateY(-3px) scale(1.05); border-color: rgba(255, 214, 170, 0.85); box-shadow: inset 0 1px 0 rgba(255, 235, 215, 0.55), inset 0 -8px 18px -12px rgba(150, 40, 10, 0.45), 0 12px 44px -10px rgba(255, 150, 80, 0.75); animation-play-state: paused; text-decoration: none; } .pf-cta:active { transform: translateY(-1px) scale(0.97); } .pf-cta .pf-glint { position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 25%, rgba(255, 245, 235, 0.3), transparent 75% ); transform: translateX(-120%); animation: pf-glint 4.6s ease-in-out infinite; animation-delay: 1.2s; } @keyframes pf-glint { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } } .pf-cta svg { width: 17px; height: 17px; transform: rotate(-35deg) translateY(-1px); } .pf-cta span { position: relative; } /* 4 · mobile — FAB spring(300,30); hamburger .3/.15; radial .4s bez, stagger .1s */ .pf-fab { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 16px; z-index: 110; width: 54px; height: 54px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; background: var(--pf-glass-strong); border: 1px solid var(--pf-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.7); opacity: 0; transform: translateY(30px) scale(0.8); transition: transform var(--pf-spring-a-dur) var(--pf-spring-a) 0.3s, opacity var(--pf-spring-a-dur) var(--pf-spring-a) 0.3s, box-shadow 0.2s ease; } .nav-ready .pf-fab { opacity: 1; transform: none; } .pf-fab:active { transform: scale(0.94); } .pf-bars { position: relative; width: 22px; height: 16px; } .pf-bars i { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--pf-text); } .pf-bars i:nth-child(1) { top: 0; transform-origin: left center; transition: transform 0.3s var(--pf-spring-a); } .pf-bars i:nth-child(2) { top: 7px; transition: opacity 0.15s ease, transform 0.15s ease; } .pf-bars i:nth-child(3) { top: 14px; transform-origin: left center; transition: transform 0.3s var(--pf-spring-a); } .pf-fab.open .pf-bars i:nth-child(1) { transform: translate(3px, -1px) rotate(45deg) scaleX(1.15); } .pf-fab.open .pf-bars i:nth-child(2) { opacity: 0; transform: scaleX(0); } .pf-fab.open .pf-bars i:nth-child(3) { transform: translate(3px, 1px) rotate(-45deg) scaleX(1.15); } .pf-scrim { position: fixed; bottom: -160px; right: -160px; width: 520px; height: 520px; z-index: 105; display: none; pointer-events: none; border-radius: 50%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask: radial-gradient( circle at bottom right, #000 34%, rgba(0, 0, 0, 0.6) 62%, transparent 78% ); mask: radial-gradient( circle at bottom right, #000 34%, rgba(0, 0, 0, 0.6) 62%, transparent 78% ); opacity: 0; transform: scale(0); transition: opacity 0.5s var(--pf-bez) 0.1s, transform 0.6s var(--pf-bez) 0.1s; } .pf-scrim.show { opacity: 1; transform: scale(1); } .pf-radial { position: fixed; bottom: calc(39px + env(safe-area-inset-bottom, 0px)); right: 41px; z-index: 108; display: none; } .pf-radial a { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: var(--pf-glass-strong); border: 1px solid var(--pf-border); color: var(--pf-text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.7); transform: translate(-70px, -40px) scale(0.3); opacity: 0; transition: transform 0.4s var(--pf-bez) var(--d, 0s), opacity 0.3s ease var(--d, 0s); } .pf-radial a.on { background: var(--pf-ember); color: #1a0f08; border-color: transparent; } .pf-radial.show a { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); } /* mobile (<640px): swap the desktop pill for the radial FAB menu */ @media (max-width: 640px) { .pf-navwrap { display: none; } .pf-fab { display: flex; } .pf-radial { display: block; } .pf-scrim { display: block; } .pf-cta-dock { left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: none; transition: opacity 0.25s ease, transform 0.3s ease; } .pf-cta-dock.hidden { opacity: 0; transform: translateY(28px) scale(0.5); pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .pf-brand, .pf-pill, .pf-indicator, .pf-cta-enter, .pf-fab, .pf-bars i, .pf-radial a, .pf-scrim { transition-duration: 0.001ms !important; } .pf-cta, .pf-glint { animation: none !important; } }