/* ===================================================================== acttao 官网样式 —— 「深色 · 冷 · 静 · 贵」 方向（董事长 2026-09-07 第三版定）：不要白底；高级 · 时尚 · 科技感。 手法（不是形容词，是可核对的做法）： 1) 三层深色：主底 #0A0B0D / 分区 #121316 / 卡片 #17181C，层次靠发丝线不靠色块。 2) 版式对比：超大 + 紧字距（-.02em）+ 细字重的标题，对上极小 + 宽字距（.12em） + 大写的标签（导航 / 分区名 / 信任条 / 按钮）——时尚版式的核心手法。 3) 强调色只做线与数字：品牌绿提亮成冷调 #4FE08A，绝不做实心大色块按钮。 4) 质感：发丝级白色透明分隔线 + 两团大范围极淡径向光晕（3–5%）藏在背景里。 5) 图片：统一压暗去饱和提对比，卡片图下缘用渐变融进底色，图与背景是一体。 6) 动效只有两种：滚动进入的淡入 + 微上移；hover 图片 1.03 微缩放 + 遮罩变淡。 单文件、无框架、无 JS 库；字体走 Google Fonts（Inter / Noto Sans JP）并有本地兜底栈。 双主题（2026-09-07 加）：**所有颜色只走自定义属性**，:root = dark（默认、品牌调子）， html[data-theme="light"] 覆盖成同一设计的浅色面孔。切换靠 内联脚本（防闪白）+ 页眉右上角圆形按钮。light 不是「把黑底改白」——底色三层靠发丝级浅灰线分层、强调绿 换深一档（白底上 #4FE08A 会糊）、径向光晕换成极淡中性灰（白底上不许出现绿雾）。 对比度：dark 正文 #F2F2F4/#0A0B0D ≈ 18:1、次级 #9A9CA3 ≈ 6.9:1； light 正文 #15171A/#FFFFFF ≈ 18:1、次级 #565B63 ≈ 6.8:1、强调 #0A7A44 ≈ 5.4:1。 ===================================================================== */ :root { color-scheme: dark; /* —— 面 —— */ --bg: #0A0B0D; /* 主底：近黑，微冷 */ --bg-2: #121316; /* 分区底（CTA 条 / notice） */ --bg-3: #17181C; /* 卡片 / 浮层 */ --bg-4: #1D1F24; /* hover 面 */ --footer-bg: #0A0B0D; --header-bg: rgba(10, 11, 13, .72); /* 毛玻璃页眉 */ --header-solid: #0C0D10; /* 不支持 backdrop-filter 时的兜底 / 移动端展开面 */ --sub-bg: rgba(18, 19, 22, .96); /* 导航下拉 */ --sub-hover: rgba(255, 255, 255, .03); --card-bg: rgba(23, 24, 28, .55); --card-bg-hover: rgba(29, 31, 36, .72); --card-shadow: none; --hover-wash: rgba(255, 255, 255, .018); /* 表格行 hover */ /* —— 字 —— */ --fg: #F2F2F4; /* 正文 */ --fg-2: #9A9CA3; /* 次级字 */ --fg-3: #6E7076; /* 三级字 */ /* —— 线 —— */ --line: rgba(255, 255, 255, .08); /* 发丝线 */ --line-2: rgba(255, 255, 255, .16); /* 稍强的线 */ /* —— 强调 —— */ --acc: #4FE08A; /* 品牌绿提亮一档：黑底上干净、有电感 */ --acc-dim: rgba(79, 224, 138, .38); --acc-zero: rgba(79, 224, 138, 0); /* 渐变收尾（Safari 不认 transparent 混色） */ --acc-wash: rgba(79, 224, 138, .04); --sel-bg: rgba(79, 224, 138, .22); --sel-fg: #FFFFFF; /* —— 背景光晕：藏在底下的纵深，不是发光特效 —— */ --glow-1: rgba(79, 224, 138, .06); --glow-2: rgba(70, 132, 168, .05); --hero-glow: rgba(79, 224, 138, .05); --hero-sheen: rgba(255, 255, 255, .018); --grid-1: rgba(255, 255, 255, .022); /* hero 网格线 */ --grid-2: rgba(255, 255, 255, .016); /* —— 图 —— */ --logo-filter: brightness(0) invert(1); /* 页脚 logo 压成单色标记 */ --logo-opacity: .5; --img-filter: brightness(.94) saturate(.9); /* 正文插图 */ --thumb-filter: brightness(.90) saturate(.94); /* 卡顶图：深色下压一档，浅色下提一档 */ --thumb-bg: #0E0F12; /* 卡顶图的底衬（深色图版） */ --thumb-edge: rgba(255, 255, 255, 0); /* 图与卡身之间的界线 */ /* 卡顶图下缘的遮罩：dark 融进近黑，light 只留极轻的顶部压暗 + 一条界线 */ --thumb-veil: linear-gradient(180deg, rgba(10, 11, 13, .10) 0%, rgba(10, 11, 13, 0) 34%, rgba(10, 11, 13, .55) 78%, rgba(10, 11, 13, .92) 100%); /* —— zh 审阅横幅 —— */ --banner-bg: #16130C; --banner-line: rgba(235, 182, 97, .32); --banner-fg: #EBB661; /* —— 度量 —— */ --container: 1180px; --gutter: 20px; --radius: 3px; --font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; --font-en: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --font-num: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --ease: cubic-bezier(.22, .61, .24, 1); } /* ---------- light：同一个设计的另一副面孔 ---------- 纯白 / 极浅暖灰 / 卡片白三层，层次靠 rgba(0,0,0,.09) 的发丝线，不靠色块； 强调绿深一档到 #0A7A44（白底 5.4:1）；光晕换成中性极淡灰，白底上不出现绿雾。 */ html[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-2: #F6F6F3; --bg-3: #FFFFFF; --bg-4: #EFEFEB; --footer-bg: #FAFAF8; --header-bg: rgba(255, 255, 255, .82); --header-solid: #FFFFFF; --sub-bg: rgba(255, 255, 255, .98); --sub-hover: rgba(0, 0, 0, .035); --card-bg: rgba(255, 255, 255, .72); --card-bg-hover: rgba(255, 255, 255, .96); --card-shadow: 0 1px 2px rgba(16, 18, 22, .04), 0 14px 32px -20px rgba(16, 18, 22, .18); --hover-wash: rgba(0, 0, 0, .022); --fg: #15171A; --fg-2: #565B63; --fg-3: #70757D; --line: rgba(0, 0, 0, .09); --line-2: rgba(0, 0, 0, .17); --acc: #0A7A44; --acc-dim: rgba(10, 122, 68, .42); --acc-zero: rgba(10, 122, 68, 0); --acc-wash: rgba(10, 122, 68, .05); --sel-bg: rgba(10, 122, 68, .16); --sel-fg: #0B0C0E; --glow-1: rgba(116, 126, 142, .050); --glow-2: rgba(152, 144, 128, .048); --hero-glow: rgba(112, 122, 138, .072); --hero-sheen: rgba(0, 0, 0, .016); --grid-1: rgba(0, 0, 0, .038); --grid-2: rgba(0, 0, 0, .028); --logo-filter: brightness(0); --logo-opacity: .42; --img-filter: brightness(1.02) saturate(.96); --thumb-filter: brightness(1.07) saturate(1.04); --thumb-bg: #101216; --thumb-edge: rgba(0, 0, 0, .14); --thumb-veil: linear-gradient(180deg, rgba(8, 10, 14, .12) 0%, rgba(8, 10, 14, 0) 46%, rgba(8, 10, 14, 0) 100%); --banner-bg: #FFF7E6; --banner-line: rgba(146, 98, 12, .34); --banner-fg: #7A5310; } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; font-family: var(--font-ja); font-size: 16px; line-height: 1.85; letter-spacing: .01em; font-weight: 400; color: var(--fg); /* 两团大范围极淡光晕藏在背景里，制造纵深——不是「发光特效」 */ background: radial-gradient(1100px 720px at 78% -6%, var(--glow-1), transparent 62%), radial-gradient(900px 620px at 6% 96%, var(--glow-2), transparent 64%), var(--bg); background-attachment: fixed, fixed, scroll; overflow-x: hidden; word-break: normal; overflow-wrap: break-word; line-break: strict; /* 日文禁则：标点不甩到行首 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[lang="en"] body { font-family: var(--font-en); line-height: 1.7; letter-spacing: 0; } html[lang="zh"] body { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", var(--font-ja); line-height: 1.8; letter-spacing: .015em; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--fg); text-decoration: none; } a:hover { color: var(--acc); } a:focus-visible, button:focus-visible { outline: 1px solid var(--acc); outline-offset: 3px; } strong { font-weight: 600; color: var(--fg); } hr { border: 0; border-top: 1px solid var(--line); margin: 3.5rem 0; } ::selection { background: var(--sel-bg); color: var(--sel-fg); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .skip-link { position: absolute; left: -9999px; top: 0; } .skip-link:focus { left: 8px; top: 8px; background: var(--bg-3); color: var(--fg); border: 1px solid var(--line-2); padding: .4rem .8rem; z-index: 100; } @media (min-width: 700px) { :root { --gutter: 32px; } } @media (min-width: 1100px) { :root { --gutter: 44px; } } /* ---------- 版式：大标题「大 · 瘦 · 紧」；小标签「小 · 宽 · 大写」 ---------- */ h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.35; letter-spacing: -.015em; color: var(--fg); } html[lang="ja"] h1, html[lang="zh"] h1 { font-feature-settings: "palt" 1; } p { margin: 0 0 1.35em; } main { padding: 3rem 0 5rem; } main > *:first-child { margin-top: 0; } @media (min-width: 900px) { main { padding: 4.5rem 0 7rem; } } /* 内页大标题：超大、细字重、紧字距 */ .page-title, main > h1 { font-size: clamp(2rem, 6.2vw, 3.25rem); font-weight: 300; line-height: 1.16; letter-spacing: -.025em; margin: 0 0 2.75rem; padding-bottom: 1.6rem; position: relative; max-width: 18em; } .page-title::after, main > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--acc) 0, var(--acc-dim) 56px, var(--line) 56px, var(--line) 100%); } @media (min-width: 900px) { .page-title, main > h1 { margin-bottom: 3.5rem; } } /* 分区：发丝线分隔 + 小字宽字距大写的分区名（对比拉开，这是时尚版式的核心） */ main section { margin: 0; padding: 3.2rem 0 0; } main section + section { border-top: 1px solid var(--line); margin-top: 3.2rem; } main > section:first-child { padding-top: 0; } @media (min-width: 900px) { main section { padding-top: 4.2rem; } main section + section { margin-top: 4.2rem; } } section > h2 { font-size: .78125rem; font-weight: 500; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 1.6rem; padding-left: 1.9rem; position: relative; } section > h2::before { content: ""; position: absolute; left: 0; top: .62em; width: 1.15rem; height: 1px; background: linear-gradient(90deg, var(--acc), var(--acc-dim)); } html[lang="ja"] section > h2, html[lang="zh"] section > h2 { letter-spacing: .1em; font-size: .8125rem; } section > h2 + * { margin-top: 0; } h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.005em; margin: 2.4rem 0 .8rem; } h3:first-child { margin-top: 0; } h4 { font-size: .9375rem; font-weight: 500; margin: 1.8rem 0 .5rem; color: var(--fg-2); } main p, main li { color: var(--fg); } main section > p, main > p { max-width: 46em; } main section > p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1.35em; padding-left: 1.35em; } li { margin: .35em 0; } li > ul, li > ol { margin: .35em 0 0; } main ul > li::marker { color: var(--acc-dim); } main ol > li::marker { color: var(--fg-2); font-family: var(--font-num); } blockquote { margin: 2rem 0; padding: .1rem 0 .1rem 1.5rem; border-left: 1px solid var(--acc-dim); color: var(--fg-2); font-size: 1.0625rem; line-height: 1.75; max-width: 44em; } blockquote p:last-child { margin-bottom: 0; } figure { margin: 2.25rem 0; max-width: 52em; } figure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); filter: var(--img-filter); } figcaption { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-top: .75rem; } main p > img { margin: 1.5rem 0; border-radius: var(--radius); border: 1px solid var(--line); } /* ---------- 表格：全发丝线，表头小字宽字距 ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75rem 0; } .table-wrap table { margin: 0; } .table-wrap table:has(tr > :nth-child(3)) { min-width: 640px; } .table-wrap table:has(tr > :nth-child(5)) { min-width: 780px; } table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; margin: 1.75rem 0; border-top: 1px solid var(--line-2); } th, td { padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; } th { font-weight: 500; white-space: nowrap; color: var(--fg); } thead th { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; } td:first-child, th:first-child { white-space: nowrap; padding-left: 0; } td:last-child, th:last-child { padding-right: 0; } tbody td:first-child { width: 1%; color: var(--fg-2); font-size: .8125rem; letter-spacing: .06em; font-weight: 400; } tbody tr:hover td { background: var(--hover-wash); } td .num, td[data-num] { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* ---------- 按钮：只有细线与箭头，绝不做实心大色块 ---------- */ .btn { display: inline-flex; align-items: center; gap: .7em; padding: .9rem 1.55rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--fg); font-family: inherit; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .btn::after { content: ""; width: 1.15em; height: 1px; background: currentColor; opacity: .55; transition: width .25s var(--ease), opacity .25s var(--ease); } .btn:hover { color: var(--acc); border-color: var(--acc-dim); background: var(--acc-wash); } .btn:hover::after { width: 1.7em; opacity: 1; } .btn-secondary { border-color: transparent; padding-left: .2rem; padding-right: .2rem; color: var(--fg-2); } .btn-secondary:hover { color: var(--acc); border-color: transparent; background: none; } .btn + .btn { margin-left: .9rem; } html[lang="ja"] .btn, html[lang="zh"] .btn { letter-spacing: .1em; font-size: .8125rem; } /* ---------- 卡片：大格，图是主体；列数由卡片张数决定，不预设 2×2 ---------- */ .cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; } .cards .card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-shadow); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; overflow: hidden; transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); } @supports not (backdrop-filter: blur(4px)) { .cards .card { background: var(--bg-3); } } .cards .card:hover { border-color: var(--line-2); background: var(--card-bg-hover); } /* 卡顶图：满宽出血 3:2，下缘渐变融进卡片底色（site.py::_render_cards 产出 .card-thumb） */ .cards .card > .card-thumb { display: block; position: relative; margin: -1.4rem -1.4rem 1.35rem; overflow: hidden; background: var(--thumb-bg); border-bottom: 1px solid var(--thumb-edge); } .cards .card > .card-thumb::after { content: ""; position: absolute; inset: 0; background: var(--thumb-veil); transition: opacity .45s var(--ease); } .cards .card > .card-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: var(--thumb-filter); transition: transform .55s var(--ease); } .cards .card > a.card-thumb:hover img { transform: scale(1.03); } .cards .card > a.card-thumb:hover::after { opacity: .72; } .cards .card h3 { margin: 0 0 .55rem; font-size: 1.25rem; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; color: var(--fg); } .cards .card p { margin-bottom: 1.15rem; font-size: .9375rem; line-height: 1.75; color: var(--fg-2); } .cards .card p:last-child { margin-bottom: 0; } .cards .card ul { font-size: .9375rem; color: var(--fg-2); } /* 卡内的「进入」是细线箭头链接，不是实心按钮 */ .cards .card .btn { margin-top: auto; align-self: flex-start; border: 0; padding: 0; background: none; color: var(--fg-2); border-bottom: 1px solid transparent; border-radius: 0; padding-bottom: .3rem; } .cards .card .btn:hover { background: none; color: var(--acc); border-bottom-color: var(--acc-dim); } .cards .card p:has(> .btn) { margin-top: auto; margin-bottom: 0; } @media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } .cards:not(:has(.card-thumb)) { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } /* 恰好 3 张：宽到能三等分才分，分不动就整列堆叠，绝不留 2+1 的孤儿行 */ .cards:has(.card:nth-child(3)):not(:has(.card:nth-child(4))) { grid-template-columns: 1fr; } .cards .card { padding: 1.6rem 1.6rem 1.75rem; } .cards .card > .card-thumb { margin: -1.6rem -1.6rem 1.5rem; } .cards .card h3 { font-size: 1.5rem; } } @media (min-width: 900px) { .cards:has(.card:nth-child(3)):not(:has(.card:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 恰好 1 张 = 一条横幅式专题卡。叙事线是 2 进 + 1 出的不对称， 这一张用横向排布把「走出去」读成刻意的收束，而不是格子掉了一角。 全部靠 :has() 数卡片，site.py 产出的卡片 HTML 一个字不用改。 */ @media (min-width: 760px) { .cards:not(:has(.card:nth-child(2))) { grid-template-columns: 1fr; } .cards:not(:has(.card:nth-child(2))) > .card > .btn { justify-self: start; margin-top: 0; } /* 有卡顶图：图绝对定位在左侧、上下满高，文字在右侧垂直居中 */ .cards:not(:has(.card:nth-child(2))):has(.card-thumb) > .card { min-height: 16rem; justify-content: center; padding: 2.4rem 2.4rem 2.4rem calc(42% + 2.4rem); } .cards:not(:has(.card:nth-child(2))):has(.card-thumb) > .card > .card-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; margin: 0; border-bottom: 0; border-right: 1px solid var(--thumb-edge); } .cards:not(:has(.card:nth-child(2))):has(.card-thumb) > .card > .card-thumb img { height: 100%; aspect-ratio: auto; } .cards:not(:has(.card:nth-child(2))):has(.card-thumb) > .card > p:has(> .btn) { margin-top: .35rem; } /* 无卡顶图：标题在左、正文与入口在右，同样横成一条 */ .cards:not(:has(.card:nth-child(2))):not(:has(.card-thumb)) > .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); column-gap: 3rem; align-content: start; } .cards:not(:has(.card:nth-child(2))):not(:has(.card-thumb)) > .card > h3 { grid-column: 1; grid-row: 1; margin-bottom: 0; } .cards:not(:has(.card:nth-child(2))):not(:has(.card-thumb)) > .card > :not(h3) { grid-column: 2; } .cards:not(:has(.card:nth-child(2))):not(:has(.card-thumb)) > .card > p:has(> .btn) { margin-top: .35rem; justify-self: start; } } @media (min-width: 1100px) { .cards .card h3 { font-size: 1.75rem; } .cards .card p { font-size: .96875rem; } .cards:not(:has(.card:nth-child(2))):has(.card-thumb) > .card { min-height: 18rem; padding: 2.8rem 3rem 2.8rem calc(40% + 3rem); } .cards:not(:has(.card:nth-child(2))):has(.card-thumb) > .card > .card-thumb { width: 40%; } } /* 业务区 = 首页视觉主体：叙事分区之间收紧，各组卡上下相接成一整片 */ .page-home main section { padding-top: 2.6rem; } .page-home main section + section { margin-top: 2.6rem; } @media (min-width: 760px) { .page-home main section { padding-top: 3rem; } .page-home main section + section { margin-top: 3rem; } } /* ---------- facts：信任条（小字 · 宽字距 · 数字高亮 · 一行排完） ---------- */ ul.facts { list-style: none; margin: 0; padding: 1.1rem 0; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } ul.facts::-webkit-scrollbar { display: none; } ul.facts li.fact { margin: 0; flex: 1 0 8.5rem; min-width: 0; padding: .1rem 1.1rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; } ul.facts li.fact:first-child { border-left: 0; padding-left: 0; } ul.facts li.fact strong { display: block; font-family: var(--font-num); font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: var(--acc); /* 强调色只做小面积：数字高亮 */ font-variant-numeric: tabular-nums; margin-bottom: .15rem; } html[lang="ja"] ul.facts li.fact strong, html[lang="zh"] ul.facts li.fact strong { font-family: var(--font-ja); } ul.facts li.fact span { display: block; font-size: .6875rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); } @media (min-width: 900px) { ul.facts { padding: 1.35rem 0; } ul.facts li.fact { flex: 1 1 0; padding: .1rem 1.5rem; } ul.facts li.fact strong { font-size: 1.0625rem; } ul.facts li.fact span { font-size: .71875rem; } } /* ---------- notice：法定提示 ---------- */ .notice { margin: 2rem 0; padding: 1.25rem 1.4rem; background: var(--bg-2); border: 1px solid var(--line); border-left: 1px solid var(--acc-dim); border-radius: var(--radius); font-size: .875rem; line-height: 1.8; color: var(--fg-2); max-width: 46em; } .notice p:last-child { margin-bottom: 0; } /* ---------- 审阅横幅（zh 内部版，深色上要可读）---------- */ .review-banner { position: sticky; top: 0; z-index: 60; width: 100%; background: var(--banner-bg); border-bottom: 1px solid var(--banner-line); color: var(--banner-fg); text-align: center; font-size: .6875rem; font-weight: 500; letter-spacing: .14em; line-height: 1.5; padding: .55rem var(--gutter); } .review-banner a { color: var(--banner-fg); text-decoration: underline; } body:has(> .review-banner) .site-header { top: 2.15rem; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); } @supports not (backdrop-filter: blur(4px)) { .site-header { background: var(--header-solid); } } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 1rem; } .brand { display: inline-flex; align-items: center; flex-shrink: 0; } .brand img { width: 124px; height: auto; } .brand:hover { opacity: .82; } /* logo 两版按主题切换：纯 CSS，不新增模板占位符 */ .brand .logo-light { display: none; } html[data-theme="light"] .brand .logo-dark { display: none; } html[data-theme="light"] .brand .logo-light { display: block; } /* ---------- 右上角工具区：主题按钮（+ 移动端汉堡） ---------- */ .header-tools { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; } /* 圆形图标按钮：当前 dark 显示太阳（点它去 light），当前 light 显示月亮 */ .theme-toggle { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; padding: 0; line-height: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease); } html:not(.js) .theme-toggle { display: none; } /* 无 JS 时不留死控件 */ .theme-toggle:hover { color: var(--acc); border-color: var(--acc-dim); background: var(--acc-wash); } .theme-toggle:focus-visible { outline: 1px solid var(--acc); outline-offset: 3px; } .theme-toggle svg { width: 16px; height: 16px; display: block; pointer-events: none; } .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; } .nav-toggle span { display: block; height: 1px; background: var(--fg); transition: transform .25s var(--ease), opacity .2s; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .header-right { display: none; } body.nav-open .header-right { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--header-solid); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1.5rem; max-height: calc(100vh - 66px); overflow-y: auto; } .site-nav ul { list-style: none; margin: 0; padding: 0; } .site-nav li { margin: 0; } .site-nav a { display: block; padding: .95rem .1rem; border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: .78125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } html[lang="ja"] .site-nav a, html[lang="zh"] .site-nav a { letter-spacing: .09em; font-size: .8125rem; } .site-nav a:hover { color: var(--acc); } .site-nav a.active { color: var(--fg); } .site-nav .has-sub > a { position: relative; padding-right: 1.6rem; cursor: pointer; } .site-nav .has-sub > a::after { content: ""; position: absolute; right: .5rem; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); } .site-nav .has-sub.open > a::after { transform: rotate(225deg); margin-top: -2px; } .site-nav ul.sub { display: none; padding-left: 1rem; } .site-nav .has-sub.open > ul.sub { display: block; } .site-nav ul.sub a { color: var(--fg-3); letter-spacing: .08em; padding: .8rem .1rem; } .lang-switch { display: flex; gap: .1rem; align-items: center; padding: 1.1rem .1rem 0; font-family: var(--font-num); font-size: .6875rem; letter-spacing: .16em; } .lang-switch a { color: var(--fg-3); padding: .25rem .5rem; text-transform: uppercase; } .lang-switch a.current { color: var(--fg); } .lang-switch a:hover { color: var(--acc); } @media (min-width: 900px) { .brand img { width: 138px; } .nav-toggle { display: none; } .header-right, body.nav-open .header-right { display: flex; align-items: center; gap: .5rem; position: static; padding: 0; border: 0; max-height: none; overflow: visible; background: transparent; } .site-nav > ul { display: flex; align-items: center; gap: 0; } .site-nav > ul > li { position: relative; } .site-nav a { padding: 1.35rem .8rem; border: 0; } .site-nav > ul > li > a::before { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 1.05rem; height: 1px; background: linear-gradient(90deg, var(--acc), var(--acc-dim)); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .site-nav > ul > li > a:hover::before, .site-nav > ul > li > a.active::before { transform: scaleX(1); } .site-nav > ul > li.active > a { color: var(--fg); } .site-nav .has-sub > a { padding-right: 1.5rem; } .site-nav .has-sub > a::after { right: .45rem; margin-top: -4px; width: 5px; height: 5px; } .site-nav .has-sub.open > a::after { transform: rotate(45deg); margin-top: -4px; } .site-nav ul.sub, .site-nav .has-sub.open > ul.sub { display: block; position: absolute; left: 0; top: 100%; min-width: 16.5rem; background: var(--sub-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-top: 1px solid var(--acc-dim); border-radius: 0 0 var(--radius) var(--radius); padding: .4rem 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .site-nav .has-sub:hover > ul.sub, .site-nav .has-sub:focus-within > ul.sub, .site-nav .has-sub.open > ul.sub { opacity: 1; visibility: visible; transform: none; } .site-nav ul.sub a { padding: .8rem 1.2rem; white-space: nowrap; color: var(--fg-2); } .site-nav ul.sub a:hover, .site-nav ul.sub a.active { color: var(--acc); background: var(--sub-hover); } .site-nav ul.sub a::before { content: none; } .lang-switch { padding: 0 0 0 1.1rem; margin-left: .6rem; border-left: 1px solid var(--line); } .header-right { margin-left: auto; } .header-tools { margin-left: .9rem; } } /* ---------- hero：首屏——超大细字标题，一行排完 ---------- */ .hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; background: radial-gradient(760px 460px at 88% 12%, var(--hero-glow), transparent 60%), linear-gradient(180deg, var(--hero-sheen), transparent 42%); } /* 极细网格线（发丝级），只在 hero 里，制造纵深不抢眼 */ .hero::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: repeating-linear-gradient(90deg, var(--grid-1) 0 1px, transparent 1px 132px), repeating-linear-gradient(0deg, var(--grid-2) 0 1px, transparent 1px 132px); mask-image: radial-gradient(120% 100% at 70% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 20%, transparent 78%); } .hero-inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 3.6rem var(--gutter) 3.2rem; } .hero h1 { font-size: clamp(1.5rem, 4.0vw, 3.25rem); font-weight: 300; line-height: 1.24; letter-spacing: -.03em; margin: 0 0 1.5rem; max-width: none; } html[lang="en"] .hero h1 { font-size: clamp(1.6rem, 3.45vw, 2.875rem); letter-spacing: -.028em; line-height: 1.12; } .hero h1::before { content: ""; display: block; width: 56px; height: 1px; background: linear-gradient(90deg, var(--acc), var(--acc-zero)); margin-bottom: 2rem; } .hero .lead { font-size: .9375rem; line-height: 1.9; color: var(--fg-2); max-width: 44em; margin-bottom: 2.4rem; } .hero .cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin: 0; } .hero .cta .btn + .btn { margin-left: 0; } @media (min-width: 900px) { .hero-inner { padding: 6rem var(--gutter) 5.5rem; } .hero .lead { font-size: 1rem; max-width: 40em; } } @media (min-width: 1000px) { /* 桌面：这一句必须一行排完 */ .hero h1 { white-space: nowrap; } } .page-home main { padding-top: 3.2rem; } @media (min-width: 900px) { .page-home main { padding-top: 4.2rem; } } /* ---------- CTA 条 ---------- */ .cta-bar { background: var(--bg-2); border-top: 1px solid var(--line); } .cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; padding-top: 3rem; padding-bottom: 3rem; } .cta-text { margin: 0; font-size: 1.125rem; font-weight: 300; letter-spacing: -.01em; color: var(--fg); } @media (min-width: 700px) { .cta-inner { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 3.75rem; padding-bottom: 3.75rem; } .cta-text { font-size: 1.375rem; } } /* ---------- footer ---------- */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); font-size: .875rem; color: var(--fg-2); } .footer-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3.25rem; padding-bottom: 2.25rem; } /* 原 logo 是给白底做的：页脚里压成单色浅灰标记 */ .footer-logo { width: 118px; height: auto; filter: var(--logo-filter); opacity: var(--logo-opacity); margin-bottom: 1.25rem; } .footer-name { color: var(--fg); font-weight: 400; font-size: .9375rem; margin-bottom: .6rem; letter-spacing: .01em; } .site-footer address { font-style: normal; line-height: 1.95; font-size: .8125rem; } .site-footer a { color: var(--fg-2); } .site-footer a:hover { color: var(--acc); } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.5rem; align-content: start; } .footer-nav a { color: var(--fg-2); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; } html[lang="ja"] .footer-nav a, html[lang="zh"] .footer-nav a { letter-spacing: .07em; font-size: .8125rem; } .footer-nav a:hover { color: var(--acc); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 1.4rem; padding-bottom: 2.25rem; display: flex; flex-direction: column; gap: .5rem; } .notice-alcohol { margin: 0; font-size: .71875rem; line-height: 1.7; color: var(--fg-3); } .notice-alcohol:empty { display: none; } .copyright { margin: 0; font-family: var(--font-num); font-size: .6875rem; letter-spacing: .1em; color: var(--fg-3); } @media (min-width: 900px) { .footer-inner { grid-template-columns: 1.2fr 1fr; padding-top: 4rem; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* ---------- 主题切换过渡：只在点下去那 180ms 挂在 上， 平时不给全页元素加 transition（会卡）；只动背景 / 文字 / 边框三个属性。 prefers-reduced-motion 由脚本判断，直接不加这个 class。 ---------- */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .18s linear, color .18s linear, border-color .18s linear, fill .18s linear !important; } /* ---------- 动效：只有两种 ---------- */ .reveal { opacity: 0; transform: translateY(16px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } /* ---------- misc ---------- */ .page-contact main a[href^="mailto:"], .page-contact main a[href^="tel:"] { color: var(--fg); border-bottom: 1px solid var(--acc-dim); } .page-contact main a[href^="mailto:"]:hover, .page-contact main a[href^="tel:"]:hover { color: var(--acc); } main a:not(.btn):not(.card-thumb) { border-bottom: 1px solid var(--line-2); } main a:not(.btn):not(.card-thumb):hover { border-bottom-color: var(--acc-dim); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } } @media print { html { color-scheme: light; } body { background: #fff; color: #000; } .site-header, .cta-bar, .nav-toggle, .review-banner { display: none; } main { padding: 0; } a { color: inherit; } }