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

OC: pill-shaped buttons (echo the round "open o" mark, hint at soft skills)

Browse Source 
.btn + .nav-cta border-radius 2px -> 999px (half-circle ends); focus ring matches;
nudge .btn horizontal padding 22->24 to balance the pill. OC only — SW keeps its
squared/industrial buttons. .btn.link (text link) and form fields unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-24 07:38:40 -07:00
parent 20fc98b652
commit 159b636697
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
@@ -70,7 +70,7 @@ strong { font-weight: 500; color: var(--ink); }
.nav-links-desktop a:hover { color: #0f1729; }
.nav-cta {
font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.55rem 1.3rem; background: #e89b1c; color: #fff !important; border-radius: 2px; text-decoration: none;
padding: 0.55rem 1.3rem; background: #e89b1c; color: #fff !important; border-radius: 999px; text-decoration: none;
white-space: nowrap; border: none; transition: background 0.3s;
}
.nav-cta:hover { background: #c4820f; }
@@ -157,7 +157,7 @@ a.tel { text-decoration: none; }
.btn {
display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 400;
text-transform: uppercase; letter-spacing: 0.13em;
background: var(--amber); color: #fff; padding: 11px 22px; border-radius: 2px;
background: var(--amber); color: #fff; padding: 11px 24px; border-radius: 999px;
text-decoration: none; border: 1px solid var(--amber); transition: background-color .2s, border-color .2s;
}
.btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
@@ -261,7 +261,7 @@ a.tel { text-decoration: none; }
}
/* Focus */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 999px; }
/* Responsive */
@media (max-width: 860px) {