/* ---------- 字体 Fonts ---------- */ /* font-display:swap —— 字体就绪前先用回退字形渲染，消除位移闪烁（FOUT） */ @font-face{font-family:"Pangea";src:url("../fonts/FwTRIAL-Pangea-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Pangea";src:url("../fonts/FwTRIAL-Pangea-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Pangea";src:url("../fonts/FwTRIAL-Pangea-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Pangea";src:url("../fonts/FwTRIAL-Pangea-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Pangea";src:url("../fonts/FwTRIAL-Pangea-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* 与 Pangea 字形度量接近的本地回退：字体未就绪时先以它渲染，Pangea 到位后几乎无位移 */ @font-face{font-family:"Pangea-fallback";src:local("Arial"),local("Helvetica Neue"),local("PingFang SC");size-adjust:101%;ascent-override:90%;descent-override:22%;line-gap-override:0%} :root{ --ink:#111111; --paper:#ffffff; --muted:#6f6f69; --muted-en:#8d8579; /* 英文正文，比 --muted 更浅 */ --faint:#9a9a93; --placeholder:#f1f0eb; /* 作品图未加载时的浅灰占位块 */ --dark:#202020; /* 深底区块：关于 / 关于作者 / 鸣谢；深色菜单与其同色 */ --footer:#141414; /* 页脚：最深的一层黑，作为下方基准色 */ --canvas:var(--paper); --tone-color:#ffffff; --header-h:44px; --sans:"Pangea","Pangea-fallback","PingFang SC","Microsoft YaHei","Heiti SC","Hiragino Sans GB","Noto Sans CJK SC",sans-serif; /* 页脚排版令牌：颜色 / 字号 / 字重统一，保证层级一致 */ --footer-label:rgba(255,255,255,.45); /* 分组标题（弱化） */ --footer-value:#fff; /* 正文值（网址 / 邮箱 / 社媒） */ --footer-meta:rgba(255,255,255,.4); /* 版权信息 */ --footer-label-size:.72rem; --footer-value-size:.9rem; --footer-meta-size:.75rem; --footer-gap:clamp(18px,2.4vw,26px); /* 分组之间的间距 */ /* 区块垂直间距令牌：相邻区块各取一半相加，保证“关于 / 页脚”与上方间距一致、整体节奏统一 */ --gap-section:clamp(80px,11vw,140px); /* 区块间统一垂直间距（上下各半） */ --gap-block:clamp(72px,10vw,128px); /* 区块内子块间距（关于→作者/鸣谢） */ --hero-col:min(280px,62vw); /* 首屏列宽以 logo 为基准：logo 自身自适应（桌面 280px，移动端按 62vw 缩放），中英文标语容器等于此宽；文字流体缩放，不强制撑满（Fluid Typography） */ /* 深底区块排版层级令牌：颜色 / 字号 / 字重统一 */ --dark-text:rgba(255,255,255,.82); --dark-text-en:rgba(255,255,255,.55); --fs-body:clamp(0.94rem,1.7vw,1.13rem); --fs-en:0.81rem; --lh-body:1.95; --lh-en:1.7; } /* 深色态：画布与浏览器主题色同步切深（关于 / 页脚 / 灯箱遮罩期间）； --tone-color 用字面量，便于 JS 直接读取并写入 theme-color meta */ :root.tone-dark{--canvas:var(--footer);--tone-color:#141414} *{box-sizing:border-box} /* 画布底色 = --canvas：默认白；main.js 给加 .tone-dark 后切深。白区（首屏 / 作品）回弹与浏览器底栏为白，黑区（关于 / 页脚 / 灯箱）为黑，且“更多作品”下方作为 .works 的白底内边距，不漏黑边 */ html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--canvas);scrollbar-gutter:stable} body{ margin:0;background:var(--canvas);color:var(--ink); font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.7; letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-synthesis:none; -webkit-text-size-adjust:100%;text-size-adjust:100%; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none;margin:0;padding:0} /* 统一字距为 0；标题 / 眉标由各自规则单独设置 */ *,*::before,*::after{letter-spacing:0} .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,60px)} section[id],footer[id]{scroll-margin-top:var(--header-h)} /* 统一焦点样式：移除浏览器默认蓝色描边，换成品牌色描边（键盘可见，鼠标点击不出现） */ :focus{outline:none} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* 深色区域内（页脚 / 灯箱 / 深色菜单）改用白色描边，保证可见 */ .site-footer :focus-visible,.lightbox :focus-visible,.site-header.nav-dark :focus-visible{outline-color:#fff} /* ---------- 头部 Header ---------- */ .site-header{position:fixed;top:0;left:0;width:100%;z-index:50;background:#fff;transition:background .35s ease} .site-header.nav-dark{background:var(--dark)} .header-inner{display:flex;align-items:center;justify-content:space-between;padding-block:12px;line-height:1} .brand{display:flex;align-items:center} .logo-img{height:20px;width:auto;display:block} .site-header.nav-dark .logo-img{filter:brightness(0) invert(1)} .brand:hover .logo-img{opacity:.6;transition:opacity .25s} .nav{display:flex;gap:clamp(20px,3vw,42px);align-items:center;font-size:1.13rem;font-weight:500} .nav a{position:relative;padding:4px 0;color:var(--ink);text-transform:uppercase;transition:color .25s} .nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .3s ease} /* 仅悬停时从左向右展开下划线；鼠标点击产生的 :focus/:focus-visible/:active 一律归零，不残留 */ .nav a:hover::after{width:100%} .nav a:focus::after,.nav a:focus-visible::after,.nav a:active::after{width:0} .site-header.nav-dark .nav a{color:#fff} .site-header.nav-dark .nav a::after{background:#fff} /* 触屏无悬停：禁用导航下划线，避免点完粘滞 */ @media (hover:none){.nav a::after{display:none}} /* ---------- 眉标 / 小标题 ---------- */ .eyebrow{font-size:clamp(1rem,1.8vw,1.19rem);text-transform:uppercase;color:var(--ink);font-weight:500;line-height:1.05;margin:0 0 18px;letter-spacing:.02em} .section-head{text-align:center;margin:0 auto clamp(40px,6vw,80px);max-width:720px} /* ---------- 首屏 Hero ---------- */ .hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:260px 0 calc(var(--gap-section)/2);background:#fff} .hero-inner{width:100%} .hero-logo{display:inline-flex;justify-content:center} .hero-logo img{width:var(--hero-col);height:auto} .hero-tagline-svg{display:block;width:var(--hero-col);height:auto;margin:13px auto 0} .hero-lead{margin:40px auto 0;max-width:680px;font-size:clamp(0.94rem,1.7vw,1.13rem);line-height:1.95;color:var(--muted);text-align:justify} .hero-en{margin:18px auto 0;max-width:680px;color:var(--muted-en);font-size:0.81rem;line-height:1.85;text-align:left;font-family:var(--sans)} /* ---------- 作品网格 Gallery ---------- */ .works{padding:calc(var(--gap-section)/2) 0 clamp(48px,7vw,90px);background:#fff} .works-more{margin:clamp(48px,7vw,90px) auto 0;text-align:center;color:var(--faint);font-size:0.69rem;line-height:1.15} .works-more span{display:block;margin-top:1px;font-size:0.63rem;line-height:1.1;color:var(--faint);text-transform:uppercase;letter-spacing:.04em} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,6vw,80px)} .work{position:relative;overflow:hidden;background:var(--placeholder);aspect-ratio:3/4;cursor:pointer;border:1px solid rgba(0,0,0,.04)} .work img{width:100%;height:100%;object-fit:cover;display:block} .work picture{display:block;width:100%;height:100%} .work::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .3s ease;z-index:1;pointer-events:none} .work:hover::before{background:rgba(0,0,0,.12)} .work::after{ content:"";position:absolute;top:50%;left:50%; width:38px;height:38px;transform:translate(-50%,-50%) scale(.85); background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='10'%20cy='10'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='15'%20y2='15'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:2; } .work:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)} /* ---------- 关于 Statement（统一深底区块） ---------- */ .statement{background:var(--dark);color:#fff;padding:var(--gap-block) 0 var(--gap-block)} .statement .eyebrow{color:#fff} /* 与下方子块保持同一垂直节奏 */ .about-block{margin-bottom:var(--gap-block)} .about-block .eyebrow{margin:0 0 20px} .about-text{color:var(--dark-text);max-width:100%;font-size:var(--fs-body);line-height:var(--lh-body);margin:0;text-align:justify} .about-en{color:var(--dark-text-en);margin:16px 0 0;max-width:100%;font-size:var(--fs-en);line-height:var(--lh-en);font-family:var(--sans);text-align:left} .statement-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-block);align-items:start} .statement-col .eyebrow{margin-bottom:20px} .statement-text{color:var(--dark-text);max-width:100%;font-size:var(--fs-body);line-height:var(--lh-body);margin:0;text-align:justify} .statement-en{color:var(--dark-text-en);margin:16px 0 0;max-width:100%;font-size:var(--fs-en);line-height:var(--lh-en);font-family:var(--sans)} .credits{margin:0;color:var(--dark-text);font-size:var(--fs-body);line-height:var(--lh-body);text-align:left} /* ---------- 页脚 Footer ---------- */ .site-footer{background:var(--footer);color:rgba(255,255,255,.8);padding:var(--gap-block) 0 0} /* 左：品牌标识；右：4 个信息分组。网页端作为一个群组横排、组内等距；移动端 logo 独占一行、分组在其下竖排。分组内 label 为弱化小号标题、value 为白色正文，形成“标题→内容”层级； align-items:start 使各组 label / value 同行对齐（作者主页 / 官网 / 邮箱 / 社媒基线一致）。 */ .footer-inner{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(56px,7vw,110px);row-gap:clamp(34px,8vw,52px);align-items:start} .footer-brand .logo-white{height:30px;width:auto;filter:brightness(0) invert(1)} /* 网页端：四个信息分组作为一个群组横排，组内等距；组内间距 < 群组与 SVG logo 的间距 */ .footer-links{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-end;gap:clamp(20px,2.6vw,40px)} .footer-group{display:block;min-width:0} /* 链接 / 社媒按钮 / 伪链接：统一白色、悬停下划线动效（不变色、不跳转） */ .footer-links a,.social-link,.footer-fake{position:relative;display:inline-block;vertical-align:middle;color:var(--footer-value);font-family:inherit;padding:0 0 2px;font-size:var(--footer-value-size);font-weight:400;line-height:1.2;text-decoration:none;background:none;border:none;cursor:pointer;text-align:left} .footer-links a::after,.social-link::after,.footer-fake::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--footer-value);transition:width .3s ease} .footer-links a:hover::after,.social-link:hover::after,.footer-fake:hover::after{width:100%} .footer-links a:focus::after,.footer-links a:focus-visible::after,.footer-links a:active::after, .social-link:focus::after,.social-link:focus-visible::after,.social-link:active::after, .footer-fake:focus::after,.footer-fake:focus-visible::after{width:0} .footer-fake{cursor:default} /* 伪链接：悬停下划线，但不可点击、无跳转（非、无 href） */ /* label：分组标题，弱化的小号大写，与白色 value 拉开层级 */ .footer-label{font-size:var(--footer-label-size);font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--footer-label);line-height:1.3;margin:0 0 .5rem;white-space:nowrap} .footer-plain{display:inline-block;color:var(--footer-value);font-size:var(--footer-value-size);line-height:1.2;padding:0 0 2px;white-space:nowrap} .nowrap{white-space:nowrap} /* 底栏：版权信息。上边距跟随页脚节奏（--gap-block，与四组区块下边距一致）；下边距为页面底部留白 */ .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:var(--gap-block);padding-top:20px;padding-bottom:20px;border-top:1px solid rgba(255,255,255,.12);font-size:var(--footer-meta-size);color:var(--footer-meta)} /* 社交媒体：小红书 / 公众号横排；公众号带二维码浮层 */ /* 横向间距为“块间距”，纵向间距（换行时）与正文 value 行高一致（line-height:1.2 → 0.2em） */ .social-list{display:flex;flex-wrap:wrap;column-gap:clamp(14px,2.67vw,22px);row-gap:.2em;margin:0;padding:0;list-style:none;align-items:baseline} .social-li{position:relative} .qr-popup{position:fixed;z-index:10;background:#fff;color:var(--ink);padding:8px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;min-width:164px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,visibility 0s linear .2s,transform .2s ease} .qr-popup.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s ease,visibility 0s,transform .2s ease} .qr-popup img{width:148px;height:148px;display:block;aspect-ratio:1/1;object-fit:contain} .qr-popup p{margin:0;font-size:0.72rem;line-height:1.3;color:var(--ink);letter-spacing:.01em;text-align:center;white-space:nowrap} .qr-close{margin-top:4px;padding:7px 20px;background:#ededed;color:#555;font-size:0.72rem;font-weight:500;line-height:1.1;letter-spacing:.02em;border:none;border-radius:6px;cursor:pointer;transition:background .2s ease} .qr-close:hover{background:#e3e3e3} .qr-close:active{background:#d8d8d8} /* 二维码浮层为白底，内部控件改用深色描边（覆盖页脚白色描边，保证可见） */ .qr-popup :focus-visible{outline-color:var(--ink)} /* 网页端（悬停）只显示二维码；提示词与关闭按钮仅在移动端出现 */ @media (min-width:641px){ .qr-popup p,.qr-close{display:none} } /* 作品键盘焦点 */ .work:focus-visible{outline:2px solid var(--dark);outline-offset:4px;border-radius:2px} /* ---------- 灯箱 Lightbox ---------- */ /* 关闭时 visibility:hidden，确保遮罩完全不参与渲染，不会残留影响浏览器取色 */ html.lb-lock{overflow:hidden} .lightbox{position:fixed;inset:0;z-index:100;background:rgba(12,12,12,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s;padding:5vw} .lightbox.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility 0s} .lb-stage{max-width:92vw;max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:14px;touch-action:pan-y} .lb-stage img{max-width:92vw;max-height:78vh;width:auto;height:auto} .lb-stage figcaption{color:rgba(255,255,255,.75);font-size:0.75rem;text-transform:uppercase} .lb-close,.lb-nav{position:absolute;background:none;border:none;color:#fff;cursor:pointer} .lb-close{top:22px;right:30px;font-size:2.13rem;font-weight:300;line-height:1} .lb-nav{top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:54px;height:54px} .lb-nav svg{width:30px;height:30px;stroke:#fff;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))} .lb-prev{left:2vw}.lb-next{right:2vw} /* ---------- 响应式 Responsive ---------- */ @media (max-width:1100px){ .footer-plain{white-space:normal} /* 较窄屏允许长网址换行，避免溢出 */ } @media (max-width:1000px){ .gallery{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.5vw,50px)} .statement-grid{grid-template-columns:1fr;gap:clamp(70px,10vw,130px)} /* 平板 / 移动：logo 独占一行，四个分组在其下竖排；组内间距 < logo→群组间距 */ .footer-inner{grid-template-columns:1fr;row-gap:clamp(34px,8vw,52px)} .footer-brand{align-self:start} .footer-links{display:flex;flex-direction:column;gap:var(--footer-gap)} } @media (max-width:640px){ :root{--header-h:38px} .header-inner{padding-block:10px} .logo-img{height:18px} .nav{gap:18px;font-size:0.94rem} .hero{padding:160px 0 48px} .hero-logo img{width:48vw} .hero-tagline-svg{width:48vw} .hero-lead{margin-top:32px} .gallery{grid-template-columns:repeat(2,1fr);gap:18px} .footer-brand .logo-white{height:26px} .footer-label{white-space:normal} } @media (max-width:380px){ .nav{font-size:0.81rem;gap:14px} .hero-logo img{width:54vw} .hero-tagline-svg{width:54vw} .gallery{gap:14px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }