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

SW footer + contact divider: use the owl logo (reverse lockup in footer; light owl head replacing the open-O divider above the contact form; align-self fix so the footer logo keeps aspect). Verified locally. Staging/preview only.

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-24 22:27:42 -07:00
parent ba81bd674d
commit 9349939a81
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -2
View File
@@ -283,7 +283,7 @@
</section> </section>
<div class="o-divider" aria-hidden="true"> <div class="o-divider" aria-hidden="true">
<svg viewBox="0 0 538 538"><path d="M269.06,0C120.46,0,0,120.46,0,269.06s120.46,269.06,269.06,269.06,269.06-120.46,269.06-269.06S417.66,0,269.06,0ZM276.06,356.34c-48.2,0-87.28-39.07-87.28-87.28s39.07-87.28,87.28-87.28,87.28,39.08,87.28,87.28-39.07,87.28-87.28,87.28Z"/></svg> <img class="owl-divider-img" src="assets/logo/owl-mark.svg" alt="" width="52" height="54" />
</div> </div>
<section class="band light contact" data-bg="light" id="contact"> <section class="band light contact" data-bg="light" id="contact">
@@ -343,7 +343,7 @@
</div> </div>
<div class="footer-content"> <div class="footer-content">
<div class="footer-block"> <div class="footer-block">
<p class="footer-wordmark">Shop<span>Wisdom</span></p> <img class="footer-logo-img" src="assets/logo/logo-horizontal-rev.svg" alt="Shop Wisdom" width="214" height="36" />
<nav class="footer-links" aria-label="Footer"> <nav class="footer-links" aria-label="Footer">
<a href="#work">The work</a> <a href="#work">The work</a>
<a href="#results">Client results</a> <a href="#results">Client results</a>
style.css
+2
View File
@@ -257,6 +257,7 @@ blockquote p { margin: 0 0 1em; font-style: italic; color: var(--ink); font-size
.footer-content { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1.5rem 2rem; } .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.3rem; } .footer-block { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; } .footer-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; }
.footer-logo-img { height: 40px; width: auto; align-self: flex-start; display: block; margin-bottom: 8px; }
.footer-wordmark span { color: var(--accent); } .footer-wordmark span { color: var(--accent); }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; } .footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.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 { 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; }
@@ -335,6 +336,7 @@ a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid v
/* Open-o divider — a quiet brand beat right before the ask */ /* Open-o divider — a quiet brand beat right before the ask */
.o-divider { text-align: center; margin: 18px 0; line-height: 0; } .o-divider { text-align: center; margin: 18px 0; line-height: 0; }
.o-divider svg { width: 34px; height: 34px; overflow: visible; } .o-divider svg { width: 34px; height: 34px; overflow: visible; }
.o-divider .owl-divider-img { width: 54px; height: auto; display: inline-block; }
.o-divider path { fill: var(--accent); } .o-divider path { fill: var(--accent); }
.has-motion .o-divider { opacity: 0; transform: scale(.55) rotate(-12deg); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.85,.25,1); } .has-motion .o-divider { opacity: 0; transform: scale(.55) rotate(-12deg); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.85,.25,1); }
.has-motion .o-divider.in { opacity: 1; transform: none; } .has-motion .o-divider.in { opacity: 1; transform: none; }