370 lines
7.2 KiB
SCSS
370 lines
7.2 KiB
SCSS
.window-frame {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
background: #3a3a3a;
|
|
border: 3px solid #2a2520;
|
|
border-top: 0px;
|
|
box-shadow:
|
|
inset 0 0 20px rgba(0, 0, 0, 0.8),
|
|
0 10px 40px rgba(0, 0, 0, 0.9);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.window-frame::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -20px;
|
|
border: 5px solid #1a1510;
|
|
border-top: 0px;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Cityscape view */
|
|
.cityscape {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#1a2332 0%,
|
|
#2a3a52 30%,
|
|
#4a5a72 60%,
|
|
#6a7a92 100%
|
|
);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sky with slight gradient */
|
|
.starfield {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52 100%);
|
|
}
|
|
|
|
.building-windows {
|
|
width: 100%;
|
|
display: grid;
|
|
|
|
> .window-light {
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
}
|
|
|
|
@mixin buildings-base {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
@for $i from 1 through 20 {
|
|
> .building:nth-child(#{$i}) {
|
|
@if random(4) == 1 {
|
|
opacity: 0;
|
|
}
|
|
|
|
> .building-windows {
|
|
@for $j from 1 through 40 {
|
|
> .window-light:nth-child(#{$j}) {
|
|
@if random(2) == 1 {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
} @else {
|
|
$color-choice: random(100);
|
|
$light-color: null;
|
|
|
|
@if $color-choice <= 85 {
|
|
$hue: 40 + random(20); // 40-60
|
|
$sat: 70 + random(30); // 70-100%
|
|
$light: 50 + random(30); // 50-80%
|
|
$light-color: hsl($hue, $sat * 1%, $light * 1%);
|
|
} @else if $color-choice <= 95 {
|
|
$hue: 320 + random(20); // 320-340 (pink range)
|
|
$sat: 60 + random(40); // 60-100%
|
|
$light: 60 + random(20); // 60-80%
|
|
$light-color: hsl($hue, $sat * 1%, $light * 1%);
|
|
} @else {
|
|
$hue: 260 + random(40); // 260-300 (purple range)
|
|
$sat: 50 + random(50); // 50-100%
|
|
$light: 50 + random(30); // 50-80%
|
|
$light-color: hsl($hue, $sat * 1%, $light * 1%);
|
|
}
|
|
|
|
background: $light-color;
|
|
box-shadow: 0 0 10px $light-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buildings-far {
|
|
@include buildings-base;
|
|
|
|
> .building {
|
|
background: linear-gradient(180deg, #272629 0%, #2a3a52 100%);
|
|
box-shadow:
|
|
inset -2px 0 5px rgba(0, 0, 0, 0.1),
|
|
0 0 10px rgba(42, 38, 31, 0.1);
|
|
|
|
> .building-windows {
|
|
width: 100%;
|
|
height: 50%;
|
|
opacity: 0.3;
|
|
padding: 5%;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 20 {
|
|
> .building:nth-child(#{$i}) {
|
|
@if random(2) == 1 {
|
|
$width: random(10) + 5;
|
|
width: $width * 1%;
|
|
} @else {
|
|
$width: random(15) + 5;
|
|
width: $width + 15px;
|
|
}
|
|
|
|
$height: random(60) + 30;
|
|
height: $height * 1%;
|
|
|
|
> .building-windows {
|
|
grid-template-columns: repeat(#{random(3) + 3}, 1fr);
|
|
|
|
> .window-light {
|
|
aspect-ratio: #{0.5 + random(150) / 100};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buildings-mid {
|
|
@include buildings-base;
|
|
|
|
> .building {
|
|
background: linear-gradient(180deg, #201e22 0%, #2a3a52 100%);
|
|
box-shadow:
|
|
inset -2px 0 5px rgba(0, 0, 0, 0.1),
|
|
0 0 10px rgba(42, 38, 31, 0.1);
|
|
|
|
> .building-windows {
|
|
width: 100%;
|
|
height: 50%;
|
|
opacity: 0.7;
|
|
padding: 5%;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 20 {
|
|
> .building:nth-child(#{$i}) {
|
|
@if random(2) == 1 {
|
|
$width: random(10) + 10;
|
|
width: $width * 1%;
|
|
} @else {
|
|
$width: random(15) + 10;
|
|
width: $width + 15px;
|
|
}
|
|
|
|
$height: random(20) + 30;
|
|
height: $height * 1%;
|
|
|
|
> .building-windows {
|
|
grid-template-columns: repeat(#{random(3) + 3}, 1fr);
|
|
|
|
> .window-light {
|
|
aspect-ratio: #{0.5 + random(150) / 100};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buildings-near {
|
|
@include buildings-base;
|
|
|
|
> .building {
|
|
background: linear-gradient(180deg, #121113 0%, #182230 100%);
|
|
box-shadow:
|
|
inset -2px 0 5px rgba(0, 0, 0, 0.1),
|
|
0 0 10px rgba(42, 38, 31, 0.1);
|
|
|
|
> .building-windows {
|
|
width: 100%;
|
|
height: 50%;
|
|
opacity: 0.8;
|
|
padding: 5%;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 20 {
|
|
> .building:nth-child(#{$i}) {
|
|
@if random(2) == 1 {
|
|
$width: random(3) * 7;
|
|
width: $width * 1%;
|
|
} @else {
|
|
$width: random(10) + 50;
|
|
width: $width + 15px;
|
|
}
|
|
|
|
$height: random(3) * 10;
|
|
height: $height * 1%;
|
|
|
|
> .building-windows {
|
|
grid-template-columns: repeat(#{random(2) + 3}, 1fr);
|
|
|
|
> .window-light {
|
|
aspect-ratio: #{0.5 + random(150) / 100};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Buildings container */
|
|
.buildings {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
|
|
> .building {
|
|
animation: buildingGlow 4s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
.building {
|
|
position: relative;
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
|
|
box-shadow:
|
|
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
|
0 0 20px rgba(255, 200, 100, 0.1);
|
|
}
|
|
|
|
/* Building windows */
|
|
.building-windows {
|
|
gap: 10%;
|
|
padding: 5% 5%;
|
|
}
|
|
|
|
.window-light {
|
|
background: #ffd700;
|
|
box-shadow: 0 0 10px #ffd700;
|
|
animation: windowFlicker 5s ease-in-out infinite;
|
|
}
|
|
|
|
.window-light:nth-child(odd) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.window-light:nth-child(3n) {
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.window-light:nth-child(4n) {
|
|
animation-delay: 5.5s;
|
|
}
|
|
|
|
@keyframes windowFlicker {
|
|
0%,
|
|
100% {
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes buildingGlow {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
|
0 0 20px rgba(255, 200, 100, 0.1);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
|
0 0 30px rgba(255, 200, 100, 0.2);
|
|
}
|
|
}
|
|
|
|
/* Dirt and grime on window */
|
|
.window-grime {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 30%,
|
|
rgba(50, 40, 30, 0.2) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 60%,
|
|
rgba(40, 35, 25, 0.15) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 50% 80%,
|
|
rgba(45, 38, 28, 0.18) 0%,
|
|
transparent 45%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 6;
|
|
}
|
|
|
|
/* Glass reflection */
|
|
.glass-reflection {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
transparent 30%,
|
|
transparent 70%,
|
|
rgba(255, 255, 255, 0.05) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 7;
|
|
}
|
|
|
|
/* Ambient light from city */
|
|
.ambient-light {
|
|
position: absolute;
|
|
bottom: -50px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 200%;
|
|
height: 200px;
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
rgba(255, 200, 100, 0.2) 0%,
|
|
transparent 70%
|
|
);
|
|
filter: blur(40px);
|
|
animation: ambientPulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ambientPulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|