sxbh_admin/sxbh.ltd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sxbh-ui-p0): a11y + self-host hero (P0 x5)

Browse Source 
P0-1 define --teal-600,--amber-600 (were 0-def); P0-2 global :focus-visible (was 0 hits); P0-3 contrast 18 pairs recolored all >=4.5(text)/3.0(ui); P0-4 de-pexels hero -> /images/hero-home.webp (webp 84.9KB); P0-5 scope .fade-in under html.js + inline js class. Whitelist: style.css,index.html,images/hero-home.webp.
This commit is contained in:
Hermes CI Fix
2026-09-28 17:11:59 +08:00
parent b9eb7ee224
commit fa4c16a252
3 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
images/hero-home.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

index.html
+2 -1
View File
@@ -1,4 +1,5 @@
<html lang="zh-CN"><head> <html lang="zh-CN"><head>
<script>document.documentElement.className+=' js';</script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>陕西博海网络科技：AI与CMA驱动的企业数字化转型服务商</title> <title>陕西博海网络科技：AI与CMA驱动的企业数字化转型服务商</title>
@@ -481,7 +482,7 @@
<!-- CONTACT --> <!-- CONTACT -->
<section class="contact-section" id="contact"> <section class="contact-section" id="contact">
<div class="section-inner"> <div class="section-inner">
<div class="section-label fade-in" style="color:rgba(255,255,255,.4);"> <div class="section-label fade-in" style="color:rgba(255,255,255,.72);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline> <polyline points="22,6 12,13 2,6"></polyline>
style.css
+24 -18
View File
@@ -7,9 +7,11 @@ html { scroll-behavior:smooth; }
--navy-800:#0f1f4a; --navy-800:#0f1f4a;
--navy-700:#1a3380; --navy-700:#1a3380;
--teal-500:#06b6d4; --teal-500:#06b6d4;
--teal-600:#0e7490;
--teal-400:#22d3ee; --teal-400:#22d3ee;
--amber-400:#fbbf24; --amber-400:#fbbf24;
--amber-500:#f59e0b; --amber-500:#f59e0b;
--amber-600:#b45309;
--white:#ffffff; --white:#ffffff;
--gray-50:#f8fafc; --gray-50:#f8fafc;
--gray-100:#f1f5f9; --gray-100:#f1f5f9;
@@ -42,6 +44,10 @@ body {
-webkit-font-smoothing:antialiased; -webkit-font-smoothing:antialiased;
} }
/* ===== P0-2 全局键盘焦点可见（浅底/深底均可辨）===== */
:focus-visible { outline:3px solid var(--teal-600); outline-offset:2px; border-radius:3px; }
.hero :focus-visible, .contact-section :focus-visible, footer :focus-visible { outline-color:var(--amber-400); }
/* ===== SVG icon helper ===== */ /* ===== SVG icon helper ===== */
.icon-svg { display:inline-flex; align-items:center; justify-content:center; } .icon-svg { display:inline-flex; align-items:center; justify-content:center; }
.icon-svg svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .icon-svg svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@@ -71,7 +77,7 @@ header {
display:flex; align-items:center; justify-content:center; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:16px; font-weight:700; color:#fff; font-size:16px; font-weight:700;
} }
.logo span { color:var(--gray-400); font-weight:400; font-size:14px; } .logo span { color:var(--gray-500); font-weight:400; font-size:14px; }
nav { display:flex; gap:36px; } nav { display:flex; gap:36px; }
nav a { nav a {
color:var(--gray-600); text-decoration:none; font-size:14px; color:var(--gray-600); text-decoration:none; font-size:14px;
@@ -97,7 +103,7 @@ nav a:hover::after { transform:scaleX(1); }
position:relative; overflow:hidden; color:var(--white); position:relative; overflow:hidden; color:var(--white);
background: background:
linear-gradient(135deg,rgba(10,19,46,.92) 0%,rgba(15,31,74,.75) 50%,rgba(26,51,128,.6) 100%), linear-gradient(135deg,rgba(10,19,46,.92) 0%,rgba(15,31,74,.75) 50%,rgba(26,51,128,.6) 100%),
url('https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1920') url('/images/hero-home.webp')
center/cover no-repeat fixed; center/cover no-repeat fixed;
} }
.hero::before { .hero::before {
@@ -157,7 +163,7 @@ section { padding:80px 24px; }
.section-label { .section-label {
display:inline-flex; align-items:center; gap:6px; display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; letter-spacing:2px; font-size:12px; font-weight:600; letter-spacing:2px;
text-transform:uppercase; color:var(--teal-500); margin-bottom:8px; text-transform:uppercase; color:var(--teal-600); margin-bottom:8px;
} }
.section-label svg { width:14px; height:14px; } .section-label svg { width:14px; height:14px; }
.section-title { .section-title {
@@ -166,7 +172,7 @@ section { padding:80px 24px; }
color:var(--navy-800); margin-bottom:10px; color:var(--navy-800); margin-bottom:10px;
} }
.section-desc { .section-desc {
font-size:16px; color:var(--gray-500); font-size:16px; color:var(--gray-600);
max-width:560px; margin-bottom:44px; line-height:1.7; max-width:560px; margin-bottom:44px; line-height:1.7;
} }
@@ -193,7 +199,7 @@ section { padding:80px 24px; }
.service-tags { display:flex; flex-wrap:wrap; gap:6px; } .service-tags { display:flex; flex-wrap:wrap; gap:6px; }
.service-tags span { .service-tags span {
font-size:12px; padding:3px 10px; border-radius:6px; font-size:12px; padding:3px 10px; border-radius:6px;
background:var(--gray-100); color:var(--gray-500); background:var(--gray-100); color:var(--gray-600);
} }
/* Link wrapper around service card */ /* Link wrapper around service card */
@@ -227,7 +233,7 @@ section { padding:80px 24px; }
.product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; } .product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.product-tags span { .product-tags span {
font-size:12px; padding:3px 10px; border-radius:6px; font-size:12px; padding:3px 10px; border-radius:6px;
background:var(--gray-100); color:var(--gray-500); background:var(--gray-100); color:var(--gray-600);
} }
.product-btn { .product-btn {
display:inline-flex; align-items:center; gap:6px; display:inline-flex; align-items:center; gap:6px;
@@ -287,14 +293,14 @@ section { padding:80px 24px; }
} }
.perspective-card .cat { .perspective-card .cat {
font-size:11px; font-weight:600; letter-spacing:1px; font-size:11px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; color:var(--teal-500); margin-bottom:6px; text-transform:uppercase; color:var(--teal-600); margin-bottom:6px;
} }
.perspective-card h3 { .perspective-card h3 {
font-size:16px; font-weight:600; color:var(--navy-800); font-size:16px; font-weight:600; color:var(--navy-800);
margin-bottom:8px; line-height:1.4; margin-bottom:8px; line-height:1.4;
} }
.perspective-card .meta { .perspective-card .meta {
font-size:12px; color:var(--gray-400); margin-top:auto; font-size:12px; color:var(--gray-500); margin-top:auto;
} }
.perspective-link { .perspective-link {
display:flex; align-items:center; gap:6px; display:flex; align-items:center; gap:6px;
@@ -356,7 +362,7 @@ section { padding:80px 24px; }
} }
.contact-item .icon svg { width:20px; height:20px; } .contact-item .icon svg { width:20px; height:20px; }
.contact-item h4 { .contact-item h4 {
font-size:13px; font-weight:500; color:rgba(255,255,255,.45); font-size:13px; font-weight:500; color:rgba(255,255,255,.72);
margin-bottom:6px; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; letter-spacing:1px; text-transform:uppercase;
} }
.contact-item .value { .contact-item .value {
@@ -364,17 +370,17 @@ section { padding:80px 24px; }
} }
.contact-item .value a { color:var(--amber-400); text-decoration:none; } .contact-item .value a { color:var(--amber-400); text-decoration:none; }
.contact-item .value a:hover { text-decoration:underline; } .contact-item .value a:hover { text-decoration:underline; }
.contact-item .value .divider { color:rgba(255,255,255,.2); margin:0 10px; font-size:14px; } .contact-item .value .divider { color:rgba(255,255,255,.5); margin:0 10px; font-size:14px; }
.contact-item .sub { font-size:13px; color:rgba(255,255,255,.3); margin-top:4px; } .contact-item .sub { font-size:13px; color:rgba(255,255,255,.62); margin-top:4px; }
/* ===== FOOTER ===== */ /* ===== FOOTER ===== */
footer { footer {
background:#060d1f; color:rgba(255,255,255,.35); background:#060d1f; color:rgba(255,255,255,.6);
padding:32px 24px; text-align:center; font-size:13px; padding:32px 24px; text-align:center; font-size:13px;
} }
footer a { color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; } footer a { color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--teal-400); } footer a:hover { color:var(--teal-400); }
footer .sep { margin:0 10px; color:rgba(255,255,255,.1); } footer .sep { margin:0 10px; color:rgba(255,255,255,.5); }
/* ===== CONSULT MODAL ===== */ /* ===== CONSULT MODAL ===== */
.consult-overlay { .consult-overlay {
@@ -397,7 +403,7 @@ footer .sep { margin:0 10px; color:rgba(255,255,255,.1); }
.consult-close { .consult-close {
position:absolute; top:12px; right:16px; position:absolute; top:12px; right:16px;
background:none; border:none; background:none; border:none;
font-size:28px; color:var(--gray-400); font-size:28px; color:var(--gray-500);
cursor:pointer; line-height:1; cursor:pointer; line-height:1;
} }
.consult-close:hover { color:var(--gray-600); } .consult-close:hover { color:var(--gray-600); }
@@ -431,7 +437,7 @@ footer .sep { margin:0 10px; color:rgba(255,255,255,.1); }
} }
.consult-submit:hover { opacity:.9; } .consult-submit:hover { opacity:.9; }
.consult-submit:disabled { opacity:.5; cursor:not-allowed; } .consult-submit:disabled { opacity:.5; cursor:not-allowed; }
.consult-tip { text-align:center; font-size:13px; color:var(--gray-400); margin-top:12px; } .consult-tip { text-align:center; font-size:13px; color:var(--gray-500); margin-top:12px; }
.consult-tip strong { color:var(--teal-600); } .consult-tip strong { color:var(--teal-600); }
.consult-success { text-align:center; padding:20px 0; } .consult-success { text-align:center; padding:20px 0; }
.consult-success .success-icon { .consult-success .success-icon {
@@ -459,8 +465,8 @@ footer .sep { margin:0 10px; color:rgba(255,255,255,.1); }
.float-btn:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 28px rgba(6,182,212,.45); } .float-btn:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 28px rgba(6,182,212,.45); }
/* ===== ANIMATIONS ===== */ /* ===== ANIMATIONS ===== */
.fade-in { opacity:0; transform:translateY(30px); transition:all .7s ease-out; } html.js .fade-in { opacity:0; transform:translateY(30px); transition:all .7s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); } html.js .fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in-d1 { transition-delay:.08s; } .fade-in-d1 { transition-delay:.08s; }
.fade-in-d2 { transition-delay:.16s; } .fade-in-d2 { transition-delay:.16s; }
.fade-in-d3 { transition-delay:.24s; } .fade-in-d3 { transition-delay:.24s; }