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

OC mobile: amber CTA back, seated on a navy dock so the toolbar stays dark blue

Browse Source 
Revert the floating button to amber. On mobile, wrap it in a navy dock flush to the
bottom edge: iOS blurs the navy into the address-bar toolbar (stays dark blue) while
the CTA itself reads orange. Desktop float-cta unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-23 06:16:45 -07:00
parent 6a46f5ed7d
commit 479d5d0119
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+6 -3
View File
@@ -337,8 +337,7 @@ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-o
/* 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 */
.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 80; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; } .float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 80; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; } .float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.float-cta .btn { background: #0f1729; color: #fff; border-color: var(--amber); box-shadow: 0 8px 24px rgba(15, 23, 41, 0.30); } .float-cta .btn { box-shadow: 0 6px 22px rgba(15, 23, 41, 0.18); }
.float-cta .btn:hover { background: #0b1220; border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.has-motion .reveal, .has-motion .stagger > * { opacity: 1; transform: none; } .has-motion .reveal, .has-motion .stagger > * { opacity: 1; transform: none; }
@@ -346,6 +345,10 @@ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-o
.float-cta { transition: none; } .float-cta { transition: none; }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.float-cta { right: 12px; left: 12px; bottom: 12px; } /* navy "dock" flush to the bottom edge so the iOS toolbar reads dark blue;
the amber CTA sits on top of it (always on navy now, so amber reads strong) */
.float-cta { left: 0; right: 0; bottom: 0; background: #0f1729;
padding: 13px 14px calc(13px + env(safe-area-inset-bottom, 0px));
border-radius: 16px 16px 0 0; box-shadow: 0 -8px 26px rgba(15, 23, 41, 0.16); }
.float-cta .btn { display: block; text-align: center; } .float-cta .btn { display: block; text-align: center; }
} }