mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OC footer: image-based watermark (no aspect-ratio width-blowout); mobile content-driven height with logo anchored bottom — fixes 640px horizontal overflow

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 12:07:06 -07:00
parent 207e14c1d9
commit 3661d41eee
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -161,6 +161,7 @@
</main> </main>
<footer class="band dark site-footer" data-bg="dark"> <footer class="band dark site-footer" data-bg="dark">
<img class="footer-watermark" src="assets/brand/oc-mark-wh.svg" alt="" aria-hidden="true">
<div class="footer-inner"> <div class="footer-inner">
<div class="wrap"> <div class="wrap">
<div class="footer-brand logo-mark" role="img" aria-label="Open Communications"></div> <div class="footer-brand logo-mark" role="img" aria-label="Open Communications"></div>
style.css
+6 -5
View File
@@ -166,12 +166,13 @@ a.tel { text-decoration: none; }
.promise { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; } .promise { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
/* Footer — the full bg "open" logo dictates the size (aspect 4:1, no clip, no padding); content overlaid low-left */ /* Footer — the full bg "open" logo dictates the size (aspect 4:1, no clip, no padding); content overlaid low-left */
.site-footer { padding: 0; background: var(--navy); position: relative; overflow: hidden; aspect-ratio: 1267.11 / 316.97; display: flex; align-items: flex-end; } .site-footer { padding: 0; background: var(--navy); position: relative; overflow: hidden; }
.site-footer::before { .footer-watermark { display: block; width: 100%; height: auto; opacity: 0.06; pointer-events: none; }
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; .footer-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 22px; }
background: url(assets/brand/oc-mark-wh.svg) no-repeat center; background-size: 100% 100%; @media (max-width: 760px) {
.footer-watermark { position: absolute; left: 0; right: 0; bottom: 0; }
.footer-inner { position: relative; padding: 44px 0 26px; }
} }
.footer-inner { position: relative; width: 100%; padding-bottom: 22px; }
.footer-brand { width: 128px; height: 27px; background-color: var(--cream); margin-bottom: 10px; } .footer-brand { width: 128px; height: 27px; background-color: var(--cream); margin-bottom: 10px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 9px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 22px; font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 9px; }
.footer-nav a { color: var(--cream-soft); text-decoration: none; } .footer-nav a { color: var(--cream-soft); text-decoration: none; }