/* ========================================================================== BFL — 站点补丁 (bfl-site-fixes.css) -------------------------------------------------------------------------- Blocksy 主题和 Kadence Blocks 的官方样式现在由 css/vendor/ 提供， 本文件只保留官方包【不包含】的三类内容： 1. 主题调色板变量 —— WordPress 运行时由 Blocksy 输出到页面内联样式， 静态站没有这一步，需要在这里补上 2. 扒站过程造成的损坏的修正 3. 本站特有的版式意图 加载顺序：vendor/* → 本文件 → bfl_index_new.styles.css ========================================================================== */ /* -------------------------------------------------------------------------- 1. 主题调色板与全局变量 原本由 Blocksy 在 内联输出，扒站时没带下来。 页面里大量 var(--theme-palette-color-N) 依赖它们。 -------------------------------------------------------------------------- */ :root { --theme-palette-color-1: #035FD6; --theme-palette-color-2: #03469e; --theme-palette-color-3: #519cff; --theme-palette-color-4: #000000; --theme-palette-color-5: #feffff; --theme-palette-color-6: #519cff; --theme-palette-color-7: #FAFBFC; --theme-palette-color-8: #ffffff; --theme-text-color: var(--theme-palette-color-8); --theme-link-initial-color: var(--theme-palette-color-8); --theme-link-hover-color: var(--theme-palette-color-6); --theme-border-color: rgba(255, 255, 255, .12); --theme-content-spacing: 1.5em; --theme-container-max-width: 1290px; --theme-content-width: 1290px; --theme-normal-container-max-width: 1290px; --theme-block-max-width: 1290px; --theme-block-wide-max-width: 1650px; --theme-content-vertical-spacing: 60px; --theme-font-family: 'Zalando Sans SemiExpanded', -apple-system, 'Segoe UI', system-ui, sans-serif; --theme-font-weight: 400; --theme-font-size: 16px; --theme-line-height: 1.65; --theme-button-text-initial-color: #ffffff; --theme-button-background-initial-color: var(--theme-palette-color-1); --theme-button-background-hover-color: var(--theme-palette-color-2); --theme-button-border-radius: 8px; --theme-button-padding: 12px 26px; /* Kadence 的间距与间隙刻度（插件通过 WordPress 主题 json 输出，静态站需补） */ --global-kb-spacing-xxs: 0.5rem; --global-kb-spacing-xs: 1rem; --global-kb-spacing-sm: 1.5rem; --global-kb-spacing-md: 2rem; --global-kb-spacing-lg: 3rem; --global-kb-spacing-xl: 4rem; --global-kb-spacing-xxl: 5rem; --global-kb-spacing-3xl: 6.5rem; --global-kb-spacing-4xl: 8rem; --global-kb-gap-none: 0rem; --global-kb-gap-xs: 0.5rem; --global-kb-gap-sm: 1rem; --global-kb-gap-md: 2rem; --global-kb-gap-lg: 3rem; --global-row-gutter-sm: 1rem; --global-row-gutter-md: 2rem; --global-row-gutter-lg: 3rem; } /* Blocksy 的基础排版通常也由运行时输出 */ body { background: var(--theme-palette-color-4, #000); color: var(--theme-text-color, #fff); font-family: var(--theme-font-family); font-size: var(--theme-font-size); line-height: var(--theme-line-height); -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 2. 扒站损坏的修正 -------------------------------------------------------------------------- */ /* WordPress 的 alignfull。运行时由主题按内容容器输出，静态站没有， 缺了它顶层行会被限制在 1290px 的内容容器里，撑不到设计稿的 1650px。 */ .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } /* alignfull 只对顶层内容有效。嵌套在列里的元素若带 alignfull， calc(50% - 50vw) 里的 50% 按窄列算、50vw 按视口算， 相减得到几百 px 的负边距，整块被拽出栏外盖住相邻列。 本站有 11 处这样的嵌套 alignfull。 */ .kt-inside-inner-col .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; } /* 画廊轮播里，逐区块样式只锁了高度（height:200px）没锁宽度， 宽幅 logo 会用自然宽度（1032px）横向拉伸。 用绝对边界封顶，与父级尺寸无关；想调 logo 大小改这两个值。 */ .kt-blocks-carousel .kb-gallery-figure img, .kt-blocks-carousel .kb-gal-image-radius img { width: auto !important; height: auto !important; max-width: 200px !important; max-height: 90px !important; object-fit: contain !important; } /* -------------------------------------------------------------------------- 3. 大型下拉菜单（mega menu） -------------------------------------------------------------------------- */ /* 官方 Blocksy 免费版不含 mega-menu 模块（那是 Companion Pro 的）， 所以面板宽度用的是普通子菜单的默认值（实测只有 200px）， 而里面的 Kadence 行是 alignfull，会撑成 100vw（实测 1890px）， 结果内容从 -152px 开始、溢出到屏幕左侧。 下面三条分别解决：面板定位、面板宽度、内容宽度。 */ /* 相对页头容器居中，而不是相对触发它的
  • 。 靠右的菜单项若以自身为基准，面板会冲出视口右边。 */ .ct-header [data-row] > .ct-container, .ct-header [data-row] > .ct-container-full { position: relative; } .ct-header li[class*="ct-mega-menu"] { position: static; } .ct-header li[class*="ct-mega-menu"] > ul.sub-menu, .ct-header li[class*="ct-mega-menu"]:hover > ul.sub-menu, .ct-header li[class*="ct-mega-menu"]:focus-within > ul.sub-menu { position: absolute !important; /* 面板要落在页头容器【下方】。缺了 top，它会贴到定位祖先的顶边， 整块盖住导航本身（实测 top=0）。 */ top: 100% !important; bottom: auto !important; margin-top: 8px; left: 50% !important; right: auto !important; /* transform 也要 !important —— 悬停时官方规则会覆盖它， 导致居中失效、面板整体右移并溢出视口 */ transform: translateX(-50%) !important; width: min(1200px, calc(100vw - 64px)) !important; min-width: 0 !important; max-width: none !important; padding: 28px 32px; border-radius: 24px; box-sizing: border-box; } /* 面板内的 alignfull 必须失效 —— 它的 width:100vw 会把内容撑成整个视口宽 */ .ct-header ul.sub-menu .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* 面板内的行不需要再限宽和加左右留白 */ .ct-header ul.sub-menu .kt-row-column-wrap { max-width: none !important; padding-inline: 0 !important; padding-block: 0 !important; width: 100% !important; } /* 面板内的列允许换行收缩，避免内容被挤扁 */ .ct-header ul.sub-menu .wp-block-kadence-column { min-width: 0; } /* -------------------------------------------------------------------------- 4. 本站特有版式 -------------------------------------------------------------------------- */ /* 合作方 logo 轮播应叠在首屏视频底部。 逐区块样式里 ≤1024px 是 -170px、≤767px 是 -150px，桌面却写成 0px， 于是桌面下掉到视频下方另起一条黑带。 轮播行高 194px、首屏 padding-bottom 24px，194-170=24 正好吻合。 调整叠入深度改 --bfl-logo-overlap（越负叠得越深）。 */ @media (min-width: 1025px) { :root { --bfl-logo-overlap: -170px; } .kb-row-layout-wrap.wp-block-kadence-rowlayout[class*="kb-row-layout-id2538_6d095a"] { margin-top: var(--bfl-logo-overlap) !important; position: relative; z-index: 2; } } /* 跳转链接：聚焦时才显形 */ .skip-link:focus { position: fixed; top: 0; left: 0; z-index: 999; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--theme-palette-color-1); color: #fff; border-radius: 0 0 8px 0; }