feat: refine nightdrive world and authored car
Integrate the Blender grand tourer with a cohesive shader-driven road, terrain, atmosphere, lighting, and post-processing pass. Refine responsive drive dynamics and sign lifecycle behavior, and add durable visual, accessibility, and performance verification evidence.
This commit is contained in:
@@ -28,8 +28,8 @@
|
||||
.journey-poster {
|
||||
object-fit: cover;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 48%, rgb(135 28 105 / 58%) 0, transparent 44%),
|
||||
linear-gradient(180deg, #02040b 0 30%, #08071a 49%, #1b0b27 67%, #02060b 100%);
|
||||
radial-gradient(ellipse at 50% 47%, rgb(242 31 139 / 34%) 0 7%, rgb(110 21 113 / 25%) 20%, transparent 48%),
|
||||
linear-gradient(180deg, #01030a 0 25%, #070817 43%, #1b0b27 59%, #02060b 100%);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -55,8 +55,8 @@
|
||||
}
|
||||
|
||||
.journey-poster__sun {
|
||||
inset: 33% auto auto 50%;
|
||||
inline-size: clamp(7rem, 14vw, 15rem);
|
||||
inset: 34% auto auto 50%;
|
||||
inline-size: clamp(8rem, 13.5vw, 14.5rem);
|
||||
aspect-ratio: 1;
|
||||
translate: -50% 0;
|
||||
border-radius: 50%;
|
||||
@@ -68,24 +68,29 @@
|
||||
transparent 11.5% 15%
|
||||
),
|
||||
linear-gradient(180deg, #ff4d9b, #d52378 58%, #8e155c);
|
||||
box-shadow: 0 0 3rem rgb(255 44 151 / 38%);
|
||||
box-shadow:
|
||||
0 0 2.4rem rgb(255 44 151 / 42%),
|
||||
0 1.2rem 8rem 2.4rem rgb(126 29 143 / 28%);
|
||||
}
|
||||
|
||||
.journey-poster__terrain {
|
||||
inset: 48% -8% -10%;
|
||||
inset: 45% -12% -8%;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, transparent 0 9%, rgb(76 201 220 / 16%) 9.2% 9.5%, transparent 9.7% 13%),
|
||||
repeating-linear-gradient(78deg, transparent 0 7.5%, rgb(76 201 220 / 14%) 7.7% 7.9%, transparent 8.1% 12%),
|
||||
linear-gradient(180deg, rgb(79 18 76 / 70%), rgb(2 8 15 / 92%));
|
||||
clip-path: polygon(0 17%, 13% 4%, 27% 15%, 39% 2%, 50% 14%, 64% 4%, 78% 16%, 90% 5%, 100% 18%, 100% 100%, 0 100%);
|
||||
repeating-linear-gradient(0deg, transparent 0 7.6%, rgb(84 221 233 / 19%) 7.8% 8.15%, transparent 8.35% 12%),
|
||||
repeating-linear-gradient(76deg, transparent 0 6.8%, rgb(220 50 168 / 17%) 7% 7.25%, transparent 7.5% 11%),
|
||||
repeating-linear-gradient(104deg, transparent 0 8.4%, rgb(73 207 228 / 14%) 8.6% 8.85%, transparent 9.1% 13%),
|
||||
linear-gradient(180deg, rgb(104 21 101 / 34%), rgb(3 10 17 / 86%));
|
||||
clip-path: polygon(0 17%, 6% 8%, 12% 20%, 18% 13%, 24% 25%, 30% 17%, 36% 29%, 42% 23%, 47% 34%, 50% 41%, 53% 34%, 58% 23%, 64% 29%, 70% 17%, 76% 25%, 82% 13%, 88% 20%, 94% 8%, 100% 17%, 100% 100%, 0 100%);
|
||||
filter: drop-shadow(0 -0.35rem 1.5rem rgb(223 40 169 / 22%));
|
||||
}
|
||||
|
||||
.journey-poster__road {
|
||||
inset: 48% -14% -12%;
|
||||
inset: 46% -8% -10%;
|
||||
background:
|
||||
repeating-linear-gradient(180deg, transparent 0 7%, rgb(229 158 65 / 78%) 7.4% 9%, transparent 9.4% 15%) 50% 0 / clamp(0.22rem, 0.55vw, 0.7rem) 100% no-repeat,
|
||||
linear-gradient(180deg, #050811, #000207);
|
||||
clip-path: polygon(49.3% 0, 50.7% 0, 84% 100%, 16% 100%);
|
||||
repeating-linear-gradient(180deg, transparent 0 7%, rgb(244 177 80 / 84%) 7.35% 8.35%, transparent 8.7% 15%) 50% 0 / clamp(0.15rem, 0.32vw, 0.34rem) 100% no-repeat,
|
||||
linear-gradient(90deg, rgb(46 188 212 / 15%), transparent 5% 95%, rgb(46 188 212 / 15%)),
|
||||
linear-gradient(180deg, #050813, #000207);
|
||||
clip-path: polygon(49.55% 0, 50.45% 0, 76% 100%, 24% 100%);
|
||||
}
|
||||
|
||||
.journey-poster__rail {
|
||||
@@ -95,37 +100,45 @@
|
||||
}
|
||||
|
||||
.journey-poster__rail--left {
|
||||
clip-path: polygon(49.15% 48%, 49.35% 48%, 1.2% 100%, 0 100%);
|
||||
clip-path: polygon(49.38% 46%, 49.5% 46%, 24.3% 100%, 23.55% 100%);
|
||||
}
|
||||
|
||||
.journey-poster__rail--right {
|
||||
clip-path: polygon(50.65% 48%, 50.85% 48%, 100% 100%, 98.8% 100%);
|
||||
clip-path: polygon(50.5% 46%, 50.62% 46%, 76.45% 100%, 75.7% 100%);
|
||||
}
|
||||
|
||||
.journey-poster__car {
|
||||
inset: auto auto 1.2% 50%;
|
||||
inline-size: clamp(7.5rem, 18vw, 19rem);
|
||||
block-size: clamp(3.2rem, 7vw, 7.4rem);
|
||||
inset: auto auto 1.6% 50%;
|
||||
inline-size: clamp(9.5rem, 20vw, 21rem);
|
||||
block-size: clamp(3.6rem, 7.4vw, 7.8rem);
|
||||
translate: -50% 0;
|
||||
background: #051526;
|
||||
clip-path: polygon(22% 0, 78% 0, 100% 70%, 94% 100%, 6% 100%, 0 70%);
|
||||
filter: drop-shadow(0 0.8rem 1.2rem rgb(0 0 0 / 76%));
|
||||
border-radius: 40% 40% 8% 8% / 34% 34% 12% 12%;
|
||||
background:
|
||||
linear-gradient(106deg, transparent 0 24%, rgb(13 41 56 / 98%) 24.5% 42%, rgb(3 13 22 / 98%) 42.5% 57.5%, rgb(13 41 56 / 98%) 58% 75.5%, transparent 76%) 50% 6% / 78% 48% no-repeat,
|
||||
linear-gradient(180deg, #173444 0 26%, #0a2231 46%, #06131f 68%, #020711 100%);
|
||||
clip-path: polygon(29% 0, 71% 0, 82% 25%, 95% 43%, 100% 76%, 94% 100%, 6% 100%, 0 76%, 5% 43%, 18% 25%);
|
||||
filter:
|
||||
drop-shadow(0 0.8rem 1.2rem rgb(0 0 0 / 82%))
|
||||
drop-shadow(0 0.2rem 1.1rem rgb(46 181 207 / 12%));
|
||||
}
|
||||
|
||||
.journey-poster__car::before {
|
||||
position: absolute;
|
||||
inset: 68% 10% auto;
|
||||
block-size: clamp(0.24rem, 0.48vw, 0.5rem);
|
||||
background: #ff315f;
|
||||
box-shadow: 0 0 0.8rem rgb(255 49 95 / 48%);
|
||||
inset: 61% 8% auto;
|
||||
block-size: clamp(0.24rem, 0.38vw, 0.42rem);
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(90deg, #ff244f, #ff7592 48% 52%, #ff244f);
|
||||
box-shadow: 0 0 1rem rgb(255 49 95 / 64%);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.journey-poster__car::after {
|
||||
position: absolute;
|
||||
inset: 82% 14% auto;
|
||||
block-size: 0.22rem;
|
||||
border-inline: clamp(0.7rem, 1.5vw, 1.5rem) solid #67d4e4;
|
||||
inset: 88% 20% auto;
|
||||
block-size: 0.16rem;
|
||||
border-radius: 50%;
|
||||
background: #67d4e4;
|
||||
box-shadow: 0 0 1.1rem 0.36rem rgb(61 208 229 / 48%);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user