/* ============================================ Checkout modal + order card styling Shared between pricing.html and dashboard.html ============================================ */ [x-cloak] { display: none !important; } /* === Modal shell (matches smokey-modal-card aesthetic) === */ .tr-modal-backdrop { position: fixed; inset: 0; z-index: 10000; /* sits above page content + the nav pill (see body.tr-modal-open rule) */ display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; overflow-y: auto; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (min-width: 640px) { .tr-modal-backdrop { align-items: center; padding: 2.5rem 1rem; } } /* The floating nav pill is relocated to at z-index:2147483647 by auth-state.js (movePillNavToBody), so it would paint over the checkout modal. While a checkout modal is open we add .tr-modal-open to and drop the pill below the backdrop so the modal truly covers the whole page. !important is required to beat the pill wrapper's inline z-index. */ body.tr-modal-open [data-pill-moved="true"] { z-index: 5 !important; } /* easter-eggs.js injects `body > section, body > div:not(...) { position: relative; z-index: 10 !important; }` so page content paints above its ambient effects. Side effect: every top-level section becomes a stacking context, so a modal rendered inside one is trapped — later sibling sections (same z-index 10, later in DOM) paint over it no matter how high the modal's own z-index. While a checkout modal is open, lift the section that owns it above the rest. Both rules need !important + higher specificity than the injected `body > section` to win the cascade. */ body.tr-modal-open #pricing-hero { z-index: 10000 !important; } /* Generic form for other pages (e.g. dashboard's resume-order modal). */ body.tr-modal-open > :has(.tr-modal-backdrop) { z-index: 10000 !important; } /* Modals living as DIRECT children of (dashboard resume modal): the element must carry a class containing the substring "fixed" (tr-modal-fixed) so the easter-eggs `body > div:not([class*="fixed"])` boost skips it — that selector outweighs .tr-modal-backdrop and would flip position to relative. Pinned here as insurance in case the injected selector ever changes. */ body > .tr-modal-backdrop { position: fixed !important; } /* Open animation (same feel as the dashboard streams modal): overlay fades in while the card pops — scale 0.95→1, 10px rise, fade. Keyframes restart each time the element goes from display:none to rendered, so this works for the Alpine x-show checkout modal, the JS-toggled resume modal, and the dashboard's hidden-class modals (which reference these keyframes too). */ @keyframes tr-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tr-modal-pop-in { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .tr-modal-backdrop { animation: tr-modal-fade-in 0.3s ease; } .tr-modal-panel { animation: tr-modal-pop-in 0.3s ease; } /* Step-to-step transition: each step eases in (fade + slight rise) instead of hard-swapping, so switching between the coin picker and the "card coming soon" step (and every other step change) feels smooth. Uses Alpine x-show's display:none -> block flip to replay the keyframe automatically — no JS. `both` holds the from-state before it plays, preventing a pre-animation flash. */ @keyframes tr-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tr-step, .tr-step-center, .tr-step-pay { animation: tr-step-in 0.28s ease both; } @media (prefers-reduced-motion: reduce) { .tr-step, .tr-step-center, .tr-step-pay { animation: none; } } .tr-modal-panel { position: relative; width: 100%; max-width: 32rem; max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; border-radius: 1rem; background: rgba(24, 24, 27, 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(196, 181, 253, 0.10); box-shadow: 0 0 48px rgba(0, 0, 0, 0.35); scrollbar-width: none; -ms-overflow-style: none; } .tr-modal-panel::-webkit-scrollbar { display: none; } .tr-subpanel { background: rgba(9, 9, 11, 0.30); border: 1px solid rgba(196, 181, 253, 0.10); border-radius: 0.75rem; padding: 1rem 1.25rem; } .tr-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; padding: 0.5rem; border-radius: 0.5rem; color: #a1a1aa; background: transparent; border: 0; cursor: pointer; transition: all 0.15s; } .tr-modal-close:hover { color: #ede9fe; background: rgba(139, 92, 246, 0.1); } .tr-modal-header { padding: 1.75rem 1.5rem 1.25rem; border-bottom: 1px solid rgba(196, 181, 253, 0.08); position: relative; } .tr-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(196, 181, 253, 0.7); font-weight: 600; margin: 0 0 0.375rem; } .tr-title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: 0; background: linear-gradient(to bottom, #ede9fe, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tr-subtitle { font-size: 0.875rem; color: #a1a1aa; margin: 0.5rem 0 0; } .tr-step { padding: 1.5rem; } .tr-step-center { padding: 3rem 1.5rem; text-align: center; } .tr-instr { font-size: 0.875rem; color: #d4d4d8; margin: 0 0 1rem; } .tr-error-banner { margin-bottom: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(253, 164, 175, 0.3); color: #fecdd3; font-size: 0.875rem; } /* Coin picker grid */ .tr-coin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; } .tr-coin-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; background: rgba(39, 39, 42, 0.5); border: 1px solid rgba(196, 181, 253, 0.06); text-align: left; cursor: pointer; transition: all 0.15s; width: 100%; color: inherit; font-family: inherit; } .tr-coin-btn:hover:not(:disabled) { border-color: rgba(167, 139, 250, 0.5); background: rgba(139, 92, 246, 0.08); box-shadow: 0 0 20px -8px rgba(124, 58, 237, 0.6); } .tr-coin-btn:disabled { opacity: 0.5; cursor: wait; } .tr-coin-icon { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; } .tr-coin-icon img { width: 100%; height: 100%; border-radius: 9999px; display: block; } .tr-coin-initials { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 9999px; color: white; font-size: 0.625rem; font-weight: 700; } .tr-coin-text { min-width: 0; flex: 1; } .tr-coin-name { display: block; font-size: 0.875rem; font-weight: 600; color: #ede9fe; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-coin-network { display: block; font-size: 0.6875rem; color: #a1a1aa; margin-top: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-hosted-link { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(196, 181, 253, 0.1); text-align: center; } .tr-hosted-link p { font-size: 0.6875rem; color: #a1a1aa; margin: 0 0 0.375rem; } .tr-hosted-link-btn { font-size: 0.75rem; font-weight: 600; color: #c4b5fd; background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; } .tr-hosted-link-btn:hover { color: #ede9fe; text-decoration: underline; } /* Payment step */ .tr-pay-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .tr-status-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid; } .tr-status-waiting { background: rgba(245, 158, 11, 0.1); border-color: rgba(252, 211, 77, 0.3); color: #fcd34d; } .tr-status-confirmed { background: rgba(16, 185, 129, 0.15); border-color: rgba(110, 231, 183, 0.3); color: #6ee7b7; } .tr-status-dot { position: relative; display: inline-flex; height: 0.5rem; width: 0.5rem; } .tr-status-dot-core { position: relative; display: inline-flex; border-radius: 9999px; height: 0.5rem; width: 0.5rem; } .tr-status-dot-ping { position: absolute; inset: 0; display: inline-flex; border-radius: 9999px; opacity: 0.75; animation: tr-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes tr-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } } .tr-ttl { font-size: 0.75rem; color: #a1a1aa; } .tr-ttl-value { font-family: ui-monospace, monospace; font-weight: 600; color: #ddd6fe; font-variant-numeric: tabular-nums; } .tr-amount-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #a1a1aa; font-weight: 600; margin: 0 0 0.375rem; } .tr-amount-btn { display: inline-flex; align-items: baseline; gap: 0.5rem; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity 0.15s; color: inherit; font-family: inherit; } .tr-amount-btn:hover { opacity: 0.85; } .tr-amount-value { font-size: 2.25rem; font-weight: 700; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; background: linear-gradient(to bottom, #ede9fe, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (min-width: 640px) { .tr-amount-value { font-size: 2.5rem; } } .tr-amount-currency { font-size: 1rem; font-weight: 600; color: rgba(196, 181, 253, 0.8); text-transform: uppercase; } .tr-amount-copyicon { width: 0.875rem; height: 0.875rem; color: #71717a; margin-left: 0.25rem; align-self: center; } .tr-qr-wrap { display: flex; flex-direction: column; align-items: center; } .tr-qr-frame { position: relative; padding: 0.875rem; background: #ffffff; border-radius: 0.75rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } .tr-qr-frame img { display: block; width: 14rem; height: 14rem; image-rendering: pixelated; } .tr-qr-caption { margin: 0.75rem 0 0; font-size: 0.6875rem; color: #a1a1aa; } .tr-field-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #a1a1aa; font-weight: 600; } .tr-field-label-accent { color: rgba(196, 181, 253, 0.8); } .tr-copy-btn { font-size: 0.6875rem; font-weight: 600; color: #c4b5fd; background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; } .tr-copy-btn:hover { color: #ede9fe; } .tr-address-btn { display: block; width: 100%; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: rgba(39, 39, 42, 0.6); border: 1px solid rgba(196, 181, 253, 0.1); word-break: break-all; font-family: ui-monospace, monospace; font-size: 0.75rem; color: #ede9fe; text-align: left; cursor: pointer; transition: all 0.15s; font-family: inherit; } .tr-address-btn:hover { border-color: rgba(167, 139, 250, 0.4); } .tr-warn { padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(252, 211, 77, 0.4); } .tr-warn-label { margin: 0 0 0.25rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #fcd34d; font-weight: 700; } .tr-warn-value { margin: 0; font-family: ui-monospace, monospace; font-size: 0.875rem; color: #fef3c7; word-break: break-all; } .tr-warn-help { margin: 0.25rem 0 0; font-size: 0.6875rem; color: rgba(253, 230, 138, 0.85); } .tr-copy-feedback { font-size: 0.75rem; color: #6ee7b7; text-align: center; margin: 0; } .tr-help-text { margin: 0; font-size: 0.6875rem; color: #71717a; text-align: center; line-height: 1.6; } /* Success / error icons */ .tr-icon-success { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 9999px; background: rgba(16, 185, 129, 0.15); box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.2); margin: 0 auto 1.25rem; } .tr-icon-success-ping { position: absolute; inset: 0; border-radius: 9999px; background: rgba(110, 231, 183, 0.2); animation: tr-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; } .tr-icon-success svg { position: relative; width: 2.5rem; height: 2.5rem; color: #6ee7b7; } .tr-icon-error { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 9999px; background: rgba(244, 63, 94, 0.15); box-shadow: 0 0 0 4px rgba(253, 164, 175, 0.2); margin: 0 auto 1.25rem; } .tr-icon-error svg { width: 2.5rem; height: 2.5rem; color: #fda4af; } .tr-success-title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; background: linear-gradient(to bottom, #ede9fe, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tr-success-text { margin: 0 0 1.75rem; font-size: 0.875rem; color: #a1a1aa; } /* Buttons */ .tr-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem; background: linear-gradient(to bottom, #7c3aed, #6d28d9); color: #ede9fe; font-weight: 600; font-size: 0.9375rem; box-shadow: 0 4px 14px -4px rgba(124, 58, 237, 0.6); border: 0; cursor: pointer; transition: all 0.15s; font-family: inherit; } .tr-btn-primary:hover { background: linear-gradient(to bottom, #8b5cf6, #7c3aed); box-shadow: 0 6px 20px -4px rgba(124, 58, 237, 0.8); transform: translateY(-1px); } .tr-btn-primary svg { width: 1rem; height: 1rem; } .tr-btn-secondary { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; background: #27272a; border: 1px solid rgba(196, 181, 253, 0.1); color: #ede9fe; font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: all 0.15s; font-family: inherit; } .tr-btn-secondary:hover { background: #3f3f46; border-color: rgba(167, 139, 250, 0.3); } .tr-loading { display: inline-block; width: 2rem; height: 2rem; border: 2px solid rgba(167, 139, 250, 0.3); border-top-color: #a78bfa; border-radius: 9999px; animation: tr-spin 0.8s linear infinite; margin-bottom: 0.75rem; } @keyframes tr-spin { to { transform: rotate(360deg); } } .tr-loading-text { margin: 0; font-size: 0.875rem; color: #a1a1aa; } /* ============================================ Order list (dashboard Payment History) ============================================ */ .tr-orders { display: flex; flex-direction: column; gap: 0.625rem; } .tr-order { display: flex; flex-direction: column; padding: 0.875rem 1rem; gap: 0.625rem; border-radius: 0.625rem; background: rgba(9, 9, 11, 0.30); border: 1px solid rgba(196, 181, 253, 0.10); transition: all 0.15s; } @media (min-width: 640px) { .tr-order { flex-direction: row; align-items: center; justify-content: space-between; } } .tr-order-clickable { cursor: pointer; } .tr-order-clickable:hover { background: rgba(24, 24, 27, 0.55); border-color: rgba(167, 139, 250, 0.35); box-shadow: 0 0 18px -8px rgba(124, 58, 237, 0.45); } .tr-order-main { flex: 1; min-width: 0; } .tr-order-row1 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; } .tr-order-title { font-size: 0.9375rem; font-weight: 600; color: #ede9fe; } .tr-order-provider { font-size: 0.6875rem; color: #71717a; text-transform: uppercase; letter-spacing: 0.05em; } .tr-order-meta { font-size: 0.8125rem; color: #a1a1aa; } .tr-order-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .tr-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid; } .tr-badge-active { background: rgba(16, 185, 129, 0.13); border-color: rgba(110, 231, 183, 0.25); color: #6ee7b7; } .tr-badge-pending { background: rgba(245, 158, 11, 0.12); border-color: rgba(252, 211, 77, 0.25); color: #fcd34d; } .tr-badge-failed { background: rgba(244, 63, 94, 0.12); border-color: rgba(253, 164, 175, 0.25); color: #fda4af; } .tr-badge-expired { background: rgba(113, 113, 122, 0.18); border-color: rgba(212, 212, 216, 0.20); color: #d4d4d8; } .tr-badge-refunded { background: rgba(59, 130, 246, 0.12); border-color: rgba(147, 197, 253, 0.25); color: #93c5fd; } .tr-badge-canceled { background: rgba(113, 113, 122, 0.18); border-color: rgba(212, 212, 216, 0.20); color: #d4d4d8; } .tr-badge-abandoned{ background: rgba(113, 113, 122, 0.18); border-color: rgba(212, 212, 216, 0.20); color: #d4d4d8; } .tr-order-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 0.4rem; border: 1px solid; background: transparent; cursor: pointer; transition: all 0.15s; font-family: inherit; } .tr-order-btn-resume { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); color: #c084fc; } .tr-order-btn-resume:hover { background: rgba(139, 92, 246, 0.25); border-color: rgba(139, 92, 246, 0.5); } .tr-order-btn-cancel { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.25); color: #fca5a5; } .tr-order-btn-cancel:hover { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.45); } /* ============================================ Admin: subscription stats grid ============================================ */ .tr-stat-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .tr-stat-grid { grid-template-columns: repeat(4, 1fr); } } .tr-stat-card { padding: 1rem 1.25rem; border-radius: 0.75rem; background: rgba(9, 9, 11, 0.30); border: 1px solid rgba(196, 181, 253, 0.10); } .tr-stat-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; font-weight: 600; margin: 0 0 0.25rem; } .tr-stat-value { font-size: 1.5rem; font-weight: 700; color: #ede9fe; font-variant-numeric: tabular-nums; margin: 0; } .tr-stat-sub { font-size: 0.6875rem; color: #71717a; margin: 0.125rem 0 0; } /* ============================================ "Subscription at capacity" overlay on pricing cards ============================================ */ .tr-unavailable { margin-top: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(252, 211, 77, 0.30); color: #fcd34d; font-size: 0.75rem; line-height: 1.5; text-align: center; } /* ============================================ Order reuse + regenerate failsafe (payment step) ============================================ */ .tr-reused-note { padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(196, 181, 253, 0.3); color: #ddd6fe; font-size: 0.8125rem; line-height: 1.5; } .tr-regen-box { padding-top: 0.75rem; border-top: 1px solid rgba(196, 181, 253, 0.1); text-align: center; } .tr-regen-box p { font-size: 0.6875rem; color: #a1a1aa; margin: 0 0 0.375rem; line-height: 1.5; } .tr-regen-box .tr-hosted-link-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; } .tr-reused-note p { margin: 0; } .tr-reused-note .tr-hosted-link-btn { margin-top: 0.375rem; } .tr-reused-note .tr-hosted-link-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; } .tr-reused-note a { color: #c4b5fd; text-decoration: underline; } .tr-reused-note a:hover { color: #ede9fe; } /* Payment step layout. Must be a class, not inline style: Alpine's x-show rewrites inline display on toggle, which drops flex and kills the gap. */ .tr-step-pay { display: flex; flex-direction: column; gap: 1rem; } .tr-reused-note .tr-regen-wait { margin-top: 0.375rem; font-size: 0.6875rem; color: #a1a1aa; } /* ============================================ Pricing-page segmented pills with a sliding active indicator (v2.4) --seg-n = option count, --seg-i = active index. Buttons are equal-width (flex:1) so the indicator can slide by index * its own width. The indicator reuses the site's bg-btn-primary / shadow-btn-primary gradient. ============================================ */ /* Layout only — the tone (bg-zinc-950/[.01] shadow-inner-blur + violet-200/6% border) comes from the site's own Tailwind classes on the element, so it matches the nav bar / "Titanray's pricing" badge exactly. */ .tr-pill { position: relative; display: inline-flex; padding: 4px; border-radius: 9999px; } /* left/width are set by JS (positionPill) from the active button's real box, so the indicator lands exactly under variable-width labels ("3 Months" vs "Annual"). */ .tr-pill-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9999px; transition: left 0.36s cubic-bezier(0.34, 1.15, 0.4, 1), width 0.36s cubic-bezier(0.34, 1.15, 0.4, 1); z-index: 0; pointer-events: none; } .tr-pill-opt { position: relative; z-index: 1; flex: 1 1 0; white-space: nowrap; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-weight: 600; color: #ddd6fe; border-radius: 9999px; padding: 8px 16px; font-size: 0.875rem; line-height: 1; transition: color 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .tr-pill-opt:hover:not(.is-on) { color: #fff; } .tr-pill-opt.is-on { color: #fff; } .tr-pill-sm .tr-pill-opt { padding: 6px 12px; font-size: 0.75rem; } @media (prefers-reduced-motion: reduce) { .tr-pill-ind { transition: none; } } /* Price value pulse when the shown price changes (billing / method switch). */ @keyframes tr-price-bump { 0% { opacity: 0.25; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } } .tr-price-bump { animation: tr-price-bump 0.34s cubic-bezier(0.2, 0.7, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .tr-price-bump { animation: none; } } /* ============================================ Pricing plan card polish (v2.9) — bigger + more eye-catching, still responsive. Custom classes (not new Tailwind utilities) so the purged pricing bundle doesn't need a rebuild. (Price text itself is plain gradient x-text — the slot-machine odometer was reverted; its tabular digits read as "funny".) ============================================ */ .tr-plan-card { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease; will-change: transform; } @media (hover: hover) { .tr-plan-card:hover { transform: translateY(-6px); box-shadow: 0 26px 64px -28px rgba(124, 58, 237, 0.60); } } /* Recommended plan: violet ring + a slow "breathing" glow so it pops. */ .tr-plan-card-pro { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 0 40px -12px rgba(139, 92, 246, 0.45); animation: tr-plan-pulse 3.6s ease-in-out infinite; } @keyframes tr-plan-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.32), 0 0 34px -14px rgba(139, 92, 246, 0.40); } 50% { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.55), 0 0 54px -10px rgba(139, 92, 246, 0.78); } } @media (hover: hover) { .tr-plan-card-pro:hover { transform: translateY(-6px); animation: none; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.55), 0 30px 72px -28px rgba(139, 92, 246, 0.78); } } @media (prefers-reduced-motion: reduce) { .tr-plan-card-pro { animation: none; } } /* Roomier interior. */ .tr-plan-body { padding: 2rem 1.5rem; } @media (min-width: 640px) { .tr-plan-body { padding: 2.5rem 2rem; } } @media (min-width: 1280px) { .tr-plan-body { padding: 2.75rem 2.5rem; } } /* Slightly larger tier label (price stays the original text-5xl). */ .tr-plan-name { font-size: 1.125rem; } @media (min-width: 640px) { .tr-plan-name { font-size: 1.375rem; } } /* ============================================ Per-digit slot-machine odometer (v3.1). Each digit is an overflow-hidden column over a 0-9 track that rolls (translateY) to its digit; the column's WIDTH animates to that digit's measured NATURAL width, so digits keep proportional spacing (no monospace look). Built + driven by rollPrice() in pricing.js. Leading columns with no digit collapse to width 0. ============================================ */ .tr-odo { display: inline-flex; align-items: flex-end; } .tr-odo .tr-od-sep { display: inline-block; height: 1.125em; line-height: 1.125; } .tr-odo .tr-od-col { position: relative; display: inline-block; overflow: hidden; height: 1.125em; line-height: 1.125; transition: width 0.55s cubic-bezier(0.33, 1, 0.4, 1); } .tr-odo .tr-od-track { display: block; will-change: transform; transition: transform 0.6s cubic-bezier(0.33, 1, 0.4, 1); } .tr-odo .tr-od-l { display: block; height: 1.125em; line-height: 1.125; text-align: center; } @media (prefers-reduced-motion: reduce) { .tr-odo .tr-od-col, .tr-odo .tr-od-track { transition: none !important; } } /* The parent's bg-clip-text gradient can't reach glyphs inside the overflow- hidden digit columns, so digits fell back to the glow layer's flat violet while $ and . showed the gradient. Apply the SAME gradient per glyph (works at the element level regardless of the overflow ancestor) so $, digits and . are one uniform gradient. Each glyph box is 1.125em tall = the same span the parent gradient used, so the mapping is identical. Scoped to the gradient layer (tr-price-grad); the glow layer stays solid violet behind for the halo. */ .tr-price-grad .tr-od-l, .tr-price-grad .tr-od-sep { background-image: linear-gradient(to bottom, #a78bfa 0%, #a78bfa 50%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tr-price-glow .tr-od-l, .tr-price-glow .tr-od-sep { color: #c4b5fd; -webkit-text-fill-color: #c4b5fd; }