background pattern tweaks
This commit is contained in:
Dorian
58
src/App.vue
58
src/App.vue
@@ -32,6 +32,36 @@
|
||||
<feMergeNode in="specClip2"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<!-- Mobile variant of paintGloss — same gloss/specular, but the
|
||||
drop shadow is dialled back (slope 0.45 → 0.20, offset 6 → 3,
|
||||
blur 4 → 2.5) and the puddle shadow is softer too. The hero
|
||||
wordmark switches to this filter under the 767px breakpoint
|
||||
so it sits cleaner on small screens. -->
|
||||
<filter id="paintGlossLight" x="-12%" y="-30%" width="124%" height="160%" color-interpolation-filters="sRGB">
|
||||
<feMorphology in="SourceAlpha" operator="dilate" radius="2.5" result="dilated"/>
|
||||
<feGaussianBlur in="dilated" stdDeviation="6" result="puddle"/>
|
||||
<feFlood flood-color="#fff4dc" flood-opacity="0.85" result="puddleColor"/>
|
||||
<feComposite in="puddleColor" in2="puddle" operator="in" result="puddleHi"/>
|
||||
<feFlood flood-color="#1A1A18" flood-opacity="0.10" result="puddleShadowColor"/>
|
||||
<feComposite in="puddleShadowColor" in2="puddle" operator="in" result="puddleShadow"/>
|
||||
<feOffset in="puddleShadow" dx="0" dy="2" result="puddleShadowOff"/>
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1.4" result="bump"/>
|
||||
<feSpecularLighting in="bump" surfaceScale="4" specularConstant="0.9"
|
||||
specularExponent="40" lighting-color="#fff2d4" result="spec2">
|
||||
<fePointLight x="600" y="-200" z="380"/>
|
||||
</feSpecularLighting>
|
||||
<feComposite in="spec2" in2="SourceAlpha" operator="in" result="specClip2"/>
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="dsBlur"/>
|
||||
<feOffset in="dsBlur" dx="0" dy="3" result="dsOff"/>
|
||||
<feComponentTransfer in="dsOff" result="dsFinal">
|
||||
<feFuncA type="linear" slope="0.20"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode in="dsFinal"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
<feMergeNode in="specClip2"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="paintGlossHover" x="-12%" y="-30%" width="124%" height="160%" color-interpolation-filters="sRGB">
|
||||
<feMorphology in="SourceAlpha" operator="dilate" radius="2.5" result="dilated"/>
|
||||
<feGaussianBlur in="dilated" stdDeviation="6" result="puddle"/>
|
||||
@@ -276,13 +306,16 @@
|
||||
readers; only the per-page content sits above this layer. -->
|
||||
<div class="page-bg-pattern" aria-hidden="true">
|
||||
<div class="bg-tilt">
|
||||
<div class="bg-row"><span>Plan B</span><span>Piano B</span><span>Plano B</span><span>Plan B</span><span>План Б</span><span>プランB</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>备用计划</span><span>Plan B</span><span>플랜 B</span><span>Plan B</span><span>योजना बी</span></div>
|
||||
<div class="bg-row"><span>Piano B</span><span>Plan B</span><span>Σχέδιο Β</span><span>Plano B</span><span>خطة ب</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>תוכנית ב</span><span>プランB</span><span>Plan B</span><span>План Б</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>备用计划</span><span>Plan B</span><span>Piano B</span><span>플랜 B</span><span>Plan B</span><span>Plano B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>योजना बी</span><span>Plan B</span><span>خطة ب</span><span>Σχέδιο Β</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>プランB</span><span>Plan B</span><span>План Б</span><span>Plan B</span><span>Piano B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>Piano B</span><span>Plano B</span><span>Plan B</span><span>План Б</span><span>プランB</span><span>Plan B</span><span>备用计划</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>备用计划</span><span>Plan B</span><span>플랜 B</span><span>Plan B</span><span>योजना बी</span><span>Plano B</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>Piano B</span><span>Plan B</span><span>Σχέδιο Β</span><span>Plano B</span><span>خطة ب</span><span>Plan B</span><span>プランB</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>תוכנית ב</span><span>プランB</span><span>Plan B</span><span>План Б</span><span>Plan B</span><span>Piano B</span><span>플랜 B</span></div>
|
||||
<div class="bg-row"><span>备用计划</span><span>Plan B</span><span>Piano B</span><span>플랜 B</span><span>Plan B</span><span>Plano B</span><span>План Б</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>योजना बी</span><span>Plan B</span><span>خطة ب</span><span>Σχέδιο Β</span><span>Plan B</span><span>Piano B</span><span>תוכנית ב</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>プランB</span><span>Plan B</span><span>План Б</span><span>Plan B</span><span>Piano B</span><span>备用计划</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>플랜 B</span><span>Plan B</span><span>Plano B</span><span>Plan B</span><span>योजना बी</span><span>Σχέδιο Β</span><span>Plan B</span><span>Piano B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>خطة ب</span><span>Plan B</span><span>プランB</span><span>Plan B</span><span>План Б</span><span>Piano B</span><span>Plan B</span></div>
|
||||
<div class="bg-row"><span>Plan B</span><span>תוכנית ב</span><span>备用计划</span><span>Plan B</span><span>Σχέδιο Β</span><span>Plano B</span><span>Plan B</span><span>योजना बी</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1221,6 +1254,17 @@ function restartQuiz() {
|
||||
}
|
||||
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
|
||||
// Replay the page-bg-pattern row-slide and the hero fadeUp cascade
|
||||
// when returning home from quiz/results. We remove .intro-done for
|
||||
// a frame, then re-add it on the next animation frame — the
|
||||
// animation-name change retriggers each keyframe from scratch.
|
||||
document.body.classList.remove('intro-done')
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
document.body.classList.add('intro-done')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════
|
||||
|
||||
@@ -64,6 +64,7 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo .b { color: var(--red); }
|
||||
.header-right { display: flex; align-items: center; gap: 12px; }
|
||||
@@ -151,9 +152,10 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
/* Mobile floor 42px → desktop ceiling 60px so the embossed pattern
|
||||
reads comfortably across viewport sizes. */
|
||||
font-size: clamp(42px, 8vw, 60px);
|
||||
/* 25% larger than before — mobile floor 52px, desktop ceiling 75px.
|
||||
Keeps the embossed pattern readable on small screens and scales
|
||||
up assertively on wide ones. */
|
||||
font-size: clamp(52px, 10vw, 75px);
|
||||
letter-spacing: 0.04em;
|
||||
/* Emboss: text colour matches the panel (#FAFAFA on every page now);
|
||||
only the shadows render — white highlight top-left, faint dark
|
||||
@@ -185,13 +187,16 @@ body.intro-done .page-bg-pattern .bg-row:nth-child(odd) {
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(even) {
|
||||
animation: bgRowSlideRight 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
|
||||
}
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(1) { animation-delay: 0.00s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(2) { animation-delay: 0.12s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(3) { animation-delay: 0.24s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(4) { animation-delay: 0.36s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(5) { animation-delay: 0.48s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(6) { animation-delay: 0.60s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(7) { animation-delay: 0.72s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(1) { animation-delay: 0.00s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(2) { animation-delay: 0.10s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(3) { animation-delay: 0.20s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(4) { animation-delay: 0.30s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(5) { animation-delay: 0.40s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(6) { animation-delay: 0.50s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(7) { animation-delay: 0.60s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(8) { animation-delay: 0.70s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(9) { animation-delay: 0.80s; }
|
||||
body.intro-done .page-bg-pattern .bg-row:nth-child(10) { animation-delay: 0.90s; }
|
||||
@keyframes bgRowSlideLeft {
|
||||
from { opacity: 0; transform: translateX(-160px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
@@ -318,6 +323,14 @@ html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
|
||||
color: transparent;
|
||||
padding: 0.12em 0.08em 0.2em;
|
||||
}
|
||||
/* Mobile — swap to the lighter paint-gloss filter so the drop shadow
|
||||
is dialled back. Same gradient + gloss, gentler shadow underneath. */
|
||||
@media (max-width: 767px) {
|
||||
.hero h1.paint-3d {
|
||||
filter: url(#paintGlossLight);
|
||||
-webkit-filter: url(#paintGlossLight);
|
||||
}
|
||||
}
|
||||
.hero-sub {
|
||||
position: relative; z-index: 1;
|
||||
font-family: var(--font-body);
|
||||
|
||||
Reference in New Issue
Block a user