/* 可以在多个页面复用的区块:图文并排、Logo 墙、区块标题。 新页面要用,直接照这里的 class 写 HTML 即可。 */ .section-title { font-size: clamp(30px, calc(2.78 * var(--vw)), 40px); line-height: 1.2; font-weight: 700; } /* ---------- 图文并排 ----------
文字在左、图在右
图在左、文字在右 */ .split { padding-block: 110px; } .split__grid { display: grid; grid-template-columns: 386px 520px; justify-content: space-between; align-items: start; } .split--reverse .split__grid { grid-template-columns: 520px 408px; } .split--reverse .split__media { order: -1; } .split__text p { font-size: 16px; line-height: 25.6px; } .split__text .section-title { max-width: 340px; } /* 原站在「Platform」后换行 */ .split__text .section-title + p { margin-top: 22px; } .split__text p + p { margin-top: 25.6px; } .split__media { width: 100%; aspect-ratio: 520 / 440; object-fit: cover; } /* ---------- Logo 墙 ---------- */ .logo-wall { background: var(--mist); padding-block: 64px 75px; } .logo-wall__title { text-align: center; font-size: clamp(28px, calc(2.64 * var(--vw)), 38px); line-height: 1; font-weight: 700; } .logo-wall__grid { list-style: none; padding: 0; margin-top: 64px; display: grid; grid-template-columns: repeat(5, 140px); column-gap: 69px; row-gap: 31.5px; } .logo-wall__grid img { width: 140px; height: 60px; object-fit: contain; } /* ---------- 内页大图(Events、News Centre) ---------- 和首页大图一样:从页面顶端算起,页头压在上面。顶端不留白边,照片一直铺到页面顶端 (--top-gap 并进 height,标题的绝对位置因此不变)。 */ .page-hero { position: relative; height: calc(var(--top-gap) + var(--header-h) + clamp(360px, calc(40.28 * var(--vw)), 580px)); color: var(--paper); background: var(--ink); overflow: hidden; } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero__title { position: relative; padding-top: calc(var(--header-h) + clamp(100px, calc(13.54 * var(--vw)), 195px)); text-align: center; font-family: var(--font-display); font-size: clamp(40px, calc(4.17 * var(--vw)), 60px); line-height: normal; font-weight: 700; } /* ---------- 钉住的背景图 ----------
…文字…
不滚动时图片顶端对齐区块顶端;滚动时图片贴着视口不动,区块像窗口从上面滑过。 纯 CSS,js/site.js 只负责在页面能滚动时给 加 pin-on。 */ .pinned { position: relative; overflow: clip; color: var(--paper); background: var(--ink); } .pinned > :not([data-pin-rail]) { position: relative; } [data-pin-rail] { position: absolute; inset: 0; } [data-pin-rail] > img { position: sticky; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .pin-on [data-pin-rail] { top: calc(-1 * var(--view-h, 100vh)); bottom: calc(-1 * var(--view-h, 100vh)); } .pin-on [data-pin-rail] > img { height: var(--view-h, 100vh); } /* ---------- 进场动效 ---------- 元素加 data-reveal="时长毫秒" 即可,js/site.js 接管。 内容默认就是可见的,不会因为脚本没跑而消失。 */ /* ---------- 浏览量和点赞(卡片 .stats、文章页 .post-stats) ---------- 数字由 js/site.js 从上线版的 /api 取,取到了才去掉 hidden;工作台里没有 /api,一直不显示。 hidden 靠浏览器默认的 display:none,会被下面的 inline-flex 顶掉,所以单独写一条(同 .news-card[hidden]) */ .stats[hidden], .post-stats[hidden] { display: none; } .stats { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; line-height: 20px; color: var(--map-muted); } .stats__item { display: inline-flex; align-items: center; gap: 5px; } .stats svg, .post-stats svg { display: block; flex: none; } .post-stats { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 15px; line-height: 20px; color: var(--ink); } .post-like { display: inline-flex; align-items: center; gap: 6px; margin: -8px; padding: 8px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .post-like:focus-visible { outline: 2px solid var(--map-ink); outline-offset: 0; } .post-like[aria-pressed="true"] { color: var(--map-ink); } .post-like[aria-pressed="true"] path { fill: currentColor; } @media (hover: hover) { .post-like:hover { color: var(--map-ink); } } .post-like.is-pop svg { animation: like-pop 0.35s var(--ease-float); } @keyframes like-pop { 40% { transform: scale(1.3); } } @media (prefers-reduced-motion: reduce) { .post-like.is-pop svg { animation: none; } } /* ---------- cookie 同意横幅(js/site.js 按需插进页面,只对欧洲 / 英国时区的访客弹) ---------- */ .consent { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 20px 28px; max-width: min(720px, calc(100% - 48px)); padding: 18px 22px; background: rgb(var(--night) / 0.97); /* --night 是 RGB 三个数,不能直接 var() 当颜色用 */ color: var(--paper); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); font-size: 15px; line-height: 22px; } .consent__text a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .consent__actions { display: flex; flex: none; gap: 10px; } .consent__btn { padding: 9px 18px; border: 1px solid rgb(255 255 255 / 0.7); background: transparent; font: inherit; color: var(--paper); cursor: pointer; } .consent__btn--primary { border-color: var(--accent); background: var(--accent); color: rgb(var(--night)); font-weight: 600; } .consent__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; } @media (hover: hover) { .consent__btn:hover { border-color: var(--paper); } .consent__btn--primary:hover { background: var(--paper); border-color: var(--paper); } } /* ---------- 窄屏 ---------- */ @media (max-width: 767px) { .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-direction: column; align-items: stretch; } .consent__actions .consent__btn { flex: 1; } .split { padding-block: 72px; } .split__grid, .split--reverse .split__grid { grid-template-columns: 1fr; row-gap: 40px; } .split--reverse .split__media { order: 0; } .logo-wall__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); column-gap: 24px; justify-items: center; } /* 窄屏不钉:图片跟着区块走 */ .pin-on [data-pin-rail] { top: 0; bottom: 0; } .pin-on [data-pin-rail] > img { height: 100%; } }