/* ========================================================= 首页深色版 — 深色海景 hero（参考稿：首页-改稿.html） 双主题方案 A： - html[data-theme="dark"] 深色版（默认）：夜空 + 月亮 + 双帆船 - html[data-theme="light"] 浅色版：浅色清爽海景 主题由 内联脚本设置（?theme= > localStorage > dark）， 避免刷新闪烁；hero 内 JS 通过 body.classList 检测主题分支。 注：全局深色变量覆盖 + 版本徽章样式已迁移至 base.css / site.css（全站生效）。 ========================================================= */ /* ========================================================= Hero 深色海景（参考稿移植，作用域限定 .hero） ========================================================= */ .hero { position: relative; height: calc(100vh - 64px); /* header(sticky) 之后全屏 */ min-height: 640px; max-height: 960px; overflow: hidden; padding: 0; background: #04060e; color: #fff; } /* 氛围光晕 */ .hero .glow { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 1; } .hero .g1 { width: 50vw; height: 50vw; background: #1d4ed8; opacity: 0.22; top: -18%; right: -10%; } .hero .g2 { width: 40vw; height: 40vw; background: #0891b2; opacity: 0.18; bottom: -20%; left: -12%; } /* 月亮 */ .hero .moon { position: absolute; right: 11vw; top: 9vh; width: 7vh; height: 7vh; border-radius: 50%; z-index: 2; overflow: hidden; background: radial-gradient(circle at 38% 33%, #f8fbff 0 7%, #d5e7f8 32%, #a6c8ea 71%, #7da9da); box-shadow: 0 0 74px 22px rgba(147, 197, 253, 0.17); opacity: 0.92; } .hero .moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 31% 28%, rgba(104,145,185,.25) 0 5%, transparent 5.5%), radial-gradient(ellipse at 65% 44%, rgba(104,145,185,.2) 0 7%, transparent 7.5%), radial-gradient(ellipse at 43% 70%, rgba(104,145,185,.18) 0 4%, transparent 4.5%); } .hero .moon::after { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; opacity: 0.55; } /* 画布 */ .hero #bg { position: absolute; inset: 0; z-index: 3; } .hero #fg { position: absolute; inset: 0; z-index: 7; pointer-events: none; } /* —— 左侧品牌区（类名避开 base.css 的 .brand / .eyebrow） ———— */ .hero .hero-brand { position: absolute; z-index: 9; left: 6vw; top: 50%; transform: translateY(-52%); max-width: 480px; } .hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 6px; color: #7dd3fc; animation: heroFadeUp 0.9s 0.2s both; } .hero .hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation: heroPulse 2s infinite; } .hero .hero-brand h1 { margin-top: 4vh; font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; line-height: 1.7; letter-spacing: 2px; color: #fff; animation: heroFadeUp 0.9s 0.4s both; } .hero .hero-brand h1 .lead { display: block; font-size: 0.72em; font-weight: 400; color: rgba(255,255,255,.6); letter-spacing: 6px; margin-bottom: 8px; } .hero .hero-brand h1 em { font-style: normal; background: linear-gradient(90deg, #60a5fa, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .hero-desc { margin-top: 3vh; font-size: 15px; line-height: 2.1; color: rgba(255,255,255,.58); white-space: pre-line; /* 后台文案按句号换行分段 */ animation: heroFadeUp 0.9s 0.6s both; } .hero .btns { display: flex; gap: 16px; margin-top: 4.5vh; animation: heroFadeUp 0.9s 0.8s both; } .hero .btn-p { display: inline-flex; align-items: center; gap: 6px; padding: 12px 26px; border-radius: 99px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; background: #0E0E10; box-shadow: 0 0 24px rgba(34,211,238,.25); transition: transform 0.3s ease, box-shadow 0.3s ease; } .hero .btn-p:hover { transform: translateY(-2px); background: #1E8FD5; box-shadow: 0 0 30px rgba(34,211,238,.4); } .hero .btn-p .arrow { transition: transform 0.3s ease; } .hero .btn-p:hover .arrow { transform: translateX(4px); } .hero .btn-s { display: inline-flex; align-items: center; padding: 12px 26px; border-radius: 99px; cursor: pointer; font-size: 14px; font-weight: 500; background: transparent; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.25); transition: border-color 0.3s ease, color 0.3s ease; } .hero .btn-s:hover { border-color: #22d3ee; color: #22d3ee; } /* —— 帆船 ———— */ .hero .ship { position: absolute; z-index: 5; right: 2vw; animation: heroSurge 7s ease-in-out infinite; } @keyframes heroSurge { 0%, 100% { transform: translate(0, 1px) rotate(-0.7deg); } 50% { transform: translate(8px, -5px) rotate(0.5deg); } } .hero .ship svg { width: 100%; height: auto; overflow: visible; display: block; } .hero .sail-skin { fill: url(#skin); opacity: 0.15; } .hero .sail-edge { stroke: rgba(125,211,252,.55); stroke-width: 1.8; fill: none; stroke-linecap: round; } .hero .jib-skin { fill: url(#skin); opacity: 0.09; } .hero .batten-line { stroke: rgba(147,197,253,.22); stroke-width: 1; fill: none; } .hero .mast { stroke: url(#mastG); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(34,211,238,.45)); } .hero .hull { fill: rgba(15,23,42,.92); stroke: rgba(147,197,253,.8); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(96,165,250,.22)); } .hero .hull-deco { stroke: rgba(147,197,253,.4); stroke-width: 1; fill: none; } .hero .bird { stroke: rgba(147,197,253,.6); stroke-width: 2; fill: none; stroke-linecap: round; } .hero .node { fill: #22d3ee; filter: drop-shadow(0 0 6px #22d3ee); animation: heroTwk 3s infinite; } .hero .node:nth-of-type(2n) { animation-delay: 1.3s; } @keyframes heroTwk { 50% { opacity: 0.3; } } /* 帆上的字：印染 */ .hero text { font-family: "ZCOOL XiaoWei", "STKaiti", "KaiTi", serif; } .hero .sail-copy { filter: url(#fabric); opacity: 0; animation: heroTIn 1.2s both; } .hero .copy1 { font-size: 19px; letter-spacing: 1px; fill: rgba(226,238,255,.63); animation-delay: 0.9s; } .hero .copy2 { font-size: 21px; letter-spacing: 1px; fill: rgba(190,225,255,.76); animation-delay: 1.2s; } .hero .copy3 { font-size: 22px; letter-spacing: 1px; fill: rgba(235,244,255,.84); animation-delay: 1.5s; } .hero .ai-tag { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 19px; fill: rgba(34,211,238,.75); letter-spacing: 2px; } @keyframes heroTIn { to { opacity: 1; } } .hero .flag { transform-origin: 407px 58px; animation: heroFlap 1.5s ease-in-out infinite; } @keyframes heroFlap { 50% { transform: skewY(7deg) scaleX(.82); } } .hero .sail-motion, .hero .sail-texts { transform-box: fill-box; transform-origin: center; } .hero .sail-motion { animation: heroSailWind 4.2s ease-in-out infinite; } .hero .right-sail-motion { animation-delay: -1.35s; } .hero .sail-texts { animation: heroTextWind 4.2s ease-in-out infinite; } @keyframes heroSailWind { 0%, 100% { transform: skewX(0deg) scaleY(1); } 50% { transform: skewX(-2.2deg) scaleY(1.014); } } @keyframes heroTextWind { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(4px, -2px) rotate(-0.55deg); } } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } } @keyframes heroPulse { 50% { opacity: 0.3; } } /* —— 响应式 ———— */ @media (max-width: 900px) { .hero { max-height: none; height: auto; min-height: 0; padding: 8vh 0 6vh; } .hero .moon { right: 8vw; top: 5vh; width: 8vh; height: 8vh; } .hero .hero-brand { position: relative; left: auto; top: auto; transform: none; padding: 0 7vw; max-width: none; margin-bottom: 6vh; } .hero .ship { position: relative; right: auto; margin: 0 auto; width: 92% !important; /* 覆盖 JS 定位，v2 已验证 */ top: auto !important; } } @media (max-width: 540px) { .hero .hero-eyebrow { font-size: 10px; letter-spacing: 4px; } .hero .hero-brand h1 { font-size: 20px; line-height: 1.65; letter-spacing: 1px; } .hero .hero-brand h1 .lead { margin-bottom: 4px; letter-spacing: 4px; } .hero .hero-desc { font-size: 13px; line-height: 2; } .hero .btns { gap: 12px; flex-wrap: wrap; } .hero .btn-p, .hero .btn-s { padding: 14px 18px; font-size: 14px; } .hero .moon { right: 6vw; width: 9vw; height: 9vw; } } /* ========================================================= 浅色版分支：同构图，浅色清爽海景（无月亮 / 帆透明 / 船体品牌蓝 / 水色去灰） ========================================================= */ html[data-theme="light"] .hero { /* 暖白带极淡青，去灰感 */ background: linear-gradient( to bottom, #FCFCFA 0%, #F7F6F2 55%, #F1EFEA 100% ); color: var(--c-ink); } /* 光晕大幅淡化，避免明显蓝色氛围 */ html[data-theme="light"] .hero .g1 { background: #4FB3E8; opacity: 0.07; } html[data-theme="light"] .hero .g2 { background: #1E8FD5; opacity: 0.05; } /* 浅色版去掉月亮 */ html[data-theme="light"] .hero .moon { display: none; } html[data-theme="light"] .hero .hero-eyebrow { color: var(--c-primary-2); } html[data-theme="light"] .hero .hero-eyebrow::before { background: var(--c-primary); box-shadow: 0 0 12px rgba(30,143,213,.6); } html[data-theme="light"] .hero .hero-brand h1 { color: var(--c-ink); } html[data-theme="light"] .hero .hero-brand h1 .lead { color: var(--c-mute); } html[data-theme="light"] .hero .hero-brand h1 em { background: linear-gradient(90deg, #1E8FD5, #4FB3E8); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .hero .hero-desc { color: var(--c-ink-2); } html[data-theme="light"] .hero .btn-p { color: #fff; background: #0E0E10; box-shadow: 0 4px 20px rgba(14,14,16,.2); } html[data-theme="light"] .hero .btn-p:hover { background: #1E8FD5; box-shadow: 0 8px 28px rgba(30,143,213,.35); } html[data-theme="light"] .hero .btn-s { color: var(--c-ink); border-color: var(--c-line-2); } html[data-theme="light"] .hero .btn-s:hover { border-color: var(--c-primary); color: var(--c-primary); } /* 船帆：内部透明，仅品牌蓝描边勾勒帆形 */ html[data-theme="light"] .hero .sail-skin { fill: transparent; opacity: 1; } html[data-theme="light"] .hero .sail-edge { stroke: rgba(30,143,213,.55); } html[data-theme="light"] .hero .batten-line { stroke: rgba(30,143,213,.25); } html[data-theme="light"] .hero .mast { stroke: rgba(21,111,168,.5); filter: drop-shadow(0 0 8px rgba(30,143,213,.15)); } /* 船体：透明（浅色版），仅品牌蓝线条勾勒轮廓（与船帆描边一致） */ html[data-theme="light"] .hero .hull { fill: transparent; stroke: rgba(30,143,213,.55); filter: drop-shadow(0 4px 14px rgba(30,143,213,.16)); } html[data-theme="light"] .hero .hull-deco { stroke: rgba(30,143,213,.4); } html[data-theme="light"] .hero .node { fill: rgba(34,211,238,.6); filter: drop-shadow(0 0 6px rgba(34,211,238,.4)); } /* 三角旗：暖红（#E4574D） */ html[data-theme="light"] .hero .flag { fill: rgba(228,87,77,.92); stroke: rgba(255,173,164,.9); } /* 帆上的字：去掉布料位移滤镜 + 深蓝纯色 + 白描边，保证清晰 */ html[data-theme="light"] .hero .sail-copy { filter: none; font-weight: 600; paint-order: stroke; stroke: rgba(255,255,255,.6); stroke-width: 2; stroke-linejoin: round; } html[data-theme="light"] .hero .copy1 { fill: #1E5B96; font-size: 20px; letter-spacing: 2px; } html[data-theme="light"] .hero .copy2 { fill: #175491; font-size: 22px; letter-spacing: 2px; } html[data-theme="light"] .hero .copy3 { fill: #11467B; font-size: 23px; letter-spacing: 3px; } html[data-theme="light"] .hero .ai-tag { fill: #1E8FD5; }