From e2b5018fc197d2dfcf474ba300563b2e89610946 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Wed, 19 Aug 2026 17:27:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=A6=96=E9=A1=B5=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=85=B1=E4=BA=AB=E8=83=8C=E6=99=AF=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/frontend/base.css                    | 9 +++++++++
 inc/helpers/aksrt-icon-cards.php                | 4 +++-
 tests/widget-system/icon-card-contract.test.cjs | 8 +++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/assets/css/frontend/base.css b/assets/css/frontend/base.css
index 35dbda7e..2db88dd4 100644
--- a/assets/css/frontend/base.css
+++ b/assets/css/frontend/base.css
@@ -37,6 +37,15 @@ body {
   background-color: var(--surface-page);
 }
 
+/* Shared horizontal icon-card contract.
+ * Header components and widget areas use different layout wrappers, but the
+ * card itself must retain the compact Zibll proportions in every context. */
+.icon-cover-card.aksrt-icon-cover-card {
+  padding: 10px;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
 /* zibll compat: global link composite transition */
 a[href] {
   transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
diff --git a/inc/helpers/aksrt-icon-cards.php b/inc/helpers/aksrt-icon-cards.php
index 5a512a92..e4be12b1 100644
--- a/inc/helpers/aksrt-icon-cards.php
+++ b/inc/helpers/aksrt-icon-cards.php
@@ -280,7 +280,9 @@ if (!function_exists('aksrt_icon_cover_card')) :
 				// zibll: <a class="main-color" [target] href="...">
 				$html .= '<a class="main-color" ' . ($tgt !== '' ? ltrim($tgt) . ' ' : '') . 'href="' . esc_url($url) . '">';
 			}
-			$html .= '<div class="icon-cover-card flex ac ' . esc_attr((string) $args['class']) . '">';
+			// Keep every horizontal icon card on the same compact visual contract,
+			// regardless of the page-specific wrapper that renders it.
+			$html .= '<div class="icon-cover-card aksrt-icon-cover-card flex ac ' . esc_attr((string) $args['class']) . '">';
 			$html .= $icon;
 			$html .= $text !== '' ? '<div class="icon-cover-desc ml10 flex1 px12-sm"> ' . $text . '</div>' : '';
 			$html .= '</div>';
diff --git a/tests/widget-system/icon-card-contract.test.cjs b/tests/widget-system/icon-card-contract.test.cjs
index 108850ab..ab28e6ce 100644
--- a/tests/widget-system/icon-card-contract.test.cjs
+++ b/tests/widget-system/icon-card-contract.test.cjs
@@ -14,20 +14,22 @@ test('icon card renderers keep vertical and horizontal Zibll DOM contracts separ
   const header = read('inc/helpers/homepage/header-components.php');
 
   assert.match(helper, /<div class="icon-card /);
-  assert.match(helper, /<div class="icon-cover-card flex ac /);
+  assert.match(helper, /<div class="icon-cover-card aksrt-icon-cover-card flex ac /);
   assert.match(helper, /icon-cover-icon badg cir/);
   assert.match(helper, /icon-cover-desc ml10 flex1 px12-sm/);
-  assert.doesNotMatch(helper, /aksrt-icon-cover-card/);
+  assert.match(helper, /aksrt-icon-cover-card/);
   assert.match(widgets, /'customize_icon' => \$card\['customize_icon'\] \?\? ''/);
   assert.match(widgets, /'custom_icon'\s+=> \$card\['custom_icon'\] \?\? ''/);
   assert.match(widgets, /'icon_image'\s+=> \$card\['icon_image'\] \?\? ''/);
   assert.match(header, /empty\(\$card\['custom_icon'\]\)/);
 });
 
-test('homepage horizontal cards only use Zibll surface and responsive padding rules', () => {
+test('homepage horizontal cards use the shared compact card contract and retain Zibll responsive rules', () => {
   const css = read('assets/css/frontend/header-components/dark-theme.css');
+  const baseCss = read('assets/css/frontend/base.css');
   const widgetCss = read('assets/widgets/frontend.css');
 
+  assert.match(baseCss, /\.icon-cover-card\.aksrt-icon-cover-card\s*\{\s*padding:\s*10px;\s*font-size:\s*16px;/);
   assert.match(css, /\.header-slider-card \.icon-cover-card\.zib-widget \{\s*padding: 10px;/);
   assert.match(css, /\.header-slider-card \.icon-cover-card\.padding-10 \{\s*padding: 2px;/);
   assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon\.badg\.cir/);