/* ========================================================================= Relai 瑞來 — Homepage redesign · standalone stylesheet Zero dependencies. No framework, no design-system runtime. Port target: djguan-jpg/relai (static HTML site). Bilingual: toggled by [data-lang="tc"|"en"] on (see relai-redesign.js). ========================================================================= */ /* ---------------------------------------------------------------- tokens */ :root { /* brand */ --jade: #15794B; --jade-deep: #0F5E39; --jade-bright: #1C9159; --jade-soft: rgba(21,121,75,.10); --jade-soft-2: rgba(21,121,75,.22); --gold: #E6B36A; /* functional warning / high-priority only */ /* dark product surfaces (used inside product-preview cards) */ --ink: #060B09; --bg: #0A0F0D; --surface: #121C17; --surface-2: #0E1712; --text: #EAF3EE; --text-muted: #9DB4AB; --text-faint: #6E837B; --border: #1F2E26; --rule-strong: #2B3B31; /* marketing (light) surfaces */ --mkt-ivory: #F4EFE6; --mkt-forest: #16352A; --mkt-forest-deep: #0A1C14; --mkt-near-black: #060B09; --mkt-ink: #0E1A14; --mkt-ink-soft: #3E4D45; --mkt-green: #147A48; --mkt-on-forest: #EAF3EE; --mkt-on-forest-soft: #A9C2B6; --mkt-card: #FFFFFF; --mkt-card-line: rgba(16,40,28,.08); --mkt-card-soft: #F6F2EA; --mkt-card-shadow: 0 18px 50px rgba(12,45,31,.10); --mkt-green-light: 0 18px 50px -24px rgba(18,167,92,.42); --mkt-glass-bg: rgba(248,250,247,.62); --mkt-glass-border: 1px solid rgba(18,167,92,.28); --mkt-glass-edge: inset 0 1px 0 rgba(255,255,255,.85), 0 34px 80px -34px rgba(8,24,16,.6), 0 0 60px -22px rgba(47,224,138,.4); --muted-on-paper: #5E6F67; /* channels */ --c-line:#06C755; --c-ig:#E1306C; --c-fb:#1877F2; --c-wa:#25D366; --c-web:#6366F1; /* type */ --font-display:'Manrope','Noto Sans TC',system-ui,sans-serif; --font-body:'Manrope','Noto Sans TC',system-ui,sans-serif; --font-tc:'Noto Sans TC','Manrope',system-ui,sans-serif; --font-ui:'Manrope','Noto Sans TC',system-ui,sans-serif; --font-mono:'Space Grotesk',ui-monospace,monospace; /* radii / motion */ --r-md:12px; --r-lg:18px; --r-xl:22px; --r-2xl:30px; --r-full:8px; --r-round:999px; --tr: 220ms cubic-bezier(.22,.61,.36,1); --sh-jade: 0 14px 30px -14px rgba(13,46,30,.42); --sh-lg: 0 26px 60px -26px rgba(0,0,0,.74), 0 50px 100px -50px rgba(0,0,0,.8); } /* ---------------------------------------------------------------- base */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--mkt-ivory); color:var(--mkt-ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; } [id]{ scroll-margin-top:84px; } .zh{ font-family:var(--font-tc); } /* bilingual visibility (compatible with existing repo i18n-tc/i18n-en) */ [data-lang="tc"] .i18n-en{ display:none; } [data-lang="en"] .i18n-tc{ display:none; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link:focus{ position:fixed; top:10px; left:10px; z-index:200; width:auto; height:auto; margin:0; overflow:visible; clip:auto; padding:10px 16px; background:#fff; color:var(--mkt-ink); border-radius:10px; box-shadow:0 18px 40px -22px rgba(10,28,18,.5); text-decoration:none; font-weight:800; } /* shared button */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; font-family:var(--font-ui); font-weight:800; font-size:14.5px; white-space:nowrap; cursor:pointer; border:1.5px solid transparent; border-radius:var(--r-full); padding:12px 24px; text-decoration:none; transition:var(--tr); } .btn-lg{ padding:15px 32px; font-size:15.5px; min-height:48px; } .btn-primary{ background:var(--jade); color:#fff; box-shadow:var(--sh-jade); } .btn-primary:hover{ background:var(--jade-bright); } .btn-outline{ background:#fff; color:#0E1A14; border-color:rgba(14,26,20,.34); } .btn-outline:hover{ background:var(--mkt-card-soft); border-color:rgba(14,26,20,.52); } .btn-onforest{ background:var(--surface); color:var(--text); border-color:var(--rule-strong); } .btn-onforest:hover{ background:var(--surface-2); } a:focus-visible, button:focus-visible{ outline:2px solid var(--jade-deep); outline-offset:2px; border-radius:8px; } .pill{ display:inline-flex; align-items:center; gap:7px; background:var(--jade-soft); color:var(--jade-deep); border:1px solid var(--jade-soft-2); font-family:var(--font-ui); font-weight:800; font-size:12.5px; letter-spacing:.04em; padding:6px 14px; border-radius:var(--r-full); } /* ---------------------------------------------------------------- nav */ .nav{ position:sticky; top:0; z-index:50; background:rgba(244,239,230,.86); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid rgba(16,40,28,.06); transition:background var(--tr),box-shadow var(--tr),border-color var(--tr); } .nav.scrolled{ background:rgba(244,239,230,.94); border-bottom-color:rgba(16,40,28,.12); box-shadow:0 10px 30px -20px rgba(10,28,18,.4); } .nav-in{ width:min(1180px,92vw); margin:0 auto; display:flex; align-items:center; gap:24px; height:70px; } .nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--mkt-ink); font-family:var(--font-display); font-weight:800; font-size:18px; white-space:nowrap; } .nav-brand img{ width:32px; height:32px; } .nav-brand .zh{ color:var(--mkt-green); } .nav-links{ display:flex; gap:26px; flex:1; justify-content:center; } .nav-links a{ font-family:var(--font-tc); font-size:14.5px; color:var(--mkt-ink-soft); text-decoration:none; transition:var(--tr); } .nav-links a:hover{ color:var(--mkt-ink); } .nav-act{ margin-left:auto; display:flex; align-items:center; gap:13px; } .nav-act .btn{ padding:9px 18px; min-height:38px; font-size:14px; } .nav-act .lang{ margin-right:2px; } .nav-login{ font-weight:600; } .lang{ display:inline-flex; align-items:center; background:none; border:none; padding:0; font-family:var(--font-ui); font-size:12.5px; } .lang button{ padding:4px 8px; border:none; background:none; cursor:pointer; color:var(--mkt-ink-soft); font-weight:600; letter-spacing:.05em; line-height:1; min-height:auto; opacity:.5; transition:color var(--tr),opacity var(--tr); } .lang button.on{ color:var(--mkt-ink); font-weight:800; opacity:1; } .lang button:not(.on):hover{ opacity:.82; } .lang button + button{ border-left:1px solid var(--mkt-card-line); margin-left:1px; padding-left:9px; } .nav-login{ font-family:var(--font-tc); font-size:14px; color:var(--mkt-ink); text-decoration:none; } .nav-toggle{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(16,40,28,.12); border-radius:12px; background:#fff; color:var(--mkt-ink); cursor:pointer; padding:0; } .nav-toggle svg{ width:22px; height:22px; } /* ---------------------------------------------------------------- hero */ .hero{ position:relative; overflow:hidden; background:var(--mkt-ivory); } .hero-bg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .hero-bg .contour ellipse{ fill:none; stroke:rgba(18,45,32,.13); stroke-width:1.3; } .hero-bg .contour-lt ellipse{ fill:none; stroke:rgba(220,240,228,.10); stroke-width:1.3; } .hero-in{ position:relative; z-index:2; width:min(1180px,92vw); margin:0 auto; padding:32px 0 40px; display:flex; flex-direction:column; align-items:center; } .hero-eyebrow{ font-family:var(--font-ui); font-weight:800; font-size:clamp(13px,1.1vw,15px); letter-spacing:.14em; color:var(--mkt-green); margin:6px 0 0; display:inline-flex; gap:10px; white-space:nowrap; } .hero-eyebrow b{ color:var(--mkt-ink-soft); font-weight:700; } .hero-h{ text-align:center; margin:16px 0 0; font-family:var(--font-tc); font-weight:900; letter-spacing:-.03em; line-height:1.0; max-width:1100px; } .hero-h span{ display:block; font-size:clamp(50px,8.8vw,124px); white-space:nowrap; } .hero-h .a{ color:var(--mkt-ink); } .hero-h .b{ color:var(--mkt-green); } .hero-h .en{ white-space:normal; font-size:clamp(40px,6.6vw,92px); } .hero-sub{ text-align:center; max-width:720px; margin:22px auto 0; font-family:var(--font-tc); font-size:clamp(16px,1.4vw,19px); line-height:1.7; color:var(--mkt-ink-soft); } .hero-cta{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:26px; flex-wrap:wrap; } .hero-demo{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-tc); font-size:15px; font-weight:700; color:var(--mkt-ink); text-decoration:none; } .hero-demo .play{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--mkt-card-line); box-shadow:var(--mkt-card-shadow); color:var(--mkt-green); } .hero-demo .play svg{ width:15px; height:15px; margin-left:1px; } /* hero product card stack */ .hero-stack{ position:relative; width:100%; max-width:1120px; height:clamp(456px,42vw,540px); margin:14px auto 0; transform:scale(.94); transform-origin:top center; } .pcard{ position:absolute; left:50%; bottom:22px; width:300px; min-height:360px; background:var(--mkt-card); border:1px solid var(--mkt-card-line); border-radius:28px; box-shadow:var(--mkt-card-shadow),var(--mkt-green-light); padding:16px; transform-origin:50% 100%; } .pcard.pc3{ min-height:396px; } .pcard-h{ display:flex; align-items:center; gap:8px; margin-bottom:14px; } .pcard-h img{ width:20px; height:20px; } .pcard-h b{ font-family:var(--font-tc); font-weight:800; font-size:13.5px; color:var(--mkt-ink); } .demo-tag{ margin-left:auto; font-family:var(--font-ui); font-size:9px; font-weight:700; letter-spacing:.03em; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--border); padding:3px 7px; border-radius:999px; white-space:nowrap; } .pcard-screen{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:13px; display:flex; flex-direction:column; gap:10px; } .pcard-screen .row{ display:flex; align-items:center; gap:9px; } .pcard-screen .nm{ flex:1; min-width:0; font-family:var(--font-tc); font-size:12px; font-weight:600; color:var(--text); } .pc-av{ width:30px; height:30px; border-radius:50%; background:var(--jade-soft); color:var(--jade-bright); display:grid; place-items:center; font-family:var(--font-tc); font-weight:700; font-size:12px; flex:none; border:2px solid var(--jade-soft-2); } .pc-score{ font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--jade); background:var(--jade-soft); border:1px solid var(--jade-soft-2); padding:3px 9px; border-radius:999px; } .pc-score.hot{ color:var(--gold); background:rgba(230,179,106,.14); border-color:rgba(230,179,106,.32); } .pc-bubble{ font-family:var(--font-tc); font-size:12.5px; line-height:1.5; padding:9px 12px; border-radius:14px; max-width:85%; } .pc-bubble.in{ background:var(--surface); color:var(--text); align-self:flex-start; border:1px solid var(--border); border-bottom-left-radius:4px; } .pc-bubble.out{ background:var(--jade); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; } .hero-glass{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:10; width:min(760px,94%); border-radius:var(--r-2xl); overflow:hidden; background:var(--mkt-glass-bg); -webkit-backdrop-filter:blur(20px) saturate(1.25); backdrop-filter:blur(20px) saturate(1.25); border:var(--mkt-glass-border); box-shadow:var(--mkt-glass-edge); padding:22px 26px; } .glass-top{ display:flex; align-items:center; gap:12px; } .glass-top img{ width:26px; height:26px; } .glass-title{ font-family:var(--font-tc); font-weight:800; font-size:16px; color:var(--mkt-ink); } .glass-live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-family:var(--font-tc); font-size:12.5px; font-weight:700; color:var(--mkt-green); background:rgba(255,255,255,.62); border:1px solid rgba(18,167,92,.3); padding:5px 12px; border-radius:999px; } .glass-live .dot{ width:8px; height:8px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 4px rgba(47,224,138,.25); } .glass-chan{ display:flex; flex-wrap:wrap; gap:9px 16px; margin:16px 0; padding:13px 0; border-top:1px solid rgba(16,40,28,.1); border-bottom:1px solid rgba(16,40,28,.1); } .chanb{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-ui); font-size:11.5px; font-weight:600; color:var(--mkt-ink-soft); } .chanb i{ width:8px; height:8px; border-radius:50%; } .glass-prev{ display:flex; flex-direction:column; gap:10px; } .glass-prev span{ height:15px; border-radius:6px; background:rgba(16,40,28,.12); filter:blur(1.5px); } .glass-prev span:nth-child(1){ width:78%; } .glass-prev span:nth-child(2){ width:52%; align-self:flex-end; background:rgba(18,167,92,.24); } .glass-prev span:nth-child(3){ width:66%; } /* ---------------------------------------------------------------- sections */ .sec{ padding:clamp(88px,8vw,120px) 0; } .wrap{ width:min(1180px,92vw); margin:0 auto; } .wrap.narrow{ max-width:820px; } .s-white{ background:#fff; } .s-ivory{ background:var(--mkt-ivory); } .s-green{ background:var(--jade-soft); } .s-dark{ background:var(--mkt-forest-deep); } .s-band{ background:radial-gradient(70% 120% at 50% 0%,#15352a,var(--mkt-near-black)); } .head{ max-width:760px; margin:0 auto 56px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; } .head h2{ font-family:var(--font-tc); font-weight:800; font-size:clamp(30px,4vw,52px); letter-spacing:-.025em; line-height:1.18; color:var(--mkt-ink); margin:0; } .head p{ font-family:var(--font-tc); font-size:16px; line-height:1.7; color:var(--mkt-ink-soft); margin:0; } .head.on-dark h2{ color:var(--mkt-on-forest); } .head.on-dark p{ color:var(--mkt-on-forest-soft); } .em{ color:var(--mkt-green); } /* channel proof strip */ .proof{ background:var(--jade-soft); border-top:1px solid rgba(18,167,92,.12); border-bottom:1px solid rgba(18,167,92,.12); padding:30px 0; text-align:center; } .proof p{ font-family:var(--font-tc); font-size:14px; color:var(--mkt-ink-soft); margin:0; } .chan-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; margin:18px auto 0; width:min(1180px,92vw); } .chan-row .chip{ background:#fff; border:1px solid var(--mkt-card-line); border-radius:var(--r-full); padding:9px 17px; box-shadow:0 8px 20px -14px rgba(10,28,18,.35); } /* problem */ .prob-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .prob-card{ background:var(--mkt-card); border:1px solid var(--mkt-card-line); border-radius:24px; padding:26px 24px; box-shadow:var(--mkt-card-shadow); } .prob-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--jade-soft); color:var(--jade-deep); margin-bottom:16px; } .prob-ic svg{ width:25px; height:25px; } .prob-card h3{ font-family:var(--font-tc); font-weight:800; font-size:20px; color:var(--mkt-ink); margin:0 0 9px; } .prob-card p{ font-family:var(--font-tc); font-size:15px; line-height:1.65; color:var(--mkt-ink-soft); margin:0; } /* steps */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; } .steps::before{ content:''; position:absolute; top:50px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,transparent,var(--jade-soft-2) 18%,var(--jade-soft-2) 82%,transparent); z-index:0; } .step{ position:relative; z-index:1; background:#fff; border:1px solid var(--mkt-card-line); border-radius:24px; padding:28px 26px; box-shadow:var(--mkt-card-shadow); } .step .num{ font-family:var(--font-mono); font-weight:700; font-size:30px; color:var(--mkt-green); letter-spacing:-.02em; } .step h3{ font-family:var(--font-tc); font-weight:800; font-size:20px; color:var(--mkt-ink); margin:14px 0 9px; line-height:1.4; } .step p{ font-family:var(--font-tc); font-size:15px; line-height:1.65; color:var(--mkt-ink-soft); margin:0 0 16px; } .step .when{ display:inline-block; font-family:var(--font-ui); font-size:12px; font-weight:700; color:var(--jade-deep); background:var(--jade-soft); border:1px solid var(--jade-soft-2); padding:5px 12px; border-radius:var(--r-full); } /* capabilities */ .feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .feat{ background:var(--mkt-card); border:1px solid var(--mkt-card-line); border-radius:24px; padding:16px 16px 24px; box-shadow:var(--mkt-card-shadow); transition:transform var(--tr),box-shadow var(--tr); } .feat:hover{ transform:translateY(-4px); box-shadow:0 22px 56px rgba(12,45,31,.14),var(--mkt-green-light); } .feat-prev{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:13px; margin-bottom:16px; min-height:104px; display:flex; flex-direction:column; gap:8px; justify-content:center; } .feat-prev.chan{ flex-direction:row; flex-wrap:wrap; gap:9px 14px; align-items:center; } .feat-prev .row{ display:flex; align-items:center; gap:9px; } .feat-prev .nm{ flex:1; min-width:0; font-family:var(--font-tc); font-size:12px; font-weight:600; color:var(--text); } .hf{ display:flex; align-items:center; gap:8px; font-family:var(--font-tc); font-size:12px; font-weight:600; padding:8px 10px; border-radius:10px; } .hf.done{ background:var(--jade-soft); color:var(--jade-deep); border:1px solid var(--jade-soft-2); } .hf.live{ background:var(--surface); color:var(--text); border:1px solid var(--border); } .hf-arrow{ font-family:var(--font-tc); font-size:10.5px; color:var(--text-faint); text-align:center; } .feat h3{ font-family:var(--font-tc); font-weight:800; font-size:20px; color:var(--mkt-ink); margin:0 0 9px; padding:0 8px; } .feat p{ font-family:var(--font-tc); font-size:15px; line-height:1.65; color:var(--mkt-ink-soft); margin:0; padding:0 8px; } /* live product preview (dark, tabbed) */ .pv-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 26px; } .pv-tab{ font-family:var(--font-tc); font-size:14px; font-weight:700; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:9px 18px; border-radius:var(--r-full); cursor:pointer; min-height:44px; } .pv-tab.on{ background:var(--jade); color:#fff; border-color:transparent; box-shadow:var(--sh-jade); } .pv-stage{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:18px; min-height:360px; overflow:hidden; } .pv-demo{ position:absolute; top:16px; right:18px; z-index:3; font-family:var(--font-ui); font-size:10px; font-weight:700; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--border); padding:4px 9px; border-radius:var(--r-full); } .pv-panel[hidden]{ display:none; } .pv-inbox{ display:grid; grid-template-columns:230px 1fr 230px; gap:14px; } .pv-inbox.cols-2{ grid-template-columns:1fr 1fr; } .pv-inbox.cols-4{ grid-template-columns:repeat(4,1fr); } .pv-inbox .list{ display:flex; flex-direction:column; gap:6px; min-width:0; } .pv-conv{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; min-width:0; } .pv-conv.on{ background:var(--surface-2); box-shadow:inset 2px 0 0 var(--jade); } .pv-conv b{ font-family:var(--font-tc); font-size:13px; color:var(--text); display:block; } .pv-conv p{ font-size:11.5px; color:var(--text-faint); margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pv-thread{ background:var(--surface-2); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0; } .pv-ctx{ display:flex; flex-direction:column; gap:10px; min-width:0; } .pv-ctx b{ font-family:var(--font-tc); font-weight:700; font-size:15px; color:var(--text); } .pv-ctx .k{ font-family:var(--font-tc); font-size:11.5px; color:var(--text-faint); } .pv-ctx .v{ font-size:13px; color:var(--text); } .pv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; } .pv-kpi{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:16px; } .pv-kpi .l{ font-family:var(--font-tc); font-size:12px; color:var(--text-muted); } .pv-kpi .n{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--text); margin-top:6px; } .pv-bars{ display:flex; align-items:flex-end; gap:14px; height:140px; } .pv-bars i{ flex:1; border-radius:7px 7px 0 0; background:linear-gradient(180deg,var(--jade-bright),var(--jade-deep)); } /* differentiation */ .reach{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:940px; margin:0 auto; } .reach-card{ padding:28px 26px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--mkt-card-line); box-shadow:var(--mkt-card-shadow); } .reach-card.ours{ border:1.5px solid var(--jade); box-shadow:var(--mkt-green-light); } .reach-top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } .reach-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px; flex:none; background:var(--mkt-card-soft); color:var(--mkt-ink-soft); } .reach-ic.green{ background:var(--jade-soft); color:var(--mkt-green); } .reach-ic svg{ width:24px; height:24px; } .reach-tag{ font-family:var(--font-ui); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--mkt-ink-soft); } .reach-h{ font-family:var(--font-tc); font-size:17px; font-weight:800; color:var(--mkt-ink); margin-top:2px; } .reach-card.ours .reach-h{ color:var(--jade-deep); } .reach-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .reach-card li{ display:flex; gap:10px; font-family:var(--font-tc); font-size:15px; line-height:1.55; color:var(--mkt-ink-soft); } .reach-card li b{ flex:none; font-weight:800; } .reach-card.lim li b{ color:#D9603F; } .reach-card.ours li b{ color:var(--jade-deep); } /* all-in-one pills + comparison */ .pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .pills span{ font-family:var(--font-tc); font-size:14px; font-weight:700; color:var(--mkt-ink); background:#fff; border:1px solid var(--mkt-card-line); padding:9px 17px; border-radius:var(--r-full); box-shadow:0 8px 20px -16px rgba(16,60,40,.4); } .pills span.more{ background:var(--jade-soft); color:var(--jade-deep); border-color:var(--jade-soft-2); } .cmp-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--mkt-card-line); background:#fff; box-shadow:0 24px 54px -34px rgba(16,60,40,.34); } .cmp-wrap:focus-visible{ outline:2px solid var(--jade-deep); outline-offset:2px; } .cmp{ width:100%; min-width:720px; border-collapse:collapse; font-family:var(--font-tc); } .cmp th,.cmp td{ padding:14px 16px; text-align:center; font-size:14.5px; border-bottom:1px solid var(--mkt-card-line); } .cmp th{ font-weight:800; color:var(--mkt-ink); background:var(--mkt-card-soft); } .cmp th.us,.cmp td.us{ background:var(--jade-soft); } .cmp th.us{ color:var(--jade-deep); } .cmp td:first-child,.cmp th:first-child{ position:sticky; left:0; text-align:left; background:#fff; z-index:1; color:var(--mkt-ink); font-weight:600; } .cmp th:first-child{ background:var(--mkt-card-soft); } .cmp td.yes{ color:var(--jade-deep); font-weight:700; } .cmp td.mid{ color:var(--mkt-ink-soft); } .cmp td.no{ color:var(--text-faint); } .cmp tr:last-child td{ border-bottom:none; } .cmp-note{ text-align:center; color:var(--mkt-ink-soft); font-size:13px; line-height:1.7; max-width:760px; margin:16px auto 0; } /* metrics band (facts) */ .metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .metric{ text-align:center; } .metric .n{ font-family:var(--font-mono); font-weight:700; font-size:clamp(28px,3.4vw,42px); color:var(--jade-bright); letter-spacing:-.02em; line-height:1.1; } .metric .l{ font-family:var(--font-tc); font-size:14.5px; line-height:1.5; color:var(--mkt-on-forest-soft); margin-top:8px; } /* pricing */ .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; } .price{ display:flex; flex-direction:column; position:relative; background:#fff; border:1px solid var(--mkt-card-line); border-radius:var(--r-xl); padding:26px 24px; box-shadow:var(--mkt-card-shadow); } .price.pop{ border:1.5px solid var(--jade); box-shadow:var(--mkt-green-light),var(--mkt-card-shadow); } .price-badge{ position:absolute; top:-12px; left:24px; background:var(--jade); color:#fff; font-family:var(--font-tc); font-size:12px; font-weight:800; padding:5px 14px; border-radius:var(--r-full); } .price h3{ font-family:var(--font-tc); font-weight:800; font-size:20px; color:var(--mkt-ink); margin:0; } .price h3 small{ color:var(--muted-on-paper); font-weight:600; font-size:13px; } .price .desc{ color:var(--mkt-ink-soft); font-size:13.5px; margin:8px 0 16px; } .price .amt{ font-family:var(--font-mono); font-weight:700; font-size:34px; color:var(--mkt-ink); letter-spacing:-.02em; } .price .amt small{ font-size:15px; color:var(--muted-on-paper); font-family:var(--font-tc); } .price .per{ font-family:var(--font-tc); font-size:12.5px; color:var(--mkt-ink-soft); margin:6px 0 18px; } .price ul{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:11px; } .price li{ display:flex; gap:9px; font-family:var(--font-tc); font-size:13.5px; color:var(--mkt-ink); line-height:1.45; } .price li svg{ width:16px; height:16px; color:var(--jade-deep); flex:none; margin-top:2px; } .price li.muted{ color:var(--muted-on-paper); } .price li.muted svg{ color:var(--text-faint); } .price .btn{ width:100%; margin-top:auto; } .ent{ max-width:940px; margin:18px auto 0; display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:20px 24px; background:#fff; border:1px solid var(--mkt-card-line); border-radius:var(--r-lg); box-shadow:var(--mkt-card-shadow); } .ent .ic{ font-size:26px; color:var(--mkt-ink-soft); display:grid; place-items:center; } .ent .ic svg{ width:28px; height:28px; } .ent .body{ flex:1; min-width:220px; } .ent .body b{ font-family:var(--font-tc); font-size:16px; color:var(--mkt-ink); } .ent .body .amt{ color:var(--muted-on-paper); font-size:13px; font-weight:500; } .ent .body p{ color:var(--mkt-ink-soft); font-size:13.5px; line-height:1.6; margin:5px 0 0; } .plan-note{ max-width:880px; margin:22px auto 0; text-align:center; font-family:var(--font-tc); font-size:12.5px; line-height:1.7; color:var(--muted-on-paper); } /* use cases */ .uc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .uc{ background:#fff; border:1px solid var(--mkt-card-line); border-radius:24px; padding:24px 22px; box-shadow:var(--mkt-card-shadow); } .uc .tag{ display:inline-block; white-space:nowrap; font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--jade-deep); background:var(--jade-soft); border:1px solid var(--jade-soft-2); padding:4px 10px; border-radius:var(--r-full); margin-bottom:14px; } .uc h3{ font-family:var(--font-tc); font-weight:800; font-size:20px; color:var(--mkt-ink); margin:0 0 9px; } .uc p{ font-family:var(--font-tc); font-size:15px; line-height:1.65; color:var(--mkt-ink-soft); margin:0; } /* faq */ .faq{ display:flex; flex-direction:column; gap:12px; } .qa{ background:#fff; border:1px solid var(--mkt-card-line); border-radius:var(--r-md); overflow:hidden; box-shadow:0 14px 34px -28px rgba(16,60,40,.3); } .qa h3{ margin:0; } .qa-btn{ width:100%; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 22px; background:none; border:none; text-align:left; font-family:var(--font-tc); font-weight:700; font-size:17px; color:var(--mkt-ink); min-height:44px; } .qa-btn > span:first-child{ flex:1; } .qa-mark{ width:14px; height:14px; flex:none; position:relative; } .qa-mark::before,.qa-mark::after{ content:''; position:absolute; background:var(--jade-deep); border-radius:2px; transition:var(--tr); } .qa-mark::before{ top:6px; left:0; width:14px; height:2px; } .qa-mark::after{ top:0; left:6px; width:2px; height:14px; } .qa.open .qa-mark::after{ transform:rotate(90deg); opacity:0; } .qa-panel{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--tr),opacity var(--tr); } .qa.open .qa-panel{ grid-template-rows:1fr; opacity:1; } .qa-inner{ overflow:hidden; } .qa-panel p{ font-family:var(--font-tc); font-size:15.5px; line-height:1.75; color:var(--mkt-ink-soft); margin:0; padding:2px 22px 20px; } /* security */ .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .trust{ background:#fff; border:1px solid var(--mkt-card-line); border-radius:24px; padding:26px 24px; box-shadow:var(--mkt-card-shadow); } .trust-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--jade-soft); color:var(--jade-deep); margin-bottom:16px; } .trust-ic svg{ width:23px; height:23px; } .trust h3{ font-family:var(--font-tc); font-weight:800; font-size:19px; color:var(--mkt-ink); margin:0 0 9px; } .trust p{ font-family:var(--font-tc); font-size:15px; line-height:1.6; color:var(--mkt-ink-soft); margin:0; } .trust-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; margin-top:32px; } .trust-links a{ font-family:var(--font-tc); font-size:14px; font-weight:600; color:var(--jade-deep); text-decoration:underline; text-underline-offset:3px; } .trust-cta{ text-align:center; margin-top:22px; } /* final cta */ .cta{ text-align:center; } .cta .inner{ max-width:720px; margin:0 auto; } .cta h2{ font-family:var(--font-tc); font-weight:800; font-size:clamp(30px,4vw,46px); color:var(--mkt-on-forest); letter-spacing:-.02em; line-height:1.2; margin:0; } .cta p{ font-family:var(--font-tc); font-size:16px; color:var(--mkt-on-forest-soft); margin:16px 0 28px; } .cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; } /* footer */ .foot{ background:var(--ink); border-top:1px solid var(--rule-strong); padding:60px 0 30px; } .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:32px; } .foot-brand img{ width:34px; height:34px; } .foot-brand .wm{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text); margin-top:12px; } .foot-brand .wm .zh{ color:var(--jade); } .foot-brand p{ color:var(--text-muted); font-size:14px; margin:14px 0 0; max-width:30ch; line-height:1.6; } .foot-col h4{ font-family:var(--font-tc); font-size:13px; color:var(--text); margin:0 0 14px; } .foot-col a{ display:block; font-family:var(--font-tc); font-size:14px; color:var(--text-muted); text-decoration:none; margin-bottom:9px; transition:var(--tr); } .foot-col a:hover{ color:var(--jade); } .foot-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 0 0; margin-top:40px; border-top:1px solid var(--border); font-family:var(--font-tc); font-size:12.5px; color:var(--text-faint); } .foot-disc{ font-family:var(--font-tc); font-size:12.5px; line-height:1.75; color:var(--text-muted); margin:16px 0 0; } /* ---------------------------------------------------------------- responsive */ /* 1024 tablet */ @media (max-width:1180px){ .hero-glass{ width:min(660px,92%); } .pc1{ transform:translateX(calc(-50% - 300px)) rotate(-13deg); } .pc2{ transform:translateX(calc(-50% - 170px)) rotate(-7deg); } .pc4{ transform:translateX(calc(-50% + 170px)) rotate(7deg); } .pc5{ transform:translateX(calc(-50% + 300px)) rotate(13deg); } } @media (max-width:1024px){ .feat-grid,.prob-grid,.trust-grid,.uc-grid{ grid-template-columns:1fr 1fr; } } /* 768 small tablet */ @media (max-width:900px){ .nav-links{ display:none; } .nav-toggle{ display:inline-flex; } .nav-links.open{ display:flex; position:fixed; top:70px; left:12px; right:12px; flex-direction:column; gap:2px; margin:0; background:#fff; border:1px solid rgba(16,40,28,.12); border-radius:16px; padding:10px; box-shadow:0 24px 50px -20px rgba(16,60,40,.28); z-index:60; } .nav-links.open a{ padding:12px 14px; font-size:16px; border-radius:10px; } .nav-links.open a:hover{ background:var(--mkt-ivory); } .feat-grid,.prob-grid,.trust-grid,.uc-grid,.pv-kpis{ grid-template-columns:1fr 1fr; } .steps{ grid-template-columns:1fr; } .steps::before{ display:none; } .reach{ grid-template-columns:1fr; } .price-grid{ grid-template-columns:1fr; } .price.pop{ transform:none; } .pv-inbox,.pv-inbox.cols-2,.pv-inbox.cols-4{ grid-template-columns:1fr; } .pv-inbox .ctx{ display:none; } .foot-grid{ grid-template-columns:1fr 1fr 1fr; } .foot-brand{ grid-column:1 / -1; } .hero-stack{ height:clamp(460px,88vw,540px); } .pcard{ width:264px; } .pc1,.pc5{ display:none; } .pc2{ transform:translateX(calc(-50% - 132px)) rotate(-8deg); } .pc4{ transform:translateX(calc(-50% + 132px)) rotate(8deg); } .hero-glass{ width:min(560px,94%); } } /* 390 mobile */ @media (max-width:560px){ .hero-h span{ font-size:clamp(32px,11vw,50px); } .nav-in{ gap:12px; } .nav-act{ gap:14px; } .nav-login{ display:none; } .nav-act .btn-primary{ display:none; } /* hero already has the CTA — declutter the bar */ .hero-cta{ flex-direction:column; gap:14px; } .hero-cta > *{ width:100%; } .feat-grid,.prob-grid,.trust-grid,.uc-grid,.pv-kpis{ grid-template-columns:1fr; } .metrics{ grid-template-columns:1fr 1fr; gap:24px 12px; } .foot-grid{ grid-template-columns:1fr 1fr; } .cta-actions{ flex-direction:column; } .cta-actions > *{ width:100%; } .hero-stack{ height:500px; max-width:100%; } .pcard{ width:234px; min-height:330px; } .pcard.pc3{ min-height:356px; } .pc2{ transform:translateX(calc(-50% - 86px)) rotate(-9deg); } .pc3{ transform:translateX(-50%); } .pc4{ transform:translateX(calc(-50% + 86px)) rotate(9deg); } .hero-glass{ width:min(330px,92%); padding:18px; } } /* short-viewport hero safety (e.g. 1440×768) */ @media (min-width:1000px) and (max-height:820px){ .hero-in{ padding-top:24px; } .hero-stack{ transform:scale(.84); margin-top:4px; height:clamp(420px,40vw,500px); } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }