{"html":"

\n\n \n\n

\n \n \n

\n \n \n \n

\n Collaboration\n Treated as partnership\n

\n \n \n \n \n

\n \n\n \n \n

\n \n \n \n \n

\n Paid Plan\n Budget based, average $600\n

\n \n \n \n \n

\n \n\n \n \n

\n \n \n \n

\n Unpaid Plan\n Based on mutual benefits\n

\n \n \n \n \n

\n \n

\n\n \n\n","css":".offer-card {\n --bg-color: #0b0c10;\n --bg-color-light: #12141a;\n --bg-hover: #1a1c23;\n --border-color: rgba(255, 255, 255, 0.05);\n --border-hover: rgba(255, 255, 255, 0.1);\n --text-primary: #ffffff;\n --text-secondary: #9496a8;\n --accent-primary: #8b5cf6;\n --accent-primary-rgb: 139, 92, 246;\n --accent-bg: #1f143d;\n\n width: 100%;\n max-width: 240px;\n background: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 18px;\n padding: 1.25em;\n font-size: 10px;\n font-family: \"Inter\", \"Segoe UI\", Roboto, sans-serif;\n color: var(--text-primary);\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);\n position: relative;\n overflow: hidden;\n box-sizing: border-sizing;\n}\n\n.offer-card * {\n box-sizing: border-box;\n}\n\n/* Left glow effect */\n.offer-card::before {\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: -40px;\n width: 60px;\n height: 50%;\n background: var(--accent-primary);\n filter: blur(60px);\n z-index: 0;\n opacity: 0.12;\n pointer-events: none;\n}\n\n.offer-card > * {\n position: relative;\n z-index: 1;\n}\n\n/* Progress Bar */\n.offer-card__progress {\n display: flex;\n justify-content: center;\n gap: 0.4em;\n margin-bottom: 2em;\n}\n\n.offer-card__progress-step {\n width: 2.2em;\n height: 0.25em;\n background: rgba(255, 255, 255, 0.12);\n border-radius: 1em;\n transition: all 0.3s ease;\n}\n\n.offer-card__progress-step--active {\n background: var(--accent-primary);\n box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.5);\n}\n\n/* Header */\n.offer-card__header {\n text-align: center;\n margin-bottom: 2.5em;\n}\n\n.offer-card__icon-container {\n display: flex;\n justify-content: center;\n margin-bottom: 1em;\n}\n\n.offer-card__title {\n margin: 0 0 0.3em 0;\n font-size: 1.35em;\n font-weight: 600;\n}\n\n.offer-card__subtitle {\n margin: 0;\n font-size: 0.9em;\n color: var(--text-secondary);\n line-height: 1.4;\n padding: 0 0.5em;\n}\n\n/* Options */\n.offer-card__options {\n display: flex;\n flex-direction: column;\n gap: 0.8em;\n margin-bottom: 2.5em;\n}\n\n.offer-card__option {\n cursor: pointer;\n display: block;\n user-select: none;\n position: relative;\n}\n\n.offer-card__option-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.offer-card__option-content {\n display: flex;\n align-items: center;\n padding: 0.8em 1.2em;\n background: var(--bg-color-light);\n border: 1px solid var(--border-color);\n border-radius: 20px;\n transition: all 0.25s ease;\n}\n\n.offer-card__option-input:hover + .offer-card__option-content {\n background: var(--bg-hover);\n border-color: var(--border-hover);\n}\n\n.offer-card__option-input:focus-visible + .offer-card__option-content {\n box-shadow: 0 0 0 2px var(--accent-primary);\n}\n\n.offer-card__option-input:active + .offer-card__option-content {\n transform: scale(0.98);\n}\n\n.offer-card__option-input:checked + .offer-card__option-content {\n border-color: rgba(var(--accent-primary-rgb), 0.4);\n background: rgba(var(--accent-primary-rgb), 0.1);\n}\n\n/* Icon Wrapper inside option */\n.offer-card__option-icon-wrapper {\n width: 2.8em;\n height: 2.8em;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--accent-bg);\n color: var(--accent-primary);\n margin-right: 1.2em;\n flex-shrink: 0;\n transition: all 0.3s ease;\n}\n\n.offer-card__option-icon-wrapper svg {\n width: 1.3em;\n height: 1.3em;\n}\n\n.offer-card__option-text {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25em;\n}\n\n.offer-card__option-title {\n font-weight: 500;\n font-size: 1em;\n}\n\n.offer-card__option-desc {\n font-size: 0.8em;\n color: var(--text-secondary);\n}\n\n/* Right arrow inside option */\n.offer-card__option-arrow {\n width: 2.2em;\n height: 2.2em;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.04);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-secondary);\n transition: all 0.3s ease;\n flex-shrink: 0;\n}\n\n.offer-card__option-arrow svg {\n width: 1em;\n height: 1em;\n}\n\n.offer-card__option-input:checked\n + .offer-card__option-content\n .offer-card__option-arrow {\n background: rgba(255, 255, 255, 0.08);\n color: var(--text-primary);\n}\n\n.offer-card__option-input:hover\n + .offer-card__option-content\n .offer-card__option-arrow {\n background: rgba(255, 255, 255, 0.08);\n color: var(--text-primary);\n}\n\n/* Footer */\n.offer-card__footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.offer-card__btn {\n background: transparent;\n border: 1px solid rgba(255, 255, 255, 0.05);\n color: var(--text-secondary);\n padding: 0.5em 1em 0.5em 0.5em;\n border-radius: 2em;\n font-size: 0.9em;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.6em;\n transition: all 0.3s ease;\n font-family: inherit;\n}\n\n.offer-card__btn--skip {\n padding: 0.5em 0.5em 0.5em 1em;\n}\n\n.offer-card__btn:hover {\n background: rgba(255, 255, 255, 0.05);\n color: var(--text-primary);\n}\n\n.offer-card__btn:focus-visible {\n box-shadow: 0 0 0 2px var(--accent-primary);\n outline: none;\n}\n\n.offer-card__btn:active {\n transform: scale(0.96);\n}\n\n.offer-card__btn-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.08);\n width: 2.2em;\n height: 2.2em;\n border-radius: 10px;\n color: inherit;\n}\n\n.offer-card__btn-icon svg {\n width: 1.1em;\n height: 1.1em;\n}\n\n/* Folder specific */\n.folder-svg {\n width: 72px;\n height: 72px;\n filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.5));\n}\n"}

massive-lion-83

👁 实时预览

📝 源代码