/* ==========================================================================
欧展通 EuroExpo Desk · components.css
布局原语 + 全部组件。依赖 tokens.css、base.css。
颜色一律走 token；圆角只用 4/6/8/12/16/999；悬停不上浮；文案不加箭头。
目录：
1 图标 2 布局原语 3 页头与导航 4 下拉面板与方块
5 移动端菜单 6 按钮 7 卡片 8 展会卡 / 展会行
9 服务卡 10 服务商卡 11 徽标与状态 12 表单
13 筛选工具条 14 页脚 15 面包屑 16 横幅轮播
17 流程步骤 18 事实条 19 行动带 20 配图框
21 信息卡 22 手风琴 23 空状态 24 通知
25 正文栏 26 分页 27 页面头部 28 区块进场
29 快速查找条 30 行内表单 31 一句话说明
========================================================================== */
/* --------------------------------------------------------------------------
1. 图标
-------------------------------------------------------------------------- */
@layer components {
.icon {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
vertical-align: -0.125em;
color: inherit;
}
}
/* --------------------------------------------------------------------------
2. 布局原语
-------------------------------------------------------------------------- */
@layer layout {
.container {
width: min(100% - 2 * var(--gutter), var(--container-max));
margin-inline: auto;
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-3));
}
.cluster--4 { --cluster-gap: var(--space-4); }
/* 卡片网格：默认自适应，--3 在桌面锁 3 列 */
.card-grid {
display: grid;
gap: var(--card-gap);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.section {
padding-block: var(--section-y);
}
.section--tight {
padding-block: var(--space-12);
}
.section--flush-top {
padding-top: 0;
}
.band {
background: var(--color-bg-band);
}
/* 区块头：标题 + 导语上下堆叠；--row 让右侧文字链与标题同基线 */
.section-head {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 44rem;
margin-bottom: var(--space-10);
}
.section-head--row {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
max-width: none;
}
.section-head .lead {
max-width: 40rem;
}
/* 文字链（区块头右侧"浏览展会目录"等），不带箭头 */
.text-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-btn);
font-weight: var(--weight-medium);
color: var(--color-link);
white-space: nowrap;
}
.text-link .icon {
width: 16px;
height: 16px;
}
@media (min-width: 1024px) {
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
.section-head {
margin-bottom: var(--space-8);
}
}
@media (max-width: 767.98px) {
.card-grid {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer components {
/* ------------------------------------------------------------------------
3. 页头与一级导航
------------------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
height: var(--header-h);
background: var(--white-a86);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 1px 0 transparent;
transition: box-shadow var(--dur-base) var(--ease-standard);
}
@supports not (backdrop-filter: blur(1px)) {
.site-header {
background: var(--color-surface);
}
}
.site-header[data-scrolled] {
box-shadow: 0 1px 0 var(--border-subtle), var(--shadow-xs);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-8);
height: 100%;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text);
font-size: 1.125rem;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-h4);
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.brand:hover {
color: var(--color-text);
text-decoration: none;
}
.brand__mark {
width: 28px;
height: 28px;
flex: none;
}
.brand__text {
display: flex;
flex-direction: column;
}
.brand__sub {
font-size: var(--text-xs);
font-weight: var(--weight-regular);
letter-spacing: 0;
color: var(--color-text-secondary);
}
.site-nav {
display: flex;
align-items: stretch;
flex: 1 1 auto;
min-width: 0;
height: 100%;
}
.site-nav__list {
display: flex;
align-items: stretch;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__item {
position: relative;
display: flex;
align-items: center;
}
.nav-trigger {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-nav);
font-weight: var(--weight-nav);
line-height: 1.2;
color: var(--color-text-nav);
background: transparent;
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-trigger:hover {
background: var(--gray-100);
color: var(--color-text);
}
.nav-trigger[aria-expanded="true"] {
background: var(--color-brand-soft);
color: var(--color-brand-text);
}
.nav-trigger.is-current {
color: var(--color-text);
font-weight: var(--weight-semibold);
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
margin-inline-start: auto;
flex: none;
}
.icon-btn.site-header__menu-btn {
display: none;
margin-inline-start: auto;
}
/* 图标按钮（菜单、关闭、胶囊移除等） */
.icon-btn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
border-radius: var(--radius-md);
color: var(--color-text-nav);
background: transparent;
transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover {
background: var(--gray-100);
color: var(--color-text);
}
.icon-btn:active {
background: var(--gray-200);
}
.icon-btn .icon {
width: 24px;
height: 24px;
}
/* 语言切换：紧凑的原生 select，自绘展开图标 */
.lang-switch {
position: relative;
display: inline-flex;
}
.lang-switch select {
width: auto;
min-height: 40px;
padding: 0 var(--space-8) 0 var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-nav);
background: transparent;
border-color: transparent;
cursor: pointer;
}
.lang-switch select:hover {
background: var(--gray-100);
border-color: transparent;
color: var(--color-text);
}
.lang-switch::after,
.select-wrap::after {
content: "";
position: absolute;
inset-inline-end: 16px;
top: 50%;
width: 8px;
height: 8px;
border-inline-end: 1.5px solid var(--color-text-nav);
border-bottom: 1.5px solid var(--color-text-nav);
translate: 0 -70%;
rotate: 45deg;
pointer-events: none;
}
.lang-switch::after {
inset-inline-end: 14px;
}
/* 菜单按钮：展开态换成关闭图标 */
.site-header__menu-btn[aria-expanded="true"] .icon--menu,
.site-header__menu-btn:not([aria-expanded="true"]) .icon--close {
display: none;
}
/* 移动端菜单打开时锁住页面滚动 */
html.nav-open {
overflow: hidden;
}
/* 移动端页头：只留标志和菜单按钮 */
@media (max-width: 1023.98px) {
html {
--header-h: 56px;
}
.site-nav,
.site-header__actions {
display: none;
}
.icon-btn.site-header__menu-btn {
display: inline-grid;
}
}
/* ------------------------------------------------------------------------
4. 下拉面板与方块
面板：白底、圆角 16、ring + xl 阴影、内边距 6、距页头底 8px。
hidden 时 display:none；去掉 hidden 后下一帧加 data-open 即可过渡；
关闭：先去 data-open，120ms 后再加 hidden。
水平位置默认左对齐所属按钮；脚本可设 --nav-panel-shift 把面板限制在内容宽度内。
------------------------------------------------------------------------ */
.nav-panel {
--panel-w: 580px;
position: absolute;
top: calc(100% + var(--space-2));
inset-inline-start: 0;
z-index: var(--z-panel);
width: min(var(--panel-w), calc(100vw - 2 * var(--gutter)));
padding: 6px;
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-ring), var(--shadow-xl);
opacity: 0;
visibility: hidden;
translate: var(--nav-panel-shift, 0px) calc(-1 * var(--motion-y-4));
transition:
opacity var(--dur-fast) var(--ease-in),
translate var(--dur-fast) var(--ease-in),
visibility 0s linear var(--dur-fast);
}
.nav-panel[data-open] {
opacity: 1;
visibility: visible;
translate: var(--nav-panel-shift, 0px) 0;
transition:
opacity var(--dur-base) var(--ease-out),
translate var(--dur-base) var(--ease-out),
visibility 0s;
}
/* 用透明区域填补按钮与面板之间的 8px 空隙，指针斜着移过去不会断 */
.nav-panel::before {
content: "";
position: absolute;
inset: calc(-1 * var(--space-2)) 0 auto 0;
height: var(--space-2);
}
.nav-panel--events { --panel-w: 800px; }
.nav-panel--services { --panel-w: 964px; }
.nav-panel--supplier { --panel-w: 940px; } /* 5 项上下排，德语 Dienstleisterbereich 不断词 */
.nav-panel--fees { --panel-w: 580px; }
.nav-grid {
display: grid;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-grid--events-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-grid--countries { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-grid--services { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-panel__divider {
height: 1px;
margin: 6px 0;
border: 0;
background: var(--border-subtle);
}
/* 方块（.tile 与 .nav-tile 同义）：图标 40×40 白色小方块 + 完整名称；无图片、无描述、无箭头 */
:where(.tile, .nav-tile, .service-card, .date-block, .badge--category, .service-head) {
--tile-bg: var(--color-brand-soft);
--tile-hover: var(--color-brand-soft-hover);
--tile-border: var(--border-subtle);
--tile-icon: var(--color-brand-text);
}
.tile {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
background: var(--tile-bg);
box-shadow: 0 0 0 1px var(--tile-border);
color: var(--color-text);
font-size: var(--text-nav);
font-weight: var(--weight-label);
line-height: 1.3;
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
:lang(zh) .tile {
font-size: 1rem;
}
.tile:hover {
background: var(--tile-hover);
box-shadow: var(--shadow-ring-hover);
color: var(--color-text);
text-decoration: none;
}
.tile[aria-current="page"] {
box-shadow: 0 0 0 1.5px var(--color-brand);
}
.tile__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex: none;
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-ring);
color: var(--tile-icon);
transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.tile__icon .icon {
width: 24px;
height: 24px;
}
.tile:hover .tile__icon {
box-shadow: var(--shadow-ring), var(--shadow-xs);
}
.tile__name {
min-width: 0;
overflow-wrap: normal;
hyphens: auto;
}
/* 国家方块：紧凑内边距，让"意大利展会"在 5 等分里不折行 */
.nav-grid--countries .tile {
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
}
.tile--wide {
min-height: 64px;
}
.tile--stack {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-2);
min-height: 96px;
padding: var(--space-3);
}
/* 国家代码方块：两字母代码，28×28，圆角 6 */
.code-badge {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
flex: none;
border-radius: var(--radius-sm);
background: var(--color-brand-soft);
color: var(--color-brand-text);
font-family: var(--font-sans);
font-size: var(--text-badge);
font-weight: var(--weight-semibold);
line-height: 1;
box-shadow: var(--shadow-ring);
}
/* 类别色 / 色调类：给方块、服务卡、日期块、类别徽标提供 --tile-* */
.is-blue {
--tile-bg: var(--color-brand-soft);
--tile-hover: var(--color-brand-soft-hover);
--tile-border: var(--border-subtle);
--tile-icon: var(--color-brand-text);
}
.is-neutral {
--tile-bg: var(--gray-50);
--tile-hover: var(--gray-100);
--tile-border: var(--border-subtle);
--tile-icon: var(--color-text-nav);
}
.is-stand {
--tile-bg: var(--cat-stand-bg);
--tile-hover: var(--cat-stand-hover);
--tile-border: var(--cat-stand-border);
--tile-icon: var(--cat-stand-icon);
}
.is-translation {
--tile-bg: var(--cat-translation-bg);
--tile-hover: var(--cat-translation-hover);
--tile-border: var(--cat-translation-border);
--tile-icon: var(--cat-translation-icon);
}
.is-freight {
--tile-bg: var(--cat-freight-bg);
--tile-hover: var(--cat-freight-hover);
--tile-border: var(--cat-freight-border);
--tile-icon: var(--cat-freight-icon);
}
.is-catering {
--tile-bg: var(--cat-catering-bg);
--tile-hover: var(--cat-catering-hover);
--tile-border: var(--cat-catering-border);
--tile-icon: var(--cat-catering-icon);
}
.is-host {
--tile-bg: var(--cat-host-bg);
--tile-hover: var(--cat-host-hover);
--tile-border: var(--cat-host-border);
--tile-icon: var(--cat-host-icon);
}
/* 页面里的方块网格（首页按国家、详情页相关服务） */
.tile-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(var(--tile-cols, 5), minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 1023.98px) {
.tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
.tile-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ------------------------------------------------------------------------
5. 移动端菜单：页头下方整屏面板，四组全展开，单列 52px 方块，底部固定账户 + 语言
------------------------------------------------------------------------ */
.nav-mobile {
position: fixed;
inset: var(--header-h) 0 0 0;
z-index: var(--z-mobile-menu);
display: flex;
flex-direction: column;
background: var(--color-surface);
opacity: 0;
visibility: hidden;
translate: 0 var(--motion-y-8);
transition:
opacity var(--dur-fast) var(--ease-in),
translate var(--dur-fast) var(--ease-in),
visibility 0s linear var(--dur-fast);
}
.nav-mobile[data-open] {
opacity: 1;
visibility: visible;
translate: 0 0;
transition:
opacity var(--dur-slow) var(--ease-out),
translate var(--dur-slow) var(--ease-out),
visibility 0s;
}
.nav-mobile__scroll {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-4) var(--gutter) var(--space-8);
}
.nav-mobile__group + .nav-mobile__group {
margin-top: var(--space-6);
}
.nav-mobile__title {
margin: 0 0 var(--space-2);
padding-inline: var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: 1.4;
letter-spacing: 0;
color: var(--color-text-secondary);
}
.nav-mobile__list {
display: grid;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-mobile .tile {
min-height: 52px;
padding: var(--space-2) var(--space-3);
}
.nav-mobile .tile__icon {
width: 36px;
height: 36px;
}
.nav-mobile__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border-subtle);
background: var(--color-surface);
}
.nav-mobile__footer .btn-primary {
flex: 1 1 100%;
}
@media (min-width: 1024px) {
.nav-mobile {
display: none;
}
}
/* ------------------------------------------------------------------------
6. 按钮
.btn + .btn-primary / .btn-secondary / .btn-ghost / .btn-on-image / .btn-on-image-secondary
尺寸 .btn-sm(32) 默认(40) .btn-lg(48)；触屏默认升到 44。
加载态 [aria-busy="true"]：前置 16px 转圈，隐藏按钮内图标以保持宽度。
------------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 40px;
padding: 0 var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--text-btn);
font-weight: var(--weight-btn);
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition:
background-color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
scale var(--dur-instant) var(--ease-standard);
}
.btn:hover {
text-decoration: none;
}
.btn:active {
scale: var(--motion-press);
}
.btn .icon {
width: 18px;
height: 18px;
}
.btn-lg {
min-height: 48px;
padding: 0 var(--space-5);
font-size: 1rem;
}
.btn-block {
width: 100%;
}
.btn-primary {
background: var(--color-brand);
color: var(--color-text-on-brand);
box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover {
background: var(--color-brand-hover);
color: var(--color-text-on-brand);
}
.btn-primary:active {
background: var(--color-brand-active);
}
.btn-secondary {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--gray-300);
box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
background: var(--gray-50);
border-color: var(--gray-400);
color: var(--color-text);
}
.btn-secondary:active {
background: var(--gray-100);
}
.btn-ghost {
background: transparent;
color: var(--color-text-nav);
}
.btn-ghost:hover {
background: var(--gray-100);
color: var(--color-text);
}
.btn-ghost:active {
background: var(--gray-200);
}
.btn-on-image {
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.btn-on-image:hover {
background: var(--gray-100);
color: var(--color-text);
}
.btn-on-image:focus-visible {
outline-color: var(--color-text-on-dark);
}
.btn:disabled,
.btn[aria-disabled="true"] {
background: var(--gray-100);
color: var(--color-text-disabled);
border-color: transparent;
box-shadow: none;
cursor: not-allowed;
scale: 1;
}
.btn[aria-busy="true"] {
pointer-events: none;
}
.btn[aria-busy="true"]::before {
content: "";
width: 16px;
height: 16px;
flex: none;
border-radius: var(--radius-pill);
border: 2px solid currentColor;
border-inline-end-color: transparent;
animation: btn-spin 800ms linear infinite;
}
.btn[aria-busy="true"] > .icon {
display: none;
}
@keyframes btn-spin {
to { rotate: 1turn; }
}
@keyframes btn-pulse {
50% { opacity: 0.35; }
}
@media (pointer: coarse) {
.btn { min-height: 44px; }
.btn-lg { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.btn[aria-busy="true"]::before {
border-inline-end-color: currentColor;
animation: btn-pulse 1200ms ease-in-out infinite;
}
}
/* ------------------------------------------------------------------------
7. 卡片：白底、圆角 12、ring + sm；悬停边线 14% + md，不位移；整卡可点用 .card-link::after
------------------------------------------------------------------------ */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--card-pad);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-ring), var(--shadow-sm);
color: var(--color-text);
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.card--flat { box-shadow: var(--shadow-ring); }
.card:has(.card-link):hover {
box-shadow: var(--shadow-ring-hover), var(--shadow-md);
}
.card-link {
color: inherit;
text-decoration: none;
}
.card-link:hover {
color: inherit;
text-decoration: none;
}
.card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--radius-lg);
}
.card-link:focus-visible {
outline: none;
}
.card:has(.card-link:focus-visible) {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* 可点卡片里仍需独立交互的元素（按钮、次链接）抬到遮罩之上 */
.card__actions,
.card .btn {
position: relative;
z-index: 2;
}
.card__title {
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
font-weight: var(--weight-heading);
}
.card__text {
font-size: var(--text-btn);
line-height: 1.55;
color: var(--color-text-secondary);
}
.card__meta {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: auto;
}
/* ------------------------------------------------------------------------
8. 展会卡 / 展会行 / 月份标题
10月05–072026
房地产与投资
Messe München
------------------------------------------------------------------------ */
.event-card {
flex-direction: row;
align-items: flex-start;
gap: var(--space-4);
padding: var(--card-pad-compact);
}
.date-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 96px;
flex: none;
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--tile-bg);
color: var(--color-text);
text-align: center;
font-variant-numeric: tabular-nums;
font-family: var(--font-sans);
}
.date-block__month {
font-size: var(--text-xs);
line-height: 1.2;
color: var(--color-text-secondary);
}
.date-block__days {
font-size: 1.5rem;
line-height: 1.1;
font-weight: var(--weight-semibold);
letter-spacing: -0.02em;
white-space: nowrap;
color: var(--tile-icon);
}
.date-block__year {
font-size: var(--text-badge);
line-height: 1.2;
color: var(--color-text-secondary);
}
.event-card__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.event-card__body > .badge {
align-self: flex-start;
margin-bottom: var(--space-1);
}
.event-card__title {
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
font-weight: var(--weight-heading);
overflow-wrap: anywhere;
}
.event-card__city {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-text-secondary);
}
.event-card__city .icon {
width: 16px;
height: 16px;
color: var(--color-text-tertiary);
}
.event-card__venue {
font-size: var(--text-xs);
line-height: 1.4;
color: var(--color-text-tertiary);
overflow-wrap: anywhere;
}
/* 展会行（目录页） */
.event-list {
list-style: none;
margin: 0;
padding: 0;
}
.event-row {
position: relative;
display: grid;
grid-template-columns: 120px minmax(0, 1fr) 200px 220px;
gap: var(--space-4);
align-items: center;
min-height: 72px;
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border-subtle);
transition: background-color var(--dur-fast) var(--ease-standard);
}
.event-row:hover {
background: var(--color-surface-hover);
}
.event-row__date {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--color-text);
white-space: nowrap;
}
.event-row__name {
font-size: 1rem;
font-weight: var(--weight-semibold);
line-height: 1.35;
overflow-wrap: anywhere;
}
.event-row__name a {
color: inherit;
text-decoration: none;
}
.event-row__name a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.event-row:has(a:focus-visible) {
outline: 2px solid var(--color-focus);
outline-offset: -2px;
border-radius: var(--radius-sm);
}
.event-row__name a:focus-visible {
outline: none;
}
.event-row__sector {
margin-top: 2px;
font-size: var(--text-sm);
font-weight: var(--weight-regular);
color: var(--color-text-secondary);
}
.event-row__city {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.event-row__city .icon {
width: 16px;
height: 16px;
color: var(--color-text-tertiary);
}
.event-row__venue {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
overflow-wrap: anywhere;
}
.month-heading {
position: sticky;
top: calc(var(--header-h) + var(--filter-bar-h));
z-index: calc(var(--z-sticky) - 10);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 40px;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
background: var(--color-bg-band);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1.4;
color: var(--color-text);
}
.month-heading + .event-list .event-row:first-child {
border-top-color: transparent;
}
@media (max-width: 1023.98px) {
.event-row {
grid-template-columns: 110px minmax(0, 1fr);
gap: var(--space-1) var(--space-4);
padding-inline: var(--space-3);
}
.event-row__date { grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
.event-row__name { grid-column: 2; }
.event-row__city { grid-column: 2; }
.event-row__venue { grid-column: 2; font-size: var(--text-xs); }
}
@media (max-width: 479.98px) {
.event-row { grid-template-columns: 92px minmax(0, 1fr); }
.event-row__venue { display: none; }
}
/* ------------------------------------------------------------------------
9. 服务卡（5 类）
展会搭建
…
大号：.service-card--large，内含 .service-card__media(4:3) + .service-card__body
------------------------------------------------------------------------ */
.service-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--card-pad);
border-radius: var(--radius-lg);
background: var(--tile-bg);
box-shadow: 0 0 0 1px var(--tile-border);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.service-card:hover {
background: var(--tile-hover);
box-shadow: var(--shadow-ring-hover), var(--shadow-md);
color: var(--color-text);
text-decoration: none;
}
.service-card__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-ring);
color: var(--tile-icon);
}
.service-card__icon .icon {
width: 24px;
height: 24px;
}
.service-card__title {
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
font-weight: var(--weight-heading);
color: var(--color-text);
}
.service-card__text {
font-size: var(--text-btn);
line-height: 1.55;
color: var(--color-text-secondary);
}
.service-card--large {
padding: 0;
gap: 0;
overflow: hidden;
}
.service-card__media {
aspect-ratio: 4 / 3;
background: var(--gray-100);
overflow: hidden;
}
.service-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-card__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--card-pad);
}
/* ------------------------------------------------------------------------
11. 徽标与状态
.badge（中性类别标签） .badge.is-stand.badge--category（类别色）
.badge--success / --warning / --danger / --info（胶囊状态，图标 + 文字）
.badge--count（计数） .status（图标 + 文字，无底色）
------------------------------------------------------------------------ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 24px;
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
background: var(--gray-100);
color: var(--color-text-nav);
font-size: var(--text-xs);
font-weight: var(--weight-badge);
line-height: 1;
letter-spacing: var(--tracking-badge);
white-space: nowrap;
}
.badge:not(:lang(zh)) {
font-size: var(--text-badge);
}
.badge .icon {
width: 14px;
height: 14px;
}
.badge--category {
background: var(--tile-bg);
color: var(--tile-icon);
box-shadow: 0 0 0 1px var(--tile-border);
}
.badge--success,
.badge--warning,
.badge--danger,
.badge--info {
padding: 0 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--badge-border);
background: var(--badge-bg);
color: var(--badge-text);
}
.badge--success { --badge-bg: var(--success-bg); --badge-border: var(--success-border); --badge-text: var(--success-text); }
.badge--warning { --badge-bg: var(--warning-bg); --badge-border: var(--warning-border); --badge-text: var(--warning-text); }
.badge--danger { --badge-bg: var(--danger-bg); --badge-border: var(--danger-border); --badge-text: var(--danger-text); }
.badge--info { --badge-bg: var(--info-bg); --badge-border: var(--info-border); --badge-text: var(--info-text); }
.badge--count {
justify-content: center;
height: 20px;
min-width: 20px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--gray-100);
color: var(--color-text-secondary);
font-family: var(--font-sans);
font-size: var(--text-badge);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.status {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-text-secondary);
}
.status .icon {
width: 16px;
height: 16px;
}
/* ------------------------------------------------------------------------
12. 表单
------------------------------------------------------------------------ */
.form {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.field__label {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-label);
line-height: 1.4;
color: var(--color-text);
}
.select-wrap {
position: relative;
}
.select-wrap select {
width: 100%;
}
.input-wrap {
position: relative;
}
.input-wrap > .icon {
position: absolute;
inset-inline-start: 12px;
top: 50%;
width: 18px;
height: 18px;
translate: 0 -50%;
color: var(--color-text-tertiary);
pointer-events: none;
}
.input-wrap > input {
padding-inline-start: 40px;
}
/* 复选框 / 单选框：整行可点，行高 ≥44 */
.choice {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 44px;
font-size: 1rem;
line-height: 1.4;
cursor: pointer;
}
.choice input {
margin: 0;
}
.choice__text small {
display: block;
margin-top: 2px;
font-size: var(--text-xs);
color: var(--color-text-secondary);
}
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-2);
}
/* 分段控件（全部 / 近期） */
.segmented {
position: relative;
display: inline-flex;
padding: 2px;
border-radius: var(--radius-md);
background: var(--gray-100);
}
.segmented input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.segmented__option {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.segmented__option:hover {
color: var(--color-text);
}
.segmented input:checked + .segmented__option {
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-ring), var(--shadow-xs);
}
.segmented input:focus-visible + .segmented__option {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* ------------------------------------------------------------------------
14. 页脚：灰 50、顶部细线、品牌栏 + 四栏；栏目名 14/600，链接 15 次要色
------------------------------------------------------------------------ */
.site-footer {
padding: var(--space-16) 0 var(--space-8);
border-top: 1px solid var(--border-subtle);
background: var(--color-bg-band);
color: var(--color-text-secondary);
}
.site-footer__grid {
display: grid;
grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(0, 1fr));
gap: var(--space-8);
}
.site-footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.site-footer .brand {
font-size: 1.25rem;
}
.site-footer .brand__mark {
width: 32px;
height: 32px;
}
.site-footer__desc {
max-width: 28em;
font-size: var(--text-btn);
line-height: 1.6;
color: var(--color-text-secondary);
}
.site-footer__title {
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--color-text);
}
.site-footer__links {
display: flex;
flex-direction: column;
gap: var(--space-3);
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__links a {
font-size: var(--text-btn);
line-height: 1.4;
color: var(--color-text-secondary);
text-decoration: none;
overflow-wrap: anywhere;
}
.site-footer__links a:hover {
color: var(--color-text);
text-decoration: none;
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
font-size: var(--text-xs);
}
@media (max-width: 1023.98px) {
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-6);
}
.site-footer__brand {
grid-column: 1 / -1;
}
.site-footer__links {
gap: 0;
}
.site-footer__links a {
display: flex;
align-items: center;
min-height: 44px;
}
.site-footer__title {
margin-bottom: var(--space-2);
}
}
/* ------------------------------------------------------------------------
15. 面包屑
------------------------------------------------------------------------ */
.breadcrumb {
margin-bottom: var(--space-4);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-text-secondary);
}
.breadcrumb li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.breadcrumb a {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-secondary);
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--color-text);
text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb__sep {
color: var(--gray-400);
}
.breadcrumb__back {
display: none;
width: 16px;
height: 16px;
}
@media (max-width: 767.98px) {
.breadcrumb li:not(:nth-last-child(2)) {
display: none;
}
.breadcrumb li:nth-last-child(2) .breadcrumb__sep {
display: none;
}
.breadcrumb__back {
display: inline-block;
}
}
/* ------------------------------------------------------------------------
17. 流程步骤：有序列表、普通数字、细线相连；.steps--row 横排
登录
…
------------------------------------------------------------------------ */
.steps {
display: flex;
flex-direction: column;
list-style: none;
counter-reset: step;
margin: 0;
padding: 0;
}
.steps__item {
position: relative;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: var(--space-4);
padding-bottom: var(--space-6);
counter-increment: step;
}
.steps__item:last-child {
padding-bottom: 0;
}
.steps__item::before {
content: counter(step);
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-ring);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
.steps__item:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-start: 15.5px;
top: 36px;
bottom: 4px;
width: 1px;
background: var(--border-default);
}
.steps__title {
margin-top: 4px;
font-size: 1.0625rem;
font-weight: var(--weight-semibold);
line-height: 1.4;
letter-spacing: var(--tracking-h4);
}
.steps__text {
margin-top: var(--space-1);
font-size: var(--text-btn);
line-height: 1.55;
color: var(--color-text-secondary);
}
.steps__body {
min-width: 0;
}
@media (min-width: 768px) {
.steps--row {
flex-direction: row;
gap: var(--space-6);
}
.steps--row .steps__item {
flex: 1 1 0;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding-bottom: 0;
}
.steps--row .steps__item:not(:last-child)::after {
inset-inline-start: 40px;
inset-inline-end: calc(-1 * var(--space-6));
top: 15.5px;
bottom: auto;
width: auto;
height: 1px;
}
.steps--row .steps__title {
margin-top: 0;
}
}
/* ------------------------------------------------------------------------
19. 收尾行动带：navy-900、圆角 16、内边距 48
------------------------------------------------------------------------ */
.cta-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-12);
border-radius: var(--radius-xl);
background: var(--color-dark-band);
color: var(--color-text-on-dark);
}
.cta-band__copy {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 36em;
}
.cta-band h2 {
color: inherit;
}
.cta-band p {
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-text-on-dark-secondary);
}
.cta-band a:not(.btn) {
color: var(--blue-300);
}
.cta-band :focus-visible {
outline-color: var(--color-text-on-dark);
}
.cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
@media (max-width: 767.98px) {
.cta-band {
padding: var(--space-8) var(--space-6);
}
}
/* ------------------------------------------------------------------------
20. 配图框：圆角 16、ring + md、object-fit cover；比例 4:3 / 16:9 / 21:9 / 3:1
------------------------------------------------------------------------ */
.art {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--gray-100);
box-shadow: var(--shadow-ring), var(--shadow-md);
}
.art--16x9 { aspect-ratio: 16 / 9; }
.art--21x9 { aspect-ratio: 21 / 9; }
.art > picture,
.art > img,
.art > video {
width: 100%;
height: 100%;
}
.art img,
.art video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ------------------------------------------------------------------------
22. 手风琴（原生 details / summary）
------------------------------------------------------------------------ */
.accordion {
border-top: 1px solid var(--border-subtle);
}
.accordion__item {
border-bottom: 1px solid var(--border-subtle);
}
.accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 56px;
padding: var(--space-4) 0;
font-size: 1rem;
font-weight: var(--weight-semibold);
line-height: 1.4;
color: var(--color-text);
list-style: none;
cursor: pointer;
}
.accordion__summary::-webkit-details-marker {
display: none;
}
.accordion__summary::after {
content: "";
width: 8px;
height: 8px;
flex: none;
margin-inline-end: 6px;
border-inline-end: 1.5px solid var(--color-text-secondary);
border-bottom: 1.5px solid var(--color-text-secondary);
rotate: 45deg;
translate: 0 -2px;
transition: rotate var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard);
}
.accordion__item[open] .accordion__summary::after {
rotate: 225deg;
translate: 0 2px;
}
.accordion__summary:hover {
color: var(--color-brand-text);
}
.accordion__content {
max-width: var(--measure);
padding: 0 0 var(--space-5);
font-size: var(--text-btn);
line-height: 1.6;
color: var(--color-text-secondary);
}
.accordion__content > * + * {
margin-top: var(--space-3);
}
.accordion__item[open] .accordion__content {
animation: acc-fade var(--dur-base) var(--ease-out);
}
@keyframes acc-fade {
from { opacity: 0; }
}
/* ------------------------------------------------------------------------
24. 通知 / 提示：四语义（默认信息）
------------------------------------------------------------------------ */
.notice {
--notice-bg: var(--info-bg);
--notice-border: var(--info-border);
--notice-text: var(--info-text);
--notice-icon: var(--info-solid);
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--notice-border);
border-radius: var(--radius-md);
background: var(--notice-bg);
color: var(--notice-text);
font-size: var(--text-sm);
line-height: 1.5;
}
.notice > .icon {
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--notice-icon);
}
.notice a {
color: inherit;
text-decoration: underline;
}
.notice--success { --notice-bg: var(--success-bg); --notice-border: var(--success-border); --notice-text: var(--success-text); --notice-icon: var(--success-solid); }
.notice--warning { --notice-bg: var(--warning-bg); --notice-border: var(--warning-border); --notice-text: var(--warning-text); --notice-icon: var(--warning-solid); }
.notice--danger { --notice-bg: var(--danger-bg); --notice-border: var(--danger-border); --notice-text: var(--danger-text); --notice-icon: var(--danger-solid); }
.notice--info { --notice-bg: var(--info-bg); --notice-border: var(--info-border); --notice-text: var(--info-text); --notice-icon: var(--info-solid); }
/* ------------------------------------------------------------------------
25. 正文栏与定义列表
------------------------------------------------------------------------ */
.prose {
max-width: var(--measure);
font-size: var(--text-body);
line-height: var(--leading-body);
}
.prose > * + * {
margin-top: var(--space-4);
}
.prose > h2 {
margin-top: var(--space-12);
font-size: var(--text-h3);
line-height: var(--leading-h3);
letter-spacing: var(--tracking-h3);
}
.prose > h3 {
margin-top: var(--space-8);
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
}
.prose > :is(h2, h3):first-child {
margin-top: 0;
}
.prose > :is(h2, h3) + * {
margin-top: var(--space-3);
}
.prose ul,
.prose ol {
padding-inline-start: 1.25em;
}
.prose li + li {
margin-top: var(--space-1);
}
.prose .lead {
margin-bottom: var(--space-6);
}
.dl {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: var(--space-3) var(--space-6);
margin: 0;
}
.dl dt {
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.dl dd {
color: var(--color-text-secondary);
}
@media (max-width: 479.98px) {
.dl {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-1);
}
.dl dd {
margin-bottom: var(--space-3);
}
}
/* 要点清单：对勾 + 一句话 */
.checklist {
display: grid;
gap: var(--space-3);
list-style: none;
margin: 0;
padding: 0;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-btn);
line-height: 1.55;
}
.checklist .icon {
width: 16px;
height: 16px;
margin-top: 0.3em;
color: var(--color-brand-text);
}
/* 表格外框 */
.table-wrap {
overflow-x: auto;
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-ring);
}
.table-wrap table {
min-width: 520px;
}
.table-wrap th {
background: var(--gray-50);
}
.table-wrap tr:last-child td {
border-bottom: 0;
}
/* ------------------------------------------------------------------------
27. 页面头部（目录页、费用页、关于页）
------------------------------------------------------------------------ */
.page-head {
padding-block: var(--space-12);
}
.page-head__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.page-head__inner .lead {
max-width: 40rem;
}
.page-head--with-art .page-head__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
gap: var(--space-8);
align-items: center;
}
.page-head--with-art .page-head__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
@media (max-width: 1023.98px) {
.page-head {
padding-block: var(--space-8);
}
.page-head--with-art .page-head__inner {
grid-template-columns: minmax(0, 1fr);
}
}
/* ------------------------------------------------------------------------
28. 区块进场：只在 html.js 下初始隐藏；JS 用 IntersectionObserver 加 data-revealed
同一 [data-reveal-group] 内前 4 个子项错开 60ms。减少动效时直接可见。
------------------------------------------------------------------------ */
html.js .reveal {
opacity: 0;
translate: 0 var(--motion-y-12);
}
html.js .reveal[data-revealed] {
opacity: 1;
translate: 0 0;
transition:
opacity var(--dur-reveal) var(--ease-out),
translate var(--dur-reveal) var(--ease-out);
}
html.js [data-reveal-group] > .reveal:nth-child(2)[data-revealed] { transition-delay: 60ms; }
html.js [data-reveal-group] > .reveal:nth-child(3)[data-revealed] { transition-delay: 120ms; }
html.js [data-reveal-group] > .reveal:nth-child(4)[data-revealed] { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
html.js .reveal,
html.js .reveal[data-revealed] {
opacity: 1;
translate: none;
transition: none;
}
}
/* ------------------------------------------------------------------------
30. 行内表单（订阅邮件）：输入框 + 按钮同一行；移动端换行
------------------------------------------------------------------------ */
.inline-form {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
width: 100%;
max-width: 32rem;
}
.inline-form .field {
flex: 1 1 220px;
}
.inline-form .btn {
flex: none;
align-self: flex-end;
min-height: 44px;
}
/* ------------------------------------------------------------------------
31. 一句话说明（费用、隐私）：16px 次要色 + 文字链，前置 16px 图标
------------------------------------------------------------------------ */
.statement {
display: flex;
align-items: flex-start;
gap: var(--space-2);
max-width: var(--measure);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-secondary);
}
.statement > .icon {
width: 18px;
height: 18px;
margin-top: 0.35em;
color: var(--color-text-tertiary);
}
.statement a {
color: var(--color-link);
text-decoration: underline;
}
/* 服务卡大号的配图在中文页外的长词也不截断 */
.service-card--large .service-card__body {
flex: 1 1 auto;
}
}
/* ==========================================================================
P5 补充（2026-10-05）：目录/详情/静态页用到的小组件。仍只用 tokens.css 的变量，无硬编码色值。
========================================================================== */
@layer components {
/* 四语 链接列表（页脚底栏；research-seo.md 1.5） */
.lang-links ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-sm);
}
.lang-links a {
color: var(--color-text-secondary);
text-decoration: none;
}
.lang-links a:hover {
color: var(--color-text);
text-decoration: underline;
}
.lang-links a[aria-current="page"] {
color: var(--color-text);
font-weight: var(--weight-semibold);
}
/* 信息卡行：…（dt/dd 直接在 dl > div 下，合法） */
.info-card__row {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
column-gap: var(--space-3);
align-items: start;
}
.info-card__row dt {
display: contents;
}
.info-card__row dt > .icon {
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--color-text-tertiary);
}
.info-card__row dt > span {
grid-column: 2;
font-size: var(--text-xs);
line-height: 1.4;
color: var(--color-text-secondary);
}
.info-card__row dd {
grid-column: 2;
}
/* 要点清单的"不包含"变体：减号图标，次要色 */
.checklist--muted .icon {
color: var(--color-text-tertiary);
}
.checklist--muted li {
color: var(--color-text-secondary);
}
.tile-grid--three {
--tile-cols: 3;
}
/* 筛选条已选胶囊列表 */
.filter-bar__chips {
display: contents;
list-style: none;
margin: 0;
padding: 0;
}
.filter-bar__applied-label {
font-size: var(--text-xs);
color: var(--color-text-secondary);
}
/* 小字来源说明 */
.source {
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-text-tertiary);
}
.source a {
color: var(--color-text-secondary);
}
/* 标题区的 h1 内两行（中文通称 + 官方名） */
.event-head__zh,
.event-head__official {
display: block;
}
.event-head__official {
margin-top: var(--space-1);
font-size: var(--text-h3);
line-height: var(--leading-h3);
letter-spacing: var(--tracking-h3);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
}
/* 表格 caption 隐藏时也占位为 0 */
.table-wrap caption {
caption-side: top;
}
/* ------------------------------------------------------------------------
21. 信息卡（详情页粘性侧栏，距顶 88）
------------------------------------------------------------------------ */
.info-card {
position: sticky;
top: calc(var(--header-h) + var(--space-6));
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--card-pad);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-ring), var(--shadow-lg);
}
.info-card__title {
font-size: 1.0625rem;
font-weight: var(--weight-semibold);
line-height: 1.4;
}
.info-card__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}
.info-card__row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.info-card__row > .icon {
width: 18px;
height: 18px;
margin-top: 3px;
color: var(--color-text-tertiary);
}
.info-card__row dt {
font-size: var(--text-xs);
line-height: 1.4;
color: var(--color-text-secondary);
}
.info-card__row dd {
font-size: var(--text-btn);
line-height: 1.45;
color: var(--color-text);
overflow-wrap: anywhere;
}
.info-card__actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
@media (max-width: 1023.98px) {
.info-card {
position: static;
box-shadow: var(--shadow-ring), var(--shadow-sm);
}
}
}