OC footer: exact match to Manus build (footer-bg watermark svg + scaled content block on mobile, align-items center, logo 28/21px)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
@@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1267.11 451.01">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer_1">
|
||||
<g>
|
||||
<path class="cls-1" d="M0,406.32c0-25.36,17.27-44.69,43.74-44.69,22.5,0,36.45,12.84,39.46,31.22h-24.09c-1.74-7.77-6.81-12.68-15.06-12.68-12.52,0-18.86,10.3-18.86,26.15s6.34,25.83,18.86,25.83c9.19,0,14.74-5.55,15.85-15.21h23.93c-.79,19.18-16.01,34.07-39.46,34.07-26.94,0-44.38-19.49-44.38-44.69Z"/>
|
||||
<path class="cls-1" d="M91.45,406.32c0-25.36,17.75-44.69,44.69-44.69s44.38,19.33,44.38,44.69-17.59,44.69-44.38,44.69-44.69-19.49-44.69-44.69ZM155.32,406.32c0-16.01-6.97-26.94-19.33-26.94s-19.34,10.94-19.34,26.94,6.66,26.63,19.34,26.63,19.33-10.78,19.33-26.63Z"/>
|
||||
<path class="cls-1" d="M193.04,364h23.93v13.15h.48c5.39-9.98,13.47-15.53,25.36-15.53,11.09,0,18.86,5.55,23.14,16.01h.32c6.97-11.25,16.17-16.01,26.78-16.01,18.7,0,28.37,12.36,28.37,31.06v55.63h-24.72v-51.51c0-9.19-4.44-14.74-12.52-14.74-8.87,0-14.42,7.45-14.42,18.23v48.02h-24.88v-51.51c0-9.19-4.12-14.74-12.36-14.74-8.72,0-14.58,7.45-14.58,18.23v48.02h-24.88v-84.31Z"/>
|
||||
<path class="cls-1" d="M337.26,364h23.93v13.15h.48c5.39-9.98,13.47-15.53,25.36-15.53,11.09,0,18.86,5.55,23.14,16.01h.32c6.97-11.25,16.17-16.01,26.78-16.01,18.7,0,28.37,12.36,28.37,31.06v55.63h-24.72v-51.51c0-9.19-4.44-14.74-12.52-14.74-8.87,0-14.42,7.45-14.42,18.23v48.02h-24.88v-51.51c0-9.19-4.12-14.74-12.36-14.74-8.72,0-14.58,7.45-14.58,18.23v48.02h-24.88v-84.31Z"/>
|
||||
<path class="cls-1" d="M536.32,448.31v-12.04h-.48c-6.18,9.83-13.79,14.42-25.36,14.42-19.18,0-29.64-12.36-29.64-30.9v-55.79h24.88v51.03c0,9.35,4.6,14.74,13.47,14.74,9.98,0,16.17-7.61,16.17-18.07v-47.7h24.56v84.31h-23.61Z"/>
|
||||
<path class="cls-1" d="M600.51,376.84h.48c5.23-10.14,14.26-15.21,25.99-15.21,18.54,0,29.32,12.36,29.32,31.22v55.47h-24.72v-50.71c0-9.19-4.91-15.37-14.11-15.37-9.67,0-16.17,7.77-16.17,18.54v47.55h-24.88v-84.31h24.09v12.84Z"/>
|
||||
<path class="cls-1" d="M671.99,330.4h25.2v21.71h-25.2v-21.71ZM672.15,364h24.88v84.31h-24.88v-84.31Z"/>
|
||||
<path class="cls-1" d="M709.55,406.32c0-25.36,17.27-44.69,43.74-44.69,22.5,0,36.45,12.84,39.46,31.22h-24.09c-1.74-7.77-6.81-12.68-15.06-12.68-12.52,0-18.86,10.3-18.86,26.15s6.34,25.83,18.86,25.83c9.19,0,14.74-5.55,15.85-15.21h23.93c-.79,19.18-16.01,34.07-39.46,34.07-26.94,0-44.38-19.49-44.38-44.69Z"/>
|
||||
<path class="cls-1" d="M857.73,438.01h-.32c-5.55,7.77-12.52,12.52-25.52,12.52-16.64,0-28.84-8.87-28.84-25.52,0-18.7,14.74-23.46,33.12-25.67,15.06-2.06,21.24-4.44,21.24-10.78s-3.96-10.14-12.52-10.14c-9.51,0-14.11,4.44-14.74,11.09h-22.98c.63-14.42,12.36-27.89,37.4-27.89,10.78,0,18.38,1.58,24.25,5.07,8.72,5.07,12.84,13.79,12.84,25.2v43.27c0,6.66.95,10.3,3.17,11.73v1.43h-24.25c-1.27-1.9-2.38-5.55-2.85-10.3ZM858.05,418.04v-10.94c-3.65,2.22-9.03,3.49-14.58,4.75-10.94,2.38-16.17,5.07-16.17,12.36s5.55,9.98,12.36,9.98c11.09,0,18.38-6.97,18.38-16.17Z"/>
|
||||
<path class="cls-1" d="M892.76,364h12.68v-26.94h24.41v26.94h16.48v15.85h-16.48v41.84c0,6.34,3.49,8.08,9.35,8.08,1.59,0,4.12-.16,5.71-.32h1.27v18.54c-2.69.48-7.77,1.27-14.42,1.27-15.69,0-26.31-5.07-26.31-22.19v-47.23h-12.68v-15.85Z"/>
|
||||
<path class="cls-1" d="M959.17,330.4h25.2v21.71h-25.2v-21.71ZM959.33,364h24.88v84.31h-24.88v-84.31Z"/>
|
||||
<path class="cls-1" d="M996.73,406.32c0-25.36,17.75-44.69,44.69-44.69s44.38,19.33,44.38,44.69-17.59,44.69-44.38,44.69-44.69-19.49-44.69-44.69ZM1060.6,406.32c0-16.01-6.97-26.94-19.33-26.94s-19.34,10.94-19.34,26.94,6.66,26.63,19.34,26.63,19.33-10.78,19.33-26.63Z"/>
|
||||
<path class="cls-1" d="M1122.41,376.84h.48c5.23-10.14,14.26-15.21,25.99-15.21,18.54,0,29.32,12.36,29.32,31.22v55.47h-24.72v-50.71c0-9.19-4.91-15.37-14.11-15.37-9.67,0-16.17,7.77-16.17,18.54v47.55h-24.88v-84.31h24.09v12.84Z"/>
|
||||
<path class="cls-1" d="M1188.66,422.32h23.46c1.43,7.92,7.45,12.36,17.12,12.36,8.87,0,13.95-3.65,13.95-9.67,0-7.61-9.98-8.56-21.71-10.78-15.06-2.85-30.27-6.66-30.27-26.31,0-17.27,15.69-26.31,35.5-26.31,23.46,0,35.18,10.14,37.4,24.88h-23.14c-1.58-6.02-6.34-9.03-14.26-9.03s-12.52,3.17-12.52,8.56c0,6.34,9.19,7.29,20.76,9.35,15.06,2.69,32.17,6.66,32.17,27.89,0,18.23-16.17,27.73-38.04,27.73-24.41,0-39.15-11.73-40.41-28.69Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M792.41,174.06c-8.6,0-15.57-6.97-15.57-15.57s6.97-15.57,15.57-15.57h157.73C942.31,62.69,874.69,0,792.42,0c-87.53,0-158.48,70.96-158.48,158.48s70.96,158.48,158.48,158.48c82.27,0,149.9-62.69,157.72-142.91h-157.73Z"/>
|
||||
<path class="cls-1" d="M1108.62.38c-.54,0-1.08.02-1.61.02v-.02s-156.87,0-156.87,0v158.1h0c0,.13,0,.25,0,.38,0,82.27,62.69,149.9,142.91,157.72v-157.73c0-8.6,6.97-15.57,15.57-15.57s15.57,6.97,15.57,15.57v157.73c80.22-7.83,142.91-75.45,142.91-157.72,0-87.53-70.96-158.48-158.48-158.48Z"/>
|
||||
<path class="cls-1" d="M158.48,0C70.96,0,0,70.96,0,158.48s70.96,158.48,158.48,158.48,158.48-70.96,158.48-158.48S246.01,0,158.48,0ZM162.61,209.89c-28.39,0-51.41-23.02-51.41-51.41s23.02-51.41,51.41-51.41,51.41,23.02,51.41,51.41-23.02,51.41-51.41,51.41Z"/>
|
||||
<path class="cls-1" d="M475.45,0C387.92,0,316.97,70.96,316.97,158.48v158.48h110.07v-158.86c0-28.39,23.02-51.41,51.41-51.41s51.41,23.02,51.41,51.41-23.02,51.41-51.41,51.41h-20.26v107.46h17.26c87.53,0,158.48-70.96,158.48-158.48S562.98,0,475.45,0Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
+14
-7
@@ -164,18 +164,25 @@
|
||||
|
||||
</main>
|
||||
|
||||
<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="wrap">
|
||||
<div class="footer-brand logo-mark" role="img" aria-label="Open Communications"></div>
|
||||
<nav class="footer-nav" aria-label="Footer">
|
||||
<footer class="site-footer" data-bg="dark">
|
||||
<div class="footer-bg" aria-hidden="true">
|
||||
<svg class="footer-bg-img" viewBox="0 0 1267.11 316.97" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M792.41,174.06c-8.6,0-15.57-6.97-15.57-15.57s6.97-15.57,15.57-15.57h157.73C942.31,62.69,874.69,0,792.42,0c-87.53,0-158.48,70.96-158.48,158.48s70.96,158.48,158.48,158.48c82.27,0,149.9-62.69,157.72-142.91h-157.73Z"/>
|
||||
<path d="M1108.62.38c-.54,0-1.08.02-1.61.02v-.02s-156.87,0-156.87,0v158.1h0c0,.13,0,.25,0,.38,0,82.27,62.69,149.9,142.91,157.72v-157.73c0-8.6,6.97-15.57,15.57-15.57s15.57,6.97,15.57,15.57v157.73c80.22-7.83,142.91-75.45,142.91-157.72,0-87.53-70.96-158.48-158.48-158.48Z"/>
|
||||
<path d="M158.48,0C70.96,0,0,70.96,0,158.48s70.96,158.48,158.48,158.48,158.48-70.96,158.48-158.48S246.01,0,158.48,0ZM162.61,209.89c-28.39,0-51.41-23.02-51.41-51.41s23.02-51.41,51.41-51.41,51.41,23.02,51.41,51.41-23.02,51.41-51.41,51.41Z"/>
|
||||
<path d="M475.45,0C387.92,0,316.97,70.96,316.97,158.48v158.48h110.07v-158.86c0-28.39,23.02-51.41,51.41-51.41s51.41,23.02,51.41,51.41-23.02,51.41-51.41,51.41h-20.26v107.46h17.26c87.53,0,158.48-70.96,158.48-158.48S562.98,0,475.45,0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="footer-block">
|
||||
<div class="footer-logo"><img class="footer-logo-img" src="assets/brand/oc-logo-wh.svg" alt="Open Communications"></div>
|
||||
<nav class="footer-links" aria-label="Footer">
|
||||
<a href="#problem">The problem</a>
|
||||
<a href="#work">How we work</a>
|
||||
<a href="#who">Who we are</a>
|
||||
<a href="https://shopwisdom.ca">ShopWisdom</a>
|
||||
</nav>
|
||||
<p class="footer-legal">Open Communications and ShopWisdom are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p>
|
||||
<p class="footer-copy">Open Communications and ShopWisdom are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user