* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } html { scroll-behavior: smooth; } body { min-height: 100vh; overflow: hidden; font-family: Arial, "Microsoft YaHei", sans-serif; background: #050505; color: #fff; } body.main-ready { overflow-y: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: #fff; color: #000; } /* ========================= 鼠标水纹轨迹 ========================== */ .ripple-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; opacity: 0; transition: opacity 0.35s ease; mix-blend-mode: screen; } body.main-ready .ripple-canvas { opacity: 1; } /* ========================= 导航 ========================== */ .site-header { position: fixed; left: 0; top: 0; width: 100%; height: 82px; padding: 0 6vw; z-index: 40; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(-24px); pointer-events: none; transition: 0.75s cubic-bezier(.19,1,.22,1); } body.main-ready .site-header { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.3s; } .brand { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 3px; font-weight: 700; color: #f5e6a6; } .brand img { width: 36px; height: 36px; object-fit: contain; display: block; } .nav { display: flex; gap: 34px; align-items: center; font-size: 12px; letter-spacing: 2px; color: rgba(245,230,166,0.72); } .nav a { position: relative; transition: color 0.3s ease; } .nav a:hover { color: #f5e6a6; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px; background: #f5e6a6; transition: width 0.3s ease; } .nav a:hover::after { width: 100%; } .menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245,230,166,0.25); background: rgba(0,0,0,0.35); color: #f5e6a6; cursor: pointer; font-size: 20px; } /* ========================= 音乐按钮 ========================== */ .music-control { position: fixed; right: 6vw; bottom: 28px; z-index: 90; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(245,230,166,0.28); background: rgba(0,0,0,0.48); color: #f5e6a6; backdrop-filter: blur(12px); font-size: 11px; letter-spacing: 2px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(14px); transition: 0.35s ease; } body.main-ready .music-control { opacity: 1; pointer-events: auto; transform: translateY(0); } .music-control:hover { background: #f5e6a6; color: #000; } .music-control.no-music { opacity: 0.5; } /* ========================= 主页面 ========================== */ .main-page { position: relative; min-height: 100vh; background: #050505; opacity: 0; transform: scale(0.86); overflow: hidden; transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.19,1,.22,1); } .main-page.show { opacity: 1; transform: scale(1); } /* 主页面黑白圆动态背景 */ .circle-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at center, rgba(255,255,255,0.035), transparent 36%), linear-gradient(135deg, #050505 0%, #111 50%, #050505 100%); } .circle { position: absolute; border-radius: 50%; opacity: 0.55; mix-blend-mode: difference; will-change: transform; } .circle-white { width: clamp(260px, 34vw, 560px); height: clamp(260px, 34vw, 560px); background: #fff; left: 8%; top: 18%; animation: whiteCircleMove 9s ease-in-out infinite alternate; } .circle-black { width: clamp(300px, 38vw, 620px); height: clamp(300px, 38vw, 620px); background: #000; border: 1px solid rgba(255,255,255,0.25); right: 6%; bottom: 12%; animation: blackCircleMove 9s ease-in-out infinite alternate; } .circle-white.small { width: clamp(110px, 16vw, 240px); height: clamp(110px, 16vw, 240px); background: #fff; left: 68%; top: 16%; opacity: 0.42; animation: whiteSmallMove 7s ease-in-out infinite alternate; } .circle-black.small { width: clamp(130px, 18vw, 260px); height: clamp(130px, 18vw, 260px); background: #000; border: 1px solid rgba(255,255,255,0.22); left: 18%; bottom: 12%; opacity: 0.42; animation: blackSmallMove 7.5s ease-in-out infinite alternate; } @keyframes whiteCircleMove { 0% { transform: translate(0, 0) scale(1); } 35% { transform: translate(34vw, 8vh) scale(1.08); } 70% { transform: translate(18vw, 34vh) scale(0.92); } 100% { transform: translate(48vw, 28vh) scale(1.12); } } @keyframes blackCircleMove { 0% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-32vw, -10vh) scale(0.95); } 70% { transform: translate(-18vw, -32vh) scale(1.12); } 100% { transform: translate(-46vw, -24vh) scale(0.9); } } @keyframes whiteSmallMove { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40vw, 42vh) scale(1.25); } 100% { transform: translate(-18vw, 18vh) scale(0.85); } } @keyframes blackSmallMove { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(48vw, -38vh) scale(0.8); } 100% { transform: translate(28vw, -16vh) scale(1.2); } } section, footer { position: relative; z-index: 2; } /* ========================= 作品集顶部 ========================== */ .portfolio-hero { position: relative; z-index: 2; width: min(1480px, 96vw); margin: 0 auto; padding: 118px 0 42px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; color: #f5e6a6; } .portfolio-title h1 { font-size: clamp(96px, 23vw, 360px); line-height: 0.72; letter-spacing: -0.08em; color: #f5e6a6; font-weight: 900; } .portfolio-title .cn-title { display: block; margin-top: 26px; font-size: clamp(42px, 7vw, 118px); line-height: 0.95; letter-spacing: -0.08em; color: #fff; font-weight: 900; } .portfolio-info { padding-top: 10px; color: #f5e6a6; } .portfolio-info p { max-width: 560px; font-size: clamp(11px, 1vw, 14px); line-height: 1.55; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 30px; color: rgba(245,230,166,0.86); } .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px; } .info-grid span { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: 2px; color: rgba(245,230,166,0.55); } .info-grid strong { display: block; font-size: 12px; letter-spacing: 1.5px; color: #f5e6a6; } /* ========================= 作品网格 ========================== */ .work-grid { position: relative; z-index: 2; width: min(1480px, 96vw); margin: 0 auto; padding: 20px 0 130px; min-height: 720px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(80px, auto); column-gap: 28px; row-gap: 34px; } .work-item { position: relative; color: #f5e6a6; } .work-meta { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .work-number { font-size: clamp(24px, 3vw, 42px); line-height: 0.9; font-weight: 900; letter-spacing: -1px; color: #f5e6a6; } .work-meta h3 { font-size: 12px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; color: #f5e6a6; } .work-meta p { font-size: 10px; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: rgba(245,230,166,0.72); } /* 图片：无阴影、无遮罩、无灰度 */ .work-image-link { display: block; position: relative; overflow: hidden; border: 1px solid rgba(245,230,166,0.22); background: transparent; cursor: pointer; box-shadow: none; } .work-image-link img { width: 100%; height: 100%; display: block; object-fit: cover; filter: none; transform: none; box-shadow: none; transition: transform 0.55s cubic-bezier(.19,1,.22,1), opacity 0.35s ease; } .work-image-link::after { display: none; } .work-image-link:hover img { transform: scale(1.035); opacity: 0.96; filter: none; } .item-1 { grid-column: 1 / span 3; grid-row: 1; margin-top: 20px; } .item-1 .work-image-link { height: 190px; } .item-2 { grid-column: 7 / span 3; grid-row: 1; } .item-2 .work-image-link { height: 210px; } .item-3 { grid-column: 1 / span 3; grid-row: 2; } .item-3 .work-image-link { height: 210px; } .item-4 { grid-column: 4 / span 3; grid-row: 2; margin-top: 26px; } .item-4 .work-image-link { height: 210px; } .item-5 { grid-column: 10 / span 3; grid-row: 2; } .item-5 .work-image-link { height: 220px; } /* ========================= 关于 / 联系 ========================== */ .portfolio-about { position: relative; z-index: 2; width: min(1200px, 90vw); margin: 0 auto; padding: 120px 0; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; color: #f5e6a6; border-top: 1px solid rgba(245,230,166,0.16); } .portfolio-about span, .portfolio-contact span { display: block; margin-bottom: 18px; font-size: 11px; letter-spacing: 4px; color: rgba(245,230,166,0.55); } .portfolio-about h2, .portfolio-contact h2 { font-size: clamp(42px, 7vw, 100px); line-height: 0.95; letter-spacing: -4px; color: #f5e6a6; } .portfolio-about p { font-size: 16px; line-height: 2; color: rgba(245,230,166,0.76); } .portfolio-contact { position: relative; z-index: 2; width: min(1200px, 90vw); margin: 0 auto; padding: 120px 0; color: #f5e6a6; border-top: 1px solid rgba(245,230,166,0.16); } .portfolio-contact a { display: inline-flex; margin-top: 34px; height: 48px; align-items: center; padding: 0 24px; border: 1px solid rgba(245,230,166,0.35); border-radius: 999px; color: #f5e6a6; font-size: 12px; letter-spacing: 2px; transition: 0.3s ease; } .portfolio-contact a:hover { background: #f5e6a6; color: #000; } footer { position: relative; z-index: 2; padding: 60px 6vw; color: rgba(245,230,166,0.42); border-top: 1px solid rgba(245,230,166,0.1); font-size: 12px; letter-spacing: 2px; } /* ========================= 开场动画层 ========================== */ .intro { position: fixed; inset: 0; z-index: 50; background: #050505; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .intro-bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050505; } .intro-bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .intro-bg-video::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,0.05), rgba(0,0,0,0.68)), linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(0,0,0,0.86)); pointer-events: none; } .intro-inner { position: relative; z-index: 5; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; } .progress-ring { position: absolute; inset: 0; transform: rotate(-90deg); } .progress-bg { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 5; } .progress-bar { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 879.64; stroke-dashoffset: 879.64; transition: stroke-dashoffset 0.35s ease, opacity 0.45s ease; } .logo-wrap { position: relative; width: 168px; height: 168px; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.19,1,.22,1); } .logo-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; } .particle-canvas { position: absolute; inset: 0; width: 168px; height: 168px; opacity: 0; pointer-events: none; } .loading-percent { position: absolute; top: 18px; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.68); transition: opacity 0.4s ease, transform 0.4s ease; } .loading-text { position: absolute; bottom: 14px; font-size: 12px; letter-spacing: 3px; color: #fff; opacity: 0.68; transition: opacity 0.4s ease, transform 0.4s ease; } .enter-button { position: absolute; z-index: 10; width: 128px; height: 128px; border-radius: 50%; border: 1px solid #fff; background: #fff; color: #000; cursor: pointer; letter-spacing: 3px; font-size: 13px; opacity: 0; transform: scale(0.72); pointer-events: none; transition: opacity 0.7s ease, transform 0.25s ease, background 0.35s ease, color 0.35s ease; } .enter-button:hover { background: transparent; color: #fff; } .enter-button::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 0; } } .intro.loaded .logo-wrap { opacity: 0; transform: scale(0.82); } .intro.loaded .loading-text, .intro.loaded .loading-percent { opacity: 0; transform: translateY(8px); } .intro.loaded .enter-button { opacity: 1; transform: scale(1); pointer-events: auto; } .intro.loaded .progress-bar { opacity: 0.15; } .intro.particle-mode .logo-wrap { opacity: 1; transform: scale(1); } .intro.particle-mode .logo-wrap img { opacity: 0; } .intro.particle-mode .particle-canvas { opacity: 1; } .intro.exiting .intro-inner { animation: centerShrink 0.78s cubic-bezier(.77,0,.175,1) forwards; } @keyframes centerShrink { to { transform: scale(0.55); opacity: 0; filter: blur(8px); } } .intro.exit { animation: introFade 0.35s ease forwards; animation-delay: 0.42s; } @keyframes introFade { to { opacity: 0; visibility: hidden; } } .skip-intro, .sound-toggle { position: absolute; z-index: 12; height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.26); background: rgba(0,0,0,0.35); color: #fff; backdrop-filter: blur(10px); font-size: 11px; letter-spacing: 2px; cursor: pointer; transition: 0.3s ease; } .skip-intro:hover, .sound-toggle:hover { background: #fff; color: #000; } .skip-intro { right: 34px; bottom: 34px; } .sound-toggle { left: 34px; bottom: 34px; } /* ========================= 双层扫描遮罩 ========================== */ .wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; } .wipe.active { display: block; } .wipe-layer { position: absolute; top: 0; width: 130%; height: 100%; transform: translateX(-115%) skewX(-12deg); transform-origin: center; } .layer-one { left: -15%; background: #000; } .layer-two { left: -22%; width: 110%; background: #fff; opacity: 0.95; } .wipe.active .layer-one { animation: scanOne 1.15s cubic-bezier(.77,0,.175,1) forwards; } .wipe.active .layer-two { animation: scanTwo 1.25s cubic-bezier(.77,0,.175,1) 0.12s forwards; } @keyframes scanOne { 0% { transform: translateX(-115%) skewX(-12deg); } 45% { transform: translateX(0%) skewX(-12deg); } 100% { transform: translateX(125%) skewX(-12deg); } } @keyframes scanTwo { 0% { transform: translateX(-125%) skewX(-12deg); } 45% { transform: translateX(5%) skewX(-12deg); } 100% { transform: translateX(135%) skewX(-12deg); } } /* ========================= 手机端 ========================== */ @media (max-width: 900px), (hover: none) and (pointer: coarse) { .ripple-canvas { display: none; } .site-header { height: 68px !important; padding: 0 18px !important; } .brand { gap: 8px !important; font-size: 12px !important; letter-spacing: 2px !important; } .brand img { width: 28px !important; height: 28px !important; } .brand span { font-size: 12px !important; letter-spacing: 2px !important; white-space: nowrap !important; } .menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; } .nav { position: fixed !important; right: 18px !important; top: 74px !important; width: 210px !important; padding: 22px !important; border-radius: 20px !important; background: rgba(0, 0, 0, 0.82) !important; border: 1px solid rgba(245,230,166,0.16) !important; backdrop-filter: blur(14px) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(-10px) !important; transition: 0.3s ease !important; } .nav.open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } .portfolio-hero { width: calc(100% - 32px); padding: 96px 0 36px; grid-template-columns: 1fr; gap: 28px; } .portfolio-title h1 { font-size: clamp(78px, 31vw, 150px); line-height: 0.78; letter-spacing: -0.08em; } .portfolio-title .cn-title { margin-top: 16px; font-size: clamp(38px, 18vw, 76px); } .portfolio-info p { max-width: 100%; font-size: 11px; } .info-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .work-grid { width: calc(100% - 32px); padding: 10px 0 90px; display: grid; grid-template-columns: 1fr; gap: 38px; min-height: auto; } .work-item, .item-1, .item-2, .item-3, .item-4, .item-5 { grid-column: auto; grid-row: auto; margin-top: 0; } .item-1 .work-image-link, .item-2 .work-image-link, .item-3 .work-image-link, .item-4 .work-image-link, .item-5 .work-image-link { height: 230px; } .work-number { font-size: 34px; } .work-meta h3 { font-size: 12px; } .work-meta p { font-size: 10px; } .portfolio-about, .portfolio-contact { width: calc(100% - 32px); padding: 80px 0; grid-template-columns: 1fr; gap: 26px; } .portfolio-about h2, .portfolio-contact h2 { font-size: clamp(38px, 12vw, 58px); letter-spacing: -2px; } .portfolio-about p { font-size: 14px; line-height: 1.9; } .music-control { right: 18px !important; bottom: 20px !important; height: 38px !important; padding: 0 14px !important; font-size: 10px !important; } .intro-inner { width: min(260px, 76vw); height: min(260px, 76vw); } .progress-ring { width: 100%; height: 100%; } .logo-wrap, .particle-canvas { width: 138px; height: 138px; } .enter-button { width: 112px; height: 112px; } .skip-intro { right: 20px; bottom: 22px; } .sound-toggle { left: 20px; bottom: 22px; } } @media (max-width: 380px) { .portfolio-title h1 { font-size: 76px; } .portfolio-title .cn-title { font-size: 42px; } .info-grid { grid-template-columns: 1fr; } .item-1 .work-image-link, .item-2 .work-image-link, .item-3 .work-image-link, .item-4 .work-image-link, .item-5 .work-image-link { height: 210px; } }