/* site.css — Global styles (header/footer/floating/modal) + Design Tokens 说明：这是“全站通用美化”的核心文件。你后续想 DIY：只需要改 :root 里的变量，或改 body 的主题档位（density/vibe/scheme）。 */ :root{ /* ---------- Base colors ---------- */ --bg:#ffffff; --text:#0f172a; --muted:#64748b; --brand:#e0f2ff; --card:#ffffff; --border:rgba(15,23,42,.12); /* Accent (links / highlight) */ --accent:#1f6feb; --ring:rgba(31,111,235,.32); /* ---------- Shadows ---------- */ --shadow-sm:0 6px 18px rgba(2,6,23,.06); --shadow-md:0 10px 30px rgba(2,6,23,.12); --shadow-lg:0 24px 60px rgba(2,6,23,.22); /* Backwards-compat (older rules use --shadow) */ --shadow:var(--shadow-md); /* ---------- Radius ---------- */ --radius-sm:12px; --radius-md:14px; --radius-lg:18px; /* Backwards-compat */ --radius:var(--radius-md); /* ---------- Layout / readability ---------- */ --max:1200px; --content-max:980px; /* pages.css 的 page-narrow 宽度 */ --reading-max:900px; /* 你想让长文更窄时可用 */ --container-pad:18px; /* ---------- Spacing (density) ---------- */ --space-page-y:22px; --space-page-bottom:56px; --space-section:22px; --space-grid:14px; --space-card:16px; --space-hero:22px; /* ---------- Motion ---------- */ --motion-fast:160ms; --motion-med:260ms; --motion-slow:420ms; --ease-out:cubic-bezier(.2,.8,.2,1); /* ---------- Header ---------- */ --header-h:80px; --header-h-mobile:68px; /* ---------- Footer theme ---------- */ --footer-bg:#6b86a3; --footer-text:rgba(255,255,255,.92); --footer-muted:rgba(255,255,255,.78); --footer-line:rgba(255,255,255,.18); /* ---------- Floating + modal ---------- */ --float-bg:#0f172a; --float-fg:#ffffff; --overlay:rgba(2,6,23,.55); --cookie-offset:0px; } /* ====== Theme presets (你后续 DIY 的“换挡区”) ====== 使用方式：body 上加 class（或由 site.js 自动加默认值）例如：... */ /* 密度：紧凑 / 标准 / 宽松 */ body.density-compact{ --space-page-y:18px; --space-page-bottom:48px; --space-section:18px; --space-grid:12px; --space-card:14px; --space-hero:18px; } body.density-comfy{ --space-page-y:22px; --space-page-bottom:56px; --space-section:22px; --space-grid:14px; --space-card:16px; --space-hero:22px; } body.density-airy{ --space-page-y:30px; --space-page-bottom:72px; --space-section:30px; --space-grid:18px; --space-card:20px; --space-hero:26px; } /* 质感：利落 / 柔和 / 扁平 */ body.vibe-crisp{ --radius-lg:16px; --shadow-md:0 8px 24px rgba(2,6,23,.10); --shadow:var(--shadow-md); } body.vibe-soft{ --radius-lg:20px; --shadow-md:0 12px 34px rgba(2,6,23,.12); --shadow:var(--shadow-md); } body.vibe-flat{ --shadow-sm:0 0 0 rgba(0,0,0,0); --shadow-md:0 0 0 rgba(0,0,0,0); --shadow-lg:0 0 0 rgba(0,0,0,0); --shadow:var(--shadow-md); } /* 配色：天空蓝 / 薄荷绿 / 石板灰 */ body.scheme-sky{ --brand:#e0f2ff; --accent:#1f6feb; --ring:rgba(31,111,235,.32); } body.scheme-mint{ --brand:#e7f9f1; --accent:#0f766e; --ring:rgba(15,118,110,.30); } body.scheme-slate{ --brand:#eef2ff; --accent:#334155; --ring:rgba(51,65,85,.30); } @media (prefers-reduced-motion: reduce){ :root{ --motion-fast:1ms; --motion-med:1ms; --motion-slow:1ms; } } *{ box-sizing:border-box; } html,body{ height:100%; } /* Faster CN fonts (no webfonts): prefer local system CJK sans-serif */ html[lang^="zh"] body{ font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,sans-serif; } /* Fixed header: page content scrolls underneath, anchors keep space */ html{ scroll-padding-top: var(--header-h); } body{ margin:0; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); padding-top: var(--header-h); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } a:hover{ color:inherit; } button{ font:inherit; color:inherit; } :focus-visible{ outline:3px solid var(--ring); outline-offset:2px; } .container{ max-width:var(--max); margin:0 auto; padding:0 var(--container-pad); } .site-header{ position:fixed; top:0; left:0; right:0; width:100%; /* Above page content, below floating contact (1200) and modal overlay (1300) */ z-index:1100; border-bottom:0; background: radial-gradient(860px 260px at 8% -36%, rgba(14,165,233,.17), rgba(14,165,233,0) 66%), radial-gradient(860px 260px at 96% -28%, rgba(37,99,235,.14), rgba(37,99,235,0) 66%), transparent; padding:8px 0; } .header-row{ height:calc(var(--header-h) - 16px); min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:22px; border:1px solid rgba(15,23,42,.14); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,251,255,.94)); box-shadow:0 12px 30px rgba(15,23,42,.12); backdrop-filter:blur(8px); } .brand{ display:flex; align-items:center; gap:12px; min-width:220px; } .brand-mark{ width:44px; height:44px; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:#fff; border:1px solid rgba(15,23,42,.16); box-shadow:0 6px 14px rgba(2,6,23,.08); } .brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; } .brand-title{ display:flex; flex-direction:column; line-height:1.05; } .brand-title .cn{ font-weight:800; letter-spacing:.5px; font-size:18px; } .brand-title .en{ font-size:12px; color:rgba(15,23,42,.66); margin-top:4px; } /* Desktop nav */ .nav{ display:flex; align-items:center; gap:10px; flex:1; justify-content:center; } .nav-list{ list-style:none; margin:0; padding:7px 8px; display:flex; align-items:center; gap:8px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); } .nav-item{ position:relative; } .nav-item.has-dropdown::after{ content:""; position:absolute; left:0; top:100%; width:max(100%, 250px); height:14px; } .nav-link, .nav-btn{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid transparent; background:transparent; cursor:pointer; user-select:none; color:rgba(15,23,42,.88); font-size:14px; font-weight:640; transition: background var(--motion-med) var(--ease-out), border-color var(--motion-med) var(--ease-out), color var(--motion-med) var(--ease-out), box-shadow var(--motion-med) var(--ease-out), transform var(--motion-fast) var(--ease-out); } .nav-link:hover, .nav-btn:hover{ background:rgba(248,251,255,.88); border-color:rgba(37,99,235,.18); } .nav-item.is-open > .nav-btn{ border-color:rgba(37,99,235,.38); color:#1d4ed8; background:linear-gradient(150deg, rgba(219,234,254,.9), rgba(244,250,255,.95)); box-shadow:0 8px 18px rgba(37,99,235,.16); } .nav-link:active, .nav-btn:active{ transform: translateY(1px); } .caret{ width:10px;height:10px; display:inline-block; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; opacity:.72; } /* Dropdown (animated) */ .dropdown-panel{ position:absolute; left:0; top:calc(100% + 14px); min-width:250px; background:var(--card); border:1px solid rgba(15,23,42,.12); border-radius:18px; box-shadow:0 18px 32px rgba(15,23,42,.14); padding:10px; /* keep in DOM for animation */ display:block; opacity:0; visibility:hidden; pointer-events:none; transform: translateY(8px) scale(.98); transition: opacity var(--motion-med) var(--ease-out), transform var(--motion-med) var(--ease-out), visibility var(--motion-med) var(--ease-out); } .nav-item.is-open > .dropdown-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .dropdown-panel a{ display:flex; align-items:center; min-height:38px; padding:0 12px; border-radius:12px; color:var(--text); border:1px solid rgba(15,23,42,.08); background:linear-gradient(180deg, rgba(246,250,255,.86), rgba(255,255,255,.96)); transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); } .dropdown-panel a + a{ margin-top:6px; } .dropdown-panel a:hover{ background:linear-gradient(145deg, rgba(228,240,255,.88), rgba(247,252,255,.96)); border-color:rgba(37,99,235,.2); transform:translateY(-1px); } @media (hover: hover) and (pointer: fine){ .nav-item:hover > .dropdown-panel, .nav-item:focus-within > .dropdown-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .nav-item:hover > .nav-btn, .nav-item:focus-within > .nav-btn{ border-color:rgba(37,99,235,.38); color:#1d4ed8; background:linear-gradient(150deg, rgba(219,234,254,.9), rgba(244,250,255,.95)); box-shadow:0 8px 18px rgba(37,99,235,.16); } } /* Right side */ .header-right{ display:flex; align-items:center; gap:10px; min-width:220px; justify-content:flex-end; } .lang{ display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.12); border-radius:999px; padding:4px; } .lang a{ min-width:42px; min-height:30px; display:grid; place-items:center; padding:0 10px; border-radius:999px; font-size:12px; font-weight:650; color:rgba(15,23,42,.7); } .lang a.is-active{ background:linear-gradient(145deg, rgba(219,234,254,.9), rgba(245,250,255,.96)); border:1px solid rgba(37,99,235,.28); color:#1d4ed8; } .header-cta{ min-height:40px; padding:0 14px; border-radius:12px; border:1px solid rgba(29,78,216,.45); background:linear-gradient(154deg, #0ea5e9 0%, #2563eb 58%, #1d4ed8 100%); color:#fff; font-size:13px; font-weight:740; letter-spacing:.2px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(37,99,235,.24); transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out); } .header-cta:hover{ filter:brightness(1.03); box-shadow:0 12px 24px rgba(37,99,235,.28); transform:translateY(-1px); } /* Hamburger */ .hamburger{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid rgba(37,99,235,.24); background:linear-gradient(145deg, rgba(239,247,255,.94), rgba(255,255,255,.98)); box-shadow:0 6px 16px rgba(37,99,235,.12); cursor:pointer; transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .hamburger:hover{ border-color:rgba(37,99,235,.38); box-shadow:0 8px 18px rgba(37,99,235,.18); } .hamburger:active{ transform: translateY(1px); } .hamburger .bar{ width:18px; height:2px; background:rgba(30,64,175,.82); display:block; margin:4px auto; border-radius:999px; } /* Mobile nav drawer */ .mobile-drawer{ display:none; } .page-main{ min-height: calc(100vh - var(--header-h)); } /* ---------- Footer ---------- */ .site-footer{ background:var(--footer-bg); color:var(--footer-text); } .footer-wrap{ padding:44px 0 18px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap:32px; align-items:start; } .footer-title{ font-weight:800; letter-spacing:.4px; font-size:34px; margin:0 0 14px; } .footer-sub{ color:var(--footer-text); opacity:.9; margin:0 0 18px; line-height:1.6; max-width:34ch; } .footer-h{ font-size:16px; font-weight:800; margin:6px 0 14px; } .footer-lines{ display:flex; flex-direction:column; gap:10px; color:var(--footer-muted); line-height:1.6; } .footer-lines a{ color:var(--footer-text); text-decoration:none; border-bottom:1px solid transparent; } .footer-lines a:hover{ border-bottom-color:rgba(255,255,255,.4); } .social{ display:flex; gap:14px; margin-top:18px; } .social a{ width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.14); box-shadow:0 8px 18px rgba(2,6,23,.14); transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .social a:hover{ transform: translateY(-1px); background:#fff; border-color:rgba(30,64,175,.42); box-shadow:0 12px 22px rgba(30,64,175,.2); } .social svg{ width:22px; height:22px; fill:none; stroke:rgba(15,23,42,.9); stroke-width:2; } .social img{ width:22px; height:22px; object-fit:contain; display:block; } .footer-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; } .footer-links a{ font-size:13px; color:var(--footer-muted); border-bottom:1px solid transparent; } .footer-links a:hover{ color:var(--footer-text); border-bottom-color:rgba(255,255,255,.4); } .footer-bottom{ border-top:1px solid var(--footer-line); margin-top:26px; padding-top:14px; display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:space-between; align-items:center; color:rgba(255,255,255,.78); font-size:13px; } .footer-bottom .brand-note{ color:rgba(255,255,255,.78); } .footer-bottom .brand-note strong{ color:rgba(255,255,255,.92); font-weight:700; } /* ---------- Floating Contact ---------- */ .floating-contact{ position:fixed; right:16px; bottom:calc(16px + var(--cookie-offset)); z-index:1200; display:flex; flex-direction:column; align-items:flex-end; gap:0; } .float-panel{ position:absolute; right:0; bottom:100%; padding-bottom:10px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0,10px,0) scale(.97); transform-origin:bottom right; filter:saturate(.96); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms var(--ease-out), filter 220ms var(--ease-out); } .floating-contact.is-open .float-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; filter:none; } .float-item{ display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:0 14px; border-radius:999px; border:1px solid rgba(30,56,104,.17); background:rgba(255,255,255,.94); box-shadow:0 16px 36px rgba(20,46,87,.18); color:#16243c; cursor:pointer; user-select:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transform:translate3d(0,8px,0) scale(.96); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out); } .floating-contact.is-open .float-item{ opacity:1; transform:none; } .floating-contact.is-open .float-item:nth-child(1){ transition-delay:40ms; } .floating-contact.is-open .float-item:nth-child(2){ transition-delay:80ms; } .floating-contact.is-open .float-item:nth-child(3){ transition-delay:120ms; } .floating-contact.is-open .float-item:nth-child(4){ transition-delay:160ms; } .floating-contact.is-open .float-item:hover{ transform: translateY(-2px); box-shadow:0 20px 40px rgba(20,46,87,.22); } .floating-contact.is-open .float-item:active{ transform:translateY(0); } .float-item span{ font-size:12.5px; font-weight:600; color:currentColor; white-space:nowrap; } .float-item svg, .float-item .float-icon-image{ width:18px;height:18px; flex-shrink:0; display:block; } .float-item svg{ stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; fill:none; } .float-item .float-icon-fill{ fill:currentColor; stroke:none; } .float-item .float-icon-image{ object-fit:contain; } .float-item-top{ background:linear-gradient(135deg, #ebf8ff 0%, #dbf0ff 100%); border-color:rgba(17,120,163,.25); color:#115b8f; } .float-item-wa{ background:linear-gradient(135deg, #f1fff6 0%, #e9fbf1 100%); border-color:rgba(13,139,82,.25); color:#0d8b52; } .float-item-wechat{ background:linear-gradient(135deg, #eefdf4 0%, #e6faef 100%); border-color:rgba(17,140,75,.25); color:#118c4b; } .float-item-form{ background:linear-gradient(135deg, #f3f7ff 0%, #e8efff 100%); border-color:rgba(56,87,156,.22); color:#2f4f98; } .float-toggle{ position:relative; width:58px; height:58px; border-radius:18px; border:1px solid rgba(35,87,204,.36); background:linear-gradient(140deg, #2f6bff 0%, #2498ff 100%); color:#fff; box-shadow:0 20px 38px rgba(43,102,224,.42); cursor:pointer; display:grid; place-items:center; overflow:visible; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), filter 180ms var(--ease-out); } .float-toggle::before{ content:""; position:absolute; top:8px; left:14px; right:20px; bottom:26px; border-radius:10px; background:linear-gradient(130deg, rgba(255,255,255,.6), rgba(255,255,255,0)); transform:rotate(12deg); pointer-events:none; } .float-toggle::after{ content:""; position:absolute; inset:-7px; border-radius:24px; border:1px solid rgba(63,167,255,.42); opacity:.72; pointer-events:none; animation:dq-float-pulse 2.6s ease-out infinite; } .float-toggle:hover{ transform: translateY(-2px); box-shadow:0 24px 44px rgba(43,102,224,.48); } .float-toggle svg{ position:relative; z-index:1; width:24px;height:24px; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; transition:transform 180ms var(--ease-out); } .floating-contact.is-open .float-toggle{ transform: translateY(-1px) scale(1.03); box-shadow:0 26px 48px rgba(43,102,224,.5); } .floating-contact.is-open .float-toggle::after{ opacity:.96; } .floating-contact.is-open .float-toggle svg{ transform:rotate(45deg); } @keyframes dq-float-pulse{ 0%{ transform:scale(.95); opacity:.58; } 68%{ transform:scale(1.15); opacity:0; } 100%{ transform:scale(1.15); opacity:0; } } @media (prefers-reduced-motion: reduce){ .float-panel, .float-item, .float-toggle{ transition:none; } .float-toggle::after{ animation:none; } } /* ---------- Cookie Consent ---------- */ .cookie-consent{ position:fixed; left:14px; right:14px; bottom:14px; z-index:1180; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-radius:16px; border:1px solid rgba(148,163,184,.28); background:rgba(15,23,42,.92); box-shadow:0 16px 44px rgba(2,6,23,.34); color:rgba(248,250,252,.9); backdrop-filter: blur(8px); opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0, 10px, 0); transition: opacity var(--motion-med) var(--ease-out), transform var(--motion-med) var(--ease-out), visibility var(--motion-med) var(--ease-out); } .cookie-consent.is-visible{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .cookie-consent p{ margin:0; font-size:13px; line-height:1.6; } .cookie-consent a{ color:#93c5fd; text-decoration:underline; text-underline-offset:3px; } .cookie-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .cookie-btn{ height:38px; padding:0 14px; border-radius:12px; border:1px solid rgba(147,197,253,.42); background:linear-gradient(135deg, #1d4ed8, #0369a1); color:#fff; cursor:pointer; transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out); } .cookie-btn:hover{ filter:brightness(1.04); } .cookie-btn:active{ transform:translateY(1px); } /* ---------- Modal (WeChat + quick form) ---------- */ .modal-overlay{ position:fixed; inset:0; background:rgba(8,20,39,.42); z-index:1300; display:flex; align-items:center; justify-content:center; padding:16px; /* animated open/close */ opacity:0; visibility:hidden; pointer-events:none; transition: opacity var(--motion-med) var(--ease-out), visibility var(--motion-med) var(--ease-out); } .modal-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .modal{ width:min(560px, 100%); background:rgba(255,255,255,.96); border-radius:22px; border:1px solid rgba(26,53,101,.14); box-shadow:0 26px 56px rgba(14,36,74,.28); overflow:hidden; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transform:translateY(10px) scale(.98); transition: transform var(--motion-med) var(--ease-out); } .modal-overlay.is-open .modal{ transform:none; } .modal-head{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(28,50,93,.10); } .modal-head strong{ font-size:16px; letter-spacing:.2px; color:#1a2940; } .modal-close{ width:36px;height:36px; border-radius:12px; border:1px solid rgba(28,53,99,.14); background:rgba(244,248,255,.98); color:#2c436b; font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); } .modal-close:hover{ background:#edf4ff; transform:translateY(-1px); } .modal-body{ padding:16px; } .modal.modal-wechat{ width:min(470px, calc(100vw - 24px)); max-width:470px; } .modal.modal-wechat .modal-body{ padding:14px; } .modal.modal-quickform{ width:min(540px, calc(100vw - 24px)); max-width:540px; } .wechat-contact{ display:flex; flex-direction:column; gap:10px; } .wechat-hero{ border:1px solid rgba(20,134,76,.18); border-radius:16px; padding:14px; background:linear-gradient(140deg, #f2fff8 0%, #ebfcf2 100%); } .wechat-kicker, .wechat-lead{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 9px; border-radius:999px; border:1px solid rgba(15,141,82,.22); background:rgba(255,255,255,.86); font-size:11px; letter-spacing:.24px; font-weight:700; color:#0d7b47; } .wechat-title{ margin:10px 0 6px; font-size:18px; line-height:1.25; letter-spacing:.2px; color:#173054; } .wechat-desc{ margin:0 0 12px; font-size:13px; line-height:1.55; color:#3c5479; } .wechat-cta{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 14px; border-radius:12px; background:linear-gradient(140deg, #15a561 0%, #0f8d52 100%); color:#fff; font-size:13px; font-weight:700; border:1px solid rgba(14,110,66,.38); box-shadow:0 8px 18px rgba(15,141,82,.22); text-decoration:none; transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out); } .wechat-cta:hover{ filter:brightness(1.03); transform:translateY(-1px); } .wechat-platforms-wrap{ border:1px solid rgba(28,56,102,.12); border-radius:14px; background:#fff; padding:12px; } .wechat-platform-title{ margin-bottom:8px; font-size:12px; color:#5b6f8a; } .wechat-platforms{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .wechat-platform{ display:flex; align-items:center; gap:8px; min-height:88px; padding:8px; border-radius:12px; border:1px solid rgba(29,57,102,.14); background:linear-gradient(145deg, #f9fbff 0%, #f4f8ff 100%); color:inherit; text-decoration:none; transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); } .wechat-platform:hover{ transform:translateY(-1px); border-color:rgba(29,57,102,.26); box-shadow:0 10px 20px rgba(20,46,87,.12); } .wechat-platform img{ width:64px; height:64px; min-width:64px; max-width:64px; min-height:64px; max-height:64px; border-radius:9px; border:1px solid rgba(26,52,97,.16); background:#fff; display:block; flex-shrink:0; } .wechat-platform-copy{ display:block; } .wechat-platform-copy strong{ display:block; font-size:13px; color:#1f3354; font-weight:700; } .wechat-platform-copy span{ display:block; margin-top:2px; font-size:11px; color:#667a94; } .wechat-tip{ font-size:12px; color:#617693; } /* Form */ .form{ display:flex; flex-direction:column; gap:12px; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .field label{ display:block; font-size:12px; color:rgba(15,23,42,.72); margin:0 0 6px; } .field input, .field select, .field textarea{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.14); outline:none; background:#fff; transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .field input:focus, .field select:focus, .field textarea:focus{ border-color: rgba(31,111,235,.45); box-shadow: 0 0 0 4px rgba(31,111,235,.10); } .field textarea{ min-height:110px; resize:vertical; } .form-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:14px; border:1px solid rgba(15,23,42,.14); background:#0f172a; color:#fff; cursor:pointer; transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out); } .btn:hover{ filter: brightness(1.02); } .btn:active{ transform: translateY(1px); } .btn:disabled{ opacity:.7; cursor:not-allowed; } .form-note{ font-size:12px; color:rgba(15,23,42,.65); line-height:1.5; } .form-status{ font-size:13px; color:rgba(15,23,42,.82); } .form-status.ok{ color:#0f766e; } .form-status.err{ color:#b91c1c; } /* Modal-specific form redesign (kept scoped to avoid affecting page forms) */ .modal .modal-form{ display:flex; flex-direction:column; gap:10px; } .modal .modal-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .modal .modal-field label{ display:block; margin:0 0 6px; font-size:12px; color:#5a6f8b; } .modal .modal-field input, .modal .modal-field select, .modal .modal-field textarea{ width:100%; border-radius:12px; border:1px solid rgba(28,58,104,.15); background:rgba(255,255,255,.98); color:#1d2e48; font-size:13px; line-height:1.35; padding:10px 12px; outline:none; transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); } .modal .modal-field input:focus, .modal .modal-field select:focus, .modal .modal-field textarea:focus{ border-color:rgba(47,107,255,.44); box-shadow:0 0 0 4px rgba(47,107,255,.10); background:#fff; } .modal .modal-field textarea{ min-height:96px; resize:vertical; } .modal .modal-form-actions{ display:flex; flex-direction:column; align-items:stretch; gap:8px; } .modal .modal-submit{ width:100%; height:44px; border-radius:13px; border:1px solid rgba(35,87,205,.36); background:linear-gradient(140deg, #2f6bff 0%, #2498ff 100%); box-shadow:0 10px 24px rgba(43,102,224,.28); color:#fff; font-size:14px; font-weight:700; } .modal .modal-submit:hover{ filter:brightness(1.03); transform:translateY(-1px); } .modal .modal-submit:active{ transform:translateY(0); } .modal .modal-submit:disabled{ opacity:.78; cursor:not-allowed; transform:none; } .modal .modal-form-note{ font-size:11px; color:#667a95; line-height:1.55; } .modal .form-status{ min-height:19px; font-size:12px; color:#576d8c; } .modal .form-status.ok{ color:#0f7e49; } .modal .form-status.err{ color:#b91c1c; } /* ---------- Responsive ---------- */ @media (max-width: 980px){ :root{ --header-h: var(--header-h-mobile); } .nav{ display:none; } .header-cta{ display:none; } .hamburger{ display:inline-flex; flex-direction:column; justify-content:center; } .brand{ min-width:auto; } .header-right{ min-width:auto; } .mobile-drawer{ display:block; position:fixed; left:0; right:0; top:var(--header-h-mobile); bottom:0; background:rgba(255,255,255,.98); border-top:1px solid var(--border); transform: translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; overflow:auto; } .site-header.is-mobile-open .mobile-drawer{ opacity:1; transform: translateY(0); pointer-events:auto; } .mnav{ max-width:var(--max); margin:0 auto; padding:14px var(--container-pad) 26px; } .mnav a, .mnav button{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:#fff; margin:10px 0; cursor:pointer; } .mnav .section{ margin-top:14px; } .mnav .sub{ display:none; padding:8px 0 2px; } .mnav .section.is-open .sub{ display:block; } .mnav .sub a{ margin:8px 0; background:rgba(2,6,23,.03); } /* Footer stack */ .footer-title{ font-size:28px; } .footer-grid{ grid-template-columns: 1fr; gap:22px; } .footer-sub{ max-width:none; } /* Form stack */ .form-row{ grid-template-columns:1fr; } .modal .modal-form-row{ grid-template-columns:1fr; } .wechat-platforms{ grid-template-columns:1fr; } /* Floating a bit higher to avoid mobile bottom bars */ .floating-contact{ right:14px; bottom:calc(14px + var(--cookie-offset)); } .cookie-consent{ left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom)); flex-direction:column; align-items:flex-start; gap:10px; } .cookie-actions{ width:100%; } .cookie-btn{ width:100%; } } /* Global FAQ (same as homepage FAQ) */ .sy-faq-inner{ max-width: 980px; } .sy-faq-list{ margin-top: 18px; display:flex; flex-direction:column; gap: 10px; } .sy-qa{ background:#fff; border:1px solid rgba(15,23,42,.12); border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(2,6,23,.05); } .sy-qa summary{ cursor: default; font-weight: 700; color: rgba(15,23,42,.90); padding: 8px 6px; list-style: none; display: block; } .sy-qa summary::-webkit-details-marker{ display:none; } .sy-qa summary::marker{ content:""; font-size:0; } .sy-qa-body{ padding: 0 6px 10px; line-height: 1.75; color: rgba(15,23,42,.78); font-size: 13px; } /* FAQ: staggered fade-in on scroll (enabled by JS via data-animate="1") */ .sy-faq[data-animate="1"] .sy-qa{ opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .72s cubic-bezier(.22,.61,.36,1) var(--delay, 0ms), transform .72s cubic-bezier(.22,.61,.36,1) var(--delay, 0ms); will-change: opacity, transform; backface-visibility: hidden; } .sy-faq[data-animate="1"] .sy-qa.is-visible{ opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce){ .sy-faq[data-animate="1"] .sy-qa{ transition: none; opacity: 1; transform: none; } .cookie-consent{ transition:none; } }