/* Fonts moved to a single preconnect + in each HTML to avoid the render-blocking, serialized @import chain (3 requests -> 1). Same families/weights. */ :root{ --bg:#fbfbfd; --text:#101014; --muted:#6a6a75; --line:rgba(0,0,0,.08); --grad:linear-gradient(135deg,#6BA8FF,#8D7CFF,#C887F8); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; overflow-x:hidden; } #life{position:fixed;inset:0;width:100%;height:100%;z-index:0} .opening{ position:fixed;left:0;right:0;top:0;height:100vh;z-index:3; display:grid;place-items:center;pointer-events:none; } #openingText{ margin-top:360px;font-weight:900;letter-spacing:-.03em;font-size:28px; color:rgba(30,30,42,.72); transition:opacity .65s ease, transform .65s ease; } .nav{ position:fixed;top:0;left:0;right:0;z-index:10;height:76px; display:flex;align-items:center;justify-content:space-between;padding:0 56px; background:rgba(251,251,253,.62);backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,.58); opacity:0;transform:translateY(-18px);transition:.8s ease; } .nav.show{opacity:1;transform:none} .brand{display:flex;align-items:center;gap:12px;font-weight:950;font-size:24px;letter-spacing:-.05em} .brand span{width:24px;height:24px;border-radius:8px;background:var(--grad)} nav{display:flex;gap:32px} nav a{color:#3d3d46;text-decoration:none;font-weight:800;font-size:14px} button{ border:0;border-radius:999px;padding:13px 22px;font-weight:950;color:white;background:var(--grad); box-shadow:0 18px 42px rgba(141,124,255,.28); cursor:pointer; } main{position:relative;z-index:2} .scene{min-height:100vh;padding:110px 7vw;display:grid;place-items:center} .hero{place-items:center start} .hero-copy{ max-width:860px;opacity:0;transform:translateY(32px); transition:opacity 1s ease, transform 1s ease; } .hero-copy.show{opacity:1;transform:none} .eyebrow{ display:inline-flex;padding:10px 16px;border-radius:999px;margin-bottom:22px; background:rgba(255,255,255,.7);border:1px solid var(--line);backdrop-filter:blur(20px); font-weight:950;color:#6d61df; } h1{font-size:86px;line-height:.98;letter-spacing:-.075em;margin:0} .hero p{font-size:23px;line-height:1.75;color:var(--muted);max-width:760px} .hint{margin-top:26px;color:#8a8a96;font-weight:850;font-size:13px;text-transform:uppercase;letter-spacing:.08em} .statement{text-align:center} .statement h2{font-size:82px;line-height:1;letter-spacing:-.075em;margin:0} .statement p{font-size:23px;color:var(--muted);max-width:760px;line-height:1.7} .cards{grid-template-columns:repeat(4,1fr);gap:22px;align-items:end} .cards article{ min-height:360px;padding:30px;border-radius:34px; background:rgba(255,255,255,.62);backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.72); box-shadow:0 34px 100px rgba(70,70,120,.08); transition:.35s ease; } .cards article:hover{transform:translateY(-8px) scale(1.02)} .cards b{background:var(--grad);-webkit-background-clip:text;color:transparent} .cards h3{font-size:32px;letter-spacing:-.05em;margin:22px 0 12px} .cards p{color:#666;line-height:1.7} .metrics{grid-template-columns:repeat(3,1fr);gap:24px} .metrics div{ width:100%;padding:46px;border-radius:34px;text-align:center; background:rgba(255,255,255,.66);backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.74); } .metrics strong{display:block;font-size:64px;letter-spacing:-.055em;background:var(--grad);-webkit-background-clip:text;color:transparent} .metrics span{font-weight:950;color:#666} .final{text-align:center;padding-top:150px;padding-bottom:150px} .final-card{ width:min(920px,92vw);padding:72px 44px;border-radius:44px; background:rgba(255,255,255,.76);backdrop-filter:blur(32px); border:1px solid rgba(255,255,255,.82); box-shadow:0 42px 120px rgba(80,80,130,.11); } .final h2{ font-size:92px; line-height:1.12; letter-spacing:-.075em; margin:0 0 16px; padding-bottom:10px; background:var(--grad); -webkit-background-clip:text; color:transparent; overflow:visible; } .final p{font-size:26px;color:#555;margin:0 0 28px} .final button{font-size:18px;padding:16px 30px} @media(max-width:900px){ .nav{padding:0 22px}.nav nav{display:none} h1{font-size:52px}.statement h2,.final h2{ font-size:92px; line-height:1.12; letter-spacing:-.075em; margin:0 0 16px; padding-bottom:10px; background:var(--grad); -webkit-background-clip:text; color:transparent; overflow:visible; } .scene{padding:90px 24px} .cards,.metrics{grid-template-columns:1fr} #openingText{margin-top:300px;font-size:20px;text-align:center} } /* Fix: prevent descenders like g / y / p from being clipped */ .final-card, .final h2 { overflow: visible; } /* Influencer product guidance section */ .influencer-guide{ position:relative; grid-template-columns:.82fr 1.18fr; gap:42px; align-items:center; } .guide-copy{ max-width:620px; } .guide-copy h2{ font-size:58px; line-height:1.05; letter-spacing:-.055em; margin:0; } .guide-copy p{ font-size:21px; line-height:1.75; color:var(--muted); } .guide-board{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .guide-step{ position:relative; min-height:220px; padding:26px; border-radius:30px; background:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.78); backdrop-filter:blur(26px); box-shadow:0 28px 90px rgba(70,70,120,.07); transition:.28s ease; } .guide-step:hover{ transform:translateY(-6px); box-shadow:0 34px 110px rgba(100,90,180,.10); } .guide-step.active{ background:linear-gradient(135deg,rgba(107,168,255,.14),rgba(200,135,248,.13)),rgba(255,255,255,.76); border-color:rgba(141,124,255,.18); } .guide-step span{ font-weight:950; background:var(--grad); -webkit-background-clip:text; color:transparent; } .guide-step h3{ font-size:27px; margin:18px 0 10px; letter-spacing:-.04em; } .guide-step p{ margin:0; color:#666; line-height:1.65; } .guide-cta{ position:absolute; left:7vw; bottom:84px; display:flex; gap:18px; align-items:center; } .guide-cta a{ color:#555; text-decoration:none; font-weight:900; } @media(max-width:980px){ .influencer-guide{ grid-template-columns:1fr; } .guide-board{ grid-template-columns:1fr; } .guide-copy h2{ font-size:42px; } .guide-cta{ position:static; margin-top:26px; flex-direction:column; align-items:flex-start; } } /* Hero copy optimization for current influencer product */ .hero h1, .hero-copy h1, .copy h1{ max-width:780px; font-size:92px; line-height:.94; letter-spacing:-.08em; } .hero p, .hero-copy p, .copy p{ max-width:640px; } .hero-actions{ display:flex; gap:16px; align-items:center; margin-top:30px; } .hero-actions a{ color:#444; text-decoration:none; font-weight:950; padding:13px 18px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(0,0,0,.06); backdrop-filter:blur(18px); } .intelligence-tag{ position:absolute; right:9vw; top:26vh; z-index:4; padding:10px 15px; border-radius:999px; font-weight:950; color:#7568e8; background:rgba(255,255,255,.64); border:1px solid rgba(141,124,255,.14); backdrop-filter:blur(20px); box-shadow:0 18px 50px rgba(90,80,160,.08); } /* Tighten current product guidance section */ .influencer-guide{ min-height:100vh; } .guide-copy h2{ font-size:66px; line-height:.98; } .guide-step h3{ font-size:25px; } .guide-cta{ bottom:70px; } /* Today / tomorrow section */ .today-tomorrow{ grid-template-columns:1fr 1fr; gap:24px; } .tt-card{ min-height:420px; width:100%; padding:42px; border-radius:38px; background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.78); backdrop-filter:blur(28px); box-shadow:0 34px 110px rgba(80,80,130,.08); } .tt-card span{ font-weight:950; color:#7568e8; } .tt-card h2{ margin:26px 0 18px; font-size:56px; line-height:1.02; letter-spacing:-.06em; } .tt-card p{ max-width:560px; font-size:21px; line-height:1.7; color:var(--muted); } .tt-card.future{ background:linear-gradient(135deg,rgba(107,168,255,.12),rgba(200,135,248,.12)),rgba(255,255,255,.68); } @media(max-width:980px){ .hero h1, .hero-copy h1, .copy h1{ font-size:58px; max-width:100%; } .hero-actions{ flex-direction:column; align-items:flex-start; } .intelligence-tag{ display:none; } .today-tomorrow{ grid-template-columns:1fr; } .tt-card h2{ font-size:42px; } } /* Status text should fade away cleanly after the opening sequence */ #openingText { transition: opacity .65s ease, transform .65s ease, filter .65s ease; } /* Final hero layout and logo treatment */ .brand{ min-width: 230px; } .brand img{ display:block; width: 226px; height:auto; object-fit:contain; } .hero, .scene.hero{ grid-template-columns: 48% 52%; } .hero-copy, .copy{ max-width: 640px; } .hero h1, .hero-copy h1, .copy h1{ font-size:92px !important; line-height:.98 !important; letter-spacing:-.065em !important; font-weight:950; max-width:620px !important; } .hero p, .hero-copy p, .copy p{ max-width:560px !important; font-size:22px; line-height:1.75; margin-top:28px; } .eyebrow{ margin-bottom:28px !important; } .hero-actions{ margin-top:30px; } #universe, #life, #stage{ transform: translateX(86px); } @media(max-width:980px){ .brand img{ width: 180px; } .brand{ min-width:auto; } .hero h1, .hero-copy h1, .copy h1{ font-size:58px !important; max-width:100% !important; } #universe, #life, #stage{ transform:none; } } /* Final polish: smaller logo, lighter hero title, remove hint */ .brand img{ width: 168px !important; height: auto !important; } .brand{ min-width: 180px !important; } .hero h1, .hero-copy h1, .copy h1{ font-size: 78px !important; line-height: 1.03 !important; letter-spacing: -0.058em !important; font-weight: 820 !important; max-width: 560px !important; } .hero p, .hero-copy p, .copy p{ max-width: 540px !important; font-size: 21px !important; line-height: 1.72 !important; margin-top: 30px !important; } .hint, .scroll-hint{ display:none !important; } .eyebrow{ margin-bottom: 34px !important; } .hero, .scene.hero{ padding-top: 132px !important; } @media(max-width:980px){ .brand img{ width: 138px !important; } .brand{ min-width: auto !important; } .hero h1, .hero-copy h1, .copy h1{ font-size: 52px !important; line-height: 1.04 !important; max-width:100% !important; } } /* Bilingual final polish */ .brand img{ width: 140px !important; } .brand{ min-width: 150px !important; } .lang-switch{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(0,0,0,.055); backdrop-filter:blur(18px); } .lang-switch span{ color:#999; font-weight:800; } .lang-btn{ box-shadow:none !important; background:transparent !important; color:#777 !important; padding:5px 7px !important; border-radius:999px !important; font-size:13px !important; font-weight:900 !important; } .lang-btn.active{ color:#6d61df !important; background:rgba(141,124,255,.10) !important; } @media(max-width:980px){ .brand img{ width:120px !important; } .lang-switch{ margin-left:auto; } } html[lang="zh-CN"] .cards h3, html[lang="zh-CN"] .guide-step h3{ letter-spacing:-.035em; } /* Final fix: reduce crowded section headline */ .statement h2{ font-size:64px !important; line-height:1.08 !important; letter-spacing:-.055em !important; max-width:980px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .statement p{ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; } #system{ padding-top:150px !important; } @media(max-width:980px){ .statement h2{ font-size:42px !important; max-width:100% !important; } } /* Clean final: Today/Tomorrow visual weight reduction */ .today-tomorrow{ grid-template-columns: minmax(0, 480px) minmax(0, 480px) !important; justify-content:center !important; align-items:center !important; gap:28px !important; min-height:86vh !important; padding-top:90px !important; padding-bottom:90px !important; } .tt-card{ min-height:360px !important; padding:34px 36px !important; border-radius:34px !important; } .tt-card h2{ font-size:44px !important; line-height:1.08 !important; letter-spacing:-.045em !important; margin:22px 0 18px !important; max-width:390px !important; } .tt-card p{ max-width:390px !important; font-size:19px !important; line-height:1.68 !important; } .tt-card span{ font-size:16px !important; } /* Final card subtitle language safety */ .final p [data-i18n="finalSub"]{ display:inline-block; } @media(max-width:980px){ .today-tomorrow{ grid-template-columns:1fr !important; min-height:auto !important; } .tt-card{ min-height:300px !important; } .tt-card h2{ font-size:36px !important; } .tt-card p{ font-size:18px !important; } } /* Rebuilt Today / Tomorrow section: no duplicated text, clean hierarchy */ .today-tomorrow{ grid-template-columns:minmax(0, 520px) minmax(0, 520px) !important; justify-content:center !important; align-items:center !important; gap:32px !important; min-height:88vh !important; padding-top:96px !important; padding-bottom:96px !important; } .today-tomorrow .tt-card{ min-height:390px !important; padding:42px 44px !important; border-radius:36px !important; } .today-tomorrow .tt-card > span{ display:block !important; font-size:17px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:-.01em !important; } .today-tomorrow .tt-card h2{ display:block !important; margin:34px 0 24px !important; max-width:420px !important; font-size:48px !important; line-height:1.05 !important; letter-spacing:-.045em !important; font-weight:820 !important; word-spacing:normal !important; } .today-tomorrow .tt-card p{ display:block !important; max-width:430px !important; font-size:19px !important; line-height:1.75 !important; font-weight:520 !important; letter-spacing:normal !important; word-spacing:normal !important; } .today-tomorrow .tt-card h2 *, .today-tomorrow .tt-card p *{ display:inline !important; letter-spacing:inherit !important; word-spacing:inherit !important; } /* Chinese spacing */ html[lang="zh-CN"] .today-tomorrow .tt-card h2{ font-size:44px !important; line-height:1.18 !important; letter-spacing:-.025em !important; font-weight:820 !important; } html[lang="zh-CN"] .today-tomorrow .tt-card p{ font-size:19px !important; line-height:1.95 !important; font-weight:520 !important; } /* Final card subtitle always controlled by i18n */ .final p [data-i18n="finalSub"]{ display:inline-block !important; } /* Logo slightly smaller */ .brand img{ width:132px !important; } .brand{ min-width:145px !important; } @media(max-width:980px){ .today-tomorrow{ grid-template-columns:1fr !important; min-height:auto !important; } .today-tomorrow .tt-card{ min-height:320px !important; } .today-tomorrow .tt-card h2{ font-size:38px !important; } html[lang="zh-CN"] .today-tomorrow .tt-card h2{ font-size:34px !important; } .brand img{ width:118px !important; } } /* V5 production shared navigation CTA */ .nav-cta{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:13px 22px; color:white; background:var(--grad); font-weight:950; text-decoration:none; box-shadow:0 18px 42px rgba(141,124,255,.28); } /* Keep hero brand story compact */ .hero p br + br, .hero-copy p br + br, .copy p br + br{ display:block; content:""; margin-top:16px; } /* V5 Typography Upgrade Goal: less default SaaS, more editorial / modern AI brand. */ :root{ --font-display:"Inter Tight","Geist","SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",sans-serif; --font-body:"Inter","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-zh:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif; --text:#101014; --muted:#686873; --soft:#8A8A96; --brand-text:#6D61DF; } body{ font-family:var(--font-body) !important; font-weight:400 !important; color:var(--text) !important; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } html[lang="zh-CN"] body{ font-family:var(--font-zh) !important; font-weight:400 !important; } /* Display typography */ h1,h2,h3, .hero h1,.hero-copy h1,.copy h1, .statement h2,.final h2,.tt-card h2, .login-card h1,.dash-hero h1{ font-family:var(--font-display) !important; font-weight:740 !important; letter-spacing:-.058em !important; color:var(--text); } .hero h1, .hero-copy h1, .copy h1{ font-size:76px !important; line-height:1.04 !important; letter-spacing:-.064em !important; font-weight:760 !important; max-width:560px !important; } html[lang="zh-CN"] .hero h1, html[lang="zh-CN"] .hero-copy h1, html[lang="zh-CN"] .copy h1{ letter-spacing:-.032em !important; font-weight:720 !important; line-height:1.12 !important; } .hero p, .hero-copy p, .copy p{ font-family:var(--font-body) !important; font-size:20px !important; line-height:1.78 !important; font-weight:400 !important; color:var(--muted) !important; max-width:520px !important; } html[lang="zh-CN"] .hero p, html[lang="zh-CN"] .hero-copy p, html[lang="zh-CN"] .copy p{ font-family:var(--font-zh) !important; line-height:1.92 !important; letter-spacing:-.01em !important; } /* Navigation and small labels */ nav a, .nav-cta, button, .eyebrow, .lang-btn, .guide-step span, .tt-card > span, .metrics span, .field label, .login-row, .back-link{ font-family:var(--font-body) !important; font-weight:640 !important; letter-spacing:-.012em !important; } html[lang="zh-CN"] nav a, html[lang="zh-CN"] .nav-cta, html[lang="zh-CN"] button, html[lang="zh-CN"] .eyebrow, html[lang="zh-CN"] .lang-btn, html[lang="zh-CN"] .field label{ font-family:var(--font-zh) !important; font-weight:620 !important; letter-spacing:0 !important; } .eyebrow{ color:var(--brand-text) !important; font-size:15px !important; font-weight:680 !important; } nav a{ font-size:14px !important; color:#363640 !important; } .nav-cta{ font-weight:700 !important; } /* Section typography */ .section-head p, .statement p, .guide-copy p, .guide-step p, .cards p, .tt-card p, .final p, .metrics span{ font-family:var(--font-body) !important; font-weight:400 !important; color:var(--muted) !important; } html[lang="zh-CN"] .section-head p, html[lang="zh-CN"] .statement p, html[lang="zh-CN"] .guide-copy p, html[lang="zh-CN"] .guide-step p, html[lang="zh-CN"] .cards p, html[lang="zh-CN"] .tt-card p, html[lang="zh-CN"] .final p{ font-family:var(--font-zh) !important; line-height:1.9 !important; } /* Cards feel lighter and more editorial */ .cards h3, .guide-step h3{ font-family:var(--font-display) !important; font-weight:700 !important; letter-spacing:-.045em !important; } .cards p, .guide-step p{ font-size:16px !important; line-height:1.76 !important; } /* Today / Tomorrow hierarchy */ .today-tomorrow .tt-card h2{ font-family:var(--font-display) !important; font-size:46px !important; line-height:1.08 !important; font-weight:720 !important; letter-spacing:-.05em !important; } .today-tomorrow .tt-card p{ font-size:18px !important; line-height:1.78 !important; font-weight:400 !important; } html[lang="zh-CN"] .today-tomorrow .tt-card h2{ font-family:var(--font-zh) !important; font-size:40px !important; line-height:1.26 !important; letter-spacing:-.02em !important; font-weight:680 !important; } html[lang="zh-CN"] .today-tomorrow .tt-card p{ font-size:18px !important; line-height:2 !important; font-weight:400 !important; } /* Final card */ .final h2{ font-weight:740 !important; letter-spacing:-.06em !important; } .final p{ font-size:24px !important; font-weight:400 !important; } /* Login page: smaller card, same homepage background, lighter typography */ body[data-page="login"]{ background:var(--bg) !important; } body[data-page="login"] #life{ transform:none !important; } body[data-page="login"] .login-page{ grid-template-columns:1.12fr 420px !important; gap:7.5vw !important; } body[data-page="login"] .login-card{ padding:30px !important; border-radius:32px !important; width:100% !important; } body[data-page="login"] .login-card h1{ font-family:var(--font-display) !important; font-size:38px !important; line-height:1.04 !important; letter-spacing:-.055em !important; font-weight:720 !important; } body[data-page="login"] .login-card .sub{ font-family:var(--font-body) !important; font-size:15.5px !important; line-height:1.62 !important; font-weight:400 !important; color:var(--muted) !important; margin-bottom:26px !important; } body[data-page="login"] .field{ margin-bottom:14px !important; } body[data-page="login"] .field label{ font-size:12.5px !important; font-weight:620 !important; color:#5f5f69 !important; } body[data-page="login"] .field input{ height:50px !important; border-radius:16px !important; font-family:var(--font-body) !important; font-weight:400 !important; } body[data-page="login"] .sign-btn, body[data-page="login"] .google-btn{ height:50px !important; font-weight:680 !important; } body[data-page="login"] .login-row, body[data-page="login"] .request-access{ font-weight:400 !important; } body[data-page="login"] .login-row a, body[data-page="login"] .request-access a{ font-weight:680 !important; } html[lang="zh-CN"] body[data-page="login"] .login-card h1, html[lang="zh-CN"] body[data-page="login"] .login-card .sub, html[lang="zh-CN"] body[data-page="login"] .field label, html[lang="zh-CN"] body[data-page="login"] .field input{ font-family:var(--font-zh) !important; } @media(max-width:980px){ .hero h1, .hero-copy h1, .copy h1{ font-size:52px !important; line-height:1.06 !important; } body[data-page="login"] .login-page{ grid-template-columns:1fr !important; } body[data-page="login"] .login-card h1{ font-size:34px !important; } } /* V6 3D opening animation — light, glassy, blue-purple, homepage aligned */ .opening, #openingText{ display:none !important; } .intro3d{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; overflow:hidden; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.68), rgba(251,251,253,.82) 36%, rgba(251,251,253,.94) 100%), linear-gradient(180deg, rgba(251,251,253,.96), rgba(251,251,253,.86)); transition:opacity .9s cubic-bezier(.16,1,.3,1), visibility .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); } .intro3d.done{ opacity:0; visibility:hidden; filter:blur(10px); pointer-events:none; } #intro3dCanvas{ position:absolute; inset:0; width:100%; height:100%; } .intro3d-copy{ position:absolute; left:50%; top:72vh; transform:translateX(-50%); display:grid; justify-items:center; text-align:center; gap:10px; opacity:0; animation:intro3dCopyIn .8s cubic-bezier(.16,1,.3,1) .9s forwards; pointer-events:none; } #intro3dKicker{ padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(0,0,0,.055); backdrop-filter:blur(20px); color:#6D61DF; font-family:var(--font-body, Inter, -apple-system, BlinkMacSystemFont, sans-serif); font-size:13px; font-weight:640; letter-spacing:-.01em; } #intro3dTitle{ color:rgba(17,17,20,.66); font-family:var(--font-display, "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif); font-size:18px; line-height:1.45; font-weight:520; letter-spacing:-.02em; } @keyframes intro3dCopyIn{ from{ opacity:0; transform:translateX(-50%) translateY(10px); filter:blur(8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } } @media(max-width:900px){ .intro3d-copy{ top:71vh; width:90vw; } #intro3dTitle{ font-size:16px; } } /* V6 Unified Activation: 3D shell wraps the SAME homepage lifeform instead of replacing it */ .intro3d{ background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.18), rgba(251,251,253,.16) 42%, rgba(251,251,253,.44) 100%) !important; pointer-events:none; } .intro3d::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(251,251,253,.52), rgba(251,251,253,.18)); pointer-events:none; } #intro3dCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; } .intro3d-copy{ z-index:2; top:72vh !important; } #intro3dKicker{ background:rgba(255,255,255,.56) !important; border:1px solid rgba(0,0,0,.045) !important; color:rgba(109,97,223,.76) !important; font-weight:560 !important; } #intro3dTitle{ color:rgba(17,17,20,.56) !important; font-weight:420 !important; } /* Keep homepage hero hidden until shell hands off */ .hero-copy{ transition:opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1) !important; } /* V6: Hello + lifeform opening. Same homepage lifeform stays visible; this overlay only writes the greeting below it. */ .opening, #openingText, .intro3d, #intro3dCanvas{ display:none !important; } .hello-opening{ position:fixed; inset:0; z-index:6; pointer-events:none; background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.12), rgba(251,251,253,.18) 38%, rgba(251,251,253,.46) 100%); transition:opacity .9s cubic-bezier(.16,1,.3,1), visibility .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); } .hello-opening.done{ opacity:0; visibility:hidden; filter:blur(10px); } .hello-wrap{ position:absolute; left:50%; top:64vh; transform:translateX(-50%); width:min(620px,88vw); display:grid; justify-items:center; text-align:center; } .hello-svg{ width:min(470px,78vw); height:128px; overflow:visible; filter:drop-shadow(0 18px 42px rgba(112,97,220,.08)); } .hello-svg.zh{ width:min(410px,72vw); height:120px; } .hello-svg text{ font-family:"Snell Roundhand","Apple Chancery","Segoe Script","Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif; font-size:108px; font-weight:420; letter-spacing:-.055em; } .hello-svg.zh text{ font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC","Source Han Sans SC",-apple-system,BlinkMacSystemFont,sans-serif; font-size:88px; font-weight:360; letter-spacing:-.045em; } .hello-ghost{ fill:none; stroke:rgba(17,17,20,.07); stroke-width:1.2; opacity:.72; } .hello-stroke{ fill:none; stroke:url(#helloInk); stroke-width:1.22; stroke-linecap:round; stroke-linejoin:round; opacity:.86; } .hello-fill{ fill:url(#helloFill); opacity:0; animation:helloFillIn 1.05s cubic-bezier(.16,1,.3,1) forwards; animation-delay:1.48s; } .hello-mask{ transform-box:fill-box; transform-origin:left center; transform:translateX(-106%); animation:helloWriteMask 2.05s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.22s; } .hello-shimmer{ opacity:0; filter:blur(8px); animation:helloShimmerMove 1.78s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.34s; } @keyframes helloWriteMask{ from{transform:translateX(-106%);} to{transform:translateX(0);} } @keyframes helloFillIn{ from{opacity:0;filter:blur(4px);} to{opacity:.74;filter:blur(0);} } @keyframes helloShimmerMove{ 0%{opacity:0;transform:translateX(-35%);} 28%{opacity:.45;} 100%{opacity:0;transform:translateX(380%);} } #helloSub{ margin:4px 0 0; font-family:var(--font-body, Inter, -apple-system, BlinkMacSystemFont, sans-serif); font-size:17px; line-height:1.58; font-weight:400; letter-spacing:-.012em; color:rgba(104,104,115,.66); opacity:0; filter:blur(6px); transform:translateY(8px); animation:helloSubIn .82s cubic-bezier(.16,1,.3,1) forwards; animation-delay:2.18s; } html[lang="zh-CN"] #helloSub{ font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC",sans-serif; letter-spacing:0; } @keyframes helloSubIn{ to{ opacity:1; filter:blur(0); transform:translateY(0); } } @media(max-width:900px){ .hello-wrap{ top:63vh; width:92vw; } .hello-svg{ width:min(360px,82vw); height:108px; } .hello-svg.zh{ width:min(330px,78vw); height:104px; } .hello-svg text{ font-size:92px; } .hello-svg.zh text{ font-size:76px; } #helloSub{ font-size:15px; } } /* Apple-inspired Hello opening refinement Not an Apple copy: same calm, handwritten, translucent activation feeling. */ .hello-wrap{ top:64.5vh !important; } .hello-svg{ width:min(520px,78vw) !important; height:142px !important; overflow:visible !important; filter: drop-shadow(0 18px 44px rgba(110,96,220,.075)) drop-shadow(0 2px 12px rgba(255,255,255,.78)) !important; } .hello-svg.zh{ width:min(430px,72vw) !important; height:128px !important; } .hello-svg.en{ width:min(520px,78vw) !important; height:142px !important; } .hello-svg text{ paint-order:stroke fill; dominant-baseline:alphabetic; } .hello-svg.en text{ font-family:"Snell Roundhand","Apple Chancery","Bradley Hand","Segoe Script",cursive !important; font-size:132px !important; font-weight:300 !important; letter-spacing:-.035em !important; } .hello-svg.zh text{ font-family:"HanziPen SC","Kaiti SC","STKaiti","KaiTi","PingFang SC","Noto Sans SC",sans-serif !important; font-size:96px !important; font-weight:300 !important; letter-spacing:.02em !important; } .hello-ghost{ fill:none !important; stroke:rgba(17,17,20,.045) !important; stroke-width:1.6 !important; opacity:.72 !important; } .hello-stroke{ fill:none !important; stroke:url(#helloInk) !important; stroke-width:1.35 !important; stroke-linecap:round !important; stroke-linejoin:round !important; opacity:.72 !important; filter:drop-shadow(0 0 10px rgba(109,97,223,.08)); } .hello-svg.zh .hello-stroke{ stroke-width:1.05 !important; } .hello-fill{ fill:url(#helloFill) !important; opacity:0; animation:helloFillIn 1.18s cubic-bezier(.16,1,.3,1) forwards !important; animation-delay:var(--hello-fill-delay,1.58s) !important; } .hello-mask{ transform-box:fill-box !important; transform-origin:left center !important; transform:translateX(-108%) skewX(-8deg) !important; animation:helloWriteMask var(--hello-write-duration,2.15s) cubic-bezier(.16,1,.3,1) forwards !important; animation-delay:.18s !important; } .hello-shimmer{ opacity:0; filter:blur(10px) !important; animation:helloShimmerMove 1.95s cubic-bezier(.16,1,.3,1) forwards !important; animation-delay:var(--hello-shimmer-delay,.38s) !important; } @keyframes helloWriteMask{ 0%{ transform:translateX(-108%) skewX(-8deg); } 72%{ transform:translateX(-8%) skewX(-3deg); } 100%{ transform:translateX(0) skewX(0); } } @keyframes helloFillIn{ 0%{ opacity:0; filter:blur(5px); } 100%{ opacity:.58; filter:blur(0); } } @keyframes helloShimmerMove{ 0%{ opacity:0; transform:translateX(-48%); } 24%{ opacity:.52; } 68%{ opacity:.32; } 100%{ opacity:0; transform:translateX(410%); } } #helloSub{ margin-top:0 !important; color:rgba(104,104,115,.58) !important; font-size:16px !important; animation-delay:2.32s !important; } html[lang="zh-CN"] #helloSub{ font-weight:400 !important; } @media(max-width:900px){ .hello-wrap{ top:64vh !important; } .hello-svg.en{ width:min(400px,82vw) !important; height:118px !important; } .hello-svg.zh{ width:min(340px,78vw) !important; height:112px !important; } .hello-svg.en text{ font-size:112px !important; } .hello-svg.zh text{ font-size:82px !important; } } /* V6.2 stronger handwritten opening Fixes: too transparent, too small, not enough writing feel. */ .hello-wrap{ top:62.8vh !important; } .hello-svg{ width:min(660px,88vw) !important; height:178px !important; overflow:visible !important; filter: drop-shadow(0 18px 46px rgba(109,97,223,.10)) drop-shadow(0 2px 10px rgba(255,255,255,.72)) !important; } .hello-svg.en{ width:min(660px,88vw) !important; height:178px !important; } .hello-svg.zh{ width:min(560px,80vw) !important; height:168px !important; } .hello-svg.en text{ font-family:"Snell Roundhand","Apple Chancery","Bradley Hand","Segoe Script","Brush Script MT",cursive !important; font-size:168px !important; font-weight:420 !important; letter-spacing:-.04em !important; } .hello-svg.zh text{ font-family:"Kaiti SC","STKaiti","KaiTi","HanziPen SC","PingFang SC","Noto Sans SC",sans-serif !important; font-size:128px !important; font-weight:420 !important; letter-spacing:.04em !important; } /* More visible base silhouette */ .hello-ghost{ fill:none !important; stroke:rgba(17,17,20,.16) !important; stroke-width:1.8 !important; opacity:.62 !important; } /* Real writing feel: animate the text outline with dashoffset, not just a left-to-right mask */ .hello-stroke{ fill:none !important; stroke:url(#helloInk) !important; stroke-width:2.25 !important; stroke-linecap:round !important; stroke-linejoin:round !important; opacity:.98 !important; stroke-dasharray:1600 !important; stroke-dashoffset:1600 !important; animation:helloStrokeDraw 2.55s cubic-bezier(.16,1,.3,1) forwards !important; animation-delay:.22s !important; filter: drop-shadow(0 0 6px rgba(109,97,223,.10)) drop-shadow(0 1px 1px rgba(255,255,255,.65)) !important; } .hello-svg.zh .hello-stroke{ stroke-width:2.05 !important; stroke-dasharray:1900 !important; stroke-dashoffset:1900 !important; animation-duration:2.75s !important; } /* The fill comes in after the stroke is mostly written. Darker but still premium/soft. */ .hello-fill{ fill:url(#helloFill) !important; opacity:0; animation:helloFillInStrong 1.25s cubic-bezier(.16,1,.3,1) forwards !important; animation-delay:2.05s !important; } .hello-svg.zh .hello-fill{ animation-delay:2.22s !important; } /* Keep a soft writing sheen, but don't rely on it as the main reveal */ .hello-mask{ transform:translateX(0) !important; animation:none !important; } .hello-shimmer{ opacity:0; filter:blur(8px) !important; animation:helloShimmerMoveStrong 2.15s cubic-bezier(.16,1,.3,1) forwards !important; animation-delay:.44s !important; } @keyframes helloStrokeDraw{ 0%{ stroke-dashoffset:1600; opacity:.16; filter:blur(2px) drop-shadow(0 0 8px rgba(109,97,223,.08)); } 20%{ opacity:.72; } 72%{ filter:blur(.25px) drop-shadow(0 0 6px rgba(109,97,223,.11)); } 100%{ stroke-dashoffset:0; opacity:1; filter:blur(0) drop-shadow(0 0 6px rgba(109,97,223,.10)); } } @keyframes helloFillInStrong{ 0%{ opacity:0; filter:blur(5px); } 100%{ opacity:.82; filter:blur(0); } } @keyframes helloShimmerMoveStrong{ 0%{ opacity:0; transform:translateX(-52%); } 22%{ opacity:.58; } 64%{ opacity:.34; } 100%{ opacity:0; transform:translateX(440%); } } /* Darker ink gradients for readability */ #helloInk stop:nth-child(1){ stop-color:rgba(17,17,20,.34) !important; } #helloInk stop:nth-child(2){ stop-color:rgba(17,17,20,.84) !important; } #helloInk stop:nth-child(3){ stop-color:rgba(109,97,223,.48) !important; } #helloFill stop:nth-child(1){ stop-color:rgba(17,17,20,.20) !important; } #helloFill stop:nth-child(2){ stop-color:rgba(17,17,20,.70) !important; } #helloFill stop:nth-child(3){ stop-color:rgba(109,97,223,.36) !important; } #helloSub{ margin-top:4px !important; color:rgba(104,104,115,.68) !important; font-size:17px !important; animation-delay:2.72s !important; } html[lang="zh-CN"] #helloSub{ animation-delay:2.86s !important; } @media(max-width:900px){ .hello-wrap{ top:63vh !important; } .hello-svg.en{ width:min(500px,90vw) !important; height:142px !important; } .hello-svg.zh{ width:min(420px,84vw) !important; height:132px !important; } .hello-svg.en text{ font-size:132px !important; } .hello-svg.zh text{ font-size:100px !important; } } /* V6.3 custom handwritten stroke opening Own custom stroke paths: more artistic, true stroke-by-stroke writing. */ .hello-wrap{ top:62.5vh !important; } .hello-svg{ width:min(680px,90vw) !important; height:210px !important; overflow:visible !important; filter: drop-shadow(0 20px 52px rgba(109,97,223,.12)) drop-shadow(0 2px 8px rgba(255,255,255,.78)) !important; } .hello-svg.en{ width:min(680px,90vw) !important; height:220px !important; } .hello-svg.zh{ width:min(560px,84vw) !important; height:220px !important; } .hello-paths{ transform-box:fill-box; transform-origin:center; } .hello-path, .hello-glow-path{ fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; } .hello-glow-path{ stroke:url(#helloGlow); stroke-width:15; opacity:0; filter:blur(8px); animation:helloBrushGlow var(--duration,1s) cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--delay,0s); } .hello-path{ stroke:url(#helloInk); stroke-width:7.2; opacity:.98; animation:helloBrushWrite var(--duration,1s) cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--delay,0s); filter: drop-shadow(0 1px 1px rgba(255,255,255,.65)) drop-shadow(0 0 5px rgba(109,97,223,.08)); } .hello-svg.zh .hello-path{ stroke-width:8.8; } .hello-svg.zh .hello-glow-path{ stroke-width:18; } @keyframes helloBrushWrite{ 0%{ stroke-dashoffset:1; opacity:.18; filter:blur(1.6px) drop-shadow(0 0 6px rgba(109,97,223,.08)); } 18%{ opacity:.95; } 78%{ filter:blur(.2px) drop-shadow(0 0 5px rgba(109,97,223,.08)); } 100%{ stroke-dashoffset:0; opacity:1; filter:blur(0) drop-shadow(0 0 5px rgba(109,97,223,.07)); } } @keyframes helloBrushGlow{ 0%{ stroke-dashoffset:1; opacity:0; } 24%{ opacity:.34; } 100%{ stroke-dashoffset:0; opacity:.12; } } #helloSub{ margin-top:-10px !important; color:rgba(104,104,115,.68) !important; font-size:17px !important; animation-delay:3.05s !important; } html[lang="zh-CN"] #helloSub{ animation-delay:3.15s !important; } @media(max-width:900px){ .hello-wrap{ top:63vh !important; } .hello-svg.en{ width:min(500px,92vw) !important; height:172px !important; } .hello-svg.zh{ width:min(430px,86vw) !important; height:172px !important; } .hello-path{ stroke-width:6.4; } .hello-svg.zh .hello-path{ stroke-width:7.8; } } /* Final: no opening animation */ .hello-opening, .intro3d, .opening, #openingText{ display:none !important; } /* Lifeform-only opening: no text overlay, no 3D shell, no handwriting. */ .hello-opening, .intro3d, .opening, #openingText{ display:none !important; } /* Keep homepage calm while the lifeform moves from center to hero position. */ body[data-page="home"] .nav, body:not([data-page]) .nav{ transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1) !important; } body[data-page="home"] .hero-copy, body:not([data-page]) .hero-copy{ transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1) !important; } /* Startup status during the lifeform-only opening */ .startup-status{ position:fixed; left:50%; top:64vh; z-index:5; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.58); border:1px solid rgba(0,0,0,.05); backdrop-filter:blur(18px); color:rgba(109,97,223,.72); font-family:var(--font-body, Inter, -apple-system, BlinkMacSystemFont, sans-serif); font-size:14px; font-weight:560; letter-spacing:-.01em; box-shadow:0 18px 54px rgba(100,90,170,.06); opacity:0; pointer-events:none; animation:startupStatusInOut 4.25s cubic-bezier(.16,1,.3,1) forwards; } html[lang="zh-CN"] .startup-status{ font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC",sans-serif; letter-spacing:0; } .startup-dots{ display:inline-flex; gap:3px; transform:translateY(1px); } .startup-dots i{ width:3.5px; height:3.5px; border-radius:50%; background:rgba(109,97,223,.62); opacity:.35; animation:startupDot 1.15s ease-in-out infinite; } .startup-dots i:nth-child(2){animation-delay:.16s} .startup-dots i:nth-child(3){animation-delay:.32s} @keyframes startupStatusInOut{ 0%{ opacity:0; transform:translateX(-50%) translateY(10px); filter:blur(6px); } 18%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 72%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 100%{ opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(7px); visibility:hidden; } } @keyframes startupDot{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-2px); } } @media(max-width:900px){ .startup-status{ top:65vh; font-size:13px; } } /* Themed startup copy refinement */ .startup-status{ top:70vh !important; padding:10px 16px !important; color:rgba(109,97,223,.78) !important; font-size:14.5px !important; font-weight:620 !important; background:rgba(255,255,255,.62) !important; border:1px solid rgba(141,124,255,.10) !important; box-shadow: 0 18px 54px rgba(100,90,170,.07), inset 0 1px 0 rgba(255,255,255,.72) !important; } #startupText{ display:inline-block; transition:opacity .22s ease, transform .22s ease, filter .22s ease; } #startupText.is-changing{ opacity:0; transform:translateY(4px); filter:blur(5px); } .startup-dots i{ background:rgba(109,97,223,.68) !important; } @media(max-width:900px){ .startup-status{ top:71vh !important; font-size:13.5px !important; } } /* Refined startup status: aligned with lifeform, less chip-like, more natural */ .startup-status{ top:68vh !important; left:50% !important; min-width:310px !important; justify-content:center !important; padding:0 !important; border-radius:0 !important; background:transparent !important; border:none !important; backdrop-filter:none !important; box-shadow:none !important; font-family:var(--font-display, "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-size:21px !important; line-height:1.35 !important; font-weight:520 !important; letter-spacing:-.025em !important; color:transparent !important; background-image:linear-gradient(135deg, rgba(17,17,20,.56), rgba(109,97,223,.78)) !important; -webkit-background-clip:text !important; background-clip:text !important; animation:startupStatusLifePath 4.7s cubic-bezier(.16,1,.3,1) forwards !important; } html[lang="zh-CN"] .startup-status{ font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC",sans-serif !important; font-size:22px !important; font-weight:500 !important; letter-spacing:-.012em !important; min-width:300px !important; } #startupText{ display:inline-block; min-width:260px; text-align:center; transition:opacity .28s ease, transform .28s ease, filter .28s ease; } html[lang="zh-CN"] #startupText{ min-width:250px; } #startupText.is-changing{ opacity:0; transform:translateY(6px); filter:blur(6px); } .startup-dots{ margin-left:3px; gap:5px !important; transform:translateY(3px) !important; } .startup-dots i{ width:5px !important; height:5px !important; background:rgba(109,97,223,.60) !important; box-shadow:0 0 14px rgba(109,97,223,.16); } @keyframes startupStatusLifePath{ 0%{ left:50%; opacity:0; transform:translateX(-50%) translateY(12px); filter:blur(7px); } 16%{ left:50%; opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 58%{ left:50%; opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 78%{ left:55%; opacity:.72; transform:translateX(-50%) translateY(-2px); filter:blur(1px); } 100%{ left:62%; opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(8px); visibility:hidden; } } @media(max-width:900px){ .startup-status{ top:69vh !important; font-size:18px !important; min-width:260px !important; } html[lang="zh-CN"] .startup-status{ font-size:19px !important; min-width:250px !important; } #startupText{ min-width:220px; } } /* V6.4 artful startup caption Fixed: visual alignment with lifeform and more premium typography. */ .startup-status{ top:66.8vh !important; left:50% !important; min-width:0 !important; width:min(520px,86vw) !important; transform:translateX(-50%) !important; display:grid !important; justify-items:center !important; gap:6px !important; padding:0 !important; border:none !important; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; color:initial !important; background-image:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; animation:startupStatusFadeOnly 4.95s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-kicker{ display:block; font-family:var(--font-body, Inter, -apple-system, BlinkMacSystemFont, sans-serif); font-size:11px; line-height:1; font-weight:640; letter-spacing:.14em; text-transform:uppercase; color:rgba(109,97,223,.52); opacity:.86; } .startup-main{ position:relative; display:inline-block; min-width:360px !important; text-align:center !important; font-family:var(--font-display, "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif); font-size:26px; line-height:1.2; font-weight:560; letter-spacing:-.038em; color:transparent; background: linear-gradient(112deg, rgba(17,17,20,.72) 0%, rgba(17,17,20,.52) 42%, rgba(109,97,223,.76) 100%); -webkit-background-clip:text; background-clip:text; text-shadow: 0 16px 48px rgba(109,97,223,.10), 0 1px 0 rgba(255,255,255,.72); transition:opacity .28s ease, transform .28s ease, filter .28s ease; } html[lang="zh-CN"] .startup-main{ font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC","Source Han Sans SC",sans-serif; font-size:27px; line-height:1.28; font-weight:500; letter-spacing:-.02em; } .startup-main::after{ content:""; position:absolute; left:8%; right:8%; bottom:-12px; height:1px; background:linear-gradient(90deg, transparent, rgba(109,97,223,.26), transparent); opacity:.72; } #startupText.is-changing, .startup-main.is-changing{ opacity:0; transform:translateY(7px); filter:blur(8px); } .startup-dots{ margin-top:6px !important; margin-left:0 !important; gap:6px !important; transform:none !important; } .startup-dots i{ width:4.5px !important; height:4.5px !important; background:rgba(109,97,223,.50) !important; box-shadow:0 0 16px rgba(109,97,223,.18) !important; } @keyframes startupStatusFadeOnly{ 0%{ opacity:0; transform:translateX(-50%) translateY(12px); filter:blur(8px); } 14%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } 74%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } 100%{ opacity:0; transform:translateX(-50%) translateY(-10px); filter:blur(10px); visibility:hidden; } } @media(max-width:900px){ .startup-status{ top:67.5vh !important; width:90vw !important; } .startup-main{ min-width:260px !important; font-size:21px !important; } html[lang="zh-CN"] .startup-main{ font-size:22px !important; } .startup-kicker{ font-size:10px; } } /* Final readability pass for the opening status. Aligns the text directly under the centered lifeform and makes it clear. */ .startup-status{ top:60.5vh !important; left:50% !important; width:min(760px,92vw) !important; transform:translateX(-50%) !important; display:grid !important; justify-items:center !important; gap:0 !important; padding:0 !important; border:none !important; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; animation:startupStatusReadable 4.9s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-kicker{ display:none !important; } .startup-main{ min-width:0 !important; width:100% !important; text-align:center !important; font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC","Source Han Sans SC", "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:clamp(28px,2.25vw,40px) !important; line-height:1.22 !important; font-weight:500 !important; letter-spacing:-.018em !important; color:rgba(28,28,34,.76) !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow: 0 18px 44px rgba(109,97,223,.13), 0 1px 0 rgba(255,255,255,.88) !important; transition:opacity .28s ease, transform .28s ease, filter .28s ease !important; } html[lang="en"] .startup-main, html:not([lang="zh-CN"]) .startup-main{ font-family:"Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:clamp(26px,2vw,36px) !important; font-weight:520 !important; letter-spacing:-.035em !important; } .startup-main::after{ display:none !important; } #startupText.is-changing, .startup-main.is-changing{ opacity:0 !important; transform:translateY(8px) !important; filter:blur(7px) !important; } .startup-dots{ margin-top:14px !important; margin-left:0 !important; gap:7px !important; transform:none !important; } .startup-dots i{ width:5px !important; height:5px !important; background:rgba(109,97,223,.55) !important; box-shadow:0 0 16px rgba(109,97,223,.18) !important; } @keyframes startupStatusReadable{ 0%{ opacity:0; transform:translateX(-50%) translateY(16px); filter:blur(8px); } 15%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } 76%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } 100%{ opacity:0; transform:translateX(-50%) translateY(-10px); filter:blur(10px); visibility:hidden; } } @media(max-width:900px){ .startup-status{ top:61.5vh !important; width:92vw !important; } .startup-main{ font-size:24px !important; line-height:1.28 !important; } } /* V6 relaxed typography pass Goal: less rigid, less crowded, more modern / fashion-forward. */ :root{ --font-display:"Plus Jakarta Sans","Manrope","Inter Tight","SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif; --font-body:"Manrope","Inter","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-zh:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Source Han Sans SC",sans-serif; --text:#111116; --muted:#6b6b76; } body{ font-family:var(--font-body) !important; font-weight:400 !important; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } html[lang="zh-CN"] body{ font-family:var(--font-zh) !important; } /* Reduce the "heavy block" feeling across all big titles */ .hero h1, .hero-copy h1, .copy h1, .statement h2, .today-tomorrow .tt-card h2, .final h2, .login-card h1, .dash-hero h1{ font-family:var(--font-display) !important; font-weight:680 !important; letter-spacing:-.048em !important; color:var(--text) !important; } /* Hero title: less crowded, more breathing room */ .hero h1, .hero-copy h1, .copy h1{ font-size:66px !important; line-height:1.08 !important; max-width:500px !important; font-weight:680 !important; letter-spacing:-.052em !important; } html[lang="zh-CN"] .hero h1, html[lang="zh-CN"] .hero-copy h1, html[lang="zh-CN"] .copy h1{ font-family:var(--font-zh) !important; font-size:58px !important; line-height:1.18 !important; letter-spacing:-.018em !important; font-weight:620 !important; } /* Hero paragraph: slightly smaller, airier */ .hero p, .hero-copy p, .copy p{ font-family:var(--font-body) !important; font-size:19px !important; line-height:1.82 !important; max-width:500px !important; color:#6b6b76 !important; font-weight:400 !important; } html[lang="zh-CN"] .hero p, html[lang="zh-CN"] .hero-copy p, html[lang="zh-CN"] .copy p{ font-family:var(--font-zh) !important; line-height:1.95 !important; } /* Section title: no more huge crowded single-line blocks */ .statement{ text-align:center !important; align-content:center !important; } .statement h2{ font-size:44px !important; line-height:1.18 !important; max-width:720px !important; font-weight:650 !important; letter-spacing:-.036em !important; margin-left:auto !important; margin-right:auto !important; transform:translateY(22px); } .statement p{ max-width:680px !important; font-size:19px !important; line-height:1.78 !important; font-weight:400 !important; } html[lang="zh-CN"] .statement h2{ font-family:var(--font-zh) !important; font-size:42px !important; line-height:1.28 !important; letter-spacing:-.012em !important; font-weight:600 !important; } /* Today / Tomorrow cards: reduce crowding, improve hierarchy */ .today-tomorrow{ grid-template-columns:minmax(0, 480px) minmax(0, 480px) !important; gap:30px !important; align-items:center !important; justify-content:center !important; } .today-tomorrow .tt-card{ min-height:340px !important; padding:36px 38px !important; border-radius:34px !important; } .today-tomorrow .tt-card > span{ font-family:var(--font-body) !important; font-size:15px !important; font-weight:650 !important; letter-spacing:-.01em !important; color:#6D61DF !important; } .today-tomorrow .tt-card h2{ font-size:36px !important; line-height:1.22 !important; max-width:360px !important; margin:28px 0 22px !important; font-weight:650 !important; letter-spacing:-.038em !important; } .today-tomorrow .tt-card p{ max-width:380px !important; font-size:17px !important; line-height:1.85 !important; font-weight:400 !important; color:#6b6b76 !important; } html[lang="zh-CN"] .today-tomorrow .tt-card h2{ font-family:var(--font-zh) !important; font-size:34px !important; line-height:1.34 !important; font-weight:600 !important; letter-spacing:-.008em !important; } html[lang="zh-CN"] .today-tomorrow .tt-card p{ font-family:var(--font-zh) !important; font-size:17px !important; line-height:1.95 !important; } /* Product / feature cards */ .cards h3, .guide-step h3{ font-family:var(--font-display) !important; font-weight:640 !important; letter-spacing:-.035em !important; } .cards p, .guide-step p{ font-weight:400 !important; } /* Startup text: align under the lifeform, make it readable but not bulky */ .startup-status{ top:63.5vh !important; left:50% !important; width:min(640px,90vw) !important; transform:translateX(-50%) !important; display:grid !important; justify-items:center !important; gap:0 !important; padding:0 !important; border:none !important; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; animation:startupStatusReadable 4.9s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-kicker{ display:none !important; } .startup-main, #startupText{ min-width:0 !important; width:100% !important; text-align:center !important; font-family:var(--font-display) !important; font-size:28px !important; line-height:1.28 !important; font-weight:560 !important; letter-spacing:-.028em !important; color:rgba(30,30,38,.76) !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow:0 14px 40px rgba(109,97,223,.10), 0 1px 0 rgba(255,255,255,.82) !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-family:var(--font-zh) !important; font-size:30px !important; line-height:1.36 !important; font-weight:500 !important; letter-spacing:-.01em !important; } .startup-main::after{ display:none !important; } .startup-dots{ margin-top:12px !important; margin-left:0 !important; } @keyframes startupStatusReadable{ 0%{ opacity:0; transform:translateX(-50%) translateY(16px); filter:blur(8px); } 15%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } 76%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); } 100%{ opacity:0; transform:translateX(-50%) translateY(-10px); filter:blur(10px); visibility:hidden; } } /* Canvas labels should not look bolder than section titles */ canvas{ -webkit-font-smoothing:antialiased; } @media(max-width:980px){ .hero h1, .hero-copy h1, .copy h1{ font-size:50px !important; line-height:1.1 !important; max-width:100% !important; } .statement h2{ font-size:36px !important; line-height:1.22 !important; transform:none !important; } .today-tomorrow{ grid-template-columns:1fr !important; } .today-tomorrow .tt-card h2{ font-size:32px !important; } .startup-status{ top:64.5vh !important; } .startup-main, #startupText{ font-size:22px !important; } } /* Final opening caption alignment: The caption stays under the centered lifeform, sits lower, and fades out before the lifeform moves right into the homepage hero. */ .startup-status{ top:72vh !important; left:50% !important; width:min(680px,90vw) !important; min-width:0 !important; transform:translateX(-50%) !important; display:grid !important; justify-items:center !important; gap:0 !important; padding:0 !important; border:none !important; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; animation:startupCaptionAligned 4.05s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-kicker{ display:none !important; } .startup-main, #startupText{ width:100% !important; min-width:0 !important; text-align:center !important; font-family:var(--font-body, Manrope, Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-size:22px !important; line-height:1.45 !important; font-weight:440 !important; letter-spacing:-.018em !important; color:rgba(78,78,88,.62) !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow:0 18px 42px rgba(109,97,223,.07) !important; transition:opacity .28s ease, transform .28s ease, filter .28s ease !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-family:"PingFang SC","Noto Sans SC","HarmonyOS Sans SC","Source Han Sans SC",sans-serif !important; font-size:23px !important; line-height:1.5 !important; font-weight:420 !important; letter-spacing:-.006em !important; } .startup-main::after{ display:none !important; } #startupText.is-changing, .startup-main.is-changing{ opacity:0 !important; transform:translateY(6px) !important; filter:blur(6px) !important; } .startup-dots{ margin-top:11px !important; margin-left:0 !important; gap:6px !important; transform:none !important; } .startup-dots i{ width:4px !important; height:4px !important; background:rgba(109,97,223,.38) !important; box-shadow:0 0 14px rgba(109,97,223,.12) !important; } @keyframes startupCaptionAligned{ 0%{ opacity:0; transform:translateX(-50%) translateY(14px); filter:blur(8px); } 16%{ opacity:.78; transform:translateX(-50%) translateY(0); filter:blur(0); } 58%{ opacity:.78; transform:translateX(-50%) translateY(0); filter:blur(0); } 72%{ opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(8px); visibility:hidden; } 100%{ opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(8px); visibility:hidden; } } @media(max-width:900px){ .startup-status{ top:73vh !important; width:92vw !important; } .startup-main, #startupText{ font-size:18px !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:19px !important; } } /* Final startup caption alignment + art direction - locked to true center while lifeform is centered - lower vertical position - refined serif typography - per-character staggered appearance */ .startup-status{ top:76vh !important; left:50% !important; width:min(820px,92vw) !important; min-width:0 !important; transform:translateX(-50%) !important; display:grid !important; justify-items:center !important; gap:0 !important; padding:0 !important; border:none !important; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; animation:startupCaptionFinal 4.35s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-kicker{ display:none !important; } .startup-main, #startupText{ width:100% !important; min-width:0 !important; text-align:center !important; white-space:nowrap !important; font-family:"Cormorant Garamond","Noto Serif SC","Songti SC","STSong","Times New Roman",serif !important; font-size:clamp(30px,2.65vw,46px) !important; line-height:1.18 !important; font-weight:500 !important; letter-spacing:-.018em !important; color:rgba(35,35,44,.72) !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow: 0 22px 54px rgba(109,97,223,.10), 0 1px 0 rgba(255,255,255,.78) !important; transition:opacity .26s ease, transform .26s ease, filter .26s ease !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-family:"Noto Serif SC","Songti SC","STSong","Kaiti SC","PingFang SC",serif !important; font-size:clamp(29px,2.45vw,42px) !important; line-height:1.28 !important; font-weight:500 !important; letter-spacing:.035em !important; } .startup-main::after{ display:none !important; } .startup-char{ display:inline-block; opacity:0; filter:blur(8px); transform:translateY(12px); animation:startupCharIn .72s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i) * 42ms); } html[lang="zh-CN"] .startup-char{ animation-delay:calc(var(--i) * 62ms); } @keyframes startupCharIn{ 0%{ opacity:0; filter:blur(8px); transform:translateY(12px); } 60%{ opacity:.86; filter:blur(1.5px); } 100%{ opacity:1; filter:blur(0); transform:translateY(0); } } #startupText.is-changing, .startup-main.is-changing{ opacity:0 !important; transform:translateY(9px) !important; filter:blur(8px) !important; } .startup-dots{ margin-top:14px !important; margin-left:0 !important; gap:7px !important; transform:none !important; } .startup-dots i{ width:4.5px !important; height:4.5px !important; background:rgba(109,97,223,.34) !important; box-shadow:0 0 14px rgba(109,97,223,.12) !important; } @keyframes startupCaptionFinal{ 0%{ opacity:0; transform:translateX(-50%) translateY(16px); filter:blur(9px); } 16%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 62%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 78%{ opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(9px); visibility:hidden; } 100%{ opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(9px); visibility:hidden; } } @media(max-width:900px){ .startup-status{ top:77vh !important; width:92vw !important; } .startup-main, #startupText{ white-space:normal !important; font-size:24px !important; line-height:1.35 !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:24px !important; } } /* Shorter startup copy: one concise line, no rotating phrases */ .startup-status{ animation:startupCaptionShort 3.75s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-main, #startupText{ font-size:clamp(30px,2.45vw,42px) !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:clamp(30px,2.35vw,40px) !important; letter-spacing:.02em !important; } .startup-char{ animation-delay:calc(var(--i) * 54ms) !important; } html[lang="zh-CN"] .startup-char{ animation-delay:calc(var(--i) * 82ms) !important; } @keyframes startupCaptionShort{ 0%{ opacity:0; transform:translateX(-50%) translateY(16px); filter:blur(9px); } 18%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 68%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 100%{ opacity:0; transform:translateX(-50%) translateY(-8px); filter:blur(9px); visibility:hidden; } } /* FINAL opening status alignment + typography Fixes: 1. canvas was visually shifted by earlier transform rules 2. caption was anchored to viewport while lifeform had offset/mouse follow 3. startup text felt too plain */ body:not([data-page]) #life, body[data-page="home"] #life{ transform:none !important; } .startup-status{ /* Use the same visual center as the lifeform: 50vw during opening. */ left:50vw !important; top:calc(50vh + 250px) !important; width:min(560px,88vw) !important; min-width:0 !important; transform:translateX(-50%) !important; display:grid !important; justify-items:center !important; align-items:center !important; gap:8px !important; padding:0 !important; border:none !important; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; animation:startupStatusFinalAligned 4.05s cubic-bezier(.16,1,.3,1) forwards !important; } .startup-kicker{ display:block !important; font-family:"Manrope","Inter", -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:10.5px !important; line-height:1 !important; font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:rgba(109,97,223,.45) !important; opacity:.9 !important; } .startup-main, #startupText{ display:block !important; width:100% !important; min-width:0 !important; text-align:center !important; white-space:nowrap !important; font-family:"Avenir Next","SF Pro Display","PingFang SC","Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:clamp(34px,3.1vw,52px) !important; line-height:1.1 !important; font-weight:340 !important; letter-spacing:.16em !important; color:rgba(30,30,38,.72) !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow: 0 18px 48px rgba(109,97,223,.10), 0 1px 0 rgba(255,255,255,.86) !important; transition:opacity .28s ease, transform .28s ease, filter .28s ease !important; } html[lang="en"] .startup-main, html:not([lang="zh-CN"]) .startup-main, html[lang="en"] #startupText, html:not([lang="zh-CN"]) #startupText{ font-family:"Avenir Next","SF Pro Display","Manrope", -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:clamp(32px,2.65vw,48px) !important; letter-spacing:-.035em !important; font-weight:420 !important; } .startup-char{ display:inline-block !important; opacity:0; transform:translateY(14px); filter:blur(8px); animation:startupCharFinal .88s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i) * 95ms); } html[lang="en"] .startup-char, html:not([lang="zh-CN"]) .startup-char{ animation-delay:calc(var(--i) * 46ms); } @keyframes startupCharFinal{ 0%{ opacity:0; transform:translateY(14px); filter:blur(8px); } 62%{ opacity:.82; filter:blur(1.5px); } 100%{ opacity:1; transform:translateY(0); filter:blur(0); } } .startup-main::after{ display:none !important; } .startup-dots{ margin-top:2px !important; margin-left:0 !important; gap:7px !important; transform:none !important; } .startup-dots i{ width:4px !important; height:4px !important; background:rgba(109,97,223,.34) !important; box-shadow:0 0 14px rgba(109,97,223,.12) !important; } @keyframes startupStatusFinalAligned{ 0%{ opacity:0; transform:translateX(-50%) translateY(18px); filter:blur(9px); } 18%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 66%{ opacity:.92; transform:translateX(-50%) translateY(0); filter:blur(0); } 100%{ opacity:0; transform:translateX(-50%) translateY(-10px); filter:blur(10px); visibility:hidden; } } @media(max-width:900px){ .startup-status{ top:calc(50vh + 210px) !important; width:92vw !important; } .startup-main, #startupText{ font-size:30px !important; } } /* Use the same typography system as the homepage for the opening status */ .startup-kicker{ font-family:var(--font-body, Manrope, Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-weight:640 !important; letter-spacing:.12em !important; } .startup-main, #startupText{ font-family:var(--font-display, "Plus Jakarta Sans", Manrope, Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-size:clamp(32px,2.7vw,46px) !important; line-height:1.16 !important; font-weight:560 !important; letter-spacing:-.045em !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-family:var(--font-zh, "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", sans-serif) !important; font-size:clamp(32px,2.55vw,44px) !important; line-height:1.22 !important; font-weight:500 !important; letter-spacing:-.012em !important; } /* Match startup text to the homepage hero display typography */ .startup-main, #startupText{ font-family:var(--font-display, "Plus Jakarta Sans", "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-size:clamp(42px,3.8vw,64px) !important; line-height:1.08 !important; font-weight:760 !important; letter-spacing:-.058em !important; color:#101014 !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow:none !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-family:var(--font-zh, "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", sans-serif) !important; font-size:clamp(44px,3.9vw,66px) !important; line-height:1.12 !important; font-weight:760 !important; letter-spacing:-.04em !important; color:#101014 !important; } .startup-kicker{ font-family:var(--font-body, Manrope, Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-weight:650 !important; color:rgba(109,97,223,.52) !important; } @media(max-width:900px){ .startup-main, #startupText{ font-size:34px !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:36px !important; } } /* Startup text: same font family as homepage hero, but natural weight and spacing */ .startup-main, #startupText{ font-family:var(--font-display, "Plus Jakarta Sans", "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif) !important; font-size:clamp(38px,3.2vw,54px) !important; line-height:1.16 !important; font-weight:520 !important; letter-spacing:-.018em !important; color:#101014 !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow:none !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-family:var(--font-zh, "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", sans-serif) !important; font-size:clamp(38px,3.25vw,56px) !important; line-height:1.22 !important; font-weight:520 !important; letter-spacing:0 !important; color:#101014 !important; } .startup-char{ animation-delay:calc(var(--i) * 52ms) !important; } html[lang="zh-CN"] .startup-char{ animation-delay:calc(var(--i) * 72ms) !important; } @media(max-width:900px){ .startup-main, #startupText{ font-size:32px !important; } html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:34px !important; } } /* Balance Chinese startup text size with English */ html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:clamp(34px,2.85vw,48px) !important; line-height:1.24 !important; font-weight:500 !important; letter-spacing:0 !important; } @media(max-width:900px){ html[lang="zh-CN"] .startup-main, html[lang="zh-CN"] #startupText{ font-size:30px !important; } }