/* ============================================================================ feishu-deck-h5 · design system stylesheet Source of truth for every slide. Do not invent tokens; use only these. Canvas: deck-defined; legacy default 1920×1080. Scaled by JS via --fs-scale on each .slide-frame. ============================================================================ */ :root { /* — Backgrounds — */ --fs-bg-0: #000000; --fs-bg-1: #04060F; --fs-bg-2: #0A1230; --fs-bg-3: #1B1F3A; /* — Brand accents (use ONE per slide) — */ --fs-blue: #3C7FFF; /* default */ --fs-cyan: #24C3FF; /* inline highlight only */ --fs-teal: #33D6C0; --fs-purple: #5C3FFB; --fs-violet: #9F6FF1; --fs-orange: #FE7F00; --fs-accent: var(--fs-blue); /* — Text — */ --fs-text: #FFFFFF; --fs-text-72: rgba(255,255,255,0.72); --fs-text-65: rgba(255,255,255,0.65); --fs-text-48: rgba(255,255,255,0.48); --fs-text-40: rgba(255,255,255,0.40); --fs-text-16: rgba(255,255,255,0.16); /* — Lines — */ --fs-hairline: rgba(255,255,255,0.10); --fs-divider: rgba(255,255,255,0.20); /* — Gradients — */ --fs-grad-hero: radial-gradient(120% 100% at 0% 0%, #0F1A4A 0%, #060B22 38%, #000 78%); --fs-grad-section: radial-gradient(140% 110% at 100% 0%, #1A2256 0%, #050817 50%, #000 100%); --fs-grad-keyline: linear-gradient(90deg, #33D6C0 0%, #3C7FFF 50%, #5C3FFB 100%); --fs-grad-glow-blue: radial-gradient(80% 60% at 50% 50%, rgba(60,127,255,0.22), transparent 60%); --fs-grad-close: radial-gradient(60% 50% at 92% 8%, rgba(159,111,241,0.28), transparent 60%), radial-gradient(60% 50% at 8% 92%, rgba(60,127,255,0.22), transparent 60%), #000; /* — Type — */ /* 2026-08-21 · 豆包工作 × 飞书品牌规范。一级主标题用汉仪雅酷黑 75W；副标题、正文和 PPT 常规文本用方正兰亭黑 Pro GB18030；英文与 数字用 TikTok Display。字体不随 Skill 分发，未安装时回退到系统字体。 */ --fs-font-display-cjk: "汉仪雅酷黑 75W", "HYYakuHei-75W", "汉仪雅酷黑", "HYYakuHei", "方正兰亭黑 Pro GB18030", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --fs-font-cjk: "方正兰亭黑 Pro GB18030", "方正兰亭黑Pro_GB18030", "FZLanTingHeiPro_GB18030 Light", "FZLanTingHeiPro-Light", "FZLanTingHei", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --fs-font-latin: "TikTok Display", "Helvetica Neue", "Arial", sans-serif; --fs-font-mono: "JetBrains Mono","SF Mono","Menlo",monospace; /* — Type scale (4-tier strict for CONTENT pages) — */ /* 2026-05-16: content slides use only these 4 sizes. Hero layouts (cover / section / big-stat / end / quote) keep their master-spec hero values and are NOT subject to this scale. See SKILL.md "Typography floor" for the discipline. Rule of thumb: PPT 16:9 13.33"×7.5" at 1pt = 1/72" → 1920×1080 canvas, 1pt ≈ 2px. Title 24pt = 48px · Sub 14pt = 28px · Body 12pt = 24px · Foot 8pt = 16px. */ --fs-title: 48px; /* Action Title on content pages */ --fs-sub: 28px; /* Subtitle / column-title / lede (optional) */ --fs-body: 24px; /* Body copy, list items, table cells, captions */ --fs-foot: 16px; /* Footnote, eyebrow caps, pill, tag, attrib, source */ /* — Geometry (1920 canvas) — */ --fs-pad-x: 96px; --fs-pad-y: 64px; --fs-radius-card: 16px; --fs-radius-tile: 14px; --fs-radius-pill: 999px; /* — Brand assets (override these to inline as data: URIs) — */ /* Official precomposed lockups. Do not rebuild the separator or spacing in CSS. */ --fs-asset-cobrand: url("doubao-work-feishu-cobrand-color-on-dark.png"); --fs-asset-cobrand-on-light: url("doubao-work-feishu-cobrand-color-on-light.png"); --fs-asset-cobrand-mono: url("doubao-work-feishu-cobrand-mono-on-dark.png"); --fs-asset-cobrand-mono-on-light: url("doubao-work-feishu-cobrand-mono-on-light.png"); /* Legacy single-brand tokens stay available for explicit content use only. */ --fs-asset-logo: url("lark-logo.png"); --fs-asset-logo-mono: url("lark-logo-mono-white.png"); --fs-asset-cover-bg: url("lark-cover-bg.jpg"); /* 飞书 master flower background */ --fs-asset-section-bg: url("lark-section-bg.jpg"); /* cool blue glow gradient */ --fs-asset-content-bg: url("lark-content-bg.jpg"); /* subtle dark ambient gradient */ --fs-asset-slogan: url("lark-slogan.png"); /* 先进团队 先用飞书 */ /* — Runtime scale (set by JS) — */ --fs-scale: 1; /* — Deck canvas (renderer overrides these on .deck) — */ --fs-deck-width: 1920px; --fs-deck-height: 1080px; --fs-deck-half-width: 960px; --fs-deck-half-height: 540px; --fs-deck-aspect: 1920 / 1080; /* — Motion tokens (AVAILABLE, not mandatory) — The deck's shared motion language. custom_css MAY reference these so bespoke per-page animation stays consistent instead of re-typing curves/durations (see references/motion-system.md). They do NOT force a house style — a page is free to design its own; this only kills copy-paste drift. */ --fs-ease-out: cubic-bezier(.16, 1, .3, 1); /* signature expo-out */ --fs-ease-soft: cubic-bezier(.4, 0, .2, 1); /* gentle in-out */ --fs-dur-enter: .6s; /* entrance / reveal */ --fs-dur-quick: .35s; /* hover / small state */ --fs-dur-ambient: 40s; /* looping ambient drift */ --fs-stagger: 90ms; /* steady stagger step */ --fs-stagger-tight: 60ms; /* tech-tone tighter step */ } /* Magic Move (opt-in via deck.json `magic_move`): default morph timing for any element pair sharing a view-transition-name across two slides. Override per-name in slide.custom_css with ::view-transition-group(). Gated so it never runs when the platform/user disables motion. */ @media (prefers-reduced-motion: no-preference) { ::view-transition-group(*) { animation-duration: var(--fs-dur-enter); animation-timing-function: var(--fs-ease-out); } } /* ---------- Reset (scoped, non-destructive to host pages) ---------- */ .deck, .deck * { box-sizing: border-box; } .deck h1, .deck h2, .deck h3, .deck h4, .deck p, .deck ul, .deck ol, .deck li, .deck figure, .deck blockquote { margin: 0; padding: 0; } .deck ul, .deck ol { list-style: none; } .deck img { display: block; max-width: 100%; } /* ---------- Page chrome ---------- */ html, body { height: 100%; } body { margin: 0; background: #000; color: var(--fs-text); font-family: var(--fs-font-cjk); font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================================ Deck modes ============================================================================ */ /* Wrapper that holds N slide-frames */ .deck { position: relative; width: 100%; } /* The slide-frame is the responsive box. Internally it uses the deck's exact design canvas (1920×1080 when deck.canvas is absent). Perf: contain isolates layout/paint inside the frame; transitions become local repaints instead of full-document. */ .slide-frame { position: relative; width: 100%; aspect-ratio: var(--fs-deck-aspect, 1920 / 1080); overflow: hidden; background: #000; contain: layout paint size; /* F-370 (2026-08-24) · PRE-JS render containment — the file:// cold-open fix. ROOT CAUSE of「用 file:// 打开非常慢」: every off-screen-skipping rule in this sheet is scoped to .deck[data-mode=…] (present L199 / scroll L392), but `data-mode` is only set by feishu-deck.js::setMode — and that script is `defer`, so it cannot run until the ENTIRE html document is parsed. On a 58-page / 750 KB deck that leaves a long window in which the deck has NO data-mode at all, so NEITHER perf rule matches and the browser does a full style+layout+paint pass over all N 1920×1080 slides, each one promoted to its own compositor layer by the `will-change:transform` below (the very ≈1.7 GB VRAM blow-up documented at L336) with every infinite CSS/SMIL animation on all N pages live at once. Over file:// there is no streaming / compression, so the parse window — and the stall — is at its worst. Fix: put the containment on the BASE rule so it holds from first paint, before any JS. Both mode rules below already re-declare content-visibility (present: auto→hidden/visible per is-current; scroll: auto), so each keeps full control once JS lands — this is a pre-JS floor, not a new policy. contain-intrinsic-size is unnecessary here: the base box is already sized by `aspect-ratio + width:100% + contain:size`, so skipped frames reserve their exact height and the page cannot reflow when they render (zero CLS). */ content-visibility: auto; } /* F-370 · keep the FIRST frame eagerly rendered pre-JS. content-visibility:auto skips off-screen frames, but the cover is what the user is actually waiting to see; exempting it means first paint is never gated on the skip/render pass. Dropped the moment JS is ready — from then on the mode rules own visibility. */ .deck:not([data-js-ready]) .slide-frame:first-child { content-visibility: visible; } .slide-frame .slide { position: absolute; top: 0; left: 0; width: var(--fs-deck-width, 1920px); height: var(--fs-deck-height, 1080px); transform-origin: top left; transform: scale(var(--fs-scale, 1)) translateZ(0); /* GPU layer hint */ will-change: transform; } /* F-370 · pre-JS compositor relief. The `will-change:transform` + `translateZ(0)` above promote EVERY slide to its own 1920×1080 layer. Both are only needed for present mode's animated scale (scroll mode already opts out at L392 for exactly this reason) — pre-JS they cost N layers for zero benefit and are the second half of the cold-open stall. Hold them back until JS has picked a mode; present mode then re-promotes the current frame normally. */ .deck:not([data-js-ready]) .slide-frame .slide { transform: scale(var(--fs-scale, 1)); will-change: auto; } /* ---- Present mode (1 slide visible, fills viewport) ---- 规范: in fullscreen the slide must letterbox (preserve 16:9), never stretch. We position the slide absolutely, anchor its CENTER at the viewport center via negative half-margins, then scale around its own center. This pattern is immune to grid-cell auto-sizing edge cases and to overflow:hidden clipping the pre-transform layout box. Use both 100vh and 100dvh so iOS Safari doesn't crop with the URL bar. */ .deck[data-mode="present"] { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; /* 2026-05-06 · letterbox 边带改用与 slide gradient 同调的深色径向渐变. 16:9 内容显示在 16:10/16:10+ 屏时上下不可避免有 letterbox 物理边距, 之前 #000 实色边带视觉上像"加边框",现在用与 slide 深底色一致的 dark radial 让边带自然融入 slide bg。content / section / cover 三 大母版的边缘色都接近 #000–#06091a,这个渐变对它们都协调。 */ background: radial-gradient(120% 100% at 50% 50%, #0A1126 0%, #04081B 45%, #000 90%); overflow: hidden; } .deck[data-mode="present"] .slide-frame { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; pointer-events: none; transition: opacity .25s ease; /* background omitted — deck-level radial fills the letterbox area, then per-layout :has() rules below paint each frame with its slide's own bg so the 16:9 slide letterboxed in a 16:10 viewport blends seamlessly. */ /* Off-screen frames don't render until they become current — saves ~600 ms of initial paint on a 22-slide deck (was rendering all 22 radial-gradient decor layers up front). */ content-visibility: auto; contain-intrinsic-size: 100vw 100vh; } /* 2026-05-06 · per-layout slide-frame background blends letterbox bars with the slide's actual content background. 16:9 design canvas in a 16:10 viewport leaves ~60–130px top/bottom letterbox area; without this, those bars are pure black against a textured slide bg → visible border. With this rule, the bars carry the same gradient/image as the slide content edge → seamless fullscreen. Uses :has() selector (Chrome 105+ / Safari 15.4+ / Firefox 121+). On older browsers, falls through to the deck-level radial gradient. */ .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="cover"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="end"]) { background: #000 var(--fs-asset-cover-bg) center/cover no-repeat; } .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="section"]) { background: #000 var(--fs-asset-section-bg) center/cover no-repeat; } /* 2026-05-08 · agenda's slide bg is overridden to content-bg image (line ~1003); frame must match or a visible seam appears at slide boundary in present mode. */ .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="agenda"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="content-2col"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="content-3up"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="big-stat"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="stats"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="quote"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="table"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="timeline"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="process"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="image-text"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="content-before-after"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="matrix-2x2"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="issue-tree"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="flow-swim"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="waterfall"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="arch-stack"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="logo-wall"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="chart"]), /* 2026-05-28 · raw + iframe-embed default to content-bg letterbox fill. Without these in the whitelist, the slide-frame keeps the deck-level radial gradient in the letterbox area while .slide itself paints content-bg — luma jump at the slide top edge reads as "标题上方有黑条" on non-16:9 viewports. Most raw slides are content-page-ish; raw slides emulating cover / end / replica can override per-slide. Phase 1.c extras + chart stay in this asset-owning sheet so the relative lark-content-bg URL resolves beside feishu-deck.css in every delivery. */ .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="raw"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="iframe-embed"]), .deck[data-mode="present"] .slide-frame:has(> .slide[data-layout="canvas"]) { background: #000 var(--fs-asset-content-bg) center/cover no-repeat; } /* F-318 · present mode = SINGLE ambient-bg layer (the slide-frame, painted cover above so it fills the letterbox). The slide itself goes transparent so the frame's bg shows through SEAMLESSLY. ROOT CAUSE of the recurring「顶部有条边 / 颜色和背景不一样」report: F-307 made BOTH the frame AND the slide paint content-bg, but at DIFFERENT cover crops — the frame crops to the VIEWPORT aspect (e.g. 16:10), the slide to its fixed 16:9 canvas. On any non-16:9 fullscreen the letterbox appears and the two crops disagree at the boundary → a visible horizontal colour seam (worse the bigger the screen). Collapsing to one layer (frame paints, slide transparent) removes the seam for EVERY layout, every viewport — no per-deck patch. Scroll/browse mode is unaffected (the slide keeps its own card bg there — this rule is data-mode="present" only). A slide that needs a bespoke present-mode full-bleed background just sets it on `.slide` the obvious way: F-364's render-time _css_utils.promote_root_bg_to_frame hoists a slide-root `background` onto THIS frame for present mode (fills the letterbox seamlessly) and keeps it on the slide for scroll. BEFORE F-364 a slide-root bg silently TIED this rule's specificity (0,4,0) and — emitted after the framework sheet — won the cascade, regrowing the very seam below; authors had to hand-target `.slide-frame`. No longer. Full-page replicas are the exception: their contain-fitted image must remain on the slide, while the surrounding frame stays black. */ .deck[data-mode="present"] .slide-frame:has(> .slide.page-replica) { background: #000 !important; } .deck[data-mode="present"] .slide-frame > .slide:not(.page-replica) { background-image: none !important; background-color: transparent !important; } /* F-344 · extends F-318 ONE LEVEL DEEPER. Lifted/raw pages frequently carry their own full-bleed background wrapper (.qilu-page / .source-frame-wrap / .ppt-stage / .slide65-redo …) that re-paints the content-bg image (at the 16:9 slide crop) or a flat dark solid OVER the now-transparent .slide → the exact seam F-318 removed reappears, just nested inside the slide. F-318's `.slide-frame > .slide` selector can't reach those arbitrary descendants. feishu-deck.js::markBleedPanels geometry-detects them (≥95% slide coverage + content-bg-or-dark-solid backdrop), preserves any decorative gradient glows in --fs-bleed-grads, and tags them .fs-bleed-panel; this rule drops their opaque backdrop so the frame's single content-bg layer shows through seamlessly. Doubled class keeps specificity above the panel's own per-slide rule (wins over !important regardless of source order). Present-mode only, same contract as F-318 (scroll mode keeps the panel's bg). */ .deck[data-mode="present"] .slide .fs-bleed-panel.fs-bleed-panel { background-color: transparent !important; background-image: var(--fs-bleed-grads, none) !important; } /* F-345 · runtime decor mirror for LIFTED / custom full-bleed decoration. The declarative data-decor mirror (see §decor below) only covers framework decor TOKENS; a lifted page (raw/iframe/canvas) often paints CUSTOM radial glows + a darkening ::before vignette directly on a full-slide wrapper (.qilu-page …) that the frame can't know about, so the decoration stops at the 16:9 slide edge and the letterbox stays un-decorated → the same horizontal luma seam ("黑边"). When feishu-deck.js::markBleedPanels finds such a panel it captures its decoration (with per-layer sizing) into --fs-bleed-deco-* and the frame's own backdrop into --fs-bleed-frame-*, then tags the frame .fs-bleed-host; this re-paints the frame as [decoration ON TOP of the original backdrop] so the SAME decoration now covers the letterbox + slide uniformly. The decoration rides in the frame BACKGROUND (never a ::after) so it always sits behind the slide content — critical for the darkening vignette, which must not dim the cards/text. The panel's own slide-confined copy is zeroed (.fs-bleed-panel drops its backdrop; .fs-bleed-promoted drops its ::before vignette) so nothing is painted twice. Present-mode only, same contract as F-318. */ .deck[data-mode="present"] .slide-frame.fs-bleed-host { background-image: var(--fs-bleed-deco-image, none), var(--fs-bleed-frame-image, var(--fs-asset-content-bg)) !important; background-size: var(--fs-bleed-deco-size, auto), var(--fs-bleed-frame-size, cover) !important; background-position: var(--fs-bleed-deco-position, center), var(--fs-bleed-frame-position, center) !important; background-repeat: var(--fs-bleed-deco-repeat, no-repeat), var(--fs-bleed-frame-repeat, no-repeat) !important; } .deck[data-mode="present"] .slide .fs-bleed-promoted.fs-bleed-promoted::before { background-image: none !important; background-color: transparent !important; } .deck[data-mode="present"] .slide-frame.is-current { opacity: 1; pointer-events: auto; content-visibility: visible; } /* 2026-06-14 · present-mode compositor-layer relief (page-turn flicker / black flash on animation-heavy multi-page decks). All N frames sit stacked at inset:0 INSIDE the viewport, so content-visibility:auto (L181) never skips them — the browser treats every hidden frame as "on-screen", keeps each .slide's `will-change:transform` 1920×1080 layer alive (≈1.7GB VRAM @2x on a 56-page deck) AND keeps compositing the hidden pages' (often infinite) animations. The GPU thrashes layers → constant flicker, worst mid page-turn. Fix: once JS has set .is-current, make non-current frames TRULY skip rendering (content-visibility:hidden — this also halts their CSS + SMIL animations, so it supersedes the earlier universal animation-pause rule AND the per-frame svg.pauseAnimations hack) and release their compositor layer (will-change:auto). Gated on [data-js-ready] so the pre-JS :first-child cover (below) still paints; current frame + scroll mode are untouched. */ .deck[data-mode="present"][data-js-ready] .slide-frame:not(.is-current) { content-visibility: hidden; } .deck[data-mode="present"][data-js-ready] .slide-frame:not(.is-current) .slide { will-change: auto; } /* Pre-JS state: first frame visible immediately so users don't see a black screen during the gap between CSS-applied (frame opacity:0) and JS-loaded (frame .is-current). IMPORTANT: gate this fallback behind :not([data-js-ready]) so the cover does NOT remain visible underneath later slide transitions after init — that caused occasional "flash back to cover" during content-page navigation. */ .deck[data-mode="present"]:not([data-js-ready]) .slide-frame:first-child { opacity: 1; pointer-events: auto; } .deck[data-mode="present"] .slide-frame .slide { position: absolute; left: 50%; top: 50%; width: var(--fs-deck-width, 1920px); height: var(--fs-deck-height, 1080px); margin-top: calc(0px - var(--fs-deck-half-height, 540px)); margin-left: calc(0px - var(--fs-deck-half-width, 960px)); transform: scale(var(--fs-scale, 1)) translateZ(0); /* GPU layer hint */ transform-origin: center center; /* scale around the slide's center */ will-change: transform; } /* ---- Scroll mode (mobile / browse: vertical stack) ---- */ .deck[data-mode="scroll"] { display: flex; flex-direction: column; gap: 12px; padding: 12px; max-width: 1280px; margin: 0 auto; } .deck[data-mode="scroll"] .slide-frame { /* allow:drop-shadow — scroll-mode preview cards float on a dark page; a soft drop shadow gives them physical separation from the page bg. Not slide content — the frame itself is the chrome that holds the slide; R12 ban is about shadows on .slide-internal cards. */ border: 1px solid var(--fs-hairline); border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); /* 2026-05-29 · F-27 perf: skip painting off-screen frames in scroll/browse mode too (present mode already does this at line ~157). No contain-intrinsic-size needed — the base .slide-frame keeps `aspect-ratio:16/9 + width:100% + contain:size`, so each frame's box is sized by layout (not content), reserving correct height with zero scroll-anchor jank. Saves a full 1920×1080 paint per off-screen slide on long decks (esp. mobile browse). */ content-visibility: auto; } /* F-338 · scroll-mode (mobile default) compositor relief. In scroll/browse mode the slide's scale transform is STATIC — set once on layout/resize, never animated (present mode is the only path that animates the scale + fs-reveal). So the base `.slide-frame .slide` rule's `will-change:transform` + the `translateZ(0)` baked into its transform promote EVERY laid-out slide to its own 1920×1080 compositor layer for ZERO benefit here — pure GPU memory / backing-store cost on the weak mobile GPUs scroll mode targets (the layer is created the moment content-visibility:auto renders an on-screen frame). Drop both promotion hints in scroll mode only; present mode (line ~277) is left completely untouched, so its tuned page-turn flicker behaviour is unaffected. Mirrors the present-mode non-current relief at line ~262. */ .deck[data-mode="scroll"] .slide-frame .slide { transform: scale(var(--fs-scale, 1)); /* no translateZ(0) — don't promote a static slide */ will-change: auto; } /* ---- Deck UI overlay (progress bar, mode toggle, bottom controls) ---- */ .deck-ui { position: fixed; z-index: 50; pointer-events: none; font-family: var(--fs-font-latin); color: var(--fs-text-48); font-size: var(--fs-foot); letter-spacing: 0.08em; } /* Top progress bar — present-mode only, brand keyline gradient */ .deck-ui .deck-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.08); pointer-events: none; z-index: 60; } .deck-ui .deck-progress .bar { height: 100%; width: 0%; background: var(--fs-grad-keyline); transition: width 320ms cubic-bezier(.2,.7,.2,1); } /* Top-right mode toggle — REMOVED 2026-05-06. Was redundant with bottom .ctl.fs (fullscreen toggle) and noisy where the brand wordmark sits. Mobile scroll mode is auto-detected via viewport, no explicit toggle needed. */ /* Bottom-center control bar — prev / page-no / next | fullscreen */ .deck-ui .deck-controls { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(8, 12, 24, 0.85); /* opaque enough to drop blur on idle */ border: 1px solid var(--fs-hairline); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 32px rgba(0,0,0,0.45); transition: opacity .35s ease; } .deck-ui .deck-controls .ctl { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 999px; color: var(--fs-text-72); display: grid; place-items: center; transition: color .12s ease, background .12s ease; } .deck-ui .deck-controls .ctl:hover { color: #fff; background: rgba(255,255,255,0.08); } .deck-ui .deck-controls .ctl:disabled { color: var(--fs-text-16); cursor: default; background: transparent; } .deck-ui .deck-controls .ctl-sep { display: inline-block; width: 1px; height: 20px; background: var(--fs-hairline); margin: 0 4px; } .deck-ui .deck-controls .indicator { display: inline-flex; align-items: baseline; min-width: 64px; justify-content: center; font: 600 var(--fs-foot)/1 var(--fs-font-latin); letter-spacing: 0.10em; color: #fff; } .deck-ui .deck-controls .indicator .cur { width: 2.8ch; min-width: 24px; box-sizing: content-box; margin: 0; padding: 3px 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #fff; outline: none; text-align: center; font: inherit; line-height: 1; letter-spacing: inherit; font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none; transition: border-color .12s ease, background .12s ease; } .deck-ui .deck-controls .indicator .cur:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); } .deck-ui .deck-controls .indicator .cur:focus { border-color: #3a86ff; background: rgba(58,134,255,.24); } .deck-ui .deck-controls .indicator .sep { color: var(--fs-text-40); margin: 0 2px; } .deck-ui .deck-controls .indicator .total { color: var(--fs-text-48); font-weight: 500; } .deck-ui .deck-controls .ctl.fs .i-exit { display: none; } /* Tiny corner hint — present mode only */ .deck-ui .nav-hint { position: fixed; left: 24px; bottom: 32px; pointer-events: none; color: var(--fs-text-40); font: 500 var(--fs-foot)/1 var(--fs-font-latin); letter-spacing: 0.10em; } /* Hide chrome in scroll mode (also belt-and-suspenders to JS display: none) */ .deck[data-mode="scroll"] ~ .deck-ui .deck-progress, .deck[data-mode="scroll"] ~ .deck-ui .deck-controls, .deck[data-mode="scroll"] ~ .deck-ui .nav-hint { display: none !important; } /* F-316 · deck-wide opt-in (deck.json `deck.hide_progress: true` → data-hide-progress on .deck): hide ONLY the top reading-progress keyline, persistently, without the per-URL #clean/kiosk hash (those also hide controls + hints). !important beats feishu-deck.js's inline `.deck-progress` display set per present-mode. */ .deck[data-hide-progress] ~ .deck-ui .deck-progress { display: none !important; } /* 规范: in 16:9 fullscreen there's no letterbox to hide chrome in — chrome would permanently overlay slide content (e.g., the slide's own footer at slide y=1032 is at viewport y=1032 when scale=1, right where the bottom pill lives). Auto-fade after 2.5s idle and restore on any user input. Note: pointer-events stays AUTO when faded so that hovering/moving onto the chrome wakes it. The JS mousemove listener also wakes it; this is belt-and-suspenders. Backdrop-filter is dropped to free GPU during fade. */ .deck-ui .deck-controls, .deck-ui .nav-hint { transition: opacity .35s ease; } .deck-ui.is-idle .deck-controls, .deck-ui.is-idle .nav-hint { opacity: 0; /* pointer-events stays auto so hover wakes chrome */ } .deck-ui.is-idle .deck-controls { backdrop-filter: none; -webkit-backdrop-filter: none; /* free GPU */ } .deck-ui.is-idle .deck-progress { opacity: .35; } /* Hovering chrome cancels idle fade visually (the JS mousemove also fires) */ .deck-ui .deck-controls:hover { opacity: 1 !important; } .deck-ui .deck-controls:focus-within { opacity: 1 !important; } /* Kiosk / projection mode (URL hash #proj | #bare | #clean | #kiosk): force-hide ALL chrome — page bar, controls, hint — and stay hidden (unlike .is-idle, hover/mousemove never wakes it). For projection, embedded iframes (e.g. Miaoda), and signage. Toggled by JS on hashchange. */ .deck-ui.is-kiosk .deck-progress, .deck-ui.is-kiosk .deck-controls, .deck-ui.is-kiosk .nav-hint { display: none !important; } /* Mobile: shrink controls, remove hint */ @media (max-width: 640px) { .deck-ui .deck-controls { gap: 2px; padding: 4px 6px; bottom: 16px; } .deck-ui .deck-controls .ctl { width: 32px; height: 32px; } .deck-ui .deck-controls .indicator { min-width: 56px; font-size: 13px; } .deck-ui .nav-hint { display: none !important; } } /* ============================================================================ Slide chrome — logo + footer (used by every non-cover layout) ============================================================================ */ .slide { color: var(--fs-text); font-family: var(--fs-font-cjk); overflow: hidden; } /* ---- Official 豆包工作｜飞书 cobrand lockup ---- 规范 only permits the Doubao Work-first lockup separated by a vertical rule. The complete lockup is one official image; never compose it from two logos, text, avatar art, or pseudo-elements. Dark pages use the color-on-dark asset; light and mono variants are explicit classes. */ .slide .wordmark { position: absolute; top: 58px; right: 124px; /* -3px from master y=61 aligns the two text tops */ width: 317px; height: 50px; /* 3869:612 official native ratio */ background: var(--fs-asset-cobrand) left center/contain no-repeat; text-indent: -9999px; overflow: hidden; z-index: 20; /* brand chrome ABOVE flattened content. .slide>* (line ~1838) puts every direct .slide child at z-index:1; the wordmark declared none, so it tied content at 1 and a later full-bleed raw child (layout:"raw") painted over it by DOM order = logo flash-then-gone. 20 sits in the chrome band 2–49: above content, below pager(50/60) & mobile chrome(1001). cover/end overrides inherit this. */ } /* Cover & End (封面 / 封底) — same official lockup, top-left, larger. */ .slide[data-layout="cover"] .wordmark, .slide[data-layout="end"] .wordmark { top: 113px; left: 120px; right: auto; width: 469px; height: 74px; background-image: var(--fs-asset-cobrand); } /* Explicit variants; color-on-dark remains the default. */ .slide .wordmark.is-on-light { background-image: var(--fs-asset-cobrand-on-light); } .slide .wordmark.is-mono { background-image: var(--fs-asset-cobrand-mono); } .slide .wordmark.is-mono.is-on-light { background-image: var(--fs-asset-cobrand-mono-on-light); } /* Mono exports already use a vertically centered canvas; keep the master y. */ .slide:not([data-layout="cover"]):not([data-layout="end"]) .wordmark.is-mono { top: 61px; } /* Per-slide .footer chrome (brand line + page no.) is RETIRED as of 2026-05. The fullscreen present-mode pager (bottom-center prev/page-no/next bar in feishu-deck.js / .deck-ui) shows the page number, and the corner logo (.wordmark) carries the brand. The repeated bottom-right strip was redundant clutter. Templates and render.py no longer emit this markup; this rule hides any leftover .footer/.pageno DOM in legacy decks generated before the cleanup. */ .slide .footer, .slide .pageno { display: none; } /* Eyebrow (uppercase Latin, accent color, tracked) */ .slide .eyebrow { font: 600 var(--fs-foot)/1 var(--fs-font-latin); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-accent); } /* Keyline accent bar */ .slide .keyline { width: 96px; height: 3px; background: var(--fs-grad-keyline); border: 0; border-radius: 999px; } /* Reusable bilingual title block */ .slide .title-zh { font: 600 var(--fs-title)/1.15 var(--fs-font-display-cjk); letter-spacing: -0.005em; color: #fff; } .slide .title-en { margin-top: 14px; font: 500 var(--fs-body)/1.4 var(--fs-font-latin); color: var(--fs-text-48); letter-spacing: 0.02em; } /* Body text */ .slide .body { font: 500 var(--fs-sub)/1.5 var(--fs-font-cjk); color: var(--fs-text-72); } .slide .lede { font: 500 var(--fs-sub)/1.4 var(--fs-font-cjk); color: var(--fs-text-72); } .slide .caption { /* Body content per SKILL.md "Typography floor — content body & captions (mandatory, ≥ 22 px)". 2026-05-16: bumped from 16 → 22; pre-bump value was below the documented body floor and read as illegible fine print on projector. For chrome-style citations (e.g. footnote under a stats table) use `.footnote` (14 px chrome) instead. */ font: 500 var(--fs-body)/1.4 var(--fs-font-latin); color: var(--fs-text-48); letter-spacing: 0.06em; } /* Inline highlight: cyan keyword inside white text. Use sparingly. */ .slide .accent-text { background: var(--fs-grad-keyline); -webkit-background-clip: text; background-clip: text; color: transparent; } .slide .hl { color: var(--fs-cyan); } /* Tinted icon tile (48–64 px) */ .slide .tile { width: 64px; height: 64px; border-radius: var(--fs-radius-tile); background: color-mix(in srgb, var(--fs-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fs-accent) 42%, transparent); display: grid; place-items: center; color: var(--fs-accent); } .slide .tile svg { width: 32px; height: 32px; } .slide .tile.sm { width: 48px; height: 48px; } .slide .tile.sm svg { width: 24px; height: 24px; } /* Pills */ .slide .pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--fs-text-16); border-radius: var(--fs-radius-pill); padding: 10px 18px; font: 500 var(--fs-foot)/1 var(--fs-font-cjk); color: var(--fs-text-72); background: rgba(255,255,255,0.02); } .slide .pill svg { width: 20px; height: 20px; color: var(--fs-accent); } .slide .pill.solid { background: var(--fs-accent); border-color: transparent; color: #fff; } /* ---- Content tag (24 Body) — for labels that CARRY CONTENT, not chrome. Use when the label is "who owns / when due / what status / what category" that the reader needs to read at body weight. Differs from `.pill` (16 Foot chrome) — `.pill` is for true chrome like pagination indicator; `.content-tag` is for content-bearing labels. 2026-05-16: introduced after a session where 6 slides used `.pill`-style 16px chrome for category labels and the user flagged each as "too small". */ .slide .content-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-body)/1.2 var(--fs-font-cjk); letter-spacing: 0.04em; color: var(--fs-accent); } /* ---- Column pill (28 Sub) — for COLUMN-LABEL chips that label a panel or column. E.g. "困境 / 解法" in a content-2col compare layout, "重点客群" in a big-stat focus card, "DEADLINE / 截止时间" in a deadline-card. These are SECTION-level labels, not meta — they belong to Sub tier (28), with optional pill chrome (border + padding). */ .slide .column-pill { display: inline-flex; align-items: center; gap: 10px; font: 700 var(--fs-sub)/1 var(--fs-font-cjk); letter-spacing: 0.06em; color: var(--fs-accent); padding: 10px 22px; border-radius: var(--fs-radius-pill); background: color-mix(in srgb, var(--fs-accent) 18%, transparent); } /* ---- Pattern N · 5-up Overview with Hero Numerals (2026-05-16) ---- When a `.slide[data-layout="content-3up"]` has a `.grid.overview-grid` child, override the framework's hardcoded `repeat(3, 1fr)` to give the 5-column layout. Uses a 2-class selector (`grid.overview-grid`) to outweigh the single-attribute framework rule on specificity. Pair with `.overview-card` for the per-card layout (hero numeral + title + body, with min-height to give the hero numeral breathing room). Tonal accents `.is-c1 ... .is-c5` ship below. */ .slide .grid.overview-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; } .slide .grid.overview-grid .overview-card { padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 18px; min-height: 320px; border-radius: var(--fs-radius-card); border: 1px solid var(--fs-text-16); background: rgba(255,255,255,0.04); } .slide .grid.overview-grid .overview-card .ov-num { /* allow:typescale — Hero numeral, 88px (>1.8× Title 48 to clear muddled middle per Goldilocks). Weight 500 medium + 55% semi-transparent brand color → editorial, doesn't compete with the bold card title. */ font: 500 88px/0.95 var(--fs-font-latin); letter-spacing: -0.01em; margin-bottom: 4px; } .slide .grid.overview-grid .overview-card .ov-name { font: 700 var(--fs-title)/1.15 var(--fs-font-cjk); color: #fff; letter-spacing: -0.005em; } .slide .grid.overview-grid .overview-card .ov-desc { font: 500 var(--fs-body)/1.5 var(--fs-font-cjk); color: #fff; opacity: 0.92; margin-top: auto; } /* Tonal accents per card */ .slide .grid.overview-grid .overview-card.is-c1 { border-color: rgba(60,127,255,0.55); background: linear-gradient(180deg, rgba(60,127,255,0.12) 0%, rgba(8,12,24,0.50) 100%); } .slide .grid.overview-grid .overview-card.is-c1 .ov-num { color: color-mix(in srgb, var(--fs-blue) 55%, transparent); } .slide .grid.overview-grid .overview-card.is-c2 { border-color: rgba(159,111,241,0.55); background: linear-gradient(180deg, rgba(159,111,241,0.14) 0%, rgba(8,12,24,0.50) 100%); } .slide .grid.overview-grid .overview-card.is-c2 .ov-num { color: color-mix(in srgb, var(--fs-violet) 55%, transparent); } .slide .grid.overview-grid .overview-card.is-c3 { border-color: rgba(51,214,192,0.55); background: linear-gradient(180deg, rgba(51,214,192,0.12) 0%, rgba(8,12,24,0.50) 100%); } .slide .grid.overview-grid .overview-card.is-c3 .ov-num { color: color-mix(in srgb, var(--fs-teal) 55%, transparent); } .slide .grid.overview-grid .overview-card.is-c4 { border-color: rgba(254,127,0,0.50); background: linear-gradient(180deg, rgba(254,127,0,0.14) 0%, rgba(8,12,24,0.50) 100%); } .slide .grid.overview-grid .overview-card.is-c4 .ov-num { color: color-mix(in srgb, var(--fs-orange) 55%, transparent); } .slide .grid.overview-grid .overview-card.is-c5 { border-color: rgba(255,255,255,0.30); background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(8,12,24,0.50) 100%); } .slide .grid.overview-grid .overview-card.is-c5 .ov-num { /* allow:white-opacity — decorative Hero numeral, 55% mirrors c1-c4. */ color: rgba(255,255,255,0.55); } /* ---- Canonical card recipe (use this for ANY "tag + title + body" card) ---- 2026-05-16: extracted from slide-7/8 pattern that took 8 iterations to converge. The canonical shape:
类别 / 状态 / owner (24 body bold brand)

标题 (28 sub bold white)

描述 (24 body regular white)

Child classes are `cc-*` prefixed (NOT `card-*`) to avoid collision with the existing `.card` global class system (`.card .ctitle`, `.card .cbody`, `.card .cfoot`). Apply `.is-hero` for the focal card (brand border + glow). Apply `.is-urgent` for orange warning. */ .slide .canonical-card { padding: 26px 28px; border-radius: var(--fs-radius-card); border: 1px solid var(--fs-text-16); background: rgba(255,255,255,0.04); display: flex; flex-direction: column; gap: 10px; } .slide .canonical-card .cc-tag { font: 700 var(--fs-body)/1.2 var(--fs-font-cjk); letter-spacing: 0.04em; color: var(--fs-accent); } .slide .canonical-card .cc-title { font: 700 var(--fs-sub)/1.25 var(--fs-font-cjk); color: #fff; letter-spacing: -0.005em; margin: 0; } .slide .canonical-card .cc-body { font: 500 var(--fs-body)/1.45 var(--fs-font-cjk); color: #fff; margin-top: auto; } .slide .canonical-card.is-hero { border: 1.5px solid color-mix(in srgb, var(--fs-accent) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--fs-accent) 16%, transparent) 0%, rgba(8,12,24,0.50) 100%); } .slide .canonical-card.is-urgent { border-color: rgba(254,127,0,0.55); background: linear-gradient(180deg, rgba(254,127,0,0.14) 0%, rgba(8,12,24,0.50) 100%); } .slide .canonical-card.is-urgent .cc-tag { color: var(--fs-orange); } /* Cards on dark */ .slide .card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-card); padding: 36px; display: flex; flex-direction: column; gap: 20px; min-height: 400px; } /* Global card-text fallback — applies to ANY card-style container (.card, .verdict-card, .voice-card, .arch-hand, etc.). Without this only content-3up's `.card .ctitle/.cbody` were sized; verdict-card on other layouts (slides 02 / 16 / 18) inherited browser-default 16 px, which read as visibly smaller than neighboring slides. content-3up's tighter overrides at lines 514-518 still apply where present. */ .slide .ctitle { font: 600 var(--fs-sub)/1.3 var(--fs-font-cjk); color: var(--fs-text); margin: 0; } .slide .cbody { font: 500 var(--fs-body)/1.6 var(--fs-font-cjk); color: var(--fs-text-72); margin: 0; } /* ============================================================================ LAYOUT 01 — Cover (封面) — matches master slideLayout1 - Background: image2.jpg (white flower on dark, occupies right ~50%) - 官方豆包工作｜飞书联名标 top-LEFT at (120, 113) size 469×74 — .wordmark override - Title at left: 124, top: 285, width: 884 (left half), font 100px / 700 - Subtitle below at top: 551, same font family, smaller - Author / company block at bottom-left at top: 803 ============================================================================ */ .slide[data-layout="cover"] { background: #000 var(--fs-asset-cover-bg) center/cover no-repeat; } .slide[data-layout="cover"] .stage { position: absolute; top: 285px; left: 124px; width: 980px; /* left half — widened from master 884 because 典型 9-字中文标题 @ 100px 会在 884px 内溢出 造成 4-5 行 auto-wrap. Dark gradient overlay extends to x≈1152, so 980 still preserves flower visibility on the right. */ } .slide[data-layout="cover"] h1.title { font: 700 100px/1.18 var(--fs-font-display-cjk); letter-spacing: -0.005em; color: #fff; margin: 0; padding-block: 10px; } .slide[data-layout="cover"] .subtitle { /* allow:white-opacity — cover subtitle is master-spec hierarchy; SKILL.md "Step 2 · Cover page" actually says NO subtitle at all in the default authoring flow — this rule exists for the rare bilingual cover. */ margin-top: 132px; /* master gap: y=367-189-156 = ~22 native = 33 → larger to breathe */ font: 600 40px/1.4 var(--fs-font-cjk); color: rgba(255,255,255,0.92); margin-bottom: 0; } .slide[data-layout="cover"] .author { /* allow:white-opacity — author block is master-spec; 0.85 keeps the name+date a half-step quieter than the 100px title without going gray. 2026-05-06 · top: 803 → 720 — author block sits closer to a 2-line title. Master spec said 803 (bottom-left); user feedback elevated this since the huge gap reads as "two unrelated stacks" rather than "title + signature". */ position: absolute; left: 124px; top: 720px; font: 600 30px/1.45 var(--fs-font-cjk); color: rgba(255,255,255,0.85); letter-spacing: 0.02em; } .slide[data-layout="cover"] .author .role { /* allow:white-opacity — `.role` is the small date prefix on cover, master spec dims it to 0.55 to keep the eye on the name. */ display: inline-block; margin-right: 32px; color: rgba(255,255,255,0.55); font-weight: 500; } /* (cover .footer hide rule retired — global .slide .footer { display: none } now handles it.) */ /* ============================================================================ LAYOUT 02 — Section / chapter divider (一级章节页) — master slideLayout3 - Background: image4 (dark with cool blue glow on right) — section gradient - Chapter "01." at (126, 271), font 160 px / 700 ← was 280, that's why it clipped - Title at (126, 447), font 88 px / 700 ← was 128 - Subtitle at (126, 567), font 48 px / 500 - Official cobrand lockup top-RIGHT handled by default .wordmark ============================================================================ */ .slide[data-layout="section"] { background: #000 var(--fs-asset-section-bg) center/cover no-repeat; } .slide[data-layout="section"] .chapter-num { position: absolute; top: 271px; left: 126px; /* line-height 1.0 (was 0.9) + padding-top prevents the gradient-clipped glyph from being cut off at the line-box top edge in WebKit when -webkit-background-clip:text */ font: 700 160px/1 var(--fs-font-latin); letter-spacing: -0.02em; padding-top: 8px; color: #fff; background: var(--fs-grad-keyline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .slide[data-layout="section"] h2.title { position: absolute; top: 447px; left: 126px; font: 700 88px/1.18 var(--fs-font-display-cjk); letter-spacing: -0.005em; color: #fff; max-width: 1300px; } .slide[data-layout="section"] .lede { /* allow:white-opacity — section .lede is master-spec subtitle; 0.72 keeps it visually subordinate to the 88px chapter title above. */ position: absolute; top: 597px; left: 126px; font: 500 36px/1.45 var(--fs-font-cjk); color: rgba(255,255,255,0.72); max-width: 1100px; } .slide[data-layout="section"] .pills { position: absolute; bottom: 96px; left: 126px; right: 124px; display: flex; flex-wrap: wrap; gap: 14px; } /* 2026-05-20 · section pill 升 16→24 (Body tier) — Hero-context label floor 规则 (SKILL.md 2026-05-17): section 页 chapter-num 160 / title 88 是 hero anchor, 同一页内 content label(产品名)必须 ≥ 24 Body,不能 16 chrome,否则在投影 距离上看不清。 */ .slide[data-layout="section"] .pills .pill { font-size: var(--fs-body); padding: 12px 22px; } /* ============================================================================ LAYOUT 03 — Content (3-up cards) ============================================================================ */ .slide[data-layout="content-3up"] { /* background set by the unified content-bg rule below — uses lark-content-bg.jpg (飞书母版 image1.jpg) for the subtle dark gradient. */ } /* Removed (F-271, 2026-06-10): the content-3up `.header` override that pinned it to top:96/left:96/right:96 (grid, bottom-rule). It was a DEAD rule — the unified content/raw header rule below (~1521, `.slide[...content-3up...] .header { top:61; left:73; right:420; display:block }`) has identical specificity but wins on later cascade, so every content-3up title already renders at the master coord 61/73 (verified: computed top/left = 61/73 both before and after this deletion, byte-identical example renders). Keeping it only misled docs / layout-lint into thinking content-3up titles sit at 96/96. */ /* Removed v1.5.2: content-3up override that made the title 64 px while every other content layout was 52 px (per the unified header rule). The user noticed: pages with content-3up showed visibly larger titles than content-2col / process / table / etc. — inconsistent. The unified 52 px rule below now applies to ALL content layouts. See feishu-deck.css line ~922 .slide .header .title-zh */ .slide[data-layout="content-3up"] .header .pageno { font: 500 var(--fs-foot)/1 var(--fs-font-latin); color: var(--fs-text-48); letter-spacing: 0.18em; } .slide[data-layout="content-3up"] .grid { position: absolute; top: 360px; left: 96px; right: 96px; bottom: 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } .slide[data-layout="content-3up"] .card .head { display: flex; justify-content: space-between; align-items: center; } .slide[data-layout="content-3up"] .card .num { /* allow:typescale — hero numeral 88 anchors the card; was 48 (off-tier but visually competing with the 28 ctitle); upgraded so the eye locks onto the index, then the 48 title, then the body. Pairs with Pattern N. */ font: 500 88px/0.95 var(--fs-font-latin); color: color-mix(in srgb, var(--fs-accent) 55%, transparent); letter-spacing: -0.01em; } .slide[data-layout="content-3up"] .card .ctitle { /* 2026-05-17: 28 → 48 — when a hero numeral is the visual anchor, the accompanying title must hold its own at Title tier; 28 reads as sub and the title looked weak against the 88 num. */ font: 700 var(--fs-title)/1.15 var(--fs-font-cjk); color: #fff; } .slide[data-layout="content-3up"] .card .cbody { /* 2026-05-16: 20 → 22 — body content per SKILL.md typography floor. */ font: 500 var(--fs-body)/1.55 var(--fs-font-cjk); color: var(--fs-text-65); flex: 1; } .slide[data-layout="content-3up"] .card .cfoot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--fs-hairline); padding-top: 16px; font: 500 var(--fs-foot)/1 var(--fs-font-latin); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-text-48); } .slide[data-layout="content-3up"] .card .cfoot svg { color: var(--fs-accent); } /* 规范 L3 落地(2026-05-30):content-3up 卡片按内容尺寸 + 共享中线 + 卡内垂直 居中,取代全局 `.slide .grid .card { align-self: stretch }` 的强制等高。等高会把 内容最多的那张卡片文字挤到底边(实测下内距 −27px 溢出,两侧却空 113px)。改后: 稀疏卡片居中、留白均衡;最满的卡片长高吃下内容,不再贴底。只覆盖 content-3up, 不动 1712 行的全局 legacy stretch(其它版式仍依赖它)。 验证:assets/check-distribution.py 在青啤 slide 3 上 3 findings → 0,全 deck 零回归。 */ .slide[data-layout="content-3up"] .grid .card { /* 2026-06-01: align-self center → stretch. The 2026-05-30 L3 fix used `center` to stop the fullest card overflowing under the THEN-current fixed-height band. The next day (2026-05-31, ~line 1685) the grid was reworked to `flex:1 + align-content:center`, so the single grid row is now `auto` = tallest card's content height and centered in the band. Under THAT geometry `center` left shorter cards at their own (smaller) content height → visibly ragged card heights (user-reported: "第三个框 变大了"). `stretch` makes every card match the row track (= tallest content), giving an even grid WITHOUT overflow — the track is auto-sized to content, so the tallest card's content exactly fits by construction. `justify-content: center` keeps content vertically centered inside. */ align-self: stretch; justify-content: center; } /* ============================================================================ LAYOUT 04 — Content 2-column (text + visual) ============================================================================ */ /* content-2col background set by the unified content-bg rule below — uses lark-content-bg.jpg (飞书母版 image1.jpg) for the subtle dark gradient. */ .slide[data-layout="content-2col"] .header { position: absolute; top: 96px; left: 96px; right: 96px; padding-bottom: 32px; border-bottom: 1px solid var(--fs-hairline); display: grid; grid-template-columns: 1fr auto; align-items: end; } .slide[data-layout="content-2col"] .grid { position: absolute; top: 360px; left: 96px; right: 96px; bottom: 120px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; } .slide[data-layout="content-2col"] .col-text { display: flex; flex-direction: column; gap: 32px; } .slide[data-layout="content-2col"] .col-text .lede { color: #fff; } .slide[data-layout="content-2col"] .col-text ul.feature-list { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; } /* li uses block + left padding (NOT grid). Grid would treat and the trailing text node as two separate items: text node would auto-place into row 2 / col 1 (36px wide) and CJK chars would wrap one-per-line. */ /* feature-list bullet pattern — generalized 2026-05-22 from content-2col `.col-text` scope to ANY slide (utility class). Use `