/* ========================================================================================================= SUPPORT PAGE — FIRST SCREEN --------------------------------------------------------------------------------------------------------- Final logic: - The right-side hero image already includes the technology frame / border design. - CSS no longer generates SVG frame, red accent line, or corner technical tags. - Elementor controls the top-right support card and bottom three feature cards. - Replace the old first-screen CSS with this full block. ========================================================================================================= */ /* ========================================================================================================= 第一屏开始 ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 00. PAGE WRAPPER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper { position: relative !important; width: 100% !important; overflow: hidden !important; background: #ffffff !important; color: #121820 !important; } /* --------------------------------------------------------------------------------------------------------- 01. HERO SECTION BASE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-section { position: relative !important; width: 100% !important; overflow: hidden !important; background: radial-gradient(circle at 10% 22%, rgba(220, 26, 26, 0.050) 0%, transparent 30%), radial-gradient(circle at 92% 20%, rgba(25, 52, 78, 0.045) 0%, transparent 34%), linear-gradient(180deg, #ffffff 0%, #fbfbfc 56%, #ffffff 100%) !important; border-bottom: 1px solid rgba(20, 28, 40, 0.08) !important; } /* Subtle technical background pattern */ .support-page-wrapper .support-hero-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(20, 28, 40, 0.030) 1px, transparent 1px), linear-gradient(180deg, rgba(20, 28, 40, 0.026) 1px, transparent 1px) !important; background-size: 56px 56px !important; opacity: 0.24 !important; mask-image: radial-gradient(circle at 72% 42%, black 0%, transparent 58%) !important; -webkit-mask-image: radial-gradient(circle at 72% 42%, black 0%, transparent 58%) !important; pointer-events: none !important; } /* Disable old decorative circle */ .support-page-wrapper .support-hero-section::after { display: none !important; } /* --------------------------------------------------------------------------------------------------------- 02. HERO INNER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-inner { position: relative !important; z-index: 5 !important; width: min(92vw, 1320px) !important; min-height: 650px !important; margin: 0 auto !important; padding: 20px 0 20px 0 !important; display: grid !important; grid-template-columns: minmax(0, 0.37fr) minmax(0, 0.63fr) !important; align-items: center !important; gap: 5px !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 03. HERO CONTENT --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-content { position: relative !important; z-index: 8 !important; width: 100% !important; max-width: 650px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; } /* Breadcrumb */ .support-page-wrapper .support-hero-breadcrumb, .support-page-wrapper .support-hero-breadcrumb p, .support-page-wrapper .support-hero-breadcrumb .elementor-heading-title, .support-page-wrapper .support-hero-breadcrumb .elementor-widget-container { margin: 0 !important; color: rgba(18, 24, 32, 0.52) !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 500 !important; } /* Eyebrow */ .support-page-wrapper .support-hero-eyebrow, .support-page-wrapper .support-hero-eyebrow .elementor-heading-title { margin: 0 !important; color: #d71920 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 1.9px !important; text-transform: uppercase !important; } /* Title */ .support-page-wrapper .support-hero-title, .support-page-wrapper .support-hero-title .elementor-heading-title { max-width: 670px !important; margin: 0 !important; color: #111820 !important; font-size: clamp(54px, 4.25vw, 72px) !important; line-height: 1.02 !important; font-weight: 900 !important; letter-spacing: -2.2px !important; } .support-page-wrapper .support-hero-title br { display: block !important; } /* Description */ .support-page-wrapper .support-hero-description, .support-page-wrapper .support-hero-description p, .support-page-wrapper .support-hero-description .elementor-widget-container { max-width: 560px !important; margin: 0 !important; color: rgba(18, 24, 32, 0.68) !important; font-size: 17px !important; line-height: 1.72 !important; font-weight: 400 !important; } /* --------------------------------------------------------------------------------------------------------- 04. HERO BUTTONS --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-actions { width: 100% !important; } .support-page-wrapper .support-hero-button-group { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; flex-wrap: wrap !important; } /* Main button selector + fallback if the buttons are regular links inside the actions area */ .support-page-wrapper .support-hero-button, .support-page-wrapper .support-hero-actions a { min-width: 172px !important; height: 54px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 24px !important; border-radius: 12px !important; border: 1px solid transparent !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; text-decoration: none !important; box-sizing: border-box !important; transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease !important; } .support-page-wrapper .support-hero-button-icon { width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } .support-page-wrapper .support-hero-button-icon svg { width: 16px !important; height: 16px !important; display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* Primary button */ .support-page-wrapper .support-hero-button-primary, .support-page-wrapper .support-hero-actions a:first-child { color: #ffffff !important; background: linear-gradient(135deg, #e21d23 0%, #d71920 58%, #b91117 100%) !important; border-color: rgba(215, 25, 32, 0.82) !important; box-shadow: 0 16px 34px rgba(215, 25, 32, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .support-page-wrapper .support-hero-button-primary:hover, .support-page-wrapper .support-hero-actions a:first-child:hover { color: #ffffff !important; transform: translateY(-2px) !important; background: linear-gradient(135deg, #f12b31 0%, #e21d23 58%, #c9141b 100%) !important; box-shadow: 0 20px 42px rgba(215, 25, 32, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* Secondary button */ .support-page-wrapper .support-hero-button-secondary, .support-page-wrapper .support-hero-actions a:nth-child(2) { color: #17202a !important; background: rgba(255, 255, 255, 0.76) !important; border-color: rgba(18, 24, 32, 0.22) !important; box-shadow: 0 12px 28px rgba(20, 28, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .support-page-wrapper .support-hero-button-secondary:hover, .support-page-wrapper .support-hero-actions a:nth-child(2):hover { color: #d71920 !important; transform: translateY(-2px) !important; border-color: rgba(215, 25, 32, 0.34) !important; box-shadow: 0 16px 34px rgba(20, 28, 40, 0.10), 0 0 24px rgba(215, 25, 32, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; } /* --------------------------------------------------------------------------------------------------------- 05. TRUST ROW — HORIZONTAL SUPPORT POINTS --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-trust-row { position: relative !important; z-index: 30 !important; width: fit-content !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(3, 165px) !important; column-gap: 70px !important; row-gap: 0 !important; margin: 18px auto 0 !important; overflow: visible !important; } .support-page-wrapper .support-hero-trust-item { position: relative !important; width: 165px !important; min-width: 165px !important; max-width: 165px !important; display: grid !important; grid-template-columns: 24px minmax(0, 1fr) !important; grid-template-areas: "icon title" "icon text" !important; column-gap: 10px !important; row-gap: 3px !important; align-items: start !important; text-align: left !important; padding: 0 !important; box-sizing: border-box !important; } .support-page-wrapper .support-hero-trust-item:not(:last-child)::after { content: "" !important; position: absolute !important; top: 3px !important; right: -35px !important; width: 1px !important; height: 48px !important; background: rgba(20, 28, 40, 0.13) !important; } .support-page-wrapper .support-hero-trust-icon { grid-area: icon !important; width: 24px !important; height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #d71920 !important; } .support-page-wrapper .support-hero-trust-icon .elementor-icon, .support-page-wrapper .support-hero-trust-icon i, .support-page-wrapper .support-hero-trust-icon svg { color: #d71920 !important; fill: #d71920 !important; font-size: 20px !important; } .support-page-wrapper .support-hero-trust-title { grid-area: title !important; text-align: left !important; } .support-page-wrapper .support-hero-trust-title, .support-page-wrapper .support-hero-trust-title .elementor-heading-title { margin: 0 !important; color: #141b24 !important; font-size: 12px !important; line-height: 1.15 !important; font-weight: 800 !important; } .support-page-wrapper .support-hero-trust-text { grid-area: text !important; text-align: left !important; } .support-page-wrapper .support-hero-trust-text, .support-page-wrapper .support-hero-trust-text p { margin: 0 !important; color: rgba(18, 24, 32, 0.56) !important; font-size: 11px !important; line-height: 1.45 !important; font-weight: 500 !important; } /* ========================================================================================================= 06. HERO VISUAL — COMPLETE IMAGE PANEL --------------------------------------------------------------------------------------------------------- Logic: - The right-side image already includes the technical frame. - Keep the full image visible. - Cards are positioned relative to the actual image area. - No full-bleed overflow, no horizontal scrollbar. ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 06.1 VISUAL WRAPPER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-visual { position: relative !important; z-index: 5 !important; width: 100% !important; min-width: 0 !important; margin-right: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; overflow: hidden !important; } /* --------------------------------------------------------------------------------------------------------- 06.2 IMAGE PANEL --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-tech-shape { position: relative !important; z-index: 3 !important; width: 110% !important; max-width: 1040px !important; height: 640px !important; margin-left: -4% !important; margin-right: 0 !important; overflow: visible !important; isolation: isolate !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; } /* Hide old generated decoration */ .support-page-wrapper .support-hero-frame-svg, .support-page-wrapper .support-hero-tech-accent, .support-page-wrapper .support-hero-corner-tags { display: none !important; } /* --------------------------------------------------------------------------------------------------------- 06.3 IMAGE SURFACE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-image-surface { position: absolute !important; inset: 0 !important; z-index: 2 !important; width:100% !important; height: 100% !important; overflow: visible !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; } .support-page-wrapper .support-hero-image-surface::before, .support-page-wrapper .support-hero-image-surface::after { display: none !important; } .support-page-wrapper .support-hero-product-image { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; } .support-page-wrapper .support-hero-product-image .elementor-widget-container { width: 100% !important; height: 100% !important; } .support-page-wrapper .support-hero-product-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; } /* --------------------------------------------------------------------------------------------------------- 06.4 TOP-RIGHT BADGE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-badge { position: absolute !important; top: 8% !important; right: 8% !important; z-index: 20 !important; width: 260px !important; min-height: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; padding: 16px 18px !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.84) !important; border: 1px solid rgba(255, 255, 255, 0.92) !important; box-shadow: 0 18px 38px rgba(20, 28, 40, 0.16), inset 0 1px 0 rgba(255,255,255,0.92) !important; backdrop-filter: blur(16px) saturate(130%) !important; -webkit-backdrop-filter: blur(16px) saturate(130%) !important; box-sizing: border-box !important; } .support-page-wrapper .support-hero-badge > * { min-width: 0 !important; } .support-page-wrapper .support-hero-badge-icon { width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(215, 25, 32, 0.10) !important; color: #d71920 !important; } .support-page-wrapper .support-hero-badge-icon .elementor-icon, .support-page-wrapper .support-hero-badge-icon i, .support-page-wrapper .support-hero-badge-icon svg { color: #d71920 !important; fill: #d71920 !important; font-size: 22px !important; } .support-page-wrapper .support-hero-badge-copy { min-width: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } .support-page-wrapper .support-hero-badge-title, .support-page-wrapper .support-hero-badge-title .elementor-heading-title { margin: 0 0 5px 0 !important; color: #121820 !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 850 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } .support-page-wrapper .support-hero-badge-text, .support-page-wrapper .support-hero-badge-text p { margin: 0 !important; color: rgba(18, 24, 32, 0.60) !important; font-size: 11.5px !important; line-height: 1.35 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 06.5 BOTTOM FEATURE CARDS --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-feature-row { position: absolute !important; left: auto !important; right: 10.5% !important; bottom: 10.5% !important; z-index: 18 !important; width: auto !important; max-width: none !important; display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 12px !important; overflow: visible !important; box-sizing: border-box !important; } .support-page-wrapper .support-hero-feature-card, .support-page-wrapper .support-hero-feature-card-01, .support-page-wrapper .support-hero-feature-card-02, .support-page-wrapper .support-hero-feature-card-03, .support-page-wrapper .support-hero-feature-row > .e-con, .support-page-wrapper .support-hero-feature-row > .elementor-element { width: 180px !important; min-width: 180px !important; max-width: 180px !important; min-height: 75px !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 5px 5px !important; border-radius: 12px !important; background: rgba(18, 20, 24, 0.50) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; box-sizing: border-box !important; } .support-page-wrapper .support-hero-feature-copy { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } .support-page-wrapper .support-hero-feature-copy, .support-page-wrapper .support-hero-feature-copy > *, .support-page-wrapper .support-hero-feature-copy .elementor-widget-container { max-width: none !important; } .support-page-wrapper .support-hero-feature-icon { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.88) !important; } .support-page-wrapper .support-hero-feature-icon .elementor-icon, .support-page-wrapper .support-hero-feature-icon i, .support-page-wrapper .support-hero-feature-icon svg { font-size: 13px !important; color: rgba(255, 255, 255, 0.88) !important; fill: rgba(255, 255, 255, 0.88) !important; } .support-page-wrapper .support-hero-feature-copy { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .support-page-wrapper .support-hero-feature-copy, .support-page-wrapper .support-hero-feature-copy > *, .support-page-wrapper .support-hero-feature-copy .elementor-widget-container { max-width: none !important; } .support-page-wrapper .support-hero-feature-title, .support-page-wrapper .support-hero-feature-title .elementor-heading-title { margin: 0 0 4px 0 !important; color: #ffffff !important; font-size: 11.5px !important; line-height: 1.16 !important; font-weight: 850 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } .support-page-wrapper .support-hero-feature-text, .support-page-wrapper .support-hero-feature-text p { margin: 0 !important; color: rgba(255, 255, 255, 0.76) !important; font-size: 10px !important; line-height: 1.32 !important; font-weight: 500 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* --------------------------------------------------------------------------------------------------------- 07. RESPONSIVE — TABLET --------------------------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { .support-page-wrapper .support-hero-inner { grid-template-columns: 1fr !important; width: min(92vw, 980px) !important; min-height: auto !important; gap: 46px !important; padding: 68px 0 66px 0 !important; } .support-page-wrapper .support-hero-content { align-items: center !important; text-align: center !important; margin: 0 auto !important; } .support-page-wrapper .support-hero-description, .support-page-wrapper .support-hero-description p { margin: 0 auto !important; } .support-page-wrapper .support-hero-button-group { justify-content: center !important; } .support-page-wrapper .support-hero-trust-row { margin-left: auto !important; margin-right: auto !important; } .support-page-wrapper .support-hero-visual { width: 100% !important; min-height: 560px !important; margin-right: 0 !important; } .support-page-wrapper .support-hero-tech-shape { width: 100% !important; max-width: 860px !important; height: 560px !important; margin: 0 auto !important; } .support-page-wrapper .support-hero-feature-row { left: 150px !important; right: 56px !important; bottom: 44px !important; } } /* --------------------------------------------------------------------------------------------------------- 08. RESPONSIVE — MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .support-page-wrapper .support-hero-inner { width: 100% !important; padding: 44px 18px 48px 18px !important; gap: 34px !important; } .support-page-wrapper .support-hero-eyebrow, .support-page-wrapper .support-hero-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 1.4px !important; } .support-page-wrapper .support-hero-title, .support-page-wrapper .support-hero-title .elementor-heading-title { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -1.1px !important; } .support-page-wrapper .support-hero-description, .support-page-wrapper .support-hero-description p { max-width: 94% !important; font-size: 15px !important; line-height: 1.62 !important; } .support-page-wrapper .support-hero-button-group { width: 100% !important; flex-direction: column !important; gap: 12px !important; } .support-page-wrapper .support-hero-button, .support-page-wrapper .support-hero-actions a { width: 100% !important; max-width: 320px !important; height: 52px !important; } .support-page-wrapper .support-hero-trust-row { grid-template-columns: 1fr !important; max-width: 340px !important; gap: 14px !important; } .support-page-wrapper .support-hero-trust-item { padding: 14px 16px !important; border: 1px solid rgba(20, 28, 40, 0.08) !important; border-radius: 14px !important; background: rgba(255,255,255,0.78) !important; box-shadow: 0 10px 24px rgba(20, 28, 40, 0.06) !important; } .support-page-wrapper .support-hero-trust-item::after { display: none !important; } .support-page-wrapper .support-hero-visual { width: 100% !important; min-height: 520px !important; margin-right: 0 !important; } .support-page-wrapper .support-hero-tech-shape { width: 100% !important; height: 520px !important; } .support-page-wrapper .support-hero-badge { top: 22px !important; left: 22px !important; right: 22px !important; width: auto !important; } .support-page-wrapper .support-hero-feature-row { left: 22px !important; right: 22px !important; bottom: 34px !important; grid-template-columns: 1fr !important; gap: 10px !important; } .support-page-wrapper .support-hero-product-image img { object-fit: cover !important; object-position: center center !important; } .support-page-wrapper .support-hero-feature-card, .support-page-wrapper .support-hero-feature-card-01, .support-page-wrapper .support-hero-feature-card-02, .support-page-wrapper .support-hero-feature-card-03, .support-page-wrapper .support-hero-feature-row > .e-con, .support-page-wrapper .support-hero-feature-row > .elementor-element { min-height: auto !important; padding: 13px 14px !important; } } /* ========================================================================================================= 第一屏结束 ========================================================================================================= */ /* ========================================================================================================= 第二屏开始 ========================================================================================================= */ /* ========================================================================================================= SECOND SCREEN — SUPPORT SERVICES TABS --------------------------------------------------------------------------------------------------------- Purpose: - Builds the second support page section. - Left side: support service navigation. - Right side: switchable support content panel. - JavaScript toggles .is-active on tabs and panes. --------------------------------------------------------------------------------------------------------- Elementor structure: .support-services-section .support-services-inner .support-services-header .support-services-body .support-services-tabs .support-service-tab.support-service-tab-technical ... .support-services-panel .support-service-pane.support-service-pane-technical ... ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 01. SECTION BASE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-services-section { position: relative !important; width: 100% !important; padding: 20px 0 20px 0 !important; overflow: hidden !important; background: radial-gradient(circle at 8% 18%, rgba(215, 25, 32, 0.040) 0%, transparent 34%), radial-gradient(circle at 90% 50%, rgba(25, 52, 78, 0.035) 0%, transparent 38%), linear-gradient(180deg, #ffffff 0%, #fbfbfc 52%, #ffffff 100%) !important; border-bottom: 1px solid rgba(20, 28, 40, 0.07) !important; } .support-page-wrapper .support-services-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(20, 28, 40, 0.024) 1px, transparent 1px), linear-gradient(180deg, rgba(20, 28, 40, 0.020) 1px, transparent 1px) !important; background-size: 56px 56px !important; opacity: 0.20 !important; mask-image: radial-gradient(circle at 72% 52%, black 0%, transparent 58%) !important; -webkit-mask-image: radial-gradient(circle at 72% 52%, black 0%, transparent 58%) !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 02. INNER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-services-inner { position: relative !important; z-index: 5 !important; width: min(92vw, 1320px) !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 03. HEADER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-services-header { width: 100% !important; margin-bottom: 30px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .support-page-wrapper .support-services-eyebrow, .support-page-wrapper .support-services-eyebrow .elementor-heading-title { margin: 0 !important; color: #d71920 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 1.7px !important; text-transform: uppercase !important; } .support-page-wrapper .support-services-title, .support-page-wrapper .support-services-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: clamp(34px, 2.7vw, 46px) !important; line-height: 1.1 !important; font-weight: 850 !important; letter-spacing: -1.2px !important; } /* --------------------------------------------------------------------------------------------------------- 04. BODY LAYOUT --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-services-body { width: 100% !important; display: grid !important; grid-template-columns: 360px minmax(0, 1fr) !important; gap: 18px !important; align-items: stretch !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 05. LEFT TABS --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-services-tabs { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: 0 18px 42px rgba(20, 28, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(12px) saturate(125%) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; } .support-page-wrapper .support-service-tab { position: relative !important; width: 100% !important; min-height: 74px !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 18px !important; align-items: center !important; column-gap: 14px !important; padding: 0 24px 0 24px !important; color: rgba(18, 24, 32, 0.76) !important; cursor: pointer !important; background: rgba(255, 255, 255, 0.48) !important; border-bottom: 1px solid rgba(20, 28, 40, 0.08) !important; box-sizing: border-box !important; transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important; } .support-page-wrapper .support-service-tab:last-child { border-bottom: none !important; } /* Active red vertical indicator */ .support-page-wrapper .support-service-tab::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; background: transparent !important; transition: background 0.22s ease !important; } .support-page-wrapper .support-service-tab:hover { color: #d71920 !important; background: rgba(255, 255, 255, 0.82) !important; } .support-page-wrapper .support-service-tab.is-active { color: #d71920 !important; background: linear-gradient(90deg, rgba(215, 25, 32, 0.070) 0%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.78) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 8px 22px rgba(215, 25, 32, 0.06) !important; } .support-page-wrapper .support-service-tab.is-active::before { background: #d71920 !important; } .support-page-wrapper .support-service-tab-icon { width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: currentColor !important; } .support-page-wrapper .support-service-tab-icon .elementor-icon, .support-page-wrapper .support-service-tab-icon i, .support-page-wrapper .support-service-tab-icon svg { color: currentColor !important; fill: currentColor !important; font-size: 22px !important; } .support-page-wrapper .support-service-tab-title, .support-page-wrapper .support-service-tab-title .elementor-heading-title { margin: 0 !important; color: currentColor !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 850 !important; letter-spacing: -0.2px !important; } .support-page-wrapper .support-service-tab-arrow { width: 18px !important; height: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: currentColor !important; opacity: 0.82 !important; transition: transform 0.22s ease, opacity 0.22s ease !important; } .support-page-wrapper .support-service-tab-arrow .elementor-icon, .support-page-wrapper .support-service-tab-arrow i, .support-page-wrapper .support-service-tab-arrow svg { color: currentColor !important; fill: currentColor !important; font-size: 15px !important; } .support-page-wrapper .support-service-tab.is-active .support-service-tab-arrow, .support-page-wrapper .support-service-tab:hover .support-service-tab-arrow { transform: translateX(3px) !important; opacity: 1 !important; } /* --------------------------------------------------------------------------------------------------------- 06. RIGHT PANEL — FIXED HEIGHT PANEL --------------------------------------------------------------------------------------------------------- Purpose: - Keep the right content card at a stable height when switching tabs. - Prevent different title/list lengths from changing the section height. - The left tab list and right panel should visually share the same height. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-services-panel { position: relative !important; width: 100% !important; /* Fixed desktop height: adjust this one value if the whole card needs to be taller or shorter */ height: 470px !important; min-height: 470px !important; max-height: 470px !important; overflow: hidden !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: 0 18px 42px rgba(20, 28, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(12px) saturate(125%) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; box-sizing: border-box !important; } /* Keep the left menu visually aligned with the fixed right panel */ .support-page-wrapper .support-services-tabs { height: 470px !important; min-height: 470px !important; max-height: 470px !important; } /* Decorative grid inside the right panel */ .support-page-wrapper .support-services-panel::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(20, 28, 40, 0.025) 1px, transparent 1px), linear-gradient(180deg, rgba(20, 28, 40, 0.022) 1px, transparent 1px) !important; background-size: 34px 34px !important; opacity: 0.34 !important; mask-image: radial-gradient(circle at 76% 50%, black 0%, transparent 52%) !important; -webkit-mask-image: radial-gradient(circle at 76% 50%, black 0%, transparent 52%) !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 07. SWITCHABLE PANES — STABLE INTERNAL LAYOUT --------------------------------------------------------------------------------------------------------- Purpose: - Every pane uses the same height and same internal slots. - Title area reserves enough height for two lines. - One-line titles stay at the top instead of vertically centering. - Button position remains stable across different panes. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-service-pane { position: relative !important; z-index: 5 !important; /* Inherit the fixed height from .support-services-panel */ width: 100% !important; height: 100% !important; min-height: 0 !important; display: none !important; grid-template-columns: 430px minmax(0, 1fr) !important; align-items: stretch !important; column-gap: 58px !important; /* Controls the inner spacing of each right-side service pane. Format: top right bottom left. Increase the last value to move all right-panel content away from the left border. */ padding: 20px 20px 20px 40px !important; box-sizing: border-box !important; } .support-page-wrapper .support-service-pane.is-active { display: grid !important; } /* Left text column inside each pane */ .support-page-wrapper .support-service-pane-copy { position: relative !important; z-index: 8 !important; grid-column: 1 !important; width: 430px !important; max-width: 430px !important; height: 100% !important; justify-self: start !important; align-self: start !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Reserved title area: - Keeps all panes aligned even when titles wrap differently. - One-line titles stay at the top. */ .support-page-wrapper .support-service-pane-title, .support-page-wrapper .support-service-pane-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: clamp(30px, 2.1vw, 36px) !important; line-height: 1.14 !important; font-weight: 850 !important; letter-spacing: -0.9px !important; } .support-page-wrapper .support-service-pane-title { min-height: 86px !important; display: flex !important; align-items: flex-start !important; } /* Reserved description area: - Prevents different description wrapping from moving the list/button. */ .support-page-wrapper .support-service-pane-description, .support-page-wrapper .support-service-pane-description p { margin: 0 !important; color: rgba(18, 24, 32, 0.64) !important; font-size: 15.5px !important; line-height: 1.68 !important; font-weight: 500 !important; } .support-page-wrapper .support-service-pane-description { min-height: 76px !important; display: flex !important; align-items: flex-start !important; } /* Reserved list area: - Keeps button position stable even if list items wrap differently. */ .support-page-wrapper .support-service-pane-list { width: 100% !important; min-height: 154px !important; margin-top: 2px !important; } /* Reset direct Elementor spacing on every pane. This prevents one pane from having different Elementor padding/margin. */ .support-page-wrapper .support-service-pane, .support-page-wrapper .support-service-pane > .e-con-inner, .support-page-wrapper .support-service-pane > .elementor-container, .support-page-wrapper .support-service-pane > .elementor-widget-wrap { margin: 0 !important; box-sizing: border-box !important; } /* Reset spacing inside the copy column. Do not allow individual panes to keep Elementor custom left/right margins. */ .support-page-wrapper .support-service-pane-copy > .elementor-element, .support-page-wrapper .support-service-pane-copy > .e-con, .support-page-wrapper .support-service-pane-copy .elementor-widget-container { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 08. PANE ICON LIST --------------------------------------------------------------------------------------------------------- Purpose: - Standardizes list item spacing. - Keeps check icons and text aligned across all panes. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-service-pane-list .elementor-icon-list-items { display: flex !important; flex-direction: column !important; gap: 13px !important; margin: 0 !important; padding: 0 !important; padding-left: 5px; } .support-page-wrapper .support-service-pane-list .elementor-icon-list-item { display: flex !important; align-items: flex-start !important; gap: 11px !important; margin: 0 !important; } .support-page-wrapper .support-service-pane-list .elementor-icon-list-icon { width: 18px !important; height: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 18px !important; color: #d71920 !important; margin-top: 2px !important; } .support-page-wrapper .support-service-pane-list .elementor-icon-list-icon i, .support-page-wrapper .support-service-pane-list .elementor-icon-list-icon svg { color: #d71920 !important; fill: #d71920 !important; font-size: 15px !important; } .support-page-wrapper .support-service-pane-list .elementor-icon-list-text { color: rgba(18, 24, 32, 0.68) !important; font-size: 14.5px !important; line-height: 1.48 !important; font-weight: 600 !important; } /* --------------------------------------------------------------------------------------------------------- 09. PANE LINK / BUTTON — RED TEXT LINK WITH CSS ARROW --------------------------------------------------------------------------------------------------------- Purpose: - Force all service pane buttons to use the same visual width. - Override Elementor default blue button background. - Works whether the class is added to: 1. Button widget wrapper 2. Elementor button link itself 3. Inner Elementor button element --------------------------------------------------------------------------------------------------------- */ /* Button widget root / local class target */ .support-page-wrapper .support-service-pane-link { width: auto !important; max-width: none !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; margin-top: 6px !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; box-sizing: border-box !important; } /* Real Elementor button link */ .support-page-wrapper .support-service-pane-link .elementor-button, .support-page-wrapper .support-service-pane-link .elementor-button-link, .support-page-wrapper a.support-service-pane-link, .support-page-wrapper .elementor-button.support-service-pane-link, .support-page-wrapper .elementor-button-link.support-service-pane-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; color: #d71920 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 850 !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; box-sizing: border-box !important; transition: color 0.22s ease, transform 0.22s ease !important; } /* Elementor internal wrapper */ .support-page-wrapper .support-service-pane-link .elementor-button-content-wrapper, .support-page-wrapper .elementor-button.support-service-pane-link .elementor-button-content-wrapper, .support-page-wrapper .elementor-button-link.support-service-pane-link .elementor-button-content-wrapper { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; } /* Button text */ .support-page-wrapper .support-service-pane-link .elementor-button-text, .support-page-wrapper .elementor-button.support-service-pane-link .elementor-button-text, .support-page-wrapper .elementor-button-link.support-service-pane-link .elementor-button-text { position: relative !important; display: inline-flex !important; align-items: center !important; color: currentColor !important; white-space: nowrap !important; } /* CSS arrow fallback. This targets both possible Elementor structures: 1. class on the Button widget wrapper 2. class on the actual button/link element 3. class on Elementor's inner button element */ /* Case 1: class is on widget wrapper, arrow added to real Elementor button */ .support-page-wrapper .support-service-pane-link .elementor-button::after, .support-page-wrapper .support-service-pane-link .elementor-button-link::after, .support-page-wrapper .support-service-pane-link a::after, /* Case 2: class is on the actual button/link */ .support-page-wrapper a.support-service-pane-link::after, .support-page-wrapper button.support-service-pane-link::after, .support-page-wrapper .elementor-button.support-service-pane-link::after, .support-page-wrapper .elementor-button-link.support-service-pane-link::after { content: "→" !important; display: inline-block !important; margin-left: 12px !important; color: currentColor !important; font-size: 18px !important; line-height: 1 !important; font-weight: 850 !important; transform: translateY(-1px) !important; transition: transform 0.22s ease !important; } /* Hover state */ .support-page-wrapper .support-service-pane-link:hover, .support-page-wrapper .support-service-pane-link:hover .elementor-button, .support-page-wrapper .support-service-pane-link .elementor-button:hover, .support-page-wrapper a.support-service-pane-link:hover, .support-page-wrapper .elementor-button.support-service-pane-link:hover, .support-page-wrapper .elementor-button-link.support-service-pane-link:hover { color: #b91117 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Arrow hover movement */ .support-page-wrapper .support-service-pane-link:hover .elementor-button::after, .support-page-wrapper .support-service-pane-link:hover .elementor-button-link::after, .support-page-wrapper .support-service-pane-link:hover a::after, .support-page-wrapper a.support-service-pane-link:hover::after, .support-page-wrapper button.support-service-pane-link:hover::after, .support-page-wrapper .elementor-button.support-service-pane-link:hover::after, .support-page-wrapper .elementor-button-link.support-service-pane-link:hover::after { transform: translate(3px, -1px) !important; } /* --------------------------------------------------------------------------------------------------------- 09.X FORCE DEFAULT RED STATE --------------------------------------------------------------------------------------------------------- Purpose: - Ensures the service pane CTA is red by default, matching the reference design. - Keeps hover state as a darker red. - Covers Elementor Button structures where the class may be applied to the widget, the actual link, or the inner button element. --------------------------------------------------------------------------------------------------------- */ /* Default state: red */ .support-page-wrapper .support-service-pane-link, .support-page-wrapper .support-service-pane-link .elementor-button, .support-page-wrapper .support-service-pane-link .elementor-button-link, .support-page-wrapper .support-service-pane-link a, .support-page-wrapper .support-service-pane-link .elementor-button-text, .support-page-wrapper a.support-service-pane-link, .support-page-wrapper .elementor-button.support-service-pane-link, .support-page-wrapper .elementor-button-link.support-service-pane-link, .support-page-wrapper .elementor-button.support-service-pane-link .elementor-button-text, .support-page-wrapper .elementor-button-link.support-service-pane-link .elementor-button-text { color: #d71920 !important; } /* Keep arrow same color as text */ .support-page-wrapper .support-service-pane-link .elementor-button::after, .support-page-wrapper .support-service-pane-link .elementor-button-link::after, .support-page-wrapper .support-service-pane-link a::after, .support-page-wrapper a.support-service-pane-link::after, .support-page-wrapper button.support-service-pane-link::after, .support-page-wrapper .elementor-button.support-service-pane-link::after, .support-page-wrapper .elementor-button-link.support-service-pane-link::after { color: currentColor !important; } /* Hover state: darker red */ .support-page-wrapper .support-service-pane-link:hover, .support-page-wrapper .support-service-pane-link:hover .elementor-button, .support-page-wrapper .support-service-pane-link:hover .elementor-button-link, .support-page-wrapper .support-service-pane-link:hover a, .support-page-wrapper .support-service-pane-link:hover .elementor-button-text, .support-page-wrapper a.support-service-pane-link:hover, .support-page-wrapper .elementor-button.support-service-pane-link:hover, .support-page-wrapper .elementor-button-link.support-service-pane-link:hover, .support-page-wrapper .elementor-button.support-service-pane-link:hover .elementor-button-text, .support-page-wrapper .elementor-button-link.support-service-pane-link:hover .elementor-button-text { color: #b91117 !important; } /* --------------------------------------------------------------------------------------------------------- 10. PANE VISUAL --------------------------------------------------------------------------------------------------------- Purpose: - Keeps the product line-art area stable across panes. - Prevents image size differences from changing the panel height. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-service-pane-visual { position: relative !important; z-index: 6 !important; grid-column: 2 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; overflow: visible !important; justify-self: stretch !important; align-self: center !important; margin: 0 !important; padding: 0 !important; padding-left: 5px; box-sizing: border-box !important; } .support-page-wrapper .support-service-pane-visual::before { content: "" !important; position: absolute !important; width: 78% !important; height: 78% !important; right: 4% !important; top: 10% !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(215, 25, 32, 0.045) 0%, transparent 65%) !important; pointer-events: none !important; } .support-page-wrapper .support-service-pane-image, .support-page-wrapper .support-service-pane-image .elementor-widget-container { width: 100% !important; margin: 0 !important; padding: 0 !important; padding-left: 5px; } .support-page-wrapper .support-service-pane-image img { display: block !important; width: 100% !important; max-width: 820px !important; height: auto !important; margin-left: auto !important; margin-right: 0 !important; /* Controls the visual position of the line-art image inside the right panel. The generated image has some natural whitespace, so we move it slightly upward to make the scope itself sit in the visual center of the right side. */ transform: translate(-35px, -65px) scale(1.28) !important; /* translate(水平, 垂直) scale(放大倍数) */ transform-origin: center center !important; opacity: 0.96 !important; filter: contrast(1.03) brightness(1.02) !important; } /* --------------------------------------------------------------------------------------------------------- 11. RESPONSIVE — TABLET --------------------------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { .support-page-wrapper .support-services-body { grid-template-columns: 320px minmax(0, 1fr) !important; gap: 16px !important; } .support-page-wrapper .support-service-pane { grid-template-columns: 1fr !important; padding: 42px 38px !important; gap: 28px !important; } .support-page-wrapper .support-service-pane-copy { max-width: 100% !important; } .support-page-wrapper .support-service-pane-visual { min-height: 280px !important; } .support-page-wrapper .support-service-pane-image img { max-width: 620px !important; margin: 0 auto !important; } .support-page-wrapper .support-services-tabs, .support-page-wrapper .support-services-panel { height: auto !important; min-height: 0 !important; max-height: none !important; } .support-page-wrapper .support-service-pane { height: auto !important; min-height: auto !important; } .support-page-wrapper .support-service-pane-title, .support-page-wrapper .support-service-pane-description, .support-page-wrapper .support-service-pane-list { min-height: 0 !important; } } /* --------------------------------------------------------------------------------------------------------- 12. RESPONSIVE — MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .support-page-wrapper .support-services-section { padding: 58px 0 66px 0 !important; } .support-page-wrapper .support-services-inner { width: calc(100% - 36px) !important; } .support-page-wrapper .support-services-header { margin-bottom: 24px !important; } .support-page-wrapper .support-services-title, .support-page-wrapper .support-services-title .elementor-heading-title { font-size: 34px !important; } .support-page-wrapper .support-services-body { grid-template-columns: 1fr !important; gap: 16px !important; } .support-page-wrapper .support-service-tab { min-height: 66px !important; grid-template-columns: 38px minmax(0, 1fr) 16px !important; padding: 0 18px !important; } .support-page-wrapper .support-service-tab-title, .support-page-wrapper .support-service-tab-title .elementor-heading-title { font-size: 14px !important; } .support-page-wrapper .support-services-panel { min-height: auto !important; } .support-page-wrapper .support-service-pane { min-height: auto !important; grid-template-columns: 1fr !important; padding: 34px 22px 30px 22px !important; gap: 24px !important; } .support-page-wrapper .support-service-pane-title, .support-page-wrapper .support-service-pane-title .elementor-heading-title { font-size: 28px !important; } .support-page-wrapper .support-service-pane-description, .support-page-wrapper .support-service-pane-description p { font-size: 14.5px !important; } .support-page-wrapper .support-service-pane-visual { min-height: 220px !important; } .support-page-wrapper .support-service-pane-image img { max-width: 100% !important; } } /* ========================================================================================================= 第二屏结束 ========================================================================================================= */ /* ========================================================================================================= 第三屏开始 ========================================================================================================= */ /* ========================================================================================================= THIRD SCREEN — HOW WE WORK / REQUEST TO RESOLUTION --------------------------------------------------------------------------------------------------------- Purpose: - Builds a clean 5-step support process timeline. - Removes the PPT-like bottom feature row. - Uses only Elementor structure + CSS. - Adds a loading-style red circular hover ring around each process node. - No JavaScript required. --------------------------------------------------------------------------------------------------------- Elementor structure: .support-process-section .support-process-inner .support-process-header .support-process-eyebrow .support-process-main-title .support-process-description .support-process-track .support-process-step .support-process-node .support-process-icon .support-process-number .support-process-title .support-process-text ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 00. ANIMATABLE CUSTOM PROPERTY --------------------------------------------------------------------------------------------------------- Purpose: - Allows the red conic-gradient ring to animate smoothly. - If a browser does not support @property, the hover effect still works, but the ring may change without smooth interpolation. --------------------------------------------------------------------------------------------------------- */ @property --process-ring-angle { syntax: ""; inherits: false; initial-value: 34deg; } /* --------------------------------------------------------------------------------------------------------- 01. SECTION BASE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-section { position: relative !important; width: 100% !important; padding: 20px 0 20px 0 !important; overflow: hidden !important; background: radial-gradient(circle at 8% 18%, rgba(215, 25, 32, 0.040) 0%, transparent 34%), radial-gradient(circle at 92% 62%, rgba(20, 28, 40, 0.035) 0%, transparent 38%), linear-gradient(180deg, #ffffff 0%, #fbfbfc 52%, #ffffff 100%) !important; border-bottom: 1px solid rgba(20, 28, 40, 0.07) !important; } /* Subtle background grid, matching the previous sections */ .support-page-wrapper .support-process-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(20, 28, 40, 0.020) 1px, transparent 1px), linear-gradient(180deg, rgba(20, 28, 40, 0.018) 1px, transparent 1px) !important; background-size: 56px 56px !important; opacity: 0.18 !important; mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 62%) !important; -webkit-mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 62%) !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 02. INNER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-inner { position: relative !important; z-index: 5 !important; width: min(92vw, 1320px) !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; gap: 10px; } /* --------------------------------------------------------------------------------------------------------- 03. HEADER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-header { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important; margin-bottom: 62px !important; } .support-page-wrapper .support-process-eyebrow, .support-page-wrapper .support-process-eyebrow .elementor-heading-title { margin: 0 !important; color: #d71920 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } .support-page-wrapper .support-process-main-title, .support-page-wrapper .support-process-main-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: clamp(38px, 3.2vw, 54px) !important; line-height: 1.08 !important; font-weight: 900 !important; letter-spacing: -1.7px !important; } .support-page-wrapper .support-process-description, .support-page-wrapper .support-process-description p { max-width: 660px !important; margin: 0 auto !important; color: rgba(18, 24, 32, 0.62) !important; font-size: 16px !important; line-height: 1.65 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 04. PROCESS TRACK — FINAL CLEAN CONNECTOR --------------------------------------------------------------------------------------------------------- Purpose: - Creates one clean horizontal process track. - The dashed line runs behind the circular nodes. - Both ends finish with gray dots. - Four red dots sit between the five nodes. - All connector positions are controlled here only. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-track { position: relative !important; width: 97% !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; column-gap: 28px !important; justify-items: center !important; align-items: flex-start !important; /* Main control variables. --process-line-top: Controls vertical position of the dashed line. Increase it if the line is too high. Decrease it if the line is too low. --process-line-start: Left gray endpoint position. --process-line-end: Right gray endpoint position. Keep start and end symmetrical: 4% / 96% 3.5% / 96.5% 5% / 95% */ --process-line-top: 59px; --process-line-start: 0.3%; --process-line-end: 99.7%; box-sizing: border-box !important; isolation: isolate !important; } /* Main dashed connector line */ .support-page-wrapper .support-process-track::before { content: "" !important; position: absolute !important; display: block !important; /* 55px places the line slightly lower than the previous 52px. This should visually sit closer to the center of the circular nodes. */ top: var(--process-line-top) !important; left: var(--process-line-start) !important; right: calc(100% - var(--process-line-end)) !important; height: 2px !important; background-image: repeating-linear-gradient( 90deg, rgba(20, 28, 40, 0.22) 0 7px, transparent 7px 16px ) !important; z-index: 1 !important; pointer-events: none !important; } /* Endpoint dots + red dots between steps */ .support-page-wrapper .support-process-track::after { content: "" !important; position: absolute !important; display: block !important; /* Dot box is 10px high. top = line top - 4px keeps the dot center aligned with the 2px dashed line. */ top: calc(var(--process-line-top) - 4px) !important; left: 0 !important; right: 0 !important; height: 10px !important; /* Dot layout: 4% = left gray endpoint 20% = red dot between step 1 and 2 40% = red dot between step 2 and 3 60% = red dot between step 3 and 4 80% = red dot between step 4 and 5 96% = right gray endpoint The gray endpoints use the same start/end values as the dashed line. */ background: radial-gradient(circle at var(--process-line-start) 50%, rgba(160, 165, 172, 0.95) 0 3.2px, transparent 3.7px), radial-gradient(circle at 20% 50%, rgba(215, 25, 32, 0.82) 0 4px, transparent 4.5px), radial-gradient(circle at 40% 50%, rgba(215, 25, 32, 0.82) 0 4px, transparent 4.5px), radial-gradient(circle at 60% 50%, rgba(215, 25, 32, 0.82) 0 4px, transparent 4.5px), radial-gradient(circle at 80% 50%, rgba(215, 25, 32, 0.82) 0 4px, transparent 4.5px), radial-gradient(circle at var(--process-line-end) 50%, rgba(160, 165, 172, 0.95) 0 3.2px, transparent 3.7px) !important; z-index: 2 !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 05. PROCESS STEP --------------------------------------------------------------------------------------------------------- Purpose: - Each step only controls its own content. - No connector is generated by individual steps. - The shared connector line is handled only by .support-process-track. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-step { position: relative !important; z-index: 5 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; cursor: default !important; transition: transform 0.28s ease, opacity 0.28s ease !important; } .support-page-wrapper .support-process-step:hover { transform: translateY(-4px) !important; } /* Important: Disable old step-level connector pseudo-elements. The timeline is now drawn only by .support-process-track::before / ::after. */ .support-page-wrapper .support-process-step::before, .support-page-wrapper .support-process-step::after { display: none !important; } /* Keep the circular nodes above the connector line */ .support-page-wrapper .support-process-node { position: relative !important; z-index: 8 !important; } /* --------------------------------------------------------------------------------------------------------- 06. PROCESS NODE — CIRCULAR ICON HOLDER --------------------------------------------------------------------------------------------------------- Purpose: - Creates a clean circular process icon. - Default state has a thin, even gray border and a short red arc. - Hover state animates the red arc into a complete circle. - The gray ring and red loading arc are separated to avoid uneven border thickness. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-node { --process-ring-angle: 34deg; /* Controls where the fully solid red part ends. After this point, the ring starts fading out gradually. */ --process-ring-solid-end: 14deg; position: relative !important; z-index: 5 !important; width: 104px !important; height: 104px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%) !important; box-shadow: 0 16px 34px rgba(20, 28, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; isolation: isolate !important; transition: box-shadow 0.28s ease, transform 0.28s ease !important; } /* Thin gray base ring. This replaces the previous thick conic-gradient gray border. */ .support-page-wrapper .support-process-node::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; border-radius: 50% !important; border: 1px solid rgba(20, 28, 40, 0.13) !important; background: transparent !important; pointer-events: none !important; } /* Red loading arc. The mask makes the conic-gradient appear as a thin circular stroke. */ .support-page-wrapper .support-process-node::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; border-radius: 50% !important; /* Initial ring style: - solid red at the beginning - then gradually fades toward the tail - finally becomes fully transparent at the end angle */ background: conic-gradient( from -90deg, rgba(215, 25, 32, 1) 0deg, rgba(215, 25, 32, 1) var(--process-ring-solid-end), rgba(215, 25, 32, 0.72) calc(var(--process-ring-solid-end) + 5deg), rgba(215, 25, 32, 0.32) calc(var(--process-ring-angle) - 4deg), rgba(215, 25, 32, 0) var(--process-ring-angle), transparent 360deg ) !important; /* Ring thickness control: 2px = thin and refined 3px = more visible */ padding: 2px !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask-composite: exclude !important; transition: --process-ring-angle 0.78s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s ease !important; pointer-events: none !important; } /* Hover: loading ring becomes a complete red circle */ .support-page-wrapper .support-process-step:hover .support-process-node { transform: translateY(-2px) !important; box-shadow: 0 20px 42px rgba(215, 25, 32, 0.13), 0 10px 26px rgba(20, 28, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; } .support-page-wrapper .support-process-step:hover .support-process-node::after { --process-ring-angle: 360deg; filter: drop-shadow(0 0 8px rgba(215, 25, 32, 0.20)) !important; } /* --------------------------------------------------------------------------------------------------------- 07. PROCESS ICON --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-icon { position: relative !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .support-page-wrapper .support-process-icon, .support-page-wrapper .support-process-icon .elementor-icon { color: #d71920 !important; } .support-page-wrapper .support-process-icon .elementor-icon, .support-page-wrapper .support-process-icon i, .support-page-wrapper .support-process-icon svg { width: 42px !important; height: 42px !important; color: #d71920 !important; fill: #d71920 !important; font-size: 42px !important; transition: transform 0.28s ease, color 0.28s ease, fill 0.28s ease !important; } .support-page-wrapper .support-process-step:hover .support-process-icon .elementor-icon, .support-page-wrapper .support-process-step:hover .support-process-icon i, .support-page-wrapper .support-process-step:hover .support-process-icon svg { transform: scale(1.06) !important; } /* --------------------------------------------------------------------------------------------------------- 08. STEP NUMBER / TITLE / TEXT --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-process-number, .support-page-wrapper .support-process-number .elementor-heading-title { margin: 20px 0 8px 0 !important; color: #d71920 !important; font-size: 16px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.4px !important; } .support-page-wrapper .support-process-title, .support-page-wrapper .support-process-title .elementor-heading-title { position: relative !important; margin: 0 !important; color: #111820 !important; font-size: 19px !important; line-height: 1.22 !important; font-weight: 850 !important; letter-spacing: -0.3px !important; } /* Small red underline below each step title */ .support-page-wrapper .support-process-title::after { content: "" !important; display: block !important; width: 34px !important; height: 2px !important; margin: 10px auto 0 auto !important; border-radius: 999px !important; background: #d71920 !important; opacity: 0.86 !important; } .support-page-wrapper .support-process-text, .support-page-wrapper .support-process-text p { max-width: 190px !important; margin: 8px auto 0 auto !important; color: rgba(18, 24, 32, 0.62) !important; font-size: 14px !important; line-height: 1.52 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 09. RESPONSIVE — TABLET --------------------------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { .support-page-wrapper .support-process-section { padding: 76px 0 82px 0 !important; } .support-page-wrapper .support-process-track { column-gap: 18px !important; } .support-page-wrapper .support-process-node { width: 92px !important; height: 92px !important; } .support-page-wrapper .support-process-track::before { top: 46px !important; } .support-page-wrapper .support-process-track::after { top: 42px !important; } .support-page-wrapper .support-process-icon .elementor-icon, .support-page-wrapper .support-process-icon i, .support-page-wrapper .support-process-icon svg { width: 36px !important; height: 36px !important; font-size: 36px !important; } .support-page-wrapper .support-process-title, .support-page-wrapper .support-process-title .elementor-heading-title { font-size: 17px !important; } .support-page-wrapper .support-process-text, .support-page-wrapper .support-process-text p { max-width: 165px !important; font-size: 13px !important; } } /* --------------------------------------------------------------------------------------------------------- 10. RESPONSIVE — MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .support-page-wrapper .support-process-section { padding: 58px 0 66px 0 !important; } .support-page-wrapper .support-process-inner { width: calc(100% - 36px) !important; } .support-page-wrapper .support-process-header { align-items: flex-start !important; text-align: left !important; margin-bottom: 36px !important; } .support-page-wrapper .support-process-main-title, .support-page-wrapper .support-process-main-title .elementor-heading-title { font-size: 34px !important; line-height: 1.12 !important; } .support-page-wrapper .support-process-description, .support-page-wrapper .support-process-description p { max-width: 100% !important; margin: 0 !important; font-size: 14.5px !important; } .support-page-wrapper .support-process-track { display: flex !important; flex-direction: column !important; gap: 26px !important; padding-left: 0 !important; } /* Vertical dotted timeline on mobile */ .support-page-wrapper .support-process-track::before { left: 43px !important; right: auto !important; top: 48px !important; bottom: 48px !important; width: 2px !important; height: auto !important; background-image: linear-gradient( 180deg, rgba(20, 28, 40, 0.20) 0, rgba(20, 28, 40, 0.20) 6px, transparent 6px, transparent 14px ) !important; } .support-page-wrapper .support-process-track::after { display: none !important; } .support-page-wrapper .support-process-step { display: grid !important; grid-template-columns: 88px minmax(0, 1fr) !important; grid-template-areas: "node number" "node title" "node text" !important; column-gap: 18px !important; align-items: start !important; text-align: left !important; } .support-page-wrapper .support-process-node { grid-area: node !important; width: 86px !important; height: 86px !important; } .support-page-wrapper .support-process-icon .elementor-icon, .support-page-wrapper .support-process-icon i, .support-page-wrapper .support-process-icon svg { width: 34px !important; height: 34px !important; font-size: 34px !important; } .support-page-wrapper .support-process-number { grid-area: number !important; } .support-page-wrapper .support-process-title { grid-area: title !important; } .support-page-wrapper .support-process-text { grid-area: text !important; } .support-page-wrapper .support-process-number, .support-page-wrapper .support-process-number .elementor-heading-title { margin: 4px 0 8px 0 !important; } .support-page-wrapper .support-process-title::after { margin: 8px auto 0 auto !important; } .support-page-wrapper .support-process-text, .support-page-wrapper .support-process-text p { max-width: 100% !important; margin: 14px 0 0 0 !important; } /* Disable desktop step-to-step connectors on mobile. Mobile uses its own vertical timeline style. */ .support-page-wrapper .support-process-step::before, .support-page-wrapper .support-process-step::after { display: none !important; } } /* --------------------------------------------------------------------------------------------------------- 11. REDUCED MOTION SAFETY --------------------------------------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .support-page-wrapper .support-process-step, .support-page-wrapper .support-process-node, .support-page-wrapper .support-process-node::before, .support-page-wrapper .support-process-icon .elementor-icon, .support-page-wrapper .support-process-icon i, .support-page-wrapper .support-process-icon svg { transition: none !important; } } /* ========================================================================================================= 第三屏结束 ========================================================================================================= */ /* ========================================================================================================= 第四屏开始 ========================================================================================================= */ /* ========================================================================================================= FOURTH SCREEN — KNOWLEDGE & RESOURCES / CLEAN FINAL VERSION --------------------------------------------------------------------------------------------------------- Purpose: - Builds the compact "Answers at Your Fingertips" section. - Uses one clean CSS system only. - Removes old compression patches and duplicate Featured Resources rules. - Search field is a real input form. - Category cards, topic pills, featured resources and FAQ items support overlay links. - No JavaScript required. --------------------------------------------------------------------------------------------------------- Elementor structure: .support-resources-section .support-resources-inner .support-resources-header .support-resources-grid .support-resources-search-card.support-resources-card .support-resources-featured-card.support-resources-card .support-resources-faq-card.support-resources-card .support-resources-cta ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 01. SECTION BASE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-section { position: relative !important; width: 100% !important; padding: 20px 0 20px 0 !important; min-height: 0 !important; overflow: hidden !important; background: radial-gradient(circle at 8% 16%, rgba(215, 25, 32, 0.040) 0%, transparent 34%), radial-gradient(circle at 92% 58%, rgba(20, 28, 40, 0.035) 0%, transparent 38%), linear-gradient(180deg, #ffffff 0%, #fbfbfc 54%, #ffffff 100%) !important; border-bottom: 1px solid rgba(20, 28, 40, 0.07) !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(20, 28, 40, 0.018) 1px, transparent 1px), linear-gradient(180deg, rgba(20, 28, 40, 0.016) 1px, transparent 1px) !important; background-size: 56px 56px !important; opacity: 0.16 !important; mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 64%) !important; -webkit-mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 64%) !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 02. INNER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-inner { position: relative !important; z-index: 5 !important; width: min(92vw, 1320px) !important; margin: 0 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 03. HEADER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-header { max-width: 720px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 10px !important; text-align: left !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-eyebrow, .support-page-wrapper .support-resources-eyebrow .elementor-heading-title { margin: 0 !important; color: #d71920 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 1.7px !important; text-transform: uppercase !important; } .support-page-wrapper .support-resources-title, .support-page-wrapper .support-resources-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: clamp(36px, 3.15vw, 52px) !important; line-height: 1.08 !important; font-weight: 900 !important; letter-spacing: -1.7px !important; } .support-page-wrapper .support-resources-description, .support-page-wrapper .support-resources-description p { max-width: 620px !important; margin: 0 !important; color: rgba(18, 24, 32, 0.62) !important; font-size: 15px !important; line-height: 1.58 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 04. GRID LAYOUT --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-grid { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.94fr) !important; gap: 18px !important; align-items: stretch !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 05. BASE CARD STYLE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-card { position: relative !important; min-width: 0 !important; width: 100% !important; min-height: 398px !important; padding: 26px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: 0 18px 42px rgba(20, 28, 40, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important; backdrop-filter: blur(12px) saturate(125%) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-card-title, .support-page-wrapper .support-resources-card-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: 19px !important; line-height: 1.18 !important; font-weight: 850 !important; letter-spacing: -0.35px !important; } .support-page-wrapper .support-resources-card-description, .support-page-wrapper .support-resources-card-description p { margin: 11px 0 0 0 !important; color: rgba(18, 24, 32, 0.62) !important; font-size: 13px !important; line-height: 1.52 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 06. LEFT CARD — REAL SEARCH FORM --------------------------------------------------------------------------------------------------------- Purpose: - Uses a real search input instead of a visual-only search box. - Submit result: /support/resources/?q=keyword - Search box top spacing and bottom spacing are controlled here. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-search-card .support-resources-search-box { position: relative !important; width: 100% !important; display: block !important; /* Controls the space between card description and search input. Increase to 16px if the input is still too close to the text above. */ margin: 14px 0 0 0 !important; padding: 0 !important; border: none !important; background: transparent !important; overflow: visible !important; cursor: text !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-search-html { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-search-html .elementor-widget-container { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Search box must not use the old clickable overlay logic */ .support-page-wrapper .support-resources-search-box .support-resources-cover-link { display: none !important; } .support-page-wrapper .support-resources-search-form { position: relative !important; width: 100% !important; height: 44px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 18px 0 52px !important; border: 1px solid rgba(20, 28, 40, 0.12) !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important; } .support-page-wrapper .support-resources-search-form:focus-within { border-color: rgba(215, 25, 32, 0.36) !important; background: #ffffff !important; box-shadow: 0 10px 24px rgba(20, 28, 40, 0.06), 0 0 0 3px rgba(215, 25, 32, 0.07) !important; } /* Accessibility label, visually hidden */ .support-page-wrapper .support-resources-search-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } .support-page-wrapper .support-resources-search-icon { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: rgba(18, 24, 32, 0.58) !important; pointer-events: none !important; } .support-page-wrapper .support-resources-search-input { position: relative !important; z-index: 5 !important; width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; background: transparent !important; color: #111820 !important; font-size: 13.5px !important; line-height: 1 !important; font-weight: 500 !important; box-shadow: none !important; pointer-events: auto !important; } .support-page-wrapper .support-resources-search-input::placeholder { color: rgba(18, 24, 32, 0.46) !important; } /* --------------------------------------------------------------------------------------------------------- 07. LEFT CARD — CATEGORY ENTRY --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-subtitle, .support-page-wrapper .support-resources-subtitle .elementor-heading-title { margin: 14px 0 10px 0 !important; color: #111820 !important; font-size: 13.5px !important; line-height: 1.25 !important; font-weight: 850 !important; letter-spacing: -0.15px !important; } .support-page-wrapper .support-resources-category-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-category-item { position: relative !important; min-width: 0 !important; min-height: 88px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 8px !important; border: 1px solid rgba(20, 28, 40, 0.11) !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.66) !important; color: rgba(18, 24, 32, 0.62) !important; cursor: pointer !important; box-sizing: border-box !important; transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important; } .support-page-wrapper .support-resources-category-item:hover, .support-page-wrapper .support-resources-category-item.is-active { color: #d71920 !important; border-color: rgba(215, 25, 32, 0.46) !important; background: linear-gradient(180deg, rgba(215, 25, 32, 0.055) 0%, rgba(255, 255, 255, 0.78) 100%) !important; box-shadow: 0 12px 24px rgba(215, 25, 32, 0.06) !important; transform: translateY(-1px) !important; } .support-page-wrapper .support-resources-category-icon, .support-page-wrapper .support-resources-category-icon .elementor-icon { color: currentColor !important; } .support-page-wrapper .support-resources-category-icon .elementor-icon, .support-page-wrapper .support-resources-category-icon i, .support-page-wrapper .support-resources-category-icon svg { width: 22px !important; height: 22px !important; font-size: 22px !important; color: currentColor !important; fill: currentColor !important; } .support-page-wrapper .support-resources-category-title, .support-page-wrapper .support-resources-category-title .elementor-heading-title { margin: 0 !important; color: currentColor !important; font-size: 11.5px !important; line-height: 1.15 !important; font-weight: 850 !important; letter-spacing: 0.3px !important; text-align: center !important; } /* --------------------------------------------------------------------------------------------------------- 08. LEFT CARD — POPULAR TOPICS --------------------------------------------------------------------------------------------------------- Purpose: - Keeps topic pills compact and inline. - Adds better vertical breathing space. - Prevents Elementor containers from stretching each pill to full width. --------------------------------------------------------------------------------------------------------- */ /* Popular Topics title only */ .support-page-wrapper .support-resources-topics-title, .support-page-wrapper .support-resources-topics-title .elementor-heading-title { margin: 20px 0 13px 0 !important; color: #111820 !important; font-size: 13.5px !important; line-height: 1.25 !important; font-weight: 850 !important; letter-spacing: -0.15px !important; } /* Topic list wrapper */ .support-page-wrapper .support-resources-topic-list { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: flex-start !important; /* First value = vertical gap between rows. Second value = horizontal gap between pills. */ gap: 8px 8px !important; margin: 0 !important; padding: 0 0 2px 0 !important; box-sizing: border-box !important; } /* Each topic pill */ .support-page-wrapper .support-resources-topic-pill { position: relative !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: flex-start !important; /* Slightly taller than before, so the pills do not feel squeezed. */ min-height: 30px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; padding: 0 20px !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.66) !important; color: rgba(18, 24, 32, 0.62) !important; white-space: nowrap !important; cursor: pointer !important; box-sizing: border-box !important; transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease !important; } /* Elementor e-con width override */ .support-page-wrapper .support-resources-topic-list > .support-resources-topic-pill, .support-page-wrapper .support-resources-topic-list > .e-con.support-resources-topic-pill, .support-page-wrapper .support-resources-topic-list > .elementor-element.support-resources-topic-pill { width: auto !important; max-width: max-content !important; --width: auto !important; --min-height: 30px !important; flex: 0 0 auto !important; } /* Hover */ .support-page-wrapper .support-resources-topic-pill:hover { color: #d71920 !important; border-color: rgba(215, 25, 32, 0.34) !important; background: rgba(215, 25, 32, 0.045) !important; transform: translateY(-1px) !important; } /* Topic text */ .support-page-wrapper .support-resources-topic-text, .support-page-wrapper .support-resources-topic-text .elementor-heading-title { width: auto !important; max-width: max-content !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------------------------------------- 09. FEATURED RESOURCES CARD — CLEAN FINAL VERSION --------------------------------------------------------------------------------------------------------- Purpose: - Uses one stable layout for the middle Featured Resources card. - Each item has two real layout columns only: icon + text. - The right arrow is generated by CSS and positioned absolutely. - Separators are drawn before every item except the first one. - HTML link widgets are removed from normal layout flow. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-featured-list { margin-top: 12px !important; display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-featured-item { position: relative !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 16px !important; align-items: center !important; width: 100% !important; min-height: 58px !important; padding: 12px 34px 12px 5px !important; border-top: none !important; border-bottom: none !important; color: #111820 !important; cursor: pointer !important; box-sizing: border-box !important; transition: color 0.22s ease, background 0.22s ease !important; } /* First item has no top separator */ .support-page-wrapper .support-resources-featured-item::before { display: none !important; } /* Every following item gets a top separator */ .support-page-wrapper .support-resources-featured-item ~ .support-resources-featured-item::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; display: block !important; height: 1px !important; background: rgba(20, 28, 40, 0.075) !important; pointer-events: none !important; } /* CSS arrow */ .support-page-wrapper .support-resources-featured-item::after { content: "›" !important; position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 8 !important; width: 16px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(18, 24, 32, 0.46) !important; font-size: 24px !important; line-height: 1 !important; font-weight: 500 !important; pointer-events: none !important; transition: color 0.22s ease, transform 0.22s ease !important; } .support-page-wrapper .support-resources-featured-item:hover { background: rgba(215, 25, 32, 0.025) !important; } .support-page-wrapper .support-resources-featured-item:hover::after { color: #d71920 !important; transform: translate(3px, -50%) !important; } .support-page-wrapper .support-resources-featured-icon-box { grid-column: 1 !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; border-radius: 11px !important; background: rgba(215, 25, 32, 0.070) !important; color: #d71920 !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-featured-icon, .support-page-wrapper .support-resources-featured-icon .elementor-icon { color: #d71920 !important; } .support-page-wrapper .support-resources-featured-icon .elementor-icon, .support-page-wrapper .support-resources-featured-icon i, .support-page-wrapper .support-resources-featured-icon svg { width: 20px !important; height: 20px !important; font-size: 20px !important; color: #d71920 !important; fill: #d71920 !important; } .support-page-wrapper .support-resources-featured-copy { grid-column: 2 !important; min-width: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-featured-copy > .elementor-element, .support-page-wrapper .support-resources-featured-copy .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .support-page-wrapper .support-resources-featured-title, .support-page-wrapper .support-resources-featured-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: 14.2px !important; line-height: 1.18 !important; font-weight: 850 !important; letter-spacing: -0.2px !important; } .support-page-wrapper .support-resources-featured-text, .support-page-wrapper .support-resources-featured-text p { margin: 3px 0 0 0 !important; color: rgba(18, 24, 32, 0.62) !important; font-size: 12.5px !important; line-height: 1.32 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 10. FAQ CARD --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-faq-list { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 20px !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-faq-item { position: relative !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 42px 0 16px !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.72) !important; color: #111820 !important; cursor: pointer !important; box-sizing: border-box !important; transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease !important; } .support-page-wrapper .support-resources-faq-item:hover { border-color: rgba(215, 25, 32, 0.34) !important; background: rgba(215, 25, 32, 0.035) !important; transform: translateY(-1px) !important; } .support-page-wrapper .support-resources-faq-item::after { content: "+" !important; position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: #d71920 !important; font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; pointer-events: none !important; } .support-page-wrapper .support-resources-faq-question, .support-page-wrapper .support-resources-faq-question .elementor-heading-title { margin: 0 !important; color: currentColor !important; font-size: 12.5px !important; line-height: 1.22 !important; font-weight: 800 !important; letter-spacing: -0.1px !important; } .support-page-wrapper .support-resources-faq-link { margin-top: 22px !important; } .support-page-wrapper .support-resources-faq-link, .support-page-wrapper .support-resources-faq-link a, .support-page-wrapper .support-resources-faq-link .elementor-button, .support-page-wrapper .support-resources-faq-link .elementor-button-link, .support-page-wrapper a.support-resources-faq-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; color: #d71920 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 850 !important; text-decoration: none !important; cursor: pointer !important; } .support-page-wrapper .support-resources-faq-link .elementor-button-text, .support-page-wrapper .support-resources-faq-link .elementor-heading-title { color: currentColor !important; } .support-page-wrapper .support-resources-faq-link .elementor-button::after, .support-page-wrapper .support-resources-faq-link .elementor-button-link::after, .support-page-wrapper .support-resources-faq-link a::after, .support-page-wrapper a.support-resources-faq-link::after { content: "→" !important; display: inline-block !important; margin-left: 12px !important; color: currentColor !important; transition: transform 0.22s ease !important; } .support-page-wrapper .support-resources-faq-link:hover, .support-page-wrapper .support-resources-faq-link:hover a, .support-page-wrapper .support-resources-faq-link:hover .elementor-button { color: #b91117 !important; } .support-page-wrapper .support-resources-faq-link:hover .elementor-button::after, .support-page-wrapper .support-resources-faq-link:hover .elementor-button-link::after, .support-page-wrapper .support-resources-faq-link:hover a::after { transform: translateX(3px) !important; } /* --------------------------------------------------------------------------------------------------------- 11. BOTTOM CTA --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-cta { position: relative !important; width: min(720px, 100%) !important; margin: 24px auto 0 auto !important; min-height: 74px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto !important; column-gap: 18px !important; align-items: center !important; padding: 14px 18px !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: 0 18px 42px rgba(20, 28, 40, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important; backdrop-filter: blur(12px) saturate(125%) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-cta-icon { width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(215, 25, 32, 0.08) !important; color: #d71920 !important; } .support-page-wrapper .support-resources-cta-icon .elementor-icon, .support-page-wrapper .support-resources-cta-icon i, .support-page-wrapper .support-resources-cta-icon svg { width: 20px !important; height: 20px !important; font-size: 20px !important; color: #d71920 !important; fill: #d71920 !important; } .support-page-wrapper .support-resources-cta-copy { min-width: 0 !important; } .support-page-wrapper .support-resources-cta-title, .support-page-wrapper .support-resources-cta-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 850 !important; letter-spacing: -0.2px !important; } .support-page-wrapper .support-resources-cta-text, .support-page-wrapper .support-resources-cta-text p { margin: 5px 0 0 0 !important; color: rgba(18, 24, 32, 0.58) !important; font-size: 12.5px !important; line-height: 1.42 !important; font-weight: 500 !important; } .support-page-wrapper .support-resources-cta-button, .support-page-wrapper .support-resources-cta-button a, .support-page-wrapper .support-resources-cta-button .elementor-button, .support-page-wrapper .support-resources-cta-button .elementor-button-link, .support-page-wrapper a.support-resources-cta-button { min-width: 146px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 22px !important; border: none !important; border-radius: 9px !important; background: #d71920 !important; background-color: #d71920 !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 14px 26px rgba(215, 25, 32, 0.22) !important; font-size: 13px !important; line-height: 1 !important; font-weight: 850 !important; text-decoration: none !important; transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important; } .support-page-wrapper .support-resources-cta-button .elementor-button-text, .support-page-wrapper .elementor-button.support-resources-cta-button .elementor-button-text, .support-page-wrapper .elementor-button-link.support-resources-cta-button .elementor-button-text { color: #ffffff !important; white-space: nowrap !important; } .support-page-wrapper .support-resources-cta-button .elementor-button::after, .support-page-wrapper .support-resources-cta-button .elementor-button-link::after, .support-page-wrapper .support-resources-cta-button a::after, .support-page-wrapper .elementor-button.support-resources-cta-button::after, .support-page-wrapper .elementor-button-link.support-resources-cta-button::after, .support-page-wrapper a.support-resources-cta-button::after { content: "→" !important; display: inline-block !important; margin-left: 12px !important; color: currentColor !important; transition: transform 0.22s ease !important; } .support-page-wrapper .support-resources-cta-button:hover a, .support-page-wrapper .support-resources-cta-button:hover .elementor-button, .support-page-wrapper .elementor-button.support-resources-cta-button:hover { background: #b91117 !important; background-color: #b91117 !important; transform: translateY(-1px) !important; box-shadow: 0 16px 30px rgba(215, 25, 32, 0.28) !important; } .support-page-wrapper .support-resources-cta-button:hover .elementor-button::after, .support-page-wrapper .support-resources-cta-button:hover .elementor-button-link::after, .support-page-wrapper .support-resources-cta-button:hover a::after { transform: translateX(3px) !important; } /* --------------------------------------------------------------------------------------------------------- 12. CLICKABLE LINK LAYER --------------------------------------------------------------------------------------------------------- Purpose: - Makes category cards, topic pills, featured resources and FAQ items clickable. - Search box is excluded because it is a real input form. - Elementor HTML widget wrappers are removed from normal layout flow. --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-resources-category-item .elementor-widget-html, .support-page-wrapper .support-resources-topic-pill .elementor-widget-html, .support-page-wrapper .support-resources-featured-item .elementor-widget-html, .support-page-wrapper .support-resources-faq-item .elementor-widget-html, .support-page-wrapper .support-resources-link-widget { position: absolute !important; inset: 0 !important; z-index: 20 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; box-sizing: border-box !important; } .support-page-wrapper .support-resources-category-item .elementor-widget-html .elementor-widget-container, .support-page-wrapper .support-resources-topic-pill .elementor-widget-html .elementor-widget-container, .support-page-wrapper .support-resources-featured-item .elementor-widget-html .elementor-widget-container, .support-page-wrapper .support-resources-faq-item .elementor-widget-html .elementor-widget-container, .support-page-wrapper .support-resources-link-widget .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .support-page-wrapper .support-resources-cover-link { position: absolute !important; inset: 0 !important; z-index: 21 !important; display: block !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; background: transparent !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; } /* Keep visible content below the overlay link but above the card background */ .support-page-wrapper .support-resources-category-item > :not(.elementor-widget-html):not(.support-resources-cover-link), .support-page-wrapper .support-resources-topic-pill > :not(.elementor-widget-html):not(.support-resources-cover-link), .support-page-wrapper .support-resources-featured-item > :not(.elementor-widget-html):not(.support-resources-cover-link), .support-page-wrapper .support-resources-faq-item > :not(.elementor-widget-html):not(.support-resources-cover-link) { position: relative !important; z-index: 2 !important; } .support-page-wrapper .support-resources-cover-link:focus-visible { outline: 2px solid rgba(215, 25, 32, 0.80) !important; outline-offset: 4px !important; } /* --------------------------------------------------------------------------------------------------------- 13. RESPONSIVE — TABLET --------------------------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { .support-page-wrapper .support-resources-section { padding: 42px 0 50px 0 !important; } .support-page-wrapper .support-resources-grid { grid-template-columns: 1fr 1fr !important; } .support-page-wrapper .support-resources-search-card { grid-column: 1 / -1 !important; min-height: auto !important; } .support-page-wrapper .support-resources-card { min-height: auto !important; } } /* --------------------------------------------------------------------------------------------------------- 14. RESPONSIVE — MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .support-page-wrapper .support-resources-section { padding: 54px 0 62px 0 !important; } .support-page-wrapper .support-resources-inner { width: calc(100% - 36px) !important; } .support-page-wrapper .support-resources-header { max-width: 100% !important; margin-bottom: 24px !important; } .support-page-wrapper .support-resources-title, .support-page-wrapper .support-resources-title .elementor-heading-title { font-size: 34px !important; line-height: 1.12 !important; } .support-page-wrapper .support-resources-description, .support-page-wrapper .support-resources-description p { max-width: 100% !important; } .support-page-wrapper .support-resources-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .support-page-wrapper .support-resources-card { padding: 22px !important; } .support-page-wrapper .support-resources-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .support-page-wrapper .support-resources-category-item { min-height: 84px !important; } .support-page-wrapper .support-resources-cta { width: 100% !important; grid-template-columns: 42px minmax(0, 1fr) !important; row-gap: 16px !important; padding: 16px !important; } .support-page-wrapper .support-resources-cta-button { grid-column: 1 / -1 !important; width: 100% !important; } .support-page-wrapper .support-resources-cta-button a, .support-page-wrapper .support-resources-cta-button .elementor-button, .support-page-wrapper .support-resources-cta-button .elementor-button-link { width: 100% !important; } } /* ========================================================================================================= 第四屏结束 ========================================================================================================= */ /* ========================================================================================================= 第五屏开始 ========================================================================================================= */ /* ========================================================================================================= FIFTH SCREEN — DIRECT SUPPORT / CLEAN FINAL VERSION --------------------------------------------------------------------------------------------------------- Purpose: - Builds the direct support section. - Fixes channel icon background deformation. - Keeps channel cards clickable through internal HTML overlay links. - Uses Elementor's native Link field for the floating chat button and chat send icon. - Removes old pointer-events:none behavior from the floating button. - No JavaScript required. ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 01. SECTION BASE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-section { position: relative !important; width: 100% !important; padding: 20px 0 80px 0 !important; overflow: hidden !important; background: radial-gradient(circle at 8% 18%, rgba(215, 25, 32, 0.040) 0%, transparent 34%), radial-gradient(circle at 92% 60%, rgba(20, 28, 40, 0.030) 0%, transparent 40%), linear-gradient(180deg, #ffffff 0%, #fbfbfc 56%, #ffffff 100%) !important; border-bottom: 1px solid rgba(20, 28, 40, 0.07) !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-section::before { content: "" !important; position: absolute !important; left: -180px !important; top: -180px !important; width: 520px !important; height: 520px !important; border-radius: 50% !important; background: repeating-radial-gradient( circle, rgba(215, 25, 32, 0.050) 0 1px, transparent 1px 18px ) !important; opacity: 0.82 !important; pointer-events: none !important; } .support-page-wrapper .support-direct-section::after { content: "" !important; position: absolute !important; right: 7% !important; bottom: 42px !important; width: 96px !important; height: 96px !important; background: radial-gradient(circle, rgba(215, 25, 32, 0.18) 0 2px, transparent 2.4px) 0 0 / 18px 18px !important; opacity: 0.62 !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 02. INNER --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-inner { position: relative !important; z-index: 5 !important; width: min(92vw, 1320px) !important; margin: 0 auto !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 03. MAIN CARD --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-card { position: relative !important; width: 100% !important; display: grid !important; grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.28fr) minmax(280px, 0.82fr) !important; align-items: stretch !important; min-height: 370px !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 22px !important; background: rgba(255, 255, 255, 0.82) !important; box-shadow: 0 24px 60px rgba(20, 28, 40, 0.080), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; backdrop-filter: blur(12px) saturate(125%) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; overflow: visible !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 04. LEFT IMAGE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-media { position: relative !important; min-height: 370px !important; height: 100% !important; border-radius: 22px 0 0 22px !important; overflow: hidden !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-photo, .support-page-wrapper .support-direct-photo .elementor-widget-container, .support-page-wrapper .support-direct-photo figure { width: 100% !important; height: 100% !important; margin: 0 !important; display: block !important; } .support-page-wrapper .support-direct-photo img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } .support-page-wrapper .support-direct-media::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 100%) !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 05. MIDDLE CONTENT --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-content { min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 38px 42px !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-eyebrow, .support-page-wrapper .support-direct-eyebrow .elementor-heading-title { position: relative !important; margin: 0 0 24px 0 !important; color: #d71920 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } .support-page-wrapper .support-direct-eyebrow::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: -13px !important; width: 28px !important; height: 2px !important; border-radius: 999px !important; background: #d71920 !important; } .support-page-wrapper .support-direct-title, .support-page-wrapper .support-direct-title .elementor-heading-title { max-width: 540px !important; margin: 0 !important; color: #111820 !important; font-size: clamp(42px, 3.2vw, 56px) !important; line-height: 1.06 !important; font-weight: 900 !important; letter-spacing: -1.8px !important; } .support-page-wrapper .support-direct-description, .support-page-wrapper .support-direct-description p { max-width: 560px !important; margin: 15px 0 0 0 !important; color: rgba(18, 24, 32, 0.66) !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 06. CONTACT CHANNELS --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-channels { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 28px !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-channel-item { position: relative !important; min-width: 0 !important; padding: 0 10px !important; cursor: pointer !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-channel-item:first-child { padding-left: 0 !important; } .support-page-wrapper .support-direct-channel-item:not(:last-child)::after { content: "" !important; position: absolute !important; right: 15px !important; top: 8px !important; bottom: 4px !important; width: 1px !important; background: rgba(20, 28, 40, 0.10) !important; pointer-events: none !important; } /* Channel icon: Background is applied to the outer visual box only. The inner .elementor-icon must stay transparent to avoid double-background deformation. */ .support-page-wrapper .support-direct-channel-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 14px !important; background: rgba(215, 25, 32, 0.070) !important; color: #d71920 !important; box-sizing: border-box !important; transition: background 0.22s ease, transform 0.22s ease !important; } .support-page-wrapper .support-direct-channel-icon .elementor-widget-container, .support-page-wrapper .support-direct-channel-icon .elementor-icon-wrapper { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-channel-icon .elementor-icon { width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; color: currentColor !important; fill: currentColor !important; } .support-page-wrapper .support-direct-channel-icon i, .support-page-wrapper .support-direct-channel-icon svg { width: 22px !important; height: 22px !important; font-size: 22px !important; color: currentColor !important; fill: currentColor !important; } .support-page-wrapper .support-direct-channel-item:hover .support-direct-channel-icon { background: rgba(215, 25, 32, 0.12) !important; transform: translateY(-1px) !important; } .support-page-wrapper .support-direct-channel-item:hover .support-direct-channel-icon .elementor-icon { background: transparent !important; transform: none !important; } .support-page-wrapper .support-direct-channel-title, .support-page-wrapper .support-direct-channel-title .elementor-heading-title { margin: 14px 0 0 0 !important; color: #111820 !important; font-size: 16px !important; line-height: 1.22 !important; font-weight: 850 !important; letter-spacing: -0.2px !important; transition: color 0.22s ease !important; } .support-page-wrapper .support-direct-channel-item:hover .support-direct-channel-title, .support-page-wrapper .support-direct-channel-item:hover .support-direct-channel-title .elementor-heading-title { color: #d71920 !important; } .support-page-wrapper .support-direct-channel-text, .support-page-wrapper .support-direct-channel-text p { margin: 7px 0 0 0 !important; color: rgba(18, 24, 32, 0.62) !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 07. CHANNEL CLICKABLE LINKS --------------------------------------------------------------------------------------------------------- Usage: - Add an HTML widget inside each channel item. - HTML example: --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-channel-item .elementor-widget-html { position: absolute !important; inset: -8px !important; z-index: 20 !important; width: calc(100% + 16px) !important; height: calc(100% + 16px) !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-channel-item .elementor-widget-html .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .support-page-wrapper .support-direct-cover-link { position: absolute !important; inset: 0 !important; z-index: 21 !important; display: block !important; width: 100% !important; height: 100% !important; border-radius: 14px !important; background: transparent !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; } .support-page-wrapper .support-direct-channel-item > :not(.elementor-widget-html):not(.support-direct-cover-link) { position: relative !important; z-index: 2 !important; } /* --------------------------------------------------------------------------------------------------------- 08. ACTION BUTTONS --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 18px !important; margin-top: 28px !important; } .support-page-wrapper .support-direct-actions > *, .support-page-wrapper .support-direct-actions .elementor-widget-button, .support-page-wrapper .support-direct-actions .elementor-widget-container, .support-page-wrapper .support-direct-actions .elementor-button-wrapper { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; } .support-page-wrapper .support-direct-actions a, .support-page-wrapper .support-direct-actions button, .support-page-wrapper .support-direct-actions .elementor-button, .support-page-wrapper .support-direct-actions .elementor-button-link, .support-page-wrapper a.support-direct-primary-button, .support-page-wrapper a.support-direct-secondary-button, .support-page-wrapper button.support-direct-primary-button, .support-page-wrapper button.support-direct-secondary-button, .support-page-wrapper .elementor-button.support-direct-primary-button, .support-page-wrapper .elementor-button.support-direct-secondary-button, .support-page-wrapper .elementor-button-link.support-direct-primary-button, .support-page-wrapper .elementor-button-link.support-direct-secondary-button { min-height: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 26px !important; border-radius: 9px !important; background-image: none !important; box-shadow: none !important; font-size: 14px !important; line-height: 1 !important; font-weight: 850 !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; box-sizing: border-box !important; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important; } .support-page-wrapper .support-direct-primary-button a, .support-page-wrapper .support-direct-primary-button button, .support-page-wrapper .support-direct-primary-button .elementor-button, .support-page-wrapper .support-direct-primary-button .elementor-button-link, .support-page-wrapper a.support-direct-primary-button, .support-page-wrapper button.support-direct-primary-button, .support-page-wrapper .elementor-button.support-direct-primary-button, .support-page-wrapper .elementor-button-link.support-direct-primary-button, .support-page-wrapper .support-direct-actions > *:first-child a, .support-page-wrapper .support-direct-actions > *:first-child button, .support-page-wrapper .support-direct-actions > *:first-child .elementor-button, .support-page-wrapper .support-direct-actions > *:first-child .elementor-button-link { border: 1px solid transparent !important; background: #d71920 !important; background-color: #d71920 !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 14px 26px rgba(215, 25, 32, 0.24) !important; } .support-page-wrapper .support-direct-secondary-button a, .support-page-wrapper .support-direct-secondary-button button, .support-page-wrapper .support-direct-secondary-button .elementor-button, .support-page-wrapper .support-direct-secondary-button .elementor-button-link, .support-page-wrapper a.support-direct-secondary-button, .support-page-wrapper button.support-direct-secondary-button, .support-page-wrapper .elementor-button.support-direct-secondary-button, .support-page-wrapper .elementor-button-link.support-direct-secondary-button, .support-page-wrapper .support-direct-actions > *:nth-child(2) a, .support-page-wrapper .support-direct-actions > *:nth-child(2) button, .support-page-wrapper .support-direct-actions > *:nth-child(2) .elementor-button, .support-page-wrapper .support-direct-actions > *:nth-child(2) .elementor-button-link { border: 1px solid rgba(20, 28, 40, 0.14) !important; background: rgba(255, 255, 255, 0.78) !important; background-color: rgba(255, 255, 255, 0.78) !important; background-image: none !important; color: #111820 !important; box-shadow: 0 10px 24px rgba(20, 28, 40, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; } .support-page-wrapper .support-direct-actions .elementor-button-content-wrapper, .support-page-wrapper .support-direct-actions .elementor-button-text { color: currentColor !important; } .support-page-wrapper .support-direct-actions .elementor-button-text::after { content: "→" !important; display: inline-block !important; margin-left: 12px !important; color: currentColor !important; transition: transform 0.22s ease !important; } .support-page-wrapper .support-direct-primary-button:hover a, .support-page-wrapper .support-direct-primary-button:hover button, .support-page-wrapper .support-direct-primary-button:hover .elementor-button, .support-page-wrapper .support-direct-primary-button:hover .elementor-button-link, .support-page-wrapper .support-direct-actions > *:first-child:hover a, .support-page-wrapper .support-direct-actions > *:first-child:hover button, .support-page-wrapper .support-direct-actions > *:first-child:hover .elementor-button, .support-page-wrapper .support-direct-actions > *:first-child:hover .elementor-button-link { background: #b91117 !important; background-color: #b91117 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 17px 32px rgba(215, 25, 32, 0.30) !important; } .support-page-wrapper .support-direct-secondary-button:hover a, .support-page-wrapper .support-direct-secondary-button:hover button, .support-page-wrapper .support-direct-secondary-button:hover .elementor-button, .support-page-wrapper .support-direct-secondary-button:hover .elementor-button-link, .support-page-wrapper .support-direct-actions > *:nth-child(2):hover a, .support-page-wrapper .support-direct-actions > *:nth-child(2):hover button, .support-page-wrapper .support-direct-actions > *:nth-child(2):hover .elementor-button, .support-page-wrapper .support-direct-actions > *:nth-child(2):hover .elementor-button-link { border-color: rgba(215, 25, 32, 0.32) !important; background: rgba(255, 255, 255, 0.88) !important; background-color: rgba(255, 255, 255, 0.88) !important; color: #d71920 !important; transform: translateY(-1px) !important; } .support-page-wrapper .support-direct-actions > *:hover .elementor-button-text::after { transform: translateX(3px) !important; } /* --------------------------------------------------------------------------------------------------------- 09. NOTE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-note { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-top: 18px !important; color: rgba(18, 24, 32, 0.56) !important; } .support-page-wrapper .support-direct-note-icon, .support-page-wrapper .support-direct-note-icon .elementor-icon { color: rgba(18, 24, 32, 0.52) !important; } .support-page-wrapper .support-direct-note-icon .elementor-icon, .support-page-wrapper .support-direct-note-icon i, .support-page-wrapper .support-direct-note-icon svg { width: 17px !important; height: 17px !important; font-size: 17px !important; color: rgba(18, 24, 32, 0.52) !important; fill: rgba(18, 24, 32, 0.52) !important; } .support-page-wrapper .support-direct-note-text, .support-page-wrapper .support-direct-note-text p { margin: 0 !important; color: currentColor !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 10. RIGHT CHAT PANEL --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-chat-panel { min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 34px 38px 34px 0 !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-chat-card { width: 100% !important; max-width: 300px !important; display: flex !important; flex-direction: column !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.82) !important; box-shadow: 0 18px 42px rgba(20, 28, 40, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; overflow: hidden !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-chat-header { min-height: 60px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 18px !important; border-bottom: 1px solid rgba(20, 28, 40, 0.08) !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-chat-header-left { display: inline-flex !important; align-items: center !important; gap: 14px !important; } .support-page-wrapper .support-direct-chat-header-icon, .support-page-wrapper .support-direct-chat-header-icon .elementor-icon { color: #d71920 !important; } .support-page-wrapper .support-direct-chat-header-icon .elementor-icon, .support-page-wrapper .support-direct-chat-header-icon i, .support-page-wrapper .support-direct-chat-header-icon svg { width: 26px !important; height: 26px !important; font-size: 26px !important; color: #d71920 !important; fill: #d71920 !important; } .support-page-wrapper .support-direct-chat-title, .support-page-wrapper .support-direct-chat-title .elementor-heading-title { margin: 0 !important; color: #111820 !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 850 !important; } .support-page-wrapper .support-direct-chat-status, .support-page-wrapper .support-direct-chat-status p { position: relative !important; margin: 4px 0 0 0 !important; padding-left: 13px !important; color: rgba(18, 24, 32, 0.58) !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 500 !important; } .support-page-wrapper .support-direct-chat-status::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #17c964 !important; transform: translateY(-50%) !important; } .support-page-wrapper .support-direct-chat-more, .support-page-wrapper .support-direct-chat-more .elementor-heading-title { margin: 0 !important; color: rgba(18, 24, 32, 0.42) !important; font-size: 20px !important; line-height: 1 !important; font-weight: 800 !important; } /* --------------------------------------------------------------------------------------------------------- 11. CHAT BODY --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-chat-body { display: flex !important; flex-direction: column !important; padding: 18px 18px 14px 18px !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-message { max-width: 78% !important; padding: 11px 13px !important; border-radius: 12px !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-message-agent { align-self: flex-start !important; background: rgba(20, 28, 40, 0.045) !important; color: #111820 !important; } .support-page-wrapper .support-direct-message-user { align-self: flex-end !important; background: rgba(215, 25, 32, 0.075) !important; color: #111820 !important; } .support-page-wrapper .support-direct-message-label, .support-page-wrapper .support-direct-message-label p { margin: 0 0 6px 0 !important; color: #d71920 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; } .support-page-wrapper .support-direct-message-text, .support-page-wrapper .support-direct-message-text p { margin: 0 !important; color: currentColor !important; font-size: 13.5px !important; line-height: 1.46 !important; font-weight: 500 !important; } .support-page-wrapper .support-direct-chat-time, .support-page-wrapper .support-direct-chat-time p { margin: 9px 0 16px 0 !important; color: rgba(18, 24, 32, 0.42) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; } .support-page-wrapper .support-direct-chat-time-left, .support-page-wrapper .support-direct-chat-time-left p { align-self: flex-start !important; } .support-page-wrapper .support-direct-chat-time-right, .support-page-wrapper .support-direct-chat-time-right p { align-self: flex-end !important; } /* --------------------------------------------------------------------------------------------------------- 12. CHAT INPUT --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-chat-input { position: relative !important; min-height: 42px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 18px 18px 18px !important; padding: 0 10px 0 16px !important; border: 1px solid rgba(20, 28, 40, 0.10) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.76) !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-chat-placeholder, .support-page-wrapper .support-direct-chat-placeholder p { margin: 0 !important; color: rgba(18, 24, 32, 0.46) !important; font-size: 13.5px !important; line-height: 1 !important; font-weight: 500 !important; } .support-page-wrapper .support-direct-chat-send, .support-page-wrapper .support-direct-chat-send a, .support-page-wrapper .support-direct-chat-send .elementor-icon-wrapper, .support-page-wrapper .support-direct-chat-send .elementor-icon { width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 9px !important; background: #d71920 !important; color: #ffffff !important; text-decoration: none !important; cursor: pointer !important; box-sizing: border-box !important; transition: background 0.22s ease, transform 0.22s ease !important; } .support-page-wrapper .support-direct-chat-send:hover, .support-page-wrapper .support-direct-chat-send:hover a, .support-page-wrapper .support-direct-chat-send:hover .elementor-icon { background: #b91117 !important; transform: translateY(-1px) !important; } .support-page-wrapper .support-direct-chat-send i, .support-page-wrapper .support-direct-chat-send svg { width: 17px !important; height: 17px !important; font-size: 17px !important; color: #ffffff !important; fill: #ffffff !important; } /* --------------------------------------------------------------------------------------------------------- 13. FLOATING CHAT BUTTON --------------------------------------------------------------------------------------------------------- Important: - Floating Chat Button uses Elementor native Link field. - Do NOT add support-direct-floating-link overlay anymore. - Set Link in Elementor: /support/contact/#live-chat --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-direct-floating-button { position: absolute !important; right: -28px !important; bottom: 8px !important; z-index: 40 !important; width: 72px !important; height: 72px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: #d71920 !important; color: #ffffff !important; box-shadow: 0 22px 42px rgba(215, 25, 32, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; cursor: pointer !important; pointer-events: auto !important; transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease !important; } .support-page-wrapper .support-direct-floating-button:hover { background: #b91117 !important; transform: translateY(-2px) !important; box-shadow: 0 26px 48px rgba(215, 25, 32, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important; } .support-page-wrapper .support-direct-floating-button .elementor-widget-container, .support-page-wrapper .support-direct-floating-button .elementor-icon-wrapper { width: 100% !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: transparent !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-floating-button a, .support-page-wrapper .support-direct-floating-button .elementor-icon { width: 100% !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: transparent !important; color: #ffffff !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; box-sizing: border-box !important; } .support-page-wrapper .support-direct-floating-button i, .support-page-wrapper .support-direct-floating-button svg { width: 30px !important; height: 30px !important; font-size: 30px !important; color: #ffffff !important; fill: #ffffff !important; } /* --------------------------------------------------------------------------------------------------------- 14. RESPONSIVE — TABLET --------------------------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { .support-page-wrapper .support-direct-card { grid-template-columns: 0.9fr 1.1fr !important; } .support-page-wrapper .support-direct-chat-panel { grid-column: 1 / -1 !important; padding: 0 36px 40px 36px !important; } .support-page-wrapper .support-direct-chat-card { max-width: 520px !important; } .support-page-wrapper .support-direct-content { padding: 48px 40px !important; } } /* --------------------------------------------------------------------------------------------------------- 15. RESPONSIVE — MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .support-page-wrapper .support-direct-section { padding: 58px 0 70px 0 !important; } .support-page-wrapper .support-direct-inner { width: calc(100% - 36px) !important; } .support-page-wrapper .support-direct-card { display: flex !important; flex-direction: column !important; min-height: 0 !important; border-radius: 18px !important; } .support-page-wrapper .support-direct-media { min-height: 260px !important; border-radius: 18px 18px 0 0 !important; } .support-page-wrapper .support-direct-content { padding: 34px 24px !important; } .support-page-wrapper .support-direct-title, .support-page-wrapper .support-direct-title .elementor-heading-title { font-size: 34px !important; line-height: 1.12 !important; } .support-page-wrapper .support-direct-description, .support-page-wrapper .support-direct-description p { font-size: 14.5px !important; } .support-page-wrapper .support-direct-channels { grid-template-columns: 1fr !important; gap: 18px !important; margin-top: 30px !important; } .support-page-wrapper .support-direct-channel-item { padding: 0 !important; } .support-page-wrapper .support-direct-channel-item::after { display: none !important; } .support-page-wrapper .support-direct-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .support-page-wrapper .support-direct-primary-button, .support-page-wrapper .support-direct-secondary-button, .support-page-wrapper .support-direct-primary-button a, .support-page-wrapper .support-direct-primary-button button, .support-page-wrapper .support-direct-primary-button .elementor-button, .support-page-wrapper .support-direct-primary-button .elementor-button-link, .support-page-wrapper .support-direct-secondary-button a, .support-page-wrapper .support-direct-secondary-button button, .support-page-wrapper .support-direct-secondary-button .elementor-button, .support-page-wrapper .support-direct-secondary-button .elementor-button-link { width: 100% !important; } .support-page-wrapper .support-direct-chat-panel { padding: 0 24px 34px 24px !important; } .support-page-wrapper .support-direct-chat-card { max-width: 100% !important; } .support-page-wrapper .support-direct-floating-button { right: 18px !important; bottom: -34px !important; width: 62px !important; height: 62px !important; } .support-page-wrapper .support-direct-floating-button i, .support-page-wrapper .support-direct-floating-button svg { width: 26px !important; height: 26px !important; font-size: 26px !important; } } /* ========================================================================================================= 第五屏结束 ========================================================================================================= */ /* ========================================================================================================= footer 开始 ========================================================================================================= */ /* ========================================================================================================= FOOTER — BALANCED FINAL VERSION --------------------------------------------------------------------------------------------------------- Purpose: - Balanced footer version for the Support page. - Not too tall, not over-compressed. - Overrides global footer styles. - Use this as the ONLY footer CSS block. ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 01. FOOTER SECTION --------------------------------------------------------------------------------------------------------- */ body .support-footer-section { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #050608 !important; overflow: hidden !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 02. FOOTER MAIN --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-main { position: relative !important; width: 100% !important; margin: 0 !important; padding: 46px 0 0 0 !important; background: radial-gradient(circle at 78% 18%, rgba(215, 25, 32, 0.13) 0%, transparent 34%), linear-gradient(180deg, #0b0d12 0%, #06070a 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; box-sizing: border-box !important; } body .support-footer-section .support-footer-main::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 90deg, rgba(8, 10, 14, 0.86) 0%, rgba(8, 10, 14, 0.62) 48%, rgba(8, 10, 14, 0.88) 100% ) !important; pointer-events: none !important; } body .support-footer-section .support-footer-main::after { content: "" !important; position: absolute !important; right: 8% !important; top: -130px !important; z-index: 1 !important; width: 380px !important; height: 380px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(215, 25, 32, 0.13) 0%, transparent 64%) !important; pointer-events: none !important; } /* --------------------------------------------------------------------------------------------------------- 03. FOOTER COLUMNS --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-columns { position: relative !important; z-index: 5 !important; width: min(92vw, 1320px) !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 0 40px 0 !important; display: grid !important; grid-template-columns: minmax(300px, 1.35fr) minmax(150px, 0.72fr) minmax(150px, 0.72fr) minmax(240px, 0.9fr) !important; column-gap: 68px !important; row-gap: 0 !important; align-items: flex-start !important; box-sizing: border-box !important; } body .support-footer-section .support-footer-brand, body .support-footer-section .support-footer-column, body .support-footer-section .support-footer-products-column, body .support-footer-section .support-footer-company-column, body .support-footer-section .support-footer-contact-column { min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------------------------------------------------------- 04. BRAND AREA --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-logo { margin: 0 !important; padding: 0 !important; } body .support-footer-section .support-footer-logo img { display: block !important; width: 175px !important; max-width: 100% !important; height: auto !important; margin: 0 !important; } body .support-footer-section .support-footer-description, body .support-footer-section .support-footer-description p { max-width: 405px !important; margin: 24px 0 0 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.62) !important; font-size: 14px !important; line-height: 1.72 !important; font-weight: 500 !important; } /* --------------------------------------------------------------------------------------------------------- 05. SOCIAL ICONS --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-socials { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: auto !important; margin: 24px 0 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } body .support-footer-section .support-footer-social-icon { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .support-footer-section .support-footer-social-icon .elementor-icon { width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.065) !important; color: rgba(255, 255, 255, 0.72) !important; fill: rgba(255, 255, 255, 0.72) !important; transition: background 0.22s ease, color 0.22s ease, fill 0.22s ease, transform 0.22s ease !important; } body .support-footer-section .support-footer-social-icon .elementor-icon i, body .support-footer-section .support-footer-social-icon .elementor-icon svg { width: 16px !important; height: 16px !important; font-size: 16px !important; color: currentColor !important; fill: currentColor !important; } body .support-footer-section .support-footer-social-icon .elementor-icon:hover { background: #d71920 !important; color: #ffffff !important; fill: #ffffff !important; transform: translateY(-2px) !important; } /* --------------------------------------------------------------------------------------------------------- 06. COLUMN HEADINGS --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-heading, body .support-footer-section .support-footer-heading .elementor-heading-title { margin: 0 0 21px 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 17px !important; line-height: 1.2 !important; font-weight: 850 !important; letter-spacing: -0.2px !important; } /* --------------------------------------------------------------------------------------------------------- 07. LISTS --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-list, body .support-footer-section .support-footer-list ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } body .support-footer-section .support-footer-list li { margin: 0 0 12px 0 !important; padding: 0 !important; } body .support-footer-section .support-footer-list li, body .support-footer-section .support-footer-list a, body .support-footer-section .support-footer-list .elementor-icon-list-text { color: rgba(255, 255, 255, 0.60) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.22s ease !important; } body .support-footer-section .support-footer-list a:hover, body .support-footer-section .support-footer-list li:hover .elementor-icon-list-text { color: #ffffff !important; } /* Contact list icons */ body .support-footer-section .support-footer-contact-list .elementor-icon-list-icon, body .support-footer-section .support-footer-contact-list .elementor-icon-list-icon i, body .support-footer-section .support-footer-contact-list .elementor-icon-list-icon svg { color: #d71920 !important; fill: #d71920 !important; } body .support-footer-section .support-footer-contact-list .elementor-icon-list-icon { margin-right: 12px !important; } /* --------------------------------------------------------------------------------------------------------- 08. CONTACT BUTTON --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-contact-button { margin-top: 24px !important; } body .support-footer-section .support-footer-contact-button .elementor-button, body .support-footer-section .support-footer-contact-button .elementor-button-link, body .support-footer-section .support-footer-contact-button a, body .support-footer-section a.support-footer-contact-button, body .support-footer-section .elementor-button.support-footer-contact-button, body .support-footer-section .elementor-button-link.support-footer-contact-button { min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 24px !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important; background-image: none !important; color: #ffffff !important; box-shadow: none !important; font-size: 14px !important; line-height: 1 !important; font-weight: 800 !important; text-decoration: none !important; white-space: nowrap !important; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease !important; } body .support-footer-section .support-footer-contact-button .elementor-button:hover, body .support-footer-section .support-footer-contact-button .elementor-button-link:hover, body .support-footer-section .support-footer-contact-button a:hover { border-color: #d71920 !important; background: #d71920 !important; background-color: #d71920 !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* --------------------------------------------------------------------------------------------------------- 09. FOOTER BOTTOM --------------------------------------------------------------------------------------------------------- */ body .support-footer-section .support-footer-bottom { position: relative !important; z-index: 5 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.09) !important; background: rgba(0, 0, 0, 0.28) !important; box-sizing: border-box !important; } body .support-footer-section .support-footer-bottom-inner { width: min(92vw, 1320px) !important; max-width: 1320px !important; margin: 0 auto !important; min-height: 64px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; box-sizing: border-box !important; } body .support-footer-section .support-footer-copyright, body .support-footer-section .support-footer-copyright p { margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.44) !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; } body .support-footer-section .support-footer-legal-links { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; } body .support-footer-section .support-footer-legal-link, body .support-footer-section .support-footer-legal-link a, body .support-footer-section .support-footer-legal-link .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.48) !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.22s ease !important; } body .support-footer-section .support-footer-legal-link:hover, body .support-footer-section .support-footer-legal-link a:hover, body .support-footer-section .support-footer-legal-link:hover .elementor-heading-title { color: #ffffff !important; } /* --------------------------------------------------------------------------------------------------------- 10. TABLET --------------------------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { body .support-footer-section .support-footer-columns { grid-template-columns: 1.2fr 1fr 1fr !important; row-gap: 42px !important; } body .support-footer-section .support-footer-brand { grid-column: 1 / -1 !important; } } /* --------------------------------------------------------------------------------------------------------- 11. MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { body .support-footer-section .support-footer-main { padding-top: 42px !important; } body .support-footer-section .support-footer-columns { width: calc(100% - 36px) !important; grid-template-columns: 1fr !important; row-gap: 34px !important; padding-bottom: 34px !important; } body .support-footer-section .support-footer-logo img { width: 170px !important; } body .support-footer-section .support-footer-description, body .support-footer-section .support-footer-description p { max-width: 100% !important; } body .support-footer-section .support-footer-bottom-inner { width: calc(100% - 36px) !important; min-height: auto !important; padding: 22px 0 !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } body .support-footer-section .support-footer-legal-links { flex-wrap: wrap !important; gap: 14px 22px !important; } } /* ========================================================================================================= footer 结束 ========================================================================================================= */ /* ========================================================================================================= YUBEEN UI ICON NORMALIZATION — SUPPORT PAGE Replace Unicode pseudo-element arrows with deterministic bundled SVG masks. ========================================================================================================= */ .support-page-wrapper .support-service-pane-link .elementor-button::after, .support-page-wrapper .support-service-pane-link .elementor-button-link::after, .support-page-wrapper .support-service-pane-link a::after, .support-page-wrapper a.support-service-pane-link::after, .support-page-wrapper button.support-service-pane-link::after, .support-page-wrapper .elementor-button.support-service-pane-link::after, .support-page-wrapper .elementor-button-link.support-service-pane-link::after, .support-page-wrapper .support-resources-faq-link .elementor-button::after, .support-page-wrapper .support-resources-faq-link .elementor-button-link::after, .support-page-wrapper .support-resources-faq-link a::after, .support-page-wrapper a.support-resources-faq-link::after, .support-page-wrapper .support-resources-cta-button .elementor-button::after, .support-page-wrapper .support-resources-cta-button .elementor-button-link::after, .support-page-wrapper .support-resources-cta-button a::after, .support-page-wrapper .elementor-button.support-resources-cta-button::after, .support-page-wrapper .elementor-button-link.support-resources-cta-button::after, .support-page-wrapper a.support-resources-cta-button::after, .support-page-wrapper .support-direct-actions .elementor-button-text::after { content: "" !important; width: 0.95em !important; height: 0.95em !important; background-color: currentColor !important; -webkit-mask: url("../../icons/arrow-right.svg") center / contain no-repeat !important; mask: url("../../icons/arrow-right.svg") center / contain no-repeat !important; font-size: 1em !important; } .support-page-wrapper .support-resources-featured-item::after { content: "" !important; background-color: currentColor !important; -webkit-mask: url("../../icons/chevron-right.svg") center / contain no-repeat !important; mask: url("../../icons/chevron-right.svg") center / contain no-repeat !important; } /* ========================================================================================================= Stage 3X — Support hero tablet/mobile corrective Goal: - remove the duplicated three-card trust stack from narrow layouts; - keep CTA alignment centered; - keep the visual/image frame centred and uncropped; - prevent overlay cards from drifting across the hero on tablet/mobile. ========================================================================================================= */ @media (max-width: 900px) { .support-page-wrapper .support-hero-inner { width: min(calc(100% - 36px), 760px) !important; min-height: auto !important; padding: 42px 0 38px !important; gap: 22px !important; } .support-page-wrapper .support-hero-content { width: 100% !important; max-width: 720px !important; margin-inline: auto !important; align-items: center !important; text-align: center !important; } .support-page-wrapper .support-hero-actions, .support-page-wrapper .support-hero-button-group { width: 100% !important; max-width: 680px !important; margin-inline: auto !important; align-items: center !important; justify-content: center !important; } /* * This row repeats the same reassurance language that is already carried * by the visual/support cards. On narrow screens it creates a tall, * off-balance stack, so hide the whole row rather than only its icons. */ .support-page-wrapper .support-hero-trust-row { display: none !important; } .support-page-wrapper .support-hero-visual { width: 100% !important; min-height: 430px !important; margin: 0 auto !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } .support-page-wrapper .support-hero-tech-shape { width: 100% !important; max-width: 760px !important; height: 430px !important; margin: 0 auto !important; } .support-page-wrapper .support-hero-product-image img { object-fit: contain !important; object-position: center center !important; } .support-page-wrapper .support-hero-badge { top: 18px !important; right: 18px !important; left: auto !important; width: min(250px, calc(100% - 36px)) !important; } /* * The lower overlay feature row is visually secondary and is the main * source of collisions with the image/frame on tablet/mobile. */ .support-page-wrapper .support-hero-feature-row { display: none !important; } } @media (max-width: 640px) { .support-page-wrapper .support-hero-inner { width: calc(100% - 28px) !important; padding: 34px 0 30px !important; gap: 18px !important; } .support-page-wrapper .support-hero-title, .support-page-wrapper .support-hero-title .elementor-heading-title { font-size: clamp(34px, 9.5vw, 42px) !important; line-height: 1.05 !important; } .support-page-wrapper .support-hero-description, .support-page-wrapper .support-hero-description p { max-width: 100% !important; } .support-page-wrapper .support-hero-button-group { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .support-page-wrapper .support-hero-button, .support-page-wrapper .support-hero-actions a { width: 100% !important; max-width: none !important; } .support-page-wrapper .support-hero-visual { min-height: 350px !important; } .support-page-wrapper .support-hero-tech-shape { height: 350px !important; } .support-page-wrapper .support-hero-badge { top: 14px !important; left: 14px !important; right: 14px !important; width: auto !important; } } /* ========================================================================================================= Stage 3X.2 — Support breadcrumb alignment corrective Keep the tablet/mobile hero centred, but align Home › Support to the left. ========================================================================================================= */ @media (max-width: 1180px) { .support-page-wrapper .support-hero-breadcrumb { align-self: stretch !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } .support-page-wrapper .support-hero-breadcrumb p, .support-page-wrapper .support-hero-breadcrumb .elementor-heading-title, .support-page-wrapper .support-hero-breadcrumb .elementor-widget-container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } } /* ========================================================================================================= SUPPORT HERO — FINAL LAYOUT Version: 2026-08-22-v8 Design state: - No hero image (image column hidden). - Main message centered. - Breadcrumb left-aligned. - Trust Row centered as a unit; each card keeps its own left-aligned internal text. - Single consolidated override — replaces v4 and v7. ========================================================================================================= */ /* Hero inner: single full-width column */ .support-page-wrapper .support-hero-inner { grid-template-columns: 1fr !important; min-height: auto !important; padding-top: 64px !important; padding-bottom: 84px !important; } /* Content column: centered, capped width */ .support-page-wrapper .support-hero-content { width: min(100%, 900px) !important; max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; align-items: center !important; text-align: center !important; min-height: auto !important; } /* Breadcrumb: left-aligned within the centered content column */ .support-page-wrapper .support-hero-breadcrumb, .support-page-wrapper .support-hero-breadcrumb p, .support-page-wrapper .support-hero-breadcrumb .elementor-heading-title, .support-page-wrapper .support-hero-breadcrumb .elementor-widget-container { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* Eyebrow, title, description: centered */ .support-page-wrapper .support-hero-eyebrow, .support-page-wrapper .support-hero-eyebrow .elementor-heading-title, .support-page-wrapper .support-hero-title, .support-page-wrapper .support-hero-title .elementor-heading-title, .support-page-wrapper .support-hero-description, .support-page-wrapper .support-hero-description p { width: 100% !important; text-align: center !important; } .support-page-wrapper .support-hero-title br { display: none !important; } .support-page-wrapper .support-hero-title, .support-page-wrapper .support-hero-title .elementor-heading-title { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; text-wrap: balance !important; } .support-page-wrapper .support-hero-description, .support-page-wrapper .support-hero-description p { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } /* Buttons: centered */ .support-page-wrapper .support-hero-actions, .support-page-wrapper .support-hero-button-group { width: 100% !important; justify-content: center !important; } /* ----------------------------------------------------------- Trust Row - The row itself is centered as a unit (margin: auto + fit-content). - Each trust-item keeps its internal grid (icon + title + text), so the two lines of text stay left-aligned inside their card. - Divider lines between cards via ::after remain unchanged. ----------------------------------------------------------- */ .support-page-wrapper .support-hero-trust-row { /* Center the block as a whole */ margin-left: auto !important; margin-right: auto !important; /* Let the row shrink-wrap to its content so auto margins work */ width: fit-content !important; max-width: 100% !important; /* Keep the existing 3-column grid and gaps from section 05 */ justify-content: center !important; } /* Each trust item: internal text stays left-aligned (already set in section 05, but restated here explicitly so future edits don't need to hunt for it). */ .support-page-wrapper .support-hero-trust-item { text-align: left !important; } .support-page-wrapper .support-hero-trust-title, .support-page-wrapper .support-hero-trust-title .elementor-heading-title, .support-page-wrapper .support-hero-trust-text, .support-page-wrapper .support-hero-trust-text p { text-align: left !important; } /* Image column: hidden in text-only layout */ .support-page-wrapper .support-hero-visual, .support-page-wrapper .support-hero-product-image, .support-page-wrapper .support-hero-tech-shape { display: none !important; } /* --------------------------------------------------------------------------------------------------------- Responsive overrides (replaces the v4 / v7 breakpoints) --------------------------------------------------------------------------------------------------------- */ @media (max-width: 900px) { .support-page-wrapper .support-hero-inner { padding-top: 44px !important; padding-bottom: 56px !important; } .support-page-wrapper .support-hero-trust-row { gap: 28px !important; } } @media (max-width: 640px) { .support-page-wrapper .support-hero-inner { padding-top: 34px !important; padding-bottom: 44px !important; } .support-page-wrapper .support-hero-content { width: calc(100% - 28px) !important; } .support-page-wrapper .support-hero-trust-row { grid-template-columns: 1fr !important; flex-direction: column !important; align-items: center !important; gap: 18px !important; } } /* ========================================================================================================= SUPPORT HERO H1 SEMANTIC COMPATIBILITY --------------------------------------------------------------------------------------------------------- Purpose: - Allows the existing Elementor Text Editor widget used by .support-hero-title to contain a semantic

. - Preserves the current visual design on desktop, tablet and mobile. - Does not require changing the Elementor widget type. - Keeps the current final centered hero-title layout. ========================================================================================================= */ /* --------------------------------------------------------------------------------------------------------- 01. DESKTOP / BASE --------------------------------------------------------------------------------------------------------- */ .support-page-wrapper .support-hero-title h1 { width: 100% !important; max-width: 900px !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding: 0 !important; color: #111820 !important; font-family: inherit !important; font-size: clamp(54px, 4.25vw, 72px) !important; line-height: 1.02 !important; font-weight: 900 !important; letter-spacing: -2.2px !important; text-align: center !important; text-wrap: balance !important; border: 0 !important; } /* Prevent WordPress / theme / Elementor heading defaults from adding unexpected spacing. */ .support-page-wrapper .support-hero-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* If a manual line break is ever inserted later, keep the current final-layout behavior. */ .support-page-wrapper .support-hero-title h1 br { display: none !important; } /* --------------------------------------------------------------------------------------------------------- 02. TABLET / MOBILE Matches the existing support.css responsive title behavior. --------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .support-page-wrapper .support-hero-title h1 { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -1.1px !important; } } /* --------------------------------------------------------------------------------------------------------- 03. SMALL MOBILE --------------------------------------------------------------------------------------------------------- */ @media (max-width: 640px) { .support-page-wrapper .support-hero-title h1 { font-size: clamp(34px, 9.5vw, 42px) !important; line-height: 1.05 !important; letter-spacing: -1.1px !important; } } /* ========================================================================================================= END — SUPPORT HERO H1 SEMANTIC COMPATIBILITY ========================================================================================================= */