.feature-card { transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -10px rgba(26,25,21,0.14); } .vs-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; } .vs-badge.them { background: #fee2e2; color: #dc2626; } .vs-badge.us { background: #dcfce7; color: #16a34a; } /* Cycle toggle */ .cycle-toggle { display: inline-flex; background: rgba(255,255,255,0.4); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 16px -6px rgba(26,25,21,0.08); border-radius: 999px; padding: 4px; gap: 2px; position: relative; } .dark .cycle-toggle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .dark .cycle-toggle button { color: #b9bec7; } .dark .cycle-toggle button.active { background: rgba(255,255,255,0.14); color: #f3f4f6; } .cycle-toggle button { border: 0; background: transparent; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #6b6a65; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; position: relative; } .cycle-toggle button.active { background: #ffffff; color: #2d2a26; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .cycle-toggle .save-pill { position: absolute; top: -10px; right: -8px; background: linear-gradient(135deg, #ff7849, #ff5a36); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 2px 6px rgba(255,90,54,0.35); } /* Promo banner */ .promo-banner { position: relative; overflow: hidden; background: linear-gradient(130deg, #fff1ea 0%, #ffe1d1 45%, #ffd4b8 100%); border: 1px solid #ffbfa0; border-radius: 20px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: 0 6px 24px -12px rgba(255, 115, 70, 0.5); } /* Left text block grows + shrinks so long EN copy wraps inside instead of pushing the countdown to a new row. */ .promo-banner > :first-child { flex: 1 1 320px; min-width: 0; } /* Countdown keeps its natural width; only wraps on truly narrow screens. */ .promo-banner > :last-child { flex-shrink: 0; } .promo-banner::before { content: ''; position: absolute; top: -40%; right: -10%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%); pointer-events: none; } .promo-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #ff7849, #ff5a36); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 18px -4px rgba(255,90,54,0.55); } .promo-countdown { display: inline-flex; gap: 6px; margin-top: 6px; } .promo-countdown .cell { background: #2d2a26; color: #fff; font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 14px; padding: 6px 10px; border-radius: 8px; min-width: 38px; text-align: center; letter-spacing: 0.04em; } .promo-countdown .label { font-size: 10px; color: #a19d95; margin-top: 2px; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; } /* Yearly promo corner pill on cards (no rotation, no overflow:hidden needed) */ .promo-ribbon { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #ff7849, #ff5a36); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(255,90,54,0.45); z-index: 5; } /* Price crossed out */ .price-original { color: #b7b5ae; text-decoration: line-through; font-size: 14px; margin-right: 6px; } /* Plan-current badge */ .current-plan-pill { background: #eef7ef; color: #2e8b4f; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; } /* ===== API Billing v2 (cream-aligned) ===== */ .billing-mode-tabs { display: inline-flex; background: rgba(255,255,255,0.4); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 16px -6px rgba(26,25,21,0.08); border-radius: 999px; padding: 4px; gap: 2px; } .dark .billing-mode-tabs { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .dark .billing-mode-tabs button { color: #b9bec7; } .dark .billing-mode-tabs button.active { background: rgba(255,255,255,0.14); color: #f3f4f6; } .billing-mode-tabs button { border: 0; background: transparent; padding: 10px 24px; font-size: 14px; font-weight: 600; color: #6b6a65; border-radius: 999px; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; } .billing-mode-tabs button.active { background: #ffffff; color: #2d2a26; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .billing-mode-tabs .new-badge { background: linear-gradient(135deg, #ff7849, #ff5a36); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(255,90,54,0.35); } .ch-segment { display: inline-flex; background: rgba(255,255,255,0.4); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 16px -6px rgba(26,25,21,0.08); border-radius: 999px; padding: 4px; gap: 2px; } .dark .ch-segment { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .dark .ch-segment button { color: #b9bec7; } .dark .ch-segment button.active { background: rgba(255,255,255,0.14); color: #f3f4f6; } .ch-segment button { border: 0; background: transparent; padding: 9px 20px; font-size: 13px; font-weight: 600; color: #6b6a65; border-radius: 999px; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; } .ch-segment button.active { background: #ffffff; color: #2d2a26; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .ch-segment button.active.is-5x { background: #D97757; color: #fff; box-shadow: 0 2px 8px rgba(217,119,87,0.4); } .ch-segment .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; } .ch-segment button.active .dot { opacity: 1; } .detail-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 100%); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,0.65); border-radius: 1.5rem; padding: 28px 32px; transition: all .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 12px 36px -14px rgba(26,25,21,0.12), inset 0 1px 1px rgba(255,255,255,0.8); } .detail-panel.is-2x { background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(240,253,244,0.55) 100%); border-color: rgba(22,163,74,0.18); } .detail-panel.is-5x { background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(250,245,255,0.55) 100%); border-color: rgba(124,58,237,0.2); } .dark .detail-panel, .dark .detail-panel.is-2x, .dark .detail-panel.is-5x { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%); border-color: rgba(255,255,255,0.12); box-shadow: 0 12px 36px -14px rgba(0,0,0,0.5); } .detail-panel::before { content: ''; position: absolute; top: -30%; right: -8%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(22,163,74,0.06) 0%, transparent 65%); pointer-events: none; } .detail-panel.is-5x::before { background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 65%); } .pain-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 12px; border: 1px solid rgba(26,25,21,0.05); transition: all .2s; } .pain-item:hover { border-color: rgba(217,119,87,0.25); box-shadow: 0 4px 12px rgba(217,119,87,0.05); } .pain-cross { color: #9ca3af; text-decoration: line-through; } .summary-tile { background: #fff; border: 1px solid rgba(26,25,21,0.06); border-radius: 16px; padding: 22px; transition: all .2s; } .summary-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: rgba(217,119,87,0.2); } /* ===== Dark-mode adaptation (API tab + tiles + comparison pill) ===== */ .dark .pain-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .dark .summary-tile { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .dark #pain-section > div { background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color: rgba(232,131,90,0.25); } .dark [data-tab-content] .bg-claude-cream\/50, .dark [data-tab-content] .bg-claude-cream\/40 { background-color: rgba(255,255,255,0.05); } .dark [data-tab-content] .bg-white\/70:not([class*="dark:bg-"]) { background-color: rgba(255,255,255,0.06); } .dark [data-tab-content] .border-claude-dark\/8 { border-color: rgba(255,255,255,0.12); } .dark .text-claude-dark\/55:not([class*="dark:text-"]) { color: rgba(243,244,246,0.55); } .dark .text-claude-dark\/45:not([class*="dark:text-"]) { color: rgba(243,244,246,0.45); } .dark .vs-badge.them { background: rgba(239,68,68,0.16); color: #fca5a5; } .dark .vs-badge.us { background: rgba(34,197,94,0.16); color: #86efac; } .dark .promo-banner { background: linear-gradient(130deg, rgba(232,131,90,0.14) 0%, rgba(232,131,90,0.06) 100%); border-color: rgba(232,131,90,0.3); } .dark .promo-countdown .label { color: rgba(243,244,246,0.5); } /* ===== Ultra (Enterprise) — animated iridescent border + dark gold glass ===== */ .ultra-card { position: relative; border-radius: 1.5rem; padding: 1.5px; background: linear-gradient(120deg, #F2C98C, #D97757, #9A6CF0, #5EC9D8, #F2C98C); background-size: 320% 320%; animation: ultraSheen 9s ease infinite; box-shadow: 0 18px 52px -16px rgba(154,108,240,0.35), 0 10px 36px -14px rgba(217,119,87,0.35); } @keyframes ultraSheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ultra-inner { border-radius: calc(1.5rem - 1.5px); position: relative; overflow: hidden; height: 100%; background: linear-gradient(165deg, #201d18 0%, #2a241b 55%, #1d1a15 100%); } .ultra-inner::before { content: ''; position: absolute; top: -50%; right: -25%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(242,201,140,0.22), transparent 65%); pointer-events: none; } .ultra-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.06) 48%, transparent 60%); background-size: 220% 100%; animation: ultraGlint 6s ease-in-out infinite; pointer-events: none; } @keyframes ultraGlint { 0%, 60%, 100% { background-position: 130% 0; } 25% { background-position: -30% 0; } } .ultra-gold-text { background: linear-gradient(100deg, #F6E3BF, #F2C98C 45%, #E8A56B); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== Ultra hover spectacle — 3D tilt · prismatic halo · cursor spotlight · gold sparks ===== */ .ultra-card { transform-style: preserve-3d; will-change: transform; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; } .ultra-card.ux-live { animation-duration: 6s; box-shadow: 0 22px 52px -26px rgba(154,108,240,0.38), 0 14px 36px -24px rgba(217,119,87,0.35), 0 0 0 1px rgba(242,201,140,0.2); } .ultra-inner > * { position: relative; z-index: 2; } /* Outer prismatic halo — soft scattered bloom following the card's rounded-rect shape */ .ultra-aura { content: ''; position: absolute; inset: -14px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; border-radius: 1.9rem; filter: blur(34px); mix-blend-mode: screen; background: linear-gradient(125deg, rgba(242,201,140,0.55) 0%, rgba(217,119,87,0.45) 28%, rgba(154,108,240,0.5) 58%, rgba(94,201,216,0.45) 82%, rgba(242,201,140,0.5) 100%); background-size: 200% 200%; animation: ultraBloom 9s ease-in-out infinite; } .ultra-card.ux-live .ultra-aura { opacity: .42; } @keyframes ultraBloom { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Cursor-tracking spotlight, clipped inside the glass */ .ultra-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen; background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(246,227,191,0.2), rgba(242,201,140,0.08) 42%, transparent 72%); } .ultra-card.ux-live .ultra-spot { opacity: 1; } .ultra-card.ux-live .ultra-inner::after { animation-duration: 6s; } /* Gold spark particles trailing the cursor */ .ultra-spark { position: absolute; z-index: 3; width: 6px; height: 6px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #F6E3BF 45%, rgba(242,201,140,0) 72%); box-shadow: 0 0 9px 2px rgba(246,227,191,0.85); animation: ultraSparkle .95s ease-out forwards; } @keyframes ultraSparkle { 0% { transform: translate(0,0) scale(0); opacity: 0; } 18% { opacity: 1; transform: translate(calc(var(--dx)*.2), calc(var(--dy)*.2)) scale(1.25); } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } /* ===== Full Ultra spectacle on the standard cards (Pro / Max) ===== Mechanics are IDENTICAL across all cards (same 3D float, tilt, sparks, spotlight). Only the outer GLOW's color richness + brightness escalates Pro→Max→Ultra. (fx-p2 is retained but currently unused: the 3-tier grid uses fx-p1=Pro, fx-p3=Max.) NOTE: standard cards are TRANSLUCENT glass (no opaque inner like Ultra), so a gradient halo element would bleed THROUGH the glass and blotch the card body. The glow is therefore a layered box-shadow — a clean, scattered outer halo that follows the rounded shape and never touches the interior. (Ultra keeps its gradient bloom: its dark inner hides the bleed.) */ .fx-stage { position: relative; display: flex; min-width: 0; perspective: 1000px; border-radius: 1.5rem; background: rgba(0,0,0,0.001); } .fx-stage.ux-live-stage { z-index: 5; } .fx-stage > .fx-card { width: 100%; height: 100%; } .fx-card { isolation: isolate; transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out, box-shadow .25s ease-out; } .fx-card:not(.ultra-card)::before { content: ''; position: absolute; inset: 1px; z-index: 1; pointer-events: none; border-radius: calc(1.5rem - 1px); opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.45), rgba(255,255,255,.08) 42%, transparent 70%); } .fx-card:not(.ultra-card).ux-live::before { opacity: 1; } .fx-card:not(.ultra-card) > :not(.lq-badge) { position: relative; z-index: 2; } .fx-card:not(.ultra-card) > .lq-badge { z-index: 3; transform: translateX(-50%); } /* hovered card floats above its neighbours so the glow isn't covered by the next panel */ .fx-card.ux-live { position: relative; z-index: 5; } /* Uniform floating elevation (same lift on every card) + per-tier colored glow (the progression). POSITIVE spread so the colored halo blooms boldly outward (negative spread read as invisible). 3-class selector guarantees this wins over .lq:hover / .feature-card:hover. Layer order per rule: [grounding lift] [white rim] [colored scatter glows…] */ .fx-card.fx-p1.ux-live { box-shadow: 0 20px 42px -28px rgba(26,25,21,0.32), 0 0 0 1px rgba(255,255,255,0.45), 0 0 24px 0 rgba(217,119,87,0.28); } .fx-card.fx-p2.ux-live { box-shadow: 0 32px 64px -28px rgba(26,25,21,0.4), 0 0 0 1px rgba(255,255,255,0.55), 0 0 36px 2px rgba(242,201,140,0.6), 0 0 56px 6px rgba(217,119,87,0.5), 0 0 88px 10px rgba(242,201,140,0.4); } /* (unused) — +gold, brighter */ .fx-card.fx-p3.ux-live { box-shadow: 0 20px 44px -28px rgba(26,25,21,0.34), 0 0 0 1px rgba(255,255,255,0.5), 0 0 26px 0 rgba(154,108,240,0.25), 0 0 34px 1px rgba(217,119,87,0.2); } @media (prefers-reduced-motion: reduce) { .ultra-card.ux-live, .fx-card.ux-live { transform: translateY(-4px) !important; } .ultra-aura, .ultra-spark { animation: none !important; } } [data-tab-content].hidden { display: none; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .anim-slide { animation: slideUp .35s ease-out both; } .stat-num { font-variant-numeric: tabular-nums; } /* ===== 订阅可用模型芯片 ===== */ .model-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.65); border: 1px solid rgba(61,61,58,0.1); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: rgba(61,61,58,0.85); white-space: nowrap; } .dark .model-chip { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #d1d5db; } .model-chip .chip-tag { font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 999px; background: #D97757; color: #fff; }