/* ============================================================ 白里卿 · 个人网站 设计基准画布 1280×720（与 Canva 原稿逐像素对齐） ============================================================ */ /* ---------- 字体（取自原稿） ---------- */ @font-face{font-family:Display;src:url(font/display.woff) format('woff');font-weight:100 900;font-display:block} @font-face{font-family:CJKMing;src:url(font/cjk.woff) format('woff');font-weight:100 900;font-display:swap} @font-face{font-family:Mono;src:url(font/mono-reg.woff) format('woff');font-weight:400;font-display:block} @font-face{font-family:Mono;src:url(font/mono-bold.woff) format('woff');font-weight:700;font-display:block} @font-face{font-family:Sans;src:url(font/sans-reg.woff) format('woff');font-weight:400;font-display:block} @font-face{font-family:Sans;src:url(font/sans-bold.woff) format('woff');font-weight:700;font-display:block} :root{ --orange:#e25523; --green:#b1e367; --green-dark:#447200; --cream:#f4f3eb; --yellow:#ffde59; --dark:#132225; --grey:#b7b6af; --s:1; /* 内容缩放（保证不裁切） */ --sc:1; /* 背景缩放（cover，保证不留白） */ } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ background:var(--cream); font-family:Sans,"PingFang SC","Microsoft YaHei",sans-serif; color:#000;overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* ---------- 一屏一页 ---------- */ #scroller{ height:100dvh;overflow-y:scroll;overflow-x:hidden; scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none; } #scroller::-webkit-scrollbar{display:none} .screen{ position:relative;height:100dvh;width:100%;overflow:hidden; scroll-snap-align:start;scroll-snap-stop:always; background-color:var(--cream); } /* 满屏背景层：永远 cover，不会出现白边 */ .screen::before{ content:"";position:absolute;inset:0;z-index:0; background-position:center;background-repeat:no-repeat;background-size:cover; } /* ---------- 画布 ---------- */ .stage{ position:absolute;left:50%;top:50%;z-index:1; width:1280px;height:720px; transform:translate(-50%,-50%) scale(var(--s)); transform-origin:center center; } .stage img,.stage .box,.stage .t{position:absolute} .bgimg{object-fit:cover;z-index:0} #home .grid{width:566px;height:566px;z-index:0} .stage img{display:block} .t{white-space:pre} /* 描边文字（描边在下、实心在上，和原稿一致） */ .stroked{position:relative;z-index:0} .stroked::before{ content:attr(data-t);position:absolute;left:0;top:0;width:100%; color:transparent;-webkit-text-stroke:var(--stw) var(--stc);z-index:-1; letter-spacing:inherit;text-align:inherit; } /* ============================================================ 固定层：logo + 导航 + 右侧圆点 ============================================================ */ #chrome{position:fixed;inset:0;pointer-events:none;z-index:50} #chrome a{pointer-events:auto} .logo{position:absolute;left:27px;top:13.95px;text-decoration:none;display:block; transition:transform .3s cubic-bezier(.2,.8,.3,1)} .logo:hover{transform:scale(1.04)} .logo b{display:block;font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:28px;line-height:38.61px;color:var(--orange)} .logo span{display:block;margin-left:6px;margin-top:-4.09px; font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:400;font-size:17.93px;line-height:24.44px;color:var(--grey)} #nav{position:absolute;left:43px;top:550.5px} #nav a{ display:block;width:max-content; font-family:Mono,"PingFang SC","Microsoft YaHei",ui-monospace,sans-serif;font-weight:700;font-size:19.46px;line-height:27.01px; color:var(--green);text-decoration:none; --stw:1.6px;--stc:var(--green-dark); transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s ease; transform-origin:left center; } #nav a:hover{transform:translateX(7px) scale(1.05)} #nav a.active{filter:drop-shadow(0 0 7px rgba(177,227,103,.6))} body.dark-nav #nav a{--stc:#ffffff} #dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:50; display:flex;flex-direction:column;gap:11px} #dots button{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--green-dark); background:transparent;cursor:pointer;padding:0;transition:all .3s ease} #dots button:hover{transform:scale(1.25)} #dots button.active{background:var(--green);border-color:var(--green);transform:scale(1.35)} body.dark-nav #dots button{border-color:rgba(255,255,255,.75)} body.dark-nav #dots button.active{background:var(--green);border-color:var(--green)} /* ============================================================ 01 HOME ============================================================ */ #home::before,#work::before,#thinking::before{background-image:url(img/paper-bg.jpg)} #home::after{ /* 方格纸，跟着背景一起缩放平铺 */ content:"";position:absolute;inset:0;z-index:0; background:url(img/grid-tile.webp) center center repeat; background-size:calc(566px * var(--sc)) calc(566px * var(--sc)); } #home .tri{background:var(--yellow)} #home .tri.right{clip-path:polygon(0 0,100% 50%,0 100%)} #home .tri.left{clip-path:polygon(100% 0,0 50%,100% 100%)} #home .dot{background:var(--cream);border-radius:50%} /* 撕纸边缘的绿色照片（原稿的剪切路径） */ .torn-wrap{ position:absolute;left:289px;top:119px;width:680.068px;height:428px; transform:scale(1.0127);transform-origin:0 0; clip-path:path("M557.9614200148824,419.8273266956481C528.0443558886815,427.8899640069181 502.8954941505363,418.0967606226335 476.50689979149666,426.7595942598046C474.4497610469356,431.44112560183237 458.1152620089962,418.2468097041088 438.04794167297894,423.16841957649694C410.4468615638337,418.67695040433784 362.9691892141934,427.229748048427 335.76318873148716,419.3071565465339C295.1381043852527,405.0024774458935 246.82940247655134,407.6833543682513 201.34075169450006,406.73304351890806C143.91797150691508,389.86752676109006 95.06433218243593,385.85621464965175 38.772297132589934,370.5111952507829C-7.022297013041648,364.6292712569532 4.495733680166746,391.0979292291871 1.4168372810222123,297.4272893002384C1.6756825535167137,201.36586733978405 2.6974402081000757,112.02664422942082 0,6.572149768615902C12.097610630267006,3.661197587996073 33.159441750078706,7.652503155237694 57.59988484771273,9.623147758612628C77.93967389161885,7.652503155237694 110.17272203487532,1.5605104473425886 137.4332162591594,3.3911092413406254C133.82300587963152,1.7405693451128872 165.11603698067128,1.9406347870798857 179.9792049960106,3.3210863366521757C219.05121770727837,-8.432758378908987 215.27752610301712,14.754826345066142 249.66307703859587,15.825176459589585C249.02277557505698,21.82713971859954 283.5036905583969,11.843874164446314 289.1029225055136,24.78810825971112C317.39879781977555,29.169541438788386 332.68429233234264,58.68919740101902 364.5222608491602,64.95124573458608C366.8246214308214,68.13228626186135 388.9082102052164,61.34006450708175 418.82527433141735,71.20329079605479C493.80866274244164,69.51273781143364 591.2843429896943,69.83284251858085 676.5398016881302,69.88285887907259C681.9388833376828,177.10793250128546 673.8696083508189,283.05258729490953 680.0682714552913,393.57874070957786C667.3576062322743,438.1533211798251 709.7779895873906,430.4007853036039 557.9614200148824,419.8273266956481Z"); } .torn-wrap img{position:absolute;left:0;top:-8.31px;width:680.068px;height:453.379px;object-fit:cover} #home .bw{ left:857px;top:322px;width:218px;height:291px;object-fit:cover; -webkit-mask-image:radial-gradient(circle 24px at 154px 0,transparent 0 23px,#000 24.5px); mask-image:radial-gradient(circle 24px at 154px 0,transparent 0 23px,#000 24.5px); } #home .tri{z-index:5} #home .bai,#home .liqing{font-family:Display,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--orange);--stw:1.9px;--stc:#111} #home .bai {left:303px;top:184.6px;font-size:104.29px;line-height:145.97px;letter-spacing:8.24px} #home .liqing{left:268px;top:309.4px;font-size:124.24px;line-height:173.77px;letter-spacing:9.81px} #home .vtext{font-family:CJKMing,"Songti SC","Source Han Serif SC",SimSun,serif;writing-mode:vertical-rl;text-orientation:upright;color:#000} #home .v1{left:1208px;top:3px;font-size:28.7px;line-height:34px} #home .v2{left:1157px;top:10px;font-size:30.14px;line-height:34px} #home .v3{left:1157px;top:76px;font-size:30.14px;line-height:34px} #home .vai{left:1149px;top:62.3px;font-family:Display,"PingFang SC","Microsoft YaHei",sans-serif;font-size:28.74px;line-height:39.35px; letter-spacing:3.02px;color:var(--orange);--stw:.5px;--stc:#111} /* ============================================================ 02 ABOUT ============================================================ */ #about::before{background-image:url(img/about-tree.jpg?v=2)} #about .card{left:656px;top:279px;width:518px;height:250px;background:#f7dd95; box-shadow:9px 11px 0 rgba(60,50,35,.14)} #about .card-title{ left:656px;top:300.9px;width:518px;text-align:center; font-family:Display,"PingFang SC","Microsoft YaHei",sans-serif;font-size:23.67px;line-height:32.9px;letter-spacing:1.87px; color:var(--orange);--stw:.55px;--stc:#111;white-space:normal; } #about .card-body{ left:656px;top:348px;width:518px;text-align:center;white-space:pre-line; font-family:CJKMing,"Songti SC","Source Han Serif SC",SimSun,serif;font-size:21.1px;line-height:34.71px;color:#000; } /* ============================================================ 03 WORK ============================================================ */ .sec-title{font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:35px;line-height:48.79px;color:#000} .card{position:absolute;display:block;text-decoration:none;color:inherit; transition:transform .4s cubic-bezier(.2,.8,.3,1),filter .4s ease} .card>*{position:absolute} .card:hover{transform:translateY(-5px)} .card:hover .arrow{transform:translateX(5px) rotate(-3deg)} .card .arrow{transition:transform .4s cubic-bezier(.2,.8,.3,1)} .card .shot{border-radius:9px;box-shadow:0 6px 16px rgba(60,45,30,.22)} .card .w-name{font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:18.5px;line-height:26px;white-space:nowrap} .card .w-sub {font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:16.23px;line-height:22.51px} .card .w-desc{font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:400;font-size:15.4px;line-height:23px;white-space:pre-line} .card .num,.card .paper-card{filter:drop-shadow(0 3px 6px rgba(60,45,30,.14))} /* ============================================================ 04 THINKING ============================================================ */ .post{position:absolute;left:540px;width:668px;height:86px;display:block; text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.3,1)} .post>*{position:absolute} .post .no{left:0;font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:36.5px;line-height:50.93px;color:var(--orange)} .post .h {left:61px;font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:22.49px;line-height:30.93px;color:#000; transition:color .3s ease} .post .d {left:61px;font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:400;font-size:16.24px;line-height:22.53px;color:#000} .post .rule{left:0;width:668px;height:1.6px;background:rgba(226,85,35,.4)} .post:hover{transform:translateX(5px)} .post:hover .h{color:var(--orange)} .post .h{background-image:linear-gradient(var(--orange),var(--orange)); background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px; transition:background-size .34s cubic-bezier(.2,.8,.3,1),color .28s} .post:hover .h{background-size:100% 1.5px} .more{position:absolute;left:1135px;top:534.5px;display:flex;align-items:center;gap:9px; font-family:Sans,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700;font-size:16.26px;line-height:22.56px; color:var(--green);text-decoration:none} .more svg{transition:transform .3s ease} .more:hover svg{transform:translateX(4px)} /* ============================================================ 05 LIFE ============================================================ */ #life{background-color:var(--cream)} #life::before{background-image:url(img/paper-bg.jpg)} #life .p{ position:absolute;left:613.5px;width:600px; font-family:CJKMing,"Songti SC","PingFang SC",serif; font-weight:400;font-size:24.2px;line-height:60px;color:#181616;white-space:pre-line; } #life .p.sign{left:812.5px} /* 左半边的照片：明信片贴纸的感觉 */ #life .photo{left:-57.1px;top:0;width:572.7px;height:726.8px;overflow:hidden;opacity:.68} #life .photo img{position:absolute} #life .lines{left:600px;top:250px;width:520px;height:350px;overflow:hidden} #life .lines img{position:absolute} #life .grid{left:131px;top:18px;width:330px;height:50px;display:flex;gap:8.1px} #life .grid i{display:block;width:47px;height:50px;border:1.5px solid #707070;flex:none} #life .tilt{transform:rotate(-10.8deg)} /* 我 的 生 活 */ #life .life-title{ font-family:Sans,"PingFang SC",sans-serif;font-weight:700;font-size:37.3px;line-height:52px; color:#000;letter-spacing:17.8px; } /* ============================================================ 06 CONNECT ============================================================ */ #connect{background-color:#070b16} #connect::before{background-image:url(img/space-bg.jpg)} /* 星球 / 轨道 */ #connect .space{position:absolute;left:0;top:0;width:1280px;height:720px;z-index:0;pointer-events:none;overflow:visible} @keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-14px)}} @keyframes drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,10px)}} #connect .drift {transform-box:fill-box;transform-origin:center;animation:drift 14s ease-in-out infinite} #connect .drift2{transform-box:fill-box;transform-origin:center;animation:drift-b 18s ease-in-out infinite} /* 会眨眼的星星 */ #connect .twinkles{position:absolute;left:0;top:0;width:1280px;height:720px;z-index:0;pointer-events:none} #connect .twinkles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff; box-shadow:0 0 7px 2px rgba(255,255,255,.65);opacity:.25;animation:twk 3.6s ease-in-out infinite} @keyframes twk{0%,100%{opacity:.18;transform:scale(.8)}50%{opacity:1;transform:scale(1.35)}} #connect .twinkles i:nth-child(2){animation-delay:.7s} #connect .twinkles i:nth-child(3){animation-delay:1.5s} #connect .twinkles i:nth-child(4){animation-delay:2.2s} #connect .twinkles i:nth-child(5){animation-delay:.35s} #connect .twinkles i:nth-child(6){animation-delay:1.9s} #connect .twinkles i:nth-child(7){animation-delay:2.9s} #connect .twinkles i:nth-child(8){animation-delay:1.1s} /* 偶尔划过的流星 */ #connect .shooting{ position:absolute;left:980px;top:60px;width:150px;height:2px;z-index:0;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95)); border-radius:2px;opacity:0;transform:rotate(24deg); animation:shoot 11s ease-in infinite; } @keyframes shoot{ 0%,72%{opacity:0;transform:translate(0,0) rotate(24deg) scaleX(.4)} 76%{opacity:.9} 86%,100%{opacity:0;transform:translate(-540px,240px) rotate(24deg) scaleX(1)} } #connect .hello{left:472px;top:165.7px;font-family:Mono,"PingFang SC","Microsoft YaHei",ui-monospace,sans-serif;font-weight:700; font-size:60.45px;line-height:83.62px;color:var(--green);white-space:pre-line} .crow{position:absolute;left:482px;display:flex;align-items:center;gap:14px; font-family:Mono,"PingFang SC","Microsoft YaHei",ui-monospace,sans-serif;font-weight:400;font-size:17.27px;line-height:23.71px; color:var(--green);text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s ease} .crow:hover{transform:translateX(4px);filter:brightness(1.08)} .crow[aria-disabled]{cursor:default} .crow[aria-disabled]:hover{transform:none;filter:none} .crow i{display:block;background:var(--green);flex:none} .crow .ic-img{display:block;width:23px;height:23px;flex:none;position:static} .crow .ic-mail{width:26px;height:19px;background:var(--green); -webkit-mask:url(img/st/icon-mail.webp) no-repeat center/contain;mask:url(img/st/icon-mail.webp) no-repeat center/contain} .crow .ic-doc {width:21px;height:26px;background:url(img/st/icon-doc.webp) no-repeat center/contain} .crow .ic-in {width:28px;height:24px;-webkit-mask:url(img/icon-linkedin.svg) no-repeat center/contain;mask:url(img/icon-linkedin.svg) no-repeat center/contain} #connect .pixel{image-rendering:pixelated} #connect .wave{position:absolute;left:620px;top:545px;width:680px;height:120px;overflow:visible} /* ---------- 竖屏手机：提示横屏 ---------- */ #rotate{display:none} body.portrait #rotate{ display:flex;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60; align-items:center;gap:8px;padding:9px 16px;border-radius:999px; background:rgba(19,34,37,.82);color:#b1e367;font-size:13px;letter-spacing:.5px; backdrop-filter:blur(6px);animation:fadeout .6s ease 6s forwards; } @keyframes fadeout{to{opacity:0;visibility:hidden}} /* ============================================================ 动效 ============================================================ */ .anim{opacity:0;transform:translateY(26px); transition:opacity .85s cubic-bezier(.2,.8,.3,1),transform .85s cubic-bezier(.2,.8,.3,1)} .screen.in .anim{opacity:1;transform:none} .fade{opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.3,1)} /* 自带 transform 的元素只淡入 */ .screen.in .fade{opacity:1} .d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s} .d4{transition-delay:.36s}.d5{transition-delay:.45s}.d6{transition-delay:.54s} /* 像素小人踏步（后续可换成逐帧序列） */ @keyframes step{ 0%,100%{transform:translateY(0) rotate(0deg)} 25% {transform:translateY(-4px) rotate(-2deg)} 50% {transform:translateY(0) rotate(0deg)} 75% {transform:translateY(-3px) rotate(2deg)} } .pixel{will-change:transform,left,top} /* JS 没跑起来时的兜底：原地踏步 */ .screen.in .pixel:not(.walking){animation:step 1.05s steps(4,end) infinite} .pixel.px2{animation-delay:.18s} .pixel.px3{animation-delay:.4s} .pixel.px4{animation-delay:.62s} /* 迪斯科球轻轻转 —— 点一下会晃一下、撒星星 */ @keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} .disco{transform-origin:50% 6%} .screen.in .disco.near{animation:sway 4.5s ease-in-out infinite} #connect .disco{cursor:pointer;-webkit-tap-highlight-color:transparent; transition:filter .25s ease,transform .18s cubic-bezier(.34,1.56,.64,1)} #connect .disco:hover{filter:brightness(1.12) drop-shadow(0 0 14px rgba(214,232,255,.55))} #connect .disco:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:50%} @keyframes discoHit{ 0% {transform:rotate(0) scale(1,1)} 12% {transform:rotate(-9deg) scale(1.08,.92)} 30% {transform:rotate(6.5deg) scale(.95,1.05)} 48% {transform:rotate(-4deg) scale(1.03,.97)} 66% {transform:rotate(2.4deg) scale(.99,1.01)} 84% {transform:rotate(-1deg) scale(1,1)} 100%{transform:rotate(0) scale(1,1)} } .screen.in .disco.hit{animation:discoHit 1s cubic-bezier(.22,.9,.3,1)} /* 点中瞬间的一圈光 */ #connect .disco-glow{ position:absolute;left:981px;top:58px;width:120px;height:120px;border-radius:50%; pointer-events:none;opacity:0;z-index:1; background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(190,220,255,.45) 35%,rgba(190,220,255,0) 70%); } @keyframes glowPop{0%{opacity:0;transform:scale(.35)}18%{opacity:1}100%{opacity:0;transform:scale(2.6)}} #connect .disco-glow.pop{animation:glowPop .75s ease-out} /* 撒下来的小东西 */ #connect .burst{position:absolute;left:0;top:0;width:1280px;height:720px;pointer-events:none;z-index:6;overflow:visible} #connect .pz{position:absolute;left:0;top:0;will-change:transform,opacity} #connect .pz.star5{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} #connect .pz.spark{clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)} #connect .pz.dot{border-radius:50%} #connect .pz.note{background:none!important;font-size:15px;line-height:1;text-align:center; font-family:ui-sans-serif,system-ui,sans-serif} @media (prefers-reduced-motion:reduce){ .anim,.fade{transition:none!important;opacity:1;transform:none} .screen.in .pixel,.screen.in .disco{animation:none} #connect .drift,#connect .drift2,#connect .twinkles i,#connect .shooting{animation:none} .screen.in .disco.hit,#connect .disco-glow.pop{animation:none} #scroller{scroll-behavior:auto} } /* ============================================================ 魔法药水加载动画（进站 + 进游戏共用） ============================================================ */ .potion{width:132px;height:181px;display:block;margin:0 auto; animation:potion-bob 2.4s ease-in-out infinite} @keyframes potion-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .potion .glass{fill:rgba(214,232,255,.10);stroke:#dbe8ff;stroke-width:.5} .potion .cork{fill:#a9743e} .potion .cork2{fill:#8a5a2b} .potion .liquid{fill:#b1e367} .potion .liquid-top{fill:#e2ffb0} .potion .wave-g{animation:potion-fill 2.2s cubic-bezier(.4,0,.3,1) infinite} @keyframes potion-fill{ 0%{transform:translateY(12px)} 55%{transform:translateY(1px)} 75%{transform:translateY(1px)} 100%{transform:translateY(12px)} } .potion .bub{fill:#f2ffd8;opacity:0;animation:potion-bub 1.5s linear infinite} .potion .b2{animation-delay:.5s} .potion .b3{animation-delay:1s} @keyframes potion-bub{0%{opacity:0;transform:translateY(0)} 20%{opacity:.95}80%{opacity:.5}100%{opacity:0;transform:translateY(-7px)}} .potion .sp{fill:#ffde59;opacity:0;animation:potion-sp 1.8s ease-in-out infinite} .potion .s2{animation-delay:.45s;fill:#5ce1e6} .potion .s3{animation-delay:.9s;fill:#e25523} .potion .s4{animation-delay:1.35s} @keyframes potion-sp{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}} .potion .sp,.potion .bub{transform-box:fill-box;transform-origin:center} .loader-t{ margin-top:20px;text-align:center; font-family:Mono,ui-monospace,monospace;font-weight:700;font-size:13px;letter-spacing:3px; color:#b1e367; } .loader-t i{font-style:normal;animation:dot 1.2s infinite} .loader-t i:nth-child(2){animation-delay:.2s} .loader-t i:nth-child(3){animation-delay:.4s} @keyframes dot{0%,100%{opacity:.2}40%{opacity:1}} /* 进站那一层 */ .loader{ position:fixed;inset:0;z-index:200;display:grid;place-items:center; background:#070b16 url(img/space-bg.jpg) center/cover; transition:opacity .55s ease,visibility .55s; } .loader.done{opacity:0;visibility:hidden} /* ============================================================ 彩蛋小游戏 ============================================================ */ #connect .pixel{cursor:pointer} @keyframes pixel-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-26px)}55%{transform:translateY(-26px)}} #connect .pixel.hop{animation:pixel-hop .55s cubic-bezier(.3,.8,.4,1)} #connect .runner-wrap{position:absolute;left:0;top:0;width:1280px;height:720px;z-index:9} #connect .runner-wrap[hidden]{display:none} #connect #runner{width:1280px;height:720px;display:block;image-rendering:pixelated} #connect .runner-exit{ position:absolute;right:26px;top:22px;width:34px;height:34px;border:0;border-radius:50%; background:rgba(255,255,255,.10);color:#b1e367;font-size:15px;line-height:1;cursor:pointer; transition:background .2s,transform .2s; } #connect .runner-exit:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)} #connect .game-loader{position:absolute;left:0;top:0;width:1280px;height:720px;z-index:10; display:grid;place-content:center;justify-items:center;background:rgba(7,11,22,.72); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} #connect .game-loader[hidden]{display:none} /* 开跑以后，除了星空什么都不留 */ #connect.playing .stage > *{opacity:0;transition:opacity .45s ease;pointer-events:none} body.playing .logo,body.playing #nav,body.playing #dots{opacity:0;pointer-events:none;transition:opacity .45s ease} #connect.playing .stage > .runner-wrap, #connect.playing .stage > .game-loader{opacity:1;pointer-events:auto} @media (prefers-reduced-motion:reduce){ .potion,.potion .wave-g,.potion .bub,.potion .sp,.loader-t i{animation:none} .potion .wave-g{transform:translateY(1px)} } /* 桌面：这两个包装层不参与布局，孩子照旧按画布坐标绝对定位 */ .vwrap,#connect .walk{display:contents} /* ============================================================ 竖屏：换一块 390×844 的竖版画布，拼贴照旧（不是把横版缩小） HOME / ABOUT / LIFE / CONNECT 是"海报屏"，元素重新排一遍位置； WORK / THINKING 是"列表屏"，内容天然要滚，走正常从上往下的排版。 ============================================================ */ @media (max-aspect-ratio:1/1){ #rotate{display:none!important} #scroller{scroll-snap-type:none} /* ---------- 顶栏 ---------- */ #chrome .stage{ position:fixed!important;left:0!important;top:0!important;width:100%!important;height:auto!important;transform:none!important; display:flex!important;align-items:center;justify-content:space-between;gap:10px!important; padding:9px 14px!important;background:rgba(244,243,235,.92); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,0,0,.08)!important; } body.dark-nav #chrome .stage{background:rgba(7,11,22,.86);border-bottom-color:rgba(255,255,255,.14)} .logo{position:static!important;display:flex!important;align-items:baseline;gap:6px!important;left:auto!important;top:auto!important} .logo b{font-size:18px!important;line-height:1.15!important} .logo span{margin:0!important;font-size:10.5px!important;line-height:1.15!important} #nav{position:static!important;left:auto!important;top:auto!important;display:flex!important;gap:10px!important} #nav a{font-size:10.5px!important;line-height:1.4!important;--stw:1px} #nav a:hover{transform:none!important} #dots{right:9px!important;gap:9px!important} #dots button{width:7px!important;height:7px!important} /* ---------- 海报屏：竖版画布 ---------- */ #home,#about,#life,#connect{height:100dvh!important;overflow:hidden!important} #home .stage,#about .stage,#life .stage,#connect .stage{width:390px!important;height:844px!important} /* 背景交给 .screen::before，画布里那张 1280 宽的纸图不要了 */ #home .bgimg,#about .bgimg,#life .bgimg{display:none!important} #home::after{display:none} /* 方格纸直接用渐变画，平铺没有接缝 */ #home .stage{background-image: repeating-linear-gradient(90deg,rgba(226,110,79,.42) 0 1.1px,transparent 1.1px 26px), repeating-linear-gradient(0deg, rgba(226,110,79,.42) 0 1.1px,transparent 1.1px 26px)} /* 01 HOME */ #home .grid{display:none!important} #home .tri.right{left:20px!important;top:296px!important;width:34px!important;height:39px!important} #home .tri.left {left:344px!important;top:640px!important;width:34px!important;height:39px!important} .torn-wrap{left:26px!important;top:322px!important;transform:scale(.4457)!important;transform-origin:0 0!important} #home .bai {left:34px!important;top:364px!important;font-size:56px!important;line-height:60px!important;letter-spacing:4px!important;--stw:1.2px} #home .liqing{left:24px!important;top:422px!important;font-size:68px!important;line-height:74px!important;letter-spacing:4px!important;--stw:1.2px} #home .bw{ left:246px!important;top:486px!important;width:130px!important;height:174px!important; -webkit-mask-image:radial-gradient(circle 14px at 92px 0,transparent 0 13.4px,#000 14.4px); mask-image:radial-gradient(circle 14px at 92px 0,transparent 0 13.4px,#000 14.4px); } #home .v1 {left:352px!important;top:54px!important;font-size:15.5px!important;line-height:19px!important} #home .v2 {left:322px!important;top:60px!important;font-size:16px!important;line-height:19px!important} #home .vai{left:318px!important;top:90px!important;font-size:17px!important;line-height:22px!important;letter-spacing:1.6px!important;--stw:.4px} #home .v3 {left:322px!important;top:118px!important;font-size:16px!important;line-height:19px!important} /* 02 ABOUT */ #about .card-bg{left:30px!important;top:296px!important;width:330px!important;height:266px!important; box-shadow:7px 9px 0 rgba(60,50,35,.16)!important} #about .card-title{left:30px!important;top:322px!important;width:330px!important;font-size:17px!important;line-height:26px!important;letter-spacing:.9px!important;--stw:.4px} #about .card-body {left:30px!important;top:376px!important;width:330px!important;font-size:14.5px!important;line-height:29px!important} /* 05 LIFE */ #life .grid{left:34px!important;top:44px!important;width:300px!important;height:46px!important;gap:9px!important} #life .grid i{width:42px!important;height:46px!important} #life .life-title{left:45px!important;top:50px!important;font-size:27px!important;line-height:38px!important;letter-spacing:24px!important} #life .stage > img[src*="brush"]{left:96px!important;top:92px!important;width:118px!important;height:42px!important} #life .photo{left:58px!important;top:140px!important;width:274px!important;height:300px!important;opacity:.8!important} #life .photo img{left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover!important} #life .stage > img[src*="postmark"]{left:232px!important;top:96px!important;width:150px!important;height:96px!important} #life .stage > img[src*="stamp-art"]{left:252px!important;top:88px!important;width:104px!important;height:80px!important} #life .stage > img[src*="priority"]{left:140px!important;top:424px!important;width:120px!important;height:38px!important} #life .stage > img[src*="approved"]{left:26px!important;top:300px!important;width:88px!important;height:75px!important} #life .stage > img[src*="shell"]{left:20px!important;top:418px!important;width:46px!important;height:40px!important} #life .stage > img[src*="surfer"]{left:278px!important;top:372px!important;width:106px!important;height:94px!important} #life .lines{left:30px!important;top:486px!important;width:330px!important;height:230px!important} #life .lines img{left:-241.6px!important;top:-148.5px!important;width:557px!important;height:372px!important} #life .stage > img[src*="highlight"]{left:104px!important;top:494px!important;width:110px!important;height:52px!important} #life .p{left:36px!important;width:318px!important;font-size:14.5px!important;line-height:34px!important} #life .p.d2{top:470px!important} #life .p.d3{top:556px!important} #life .p.d4{top:600px!important} #life .p.sign{left:150px!important;top:664px!important} /* 06 CONNECT */ #connect .space,#connect .twinkles,#connect .shooting{display:none!important} #connect .stage > img[src*="contact-photo"]{left:196px!important;top:150px!important;width:150px!important;height:250px!important} #connect .stage > img[src*="tape-1"]{left:182px!important;top:130px!important;width:50px!important;height:40px!important} #connect .stage > img[src*="tape-2"]{left:288px!important;top:372px!important;width:70px!important;height:46px!important} #connect .hello{left:34px!important;top:196px!important;font-size:30px!important;line-height:40px!important} #connect .disco{left:298px!important;top:58px!important;width:70px!important;height:97px!important} #connect .disco-glow{left:302px!important;top:64px!important} #connect .burst{width:390px!important;height:844px!important} #connect .stage > img[src*="sparkle"]{left:280px!important;top:64px!important;width:56px!important;height:55px!important} .crow{left:34px!important;font-size:13.5px!important;line-height:19px!important;gap:10px!important} #connect .crow:nth-of-type(1){top:404px!important} #connect .crow:nth-of-type(2){top:452px!important} #connect .crow:nth-of-type(3){top:500px!important} #connect .crow:nth-of-type(4){top:550px!important} .crow .ic-img{width:17px!important;height:17px!important} .crow .ic-mail{width:19px!important;height:14px!important} .crow .ic-doc{width:15px!important;height:19px!important} .crow .ic-in{width:20px!important;height:17px!important} #connect .walk{display:block!important;position:absolute!important;left:22px!important;top:660px!important;width:680px!important;height:190px!important; transform:scale(.5)!important;transform-origin:0 0!important;overflow:hidden!important} #connect .walk .wave{left:0!important;top:64px!important} /* 小游戏：竖屏就是竖版画布 */ #connect .runner-wrap{position:fixed!important;left:0!important;top:0!important;width:100vw!important;height:100dvh!important;z-index:999; display:flex!important;align-items:center;justify-content:center;background:#05060c} #connect #runner{width:100vw!important;height:auto!important;max-height:100dvh!important;aspect-ratio:480/854} #connect .runner-wrap[hidden],#connect .game-loader[hidden]{display:none!important} #connect .game-loader{position:fixed!important;left:0!important;top:0!important;width:100vw!important;height:100dvh!important;z-index:1000} /* ---------- 列表屏：正常从上往下 ---------- */ #work,#thinking{height:auto!important;min-height:100dvh!important;overflow:hidden!important; display:flex!important;align-items:center;padding:76px 18px 54px!important} #work .stage,#thinking .stage{ position:static!important;transform:none!important;width:100%!important;height:auto!important;margin:0 auto!important; display:flex!important;flex-direction:column;align-items:center; } #work .stage > .bgimg,#thinking .stage > .bgimg{display:none!important} #work .stage{max-width:340px!important} #thinking .stage{max-width:400px!important} #work .sec-title,#thinking .sec-title{position:static!important;left:auto!important;top:auto!important;font-size:26px!important;line-height:34px!important} #work .stage > img[src*="brush"],#thinking .stage > img[src*="brush"]{ position:static!important;left:auto!important;top:auto!important;width:118px!important;height:42px!important;margin:-8px 0 18px!important} .card{position:relative!important;left:auto!important;top:auto!important;margin:0 auto 26px!important} .card:hover{transform:none!important} #thinking .stage > img[src*="think-frame"]{position:static!important;left:auto!important;top:auto!important; width:148px!important;height:247px!important;object-fit:cover!important;margin-bottom:16px!important} #thinking .stage > img[src*="camera"]{display:none!important} .post{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;padding:0 0 15px 44px!important;margin-bottom:15px!important} .post .no{position:absolute!important;left:0!important;top:1px!important;font-size:25px!important;line-height:30px!important} .post .h,.post .d{position:static!important;left:auto!important;top:auto!important;white-space:normal} .post .h{font-size:16px!important;line-height:24px!important} .post .d{font-size:12.8px!important;line-height:21px!important;margin-top:6px!important;color:#4a443b} .post .rule{position:absolute!important;left:0!important;top:auto!important;bottom:0!important;width:100%!important} .post:hover{transform:none!important} .more{position:static!important;left:auto!important;top:auto!important;align-self:flex-end;margin-top:2px!important} } /* 更窄的手机再收一档 */ @media (max-aspect-ratio:1/1) and (max-width:360px){ #nav{gap:8px!important} #nav a{font-size:9.5px!important} .logo b{font-size:17px!important} #work,#thinking{padding:74px 14px 48px!important} }