/** * Membership Priority Sync — the trial fork modal. * * Deliberately self-contained. It renders at the end of , outside every * theme wrapper, and every rule is scoped under .mps-fork so nothing here can * reach the rest of the site and nothing on the site can reasonably reach in. * Values are hardcoded rather than inherited for the same reason: this screen * has to look right on any page that carries a Pro button. * * Colours are the site's own brand tokens (--primary #b1fc31 from Core * Framework, the #101828 / #343c54 darks used across the site chrome). */ .mps-fork { --mps-lime: #b1fc31; --mps-ink: #101828; --mps-ink-2: #1a2233; --mps-line: rgba(255, 255, 255, 0.11); --mps-text: #ffffff; --mps-muted: rgba(255, 255, 255, 0.62); position: fixed; inset: 0; z-index: 2147483000; /* above Voxel's own popups and the sticky header */ display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mps-fork__backdrop { position: fixed; inset: 0; background: rgba(4, 8, 16, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: mps-fork-fade 160ms ease-out both; } .mps-fork__panel { position: relative; width: 100%; max-width: 760px; margin: auto; background: var(--mps-ink); color: var(--mps-text); border: 1px solid var(--mps-line); border-radius: 20px; padding: 34px 34px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); animation: mps-fork-rise 200ms cubic-bezier(0.2, 0.8, 0.3, 1) both; font-family: inherit; box-sizing: border-box; } .mps-fork__panel * { box-sizing: border-box; } @keyframes mps-fork-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mps-fork-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mps-fork__backdrop, .mps-fork__panel { animation: none; } } /* ---- header ---- */ .mps-fork__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--mps-line); border-radius: 50%; background: transparent; color: var(--mps-muted); cursor: pointer; padding: 0; transition: color 120ms, border-color 120ms, background 120ms; } .mps-fork__close:hover, .mps-fork__close:focus-visible { color: var(--mps-text); border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); } .mps-fork__close svg { width: 15px; height: 15px; display: block; } .mps-fork__title { margin: 0 44px 6px 0; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; color: var(--mps-text); } .mps-fork__subtitle { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: var(--mps-muted); } /* ---- the two doors ---- */ .mps-fork__options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mps-fork__option { display: flex; flex-direction: column; background: var(--mps-ink-2); border: 1px solid var(--mps-line); border-radius: 15px; padding: 22px 20px 20px; transition: border-color 140ms, transform 140ms; } .mps-fork__option:hover { border-color: rgba(177, 252, 49, 0.45); transform: translateY(-2px); } .mps-fork__option--feature { border-color: rgba(177, 252, 49, 0.38); background: radial-gradient(120% 90% at 50% 0%, rgba(177, 252, 49, 0.10), transparent 62%), var(--mps-ink-2); } .mps-fork__badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--mps-muted); margin-bottom: 16px; } .mps-fork__option--feature .mps-fork__badge { background: var(--mps-lime); color: var(--mps-ink); } /* The number is the whole point — it is what gets scanned. */ .mps-fork__days { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .mps-fork__num { font-size: 54px; line-height: 0.92; font-weight: 800; letter-spacing: -0.03em; color: var(--mps-lime); font-variant-numeric: tabular-nums; } .mps-fork__unit { font-size: 14px; font-weight: 600; color: var(--mps-muted); } .mps-fork__label { margin: 10px 0 14px; font-size: 17px; font-weight: 700; color: var(--mps-text); } .mps-fork__points { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; } .mps-fork__points li { position: relative; padding-left: 25px; font-size: 13.5px; line-height: 1.45; color: var(--mps-muted); } .mps-fork__points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(177, 252, 49, 0.14); /* a lime check, inlined so the modal needs no icon font or network */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b1fc31' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; } .mps-fork__cta { display: block; width: 100%; text-align: center; padding: 13px 16px!important; border-radius: 10px; border: 1px solid var(--mps-line); background: transparent; color: var(--mps-text); font-size: 14.5px!important; font-weight: 700; line-height: 1.2!important; text-decoration: none; cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms, opacity 140ms; font-family: inherit; } .mps-fork__cta:hover, .mps-fork__cta:focus-visible { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.34); color: var(--mps-text); } .mps-fork__option--feature .mps-fork__cta { background: var(--mps-lime); border-color: var(--mps-lime); color: var(--mps-ink); } .mps-fork__option--feature .mps-fork__cta:hover, .mps-fork__option--feature .mps-fork__cta:focus-visible { background: #c4ff5c; border-color: #c4ff5c; color: var(--mps-ink); } /* ---- footer ---- */ .mps-fork__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mps-line); display: flex; justify-content: center; } .mps-fork__cancel { background: none; border: 0; padding: 6px 10px; font-size: 14px; color: var(--mps-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; } .mps-fork__cancel:hover, .mps-fork__cancel:focus-visible { color: var(--mps-text); } .mps-fork :focus-visible { outline: 2px solid var(--mps-lime); outline-offset: 2px; } /* Busy state while a choice is being processed. */ .mps-fork--busy .mps-fork__panel { pointer-events: none; opacity: 0.6; } /* ---- phones ---- */ @media (max-width: 700px) { .mps-fork { padding: 0; align-items: flex-end; } .mps-fork__panel { max-width: none; border-radius: 18px 18px 0 0; padding: 28px 20px 20px; max-height: 94vh; overflow-y: auto; } .mps-fork__options { grid-template-columns: 1fr; gap: 12px; } .mps-fork__title { font-size: 22px; } .mps-fork__num { font-size: 44px; } } /* Deliberately NOT reordering the cards on mobile. Visually promoting the * with-card door with `order` would put a card request first on the exact * screen this feature exists to get people past, and it would leave tab and * screen-reader order running opposite to the visual order. The card-free * door leads at every width; the longer one is distinguished by styling * instead, which costs nothing in either respect. */