diff --git a/css/impactmojo-kit.css b/css/impactmojo-kit.css index e533974..be59ea3 100644 --- a/css/impactmojo-kit.css +++ b/css/impactmojo-kit.css @@ -6,7 +6,7 @@ link it BEFORE the site's own stylesheet, then reference the --imx-* tokens (or use the .imx-* components) instead of hard-coding brand values. - Version: 1.0.0 + Version: 1.1.0 ========================================================================== */ /* ---------- Canonical brand tokens (light) ---------- */ @@ -97,3 +97,42 @@ /* Focus ring */ .imx-focusable:focus-visible { outline: 2px solid var(--imx-accent); outline-offset: 2px; border-radius: 4px; } + +/* ========================================================================== + Shared shell — canonical footer (identical across every ImpactMojo app) + ========================================================================== */ +.imx-footer { + background: #12161c; + color: rgba(255,255,255,0.72); + border-top: 3px solid transparent; + border-image: var(--imx-brand-grad) 1; + padding: 28px 0; + margin-top: auto; +} +.imx-footer-inner { + max-width: 1120px; margin: 0 auto; padding: 0 24px; + display: flex; flex-direction: column; gap: 14px; +} +.imx-footer-brandrow { + display: flex; align-items: center; justify-content: space-between; + gap: 16px; flex-wrap: wrap; +} +.imx-footer-brand { + display: inline-flex; align-items: center; gap: 9px; + color: #fff; font-weight: 700; font-family: var(--imx-font-serif); + text-decoration: none; font-size: 1rem; +} +.imx-footer-brand:hover { color: #fff; text-decoration: none; } +.imx-footer-nav { display: flex; gap: 18px; flex-wrap: wrap; } +.imx-footer-nav a { + color: rgba(255,255,255,0.72); font-size: 0.85rem; font-weight: 600; + text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 1px; +} +.imx-footer-nav a:hover { color: #fff; border-bottom-color: var(--imx-accent-2); } +.imx-footer-nav a.current { color: #fff; border-bottom-color: var(--imx-accent-2); } +.imx-footer-tagline { + font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 660px; margin: 0; +} +.imx-footer-tagline strong { color: rgba(255,255,255,0.85); } +.imx-footer-tagline a { color: rgba(255,255,255,0.78); text-decoration: underline; } +@media (max-width: 600px) { .imx-footer-brandrow { flex-direction: column; align-items: flex-start; } } diff --git a/index.html b/index.html index 5feaae2..8b266d4 100644 --- a/index.html +++ b/index.html @@ -286,17 +286,15 @@

Suggest a Resource

- +