lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand hero: render the mound's hand fragment in mint, not white

Browse Source 
The dPortMound trace shipped two subpaths — the main natron handful
and a small finger-shaped subpath sitting at its base. The previous
fix dropped the second subpath because it bled white past the
woman's grip. Restoring it as a separate `dPortMoundFinger` export
and rendering it as a `mound-finger` layer in the mint hand colour
(#b5d8b6) so it reads as part of her hand instead of a stray white
spur. Painted between the white mound and the woman silhouette so
it sits on top of the mound but under the rest of her features.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-04 13:33:23 +01:00
parent 4abcd0d5ed
commit a369e5e532
7 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/HomePage-8hGoCK2Z.css vendored
View File

@@ -1 +0,0 @@
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-3da0d35a]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-3da0d35a]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-3da0d35a]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-3da0d35a],.right-m[data-v-3da0d35a]{fill:#b5d8b6}.mound-m[data-v-3da0d35a]{fill:#fff}.layer.left-m[data-v-3da0d35a]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-3da0d35a]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-3da0d35a]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-3da0d35a]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-3da0d35a],.brand-hero.go .layer.right-m[data-v-3da0d35a]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-3da0d35a],.brand-hero.go .brand-hero__copy[data-v-3da0d35a]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-3da0d35a],.layer.right-m[data-v-3da0d35a],.layer.mound-m[data-v-3da0d35a],.brand-hero__copy[data-v-3da0d35a]{opacity:1!important;transition:none!important;transform:none!important}}

1
dist/assets/HomePage-B_3OhTN2.css vendored Normal file
View File

@@ -0,0 +1 @@
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-a98d5a9a]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-a98d5a9a]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-a98d5a9a]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-a98d5a9a],.right-m[data-v-a98d5a9a]{fill:#b5d8b6}.mound-m[data-v-a98d5a9a]{fill:#fff}.mound-finger[data-v-a98d5a9a]{fill:#b5d8b6}.layer.left-m[data-v-a98d5a9a]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-a98d5a9a]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-a98d5a9a]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-a98d5a9a]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-a98d5a9a],.brand-hero.go .layer.right-m[data-v-a98d5a9a]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-a98d5a9a],.brand-hero.go .brand-hero__copy[data-v-a98d5a9a]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-a98d5a9a],.layer.right-m[data-v-a98d5a9a],.layer.mound-m[data-v-a98d5a9a],.brand-hero__copy[data-v-a98d5a9a]{opacity:1!important;transition:none!important;transform:none!important}}

2
dist/assets/HomePage-C6Ymq4z8.js → dist/assets/HomePage-DahE1AUL.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/assets/index-CkuV3PJj.js → dist/assets/index--KwIUfOp.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -12,7 +12,7 @@
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/index-CkuV3PJj.js"></script>
<script type="module" crossorigin src="/assets/index--KwIUfOp.js"></script>
<link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DTXUv7Wx.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CXLmyuFK.js">

2
src/components/splashPaths.js
View File

File diff suppressed because one or more lines are too long

26
src/design-system/components/BrandHero.vue
View File

@@ -54,9 +54,10 @@
on top (the splash entrance order) one finger bled
white because the mound's bounds extend slightly
past the grip outline. -->
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer mound-finger" fill-rule="evenodd" :d="dPortMoundFinger" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
</svg>
</div>
@@ -95,9 +96,10 @@
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer mound-finger" fill-rule="evenodd" :d="dPortMoundFinger" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
</svg>
</div>
@@ -123,6 +125,7 @@ import {
dPortLeft,
dPortRight,
dPortMound,
dPortMoundFinger,
} from '@/components/splashPaths.js'
import Button from './Button.vue'
import { useI18n } from '@/i18n/index.js'
@@ -222,9 +225,14 @@ const { t } = useI18n()
}
/* Layer fills (matches the splash's resolved palette). */
.left-m { fill: #b5d8b6; }
.right-m { fill: #b5d8b6; }
.mound-m { fill: #ffffff; }
.left-m { fill: #b5d8b6; }
.right-m { fill: #b5d8b6; }
.mound-m { fill: #ffffff; }
/* The original trace bundled a small hand/finger fragment under
the mound shape and painted it white; rendering it in the same
mint as the woman's other features makes it read as part of her
grip on the natron handful. */
.mound-finger { fill: #b5d8b6; }
/* ---------- Entrance animation (replaces SplashIntro) ----------
Initial state: figures translated off to their respective sides