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

OC footer: full bg logo on all viewports (no clip/cover), compact low-anchored content

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 11:40:45 -07:00
parent 1693c97f65
commit 06a6fce82b
1 changed files with 6 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+6 -11
View File
@@ -164,23 +164,18 @@ a.tel { text-decoration: none; }
.actions.center { margin: 2.2em 0 0.8em; } .actions.center { margin: 2.2em 0 0.8em; }
.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 — height = the bg "open" logo (aspect 4:1), tight, no padding; content overlaid flush bottom-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; } .site-footer { padding: 0; background: var(--navy); position: relative; overflow: hidden; aspect-ratio: 1267.11 / 316.97; }
.site-footer::before { .site-footer::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
background: url(assets/brand/oc-mark-wh.svg) no-repeat center; background-size: 100% 100%; background: url(assets/brand/oc-mark-wh.svg) no-repeat center; background-size: 100% 100%;
} }
.footer-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 32px; } .footer-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 22px; }
@media (max-width: 760px) { .footer-brand { width: 132px; height: 28px; background-color: var(--cream); margin-bottom: 12px; }
.site-footer { aspect-ratio: auto; } .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: 10px; }
.site-footer::before { background-size: cover; }
.footer-inner { position: static; padding: 52px 0 36px; }
}
.footer-brand { width: 150px; height: 32px; background-color: var(--cream); margin-bottom: 24px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 28px; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 22px; }
.footer-nav a { color: var(--cream-soft); text-decoration: none; } .footer-nav a { color: var(--cream-soft); text-decoration: none; }
.footer-nav a:hover { color: #fff; } .footer-nav a:hover { color: #fff; }
.footer-call { margin: 0 0 16px; } .footer-call { margin: 0 0 8px; }
.footer-call a.tel { color: var(--amber); font-family: 'DM Sans', sans-serif; font-size: 0.92rem; } .footer-call a.tel { color: var(--amber); font-family: 'DM Sans', sans-serif; font-size: 0.92rem; }
.footer-legal { font-family: 'DM Sans', sans-serif; font-size: 0.74rem; line-height: 1.6; color: rgba(247, 244, 239, 0.4); margin: 0; max-width: 52em; } .footer-legal { font-family: 'DM Sans', sans-serif; font-size: 0.74rem; line-height: 1.6; color: rgba(247, 244, 239, 0.4); margin: 0; max-width: 52em; }