/* ========================================================================== KAAF INVESTMENTS — Design System Bilingual (EN / 简体中文) · Mobile-first · Static ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root{ --ink:#0A0E13; --ink-2:#111821; --ink-3:#1A232F; --ink-4:#243141; --paper:#FBF9F5; --paper-2:#F2EEE6; --paper-3:#E8E2D6; --gold:#BF9550; --gold-lt:#E9BA73; --gold-dk:#8C6F38; --brand-green:#052926; --brand-green-2:#0A3A34; --gold-wash:rgba(174,140,76,.10); --txt:#141C25; --txt-2:#3D4956; --txt-mute:#6B7885; --inv:#F4F1EB; --inv-2:rgba(244,241,235,.74); --inv-3:rgba(244,241,235,.48); --line:rgba(20,28,37,.13); --line-2:rgba(20,28,37,.07); --line-inv:rgba(244,241,235,.16); --line-inv-2:rgba(244,241,235,.08); --f-display:"Cormorant Garamond","Noto Serif SC",Georgia,"Times New Roman",serif; --f-sans:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --shell:1280px; --gut:clamp(20px,5vw,72px); --sec:clamp(72px,10vw,148px); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --nav-h:76px; } html[data-lang="zh"]{ --f-display:"Noto Serif SC","Songti SC","Source Han Serif SC",serif; --f-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; } /* --- 2. Reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ margin:0;background:var(--paper);color:var(--txt); font-family:var(--f-sans);font-size:16px;font-weight:400;line-height:1.72; letter-spacing:.005em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } /* Contain stray horizontal overflow without turning into a scroll container (which breaks programmatic scrolling and scroll anchoring). */ html,body{overflow-x:hidden} @supports (overflow:clip){html,body{overflow-x:clip}} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4,h5{margin:0;font-weight:400;letter-spacing:-.012em} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} ::selection{background:var(--gold);color:#fff} /* --- 3. Language switching ---------------------------------------------- */ html[data-lang="en"] [lang="zh"]{display:none !important} html[data-lang="zh"] [lang="en"]{display:none !important} html[data-lang="zh"] .u-track{letter-spacing:.16em} html[data-lang="zh"] h1,html[data-lang="zh"] h2,html[data-lang="zh"] h3{letter-spacing:.01em} html[data-lang="zh"] body{line-height:1.9} /* --- 4. Layout ----------------------------------------------------------- */ .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)} .shell--wide{max-width:1480px} .shell--narrow{max-width:860px} .section{padding-block:var(--sec)} .section--tight{padding-block:clamp(56px,7vw,96px)} .grid{display:grid;gap:clamp(28px,4vw,56px)} @media(min-width:820px){ .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(2,1fr)} .grid--split{grid-template-columns:1fr 1fr;align-items:center} .grid--split-a{grid-template-columns:.92fr 1.08fr;align-items:start} } @media(min-width:1080px){ .grid--4{grid-template-columns:repeat(4,1fr)} } /* --- 5. Type ------------------------------------------------------------- */ .eyebrow{ display:flex;align-items:center;gap:14px; font-family:var(--f-sans);font-size:11px;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dk); margin-bottom:clamp(20px,2.6vw,30px); } .eyebrow::before{content:"";width:clamp(24px,4vw,48px);height:1px;background:var(--gold);flex:none;opacity:.75} .eyebrow--inv{color:var(--gold-lt)} .eyebrow--center{justify-content:center} .h-display{font-family:var(--f-display);font-size:clamp(2.75rem,8.4vw,6.4rem);line-height:.98;font-weight:300;letter-spacing:-.028em} .h1{font-family:var(--f-display);font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.04;font-weight:300;letter-spacing:-.024em} .h2{font-family:var(--f-display);font-size:clamp(1.95rem,4.4vw,3.4rem);line-height:1.12;font-weight:300;letter-spacing:-.018em} .h3{font-family:var(--f-display);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.22;font-weight:400} .h4{font-family:var(--f-sans);font-size:1.0625rem;font-weight:600;line-height:1.5;letter-spacing:-.005em} html[data-lang="zh"] .h-display{font-size:clamp(2.1rem,6.6vw,4.6rem);font-weight:500;line-height:1.16} html[data-lang="zh"] .h1{font-size:clamp(1.9rem,5vw,3.4rem);font-weight:500;line-height:1.24} html[data-lang="zh"] .h2{font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:500;line-height:1.32} html[data-lang="zh"] .h3{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:500} .lede{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.68;color:var(--txt-2);font-weight:300} html[data-lang="zh"] .lede{font-weight:400;line-height:1.9} .body{color:var(--txt-2)} .small{font-size:.9375rem;line-height:1.68;color:var(--txt-mute)} .u-track{letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:500} .gold{color:var(--gold-dk)} .serif-quote{font-family:var(--f-display);font-weight:300;font-style:italic;line-height:1.3;letter-spacing:-.015em} html[data-lang="zh"] .serif-quote{font-style:normal;font-weight:500;line-height:1.55} .stack>*+*{margin-top:1.1em} .measure{max-width:64ch} /* --- 6. Buttons ---------------------------------------------------------- */ .btn{ --bg:var(--ink);--fg:var(--inv);--bd:var(--ink); position:relative;display:inline-flex;align-items:center;gap:12px; min-height:52px;padding:0 28px; background:var(--bg);color:var(--fg);border:1px solid var(--bd); font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease); overflow:hidden; } .btn .btn__ar{transition:transform .5s var(--ease-out)} .btn:hover{--bg:var(--gold);--bd:var(--gold);--fg:#fff} .btn:hover .btn__ar{transform:translateX(5px)} .btn--ghost{--bg:transparent;--fg:var(--txt);--bd:var(--line)} .btn--ghost:hover{--bg:var(--ink);--bd:var(--ink);--fg:var(--inv)} .btn--inv{--bg:transparent;--fg:var(--inv);--bd:var(--line-inv)} .btn--inv:hover{--bg:var(--gold);--bd:var(--gold);--fg:#fff} .btn--solid-inv{--bg:var(--inv);--fg:var(--ink);--bd:var(--inv)} html[data-lang="zh"] .btn{letter-spacing:.1em;font-size:13px} .link-ar{ display:inline-flex;align-items:center;gap:10px; font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-dk);padding-block:6px; border-bottom:1px solid transparent;transition:border-color .4s var(--ease),gap .4s var(--ease) } .link-ar:hover{border-color:var(--gold);gap:16px} .link-ar--inv{color:var(--gold-lt)} html[data-lang="zh"] .link-ar{letter-spacing:.1em;font-size:13px} /* --- 7. Header ----------------------------------------------------------- */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:120;height:var(--nav-h); display:flex;align-items:center; transition:background .5s var(--ease),height .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease); border-bottom:1px solid transparent; } .hdr__in{width:100%;max-width:1460px;margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);min-width:0} .hdr.is-stuck,.hdr.is-solid{background:rgba(10,14,19,.9);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--line-inv-2)} .hdr.is-stuck{--nav-h:64px} body.nav-open .hdr{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} .brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--inv)} .brand__mark{width:36px;height:36px;flex:none;border-radius:9px;display:block; box-shadow:0 0 0 1px rgba(233,186,115,.22),0 6px 18px -10px rgba(0,0,0,.8); transition:width .45s var(--ease),height .45s var(--ease)} .hdr.is-stuck .brand__mark{width:31px;height:31px;border-radius:8px} .ftr .brand__mark{width:44px;height:44px;border-radius:11px} .brand__txt{display:flex;flex-direction:column;line-height:1} .brand__name{font-family:var(--f-display);font-size:1.32rem;letter-spacing:.3em;font-weight:500;padding-left:.3em} .brand__sub{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--inv-3);margin-top:5px;padding-left:.3em} .nav{display:none} @media(min-width:1180px){ .nav{display:flex;align-items:center;gap:0;min-width:0} .nav__item{position:relative} .nav__link{ display:flex;align-items:center;gap:5px;padding:10px clamp(9px,1vw,14px); font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; color:var(--inv-2);transition:color .35s var(--ease);white-space:nowrap } html[data-lang="zh"] .nav__link{font-size:13px;letter-spacing:.02em} .nav__link:hover,.nav__item:hover>.nav__link,.nav__link[aria-current="page"]{color:var(--inv)} .nav__link[aria-current="page"]{position:relative} .nav__link[aria-current="page"]::after{content:"";position:absolute;left:clamp(9px,1vw,14px);right:clamp(9px,1vw,14px);bottom:2px;height:1px;background:var(--gold)} .nav__cav{width:7px;height:7px;opacity:.6;transition:transform .35s var(--ease)} .nav__item:hover .nav__cav{transform:rotate(180deg)} .nav__sub{ position:absolute;top:100%;left:4px;min-width:246px;padding:10px; background:rgba(13,18,25,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border:1px solid var(--line-inv-2); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s; } .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)} .nav__sub a{ display:block;padding:11px 14px;font-size:13px;color:var(--inv-2); letter-spacing:.02em;transition:color .3s,background .3s,padding-left .3s } .nav__sub a:hover{color:var(--inv);background:rgba(174,140,76,.16);padding-left:19px} } /* Lang toggle */ .lang{display:flex;align-items:center;border:1px solid var(--line-inv);height:36px;flex:none} .lang__b{ height:100%;padding:0 12px;font-size:10.5px;font-weight:600;letter-spacing:.12em; color:var(--inv-3);transition:background .35s var(--ease),color .35s var(--ease) } .lang__b[aria-pressed="true"]{background:var(--gold);color:#fff} .lang__b:not([aria-pressed="true"]):hover{color:var(--inv)} .lang__sep{width:1px;height:16px;background:var(--line-inv)} .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;align-items:flex-end;margin-right:-8px} .burger__b{display:block;height:1px;background:var(--inv);transform-origin:center;transition:transform .5s var(--ease),width .5s var(--ease)} .burger__b:nth-of-type(1){width:26px} .burger__b:nth-of-type(2){width:18px} body.nav-open .burger__b{width:26px} body.nav-open .burger__b:nth-of-type(1){transform:translateY(3.5px) rotate(45deg)} body.nav-open .burger__b:nth-of-type(2){transform:translateY(-3.5px) rotate(-45deg)} @media(min-width:1180px){.burger{display:none}} /* Mobile drawer */ .drawer{ position:fixed;inset:0;z-index:110;background:var(--ink); padding:calc(var(--nav-h) + 22px) var(--gut) 40px; overflow-y:auto;-webkit-overflow-scrolling:touch; opacity:0;visibility:hidden;transform:translateY(-2%); transition:opacity .5s var(--ease),transform .6s var(--ease-out),visibility .5s; } body.nav-open .drawer{opacity:1;visibility:visible;transform:none} .drawer::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 60% at 78% 0%,rgba(174,140,76,.20),transparent 62%) } .drawer__in{position:relative;max-width:520px} .drawer__grp{border-top:1px solid var(--line-inv-2);padding-block:6px} .drawer__grp:first-child{border-top:0} .drawer__a{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 2px;font-family:var(--f-display);font-size:1.8rem;font-weight:300;color:var(--inv); opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s } html[data-lang="zh"] .drawer__a{font-size:1.4rem;font-weight:500} .drawer__a:active{color:var(--gold-lt)} body.nav-open .drawer__a{opacity:1;transform:none} .drawer__idx{font-family:var(--f-sans);font-size:10px;letter-spacing:.2em;color:var(--gold);opacity:.85} .drawer__subs{display:flex;flex-wrap:wrap;gap:8px 10px;padding:0 2px 18px} .drawer__sub{ font-size:12px;letter-spacing:.06em;color:var(--inv-3); border:1px solid var(--line-inv-2);padding:7px 13px;transition:color .3s,border-color .3s } .drawer__sub:active{color:var(--gold-lt);border-color:var(--gold)} .drawer__foot{margin-top:36px;padding-top:26px;border-top:1px solid var(--line-inv-2);color:var(--inv-3);font-size:13px} .drawer__foot a{display:inline-block;padding-block:9px;color:var(--gold-lt)} /* --- 8. Hero ------------------------------------------------------------- */ .hero{position:relative;display:flex;align-items:flex-end;min-height:100svh;color:var(--inv);overflow:hidden;background:var(--ink)} .hero--sub{min-height:clamp(500px,74svh,760px)} .hero__bg{position:absolute;inset:0;overflow:hidden} .hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);animation:kb 26s var(--ease-out) forwards} @keyframes kb{to{transform:scale(1)}} .hero__scrim{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,14,19,.86) 0%,rgba(10,14,19,.42) 34%,rgba(10,14,19,.72) 72%,rgba(10,14,19,.96) 100%), linear-gradient(90deg,rgba(10,14,19,.78) 0%,rgba(10,14,19,.16) 62%) } .hero__in{position:relative;width:100%;padding-block:clamp(96px,14vh,150px) clamp(56px,9vh,104px)} .hero__txt{max-width:min(920px,88%)} .hero__sub{margin-top:clamp(24px,3vw,34px);max-width:600px;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.72;color:var(--inv-2);font-weight:300} html[data-lang="zh"] .hero__sub{font-weight:400} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,4vw,46px)} .hero__rule{width:64px;height:1px;background:var(--gold);margin-top:clamp(28px,3.4vw,38px)} .hero__stats{ position:relative;margin-top:clamp(48px,7vh,84px); display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-inv-2); border-block:1px solid var(--line-inv-2) } @media(min-width:760px){.hero__stats{grid-template-columns:repeat(4,1fr)}} .stat{background:transparent;padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px)} .hero__stats .stat{box-shadow:0 0 0 1px rgba(10,14,19,0)} .stat__n{font-family:var(--f-display);font-size:clamp(1.85rem,3.6vw,2.85rem);line-height:1;font-weight:300;color:var(--inv)} .stat__n .u{color:var(--gold-lt)} .stat__l{margin-top:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--inv-3)} html[data-lang="zh"] .stat__l{letter-spacing:.08em;font-size:12px} .scroll-cue{ position:absolute;left:var(--gut);bottom:22px;display:none;align-items:center;gap:12px; font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--inv-3) } @media(min-width:1080px){.scroll-cue{display:flex}} .scroll-cue__line{width:52px;height:1px;background:var(--line-inv);overflow:hidden;position:relative} .scroll-cue__line::after{content:"";position:absolute;inset:0;background:var(--gold);animation:cue 2.6s var(--ease) infinite} @keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} /* --- 9. Sections & surfaces ---------------------------------------------- */ .dark{background:var(--ink);color:var(--inv);position:relative;overflow:hidden} .dark .lede,.dark .body{color:var(--inv-2)} .dark .small{color:var(--inv-3)} .dark .h2,.dark .h1,.dark .h3{color:var(--inv)} .dark__bg{position:absolute;inset:0;opacity:.16} .dark__bg img{width:100%;height:100%;object-fit:cover} .dark__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(10,14,19,.55) 45%,var(--ink) 100%)} .dark>.shell{position:relative} .tint{background:var(--paper-2)} .sec-head{max-width:780px;margin-bottom:clamp(40px,5.2vw,72px)} .sec-head--center{margin-inline:auto;text-align:center} .sec-head--center .eyebrow{justify-content:center} .sec-head .lede{margin-top:clamp(18px,2vw,24px)} /* --- 10. Cards ----------------------------------------------------------- */ .card{ position:relative;padding:clamp(26px,3vw,40px); background:#fff;border:1px solid var(--line-2); transition:transform .55s var(--ease-out),box-shadow .55s var(--ease),border-color .55s var(--ease) } .card::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)} .card:hover{transform:translateY(-5px);box-shadow:0 22px 54px -30px rgba(20,28,37,.42);border-color:var(--line)} .card:hover::after{transform:scaleX(1)} .card__n{font-family:var(--f-display);font-size:2.2rem;font-weight:300;color:var(--gold);line-height:1;margin-bottom:18px;display:block} .card__t{margin-bottom:12px} .card--inv{background:rgba(244,241,235,.035);border-color:var(--line-inv-2)} .card--inv:hover{background:rgba(244,241,235,.06);border-color:var(--line-inv);box-shadow:none} .card--inv .card__t{color:var(--inv)} .card--inv .body,.card--inv .small{color:var(--inv-2)} .card--flat{background:transparent;border:0;padding:0} .card--flat:hover{transform:none;box-shadow:none} .card--flat::after{display:none} .card-list{margin-top:18px;display:grid;gap:9px} .card-list li{position:relative;padding-left:20px;font-size:.9375rem;line-height:1.62;color:var(--txt-2)} .card-list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--gold)} .card--inv .card-list li{color:var(--inv-2)} /* Rule-list (numbered rows) */ .rows{border-top:1px solid var(--line)} .dark .rows{border-color:var(--line-inv-2)} .row{ display:grid;gap:clamp(10px,2vw,40px);align-items:start; padding-block:clamp(26px,3.4vw,44px);border-bottom:1px solid var(--line); transition:background .5s var(--ease) } .dark .row{border-color:var(--line-inv-2)} @media(min-width:900px){.row{grid-template-columns:96px minmax(200px,1fr) 1.35fr}} .row__n{font-family:var(--f-display);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:300;color:var(--gold);line-height:1} .dark .row__n{color:var(--gold-lt)} /* --- 11. Feature / media pairs ------------------------------------------- */ .figure{position:relative;overflow:hidden;background:var(--paper-3)} .figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)} .figure:hover img{transform:scale(1.045)} .figure--tall{aspect-ratio:4/5} .figure--wide{aspect-ratio:16/10} .figure--sq{aspect-ratio:1/1} .figure__tag{ position:absolute;left:0;bottom:0;padding:12px 18px;background:var(--ink);color:var(--inv); font-size:10px;letter-spacing:.2em;text-transform:uppercase } html[data-lang="zh"] .figure__tag{letter-spacing:.08em;font-size:12px} /* --- 12. Pull quote ------------------------------------------------------ */ .pull{position:relative;padding-left:clamp(20px,3vw,38px);border-left:1px solid var(--gold)} .pull__q{font-family:var(--f-display);font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.34;font-weight:300;font-style:italic;letter-spacing:-.015em} html[data-lang="zh"] .pull__q{font-style:normal;font-weight:500;line-height:1.6;font-size:clamp(1.15rem,2vw,1.6rem)} .pull__by{margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mute)} .dark .pull__by{color:var(--inv-3)} html[data-lang="zh"] .pull__by{letter-spacing:.08em;font-size:12.5px} /* --- 13. Sector tiles ---------------------------------------------------- */ .sector{position:relative;display:block;overflow:hidden;background:var(--ink);min-height:380px;color:var(--inv)} .sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform 1.2s var(--ease-out),opacity .6s var(--ease)} .sector::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,19,.12) 0%,rgba(10,14,19,.5) 42%,rgba(10,14,19,.88) 76%,rgba(10,14,19,.97) 100%)} .sector:hover img{transform:scale(1.07);opacity:.78} .sector__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:380px;padding:clamp(24px,2.6vw,34px)} .sector__n{font-size:10px;letter-spacing:.24em;color:var(--gold-lt);margin-bottom:auto} .sector__t{font-family:var(--f-display);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:400;margin-bottom:10px} html[data-lang="zh"] .sector__t{font-weight:500} .sector__d{font-size:.9rem;line-height:1.6;color:var(--inv-2)} /* --- 14. People ---------------------------------------------------------- */ .person{background:#fff;border:1px solid var(--line-2);transition:box-shadow .55s var(--ease),transform .55s var(--ease-out)} .person:hover{transform:translateY(-4px);box-shadow:0 22px 54px -32px rgba(20,28,37,.4)} .person__mono{ position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:4/3.1;background:var(--ink);overflow:hidden } .person__mono::before{ content:"";position:absolute;inset:0; background:radial-gradient(90% 90% at 50% 8%,rgba(174,140,76,.34),transparent 62%), repeating-linear-gradient(135deg,rgba(244,241,235,.045) 0 1px,transparent 1px 11px) } .person__ini{position:relative;font-family:var(--f-display);font-size:clamp(2.5rem,4.6vw,3.5rem);font-weight:300;letter-spacing:.14em;color:var(--inv);padding-left:.14em} .person__ini .dot{color:var(--gold-lt)} .person__b{padding:clamp(22px,2.4vw,30px)} .person__t{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:9px} html[data-lang="zh"] .person__t{letter-spacing:.08em;font-size:12.5px} .person__n{font-family:var(--f-display);font-size:1.5rem;font-weight:400;margin-bottom:12px} html[data-lang="zh"] .person__n{font-weight:500;font-size:1.3rem} .bio{display:grid;gap:clamp(24px,3vw,48px);padding-block:clamp(34px,4.6vw,62px);border-top:1px solid var(--line)} @media(min-width:860px){.bio{grid-template-columns:300px 1fr}} .bio__card{position:relative} .bio__mono{ display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-width:300px; background:var(--ink);position:relative;overflow:hidden } .bio__mono::before{ content:"";position:absolute;inset:0; background:radial-gradient(85% 85% at 50% 6%,rgba(174,140,76,.36),transparent 60%), repeating-linear-gradient(135deg,rgba(244,241,235,.05) 0 1px,transparent 1px 12px) } .bio__ini{position:relative;font-family:var(--f-display);font-size:3.5rem;font-weight:300;letter-spacing:.14em;color:var(--inv);padding-left:.14em} .bio__ini .dot{color:var(--gold-lt)} .bio__meta{margin-top:20px} .bio__facts{margin-top:22px;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:20px} .bio__facts li{display:flex;gap:12px;font-size:.875rem;color:var(--txt-mute);line-height:1.5} .bio__facts b{flex:none;width:74px;font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk);padding-top:4px} html[data-lang="zh"] .bio__facts b{letter-spacing:.04em;font-size:12px;width:64px} /* --- 15. Framework tabs -------------------------------------------------- */ .tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line-inv-2)} .tab{ position:relative;padding:16px 4px;margin-right:clamp(20px,3.4vw,44px); font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--inv-3); transition:color .4s var(--ease) } html[data-lang="zh"] .tab{letter-spacing:.06em;font-size:13.5px} .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)} .tab:hover{color:var(--inv-2)} .tab[aria-selected="true"]{color:var(--inv)} .tab[aria-selected="true"]::after{transform:scaleX(1)} .tab__i{color:var(--gold);margin-right:9px;font-family:var(--f-display);font-size:14px} .panel{display:none;padding-top:clamp(30px,3.6vw,48px)} .panel[data-active]{display:block;animation:fadeUp .6s var(--ease-out) both} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .panel__grid{display:grid;gap:2px 0;background:var(--line-inv-2);border:1px solid var(--line-inv-2)} @media(min-width:640px){.panel__grid{grid-template-columns:repeat(2,1fr);gap:1px}} @media(min-width:1020px){.panel__grid{grid-template-columns:repeat(4,1fr)}} .panel__cell{background:var(--ink);padding:clamp(18px,2vw,26px);display:flex;gap:14px;align-items:flex-start} .panel__cell i{font-style:normal;font-family:var(--f-display);color:var(--gold);font-size:.95rem;flex:none;padding-top:2px;opacity:.9} .panel__cell span{font-size:.9rem;line-height:1.55;color:var(--inv-2)} /* --- 16. Portfolio ------------------------------------------------------- */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(32px,4vw,52px)} .filter{ min-height:44px;padding:0 20px;border:1px solid var(--line); font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute); transition:all .4s var(--ease) } html[data-lang="zh"] .filter{letter-spacing:.06em;font-size:13px} .filter:hover{border-color:var(--txt);color:var(--txt)} .filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--inv)} .pf{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media(min-width:700px){.pf{grid-template-columns:repeat(3,1fr)}} @media(min-width:1020px){.pf{grid-template-columns:repeat(4,1fr)}} .pf__i{ position:relative;background:#fff;min-height:132px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; padding:22px 16px;text-align:center; transition:background .5s var(--ease),color .5s var(--ease); animation:fadeUp .5s var(--ease-out) both } .pf__i::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--gold);transform:translateX(-50%);transition:width .5s var(--ease-out)} .pf__i:hover{background:var(--paper-2)} .pf__i:hover::after{width:44px} .pf__n{font-family:var(--f-display);font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:400;letter-spacing:.01em;line-height:1.2} .pf__s{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);opacity:.9} html[data-lang="zh"] .pf__s{letter-spacing:.06em;font-size:11.5px} .pf__i[hidden]{display:none} /* --- 17. Forms ----------------------------------------------------------- */ .form{display:grid;gap:20px} @media(min-width:700px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}} .field{display:flex;flex-direction:column;gap:9px} .field label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute)} html[data-lang="zh"] .field label{letter-spacing:.04em;font-size:12.5px} .field input,.field textarea,.field select{ width:100%;min-height:52px;padding:14px 16px; background:#fff;border:1px solid var(--line);color:var(--txt); font-family:var(--f-sans);font-size:15px;border-radius:0; transition:border-color .35s var(--ease),box-shadow .35s var(--ease);appearance:none } .field textarea{min-height:148px;resize:vertical;line-height:1.6} .field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)} .field select{background-image:linear-gradient(45deg,transparent 50%,var(--txt-mute) 50%),linear-gradient(135deg,var(--txt-mute) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat} .form__note{font-size:12.5px;color:var(--txt-mute);line-height:1.6} .form__ok{ display:none;align-items:center;gap:12px;padding:16px 20px; background:var(--gold-wash);border:1px solid rgba(174,140,76,.34);color:var(--gold-dk); font-size:13.5px;letter-spacing:.02em } .form__ok.is-on{display:flex;animation:fadeUp .5s var(--ease-out) both} /* --- 18. Contact info ---------------------------------------------------- */ .info{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media(min-width:760px){.info{grid-template-columns:repeat(3,1fr)}} .info__c{background:#fff;padding:clamp(24px,2.8vw,34px)} .info__l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:14px} html[data-lang="zh"] .info__l{letter-spacing:.06em;font-size:12px} .info__v{font-family:var(--f-display);font-size:1.22rem;line-height:1.45;font-weight:400} html[data-lang="zh"] .info__v{font-weight:500;font-size:1.1rem} .info__v a{display:inline-block;padding-block:6px;border-bottom:1px solid var(--line);transition:border-color .35s,color .35s} .info__v a:hover{color:var(--gold-dk);border-color:var(--gold)} /* --- 19. CTA band -------------------------------------------------------- */ .band{position:relative;overflow:hidden;background:var(--ink);color:var(--inv);text-align:center;padding-block:clamp(72px,9vw,132px)} .band__bg{position:absolute;inset:0;opacity:.2} .band__bg img{width:100%;height:100%;object-fit:cover} .band__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 50%,rgba(10,14,19,.5),var(--ink))} .band>.shell{position:relative} /* --- 20. Footer ---------------------------------------------------------- */ .ftr{background:var(--ink);color:var(--inv);padding-block:clamp(56px,7vw,88px) 34px;border-top:1px solid var(--gold)} .ftr__top{display:grid;gap:clamp(34px,4vw,56px)} @media(min-width:880px){.ftr__top{grid-template-columns:1.5fr 1fr 1fr 1.2fr}} .ftr__brand .brand{color:var(--inv);margin-bottom:20px} .ftr__tag{font-family:var(--f-display);font-size:1.32rem;font-weight:300;font-style:italic;color:var(--gold-lt);margin-bottom:14px} html[data-lang="zh"] .ftr__tag{font-style:normal;font-weight:500;font-size:1.2rem} .ftr__h{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--inv-3);margin-bottom:20px} html[data-lang="zh"] .ftr__h{letter-spacing:.08em;font-size:12px} .ftr__l{display:grid;gap:2px} .ftr__l a{display:block;padding-block:9px;font-size:14px;color:var(--inv-2);transition:color .3s,padding-left .35s} .ftr__l a:hover{color:var(--gold-lt);padding-left:5px} .ftr__addr{font-size:14px;color:var(--inv-2);line-height:1.85;font-style:normal} .ftr__addr a{display:inline-block;padding-block:6px;border-bottom:1px solid var(--line-inv);transition:color .3s,border-color .3s} .ftr__addr a:hover{color:var(--gold-lt);border-color:var(--gold)} .ftr__soc{display:flex;gap:10px;margin-top:22px} .ftr__soc a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-inv);color:var(--inv-2);transition:all .4s var(--ease)} .ftr__soc a:hover{background:var(--gold);border-color:var(--gold);color:#fff} .ftr__bot{ margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line-inv-2); display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between; font-size:12px;color:var(--inv-3) } .ftr__bot nav{display:flex;flex-wrap:wrap;gap:4px 24px} .ftr__bot nav a{display:inline-block;padding-block:10px} .ftr__bot a:hover{color:var(--gold-lt)} /* --- 21. Utilities & motion ---------------------------------------------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.09s} .reveal[data-d="2"]{transition-delay:.18s} .reveal[data-d="3"]{transition-delay:.27s} .reveal[data-d="4"]{transition-delay:.36s} .reveal[data-d="5"]{transition-delay:.45s} .grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.028;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .top{ position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90; width:48px;height:48px;display:grid;place-items:center; background:var(--ink);color:var(--inv);border:1px solid var(--line-inv); opacity:0;visibility:hidden;transform:translateY(12px); transition:all .5s var(--ease) } .top.is-on{opacity:1;visibility:visible;transform:none} .top:hover{background:var(--gold);border-color:var(--gold)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:absolute;left:12px;top:-64px;z-index:300;background:var(--gold);color:#fff;padding:12px 18px;font-size:12px;letter-spacing:.1em;transition:top .3s} .skip:focus{top:12px} .divider{height:1px;background:var(--line);margin-block:clamp(40px,5vw,64px)} .dark .divider{background:var(--line-inv-2)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} .hero__bg img{transform:none;animation:none} } @media print{.hdr,.drawer,.top,.grain,.scroll-cue{display:none !important}body{background:#fff}} /* --- 22. Media rows ------------------------------------------------------ */ .mrows{border-top:1px solid var(--line)} .mrow{display:grid;gap:8px 26px;align-items:start;padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease),background .45s var(--ease)} @media(min-width:880px){.mrow{grid-template-columns:180px 1fr 110px;align-items:center}} a.mrow:hover{padding-left:12px;background:rgba(174,140,76,.05)} .mrow__src{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk)} html[data-lang="zh"] .mrow__src{letter-spacing:.06em;font-size:12px} .mrow__t{font-family:var(--f-display);font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.34;font-weight:400;transition:color .35s var(--ease)} html[data-lang="zh"] .mrow__t{font-weight:500;font-size:clamp(1rem,1.5vw,1.2rem)} a.mrow:hover .mrow__t{color:var(--gold-dk)} .mrow__gloss{font-size:.85rem;color:var(--txt-mute);margin-top:7px;line-height:1.55} .mrow__m{font-size:11.5px;letter-spacing:.12em;color:var(--txt-mute);font-variant-numeric:tabular-nums} @media(min-width:880px){.mrow__m{justify-self:end;text-align:right}} .mrow__ar{display:none} @media(min-width:880px){a.mrow .mrow__ar{display:inline-block;margin-left:8px;opacity:0;transform:translateX(-4px);transition:all .4s var(--ease)} a.mrow:hover .mrow__ar{opacity:1;transform:none}} /* --- 23. Note / callout --------------------------------------------------- */ .note{border-left:1px solid var(--gold);padding:4px 0 4px clamp(16px,2vw,24px);font-size:.9rem;line-height:1.7;color:var(--txt-mute)} .dark .note{color:var(--inv-3)} .legal{max-width:78ch} .legal h2{font-family:var(--f-display);font-size:clamp(1.4rem,2.3vw,1.9rem);font-weight:400;margin-top:clamp(38px,4vw,56px);margin-bottom:14px} html[data-lang="zh"] .legal h2{font-weight:500} .legal h2:first-of-type{margin-top:0} .legal p,.legal li{color:var(--txt-2);margin-bottom:14px} .legal ul{margin:0 0 18px} .legal li{position:relative;padding-left:20px} .legal li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--gold)} .legal a{color:var(--gold-dk);border-bottom:1px solid var(--line)} /* --- 24. Download nav accent --------------------------------------------- */ @media(min-width:1180px){ .nav__link[href="download.html"]{ margin-inline:7px;padding:8px 13px;border:1px solid rgba(233,186,115,.42); color:var(--gold-lt);transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease) } .nav__link[href="download.html"]:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#06201D} .nav__link[href="download.html"][aria-current="page"]{background:var(--gold-lt);border-color:var(--gold-lt);color:#06201D} .nav__link[href="download.html"][aria-current="page"]::after{display:none} } .drawer__a[href="download.html"]{color:var(--gold-lt)} /* --- 25. Download page --------------------------------------------------- */ .dl-hero{ position:relative;overflow:hidden;color:var(--inv); background:radial-gradient(120% 90% at 50% -10%,var(--brand-green-2) 0%,var(--brand-green) 42%,#03110F 100%); padding-block:calc(var(--nav-h) + clamp(56px,8vw,96px)) clamp(56px,8vw,96px); text-align:center } .dl-hero::after{ content:"";position:absolute;inset:auto 0 0 0;height:1px; background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);opacity:.55 } .dl-hero__grid{ position:absolute;inset:0;pointer-events:none;opacity:.35; background-image:linear-gradient(rgba(233,186,115,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,186,115,.07) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%); mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%) } .dl-hero>.shell{position:relative} .dl-icon{ width:clamp(104px,15vw,132px);height:clamp(104px,15vw,132px); margin:0 auto clamp(24px,3vw,34px);border-radius:26px;display:block; box-shadow:0 0 0 1px rgba(233,186,115,.34),0 30px 70px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(233,186,115,.5) } .dl-badge{ display:inline-flex;align-items:center;gap:10px;margin-bottom:22px; padding:9px 18px;border:1px solid rgba(233,186,115,.4);border-radius:999px; background:rgba(233,186,115,.08);color:var(--gold-lt); font-size:11.5px;letter-spacing:.14em;text-transform:uppercase } html[data-lang="zh"] .dl-badge{letter-spacing:.06em;font-size:13px} .dl-badge svg{flex:none} .dl-sub{max-width:56ch;margin:22px auto 0;color:var(--inv-2);font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.7;font-weight:300} html[data-lang="zh"] .dl-sub{font-weight:400} .dl-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:clamp(30px,4vw,42px)} .dl-btn{ display:flex;align-items:center;gap:14px;min-width:250px; padding:15px 26px;border:1px solid transparent;border-radius:12px; text-align:left;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),background .4s var(--ease) } .dl-btn__ic{flex:none;width:28px;height:28px} .dl-btn__t{display:flex;flex-direction:column;line-height:1.25} .dl-btn__s{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.72} html[data-lang="zh"] .dl-btn__s{letter-spacing:.04em;font-size:12px} .dl-btn__b{font-size:1.06rem;font-weight:600;margin-top:3px} .dl-btn--a{background:var(--gold-lt);color:#06201D} .dl-btn--a:hover{transform:translateY(-3px);box-shadow:0 20px 44px -20px rgba(233,186,115,.7)} .dl-btn--i{background:rgba(244,241,235,.06);color:var(--inv);border-color:rgba(244,241,235,.2)} .dl-btn--i:hover{transform:translateY(-3px);background:rgba(244,241,235,.12);border-color:rgba(244,241,235,.4)} .dl-meta{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;margin-top:clamp(26px,3vw,36px)} .dl-meta div{text-align:center} .dl-meta dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--inv-3);margin-bottom:7px} html[data-lang="zh"] .dl-meta dt{letter-spacing:.06em;font-size:12px} .dl-meta dd{margin:0;font-family:var(--f-display);font-size:1.16rem;color:var(--inv);font-variant-numeric:tabular-nums} /* trust strip */ .trust{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media(min-width:700px){.trust{grid-template-columns:repeat(2,1fr)}} @media(min-width:1080px){.trust{grid-template-columns:repeat(4,1fr)}} .trust__c{background:#fff;padding:clamp(24px,2.6vw,32px)} .trust__ic{ width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px; background:var(--brand-green);color:var(--gold-lt) } .trust__t{font-size:1.02rem;font-weight:600;margin-bottom:9px} html[data-lang="zh"] .trust__t{font-weight:500;font-size:1.06rem} /* install steps */ .steps{counter-reset:st} .step{ display:grid;gap:6px 20px;grid-template-columns:auto 1fr;align-items:start; padding-block:16px;border-bottom:1px solid var(--line) } .dark .step{border-color:var(--line-inv-2)} .step:last-child{border-bottom:0} .step::before{ counter-increment:st;content:counter(st,decimal-leading-zero); font-family:var(--f-display);font-size:1.05rem;color:var(--gold-dk); width:30px;padding-top:2px } .dark .step::before{color:var(--gold-lt)} .step p{font-size:.95rem;line-height:1.65;color:var(--txt-2)} .dark .step p{color:var(--inv-2)} /* --- 26. Live chat button ------------------------------------------------ */ .chat-btn{ display:inline-flex;align-items:center;gap:13px;min-height:56px;padding:0 28px; background:var(--brand-green);color:var(--gold-lt);border:1px solid var(--brand-green); font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease-out),box-shadow .45s var(--ease) } html[data-lang="zh"] .chat-btn{letter-spacing:.08em;font-size:14px} .chat-btn:hover{background:var(--brand-green-2);transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(5,41,38,.9)} .chat-btn__dot{position:relative;width:8px;height:8px;border-radius:50%;background:#4ADE80;flex:none} .chat-btn__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(74,222,128,.55);animation:pulse 2.2s var(--ease) infinite} @keyframes pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}} /* --- 27. Placeholder-link toast ------------------------------------------ */ .toast{ position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);z-index:220; max-width:min(88vw,520px);padding:15px 22px; background:var(--ink);color:var(--inv);border:1px solid var(--gold); font-size:13.5px;line-height:1.6; opacity:0;visibility:hidden;transition:all .45s var(--ease-out);box-shadow:0 24px 60px -24px rgba(0,0,0,.8) } .toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)} .toast code{color:var(--gold-lt);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;word-break:break-all} /* --- 28. Download access gate -------------------------------------------- */ body.gate-open{overflow:hidden} .gate[hidden]{display:none !important} .gate{ position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px; background:radial-gradient(120% 90% at 50% -10%,var(--brand-green-2) 0%,var(--brand-green) 46%,#03110F 100%); animation:gateIn .5s var(--ease-out) both } .gate::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.4; background-image:linear-gradient(rgba(233,186,115,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,186,115,.07) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%); mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%) } .gate.is-out{animation:gateOut .5s var(--ease) forwards} @keyframes gateIn{from{opacity:0}to{opacity:1}} @keyframes gateOut{from{opacity:1}to{opacity:0;visibility:hidden}} .gate__card{ position:relative;width:100%;max-width:432px;text-align:center;color:var(--inv); padding:clamp(30px,5vw,46px) clamp(24px,4vw,40px); background:rgba(6,26,23,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid rgba(233,186,115,.24); box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 90px -40px rgba(233,186,115,.4) } .gate__card.shake{animation:shake .45s var(--ease)} @keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}} .gate__logo{width:clamp(64px,10vw,80px);height:auto;margin:0 auto 22px;border-radius:18px; box-shadow:0 0 0 1px rgba(233,186,115,.3),0 20px 44px -22px rgba(0,0,0,.9)} .gate__lock{ display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 15px; border:1px solid rgba(233,186,115,.36);border-radius:999px;color:var(--gold-lt); font-size:10.5px;letter-spacing:.16em;text-transform:uppercase } html[data-lang="zh"] .gate__lock{letter-spacing:.08em;font-size:12px} .gate__title{font-family:var(--f-display);font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:300;letter-spacing:-.01em;margin-bottom:12px} html[data-lang="zh"] .gate__title{font-weight:500} .gate__sub{color:var(--inv-2);font-size:.95rem;line-height:1.65;margin-bottom:26px;font-weight:300} html[data-lang="zh"] .gate__sub{font-weight:400} .gate__field{position:relative;display:flex;align-items:center} .gate__input{ width:100%;min-height:56px;padding:15px 52px 15px 18px; background:rgba(244,241,235,.05);border:1px solid rgba(244,241,235,.2);color:var(--inv); font-family:var(--f-sans);font-size:17px;letter-spacing:.06em;text-align:center;border-radius:0; transition:border-color .35s var(--ease),box-shadow .35s var(--ease) } .gate__input::placeholder{color:var(--inv-3);letter-spacing:.3em} .gate__input:focus{outline:0;border-color:var(--gold-lt);box-shadow:0 0 0 3px rgba(233,186,115,.16)} .gate__eye{ position:absolute;right:8px;top:50%;transform:translateY(-50%); width:40px;height:40px;display:grid;place-items:center;color:var(--inv-3); transition:color .3s var(--ease) } .gate__eye:hover,.gate__eye[aria-pressed="true"]{color:var(--gold-lt)} .gate__submit{ width:100%;min-height:54px;margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:12px; background:var(--gold-lt);color:#06201D;border:1px solid var(--gold-lt); font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),background .4s var(--ease) } html[data-lang="zh"] .gate__submit{letter-spacing:.08em;font-size:13.5px} .gate__submit:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(233,186,115,.7)} .gate__err{margin-top:16px;color:#F3B4A6;font-size:13px;letter-spacing:.02em} .gate__hint{margin-top:24px;color:var(--inv-3);font-size:12.5px;line-height:1.6} .gate__hint a{color:var(--gold-lt);border-bottom:1px solid rgba(233,186,115,.4)} @media(prefers-reduced-motion:reduce){.gate,.gate.is-out,.gate__card.shake{animation:none}}