amit/quantum-website-2026
1
0
Fork 0
mirror of https://github.com/thecyberlearn/quantum-website-2026.git synced 2026-10-17 13:29:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: convert trust band to seamless marquee, add 3 more badges

Browse Source 
Rename heading to "Accreditations & Recognitions". Add UN SDG, Montreal
Declaration signatory, and Pledge 1% badges. Replace static one-line strip
with a CSS-only infinite marquee (pause-on-hover, edge fade mask,
prefers-reduced-motion fallback).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Amit Rana 2026-08-30 13:59:38 +05:30
parent fc9b1ac777
commit 74c0585365
4 changed files with 83 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/montreal-signatory-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/pledge1percent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
img/un-sdg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

111
index.html
View File

@ -753,28 +753,39 @@
.c-promise-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.c-promise-text { font-size: 14px; color: var(--gray500); line-height: 1.65; }
/* ════════════════════════════════ TRUST BAND */
/* ════════════════════════════════ TRUST BAND (marquee) */
.trust-band {
background: var(--gray50);
padding: 72px 0;
border-top: 1px solid var(--gray200);
overflow: hidden;
}
.trust-band-label {
text-align: center; font-size: 13px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gray500); margin-bottom: 44px;
}
.trust-band-logos {
display: flex; flex-wrap: nowrap;
align-items: stretch; justify-content: center;
gap: 20px; max-width: 1160px; margin: 0 auto;
overflow-x: auto; padding: 4px 24px 12px;
-webkit-overflow-scrolling: touch;
.trust-marquee {
display: block; width: 100%; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-marquee-track {
display: flex; flex-wrap: nowrap; align-items: stretch;
width: max-content;
animation: trust-scroll 60s linear infinite;
}
.trust-marquee:hover .trust-marquee-track { animation-play-state: paused; }
.trust-marquee-group { display: flex; flex-wrap: nowrap; align-items: stretch; flex: 0 0 auto; }
@keyframes trust-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.trust-badge {
display: inline-flex; align-items: center; justify-content: center;
background: var(--white); border: 1px solid var(--gray200);
border-radius: 18px; padding: 12px 14px; min-height: 168px; flex: 0 0 auto;
border-radius: 18px; padding: 12px 16px; min-height: 168px;
margin: 0 12px; flex: 0 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
@ -791,12 +802,17 @@
}
@media (max-width: 700px) {
.trust-band { padding: 48px 0; }
.trust-band-logos { gap: 14px; justify-content: flex-start; padding: 4px 20px 12px; }
.trust-badge { padding: 10px 12px; min-height: 124px; border-radius: 14px; }
.trust-badge { padding: 10px 12px; min-height: 124px; margin: 0 8px; border-radius: 14px; }
.trust-badge--square img { height: 96px; }
.trust-badge--wide img { height: 54px; }
.trust-badge--card img { height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
.trust-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
.trust-marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
.trust-marquee-group { flex-wrap: wrap; justify-content: center; }
.trust-marquee-group[aria-hidden="true"] { display: none; }
}
/* ════════════════════════════════ FOOTER */
.footer { background: var(--navy); padding: 72px 0 32px; }
@ -1405,25 +1421,64 @@
</main>
<!-- ══════════════════════════════════════ TRUST BAND -->
<section class="trust-band" aria-label="Security, compliance and recognition">
<section class="trust-band" aria-label="Accreditations and recognitions">
<div class="container">
<p class="trust-band-label">Security, Compliance &amp; Recognition</p>
<div class="trust-band-logos">
<span class="trust-badge trust-badge--square" title="CSA STAR Level One — Self-Assessment (Security, Trust, Assurance &amp; Risk)">
<img src="img/csa-star-level-one.png" alt="CSA STAR Level One — Self-Assessment" loading="lazy" width="120" height="120" />
</span>
<span class="trust-badge trust-badge--square" title="CSA AI Trustworthy Pledge 2026">
<img src="img/ai-trustworthy-pledge-2026.png" alt="Cloud Security Alliance — AI Trustworthy Pledge 2026" loading="lazy" width="120" height="120" />
</span>
<a class="trust-badge trust-badge--square" href="https://dub.ai/ai-seal" target="_blank" rel="noopener" title="Dubai AI Seal — Verified AI Supplier (Tier E)">
<img src="img/dubai-ai-seal.png" alt="Dubai AI Seal — Verified AI Supplier" loading="lazy" width="120" height="120" />
</a>
<span class="trust-badge trust-badge--card" title="Claude Partner Network — Official Services Partner">
<img src="img/claude-partner-badge-v2.png" alt="Claude Partner Network — Official Services Partner" loading="lazy" width="188" height="104" />
</span>
<a class="trust-badge trust-badge--wide" href="https://www.onetcenter.org" target="_blank" rel="noopener" title="O*NET in it — U.S. Department of Labor / Employment and Training Administration">
<img src="img/onet-in-it.png" alt="O*NET in it" loading="lazy" width="139" height="64" />
</a>
<p class="trust-band-label">Accreditations &amp; Recognitions</p>
</div>
<div class="trust-marquee">
<div class="trust-marquee-track">
<div class="trust-marquee-group">
<span class="trust-badge trust-badge--square" title="CSA STAR Level One — Self-Assessment (Security, Trust, Assurance &amp; Risk)">
<img src="img/csa-star-level-one.png" alt="CSA STAR Level One — Self-Assessment" loading="lazy" width="120" height="120" />
</span>
<span class="trust-badge trust-badge--square" title="CSA AI Trustworthy Pledge 2026">
<img src="img/ai-trustworthy-pledge-2026.png" alt="Cloud Security Alliance — AI Trustworthy Pledge 2026" loading="lazy" width="120" height="120" />
</span>
<a class="trust-badge trust-badge--square" href="https://dub.ai/ai-seal" target="_blank" rel="noopener" title="Dubai AI Seal — Verified AI Supplier (Tier E)">
<img src="img/dubai-ai-seal.png" alt="Dubai AI Seal — Verified AI Supplier" loading="lazy" width="120" height="120" />
</a>
<span class="trust-badge trust-badge--card" title="Claude Partner Network — Official Services Partner">
<img src="img/claude-partner-badge-v2.png" alt="Claude Partner Network — Official Services Partner" loading="lazy" width="188" height="104" />
</span>
<span class="trust-badge trust-badge--square" title="UN Sustainable Development Goals">
<img src="img/un-sdg.jpg" alt="UN Sustainable Development Goals" loading="lazy" width="166" height="142" />
</span>
<span class="trust-badge trust-badge--wide" title="Signatory — Montreal Declaration for Responsible AI">
<img src="img/montreal-signatory-light.png" alt="Signatory — Montreal Declaration for Responsible AI" loading="lazy" width="330" height="76" />
</span>
<span class="trust-badge trust-badge--wide" title="Pledge 1% member">
<img src="img/pledge1percent.png" alt="Pledge 1% member" loading="lazy" width="311" height="76" />
</span>
<a class="trust-badge trust-badge--wide" href="https://www.onetcenter.org" target="_blank" rel="noopener" title="O*NET in it — U.S. Department of Labor / Employment and Training Administration">
<img src="img/onet-in-it.png" alt="O*NET in it" loading="lazy" width="139" height="64" />
</a>
</div>
<div class="trust-marquee-group" aria-hidden="true">
<span class="trust-badge trust-badge--square">
<img src="img/csa-star-level-one.png" alt="" loading="lazy" width="120" height="120" />
</span>
<span class="trust-badge trust-badge--square">
<img src="img/ai-trustworthy-pledge-2026.png" alt="" loading="lazy" width="120" height="120" />
</span>
<a class="trust-badge trust-badge--square" href="https://dub.ai/ai-seal" target="_blank" rel="noopener" tabindex="-1">
<img src="img/dubai-ai-seal.png" alt="" loading="lazy" width="120" height="120" />
</a>
<span class="trust-badge trust-badge--card">
<img src="img/claude-partner-badge-v2.png" alt="" loading="lazy" width="188" height="104" />
</span>
<span class="trust-badge trust-badge--square">
<img src="img/un-sdg.jpg" alt="" loading="lazy" width="166" height="142" />
</span>
<span class="trust-badge trust-badge--wide">
<img src="img/montreal-signatory-light.png" alt="" loading="lazy" width="330" height="76" />
</span>
<span class="trust-badge trust-badge--wide">
<img src="img/pledge1percent.png" alt="" loading="lazy" width="311" height="76" />
</span>
<a class="trust-badge trust-badge--wide" href="https://www.onetcenter.org" target="_blank" rel="noopener" tabindex="-1">
<img src="img/onet-in-it.png" alt="" loading="lazy" width="139" height="64" />
</a>
</div>
</div>
</div>
</section>