/* ========================================================================== me-card.css（homepage-v4 · 2026-10-19 晚 · MVP 合并）——「我」= 动态 instax（spike 12 第三～五轮的定稿） 取代 spike12.css §2 / r3.css §3 / r4.css instax 底 / r5.css §1·1c·1d·1e·2 / r6-grid.css §2。作废变体（H0–H3、M0–M5、I2 / I3、S / M 尺寸）不带过来。 js/me-card.js 写的变量：--tilty / --tiltx / --pz（倾斜，peek.css 吃）、--h4o / --h4bx / --h4by（膜）、--hx/--hy/--hw/--hh（照片窗在正面里的位置，给膜挖洞）。 1 · 卡 = 一栏宽的 instax mini（54 : 86；左右白边 4 / 54 = 7.4% 卡宽，照片窗 46 : 62） 2 · 光面覆膜卡，不是纸：干净的米白 + 一层极淡的缎面反光；照片窗「真的凹进去」（内壁的影随倾斜偏向背离的一侧） 3 · 照片：HTML 里只有 poster；帧序列画在 canvas 上，画好第一帧才盖上去；一层静止的细颗粒 4 · 虹彩膜（H4）：**只在白框上**（mask 挖掉照片窗，凹边内壁也不要）；平放透明，倾斜 / 指针进来淡入 5 · 白框下面（v3）：字条行（关于我 … ↻）→ 两句（卡片描述那一档 · R6 / R43）→ 小红书主按钮 + X / Medium（B5）；卡高 = 内容 + 下内距（R4）， 照片保持 46 : 62 不拉伸；按钮离文字 16、贴卡底内距线（R14b / R26）。卡高只跟朝上那一面的内容走（10-22 晚，见 §1 末尾） 6 · 背面 = 相纸背面 + About 全文（排版 = 卡片背面通用一套，css/labels.css §3 · R20） 7 · 夜里（v3 · R39 / R46）：深色版 —— 卡面 = 夜里纸卡同色 #2B2722，墨 = 浅墨 233 226 212，按钮浅底深字，镭射膜改成在深底上提亮（screen） ========================================================================== */ /* ---------------- 1 · 尺寸 ---------------- */ .me-card { --r: var(--card-r); --edge-w0: .5px; --edge-wk: 1px; --edge-c: rgb(30 36 48 / .09); --me-b: 7.4cqw; /* 这张卡上的墨：永远是深墨（白框是浅色物件，夜里也是） */ --ink-rgb: var(--obj-ink-rgb); --ink: var(--obj-ink); --ink-2: var(--obj-ink-2); --ink-3: var(--obj-ink-3); --hair-2: rgb(var(--obj-ink-rgb) / .2); color: var(--ink); color-scheme: light; } .me-card .flip { container-type: inline-size; } .me-card .me-body { display: flex; flex-direction: column; padding: var(--card-inset); } /* 相纸白边 = --card-inset；下边也留内距（v3 · R4） */ .me-card .me-photo { position: relative; aspect-ratio: 46 / 62; flex: 0 0 auto; overflow: hidden; border-radius: 0; background: var(--me-well, #2A2622); isolation: isolate; } /* [10-21 21:02] 手机不再固定 262 宽：「我」卡占满列宽（css/grid.css），照片窗按 46 : 62 跟着放大，帧序列由 js/me-card.js 按新尺寸选 1x / 2x */ /* [10-22 晚] 卡高跟着朝上那一面的内容走，不留空白（背面本来就绝对定位铺满 .flip，见 css/mvp.css「卡高只按正面定」）： · 桌面 / 平板（≥ 700）：卡高 = 网格第一行 = 正面内容高（js/me-card.js 写 --row-1，css/grid.css）；背面铺满同一格，全文更长就卡内滚动，不撑高同一排的魔法笔。 · 手机（< 700）：卡高 = js/me-card.js 量好写的 --me-h —— 正面朝上 = 正面内容高，翻到背面 = 背面全文高（不在卡内滚），翻回再回到正面高； 高度变化跟着翻面走一个短过渡，reduced-motion 不过渡。没量到之前按正面内容排（auto）。 */ @media (max-width: 699.98px) { .me-card .flip { height: var(--me-h, auto); grid-template-rows: minmax(0, 1fr); transition: height .32s var(--ease); } } @media (max-width: 699.98px) and (prefers-reduced-motion: reduce) { .me-card .flip { transition: none; } } /* ---------------- 2 · 光面覆膜卡 + 凹进去的照片窗 ---------------- */ .me-card { --me-face: #FAFAF8; --me-sheen-a: .85; --me-sheen-b: rgb(232 232 228 / .45); --me-rim-hi: rgb(255 255 255 / .95); --me-lip: rgb(20 22 28 / .16); --me-lip-sh: rgb(20 22 28 / .30); --me-lip-hi: rgb(255 255 255 / .35); --surface-bg: var(--me-face); } /* 派生 token（--icon-ink / --cta-*，tokens.css）跟着这张卡的墨和卡面 */ .me-card .face.front { background-color: var(--me-face) !important; background-image: linear-gradient(158deg, rgb(255 255 255 / var(--me-sheen-a)) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 66%, var(--me-sheen-b) 100%) !important; background-size: 100% 100% !important; box-shadow: inset 0 1px 0 var(--me-rim-hi), inset 0 -1px 0 rgb(30 36 48 / .05); } /* 窗口内壁：平放只剩发丝细的边 + 柔影；倾斜时影偏向背离倾斜的一侧，朝向倾斜那侧带一点反光。和帧 / 膜同一个倾斜值 */ .me-card .me-photo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; --ex: calc(var(--tilty, 0) * .16px); --ey: calc(var(--tiltx, 0) * -.34px); box-shadow: inset 0 0 0 .5px var(--me-lip), inset calc(var(--ex) * 1) calc(var(--ey) * 1 + .6px) calc(1.2px + var(--tilty, 0) * var(--tilty, 0) * .006px) var(--me-lip-sh), inset calc(var(--ex) * -0.6) calc(var(--ey) * -0.6 - .4px) 1px var(--me-lip-hi); } /* ---------------- 3 · 照片 ---------------- */ .me-card .me-poster, .me-card .me-seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .me-card .me-seq { opacity: 0; transition: opacity .25s ease; z-index: 1; } .me-card .me-photo.is-seq > .me-seq { opacity: 1; } /* 胶片颗粒：一层静止的 overlay（帧里没烤颗粒） */ .me-card .me-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay; opacity: .22; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .24 0 0 0 .22 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 140px; } /* ---------------- 4 · 虹彩膜：只在白框上 ---------------- .me-film 盖整张正面，mask = 全幅 − 照片窗（--hx/--hy/--hw/--hh 由 js 量）；里面一层 color-burn 的斜向虹彩（粉 → 青 → 黄绿 → 紫），位置跟倾斜反向走。 --h4o 由 js 写：桌面 = 指针进来 → .78、离开 → 0；滚动驱动时按倾斜量显（最多约 .6）。reduced-motion / 夜里：见下 */ .me-card .me-film { position: absolute; inset: 0; z-index: 4; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: var(--h4o, 0); -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-size: 100% 100%, var(--hw, 0px) var(--hh, 0px); mask-size: 100% 100%, var(--hw, 0px) var(--hh, 0px); -webkit-mask-position: 0 0, var(--hx, 0px) var(--hy, 0px); mask-position: 0 0, var(--hx, 0px) var(--hy, 0px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; } .me-card .me-film > i { position: absolute; inset: 0; display: block; mix-blend-mode: color-burn; background: linear-gradient(112deg, rgb(255 79 133 / 0) 4%, rgb(253 108 165 / .30) 22%, rgb(111 202 255 / .36) 40%, rgb(217 244 123 / .24) 54%, rgb(161 107 255 / .34) 71%, rgb(255 139 101 / 0) 95%); background-size: 210% 210%; background-repeat: no-repeat; background-position: var(--h4bx, 50%) var(--h4by, 40%); } @media (prefers-reduced-motion: reduce) { .me-card .me-film { display: none; } } /* ---------------- 5 · 白框下面 ---------------- */ .me-card .me-photo { flex: 0 0 auto; } /* R14b：照片保持 46 : 62，不被卡的高度拉伸 */ .me-card .me-strip { padding: 12px 0 0; flex: 1 1 auto; position: relative; z-index: 5; } .me-card .me-name { display: none; } /* 名字标题不显示（Wanfang 13:31）；留给读屏 */ .me-card .me-text { margin: 4px 0 0; max-width: var(--desc-max); font-size: var(--t-s); line-height: var(--desc-lh); color: rgb(var(--ink-rgb) / var(--desc-a)); } /* R43：和别的卡片描述同一个灰 */ .me-card .me-text p { margin: 0; } .me-card .me-text p + p { margin-top: 4px; } .me-card .me-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: auto 0 0; padding-top: 16px; } /* 离文字 16（padding，量卡高时算进去）；卡比内容高时 margin-top: auto 让按钮贴卡底内距线 */ .me-card .me-acts .btn.cta { display: inline-flex; align-items: center; } .me-card .me-acts .so { margin-left: -6px; } /* logo 的点按区比图形大：图形左缘对齐 */ /* ---------------- 6 · 背面 ---------------- */ .me-card .face.back { background-color: #F3F1EB; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .24 0 0 0 .22 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } .me-card .face.back .me-back.is-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); padding-bottom: 40px; } /* ---------------- 7 · 夜里：深色版（v3 · R39 / R46）---------------- 卡面 = 夜里纸卡同色 #2B2722，墨 = 浅墨 233 226 212（表面和字成对）；--icon-ink / --cta-* 在 tokens.css 的派生规则里跟着这张卡的墨重新算， 所以图标是浅墨、按钮是浅底深字。镭射膜在深底上改成 screen 提亮；凹边 / 反光跟着调。--me-well（照片还没出来时窗口里的底）更暗 */ :root[data-theme="night"] .me-card { --ink-rgb: var(--night-ink-rgb); --ink: rgb(var(--ink-rgb)); --ink-2: rgb(var(--ink-rgb) / .8); --ink-3: rgb(var(--ink-rgb) / var(--ink-3-a)); --hair-2: rgb(var(--ink-rgb) / .2); --me-face: var(--night-paper); --me-sheen-a: .05; --me-sheen-b: rgb(0 0 0 / .18); --me-rim-hi: rgb(255 246 230 / .12); --me-lip: rgb(0 0 0 / .45); --me-lip-sh: rgb(0 0 0 / .6); --me-lip-hi: rgb(255 246 230 / .10); --me-well: #1A1714; --edge-c: rgb(255 246 230 / .10); color-scheme: dark; } :root[data-theme="night"] .me-card .face.back { background-color: var(--night-paper); } :root[data-theme="night"] .me-card .me-film { opacity: calc(var(--h4o, 0) * .9); } :root[data-theme="night"] .me-card .me-film > i { mix-blend-mode: screen; opacity: .55; } :root[data-theme="night"] .me-card .me-poster, :root[data-theme="night"] .me-card .me-seq { filter: brightness(.94); }