From 41201638e03b04fe0713070a07c0abdc4b72fd5b Mon Sep 17 00:00:00 2001 From: Mouse Date: Mon, 6 Apr 2026 19:09:02 -0700 Subject: [PATCH] Add conversion CTA section and skip link for accessibility --- index.html | 16 ++++++++ styles.css | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) diff --git a/index.html b/index.html index e9b7d18..de88a9c 100644 --- a/index.html +++ b/index.html @@ -77,6 +77,8 @@ + +
@@ -212,6 +214,19 @@

+ + +
+
+

Work with Brian

+

Need a product leader who can go from strategy to shipped outcomes?

+

I partner with teams on AI product strategy, growth loops, pricing decisions, and execution systems that actually ship.

+
+ Email Brian + Message on LinkedIn +
+
+
+
diff --git a/styles.css b/styles.css index 51152f2..efbfb19 100644 --- a/styles.css +++ b/styles.css @@ -809,6 +809,111 @@ a.work-card h3::after { } } + + +/* Skip link for keyboard users */ +.skip-link { + position: absolute; + left: -9999px; + top: 16px; + z-index: 3000; + background: #ffffff; + color: #111111; + padding: 10px 14px; + border-radius: 8px; + font-weight: 600; + text-decoration: none; +} + +.skip-link:focus { + left: 16px; +} + +/* Primary conversion CTA */ +#cta { + position: relative; + z-index: 2; + padding: 40px 24px 0; +} + +.cta-inner { + max-width: 900px; + margin: 0 auto; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 16px; + padding: 36px; + text-align: center; + backdrop-filter: blur(10px); +} + +.cta-kicker { + color: #b0b0b0; + letter-spacing: 0.14em; + text-transform: uppercase; + font-size: 0.75rem; + font-weight: 700; + margin-bottom: 12px; +} + +#cta-title { + font-size: clamp(1.5rem, 3vw, 2.25rem); + text-transform: none; + letter-spacing: 0; + margin-bottom: 16px; +} + +#cta-title::after { + display: none; +} + +.cta-copy { + color: #d0d0d0; + font-size: 1.05rem; + line-height: 1.65; + max-width: 760px; + margin: 0 auto 24px; +} + +.cta-actions { + display: flex; + justify-content: center; + gap: 14px; + flex-wrap: wrap; +} + +.cta-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 20px; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + transition: all 0.2s ease; +} + +.cta-primary { + background: #ffffff; + color: #101010; +} + +.cta-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 22px rgba(255, 255, 255, 0.25); +} + +.cta-secondary { + border: 1px solid rgba(255, 255, 255, 0.5); + color: #ffffff; + background: rgba(255, 255, 255, 0.02); +} + +.cta-secondary:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); +} + /* Responsive */ @media (max-width: 1024px) { .work-grid { @@ -864,6 +969,10 @@ a.work-card h3::after { padding: 0 24px; } + .cta-inner { + padding: 28px 22px; + } + .work-container h2 { margin-bottom: 40px; }