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

OC footer: exact match to Manus build (footer-bg watermark svg + scaled content block on mobile, align-items center, logo 28/21px)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 14:45:21 -07:00
parent aeb57c0a01
commit d2f80b1565
3 changed files with 70 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+22 -12
View File
@@ -165,19 +165,29 @@ a.tel { text-decoration: none; }
.actions.center { margin: 2.2em 0 0.8em; }
.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 */
.site-footer { padding: 0; background: var(--navy); position: relative; overflow: hidden; }
.footer-watermark { display: block; width: 100%; height: auto; opacity: 0.06; pointer-events: none; }
.footer-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 22px; }
@media (max-width: 760px) {
.footer-watermark { position: absolute; left: 0; right: 0; bottom: 0; }
.footer-inner { position: relative; padding: 44px 0 26px; }
/* Footer — exact match to the Manus build: bg "open" watermark (full-width svg) dictates height; content overlaid, scaled to fit on mobile */
.site-footer { border-top: 1.5px solid rgba(15, 23, 41, 0.1); background: #0f1729; position: relative; }
.footer-bg { width: 100%; display: block; pointer-events: none; }
.footer-bg-img { width: 100%; height: auto; display: block; }
.footer-bg-img path { fill: #1a2332; }
.footer-content { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1.5rem 2rem; }
.footer-block { display: flex; flex-direction: column; gap: 0.25rem; }
.footer-logo-img { height: 28px; width: auto; display: block; }
.footer-links { display: flex; gap: 1rem; }
.footer-links a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f7f4ef; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: #e89b1c; }
.footer-copy { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.5rem; color: #f7f4ef66; letter-spacing: 0.03em; line-height: 1.4; margin: 0; }
@media (max-width: 900px) {
.footer-content { padding: 1rem 1.25rem; }
.footer-logo-img, .footer-bg-img { overflow: visible; }
.footer-logo-img { height: 21px; }
}
@media (max-width: 600px) {
.footer-content { align-items: center; justify-content: flex-start; padding: 0 1.5rem; }
.footer-block { align-items: flex-start; transform: scale(0.75); transform-origin: left center; }
.footer-links { justify-content: flex-start; }
.footer-copy { text-align: left; }
}
.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 a { color: var(--cream-soft); text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-legal { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; line-height: 1.55; color: rgba(247, 244, 239, 0.4); margin: 0; max-width: 46em; }
/* Focus */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }