130bf1e3af
Replace the hand-traced figures in the home-page intro animation with the official Kaiser-Natron brand vectors (Ikone "Hebe" + Waterfall), rendered as flat mint silhouettes (dark print outline dropped) on the brand-green hero. Lady at the origin holding the white natron; waterfall half-scale, vertically centred to her right. Same entrance choreography/timing as before. Source SVGs in src/assets/brand/, path data in heroFigures.js. Drops the ~570KB traced splashPaths.js import from the home page (HomePage chunk ~214KB -> ~70KB). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2 lines
1.8 KiB
CSS
2 lines
1.8 KiB
CSS
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-206cba0b]{--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-206cba0b]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-206cba0b]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-206cba0b]{fill:#7bd1ad}.right-m[data-v-206cba0b]{fill:#6eceb2}.mound-m[data-v-206cba0b]{fill:#fff}.layer.left-m[data-v-206cba0b]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-206cba0b]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-206cba0b]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-206cba0b]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-206cba0b],.brand-hero.go .layer.right-m[data-v-206cba0b]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-206cba0b],.brand-hero.go .brand-hero__copy[data-v-206cba0b]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-206cba0b],.layer.right-m[data-v-206cba0b],.layer.mound-m[data-v-206cba0b],.brand-hero__copy[data-v-206cba0b]{opacity:1!important;transition:none!important;transform:none!important}}
|