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

Fix open-o divider clip + make its motion more present

Browse Source 
The negative bottom margin let the next band's paper bg paint over the circle's
lower edge (the "clip"). Use symmetric positive margin + line-height:0 +
overflow:visible. Bump to 34px and give the scale-in a small rotate so the
entrance actually reads.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 18:12:35 -07:00
parent a2a57ce8a1
commit 1c642e517d
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+3 -3
View File
@@ -303,10 +303,10 @@ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-o
.bridge-link a:hover, .person a:hover { background-size: 100% 1.5px; } .bridge-link a:hover, .person a:hover { background-size: 100% 1.5px; }
/* Open-o divider — a quiet brand beat that settles in right before the ask */ /* Open-o divider — a quiet brand beat that settles in right before the ask */
.o-divider { text-align: center; margin: 8px 0 -10px; } .o-divider { text-align: center; margin: 18px 0; line-height: 0; }
.o-divider svg { width: 30px; height: 30px; } .o-divider svg { width: 34px; height: 34px; overflow: visible; }
.o-divider path { fill: var(--amber); } .o-divider path { fill: var(--amber); }
.has-motion .o-divider { opacity: 0; transform: scale(.7); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,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; }
/* Persistent CTA — returns after the hero scrolls off, steps aside at the contact */ /* Persistent CTA — returns after the hero scrolls off, steps aside at the contact */