/* ============================================================ * nexus.css — 「一〇八 · 时养」两仪合一 · 融合组件样式 v1.0 * ------------------------------------------------------------ * 视觉语言：延续「檐下秘境」——宣纸底 / 极淡细线 / 装裱角标 / * 大留白 / 宋体题名 / 呼吸感的微光。 * 铁律：所有脉络组件一律克制。它们是"路标"，不是"主角"； * 精油瓶、色彩与核心文字始终是第一视觉主体。 * 仅新增类名（nx-*），不覆盖任何既有选择器。 * ============================================================ */ /* ============================================================ * 零·补 · 瓶身落地柔影（与既有 hero-float 同周期 8s） * 只加一层台面影，让瓶子"落"在那里——仪式感来自实感， * 不加任何遮挡瓶身的装饰。 * ============================================================ */ .detail-visual .stage img { position: relative; z-index: 1; } .detail-visual .stage::after { content: ''; position: absolute; left: 50%; bottom: 24px; width: 54%; height: 22px; margin-left: -27%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(45, 58, 56, .17), transparent 72%); animation: nxShadow 8s ease-in-out infinite; pointer-events: none; } html[data-theme="dark"] .detail-visual .stage::after { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .42), transparent 72%); } @keyframes nxShadow { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(.86); opacity: .58; } } @media (prefers-reduced-motion: reduce) { .detail-visual .stage::after { animation: none; opacity: .8; } } /* ============================================================ * 零 · 环境层微染：让「檐下秘境」的天光带上当令五行之色 * 强度 ≤5%，只作气温，绝不改变底色、绝不干扰精油。 * 变量 --amb-tint / --amb-tint2 由 nexus.js 写入 。 * ============================================================ */ .amb-tint { background: radial-gradient(ellipse 76% 48% at 50% -12%, var(--amb-tint, transparent) 0%, transparent 60%), radial-gradient(ellipse 52% 34% at 12% 96%, var(--amb-tint2, transparent) 0%, transparent 66%); animation: ambBreathe 27s ease-in-out infinite; transition: background 1.2s ease; } /* ============================================================ * 一 · 脉络带（细窄横向链 · 可点选跳转） * ============================================================ */ .nx-ribbon { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nx-ribbon::-webkit-scrollbar { display: none; } .nx-k { flex: 0 0 auto; font-family: var(--serif); font-size: 11.5px; letter-spacing: .26em; text-indent: .26em; color: var(--gold); padding-right: 10px; border-right: 1px solid var(--line2); align-self: stretch; display: flex; align-items: center; } .nx-flow { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; } .nx-n { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; padding: 5px 11px; border-radius: 9px; text-decoration: none; cursor: pointer; position: relative; transition: background .28s ease, transform .28s ease; } .nx-n::before { content: ''; position: absolute; left: 11px; right: 11px; bottom: 0; height: 1px; background: var(--nc, var(--teal)); opacity: .38; transition: opacity .28s ease; } .nx-n:hover { background: rgba(63, 131, 124, .055); transform: translateY(-1px); } .nx-n:hover::before { opacity: 1; } .nx-n i { font-style: normal; font-size: 10px; letter-spacing: .2em; color: var(--sub); opacity: .72; line-height: 1.2; } .nx-n b { font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ink); line-height: 1.3; white-space: nowrap; } .nx-n u { text-decoration: none; font-size: 10px; letter-spacing: .04em; color: var(--sub); opacity: .62; line-height: 1.2; white-space: nowrap; } .nx-ar { flex: 0 0 auto; font-style: normal; font-size: 11px; color: var(--teal); opacity: .42; padding: 0 1px; user-select: none; } /* ============================================================ * 二 · 首页 · 两大体系（108 × 24） * ============================================================ */ .nx-dual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(12px, 2.2vw, 22px); } .nx-dcard { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 26px 26px 22px; border-radius: 18px; border: 1px solid var(--line2); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .6), transparent 62%), linear-gradient(168deg, rgba(255, 254, 250, .82), rgba(246, 244, 238, .46)); box-shadow: var(--shadow); text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .38s cubic-bezier(.45, 0, .2, 1), box-shadow .38s, border-color .38s; } .nx-dcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(63, 131, 124, .3); } .nx-dcard.a:hover { border-color: rgba(176, 141, 79, .38); } .nx-dcard:active { transform: translateY(-1px); } /* 装裱角标：左上与右下各一笔，极淡 */ .nx-dcorner { position: absolute; inset: 9px; pointer-events: none; background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)); background-size: 1px 16px, 16px 1px, 1px 16px, 16px 1px; background-position: left top, left top, right bottom, right bottom; background-repeat: no-repeat; opacity: .5; } .nx-dno { font-family: var(--serif); font-size: clamp(34px, 5vw, 46px); font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--ink); opacity: .92; } .nx-dcard.a .nx-dno { color: var(--gold); opacity: .95; } .nx-dcard.b .nx-dno { color: var(--teal); opacity: .95; } .nx-dtt { font-family: var(--serif); font-size: clamp(17px, 2.4vw, 20px); font-weight: 700; letter-spacing: .18em; text-indent: .18em; color: var(--ink); margin-top: 2px; } .nx-dsub { font-size: 12px; letter-spacing: .1em; color: var(--sub); opacity: .8; } .nx-dchain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line2); } .nx-dchain span { font-size: 11.5px; letter-spacing: .12em; color: var(--ink2); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .5); } .nx-dchain em { font-style: normal; font-size: 10px; color: var(--teal); opacity: .5; } .nx-dtxt { font-size: 13px; line-height: 1.85; color: var(--ink2); margin: 2px 0 0; flex: 1 1 auto; } .nx-dtxt b { color: var(--teal); font-weight: 700; } .nx-dgo { margin-top: 12px; font-family: var(--serif); font-size: 13px; letter-spacing: .16em; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; } .nx-dgo i { font-style: normal; transition: transform .34s cubic-bezier(.45, 0, .2, 1); } .nx-dcard:hover .nx-dgo i { transform: translateX(5px); } /* 中缝「合一」 */ .nx-dmid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 2px; } .nx-dmid i { display: block; width: 1px; flex: 1 1 auto; min-height: 18px; background: linear-gradient(180deg, transparent, var(--line), transparent); } .nx-dmid b { font-family: var(--serif); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-indent: .3em; color: var(--gold); opacity: .8; writing-mode: vertical-rl; padding: 4px 0; } /* 交会条 */ .nx-union { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .34); } .nx-uk { flex: 0 0 auto; font-family: var(--serif); font-size: 11.5px; letter-spacing: .26em; text-indent: .26em; color: var(--gold); padding-right: 12px; border-right: 1px solid var(--line2); } .nx-ul { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-family: var(--serif); font-size: 13px; color: var(--ink2); } .nx-ul em { font-style: normal; font-size: 11px; color: var(--teal); opacity: .45; } /* ============================================================ * 三 · 足迹（数据互通 · 可追踪） * ============================================================ */ .nx-trail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--sub); } .nx-tk { font-family: var(--serif); font-size: 11px; letter-spacing: .24em; text-indent: .24em; color: var(--gold); opacity: .8; } .nx-ti { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .5); border: 1px solid var(--line2); } .nx-ti i { font-style: normal; font-size: 10px; letter-spacing: .12em; opacity: .6; } .nx-ti b { font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--ink2); } .nx-trail .nx-ar { opacity: .3; } /* ============================================================ * 四 · 单瓶 · 脉络关联 * ============================================================ */ .nx-bridge { position: relative; margin-top: 30px; padding: 26px 26px 22px; border-radius: 18px; border: 1px solid var(--line2); background: radial-gradient(110% 80% at 0% 0%, var(--nc, var(--teal)), transparent 58%), linear-gradient(168deg, rgba(255, 254, 250, .86), rgba(246, 244, 238, .5)); box-shadow: var(--shadow); overflow: hidden; } /* 把染色压到几乎不可见，只留一点"这一节段的色温" */ .nx-bridge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(255, 254, 250, .9), rgba(255, 254, 250, .82)); pointer-events: none; } .nx-bridge > * { position: relative; } .nx-bhd { margin-bottom: 16px; } .nx-bk { font-size: 11px; letter-spacing: .22em; color: var(--teal); opacity: .8; } .nx-bhd h3 { font-family: var(--serif); font-size: clamp(17px, 2.4vw, 20px); font-weight: 700; letter-spacing: .14em; text-indent: .14em; color: var(--ink); margin: 6px 0 0; } .nx-bmain { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 28px); align-items: start; } .nx-bseg { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 116px; padding: 16px 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .6); } .nx-bsegno { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--nc, var(--teal)); line-height: 1; } .nx-bsegv { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ink); margin-top: 4px; } .nx-bsegs { font-size: 11px; letter-spacing: .06em; color: var(--sub); opacity: .78; text-align: center; } .nx-binfo { display: flex; flex-direction: column; gap: 9px; } .nx-bline { display: flex; gap: 12px; align-items: baseline; } .nx-bline i { flex: 0 0 62px; font-style: normal; font-family: var(--serif); font-size: 12px; letter-spacing: .16em; color: var(--gold); opacity: .9; } .nx-bline span { font-size: 13.5px; line-height: 1.8; color: var(--ink2); } .nx-bline b { display: inline-block; font-weight: 500; font-size: 12.5px; margin: 0 6px 4px 0; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .55); color: var(--ink2); } .nx-brows { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line2); display: flex; flex-direction: column; gap: 10px; } .nx-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; } .nx-rk { flex: 0 0 62px; font-family: var(--serif); font-size: 12px; letter-spacing: .16em; color: var(--gold); opacity: .9; } .nx-rv { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; } .nx-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 7px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .62); text-decoration: none; cursor: pointer; transition: border-color .28s, transform .28s, background .28s; } .nx-chip:hover { border-color: rgba(63, 131, 124, .34); background: rgba(255, 255, 255, .92); transform: translateY(-1px); } .nx-chip i { display: block; width: 12px; height: 22px; border-radius: 4px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .nx-chip span { font-size: 12.5px; letter-spacing: .04em; color: var(--ink2); white-space: nowrap; } .nx-bact { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .nx-bbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 999px; font-family: var(--serif); font-size: 13.5px; letter-spacing: .14em; color: #fff; background: linear-gradient(135deg, var(--teal2), var(--teal)); box-shadow: 0 8px 18px -10px rgba(63, 131, 124, .7); text-decoration: none; cursor: pointer; transition: filter .3s, transform .3s; } .nx-bbtn:hover { filter: brightness(1.06); transform: translateY(-2px); } .nx-bbtn i { font-style: normal; transition: transform .34s cubic-bezier(.45, 0, .2, 1); } .nx-bbtn:hover i { transform: translateX(4px); } .nx-bnote { flex: 1 1 220px; font-size: 11.5px; line-height: 1.7; color: var(--sub); opacity: .72; } /* ============================================================ * 五 · 报告 · 三瓶所应的脊柱节段 * ============================================================ */ .nx-plan { margin-top: 26px; padding: 26px 24px 22px; border-radius: 18px; border: 1px solid var(--line2); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .58), transparent 60%), linear-gradient(168deg, rgba(255, 254, 250, .84), rgba(246, 244, 238, .48)); box-shadow: var(--shadow); } .nx-phd { text-align: center; margin-bottom: 18px; } .nx-pk { font-size: 11px; letter-spacing: .24em; color: var(--gold); opacity: .88; } .nx-phd h3 { font-family: var(--serif); font-size: clamp(17px, 2.4vw, 21px); font-weight: 700; letter-spacing: .16em; text-indent: .16em; color: var(--ink); margin: 7px 0 0; } .nx-phd p { max-width: 620px; margin: 8px auto 0; font-size: 12.5px; line-height: 1.8; color: var(--sub); } .nx-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.8vw, 16px); } .nx-pcell { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .58); text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .34s cubic-bezier(.45, 0, .2, 1), box-shadow .34s, border-color .34s; } .nx-pcell:hover { transform: translateY(-2px); border-color: rgba(63, 131, 124, .3); box-shadow: 0 12px 26px -16px rgba(63, 90, 86, .5); } .nx-pband { height: 3px; border-radius: 2px; margin: -6px -4px 6px; } .nx-po { font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--ink); } .nx-pv { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: .1em; color: var(--nc, var(--teal)); display: flex; align-items: baseline; gap: 6px; } .nx-pv i { font-style: normal; font-size: 11px; letter-spacing: .1em; opacity: .6; } .nx-pp { font-size: 12.5px; line-height: 1.7; color: var(--ink2); } .nx-pm { font-size: 11px; letter-spacing: .08em; color: var(--sub); opacity: .72; margin-top: 2px; } .nx-pfoot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line2); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .nx-pfoot > span { flex: 1 1 260px; font-size: 12.5px; line-height: 1.8; color: var(--ink2); } .nx-pfoot b { color: var(--teal); } .nx-pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; font-family: var(--serif); font-size: 13px; letter-spacing: .14em; color: var(--teal); border: 1px solid rgba(63, 131, 124, .3); background: rgba(255, 255, 255, .6); text-decoration: none; cursor: pointer; transition: background .3s, transform .3s; } .nx-pbtn:hover { background: rgba(255, 255, 255, .95); transform: translateY(-1px); } .nx-pbtn i { font-style: normal; transition: transform .34s cubic-bezier(.45, 0, .2, 1); } .nx-pbtn:hover i { transform: translateX(4px); } /* ============================================================ * 六 · 深色模式 * ============================================================ */ html[data-theme="dark"] .nx-ribbon { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } html[data-theme="dark"] .nx-n:hover { background: rgba(116, 188, 176, .09); } html[data-theme="dark"] .nx-dcard, html[data-theme="dark"] .nx-plan { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .045), transparent 60%), linear-gradient(168deg, #2d2a33, #26232b); } html[data-theme="dark"] .nx-bridge { background: radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, .04), transparent 58%), linear-gradient(168deg, #2d2a33, #26232b); } html[data-theme="dark"] .nx-bridge::before { display: none; } html[data-theme="dark"] .nx-dcard:hover { border-color: rgba(116, 188, 176, .34); } html[data-theme="dark"] .nx-bseg, html[data-theme="dark"] .nx-pcell { background: rgba(255, 255, 255, .045); } html[data-theme="dark"] .nx-chip { background: rgba(255, 255, 255, .05); } html[data-theme="dark"] .nx-chip:hover { background: rgba(255, 255, 255, .1); } html[data-theme="dark"] .nx-dchain span, html[data-theme="dark"] .nx-ti { background: rgba(255, 255, 255, .05); } html[data-theme="dark"] .nx-union { background: rgba(255, 255, 255, .03); } html[data-theme="dark"] .nx-pbtn { background: rgba(255, 255, 255, .05); } /* ============================================================ * 七 · 响应式 * ============================================================ */ @media (max-width: 900px) { .nx-dual { grid-template-columns: 1fr; gap: 12px; } .nx-dmid { flex-direction: row; padding: 2px 0; } .nx-dmid i { width: auto; height: 1px; min-height: 0; flex: 1 1 auto; background: linear-gradient(90deg, transparent, var(--line), transparent); } .nx-dmid b { writing-mode: horizontal-tb; padding: 0 8px; } } @media (max-width: 720px) { .nx-bmain { grid-template-columns: 1fr; } .nx-bseg { flex-direction: row; justify-content: flex-start; gap: 12px; min-width: 0; } .nx-bsegs { text-align: left; } .nx-pgrid { grid-template-columns: 1fr; } .nx-ribbon { padding: 8px 10px; gap: 7px; } .nx-k { display: none; } .nx-n { padding: 4px 8px; } .nx-n b { font-size: 13px; } } @media (max-width: 480px) { .nx-union { padding: 9px 12px; gap: 8px; } .nx-uk { display: none; } .nx-ul { font-size: 12px; gap: 3px; } .nx-bridge, .nx-plan, .nx-dcard { padding: 20px 16px 18px; } } /* ============================================================ * 七·补 · 导航分组细分隔（信息层级：时养 / 脉络 / 回溯 / 约） * ============================================================ */ .nav-sep { flex: 0 0 auto; align-self: center; width: 1px; height: 15px; margin: 0 5px; background: linear-gradient(180deg, transparent, var(--line), transparent); opacity: .7; } @media (max-width: 860px) { .nav-sep { margin: 0 2px; height: 13px; } } /* ============================================================ * 八 · 无障碍 / 打印 * ============================================================ */ @media (prefers-reduced-motion: reduce) { .nx-dcard, .nx-pcell, .nx-chip, .nx-bbtn, .nx-pbtn, .nx-n { transition: none; } .nx-dcard:hover, .nx-pcell:hover, .nx-chip:hover, .nx-bbtn:hover, .nx-pbtn:hover, .nx-n:hover { transform: none; } .nx-dgo i, .nx-bbtn i, .nx-pbtn i { transition: none; } } @media print { .nx-ribbon, .nx-trail, .nx-dual, .nx-union { display: none !important; } .nx-bridge, .nx-plan { break-inside: avoid; box-shadow: none; } } .nx-n:focus-visible, .nx-dcard:focus-visible, .nx-pcell:focus-visible, .nx-chip:focus-visible, .nx-bbtn:focus-visible, .nx-pbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }