Redesign day mode: pink sky, clouds, grass and gravestone
Vaporwave daytime — orchid-to-peach pink sky, green lawn under the neon grid, three drifting flat-bottomed clouds with pink underlight, stars kept as faint ghosts (0.12) instead of vanishing. The coffin becomes a grounded gravestone: rounded lilac granite with engraved R.I.P. (no religious symbols), grass mound, tufts and a flattened-ellipse shadow so it reads as planted on the lawn, not floating. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015HtPHsTnDcLVSCiF5FGHZj
This commit is contained in:
vini
parent
a80b22bdcc
commit
a4129eddf0
2 changed files with 127 additions and 44 deletions
|
|
@ -1132,7 +1132,8 @@ body.chuva #sunChuvaFace { opacity: 1; transition: opacity 5s ease; }
|
|||
Balada e chuva têm prioridade sobre o visual diurno.
|
||||
============================================================ */
|
||||
|
||||
/* Céu diurno: azul lá em cima, rosa no horizonte, lilás sob a grade */
|
||||
/* Céu diurno vaporwave: rosa orquídea -> pêssego no horizonte,
|
||||
e o chão vira gramado verde sob a grade neon */
|
||||
#daySky {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -1140,20 +1141,54 @@ body.chuva #sunChuvaFace { opacity: 1; transition: opacity 5s ease; }
|
|||
opacity: 0;
|
||||
transition: opacity 12s ease;
|
||||
background: linear-gradient(to bottom,
|
||||
#5fb2ef 0%,
|
||||
#8fd0f7 32%,
|
||||
#cfeaff 50%,
|
||||
#ffd9ec 58.5%,
|
||||
#f2e2ff 58.6%,
|
||||
#d9c8f0 100%);
|
||||
#c86fe0 0%,
|
||||
#f18ade 26%,
|
||||
#ffaede 44%,
|
||||
#ffcfe0 54%,
|
||||
#ffe4c9 58.5%,
|
||||
#86e29e 58.6%,
|
||||
#4fbb6b 78%,
|
||||
#2e9550 100%);
|
||||
}
|
||||
body.dia:not(.balada):not(.chuva) #daySky { opacity: 1; }
|
||||
|
||||
/* Estrelas, nebulosas e meteoros ofuscados pela luz do dia */
|
||||
body.dia:not(.balada):not(.chuva) #starfield { opacity: 0; transition: opacity 12s ease; }
|
||||
/* Estrelas viram fantasmas de dia; nebulosas e meteoros somem */
|
||||
body.dia:not(.balada):not(.chuva) #starfield { opacity: 0.12; transition: opacity 12s ease; }
|
||||
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 */
|
||||
.day-cloud {
|
||||
position: absolute;
|
||||
border-radius: 10vh;
|
||||
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;
|
||||
}
|
||||
.day-cloud::before, .day-cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: inherit;
|
||||
}
|
||||
.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); }
|
||||
}
|
||||
body.dia:not(.balada):not(.chuva) .day-cloud { opacity: 0.92; }
|
||||
|
||||
/* O sol vira sol de verdade: disco quente, sem listras retrô */
|
||||
#sunDiaBg {
|
||||
position: absolute;
|
||||
|
|
@ -1196,55 +1231,96 @@ body.dia:not(.balada):not(.chuva) .horizon {
|
|||
box-shadow: 0 0 25px rgba(255,210,130,0.7), 0 0 80px rgba(255,190,110,0.25);
|
||||
}
|
||||
|
||||
/* De dia o esqueleto dorme: some o dançarino, aparece o caixão */
|
||||
/* De dia o esqueleto dorme: some o dançarino, fica a lápide no gramado.
|
||||
Perspectiva: monte e sombra são elipses bem achatadas no plano do chão,
|
||||
e a pedra fica plantada entre o horizonte (41.5%) e a borda inferior. */
|
||||
body.dia:not(.balada):not(.chuva) .robot-wrap { opacity: 0 !important; }
|
||||
.coffin-wrap {
|
||||
.grave-wrap {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 28%;
|
||||
bottom: 22%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
body.dia:not(.balada):not(.chuva) .coffin-wrap { opacity: 1; }
|
||||
.coffin-shade {
|
||||
body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
|
||||
|
||||
/* sombra projetada no gramado (elipse rasa = objeto apoiado no plano) */
|
||||
.grave-shade {
|
||||
position: absolute;
|
||||
bottom: -1.6vh;
|
||||
bottom: -2.6vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 22vh;
|
||||
height: 3.2vh;
|
||||
width: 30vh;
|
||||
height: 4.6vh;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse, rgba(40,20,40,0.38), transparent 70%);
|
||||
background: radial-gradient(ellipse, rgba(25,60,35,0.42), transparent 68%);
|
||||
}
|
||||
.coffin {
|
||||
|
||||
/* montinho de terra gramado aos pés da pedra */
|
||||
.grave-mound {
|
||||
position: absolute;
|
||||
bottom: -1.8vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
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);
|
||||
}
|
||||
|
||||
/* pedra: topo arredondado, granito lilás com luz rosa do céu */
|
||||
.gravestone {
|
||||
position: relative;
|
||||
width: 15vh;
|
||||
height: 34vh;
|
||||
clip-path: polygon(32% 0%, 68% 0%, 100% 26%, 73% 100%, 27% 100%, 0% 26%);
|
||||
height: 19vh;
|
||||
border-radius: 7.5vh 7.5vh 0.8vh 0.8vh;
|
||||
background:
|
||||
linear-gradient(105deg, rgba(255,255,255,0.10), rgba(0,0,0,0.24) 62%),
|
||||
linear-gradient(to bottom, #7a4a28 0%, #5c3620 46%, #452716 100%);
|
||||
filter: drop-shadow(0 6px 18px rgba(60,30,20,0.45));
|
||||
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);
|
||||
}
|
||||
.coffin::before { /* costura da tampa */
|
||||
content: '';
|
||||
/* inscrição gravada (rebaixo: sombra clara embaixo, escura em cima) */
|
||||
.grave-text {
|
||||
position: absolute;
|
||||
left: 6%; right: 6%;
|
||||
top: 26%;
|
||||
height: 3px;
|
||||
background: rgba(0,0,0,0.45);
|
||||
border-radius: 2px;
|
||||
top: 23%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', monospace;
|
||||
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);
|
||||
}
|
||||
.coffin-cross-v, .coffin-cross-h {
|
||||
.grave-line {
|
||||
position: absolute;
|
||||
background: linear-gradient(to bottom, #e8c87e, #c9a250);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 10px rgba(255,225,150,0.55);
|
||||
top: 48%;
|
||||
left: 22%; right: 22%;
|
||||
height: 0.55vh;
|
||||
border-radius: 0.3vh;
|
||||
background: rgba(64,54,96,0.55);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.30);
|
||||
}
|
||||
.coffin-cross-v { left: 50%; top: 36%; width: 0.9vh; height: 24%; transform: translateX(-50%); }
|
||||
.coffin-cross-h { left: 50%; top: 42%; width: 34%; height: 0.9vh; transform: translateX(-50%); }
|
||||
.grave-line.short { top: 56%; left: 30%; right: 30%; }
|
||||
|
||||
/* tufos de grama 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);
|
||||
}
|
||||
.tuft-l { left: -8vh; }
|
||||
.tuft-r { right: -7vh; transform: scaleX(-1); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -1254,6 +1330,9 @@ body.dia:not(.balada):not(.chuva) .coffin-wrap { opacity: 1; }
|
|||
|
||||
<!-- Céu diurno (fade conforme o sol real sobe) -->
|
||||
<div id="daySky"></div>
|
||||
<div class="day-cloud cloud-a"></div>
|
||||
<div class="day-cloud cloud-b"></div>
|
||||
<div class="day-cloud cloud-c"></div>
|
||||
|
||||
<!-- Nebula blobs -->
|
||||
<div class="nebula nebula-a"></div>
|
||||
|
|
@ -1295,13 +1374,17 @@ body.dia:not(.balada):not(.chuva) .coffin-wrap { opacity: 1; }
|
|||
</div>
|
||||
</div><!-- .robot-wrap -->
|
||||
|
||||
<!-- Caixão do esqueleto (modo dia) -->
|
||||
<div class="coffin-wrap">
|
||||
<div class="coffin-shade"></div>
|
||||
<div class="coffin">
|
||||
<div class="coffin-cross-v"></div>
|
||||
<div class="coffin-cross-h"></div>
|
||||
<!-- Lápide do esqueleto (modo dia) -->
|
||||
<div class="grave-wrap">
|
||||
<div class="grave-shade"></div>
|
||||
<div class="grave-mound"></div>
|
||||
<div class="gravestone">
|
||||
<div class="grave-text">R.I.P.</div>
|
||||
<div class="grave-line"></div>
|
||||
<div class="grave-line short"></div>
|
||||
</div>
|
||||
<div class="grass-tuft tuft-l"></div>
|
||||
<div class="grass-tuft tuft-r"></div>
|
||||
</div>
|
||||
|
||||
<!-- VU Meter -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue