G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the Let's talk headline readable in light mode

Browse Source 
The difference blend renders white on white in light mode, so the light
theme uses a solid navy headline over the ribbon instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-01 13:01:05 -04:00
parent 90be0ec4c7
commit cc7d385c9f
1 changed files with 1 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/assets/home.css
+1
View File
@@ -248,6 +248,7 @@
.ribbon { position: absolute; left: 50%; top: 50%; width: max(165%, 1900px); max-width: none; height: auto; transform: translate(-50%, -50%); animation: rib 14s ease-in-out infinite alternate; }
@keyframes rib { from { transform: translate(-52%, -48%) rotate(-3deg) scale(1); } to { transform: translate(-48%, -52%) rotate(3deg) scale(1.06); } }
.talk h2 { position: relative; z-index: 2; font-weight: 600; font-size: clamp(5rem, 23vw, 22rem); line-height: .9; letter-spacing: -0.07em; color: #fff; mix-blend-mode: difference; white-space: nowrap; }
:root[data-theme="light"] .talk h2 { mix-blend-mode: normal; color: #0b1220; text-shadow: 0 2px 30px rgba(255, 255, 255, .6); }
.cbody { position: relative; z-index: 2; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; margin-top: 1rem; }
.cbody .eyebrow { align-self: center; }
.cbody h3 { font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -0.045em; max-width: 22ch; line-height: 1.08; }