File size: 2,147 Bytes
4d1cb0c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | /* Cinematic Overlay Styles */
.cinematic-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(29, 161, 242, 0.98);
/* Classic Twitter Blue #1DA1F2 */
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: opacity 0.8s ease-in-out;
backdrop-filter: blur(10px);
}
.cinematic-overlay.active {
opacity: 1;
}
.overlay-content {
text-align: center;
color: var(--clr-white);
}
.overlay-logo {
font-size: 7rem;
color: #ffffff;
margin-bottom: 30px;
opacity: 0;
transform: scale(0.5);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cinematic-overlay.active .overlay-logo {
opacity: 1;
transform: scale(1);
filter: drop-shadow(0 0 20px rgba(29, 174, 255, 0.6));
}
.overlay-title {
font-family: 'Play', sans-serif;
font-size: 3rem;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 10px;
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease 0.4s;
color: #ffffff;
/* Solid white for max contrast */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cinematic-overlay.active .overlay-title {
opacity: 1;
transform: translateY(0);
}
.overlay-author {
font-family: 'Play', sans-serif;
font-size: 1rem;
font-size: 1rem;
color: #ffffff;
/* Solid white */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 40px;
margin-bottom: 15px;
opacity: 0;
transition: opacity 1s ease 0.8s;
}
.cinematic-overlay.active .overlay-author {
opacity: 1;
}
.overlay-names {
font-size: 1.5rem;
font-weight: 300;
opacity: 0;
transform: scale(0.9);
transition: all 1s ease 1s;
}
.cinematic-overlay.active .overlay-names {
opacity: 1;
transform: scale(1);
}
.overlay-names .separator {
color: #ffffff;
margin: 0 15px;
font-weight: 700;
} |