/* * V1 cleanup: shared button foundation * 只抽离不会改变视觉的公共结构/重置，方便后续统一维护按钮。 */ .buy-btn, .ghost-btn, .secondary-btn, .contact-action, .plan-support-btn, .support-hero-btn, #supportBtnPlanSecondary, #supportBtnPlan, button[data-nav="plans"], .redeem-confirm-btn, #panel-subscribe .sub-btn, .tutorial-scope .btn-chip, .tutorial-scope .btn-chip:link, .tutorial-scope .btn-chip:visited, .tutorial-scope .video-switch-btn, .tutorial-scope .video-back-btn { -webkit-appearance: none; appearance: none; background-image: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 0; text-decoration: none; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .buy-btn .ic, .ghost-btn .ic, .secondary-btn .ic, .contact-action .ic, .plan-support-btn .ic, .support-hero-btn .ic, #supportBtnPlanSecondary .ic, #supportBtnPlan .ic, .redeem-confirm-btn .ic, #panel-subscribe .sub-btn .sub-cta-icon, #panel-subscribe .sub-cta-img, #panel-subscribe .sub-btn .ic { flex: 0 0 auto; } .buy-btn .ic + span, .ghost-btn .ic + span, .secondary-btn .ic + span, .contact-action .ic + span, .plan-support-btn .ic + span, .support-hero-btn .ic + span, #supportBtnPlanSecondary .ic + span, #supportBtnPlan .ic + span, .redeem-confirm-btn .ic + span, #panel-subscribe .sub-btn .sub-cta-icon + .sub-cta-text, #panel-subscribe .sub-btn .ic + .copy-label, #panel-subscribe .sub-btn .ic + .support-label { margin-left: 10px; } @supports (gap: 10px) { .buy-btn, .ghost-btn, .secondary-btn, .contact-action, .plan-support-btn, .support-hero-btn, #supportBtnPlanSecondary, #supportBtnPlan, button[data-nav="plans"], .redeem-confirm-btn, #panel-subscribe .sub-btn, .tutorial-scope .btn-chip, .tutorial-scope .video-switch-btn, .tutorial-scope .video-back-btn { gap: 10px; } .buy-btn .ic + span, .ghost-btn .ic + span, .secondary-btn .ic + span, .contact-action .ic + span, .plan-support-btn .ic + span, .support-hero-btn .ic + span, #supportBtnPlanSecondary .ic + span, #supportBtnPlan .ic + span, .redeem-confirm-btn .ic + span, #panel-subscribe .sub-btn .sub-cta-icon + .sub-cta-text, #panel-subscribe .sub-btn .ic + .copy-label, #panel-subscribe .sub-btn .ic + .support-label { margin-left: 0; } } .buy-btn:focus-visible, .ghost-btn:focus-visible, .secondary-btn:focus-visible, .contact-action:focus-visible, .plan-support-btn:focus-visible, .support-hero-btn:focus-visible, #supportBtnPlanSecondary:focus-visible, #supportBtnPlan:focus-visible, button[data-nav="plans"]:focus-visible, .redeem-confirm-btn:focus-visible, #panel-subscribe .sub-btn:focus-visible, .tutorial-scope .btn-chip:focus-visible, .tutorial-scope .video-switch-btn:focus-visible, .tutorial-scope .video-back-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* * V2 cleanup: shared button tone system * 用同一套变量驱动常见按钮颜色状态，保持现有效果不变，后续改色时只改一处。 */ :root { --btn-shadow-blue: 0 10px 22px -18px rgba(37, 99, 235, .14); --btn-shadow-blue-strong: 0 12px 24px -18px rgba(37, 99, 235, .30); --btn-shadow-teal: 0 10px 22px -18px rgba(8, 145, 178, .14); --btn-shadow-teal-strong: 0 12px 24px -18px rgba(8, 145, 178, .30); --btn-shadow-purple: 0 10px 22px -18px rgba(109, 40, 217, .14); --btn-shadow-purple-strong: 0 12px 24px -18px rgba(109, 40, 217, .28); --btn-shadow-orange: 0 10px 22px -18px rgba(249, 115, 22, .14); --btn-shadow-orange-strong: 0 12px 24px -18px rgba(194, 65, 12, .28); --btn-shadow-dark-soft: 0 12px 24px -18px rgba(2, 6, 23, .18); } #panel-home .hero-actions > .buy-btn, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan), #panel-redeem .redeem-confirm-btn, #panel-subscribe .sub-btn-android { --btn-bg: #ecfeff; --btn-border: #67e8f9; --btn-fg: #0f766e; --btn-shadow: var(--btn-shadow-teal); --btn-hover-bg: #dffbff; --btn-hover-border: #22d3ee; --btn-active-bg: #0f766e; --btn-active-border: #0f766e; --btn-active-fg: #ffffff; --btn-active-shadow: var(--btn-shadow-teal-strong); --btn-dark-bg: rgba(15, 118, 110, .16); --btn-dark-border: rgba(45, 212, 191, .30); --btn-dark-fg: #ccfbf1; --btn-dark-shadow: var(--btn-shadow-dark-soft); --btn-dark-active-bg: #0f766e; --btn-dark-active-border: #0f766e; --btn-dark-active-fg: #ffffff; --btn-dark-active-shadow: var(--btn-shadow-teal-strong); } #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"], #panel-contact .contact-actions a[href^="mailto:"], #panel-subscribe .sub-btn-ios { --btn-bg: #eef6ff; --btn-border: #bfdbfe; --btn-fg: #2563eb; --btn-shadow: var(--btn-shadow-blue); --btn-hover-bg: #e5f1ff; --btn-hover-border: #93c5fd; --btn-active-bg: #2563eb; --btn-active-border: #2563eb; --btn-active-fg: #ffffff; --btn-active-shadow: var(--btn-shadow-blue-strong); --btn-dark-bg: rgba(37, 99, 235, .16); --btn-dark-border: rgba(96, 165, 250, .30); --btn-dark-fg: #dbeafe; --btn-dark-shadow: var(--btn-shadow-dark-soft); --btn-dark-active-bg: #2563eb; --btn-dark-active-border: #2563eb; --btn-dark-active-fg: #ffffff; --btn-dark-active-shadow: var(--btn-shadow-blue-strong); } #panel-contact .contact-actions a[href*="qm.qq.com"], #panel-subscribe .sub-btn-copy { --btn-bg: #f3f0ff; --btn-border: #d8b4fe; --btn-fg: #6d28d9; --btn-shadow: var(--btn-shadow-purple); --btn-hover-bg: #ede9fe; --btn-hover-border: #c084fc; --btn-active-bg: #6d28d9; --btn-active-border: #6d28d9; --btn-active-fg: #ffffff; --btn-active-shadow: var(--btn-shadow-purple-strong); --btn-dark-bg: rgba(109, 40, 217, .16); --btn-dark-border: rgba(192, 132, 252, .30); --btn-dark-fg: #f3e8ff; --btn-dark-shadow: var(--btn-shadow-dark-soft); --btn-dark-active-bg: #6d28d9; --btn-dark-active-border: #6d28d9; --btn-dark-active-fg: #ffffff; --btn-dark-active-shadow: var(--btn-shadow-purple-strong); } .support-hero-btn, #supportBtn, #panel-plans .plan-support-btn, #panel-plans #supportBtnPlanSecondary, #panel-plans #supportBtnPlan, html body .contact-action#supportBtn, #panel-subscribe .sub-btn-support { --btn-bg: #fff7ed; --btn-border: #fdba74; --btn-fg: #c2410c; --btn-shadow: var(--btn-shadow-orange); --btn-hover-bg: #fff1e6; --btn-hover-border: #fb923c; --btn-active-bg: #c2410c; --btn-active-border: #c2410c; --btn-active-fg: #ffffff; --btn-active-shadow: var(--btn-shadow-orange-strong); --btn-dark-bg: rgba(194, 65, 12, .16); --btn-dark-border: rgba(251, 146, 60, .30); --btn-dark-fg: #ffedd5; --btn-dark-shadow: var(--btn-shadow-dark-soft); --btn-dark-active-bg: #ea580c; --btn-dark-active-border: #ea580c; --btn-dark-active-fg: #fff7ed; --btn-dark-active-shadow: 0 14px 28px -18px rgba(234, 88, 12, .34); } #panel-home .hero-actions > .buy-btn, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan), #panel-redeem .redeem-confirm-btn, #panel-subscribe .sub-btn-android, #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"], #panel-contact .contact-actions a[href^="mailto:"], #panel-subscribe .sub-btn-ios, #panel-contact .contact-actions a[href*="qm.qq.com"], #panel-subscribe .sub-btn-copy, .support-hero-btn, #supportBtn, #panel-plans .plan-support-btn, #panel-plans #supportBtnPlanSecondary, #panel-plans #supportBtnPlan, html body .contact-action#supportBtn, #panel-subscribe .sub-btn-support { background: var(--btn-bg) !important; border-color: var(--btn-border) !important; color: var(--btn-fg) !important; box-shadow: var(--btn-shadow) !important; } #panel-home .hero-actions > .buy-btn .ic, #panel-home .hero-actions > .buy-btn span, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan) .ic, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan) span, #panel-redeem .redeem-confirm-btn .ic, #panel-redeem .redeem-confirm-btn span, #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"] .ic, #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"] span, #panel-contact .contact-actions a[href^="mailto:"] .ic, #panel-contact .contact-actions a[href^="mailto:"] span, #panel-contact .contact-actions a[href*="qm.qq.com"] .ic, #panel-contact .contact-actions a[href*="qm.qq.com"] span, .support-hero-btn span, #supportBtn span, #panel-plans .plan-support-btn span, #panel-plans #supportBtnPlanSecondary span, #panel-plans #supportBtnPlan span, .support-hero-btn .ic, #supportBtn .ic, #panel-plans .plan-support-btn .ic, #panel-plans #supportBtnPlanSecondary .ic, #panel-plans #supportBtnPlan .ic, #panel-subscribe .sub-btn-ios .sub-cta-text, #panel-subscribe .sub-btn-ios .sub-cta-img, #panel-subscribe .sub-btn-android .sub-cta-text, #panel-subscribe .sub-btn-android .sub-cta-img, #panel-subscribe .sub-btn-copy .copy-label, #panel-subscribe .sub-btn-copy .ic, #panel-subscribe .sub-btn-support .support-label, #panel-subscribe .sub-btn-support .ic { color: currentColor !important; fill: currentColor !important; stroke: currentColor !important; } #panel-home .hero-actions > .buy-btn:hover, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan):hover, #panel-redeem .redeem-confirm-btn:hover, #panel-subscribe .sub-btn-android:hover, #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"]:hover, #panel-contact .contact-actions a[href^="mailto:"]:hover, #panel-subscribe .sub-btn-ios:hover, #panel-contact .contact-actions a[href*="qm.qq.com"]:hover, #panel-subscribe .sub-btn-copy:hover, .support-hero-btn:hover, #supportBtn:hover, #panel-plans .plan-support-btn:hover, #panel-plans #supportBtnPlanSecondary:hover, #panel-plans #supportBtnPlan:hover, #panel-subscribe .sub-btn-support:hover { background: var(--btn-hover-bg) !important; border-color: var(--btn-hover-border) !important; } #panel-home .hero-actions > .buy-btn:active, #panel-home .hero-actions > .buy-btn[aria-pressed="true"], #panel-home .hero-actions > .buy-btn.is-active, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan):active, #panel-plans .buy-row .buy-btn:not(#supportBtnPlan)[aria-pressed="true"], #panel-plans .buy-row .buy-btn:not(#supportBtnPlan).is-active, #panel-redeem .redeem-confirm-btn:active, #panel-redeem .redeem-confirm-btn[aria-pressed="true"], #panel-redeem .redeem-confirm-btn.is-active, #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"]:active, #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"][aria-pressed="true"], #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"].is-active, #panel-contact .contact-actions a[href^="mailto:"]:active, #panel-contact .contact-actions a[href^="mailto:"][aria-pressed="true"], #panel-contact .contact-actions a[href^="mailto:"].is-active, #panel-contact .contact-actions a[href*="qm.qq.com"]:active, #panel-contact .contact-actions a[href*="qm.qq.com"][aria-pressed="true"], #panel-contact .contact-actions a[href*="qm.qq.com"].is-active, .support-hero-btn:active, .support-hero-btn[aria-pressed="true"], .support-hero-btn.is-active, #supportBtn:active, #supportBtn[aria-pressed="true"], #supportBtn.is-active, #panel-plans .plan-support-btn:active, #panel-plans .plan-support-btn[aria-pressed="true"], #panel-plans .plan-support-btn.is-active, #panel-plans #supportBtnPlanSecondary:active, #panel-plans #supportBtnPlanSecondary[aria-pressed="true"], #panel-plans #supportBtnPlanSecondary.is-active, #panel-plans #supportBtnPlan:active, #panel-plans #supportBtnPlan[aria-pressed="true"], #panel-plans #supportBtnPlan.is-active, #panel-subscribe .sub-btn-ios:active, #panel-subscribe .sub-btn-ios[aria-pressed="true"], #panel-subscribe .sub-btn-ios.is-active, #panel-subscribe .sub-btn-ios.active, #panel-subscribe .sub-btn-ios.selected, #panel-subscribe .sub-btn-ios.is-selected, #panel-subscribe .sub-btn-android:active, #panel-subscribe .sub-btn-android[aria-pressed="true"], #panel-subscribe .sub-btn-android.is-active, #panel-subscribe .sub-btn-android.active, #panel-subscribe .sub-btn-android.selected, #panel-subscribe .sub-btn-android.is-selected, #panel-subscribe .sub-btn-copy:active, #panel-subscribe .sub-btn-copy[aria-pressed="true"], #panel-subscribe .sub-btn-copy.is-active, #panel-subscribe .sub-btn-copy.active, #panel-subscribe .sub-btn-copy.selected, #panel-subscribe .sub-btn-copy.is-selected, #panel-subscribe .sub-btn-copy.is-copied, #panel-subscribe .sub-btn-support:active, #panel-subscribe .sub-btn-support[aria-pressed="true"], #panel-subscribe .sub-btn-support.is-active, #panel-subscribe .sub-btn-support.active, #panel-subscribe .sub-btn-support.selected, #panel-subscribe .sub-btn-support.is-selected { background: var(--btn-active-bg) !important; border-color: var(--btn-active-border) !important; color: var(--btn-active-fg) !important; box-shadow: var(--btn-active-shadow) !important; } html[data-theme="dark"] #panel-home .hero-actions > .buy-btn, html[data-theme="dark"] #panel-plans .buy-row .buy-btn:not(#supportBtnPlan), html[data-theme="dark"] #panel-redeem .redeem-confirm-btn, html[data-theme="dark"] #panel-subscribe .sub-btn-android, html[data-theme="dark"] #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"], html[data-theme="dark"] #panel-contact .contact-actions a[href^="mailto:"], html[data-theme="dark"] #panel-subscribe .sub-btn-ios, html[data-theme="dark"] #panel-contact .contact-actions a[href*="qm.qq.com"], html[data-theme="dark"] #panel-subscribe .sub-btn-copy, html[data-theme="dark"] .support-hero-btn, html[data-theme="dark"] #supportBtn, html[data-theme="dark"] #panel-plans .plan-support-btn, html[data-theme="dark"] #panel-plans #supportBtnPlanSecondary, html[data-theme="dark"] #panel-plans #supportBtnPlan, html[data-theme="dark"] html body .contact-action#supportBtn, html[data-theme="dark"] #panel-subscribe .sub-btn-support { background: var(--btn-dark-bg) !important; border-color: var(--btn-dark-border) !important; color: var(--btn-dark-fg) !important; box-shadow: var(--btn-dark-shadow) !important; } html[data-theme="dark"] #panel-home .hero-actions > .buy-btn:active, html[data-theme="dark"] #panel-home .hero-actions > .buy-btn[aria-pressed="true"], html[data-theme="dark"] #panel-home .hero-actions > .buy-btn.is-active, html[data-theme="dark"] #panel-plans .buy-row .buy-btn:not(#supportBtnPlan):active, html[data-theme="dark"] #panel-plans .buy-row .buy-btn:not(#supportBtnPlan)[aria-pressed="true"], html[data-theme="dark"] #panel-plans .buy-row .buy-btn:not(#supportBtnPlan).is-active, html[data-theme="dark"] #panel-redeem .redeem-confirm-btn:active, html[data-theme="dark"] #panel-redeem .redeem-confirm-btn[aria-pressed="true"], html[data-theme="dark"] #panel-redeem .redeem-confirm-btn.is-active, html[data-theme="dark"] #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"]:active, html[data-theme="dark"] #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"][aria-pressed="true"], html[data-theme="dark"] #panel-home .hero-actions > .secondary-btn[data-nav="tutorial"].is-active, html[data-theme="dark"] #panel-contact .contact-actions a[href^="mailto:"]:active, html[data-theme="dark"] #panel-contact .contact-actions a[href^="mailto:"][aria-pressed="true"], html[data-theme="dark"] #panel-contact .contact-actions a[href^="mailto:"].is-active, html[data-theme="dark"] #panel-contact .contact-actions a[href*="qm.qq.com"]:active, html[data-theme="dark"] #panel-contact .contact-actions a[href*="qm.qq.com"][aria-pressed="true"], html[data-theme="dark"] #panel-contact .contact-actions a[href*="qm.qq.com"].is-active, html[data-theme="dark"] .support-hero-btn:active, html[data-theme="dark"] .support-hero-btn[aria-pressed="true"], html[data-theme="dark"] .support-hero-btn.is-active, html[data-theme="dark"] #supportBtn:active, html[data-theme="dark"] #supportBtn[aria-pressed="true"], html[data-theme="dark"] #supportBtn.is-active, html[data-theme="dark"] #panel-plans .plan-support-btn:active, html[data-theme="dark"] #panel-plans .plan-support-btn[aria-pressed="true"], html[data-theme="dark"] #panel-plans .plan-support-btn.is-active, html[data-theme="dark"] #panel-plans #supportBtnPlanSecondary:active, html[data-theme="dark"] #panel-plans #supportBtnPlanSecondary[aria-pressed="true"], html[data-theme="dark"] #panel-plans #supportBtnPlanSecondary.is-active, html[data-theme="dark"] #panel-plans #supportBtnPlan:active, html[data-theme="dark"] #panel-plans #supportBtnPlan[aria-pressed="true"], html[data-theme="dark"] #panel-plans #supportBtnPlan.is-active, html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active, html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"], html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active, html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active, html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected, html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected, html[data-theme="dark"] #panel-subscribe .sub-btn-android:active, html[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"], html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active, html[data-theme="dark"] #panel-subscribe .sub-btn-android.active, html[data-theme="dark"] #panel-subscribe .sub-btn-android.selected, html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-selected, html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active, html[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"], html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active, html[data-theme="dark"] #panel-subscribe .sub-btn-copy.active, html[data-theme="dark"] #panel-subscribe .sub-btn-copy.selected, html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-selected, html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied, html[data-theme="dark"] #panel-subscribe .sub-btn-support:active, html[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"], html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active, html[data-theme="dark"] #panel-subscribe .sub-btn-support.active, html[data-theme="dark"] #panel-subscribe .sub-btn-support.selected, html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-selected { background: var(--btn-dark-active-bg) !important; border-color: var(--btn-dark-active-border) !important; color: var(--btn-dark-active-fg) !important; box-shadow: var(--btn-dark-active-shadow) !important; }