From 583e287af60285f22fc35c0f58e8006671c61e42 Mon Sep 17 00:00:00 2001 From: Cesar Alcazar Date: Tue, 20 Oct 2026 09:43:19 -0600 Subject: [PATCH] 99puxwol5: Lift small crimson like counts to 4.5:1 contrast and darken meta on the light featured slide --- src/app/globals.css | 3 +++ src/styles/mobile.css | 5 ++++- src/styles/post.css | 4 +++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 7a53f8c..f3c5b0f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -16,6 +16,8 @@ --ink-2: #BFBDB8; --ink-3: #95938E; --accent: #C8141C; + /* Crimson for small text (like counts): plain crimson is 3.2:1 on the dark tiles. */ + --accent-text: color-mix(in srgb, #C8141C, white 40%); --danger: #FF6B70; --glass: rgba(18,18,21,.72); --shadow-pop: 0 10px 28px rgba(0,0,0,.5); @@ -41,6 +43,7 @@ --ink-2: #46484D; --ink-3: #686A70; --accent: #C8141C; + --accent-text: #C8141C; --danger: #B3121A; --glass: rgba(251,250,248,.74); --shadow-pop: 0 10px 28px rgba(26,28,31,.14); diff --git a/src/styles/mobile.css b/src/styles/mobile.css index e9204eb..cb905f7 100644 --- a/src/styles/mobile.css +++ b/src/styles/mobile.css @@ -234,6 +234,8 @@ padding: 70px 0 110px; background: radial-gradient(90% 55% at 50% 46%, color-mix(in oklab, var(--accent), transparent 84%), transparent 70%), var(--bg); } +/* The crimson glow tints the light page enough to drop --ink-3 meta below 4.5:1. */ +[data-theme="light"] .slide-featured { --ink-3: var(--ink-2); } .slide-feat-title { margin: 10px 24px 0; text-align: center; @@ -362,7 +364,8 @@ .dk svg { width: 22px; height: 22px; flex: none; } @media (hover: hover) { .dk:hover:not(:disabled) { background: var(--tile-3); } } .dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } -.dk.dk-like-on { color: var(--accent); } +.dk.dk-like-on { color: var(--accent-text); } +.dk.dk-like-on svg { color: var(--accent); } .dk-beat svg { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); } .dk:disabled { opacity: 1; color: var(--ink-3); cursor: default; } .btn-spark.btn-spark-fab.dk-plus { flex: 0 0 64px; width: 64px; height: 52px; } diff --git a/src/styles/post.css b/src/styles/post.css index c7bee35..4b6915a 100644 --- a/src/styles/post.css +++ b/src/styles/post.css @@ -122,7 +122,9 @@ .post-act:hover:not(:disabled) { background: var(--post-soft); color: var(--ink); } .post-act:disabled { cursor: default; } .post-like:hover:not(:disabled), -.post-like-on { color: var(--accent); } +.post-like-on { color: var(--accent-text); } +.post-like:hover:not(:disabled) .post-heart, +.post-like-on .post-heart { color: var(--accent); } .post-like-beat .post-heart { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); } .post-act-open { color: var(--ink); background: var(--post-soft); }