Tone down day mode: dusty sky, fog-like clouds, gothic grave
Sky shifts to dusty purple-rose, ground to moss green. Clouds drop the cartoon puffs for the night fog's language: heavily blurred ellipses drifting slowly in dusty pink. The gravestone goes gothic — dark slate ogival arch, slight tilt, crack, moss creeping up the base, engraved skull glyph above the R.I.P., serif inscription, moss-toned mound and grass tufts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015HtPHsTnDcLVSCiF5FGHZj
This commit is contained in:
vini
parent
8181315a8c
commit
13f71289a6
1 changed files with 95 additions and 58 deletions
|
|
@ -1141,14 +1141,14 @@ body.chuva #sunChuvaFace { opacity: 1; transition: opacity 5s ease; }
|
|||
opacity: 0;
|
||||
transition: opacity 12s ease;
|
||||
background: linear-gradient(to bottom,
|
||||
#c86fe0 0%,
|
||||
#f18ade 26%,
|
||||
#ffaede 44%,
|
||||
#ffcfe0 60%,
|
||||
#ffe4c9 66%,
|
||||
#86e29e 66.1%,
|
||||
#4fbb6b 82%,
|
||||
#2e9550 100%);
|
||||
#7d4f94 0%,
|
||||
#b0619f 26%,
|
||||
#d183b3 44%,
|
||||
#e3a3b8 60%,
|
||||
#edc19e 66%,
|
||||
#5a7d4a 66.1%,
|
||||
#3e5c35 82%,
|
||||
#2a4126 100%);
|
||||
}
|
||||
body.dia:not(.balada):not(.chuva) #daySky { opacity: 1; }
|
||||
|
||||
|
|
@ -1157,37 +1157,40 @@ body.dia:not(.balada):not(.chuva) #starfield { opacity: 0.12; transition: opaci
|
|||
body.dia:not(.balada):not(.chuva) .nebula { opacity: 0; }
|
||||
body.dia:not(.balada):not(.chuva) #meteorLayer { opacity: 0; }
|
||||
|
||||
/* Nuvens diurnas: chapadas embaixo, fofas em cima, rosadas por baixo */
|
||||
/* Nuvens diurnas: mesmo vocabulário da névoa noturna — elipses muito
|
||||
borradas derivando devagar, em rosa empoeirado */
|
||||
.day-cloud {
|
||||
position: absolute;
|
||||
border-radius: 10vh;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 12s ease;
|
||||
background: linear-gradient(to bottom, #fffdfe 0%, #ffe4f2 62%, #ffc7e6 100%);
|
||||
box-shadow: 0 1.6vh 3.2vh rgba(255,110,200,0.20);
|
||||
animation: cloudDrift ease-in-out infinite alternate;
|
||||
filter: blur(42px);
|
||||
background: radial-gradient(ellipse,
|
||||
rgba(238,205,228,0.60) 0%, rgba(216,168,205,0.30) 55%, transparent 75%);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.day-cloud::before, .day-cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: inherit;
|
||||
.cloud-a { width: 46vh; height: 11vh; top: 10%; left: 8%;
|
||||
animation: dayCloudDrift1 26s ease-in-out infinite alternate; }
|
||||
.cloud-b { width: 38vh; height: 9vh; top: 22%; right: 10%;
|
||||
animation: dayCloudDrift2 34s ease-in-out infinite alternate;
|
||||
animation-delay: -12s; }
|
||||
.cloud-c { width: 30vh; height: 7vh; top: 36%; left: 32%;
|
||||
animation: dayCloudDrift3 22s ease-in-out infinite alternate;
|
||||
animation-delay: -7s; }
|
||||
@keyframes dayCloudDrift1 {
|
||||
from { transform: translateX(-2.5vw) scaleX(1); }
|
||||
to { transform: translateX(2.5vw) scaleX(1.14); }
|
||||
}
|
||||
.cloud-a { width: 30vh; height: 7.5vh; top: 9%; left: 10%; animation-duration: 110s; }
|
||||
.cloud-a::before { width: 11vh; height: 11vh; top: -5.2vh; left: 5vh; }
|
||||
.cloud-a::after { width: 14vh; height: 14vh; top: -6.4vh; right: 6vh; }
|
||||
.cloud-b { width: 22vh; height: 5.5vh; top: 20%; right: 12%; animation-duration: 140s; animation-delay: -40s; }
|
||||
.cloud-b::before { width: 8vh; height: 8vh; top: -3.8vh; left: 3.6vh; }
|
||||
.cloud-b::after { width: 10vh; height: 10vh; top: -4.6vh; right: 4.4vh; }
|
||||
.cloud-c { width: 16vh; height: 4.2vh; top: 33%; left: 30%; animation-duration: 90s; animation-delay: -70s; }
|
||||
.cloud-c::before { width: 6vh; height: 6vh; top: -2.8vh; left: 2.6vh; }
|
||||
.cloud-c::after { width: 7.5vh; height: 7.5vh; top: -3.4vh; right: 3.2vh; }
|
||||
@keyframes cloudDrift {
|
||||
from { transform: translateX(-3vw); }
|
||||
to { transform: translateX(3vw); }
|
||||
@keyframes dayCloudDrift2 {
|
||||
from { transform: translateX(2vw) scaleX(0.94); }
|
||||
to { transform: translateX(-2.5vw) scaleX(1.10); }
|
||||
}
|
||||
body.dia:not(.balada):not(.chuva) .day-cloud { opacity: 0.92; }
|
||||
@keyframes dayCloudDrift3 {
|
||||
from { transform: translateX(-1.5vw) scaleX(1.05); }
|
||||
to { transform: translateX(2vw) scaleX(0.90); }
|
||||
}
|
||||
body.dia:not(.balada):not(.chuva) .day-cloud { opacity: 0.8; }
|
||||
|
||||
/* O sol vira sol de verdade: disco quente, sem listras retrô */
|
||||
#sunDiaBg {
|
||||
|
|
@ -1255,10 +1258,10 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
|
|||
width: 30vh;
|
||||
height: 4.6vh;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse, rgba(25,60,35,0.42), transparent 68%);
|
||||
background: radial-gradient(ellipse, rgba(12,26,16,0.50), transparent 68%);
|
||||
}
|
||||
|
||||
/* montinho de terra gramado aos pés da pedra */
|
||||
/* montinho de terra musgoso aos pés da pedra */
|
||||
.grave-mound {
|
||||
position: absolute;
|
||||
bottom: -1.8vh;
|
||||
|
|
@ -1267,57 +1270,90 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
|
|||
width: 26vh;
|
||||
height: 5vh;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, #6fd486 0%, #43a75f 60%, #2e8348 100%);
|
||||
box-shadow: inset 0 0.7vh 1.2vh rgba(255,255,210,0.30);
|
||||
background: linear-gradient(to bottom, #6d955c 0%, #4a6c3f 60%, #34502c 100%);
|
||||
box-shadow: inset 0 0.7vh 1.2vh rgba(225,232,190,0.20);
|
||||
}
|
||||
|
||||
/* pedra: topo arredondado, granito lilás com luz rosa do céu */
|
||||
/* pedra gótica: arco ogival, ardósia escura, torta e comida pelo tempo */
|
||||
.gravestone {
|
||||
position: relative;
|
||||
width: 15vh;
|
||||
height: 19vh;
|
||||
border-radius: 7.5vh 7.5vh 0.8vh 0.8vh;
|
||||
height: 21vh;
|
||||
transform: rotate(-2.5deg);
|
||||
clip-path: polygon(50% 0%, 60% 2%, 71% 8%, 81% 18%, 88% 32%, 91% 50%,
|
||||
91% 100%, 9% 100%, 9% 50%, 12% 32%, 19% 18%, 29% 8%, 40% 2%);
|
||||
background:
|
||||
linear-gradient(115deg,
|
||||
rgba(255,170,225,0.38) 0%, rgba(255,255,255,0.10) 34%,
|
||||
rgba(30,18,55,0.28) 100%),
|
||||
linear-gradient(to bottom, #bfaed4 0%, #9789b4 55%, #6f6494 100%);
|
||||
box-shadow:
|
||||
inset 0 -1.4vh 2.2vh rgba(28,16,52,0.38),
|
||||
0 0 26px rgba(255,120,200,0.30);
|
||||
rgba(209,131,179,0.26) 0%, rgba(255,255,255,0.06) 34%,
|
||||
rgba(8,5,18,0.50) 100%),
|
||||
linear-gradient(to bottom, #4a4258 0%, #363048 55%, #241f34 100%);
|
||||
box-shadow: inset 0 -1.4vh 2.4vh rgba(8,5,20,0.55);
|
||||
filter: drop-shadow(0 0 14px rgba(209,131,179,0.22));
|
||||
}
|
||||
/* musgo subindo pela base da pedra */
|
||||
.gravestone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 18% 102%, rgba(74,105,60,0.60), transparent 42%),
|
||||
radial-gradient(circle at 78% 103%, rgba(58,88,46,0.50), transparent 38%),
|
||||
radial-gradient(circle at 50% 108%, rgba(66,96,52,0.40), transparent 50%);
|
||||
}
|
||||
/* rachadura descendo do arco */
|
||||
.gravestone::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 30%;
|
||||
width: 0.35vh;
|
||||
height: 30%;
|
||||
transform: rotate(16deg);
|
||||
border-radius: 1px;
|
||||
background: rgba(8,5,20,0.60);
|
||||
box-shadow: 1px 0 0 rgba(255,255,255,0.07);
|
||||
}
|
||||
.grave-skull {
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 3.4vh;
|
||||
color: #8d81a8;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.70);
|
||||
}
|
||||
/* inscrição gravada (rebaixo: sombra clara embaixo, escura em cima) */
|
||||
.grave-text {
|
||||
position: absolute;
|
||||
top: 23%;
|
||||
top: 33%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-weight: bold;
|
||||
font-size: 3vh;
|
||||
letter-spacing: 0.3vh;
|
||||
color: #4c4170;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.38), 0 -1px 1px rgba(18,10,40,0.65);
|
||||
font-size: 2.7vh;
|
||||
letter-spacing: 0.42vh;
|
||||
color: #9187ae;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.20), 0 -1px 1px rgba(5,3,14,0.80);
|
||||
}
|
||||
.grave-line {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
left: 22%; right: 22%;
|
||||
height: 0.55vh;
|
||||
top: 52%;
|
||||
left: 24%; right: 24%;
|
||||
height: 0.5vh;
|
||||
border-radius: 0.3vh;
|
||||
background: rgba(64,54,96,0.55);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.30);
|
||||
background: rgba(14,10,30,0.62);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.14);
|
||||
}
|
||||
.grave-line.short { top: 56%; left: 30%; right: 30%; }
|
||||
.grave-line.short { top: 60%; left: 32%; right: 32%; }
|
||||
|
||||
/* tufos de grama para amarrar a base na cena */
|
||||
/* tufos de capim para amarrar a base na cena */
|
||||
.grass-tuft {
|
||||
position: absolute;
|
||||
bottom: -0.6vh;
|
||||
width: 3vh;
|
||||
height: 3.6vh;
|
||||
clip-path: polygon(8% 100%, 22% 22%, 36% 100%, 50% 0%, 64% 100%, 80% 30%, 94% 100%);
|
||||
background: linear-gradient(to top, #2e8a48, #74dd8d);
|
||||
background: linear-gradient(to top, #355730, #6f9a5e);
|
||||
}
|
||||
.tuft-l { left: -8vh; }
|
||||
.tuft-r { right: -7vh; transform: scaleX(-1); }
|
||||
|
|
@ -1379,6 +1415,7 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
|
|||
<div class="grave-shade"></div>
|
||||
<div class="grave-mound"></div>
|
||||
<div class="gravestone">
|
||||
<div class="grave-skull">☠︎</div>
|
||||
<div class="grave-text">R.I.P.</div>
|
||||
<div class="grave-line"></div>
|
||||
<div class="grave-line short"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue