/* invite.css — Scaleo AI "invited affiliate" mode * Applies when has class .is-invited (added by invite.js). * Final look: Surface strip · grey "You're invited" badge · grey font · dark button (monochrome). * Tokens fall back to literals so the strip also renders standalone. */ /* 1) Nav — hide the Log in / Apply now buttons (nav-right becomes empty) */ body.is-invited .nav-right > * { display: none; } /* 2) Invitation hook strip ------------------------------------------------ */ .invite-strip { position: sticky; top: 60px; /* flush under the 60px sticky nav */ z-index: 55; /* below nav (60), above page content */ background: #f5f6f8; color: var(--ink, #08090d); border-bottom: 1px solid var(--line, #ededee); font-family: 'Geist', system-ui, -apple-system, sans-serif; animation: inviteSlideDown 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .invite-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; min-height: 46px; } .invite-text { display: inline-flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; } .invite-badge { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; font-family: var(--mono, 'Geist Mono', ui-monospace, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; padding: 3px 9px; border-radius: 100px; background: rgba(8, 9, 13, 0.06); color: #6b7280; } .invite-msg { color: #6b7280; } .invite-msg b { color: #2c2f37; font-weight: 500; } .invite-cta { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; background: var(--ink, #08090d); color: #fff; font-size: 13.5px; font-weight: 500; letter-spacing: -0.1px; padding: 8px 16px; border-radius: 8px; white-space: nowrap; text-decoration: none; transition: background 0.16s ease, transform 0.12s ease; } .invite-cta:hover { background: #22242e; } .invite-cta:active { transform: translateY(1px); } .invite-cta .icn { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } @keyframes inviteSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* Static utility — for showing the strip in isolation (specimens) */ .invite-strip.is-static { position: static; top: auto; animation: none; } /* Optional centered alignment (desktop only — mobile stays stacked) */ @media (min-width: 641px) { .invite-strip.align-center .invite-inner { position: relative; justify-content: center; } .invite-strip.align-center .invite-text { flex: 0 1 auto; padding: 0 150px; } .invite-strip.align-center .invite-cta { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); } } @media (prefers-reduced-motion: reduce) { .invite-strip { animation: none; } } /* 3) Mobile (<=640px) — strip becomes a fixed bottom bar ------------------ */ @media (max-width: 640px) { .invite-strip { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-bottom: none; border-top: 1px solid var(--line, #ededee); box-shadow: 0 -10px 28px -16px rgba(8, 9, 13, 0.28); animation: inviteSlideUp 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .invite-inner { gap: 12px; padding: 10px 16px; min-height: 60px; align-items: center; } .invite-text { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 12.75px; } .invite-badge { margin-top: 0; } /* keep page content clear of the fixed bar */ body.is-invited { padding-bottom: 92px; } @keyframes inviteSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }