/* ============================================================ chanyukun.com — 全站样式（分区双主题） · Cinematography（首页 + 项目页）：Apple 深色 — 纯黑底，剧照黑边完全融入；正文 #f5f5f7，链接蓝提亮 #2997ff · Photography / About：Apple 浅色 — #fbfbfd 近白底主题由决定（build.py 自动加）。想改设计只动这个文件，常改项都在下面变量里。 ============================================================ */ /* ---------- 字体定义：Shippori Mincho（自托管 webfont） ---------- */ @font-face { font-family: "Shippori Mincho"; src: url("/design/fonts/ShipporiMincho-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Shippori Mincho"; src: url("/design/fonts/ShipporiMincho-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Shippori Mincho"; src: url("/design/fonts/ShipporiMincho-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Shippori Mincho"; src: url("/design/fonts/ShipporiMincho-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ---------- 拉丁字：Jost*（Futura 一脉的开源复刻，SIL OFL）---------- 1994 年 Nikon 28Ti 机身上的「28Ti」是 Futura（Paul Renner, 1927）那一脉的几何无衬线：正圆的 8、单线条、平底的 2、i 上的圆点。 Jost* 把这些特征都对上了，而且是开源可自托管的变量字体 —— 一个 26KB 的文件涵盖 100–900 全部字重。 */ @font-face { font-family: "Jost"; src: url("/design/fonts/Jost-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ============================================================ 字体开关（2026-08 改为 Nikon 28Ti 方案）：拉丁字 = Jost*（几何无衬线，Futura 一脉，对应 28Ti 机身刻字）中文 = Shippori Mincho（明朝体，保留不动）字体栈里 Helvetica/Arial 夹在中间只是为了接住 → © 这类符号；中文永远落到最后的明朝体上（Arial 没有汉字，会自动往后找）。 ● 想整体回退到明朝体 → 把 --font-main 换成 --font-main-mincho 的值，并删掉文件最末尾那一整块「28Ti 字排」，重新 build 即可。 ● 想回退到系统 SF → 换成 --font-main-sf 的值，同样删掉末尾那块。 ============================================================ */ --font-main: "Jost", "Futura", "Avenir Next", "Century Gothic", "Helvetica Neue", Helvetica, Arial, "Shippori Mincho", "Hiragino Mincho ProN", "Songti TC", "Songti SC", sans-serif; --font-main-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Songti TC", "Songti SC", serif; --font-main-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", Helvetica, Arial, sans-serif; /* About 大标题的明朝体：现在首选也是 Shippori，与全站统一 */ --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Songti TC", "Songti SC", "SimSun", serif; /* 版式 */ --max-width: 1440px; --pad: clamp(22px, 4.5vw, 60px); --radius: 16px; --radius-sm: 10px; --ease: cubic-bezier(0.28, 0.11, 0.32, 1); /* 苹果标准缓动 */ } /* ---------- 深色主题（cinematography 页面，也是默认值） ---------- */ :root, body.dark { --bg: #000000; --bg-alt: #161617; --card: #1d1d1f; --card-hover: #2a2a2d; --text: #f5f5f7; --text-soft: #d2d2d7; --muted: #86868b; --line: rgba(255, 255, 255, 0.14); --hairline: rgba(255, 255, 255, 0.08); --accent: #2997ff; --glass: rgba(0, 0, 0, 0.72); } /* ---------- 浅色主题（photography / about 页面） ---------- */ body.light { --bg: #fbfbfd; --bg-alt: #f5f5f7; --card: #f5f5f7; --card-hover: #e8e8ed; --text: #1d1d1f; --text-soft: #333336; --muted: #86868b; --line: #d2d2d7; --hairline: rgba(0, 0, 0, 0.06); --accent: #0066cc; --glass: rgba(251, 251, 253, 0.78); } /* 自定义字体示例（字体文件放 design/fonts/ 后取消注释） @font-face { font-family: "MyFont"; src: url("/design/fonts/MyFont.woff2") format("woff2"); font-display: swap; } */ /* ---------- 基础 ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.47; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; } /* .fold = 首屏容器（页头 + 内容 + 页脚）恰好撑满一屏：短页面页脚贴住画面最下方；页底巨字在 .fold 之外，下滑才出现 */ .fold { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; width: 100%; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* 仅供读屏器读取的页面标题，补齐列表页与摄影页的 H1 语义。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--pad); } ::selection { background: rgba(41, 151, 255, 0.35); } body.light ::selection { background: rgba(0, 102, 204, 0.18); } /* ---------- 页头：吸顶毛玻璃导航 ---------- */ header { position: sticky; top: 0; z-index: 100; display: flex; align-items: baseline; justify-content: space-between; padding: 20px var(--pad); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); } /* 页面级覆盖：about 全屏人像页 —— 顶部栏无底色，直接叠在照片上 */ body.nav-overlay header { --text: #f5f5f7; --muted: rgba(245, 245, 247, 0.72); color: var(--text); position: absolute; top: 0; left: 0; right: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; } .site-name { font-size: 17px; font-weight: 600; letter-spacing: 0.02em; transition: opacity 0.3s var(--ease); } .site-name:hover { opacity: 0.7; } .site-name span { display: block; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1px; } nav { display: flex; gap: 30px; } nav a { font-size: 13px; letter-spacing: 0.01em; color: var(--muted); transition: color 0.3s var(--ease); } nav a:hover, nav a.active { color: var(--text); } /* ---------- 首页项目网格 ---------- */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; padding-top: 44px; padding-bottom: 100px; } .card .thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); border-radius: 0; /* 项目网格用直角 */ } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), opacity 0.5s var(--ease); } .card:hover .thumb img { transform: scale(1.035); } .card .meta { margin-top: 16px; padding: 0 2px; } .card .meta h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; display: inline; } .card .meta .zh { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 15px; } .card .meta p { font-size: 13px; color: var(--muted); margin-top: 3px; } /* ---------- 项目详情页 ---------- */ .project { padding-bottom: 110px; } .project-head { margin: 52px 0 36px; } .project-head h1 { font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } .project-head .zh { font-weight: 400; color: var(--muted); margin-left: 12px; font-size: 0.55em; } .project-head .sub { font-size: 15px; color: var(--muted); margin-top: 10px; } .credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 48px; margin: 36px 0 54px; padding-top: 28px; border-top: 1px solid var(--line); } .credits div { font-size: 14px; color: var(--text-soft); line-height: 1.45; } .credits .label { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; margin-bottom: 44px; border-radius: var(--radius); overflow: hidden; } .video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 剧照：全项目统一高度。--r = 本项目最宽剧照的宽高比（build 自动写入）。最宽的那批满幅显示，其余同高、居中，不再出现大小不一。 */ .stills { display: grid; gap: 32px; --r: 1.78; } .stills img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; /* 统一高度 = 内容宽度 ÷ 最宽比例；窄比例的图被此高度限制，宽度自动收窄居中 */ max-height: calc((min(var(--max-width), 100vw) - 2 * var(--pad)) / var(--r)); border-radius: 0; } .stills + .video-embed { margin: 44px 0 0; } /* 视频放剧照下方时的间距 */ /* 返回链接：与导航同款极简衬线小字 —— 灰→白、细分隔线、箭头悬停回收 */ .back-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 72px; padding-bottom: 4px; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.35s var(--ease), border-color 0.35s var(--ease); } .back-link .arw { display: inline-block; transform: scaleX(-1); /* → 翻转成 ← */ transition: transform 0.35s var(--ease); } .back-link .lbl { display: inline-block; } .back-link:hover { color: var(--text); border-bottom-color: var(--line); } .back-link:hover .arw { transform: scaleX(-1) translateX(-5px); } /* 箭头向左轻移 */ /* ---------- 摄影画廊 ---------- */ .gallery-nav { display: flex; gap: 26px; padding: 30px var(--pad) 8px; max-width: var(--max-width); margin: 0 auto; } .gallery-nav a { font-size: 13px; color: var(--muted); padding-bottom: 3px; transition: color 0.3s var(--ease); } .gallery-nav a.active { color: var(--text); border-bottom: 1.5px solid var(--text); } .gallery-nav a:hover { color: var(--text); } .gallery { padding-bottom: 100px; } .gallery figure { display: flex; justify-content: center; align-items: center; min-height: 62vh; margin-bottom: clamp(56px, 11vh, 120px); } .gallery figure:first-child { margin-top: 40px; } .gallery img { max-width: min(92vw, 1560px); max-height: 90vh; width: auto; height: auto; border-radius: 0; } /* ---------- 摄影分类入口（带轮播） ---------- */ .cat-list { display: flex; flex-direction: column; /* 纵向依次排列：Nature / People / Street */ align-items: center; gap: 56px; padding: 44px 0 100px; } .cat-list a { position: relative; display: block; /* 3:2 预览，宽度以「整卡不超过约一屏高」为上限，居中排布 */ width: min(100%, calc(76vh * 1.5), 1160px); width: min(100%, calc(76svh * 1.5), 1160px); aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-alt); border-radius: 0; /* 直角，与首页项目网格一致 */ } /* 轮播图层：苹果式交叉淡入 + 缓慢沉降 */ .cat-list .slides { position: absolute; inset: 0; } .cat-list .slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); /* 沉降幅度更克制 */ transition: opacity 2.2s var(--ease), transform 9s var(--ease); } .cat-list .slides img.on { opacity: 1; transform: scale(1); } .cat-list .cat-label { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; padding: 30px 36px; color: #fff; font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.015em; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 45%); } /* ---------- 分类页：手动幻灯片 ---------- */ /* 尺寸与原画廊一致（max-width min(92vw,1560px)、max-height 90vh），点右半张 = 下一张，左半张 = 上一张，键盘 ←/→ 同样有效 */ .slideshow { padding: 0 0 60px; } .slideshow .stage { position: relative; height: min(84vh, 1080px); margin-top: 10px; } .slideshow .stage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(92vw, 1560px); max-height: 90%; width: auto; height: auto; border-radius: 0; opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none; } .slideshow .stage img.on { opacity: 1; } .nav-half { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; padding: 0; margin: 0; z-index: 5; -webkit-appearance: none; } .nav-half.prev { left: 0; cursor: w-resize; } .nav-half.next { right: 0; cursor: e-resize; } .nav-half:focus-visible { outline: none; } .nav-half:focus-visible::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; border-top: 2px solid var(--text); border-right: 2px solid var(--text); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); } .nav-half.prev:focus-visible::after { left: 24px; transform: translateY(-50%) rotate(-135deg); } .nav-half.next:focus-visible::after { right: 24px; transform: translateY(-50%) rotate(45deg); } .slide-count { text-align: center; margin-top: 6px; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- About：全屏人像版 ---------- */ /* 照片人物在左～中间，右侧是暗部夜景 → 文字放右侧白字。如果以后换了人物在右边的照片：把 .hero-img 的 object-position 改成 70% center，.hero-scrim 渐变方向改 to left，.hero-text 改 right:auto; left:0 */ .about-hero { position: relative; min-height: min(100svh, 1100px); /* 顶部栏叠在照片上，人像占满全屏 */ overflow: hidden; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 照片里人物中心约在横向 43% 处。窗口比照片窄需要横向裁切时，取景窗右移（55%），人物落在画面左侧，右侧暗部留给文字 */ object-position: 55% center; } /* 宽屏（≥3:2）不会横向裁切，改为放大 12% 并左移 5%：人物移出文字区，同时放大量 > 平移量，保证照片始终横向充满、任何超宽比例下右缘都不会露出空白 */ @media (min-aspect-ratio: 3/2) and (min-width: 901px) { .hero-img { transform: translateX(-5%) scale(1.12); } } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0) 38%, rgba(0,0,0,0.62) 78%); } .hero-text { position: absolute; right: 0; top: 0; bottom: 0; width: min(44%, 600px); display: flex; flex-direction: column; justify-content: center; padding: 40px var(--pad); color: #f5f5f7; } .hero-text h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 22px; } .name-title { font-family: var(--font-mincho); font-weight: 600; letter-spacing: 0.04em; /* 明朝体适合略放宽字距 */ } .hero-text p { font-size: clamp(13.5px, 1.05vw, 16px); line-height: 1.65; margin-bottom: 14px; color: rgba(245, 245, 247, 0.92); } .hero-text .loc { color: rgba(245, 245, 247, 0.65); } .hero-text .contact-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.22); } .hero-text .contact-block a.email { color: inherit; font-size: 17px; font-weight: 500; } .hero-text .socials a { background: rgba(255, 255, 255, 0.16); color: #f5f5f7; } .hero-text .socials a:hover { background: rgba(255, 255, 255, 0.26); } /* 手机端：照片在上（保住人物构图），文字回到白底正常排版 */ @media (max-width: 900px) { .about-hero { min-height: 0; } .hero-img { position: static; width: 100%; height: 62vh; object-position: 45% center; } .hero-scrim { display: none; } .hero-text { position: static; width: 100%; padding: 34px var(--pad) 70px; color: var(--text); } .hero-text p { color: var(--text-soft); font-size: 16px; } .hero-text .loc { color: var(--muted); } .hero-text .contact-block { border-top-color: var(--line); } .hero-text .contact-block a.email { color: inherit; } .hero-text .socials a { background: var(--card); color: var(--text); } .hero-text .socials a:hover { background: var(--card-hover); } } /* ---------- About ---------- */ .about { max-width: 700px; padding-top: 50px; padding-bottom: 110px; } .about .portrait { margin: 0 0 46px; max-width: 440px; border-radius: var(--radius); } .about h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 26px; } .about p { margin-bottom: 20px; font-size: 18px; line-height: 1.65; color: var(--text-soft); } .contact-block { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); } .contact-block a.email { font-size: 19px; font-weight: 500; color: inherit; text-decoration: none; transition: opacity 0.3s var(--ease); } .contact-block a.email:hover { opacity: 0.75; } .socials { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .socials a { font-size: 14px; padding: 10px 22px; border-radius: 980px; /* 苹果药丸按钮 */ background: var(--card); color: var(--text); transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .socials a:hover { background: var(--card-hover); transform: scale(1.03); } /* ---------- 页脚（左右贴边，不随内容宽度） ---------- 短页面：main 弹性撑满视口 → 页脚正好贴住画面最下方；长页面：页脚跟在内容之后的适度留白处。巨字永远在页脚之下、折叠线以下。 */ footer { margin-top: 60px; padding: 26px 26px 28px; width: 100%; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } footer a { transition: color 0.3s var(--ease); } footer a:hover { color: var(--text); } .footer-socials { display: inline-flex; align-items: center; gap: 16px; } a.imdb-link { display: inline-flex; align-items: center; color: inherit; } a.imdb-link svg { height: 12px; width: auto; display: block; } /* 纯字形线稿，与 IG 图标视觉等高 */ a.imdb-link:hover, a.ig-link:hover { color: var(--text); } /* ---------- Instagram 线条图标按钮 ---------- */ a.ig-link { display: inline-flex; align-items: center; color: inherit; } a.ig-link svg { width: 19px; height: 19px; display: block; } /* about 页 contact 区：去掉药丸底色，只留图标 */ .socials a.ig-link, .socials a.imdb-link, .hero-text .socials a.ig-link, .hero-text .socials a.imdb-link { background: none; padding: 0; border-radius: 0; } .socials a.ig-link:hover, .socials a.imdb-link:hover, .hero-text .socials a.ig-link:hover, .hero-text .socials a.imdb-link:hover { background: none; transform: scale(1.08); } .socials a.ig-link svg { width: 24px; height: 24px; } .socials a.imdb-link svg { height: 15px; width: auto; } /* ---------- Commercial & Music Video 占位页 ---------- */ main.wip { display: flex; align-items: center; justify-content: center; padding: 80px var(--pad); } main.wip p { color: var(--muted); font-size: 15px; letter-spacing: 0.06em; } /* ---------- 滚动淡入动画（配合 design/main.js） ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); } .reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cat-list .slides img { transition: none; } html { scroll-behavior: auto; } } /* ---------- 手机端 ---------- */ @media (max-width: 760px) { body { font-size: 16px; } header { align-items: center; padding-top: 14px; padding-bottom: 14px; } .nav-desktop { display: none; } /* 顶栏子项收进右上角折叠菜单 */ .grid { grid-template-columns: 1fr; gap: 44px; padding-top: 30px; } .card .meta { margin-top: 12px; } .credits { grid-template-columns: 1fr 1fr; gap: 14px 26px; } .gallery figure { min-height: auto; margin-bottom: 60px; } .project-head { margin-top: 36px; } .video-embed { border-radius: var(--radius-sm); margin-bottom: 32px; } .stills { gap: 20px; } /* 摄影分类入口 */ .cat-list { gap: 30px; padding-top: 24px; padding-bottom: 70px; } .cat-list .cat-label { padding: 16px 18px; } /* 分类页幻灯片：压缩舞台高度，避免大片留白 */ .gallery-nav { padding-top: 22px; flex-wrap: wrap; } .slideshow .stage { height: min(62vh, 640px); height: min(62svh, 640px); } footer { padding-top: 26px; padding-bottom: 34px; } } /* ============================================================ 字排精修 —— Shippori Mincho + 参考 tamakiyoshida.com （克制字重、放宽字距、拉开行距；回退 SF 时把这整块删掉） ============================================================ */ body { letter-spacing: 0.03em; } /* 导航：小号衬线 + 宽字距 + 大写，参考站同款气质 */ nav a, .gallery-nav a { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; } .site-name { font-size: 16px; font-weight: 500; letter-spacing: -0.055em; /* 与开屏一致：字符刚刚相连 */ text-transform: uppercase; /* YUKUN CHAN */ display: flex; align-items: center; gap: 10px; } /* 页头 logo：黑底白產方块，无边框；比英文视觉等高、实际略高，上下居中 */ .site-name .logo { width: 1.32em; height: 1.32em; display: block; /* 1.26em × 1.05 */ transform: translateY(0.054em); /* 按字体度量下移，与大写字母视觉中心严格对齐 */ } /* 标题类：降字重、放字距（明朝体在轻字重下更显气质） */ .project-head h1 { font-weight: 600; letter-spacing: 0.06em; } .card .meta h2 { font-weight: 500; letter-spacing: 0.06em; font-size: 18px; } .card .meta p { letter-spacing: 0.1em; font-size: 12px; } .credits .label { letter-spacing: 0.12em; } /* ---------- 开屏页（首页，始终在顶部，与正文同层） ---------- */ #work { scroll-margin-top: 76px; } .splash { position: relative; height: 100svh; min-height: 480px; overflow: hidden; background: #000; } /* 首页：页头 fixed 悬浮在开屏之上；.fold 用 padding 给页头让位。透明↔毛玻璃由 html.splashing 切换（main.js 按滚动位置实时判定）。 */ body.has-splash header { position: fixed; top: 0; left: 0; right: 0; } body.has-splash .fold { padding-top: 76px; } /* main.js 会按页头实际高度校准 */ /* ---------- About 名字排版（大字中文名 + 小字英文名） ---------- */ .name-title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(38px, 4.6vw, 58px); letter-spacing: 0.12em; line-height: 1.15; margin-bottom: 10px; } .name-sub { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 34px; } /* 自述正文：参考站式的宽行距 */ .hero-text p:not(.name-sub):not(.loc), .about p:not(.name-sub) { line-height: 1.95; letter-spacing: 0.04em; } @media (max-width: 760px) { .splash { min-height: 380px; } .splash-name { font-size: 11.5vw; } .name-sub { margin-bottom: 26px; } } /* ============================================================ 移动端折叠菜单（汉堡原位变形为 X，全屏淡入 + 轻微上移，260ms） ============================================================ */ .menu-btn, .menu-panel { display: none; } @media (max-width: 760px) { /* 汉堡按钮：常驻页头，开合时原地变形为 X（不额外挪位置） */ .menu-btn { display: block; background: none; border: 0; cursor: pointer; padding: 8px 0 8px 14px; color: var(--text); } .menu-btn span { display: block; width: 27px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform 0.26s var(--ease), opacity 0.2s var(--ease); } body.menu-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } body.menu-open .menu-btn span:nth-child(2) { opacity: 0; } body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .menu-btn:focus-visible, .menu-panel a:focus-visible { outline: 1px solid var(--text); outline-offset: 5px; } /* 菜单展开时页头保持置顶（logo + X 按钮全程可点），全屏面板在其下淡入 */ body.menu-open header { z-index: 210; } /* 全屏面板：淡入 + 轻微上移；无需再单独遮罩或关闭按钮 —— 面板本身即全屏 */ .menu-panel { display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0; background: var(--bg); z-index: 200; padding: 130px 36px 44px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s; } body.menu-open .menu-panel { opacity: 1; visibility: visible; transform: translateY(0); } body.menu-open { overflow: hidden; } .menu-panel .menu-links { display: flex; flex-direction: column; align-items: flex-end; gap: 32px; text-align: right; } .menu-panel .menu-links a { font-size: 22px; font-weight: 400; letter-spacing: 0.01em; /* 与桌面端小号衬线导航同一字距，仅放大尺寸以适配全屏点按 */ color: var(--muted); transition: color 0.3s var(--ease); } .menu-panel .menu-links a.active { color: var(--text); } .menu-panel .menu-meta { display: flex; flex-direction: column; gap: 26px; } .menu-panel .menu-socials { display: flex; align-items: center; gap: 16px; } .menu-panel .menu-socials a { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .menu-panel .menu-copy { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; } } /* ---------- 项目状态标注（badge 卡片小标签 / note 页面内提示） ---------- */ .card .badge { display: inline-block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 980px; padding: 3px 10px; margin-left: 10px; vertical-align: 2px; white-space: nowrap; } .project-note { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--line); border-radius: 980px; padding: 9px 20px; } /* 开屏页显示期间不高亮导航当前项，滚出后恢复（见 main.js kill） */ html.splashing nav a.active, html.splashing .menu-panel .menu-links a.active { color: var(--muted); } /* ---------- 开屏页背景 reel ---------- */ .splash-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } .splash-scrim { position: absolute; inset: 0; /* 底部渐暗保证巨字可读，顶部轻微压暗保证导航可读 */ background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 38%), linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 18%); } .splash-tag, .splash-name { position: relative; z-index: 2; } /* ---------- 开屏期间：导航悬浮透明，叠在覆盖层视频之上 ---------- */ html.splashing header { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; } /* ---------- 页底巨字（参考 tamakiyoshida.com：页脚下方、贴着页面最底） ---------- */ .bigname-wrap { padding: 36px 22px 0; overflow: hidden; } .bigname { font-family: var(--font-mincho); font-weight: 700; font-size: max(40px, 10.5vw); /* 基准值，main.js 精确缩放到撑满；不设上限，超宽屏才能继续放大 */ line-height: 0.94; /* 收紧行盒让字形贴近页面底边 */ letter-spacing: -0.085em; /* 英文字符更紧密相连 */ white-space: nowrap; width: max-content; /* 盒子紧贴文字，main.js 才能量到真实文字宽度（见 main.js fitBig 注释） */ max-width: none; color: var(--text); } .bigname .szh { letter-spacing: 0.01em; margin-left: 0.15em; margin-right: 0.135em; /* 琨↔CHAN 间距再收紧 10% */ font-size: 0.9em; /* 中文略小于英文 */ vertical-align: 0.045em; /* 中文 baseline 上移一点点（字体混排对齐待继续微调） */ } @media (max-width: 760px) { .bigname-wrap { padding-top: 60px; } } /* ============================================================ 页面转场：导航 tab 之间按顺序左右滑动（View Transitions API）顺序 Narrative → Commercial → Photography → About（左→右）跨多个 tab 也是一次等时长滑动，不叠加时间。不支持的浏览器自动降级为瞬时跳转。 ============================================================ */ @view-transition { navigation: auto; } /* 顶部栏使用独立快照：直接显示目标页状态，不参与正文的左右位移。 */ header { view-transition-name: site-header; } ::view-transition-group(site-header) { animation: none; z-index: 1000; } ::view-transition-old(site-header) { animation: none; mix-blend-mode: normal; opacity: 0; } ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; opacity: 1; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.44s; animation-timing-function: var(--ease); animation-fill-mode: both; } /* 向右（去更靠后的 tab）：旧页左移淡出，新页从右侧进入 */ html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; } html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; } /* 向左（去更靠前的 tab）：旧页右移淡出，新页从左侧进入 */ html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; } html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } @keyframes vt-out-left { to { transform: translateX(-6vw); opacity: 0; } } @keyframes vt-in-right { from { transform: translateX(6vw); opacity: 0; } } @keyframes vt-out-right { to { transform: translateX(6vw); opacity: 0; } } @keyframes vt-in-left { from { transform: translateX(-6vw); opacity: 0; } } /* ============================================================ ⬥ 28Ti 字排 —— Nikon 28Ti 外观设计语言（2026-08） ------------------------------------------------------------ 参照 1994 年 Nikon 28Ti 的机身刻字与那本黑石板说明书封面。 28Ti 的排版语言只有三条，全站按这三条重新校准： ① 字重只往下走几何无衬线在 600 / 700 会立刻变笨。机身上的「28Ti」是 Light。所以：正文 400、大标题 300、只有站名 500。 ② 小字放宽导航、标签、credits、年份走 0.16–0.22em 字距，像镜头筒上那一圈「NIKKOR 28mm 1:2.8」—— 小、细、拉开、大写，是被"刻"上去的而不是排上去的。 ③ 大字收紧页底巨字负字距、字母刚刚相连，像封面那块钛铭牌。另外：技术信息（年份、编号、credits）统一用等宽数字（tabular-nums），一列年份能对齐 —— 仪表盘读数的做法。中文「產宇琨」保留 Shippori Mincho 明朝体：拉丁几何无衬线 + 中文明朝，是日式混排的经典对比，也接住了这个站原本的气质。 ⚠ 想回退：删掉这一整块 + 把 :root 的 --font-main 换回去。 ============================================================ */ /* ---------- 全局基线 ---------- */ body { font-weight: 400; letter-spacing: 0.004em; /* 几何体自带空气，不需要像明朝体那样撑字距 */ line-height: 1.62; /* Jost x-height 只有 0.46em，行距必须给足 */ font-synthesis-weight: none; /* 禁止浏览器伪造字重，细字重才准 */ } /* 中文一律走明朝体（.szh = 页底巨字里的「產宇琨」，.zh = 项目中文名） */ .szh, .zh, [lang="zh"], [lang^="zh-"] { font-family: var(--font-mincho); } /* ---------- 页头：站名 = 铭牌，导航 = 镜头筒刻字 ---------- */ .site-name { font-size: 15.5px; font-weight: 500; letter-spacing: 0.05em; /* 几何体大写必须拉开，挤在一起会糊成一团 */ text-transform: uppercase; display: flex; align-items: center; gap: 11px; } /* 產字方块与大写字母视觉等高对齐（Jost cap-height = 0.70em，与明朝体不同，所以这两个数跟着换字体一起重算） */ .site-name .logo { width: 1.32em; height: 1.32em; transform: translateY(0.02em); } nav a, .gallery-nav a { font-size: 11.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; } nav { gap: 34px; } /* ---------- 首页项目网格 ---------- */ .card .meta h2 { font-size: 20px; font-weight: 300; letter-spacing: 0.015em; } .card .meta .zh { font-weight: 400; font-size: 0.78em; letter-spacing: 0.06em; } /* 「Narrative Short · 2025」= 机身上的技术参数行。 ⚙ 不想要大写 → 把下面这行 text-transform 删掉即可。 */ .card .meta p { font-size: 11px; font-weight: 400; letter-spacing: 0.175em; text-transform: uppercase; font-variant-numeric: tabular-nums; margin-top: 7px; } .card .badge { font-size: 9px; font-weight: 400; letter-spacing: 0.2em; padding: 4px 11px; vertical-align: 1px; } /* ---------- 项目详情页 ---------- */ .project-head h1 { font-size: clamp(34px, 4.8vw, 52px); font-weight: 300; letter-spacing: 0.008em; line-height: 1.06; } .project-head .zh { font-weight: 400; font-size: 0.5em; letter-spacing: 0.08em; } .project-head .sub { font-size: 11.5px; font-weight: 400; letter-spacing: 0.185em; text-transform: uppercase; font-variant-numeric: tabular-nums; margin-top: 14px; } .credits div { font-size: 14.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0.008em; font-variant-numeric: tabular-nums; } .credits .label { font-size: 9.5px; font-weight: 400; letter-spacing: 0.22em; margin-bottom: 6px; } .back-link { font-size: 11.5px; font-weight: 400; letter-spacing: 0.2em; } .project-note { font-size: 10.5px; font-weight: 400; letter-spacing: 0.22em; padding: 10px 22px; } /* ---------- 摄影 ---------- */ .cat-list .cat-label { font-size: clamp(19px, 2.1vw, 28px); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; } .slide-count { font-size: 10.5px; font-weight: 400; letter-spacing: 0.22em; margin-top: 10px; } /* ---------- About ---------- */ .hero-text h1, .about h1 { font-weight: 300; letter-spacing: 0.015em; } .hero-text h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 26px; } .about h1 { font-size: clamp(32px, 4.2vw, 46px); } /* 自述正文：几何体的长文靠行距活命，字距反而要收 */ .hero-text p:not(.name-sub):not(.loc), .about p:not(.name-sub) { line-height: 1.85; letter-spacing: 0.006em; font-weight: 400; } .hero-text p { font-size: clamp(14px, 1.1vw, 16.5px); margin-bottom: 16px; } .about p { font-size: 17px; } /* 「Los Angeles, CA」= 机身底盖上的产地刻字 */ .hero-text .loc, .about .loc { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 26px; } .hero-text .contact-block a.email, .contact-block a.email { font-weight: 400; letter-spacing: 0.025em; } .hero-text .contact-block a.email { font-size: 16px; } .contact-block a.email { font-size: 18px; } .socials a { font-size: 13px; font-weight: 400; letter-spacing: 0.08em; } /* About 大字中文名（明朝体不动，只微降字重） */ .name-title { font-weight: 600; letter-spacing: 0.1em; } .name-sub { font-size: 11.5px; font-weight: 400; letter-spacing: 0.24em; } /* ---------- 页脚 ---------- */ footer { font-size: 10.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; } /* ---------- 占位页 ---------- */ main.wip p { font-size: 11.5px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; } /* ---------- 页底巨字：维持原设计，不动 ---------- 「YUKUN 產宇琨 CHAN」整串仍然是 Shippori Mincho 700 / 字距 −0.085em （规则在本文件上方原来的位置，这里刻意不覆盖）。全站唯一保留明朝体的地方 —— 它是签名，不是正文。 */ /* ---------- 移动端 ---------- */ @media (max-width: 760px) { body { line-height: 1.6; } .site-name { font-size: 15px; letter-spacing: 0.045em; } .menu-panel .menu-links a { font-size: 25px; font-weight: 300; letter-spacing: 0.05em; } .menu-panel .menu-socials a { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; } .menu-panel .menu-copy { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; } .card .meta h2 { font-size: 19px; } .card .meta p { font-size: 10.5px; letter-spacing: 0.16em; } .about p { font-size: 16px; } footer { font-size: 10px; letter-spacing: 0.16em; } }