/* ========================================================================== vibevideo — base layer reset + 跨组件共用的排版/容器原子 ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* 注意:--stage-w/--stage-h 是无单位数字,用在 width/height 上必须补 * 1px, 否则 `width: 1920` 是非法值会被整条丢弃(布局会悄悄塌掉)。 */ html, body { width: calc(var(--stage-w) * 1px); height: calc(var(--stage-h) * 1px); overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 组件舞台:占满画布并建立定位上下文 */ .stage { position: relative; width: 100%; height: 100%; overflow: hidden; } /* --- 排版原子 --------------------------------------------------------- */ /* 主标题:给足字重和字距控制,中英混排也不会松散 */ .display { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; } .headline { font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } .subtitle { font-weight: 500; line-height: 1.4; color: var(--text-dim); } .mono { font-family: var(--font-mono); font-variant-ligatures: none; } /* --- 容器原子 --------------------------------------------------------- */ /* 玻璃面板:窗口/卡片类组件的通用外壳 */ .panel { background: var(--surface); border: calc(1 * var(--u)) solid var(--border); border-radius: calc(16 * var(--u)); overflow: hidden; box-shadow: 0 calc(24 * var(--u)) calc(64 * var(--u)) rgba(0, 0, 0, 0.45); } /* 强调描边:用于需要聚焦的容器 */ .panel-accent { border-color: var(--accent-dim); box-shadow: 0 0 0 calc(1 * var(--u)) var(--accent-dim), 0 calc(24 * var(--u)) calc(64 * var(--u)) rgba(0, 0, 0, 0.5); } /* 安全区:所有内容默认在这个范围内,避开不同平台的 UI 遮挡 */ .safe { position: absolute; inset: var(--pad-y) var(--pad-x); } /* 底部字幕条(lower-third)的挂载位 */ .lower-third-slot { position: absolute; left: var(--pad-x); bottom: calc(96 * var(--u)); right: var(--pad-x); display: flex; align-items: flex-end; gap: calc(20 * var(--u)); }