* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #050508;
font-family: 'Montserrat', sans-serif;
height: 100vh;
overflow: hidden;
width: 100vw;
}
.scene {
align-items: center;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
position: relative;
width: 100vw;
}
.glow {
animation: gp 5s ease-in-out infinite;
background: radial-gradient(circle, rgba(21, 101, 192, 0.1), transparent 70%);
border-radius: 50%;
height: 500px;
pointer-events: none;
position: absolute;
width: 500px;
z-index: 0;
}
@keyframes gp {
0%, 100% {
opacity: 0.3;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1.4);
}
}
.perspective {
align-items: center;
display: flex;
height: 200px;
justify-content: center;
perspective: 900px;
width: 380px;
z-index: 1;
}
.cube {
animation: spin 12s ease-in-out infinite;
height: 170px;
position: relative;
transform-style: preserve-3d;
width: 340px;
}
@keyframes spin {
0%, 100% {
transform: rotateX(-5deg) rotateY(-32deg);
}
50% {
transform: rotateX(3deg) rotateY(32deg);
}
}
.face {
left: 50%;
overflow: hidden;
position: absolute;
top: 50%;
}
.ribs {
background: repeating-linear-gradient(
90deg,
transparent 0px,
transparent 4px,
rgba(0, 0, 0, 0.1) 4px,
rgba(0, 0, 0, 0.1) 5px,
rgba(255, 255, 255, 0.03) 5px,
rgba(255, 255, 255, 0.03) 6px,
transparent 6px,
transparent 15px
);
inset: 0;
position: absolute;
}
.front {
background: linear-gradient(180deg, #1a6ec8, #1565c0 20%, #1058a8 80%, #0d4a92);
border: 2px solid #0b4080;
height: 170px;
margin-left: -170px;
margin-top: -85px;
transform: translateZ(60px);
width: 340px;
}
.back {
background: linear-gradient(180deg, #12558c, #104e98 30%, #0c4282);
border: 2px solid #093670;
height: 170px;
margin-left: -170px;
margin-top: -85px;
transform: translateZ(-60px) rotateY(180deg);
width: 340px;
}
.right {
background: linear-gradient(180deg, #1a6ec5, #1565c0 30%, #1058a5);
border: 2px solid #0d47a1;
height: 170px;
margin-left: -60px;
margin-top: -85px;
transform: rotateY(90deg) translateZ(170px);
width: 120px;
}
.left {
background: linear-gradient(180deg, #0f4e95, #0c4280 50%, #093872);
border: 2px solid #082e60;
height: 170px;
margin-left: -60px;
margin-top: -85px;
transform: rotateY(-90deg) translateZ(170px);
width: 120px;
}
.top {
background: linear-gradient(180deg, #2080d8, #1a72ca 50%, #1565c0);
border: 2px solid #1462b5;
height: 120px;
margin-left: -170px;
margin-top: -60px;
transform: rotateX(90deg) translateZ(85px);
width: 340px;
}
.bottom {
background: #082a50;
border: 2px solid #061e3a;
height: 120px;
margin-left: -170px;
margin-top: -60px;
transform: rotateX(-90deg) translateZ(85px);
width: 340px;
}
.win {
background: #d8dce0;
border: 3px solid #e8eaec;
border-radius: 2px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
height: 100px;
position: absolute;
top: 24px;
width: 82px;
z-index: 2;
}
.w1 {
left: 48px;
}
.w2 {
left: 178px;
}
.shutter {
background: #c0c4c8;
border-bottom: 2px solid #b0b4b8;
display: flex;
flex-direction: column;
height: 42%;
justify-content: space-between;
padding: 2px 0;
width: 100%;
}
.slat {
background: linear-gradient(180deg, #d5d8dc, #b8bcc0 40%, #c8ccd0);
border-bottom: 1px solid #a0a4a8;
flex: 1;
width: 100%;
}
.slat:last-child {
border-bottom: none;
}
.pane {
background: linear-gradient(155deg, #0a1525, #132a48 35%, #1a3d62 60%, #0e2238);
border-radius: 1px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
flex: 1;
margin: 4px;
}
.door {
background: linear-gradient(180deg, #1260b5, #1055a0 50%, #0e4a90);
border: 2px solid #0a4080;
border-radius: 2px;
bottom: 14px;
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
height: 120px;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 50px;
}
.info {
margin-top: 50px;
text-align: center;
z-index: 1;
}
.brand {
-webkit-background-clip: text;
animation: sh 4s linear infinite;
background: linear-gradient(90deg, #1565c0, #42a5f5, #1e88e5, #64b5f6, #1976d2, #42a5f5, #1565c0);
background-clip: text;
background-size: 300% auto;
color: transparent;
filter: drop-shadow(0 0 25px rgba(21, 101, 192, 0.3));
font-size: 3.4rem;
font-weight: 900;
letter-spacing: 0.35em;
user-select: none;
}
@keyframes sh {
0% {
background-position: 0% center;
}
100% {
background-position: 300% center;
}
}
.sub1 {
color: rgba(100, 181, 246, 0.9);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.18em;
margin-top: 14px;
user-select: none;
}
.sub2 {
color: rgba(100, 181, 246, 0.5);
font-size: 0.88rem;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 520px;
user-select: none;
}
.pbar-wrap {
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
height: 3px;
margin-top: 40px;
overflow: hidden;
width: 340px;
z-index: 1;
}
.pbar {
background: linear-gradient(90deg, #0d47a1, #1976d2, #42a5f5);
border-radius: 3px;
box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
height: 100%;
width: 0%;
}
.redir {
color: rgba(100, 181, 246, 0);
font-size: 0.82rem;
letter-spacing: 0.15em;
margin-top: 14px;
transition: color 0.6s ease;
z-index: 1;
}
.redir.visible {
color: rgba(100, 181, 246, 0.5);
}
@media (max-width: 1024px) {
.perspective {
height: 170px;
width: 320px;
}
.cube {
height: 140px;
width: 280px;
}
.front, .back {
height: 140px;
margin-left: -140px;
margin-top: -70px;
width: 280px;
}
.front {
transform: translateZ(48px);
}
.back {
transform: translateZ(-48px) rotateY(180deg);
}
.right, .left {
height: 140px;
margin-left: -48px;
margin-top: -70px;
width: 96px;
}
.right {
transform: rotateY(90deg) translateZ(140px);
}
.left {
transform: rotateY(-90deg) translateZ(140px);
}
.top, .bottom {
height: 96px;
margin-left: -140px;
margin-top: -48px;
width: 280px;
}
.top {
transform: rotateX(90deg) translateZ(70px);
}
.bottom {
transform: rotateX(-90deg) translateZ(70px);
}
.win {
height: 82px;
top: 20px;
width: 66px;
}
.w1 {
left: 36px;
}
.w2 {
left: 142px;
}
.door {
height: 98px;
width: 40px;
}
.brand {
font-size: 2.6rem;
letter-spacing: 0.28em;
}
.sub1 {
font-size: 1.1rem;
}
.sub2 {
font-size: 0.78rem;
max-width: 400px;
}
.pbar-wrap {
width: 280px;
}
}
@media (max-width: 600px) {
.perspective {
height: 140px;
perspective: 700px;
width: 260px;
}
.cube {
height: 112px;
width: 220px;
}
.front, .back {
height: 112px;
margin-left: -110px;
margin-top: -56px;
width: 220px;
}
.front {
transform: translateZ(38px);
}
.back {
transform: translateZ(-38px) rotateY(180deg);
}
.right, .left {
height: 112px;
margin-left: -38px;
margin-top: -56px;
width: 76px;
}
.right {
transform: rotateY(90deg) translateZ(110px);
}
.left {
transform: rotateY(-90deg) translateZ(110px);
}
.top, .bottom {
height: 76px;
margin-left: -110px;
margin-top: -38px;
width: 220px;
}
.top {
transform: rotateX(90deg) translateZ(56px);
}
.bottom {
transform: rotateX(-90deg) translateZ(56px);
}
.win {
border-width: 2px;
height: 64px;
top: 16px;
width: 50px;
}
.w1 {
left: 26px;
}
.w2 {
left: 110px;
}
.door {
height: 78px;
width: 32px;
}
.info {
margin-top: 36px;
}
.brand {
font-size: 1.7rem;
letter-spacing: 0.2em;
}
.sub1 {
font-size: 0.88rem;
margin-top: 10px;
}
.sub2 {
font-size: 0.65rem;
margin-top: 6px;
max-width: 280px;
}
.pbar-wrap {
margin-top: 30px;
width: 210px;
}
.redir {
font-size: 0.7rem;
}
.glow {
height: 300px;
width: 300px;
}
}
@media (max-width: 360px) {
.perspective {
height: 115px;
width: 210px;
}
.cube {
height: 92px;
width: 180px;
}
.front, .back {
height: 92px;
margin-left: -90px;
margin-top: -46px;
width: 180px;
}
.front {
transform: translateZ(30px);
}
.back {
transform: translateZ(-30px) rotateY(180deg);
}
.right, .left {
height: 92px;
margin-left: -30px;
margin-top: -46px;
width: 60px;
}
.right {
transform: rotateY(90deg) translateZ(90px);
}
.left {
transform: rotateY(-90deg) translateZ(90px);
}
.top, .bottom {
height: 60px;
margin-left: -90px;
margin-top: -30px;
width: 180px;
}
.top {
transform: rotateX(90deg) translateZ(46px);
}
.bottom {
transform: rotateX(-90deg) translateZ(46px);
}
.win {
height: 52px;
top: 12px;
width: 40px;
}
.w1 {
left: 18px;
}
.w2 {
left: 88px;
}
.door {
height: 62px;
width: 26px;
}
.brand {
font-size: 1.3rem;
letter-spacing: 0.15em;
}
.sub1 {
font-size: 0.75rem;
}
.sub2 {
font-size: 0.56rem;
max-width: 220px;
}
.pbar-wrap {
width: 170px;
}
}