/* ======================================================================= Bravada Glass — 毛玻璃 + 液态玻璃（偏粉色 · iOS/HarmonyOS 风格）定稿参数：折射 23 / 模糊 3px / 饱和 170% / 圆角 435 / 纹理频率 15 折射 SVG 滤镜 #liquid 在 functions.php 注入（scale=23, baseFrequency=0.015）作用域说明：Bravada 把 cryout 类放在 #masthead/#content/#footer，而非。 functions.php 通过 body_class 给加了 bravada-glass，本文件统一用它作用域。材质类 .bg-frost / .bg-liquid 由 glass.js 注入，保持全局（不加作用域）。 ======================================================================= */ /* ---------- 1. 设计 Token ---------- */ :root{ --rose-50:#FFF6F9; --rose-100:#FFE9F0; --rose-200:#FBD3E0; --rose-300:#F0B3C8; --rose-400:#E494AD; --rose-500:#D46389; --rose-600:#B8466E; --rose-700:#92395C; --ink:#3D2A33; --ink-soft:#6A4F5B; --ink-faint:#9A8590; --pearl:#FFFBFC; --champagne:#E8C9A0; --champagne-2:#D9B88F; --lavender:#E7DFF5; --peach:#FFE2D1; /* Apple 级分层投影：接触阴影 + 中层 + 远层环境光 */ --glass-shadow:0 1px 2px rgba(67,41,58,.05), 0 10px 30px rgba(196,78,125,.10), 0 30px 60px rgba(158,59,99,.07); --glass-shadow-lg:0 2px 6px rgba(67,41,58,.07), 0 18px 44px rgba(196,78,125,.14), 0 46px 92px rgba(158,59,99,.10); --rim-light:inset 0 1px 1px rgba(255,255,255,.75); --rim-shade:inset 0 -1px 2px rgba(196,78,125,.10); --hairline:rgba(255,255,255,.6); --r-sm:14px; --r-md:22px; --r-lg:30px; --ease-glass:cubic-bezier(.22,1,.36,1); /* 液态玻璃定稿参数 */ --lg-blur:4px; --lg-sat:185%; --lg-radius:435px; --blur-frost:22px; --font-sans:"HarmonyOS Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --font-serif:"Cormorant Garamond","Noto Serif SC",serif; --font-cute:"ZCOOL KuaiLe","Noto Serif SC",cursive; } /* ---------- 2. 背景 + 字体 ---------- */ body.bravada-glass{ background: radial-gradient(900px 700px at 8% 0%, rgba(255,226,209,.70) 0%, transparent 60%), radial-gradient(950px 800px at 92% 4%, rgba(251,211,224,.75) 0%, transparent 60%), radial-gradient(1100px 1000px at 50% 48%, rgba(244,182,204,.34) 0%, transparent 70%), radial-gradient(900px 900px at 50% 105%, rgba(231,223,245,.55) 0%, transparent 65%), linear-gradient(160deg, #FFEFF4, #FCE3EC) !important; background-attachment:fixed !important; color:var(--ink); font-family:var(--font-cute); } /* 让父主题实色容器透明，露出粉色背景 */ body.bravada-glass #wrapper, body.bravada-glass #page, body.bravada-glass #main, body.bravada-glass #content, body.bravada-glass #primary, body.bravada-glass #secondary, body.bravada-glass #container, body.bravada-glass #masthead, body.bravada-glass #site-header-top-wrapper, body.bravada-glass #colophon-outer{ background:transparent !important; box-shadow:none !important; } /* 全站可爱艺术字（站酷快乐体 ZCOOL KuaiLe），含正文；图标字体单独保护 */ body.bravada-glass h1, body.bravada-glass h2, body.bravada-glass h3, body.bravada-glass h4, body.bravada-glass h5, body.bravada-glass h6, body.bravada-glass p, body.bravada-glass li, body.bravada-glass a, body.bravada-glass span, body.bravada-glass .entry-title, body.bravada-glass .entry-content, body.bravada-glass .entry-content *, body.bravada-glass .widget, body.bravada-glass .widget *, body.bravada-glass .widget-title, body.bravada-glass #site-title, body.bravada-glass #site-title a, body.bravada-glass #site-description, body.bravada-glass #access a, body.bravada-glass #header-menu a, body.bravada-glass #breadcrumbs, body.bravada-glass input, body.bravada-glass textarea, body.bravada-glass button, body.bravada-glass select, body.bravada-glass .more-link, body.bravada-glass .btn, body.bravada-glass .wp-block-button__link, body.bravada-glass blockquote, body.bravada-glass td, body.bravada-glass th, body.bravada-glass label, body.bravada-glass .entry-meta, body.bravada-glass .post-meta, body.bravada-glass .bg-counter-num, body.bravada-glass .bg-counter-lbl{ font-family:var(--font-cute) !important; letter-spacing:.01em; } body.bravada-glass h1, body.bravada-glass h2, body.bravada-glass h3, body.bravada-glass h4, body.bravada-glass .entry-title, body.bravada-glass .widget-title{ color:var(--ink); } /* 保护图标字体（Bravada 图标用 iconmeta），不被可爱字体覆盖 */ body.bravada-glass [class*="icon-"], body.bravada-glass [class*="icon-"]::before, body.bravada-glass [class^="icon-"]::before, body.bravada-glass i[class*="icon"]{ font-family:"iconmeta","iconfont" !important; } /* 正文可读性：字号 / 行高 / 颜色（可爱字体偏轻，需更高对比与行高） */ body.bravada-glass p, body.bravada-glass li{ color:var(--ink); } body.bravada-glass .entry-content{ color:var(--ink); line-height:1.9; font-size:16.5px; } body.bravada-glass .entry-content p, body.bravada-glass .entry-content li{ line-height:1.9; margin-bottom:1.05em; } body.bravada-glass a{ color:var(--ink); text-decoration:none; } body.bravada-glass .entry-content a{ color:var(--rose-600); text-decoration:underline; text-decoration-color:var(--champagne); text-underline-offset:3px; } /* ---------- 3. 毛玻璃材质 .bg-frost（全局） ---------- */ .bg-frost{ position:relative; isolation:isolate; background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,245,249,.46)) !important; -webkit-backdrop-filter:blur(var(--blur-frost)) saturate(150%); backdrop-filter:blur(var(--blur-frost)) saturate(150%); border:1px solid rgba(255,255,255,.55) !important; border-radius:var(--r-md) !important; box-shadow:var(--glass-shadow),var(--rim-light) !important; } /* ---------- 4. 液态玻璃材质 .bg-liquid（全局 · 增强版，任何背景上都明显是玻璃） ---------- */ .bg-liquid{ position:relative; isolation:isolate; background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,235,242,.18)) !important; /* 折射/模糊/饱和全部在 #liquid SVG 滤镜内（自包含），只用 url() 保证位移一定生效 */ -webkit-backdrop-filter:url(#liquid); backdrop-filter:url(#liquid); border:1px solid rgba(255,255,255,.62) !important; border-radius:var(--lg-radius) !important; box-shadow: 0 1px 2px rgba(67,41,58,.06), /* 接触阴影 */ 0 12px 32px rgba(196,78,125,.16), /* 中层 */ 0 32px 64px rgba(158,59,99,.10), /* 远层环境光 */ inset 0 1px 0 rgba(255,255,255,1), /* 顶部清晰高光（specular） */ inset 0 -8px 16px rgba(196,78,125,.08), /* 底部内阴影：玻璃厚度 */ inset 0 0 0 .5px rgba(255,255,255,.5) !important; /* 发丝内描边 */ } /* 边缘反光环：更亮更厚 + 红蓝色散感 */ .bg-liquid::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.8px; z-index:2; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,205,228,.65) 18%, rgba(255,255,255,.12) 45%, rgba(200,228,255,.55) 73%, rgba(255,255,255,1) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* 鼠标跟随高光：默认隐藏，仅 JS 标记的「当前活动玻璃」(.bg-hl) 显示 → 全页同一时刻只有一个高光源（见 glass.js 第 2 节的全局单高光逻辑） */ .bg-liquid::before, .bg-frost::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none; background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55), transparent 60%); opacity:0; transition:opacity .3s var(--ease-glass); } .bg-hl::before{ opacity:1 !important; } .bg-liquid>*, .bg-frost>*{ position:relative; z-index:3; } /* 降级：非 Chromium / 不支持 SVG backdrop 时退化为毛玻璃 */ @supports not ((backdrop-filter:url(#liquid)) or (-webkit-backdrop-filter:url(#liquid))){ .bg-liquid{ -webkit-backdrop-filter:blur(10px) saturate(180%) brightness(1.06); backdrop-filter:blur(10px) saturate(180%) brightness(1.06); } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .bg-frost,.bg-liquid{ background:rgba(255,250,252,.92) !important; } } /* ---------- 5. 头图：恢复 Bravada 原生（全屏）高度 ---------- */ /* （此前为修「头图占满屏」做过限高，现按需求恢复到之前的原生高度，不再限制） */ body.bravada-glass #header-image-main{ overflow:hidden; } /* ---------- 6. 顶部标题栏 → 液态玻璃浮条（无菜单时也像样的"导航栏"） ---------- */ body.bravada-glass #site-header-main{ position:absolute !important; /* 保留 Bravada 的覆盖定位，勿被 .bg-liquid 改成 relative */ top:18px !important; padding:6px 26px !important; border-radius:var(--lg-radius) !important; } body.bravada-glass #site-header-main .site-header-bottom{ background:transparent !important; border:0 !important; } body.bravada-glass #site-title a, body.bravada-glass #site-title{ font-family:var(--font-serif); color:var(--ink) !important; font-weight:600; letter-spacing:.01em; } body.bravada-glass #site-description{ color:var(--ink-soft) !important; letter-spacing:.04em; } /* 主菜单（一旦你在"外观→菜单"分配菜单，这里就生效） */ body.bravada-glass #header-menu a, body.bravada-glass #access a{ position:relative; z-index:1; color:var(--ink) !important; font-weight:500; letter-spacing:.04em; background:transparent !important; border-radius:var(--lg-radius); transition:color .3s var(--ease-glass); } body.bravada-glass #header-menu a:hover, body.bravada-glass #header-menu .current-menu-item>a, body.bravada-glass #access a:hover{ color:var(--rose-700) !important; } body.bravada-glass #header-menu ul ul, body.bravada-glass #access .sub-menu{ background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,245,249,.55)) !important; -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,.55) !important; border-radius:var(--r-md) !important; box-shadow:var(--glass-shadow) !important; } /* JS 注入的滑动高亮胶囊 */ .bg-navpill{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; opacity:0; border-radius:var(--lg-radius); background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(244,182,204,.5)); box-shadow:var(--rim-light),0 3px 12px rgba(221,106,149,.28); transition:transform .4s var(--ease-glass),width .4s var(--ease-glass),height .4s var(--ease-glass),opacity .3s; } /* ---------- 7. Hero 标题（可爱艺术字，无玻璃板） ---------- */ body.bravada-glass #header-page-title{ text-align:center; } /* 去掉标题处的玻璃板 */ body.bravada-glass #header-page-title-inside{ display:inline-block; padding:18px 28px; margin:0 auto; background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } body.bravada-glass #header-page-title-inside::before, body.bravada-glass #header-page-title-inside::after{ display:none !important; } /* 可爱艺术字（站酷快乐体）+ 描边/投影保证在照片上清晰可读 */ /* 可爱艺术字（站酷快乐体）+ 描边/投影保证在照片上清晰可读注意：尺寸只设在容器上，内层 .cry-single/.cry-double 只给字体与颜色，避免干扰 Bravada 翻转动画 */ body.bravada-glass #header-page-title .entry-title{ font-family:var(--font-cute) !important; font-weight:400 !important; font-size:clamp(2.6rem,6.2vw,4.8rem) !important; line-height:1.25; letter-spacing:.02em; color:#fff !important; } body.bravada-glass #header-page-title .entry-title *{ font-family:var(--font-cute) !important; color:#fff !important; text-shadow:0 2px 12px rgba(158,59,99,.45), 0 8px 30px rgba(0,0,0,.32), 0 0 1px rgba(255,255,255,.6); } body.bravada-glass #header-page-title .byline, body.bravada-glass #header-page-title .byline *, body.bravada-glass #header-page-title .entry-meta{ font-family:var(--font-cute) !important; color:#fff !important; text-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 2px rgba(255,255,255,.5); } /* （已恢复 Bravada 动画标题：.cry-single/.cry-double 是翻转动画的正常双层结构，不做隐藏） */ /* 面包屑 */ body.bravada-glass #breadcrumbs-container{ color:var(--ink-soft); } body.bravada-glass #breadcrumbs .current{ color:var(--rose-600); } /* ---------- 8. 计数牌（[us_counter]，全局类） ---------- */ .bg-counter{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:26px 46px; margin:8px auto; text-align:center; border-radius:var(--r-lg) !important; } .bg-counter-lbl{ font-size:14px; letter-spacing:.2em; color:var(--rose-500); } .bg-counter-num{ font-family:var(--font-serif); font-weight:600; font-size:clamp(3rem,8vw,5rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .bg-counter-num small{ font-size:.34em; color:var(--ink-soft); margin-left:6px; letter-spacing:.05em; } .bg-counter-since{ font-size:13px; color:var(--ink-faint); letter-spacing:.08em; } /* ---------- 9. 内容卡片（液态玻璃 · 灯箱安全版） ---------- 关键：玻璃材质放到 ::before，卡片元素本身不加 backdrop-filter / transform / overflow:hidden。否则卡片会成为 position:fixed 原生灯箱的「包含块 / 裁剪框」，关闭后图片变空白。 */ body.bravada-glass #content, body.bravada-glass #main, body.bravada-glass .content-masonry, body.bravada-glass #content-masonry{ column-rule:none !important; -webkit-column-rule:none !important; -moz-column-rule:none !important; } body.bravada-glass article.post, body.bravada-glass article.page, body.bravada-glass .hentry, body.bravada-glass .type-post, body.bravada-glass .type-page{ position:relative; isolation:isolate; border-radius:var(--r-md) !important; padding:30px 34px !important; margin-bottom:28px !important; background:transparent !important; box-shadow:var(--glass-shadow) !important; transition:box-shadow .4s var(--ease-glass); } /* 玻璃层放到 ::before（置于内容之下），卡片元素保持「干净」液态玻璃质感：折射滤镜 + 顶部高光 + 中性偏白的较实底色（保证正文可读） */ body.bravada-glass article.post::before, body.bravada-glass article.page::before, body.bravada-glass .hentry::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:linear-gradient(155deg, rgba(255,255,255,.56), rgba(255,250,252,.42)); -webkit-backdrop-filter:url(#liquid); backdrop-filter:url(#liquid); border:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -7px 16px rgba(196,78,125,.06), inset 0 0 0 .5px rgba(255,255,255,.4); } /* 液态边缘反光环（含轻微色散感） */ body.bravada-glass article.post::after, body.bravada-glass article.page::after, body.bravada-glass .hentry::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.4px; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,210,230,.5) 22%, rgba(255,255,255,.1) 48%, rgba(205,228,255,.45) 74%, rgba(255,255,255,.92) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* hover 只改投影，不用 transform（避免再次成为 fixed 包含块 + 抖动） */ body.bravada-glass article.post:hover, body.bravada-glass .hentry:hover{ box-shadow:var(--glass-shadow-lg) !important; } /* 特色图单独圆角（卡片已不再 overflow:hidden） */ body.bravada-glass .responsive-featured-image, body.bravada-glass .post-thumbnail, body.bravada-glass article .featured{ border-radius:var(--r-sm); overflow:hidden; } body.bravada-glass .responsive-featured-image img, body.bravada-glass .post-thumbnail img{ border-radius:var(--r-sm); } body.bravada-glass .entry-title{ font-size:26px; } body.bravada-glass .entry-title a{ color:var(--ink) !important; } body.bravada-glass .entry-meta, body.bravada-glass .post-meta, body.bravada-glass .posted-on{ color:var(--ink-faint) !important; } body.bravada-glass blockquote{ border-left:3px solid var(--champagne) !important; background:rgba(255,255,255,.4); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:14px 20px; } body.bravada-glass .pagination a, body.bravada-glass .nav-links a, body.bravada-glass .page-numbers{ border-radius:var(--lg-radius) !important; } /* 正文图片圆角；并确保灯箱容器不被裁切 */ body.bravada-glass .entry-content img{ border-radius:var(--r-sm); } body.bravada-glass figure.wp-lightbox-container{ overflow:visible !important; } /* —— 灯箱根治：WP 原生灯箱用 Esc 关闭时不会复位原图 visibility（点关闭按钮才会），导致关闭后缩略图空白。强制原图始终可见——打开时由全屏遮罩(z-index 10万)盖住，无副作用。 —— */ body.bravada-glass figure.wp-lightbox-container img{ visibility:visible !important; } /* —— 灯箱安全：单篇文章/页面，去掉破坏 position:fixed 原生灯箱的祖先 transform / 裁剪 —— */ body.single article, body.single .hentry, body.single .entry-content, body.single #content, body.single #main, body.single #primary, body.page article, body.page .hentry, body.page .entry-content, body.page #content, body.page #main, body.page #primary{ transform:none !important; overflow:visible !important; } /* ---------- 10. 侧栏小工具（液态玻璃） ---------- */ body.bravada-glass .widget-container, body.bravada-glass .widget{ border-radius:var(--r-md) !important; padding:24px 26px !important; margin-bottom:24px !important; background:linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,239,246,.32)) !important; } body.bravada-glass .widget-title{ position:relative; padding-bottom:12px; margin-bottom:14px; font-size:19px; } body.bravada-glass .widget-title::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg,var(--champagne),transparent); } body.bravada-glass .widget li{ border-bottom:1px dashed rgba(196,78,125,.16); transition:color .25s,padding .25s; } body.bravada-glass .widget li:hover{ color:var(--rose-600); padding-left:6px; } body.bravada-glass .tagcloud a, body.bravada-glass .wp-block-tag-cloud a{ display:inline-block; margin:4px 4px 0; padding:6px 14px; border-radius:var(--lg-radius) !important; font-size:13px !important; color:var(--ink-soft) !important; } /* ---------- 11. 按钮 / 表单 / 搜索（液态玻璃） ---------- */ body.bravada-glass .more-link, body.bravada-glass .read-more, body.bravada-glass button, body.bravada-glass input[type="submit"], body.bravada-glass button[type="submit"], body.bravada-glass .wp-block-button__link, body.bravada-glass .btn{ border-radius:var(--lg-radius) !important; color:var(--ink) !important; font-family:var(--font-sans); font-weight:500; letter-spacing:.03em; border:1px solid rgba(255,255,255,.5) !important; transition:transform .3s var(--ease-glass),box-shadow .3s var(--ease-glass); cursor:pointer; } body.bravada-glass .more-link:hover, body.bravada-glass input[type="submit"]:hover, body.bravada-glass button:hover{ transform:translateY(-2px); } body.bravada-glass input[type="submit"]:active, body.bravada-glass button:active{ transform:scale(.97); } body.bravada-glass input[type="submit"], body.bravada-glass .wp-block-button__link{ color:#fff !important; background:linear-gradient(135deg,rgba(234,144,178,.95),rgba(221,106,149,.95)) !important; } body.bravada-glass input[type="text"], body.bravada-glass input[type="email"], body.bravada-glass input[type="url"], body.bravada-glass input[type="search"], body.bravada-glass input[type="password"], body.bravada-glass textarea, body.bravada-glass .search-field{ background:rgba(255,255,255,.5) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.6) !important; border-radius:var(--r-sm) !important; color:var(--ink) !important; box-shadow:var(--rim-light) !important; transition:box-shadow .3s var(--ease-glass); } body.bravada-glass input:focus, body.bravada-glass textarea:focus, body.bravada-glass .search-field:focus{ outline:none !important; box-shadow:var(--rim-light),0 0 0 4px rgba(234,144,178,.25) !important; } body.bravada-glass ::placeholder{ color:var(--ink-faint); } body.bravada-glass .search-field{ border-radius:var(--lg-radius) !important; } /* ---------- 12. 页脚（毛玻璃） ---------- */ /* 隐藏空的页脚小工具区 #colophon（那个多余的空框）。以后若要加页脚小工具想恢复，删掉这一行 */ body.bravada-glass #colophon{ display:none !important; } /* 去掉底部「动力源自 Bravada & WordPress.」（CSS 兜底，配合 functions.php 的 remove_action） */ body.bravada-glass #footer-bottom{ display:none !important; } body.bravada-glass #footer{ border-radius:var(--r-lg) var(--r-lg) 0 0 !important; padding:42px 28px !important; margin-top:30px; } body.bravada-glass #site-copyright{ color:var(--ink-faint); } body.bravada-glass #footer a{ color:var(--rose-600) !important; } /* ---------- 13. 回到顶部（液态圆钮） ---------- */ body.bravada-glass #toTop{ width:52px !important; height:52px !important; border-radius:50% !important; color:var(--rose-600) !important; display:flex; align-items:center; justify-content:center; } /* ---------- 14. 预加载心形 ---------- */ body.bravada-glass .cryout-preloader{ background:var(--rose-50) !important; } body.bravada-glass .cryout-preloader .bounce1, body.bravada-glass .cryout-preloader .bounce2{ background:var(--rose-400) !important; } /* ---------- 15. 可达性 ---------- */ body.bravada-glass a:focus-visible, body.bravada-glass button:focus-visible, body.bravada-glass input:focus-visible{ outline:2px solid var(--rose-500); outline-offset:2px; } /* ---------- 16. 减少动效 ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } } /* ---------- 17. （已移除深色模式：仅保留 light mode） ---------- */ /* ---------- 18. 响应式 ---------- */ @media (max-width:782px){ :root{ --r-md:18px; --r-lg:24px; } body.bravada-glass #site-header-main{ top:8px !important; padding:6px 16px !important; } body.bravada-glass #header-page-title-inside{ padding:14px 18px; } body.bravada-glass article.post, body.bravada-glass .hentry{ padding:22px 20px !important; } } /* ---------- 19. 温馨可爱：背景漂浮的心 ---------- */ .bg-heart{ position:fixed; z-index:-1; bottom:-44px; pointer-events:none; user-select:none; color:rgba(234,144,178,.28); text-shadow:0 2px 8px rgba(234,144,178,.25); animation:bg-heart-float linear infinite; will-change:transform,opacity; } @keyframes bg-heart-float{ 0%{ transform:translateY(0) rotate(-8deg) scale(.9); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateY(-112vh) rotate(14deg) scale(1.05); opacity:0; } } @media (prefers-reduced-motion:reduce){ .bg-heart{ display:none; } } /* ====================================================================== 20. 大厂级精修（基于真实 DOM：.article-inner / .post-thumbnail-container / .entry-after-image / .entry-sticky / .featured-image-overlay 等） ====================================================================== */ /* 20.1 背景：更克制高级（雾粉 + 奶霜 + 微薰衣灰，降低糖果感） */ body.bravada-glass{ background: radial-gradient(1200px 860px at 50% -10%, rgba(245,214,224,.66), transparent 60%), radial-gradient(760px 640px at 95% 0%, rgba(244,227,214,.40), transparent 55%), radial-gradient(880px 800px at 3% 30%, rgba(224,216,234,.40), transparent 55%), linear-gradient(180deg, #FCF6F4 0%, #F6E7EC 100%) !important; } /* 20.2 Hero 渐变罩层：底部加深让标题更通透、顶部轻压让浮动导航更清晰 */ body.bravada-glass #header-image-main{ position:relative; } body.bravada-glass #header-overlay{ position:absolute !important; inset:0 !important; pointer-events:none; z-index:1; background: linear-gradient(180deg, rgba(38,20,30,.32) 0%, rgba(38,20,30,0) 26%), linear-gradient(0deg, rgba(54,26,42,.55) 0%, rgba(54,26,42,0) 48%) !important; } body.bravada-glass #header-page-title{ z-index:3; } body.bravada-glass #header-page-title .byline{ opacity:.96; margin-top:.45em; } /* 20.3 卡片排版：标题层级、正文行高、留白节奏 */ body.bravada-glass .entry-sticky{ display:inline-block; margin-bottom:12px; background:linear-gradient(135deg,rgba(234,144,178,.95),rgba(221,106,149,.95)) !important; color:#fff !important; border-radius:999px !important; padding:4px 13px !important; font-size:12px !important; letter-spacing:.1em; box-shadow:0 5px 16px rgba(221,106,149,.3); } body.bravada-glass .entry-header{ margin-bottom:8px; } body.bravada-glass .entry-title{ font-size:clamp(22px,2.3vw,28px) !important; line-height:1.32 !important; letter-spacing:.004em; } body.bravada-glass .entry-title a{ transition:color .25s var(--ease-glass); } body.bravada-glass .entry-title a:hover{ color:var(--rose-600) !important; } body.bravada-glass .entry-content{ font-size:16.5px; line-height:1.9; } body.bravada-glass .hentry{ margin-bottom:32px !important; } /* 20.4 特色图：盖图 cover + 圆角 + 悬停轻微放大（精致 Ken-Burns） */ body.bravada-glass .post-thumbnail-container{ position:relative; border-radius:var(--r-sm); overflow:hidden; } body.bravada-glass .post-featured-image, body.bravada-glass .responsive-featured-image{ display:block; } body.bravada-glass .responsive-featured-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-glass); } body.bravada-glass .hentry:hover .responsive-featured-image img{ transform:scale(1.045); } /* 特色图底部极轻渐变，让图上角标更清晰 */ body.bravada-glass .featured-image-overlay{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(40,20,32,.28) 0%, transparent 36%), linear-gradient(180deg, rgba(40,20,32,.18) 0%, transparent 28%); } /* 20.5 图上角标（评论 .comments-link 左上 / 分类 .bl_categ 左下）→ 文字玻璃药丸根因：bravada-comment-icons 模式把文字用 width:0 做了 sr-only 隐藏 → 药丸是空的。修法：取消隐藏让文字显示，自适应宽度、留足边距与内边距，纯文字更清晰。 */ body.bravada-glass .post-thumbnail-container{ position:relative; } body.bravada-glass .post-thumbnail-container .comments-link, body.bravada-glass .post-thumbnail-container .bl_categ{ position:absolute !important; z-index:3 !important; display:inline-block !important; width:auto !important; max-width:none !important; overflow:visible !important; white-space:nowrap; background:rgba(255,255,255,.82) !important; -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); border:1px solid var(--hairline) !important; border-radius:999px !important; padding:6px 14px !important; box-shadow:0 5px 16px rgba(196,78,125,.18) !important; font-size:12px !important; line-height:1.3 !important; color:var(--ink) !important; } body.bravada-glass .post-thumbnail-container .comments-link{ top:14px !important; left:14px !important; right:auto !important; bottom:auto !important; } body.bravada-glass .post-thumbnail-container .bl_categ{ bottom:14px !important; left:14px !important; top:auto !important; right:auto !important; } /* 取消 Bravada 对文字链接的 sr-only 隐藏，让文字显示 */ body.bravada-glass .post-thumbnail-container .comments-link > a, body.bravada-glass .post-thumbnail-container .bl_categ .category-metas a, body.bravada-glass .post-thumbnail-container .bl_categ > a{ position:static !important; width:auto !important; height:auto !important; clip:auto !important; overflow:visible !important; font-size:12px !important; color:var(--ink) !important; background:transparent !important; padding:0 !important; box-shadow:none !important; white-space:nowrap; } /* 纯文字药丸更干净，隐藏小图标 */ body.bravada-glass .post-thumbnail-container .icon-metas{ display:none !important; } /* 20.6 内容下方 meta / 工具行：细分隔线 + 小号柔和 */ body.bravada-glass .entry-meta.entry-utility{ margin-top:16px; padding-top:13px; border-top:1px solid rgba(196,78,125,.12); font-size:13px; letter-spacing:.02em; color:var(--ink-faint) !important; } body.bravada-glass .entry-meta.entry-utility a{ color:var(--rose-600) !important; } /* 20.7 评论区/表单：标题与提交按钮节奏 */ body.bravada-glass #respond .comment-reply-title{ font-size:22px; margin-bottom:14px; } body.bravada-glass #commentform label{ color:var(--ink-soft); } /* FIN */