/* ============================================================ 余霆熙 · 视觉设计作品集 / Design System ============================================================ */ /* 思源黑体（Source Han Sans CN，SIL OFL 1.1）子集化后随站点分发， 保证招聘方在没有装该字体的设备上也能看到一致的标题字形。 */ @font-face{ font-family:"Source Han Sans SC"; src:url("../fonts/source-han-sans-sc-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Source Han Sans SC"; src:url("../fonts/source-han-sans-sc-700.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } /* 思源宋体（Source Han Serif CN，SIL OFL 1.1）：仅用于首屏大标题，正文仍走思源黑体 */ @font-face{ font-family:"Source Han Serif SC"; src:url("../fonts/source-han-serif-sc-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Source Han Serif SC"; src:url("../fonts/source-han-serif-sc-700.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } :root{ --bg:#171719; --bg-2:#1d1d20; --surface:#222225; --surface-2:#2a2a2e; --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.055); --fg:#f4f4f2; --fg-2:#a5a5a8; --fg-3:#6f6f74; --accent:#ff5145; --accent-soft:rgba(255,81,69,.14); --white:#fafafa; --radius:22px; --ease:cubic-bezier(.22,.75,.22,1); --font:"Source Han Sans SC","Noto Sans SC","思源黑体 CN","PingFang SC","Microsoft YaHei",sans-serif; --font-title:"Source Han Serif SC","Noto Serif SC","Source Han Serif CN","Songti SC","SimSun",serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--fg);font-family:var(--font); font-size:16px;line-height:1.6;overflow-x:hidden; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } body.is-locked{overflow:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} :focus:not(:focus-visible){outline:none} .skip-link{position:fixed;left:50%;top:-64px;transform:translateX(-50%);z-index:1200; background:var(--white);color:#151517;padding:10px 20px;border-radius:99px;font-size:13px;font-weight:650; box-shadow:0 10px 30px rgba(0,0,0,.4);transition:top .25s var(--ease)} .skip-link:focus{top:16px} ul,ol,dl,dd{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} ::selection{background:var(--accent);color:#fff} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:#3a3a3e;border-radius:99px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:#55555b} /* 细颗粒噪点 */ .grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:1000;transition:width .1s linear;box-shadow:0 0 12px var(--accent)} /* ============================ 导航 ============================ */ .nav-wrap{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:200;width:min(720px,calc(100% - 32px));transition:top .35s var(--ease)} .nav-wrap.scrolled{top:12px} .nav-glass{ display:flex;align-items:center;gap:8px;padding:8px 9px 8px 18px;border-radius:999px; background:rgba(58,58,62,.52); -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%); border:1px solid rgba(255,255,255,.13); box-shadow:0 10px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09); } .brand{display:flex;align-items:center;gap:9px;margin-right:auto;padding-right:10px;white-space:nowrap} .brand-mark{width:15px;height:15px;border-radius:4px;background:linear-gradient(135deg,#ff7a4d 0%,#ff4b3e 48%,#b93cf0 100%);transform:rotate(-8deg);flex:none;box-shadow:0 0 12px rgba(255,81,69,.45)} .brand-mark.small{width:11px;height:11px;display:inline-block;vertical-align:middle;transform:rotate(-8deg)} .brand-name{font-size:16px;font-weight:800;letter-spacing:-.04em} .brand-name sup,.footer sup{font-size:.55em;color:var(--accent);vertical-align:super;margin-left:1px} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{display:block;padding:8px 15px;border-radius:999px;font-size:13.5px;color:var(--fg-2);transition:.25s var(--ease);white-space:nowrap} .nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)} .nav-links a.is-active{color:#fff;background:rgba(255,255,255,.11)} .nav-cta{display:flex;align-items:center;gap:6px;background:var(--white);color:#151517;font-size:12.5px;font-weight:650; padding:8px 14px;border-radius:999px;white-space:nowrap;transition:.25s var(--ease)} .nav-cta svg{width:15px;height:15px;transition:transform .25s var(--ease)} .nav-cta:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,255,255,.16)} .nav-cta:hover svg{transform:translateX(3px)} .nav-toggle{display:none;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,255,255,.09)} .nav-toggle span{width:16px;height:1.6px;background:#fff;border-radius:2px;transition:.3s var(--ease)} .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)} /* ============================ 首屏：CircularCarousel 3D 圆柱卡片环 ============================ */ /* 参考排版：整圈放大并居中铺满首屏，标题 / 说明 / 按钮全部收进圆筒中心 */ .hero{position:relative;min-height:100svh;overflow:hidden;padding:0;isolation:isolate; /* 文字块相对圆心的垂直偏移：负值上移。整块略高于圆心，前排卡片只轻压按钮下沿，各断点可单独覆盖 */ --copy-drop:-4px; background:linear-gradient(180deg,#08080a 0%,#08080a 82%,#171719 100%)} /* 纯黑底上只留一层极淡的中性光晕，不用网格、不用彩色环境光 */ .hero-vignette{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 72% 62% at 50% 50%,rgba(255,255,255,.025),transparent 76%)} /* 主层与前景层严格同尺寸同位置：两层共用一套 3D 投影参数，卡片才能无缝前后分层 */ .hero-carousel,.hero-front{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(1240px,96vw);height:min(760px,84svh);margin:0} .hero-carousel{z-index:2} /* 前景层只画近端卡片，压住标题、说明与按钮；自身不拦截指针，拖拽与点击仍归主层 */ .hero-front{z-index:6;pointer-events:none} .circular-carousel--front{cursor:default} .circular-carousel--front .circular-carousel__stage{opacity:1;transition:none} /* 圆环下方的小字幕：标题 / 副标题 / 计数，参考图里位于底部信息条上方 */ .hero-carousel .circular-carousel__caption{bottom:2px;gap:12px;color:#fff} .hero-carousel .circular-carousel__title{font-size:13px;letter-spacing:.06em} .hero-carousel .circular-carousel__subtitle{font-size:10.5px;letter-spacing:.1em;opacity:.5} .hero-carousel .circular-carousel__count{font-size:11px;opacity:.5} /* 圆心暗场：让中心文字始终压得住旋转经过的卡片 */ .hero-core{position:absolute;z-index:3;left:50%;top:calc(50% - 34px + var(--copy-drop));transform:translate(-50%,-50%); width:min(500px,56vw);height:min(360px,42svh);pointer-events:none; background:radial-gradient(ellipse closest-side,rgba(8,8,10,.95) 0%,rgba(8,8,10,.82) 42%,rgba(8,8,10,.24) 76%,rgba(8,8,10,0) 100%)} .hero-copy{position:absolute;z-index:5;left:50%;top:calc(50% - 34px + var(--copy-drop));transform:translate(-50%,-50%); width:min(470px,68vw);text-align:center;pointer-events:none} .hero-copy a{pointer-events:auto} /* 默认让近端卡片压住按钮；一旦要操作按钮，文字层临时浮到卡片之前，保证完整可读可点 */ .hero.cta-front .hero-copy{z-index:8} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;color:var(--fg-2);font-weight:600;margin-bottom:16px} .live-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,81,69,0)}} /* 大标题：静态两行文字，字号随视口同步（--title-size），不带字形 / 入场动效。 文字层不拦截指针，鼠标在标题上也能拖动旋转圆环。 */ .hero-title{--title-size:44px;position:relative;width:100%;height:128px;font-family:var(--font-title); display:flex;align-items:center;justify-content:center;pointer-events:none} .hero-heading{margin:0;font-family:inherit;font-size:var(--title-size);line-height:1.28;font-weight:700;letter-spacing:-.03em;color:#fff; text-shadow:0 3px 22px rgba(0,0,0,.6);white-space:nowrap} .accent-word{color:var(--accent);position:relative} .hero-sub{margin-top:16px;font-size:13px;line-height:1.85;color:#b4b4b8;letter-spacing:.02em} .hero-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap} .hero-actions .btn{gap:8px;padding:10px 18px;font-size:12.5px;font-weight:620} .hero-actions .btn span{font-size:14px} .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;font-size:14px;font-weight:650;transition:.28s var(--ease);white-space:nowrap} .btn span{font-size:16px;line-height:1;transition:transform .28s var(--ease)} .btn-primary{background:var(--white);color:#151517} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,255,255,.18)} .btn-primary:hover span{transform:translateY(3px)} .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);color:#fff; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)} .btn-ghost:hover span{transform:translate(2px,-2px)} .btn-lg{padding:15px 28px;font-size:15px} .btn-sm{padding:8px 15px;font-size:13px} .hero-bottom{position:absolute;z-index:7;left:50%;bottom:24px;transform:translateX(-50%); display:flex;align-items:center;justify-content:space-between;gap:16px; width:min(1100px,90vw);margin:0;font-size:10.5px;letter-spacing:.14em;color:var(--fg-3)} .scroll-hint{display:flex;align-items:center;gap:10px} .scroll-hint i{display:block;width:34px;height:1px;background:var(--fg-3);position:relative;overflow:hidden} .scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:lineRun 2.2s ease-in-out infinite} @keyframes lineRun{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .hero-tip{color:var(--fg-3);opacity:.85} .hero-loc{display:flex;align-items:center;gap:10px;color:var(--fg-2)} .hero-loc b{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 9px var(--accent)} /* ============================ Motion Grid 带 ============================ */ /* 作品隧道（Passage Gallery）：容器 / 画布 / 放大层样式见 passage-gallery.css */ .motion-band{padding:26px 0 30px;background:#171719;overflow:hidden} .band-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px; width:min(1400px,92vw);margin:0 auto 20px} .band-note{font-size:12px;color:var(--fg-3)} /* ============================ 通用区块 ============================ */ .section{padding:clamp(84px,9vw,140px) clamp(20px,6vw,96px);max-width:1500px;margin:0 auto;position:relative} .section-label{font-size:11px;letter-spacing:.2em;color:var(--accent);font-weight:700;text-transform:uppercase} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px;flex-wrap:wrap} .section-head h2{font-size:clamp(36px,5vw,66px);line-height:1.1;font-weight:800;letter-spacing:-.05em;margin-top:16px} .section-head h2 sup{font-size:.24em;color:var(--accent);vertical-align:super;letter-spacing:0;margin-left:6px;font-weight:600} .section-head p{font-size:14px;line-height:1.9;color:var(--fg-2);max-width:480px} /* 精选作品 / 关于我 标题区：无红线、无蓝框。 右侧两行小字整段右对齐，并与左侧白色大标题垂直居中对齐。 父级 align-items:center 对齐的是含 margin 的盒；margin-top:32px 恰好等于 左侧 label 行高 + 14px 间距（实测约 31.6px），于是说明文字的中心落在 h2 的中心。 */ .works-head,.about-head{align-items:center;padding-top:0} .works-head{margin-bottom:0} .about-head{margin-bottom:clamp(36px,4vw,52px)} .works-head .section-head__lead,.about-head .section-head__lead{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .works-head .section-label,.about-head .section-label{margin:0} .works-head h2,.about-head h2{margin-top:0;text-align:center} .works-head p,.about-head p{align-self:center;margin-top:32px;padding-top:0;text-align:right} .reveal{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)} .reveal.in{opacity:1;transform:none} /* ============================ 精选作品 · 滚动画框 ============================ */ /* 区块本身不再受 .section 的 max-width 约束，画框才能真正铺到屏幕两边； 标题与页脚各自套一层 .works-inner 保持原来的对齐与留白。 */ .works-section{position:relative;padding-top:clamp(84px,9vw,140px);padding-bottom:clamp(56px,7vw,96px)} .works-inner{width:100%;max-width:1500px;margin:0 auto;padding-inline:clamp(20px,6vw,96px)} .works-stage{margin-top:0} .works-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(44px,5vw,76px);padding-top:26px; border-top:1px solid var(--line-soft);flex-wrap:wrap;font-size:13px;color:var(--fg-3)} .link-arrow{display:inline-flex;align-items:center;gap:10px;color:var(--fg);font-size:14px;font-weight:600;transition:.25s var(--ease)} .link-arrow span{color:var(--accent);transition:transform .25s var(--ease)} .link-arrow:hover{color:var(--accent)} .link-arrow:hover span{transform:translate(3px,-3px)} /* ============================ 关于 ============================ */ .about-section{border-top:1px solid var(--line-soft)} .about-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(36px,6vw,92px);align-items:start} /* 关于我：左侧栏（全息卡片 + 配套详情），卡片本身由 ProfileCard.js 渲染 */ .profile-card-host{position:sticky;top:88px} .profile-card-slot{margin-bottom:16px} .profile-details .profile-tags{margin-top:0} .profile-tags{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap} .profile-tags span{font-size:11.5px;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--fg-2);border:1px solid var(--line)} .profile-info{margin-top:24px;border-top:1px solid var(--line-soft)} .profile-info div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13px} .profile-info dt{color:var(--fg-3)} .profile-info dd{color:var(--fg);text-align:right} .profile-info dd.ok{color:var(--accent)} .profile-resume{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:13px 16px;border-radius:12px; border:1px solid var(--line);font-size:13px;font-weight:600;transition:.25s var(--ease)} .profile-resume:hover{background:var(--white);color:#171719;border-color:var(--white)} .profile-resume span{color:var(--accent)} .profile-resume:hover span{color:#171719} .about-statement{position:relative;padding-bottom:30px;border-bottom:1px solid var(--line-soft)} .quote-mark{position:absolute;left:-14px;top:-34px;font-size:110px;line-height:1;color:var(--accent);opacity:.22;font-family:Georgia,serif} .about-statement p{font-size:clamp(28px,3.4vw,46px);font-weight:800;line-height:1.35;letter-spacing:-.045em} .about-statement em{font-style:normal;color:var(--accent)} .about-statement small{display:block;margin-top:18px;font-size:10.5px;letter-spacing:.2em;color:var(--fg-3)} .about-text{margin-top:30px;font-size:14.5px;line-height:2;color:var(--fg-2);max-width:760px} .about-block{margin-top:52px} .about-block h4{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:20px} .about-block h4 span{font-size:10px;letter-spacing:.18em;color:var(--fg-3);font-weight:600} .chip-row{display:flex;flex-wrap:wrap;gap:9px} .chip{padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12.5px;color:var(--fg-2);transition:.25s var(--ease)} .chip:hover{border-color:var(--accent);color:#fff;background:var(--accent-soft)} .chip.accent-chip{border-color:rgba(255,81,69,.4);color:var(--accent)} .skill-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 28px} .skill-row{display:flex;align-items:center;gap:12px;font-size:12.5px} .skill-row b{width:96px;flex:none;font-weight:600;color:var(--fg)} .skill-bar{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .skill-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#ff8a5c);width:0;transition:width 1.1s var(--ease)} .skill-row em{font-style:normal;color:var(--fg-3);width:38px;text-align:right;font-size:11px} .timeline{position:relative;padding-left:26px} .timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)} .timeline li{position:relative;padding-bottom:26px} .timeline li::before{content:"";position:absolute;left:-25px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent)} .tl-date{font-size:11px;letter-spacing:.1em;color:var(--accent);font-weight:650} .tl-role{font-size:15px;font-weight:650;margin-top:5px} .tl-company{font-size:12px;color:var(--fg-3);margin-left:8px;font-weight:400} .tl-desc{font-size:12.5px;line-height:1.8;color:var(--fg-2);margin-top:7px;max-width:680px} .hobby-line{font-size:14px;color:var(--fg-2);letter-spacing:.06em} /* ============================ 联系 ============================ */ .contact-section{background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(255,81,69,.09),transparent 70%),var(--bg-2); border-top:1px solid var(--line-soft);max-width:none} .contact-inner{max-width:1200px;margin:0 auto;text-align:center} .contact-inner > .section-label{display:block;margin-bottom:10px} /* 两行标题显式居中：不依赖父级继承，避免编辑器快照 / 后续父级改动把对齐打断 */ .contact-title{font-size:clamp(48px,8vw,116px);font-weight:800;line-height:1.06;letter-spacing:-.065em;margin-top:26px;position:relative;display:inline-block;text-align:center} .contact-lead{font-size:15px;line-height:2;color:var(--fg-2);margin-top:46px} .contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px;text-align:left} /* 显式左对齐：电话 / 微信 是