d-bis/miracles_in_motion
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Institutional A-grade nav logo: SVG lockups, WCAG audit, and deploy hygiene.

Browse Source 
Add transparent nav SVG assets with raster fallbacks, header contrast and focus fixes, automated a11y audit scripts, and evidence reports for institutional review.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
2026-06-15 19:06:00 -07:00
co-authored by Cursor
parent 23e61dc49c
commit 5c465d176e
23 changed files with 3712 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+54 -12
View File
@@ -21,11 +21,16 @@
--mim-cream: #faf8f5;
--mim-warm-beige: #f5f0e8;
--mim-warm-white: #fffefb;
--mim-focus-ring: var(--mim-brand-gold);
--mim-focus-ring: var(--mim-brand-green-deep);
--mim-eyebrow-text: #7d6232;
--mim-shadow-brand: rgba(26, 60, 52, 0.28);
--mim-shadow-gold: rgba(197, 160, 89, 0.32);
}
.dark {
--mim-focus-ring: var(--mim-brand-gold-bright);
}
@layer base {
html {
scroll-behavior: smooth;
@@ -103,7 +108,7 @@
}
@layer components {
/* Brand logos: /brand/logo-symbol.svg, logo-horizontal.png, logo-square.png */
/* Brand logos: nav lockups use transparent /brand/logo-*-nav.*; print/social use opaque PNGs */
.logo-mark {
display: inline-flex;
align-items: center;
@@ -112,30 +117,51 @@
line-height: 0;
}
.logo-mark__img {
.logo-mark__img,
.logo-mark__img-wrap {
display: block;
line-height: 0;
}
.logo-mark__img {
object-fit: contain;
object-position: left center;
}
/* Nav: symbol (square) on mobile, horizontal lockup on md+ */
.logo-mark--nav {
height: 3rem;
.logo-mark__img-wrap--horizontal .logo-mark__img--horizontal {
display: block;
height: 100%;
width: auto;
filter: drop-shadow(0 1px 1px rgb(15 41 34 / 0.12));
}
/* Nav: symbol on mobile, transparent horizontal lockup on md+ */
.logo-mark--nav {
height: 3.25rem;
}
.logo-mark--nav .logo-mark__img-wrap--symbol,
.logo-mark--nav .logo-mark__img--symbol {
height: 100%;
width: auto;
max-width: 3.25rem;
max-width: 3.5rem;
filter: drop-shadow(0 1px 1px rgb(15 41 34 / 0.1));
}
.logo-mark--nav .logo-mark__img-wrap--symbol .logo-mark__img--symbol {
height: 100%;
width: auto;
}
@media (min-width: 768px) {
.logo-mark--nav {
height: 4.25rem;
}
.logo-mark--nav .logo-mark__img--horizontal {
.logo-mark--nav .logo-mark__img-wrap--horizontal {
height: 100%;
width: auto;
max-width: min(20rem, 48vw);
}
.logo-mark--nav .logo-mark__img--horizontal {
max-width: min(20rem, 48vw);
}
}
@@ -144,6 +170,7 @@
.logo-mark--nav {
height: 4.5rem;
}
.logo-mark--nav .logo-mark__img-wrap--horizontal,
.logo-mark--nav .logo-mark__img--horizontal {
max-width: 21rem;
}
@@ -153,20 +180,33 @@
.logo-mark--nav {
height: 4.75rem;
}
.logo-mark--nav .logo-mark__img-wrap--horizontal,
.logo-mark--nav .logo-mark__img--horizontal {
max-width: 23rem;
}
}
/* Footer: horizontal on light; symbol on dark (horizontal PNG has opaque panel) */
/* Footer: symbol on xs, transparent horizontal on sm+ (same assets as nav) */
.logo-mark--footer {
height: 2.75rem;
}
.logo-mark--footer .logo-mark__img-wrap--symbol,
.logo-mark--footer .logo-mark__img--symbol {
height: 100%;
width: auto;
max-width: 3.25rem;
filter: drop-shadow(0 1px 1px rgb(15 41 34 / 0.1));
}
.logo-mark--footer .logo-mark__img-wrap--symbol .logo-mark__img--symbol {
height: 100%;
width: auto;
}
.logo-mark--footer .logo-mark__img-wrap--horizontal {
height: 100%;
max-width: min(12rem, 80vw);
}
.logo-mark--footer .logo-mark__img--horizontal {
@@ -179,6 +219,7 @@
.logo-mark--footer {
height: 3.25rem;
}
.logo-mark--footer .logo-mark__img-wrap--horizontal,
.logo-mark--footer .logo-mark__img--horizontal {
max-width: 14rem;
}
@@ -188,6 +229,7 @@
.logo-mark--footer {
height: 3.5rem;
}
.logo-mark--footer .logo-mark__img-wrap--horizontal,
.logo-mark--footer .logo-mark__img--horizontal {
max-width: 16rem;
}
@@ -240,7 +282,7 @@
}
.nav-brand-link:focus-visible {
outline: 2px solid var(--mim-brand-gold);
outline: 2px solid var(--mim-focus-ring);
outline-offset: 3px;
}
@@ -481,7 +523,7 @@
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--mim-brand-gold);
color: var(--mim-eyebrow-text);
font-weight: 600;
}
.dark .section-eyebrow {