skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 08:36:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix light-mode header contrast over hero seam

Browse Source 
On wide viewports the hero's bright kintsugi seam sits under the
top-right nav cluster, where dark light-mode text and the toggle/GitHub
chips fight the gold. Add a contextual, light-only radial scrim anchored
to the corner: it feathers out by 70% (no hard edge), is faded via --hp
the moment the header glasses in on scroll, and is off below the mobile
drawer breakpoint. Dark mode needs no treatment (cream text reads fine
over the darker seam).

With the scrim carrying the corner, the toggle and GitHub counter become
refined hairline chips in light mode — neutral --ks-rule border, no fill
(the GitHub pill previously used the gold --ks-rule-strong and a solid
background).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-06-02 11:00:21 +02:00
co-authored by Claude Opus 4.8
parent 6163ca0529
commit 8e25f9955f
2 changed files with 36 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/styles/home-rebuild.css
+3
View File
@@ -54,6 +54,9 @@
backdrop-filter: saturate(calc(1 + 0.3 * var(--hp))) blur(calc(16px * var(--hp)));
}
/* The wide-viewport seam treatment is light-only and lives in light-mode.css.
Dark mode needs none: the cream nav text reads fine over the darker seam. */
.hero-rebuild-art {
position: absolute;
inset: 0;
site/styles/light-mode.css
+33 -2
View File
@@ -61,6 +61,10 @@ html.light .theme-toggle .theme-toggle-icon--dark {
color: var(--ks-champagne);
}
/* Light mode: the toggle and the GitHub pill both read as refined hairline
chips — neutral hairline (--ks-rule, not the gold --ks-rule-strong), no fill.
The contextual seam scrim (below) carries them over the bright hero corner,
so neither needs a solid backing of its own. */
html.light .kinpaku-chrome .theme-toggle {
border-color: var(--ks-rule);
color: var(--ks-text-muted);
@@ -81,6 +85,33 @@ html.light .kinpaku-chrome .site-header {
border-bottom-color: var(--ks-rule);
}
/* Light-only seam treatment. The hero's bright kintsugi seam sits in the
top-right corner, under the nav cluster (Live + the hairline toggle/GitHub
chips, which carry no fill of their own). In light mode the dark text fights
the gold, so a strong radial scrim lifts it off — opaque at the top-right
corner, feathering to nothing by 70% so there's no hard edge. It's contextual,
not a blanket bar: localized to the corner and faded via --hp the instant the
header glasses in on scroll. Above the mobile drawer breakpoint only; dark
mode needs none (cream text reads over the seam). */
@media (min-width: 761px) {
html.light .home-kinpaku .site-header::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: -24px;
width: min(720px, 50%);
z-index: -1;
pointer-events: none;
background: radial-gradient(
150% 170% at 100% 0%,
oklch(99% 0.01 95 / calc(0.95 * (1 - var(--hp)))) 0%,
oklch(99% 0.01 95 / calc(0.6 * (1 - var(--hp)))) 45%,
transparent 70%
);
}
}
html.light .kinpaku-chrome .site-header-menu {
border-color: var(--ks-rule);
color: var(--ks-text);
@@ -96,8 +127,8 @@ html.light .kinpaku-chrome .site-header-menu-line {
}
html.light .kinpaku-chrome .site-header-github {
border-color: var(--ks-rule-strong);
background: oklch(99% 0.008 95 / 0.88);
border-color: var(--ks-rule);
background: transparent;
color: var(--ks-text);
height: 36px;
min-height: 36px;