.page-content {
max-width: 700px;
font-family: "Roboto", sans-serif;
margin: 0 auto;
}
.page-content p {
line-height: 2;
}
.popup-overlay {
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
opacity: 0;
transition: all 700ms ease;
}
.popup-overlay.active {
opacity: 1;
}
.popup-container {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, calc(-50% + 50px));
font-family: "Raleway", sans-serif;
color: #fff;
padding: 12px 0;
box-shadow: 0 6px 55px -10px rgba(0, 0, 0, 0.7);
background-image: url("images/bg.png");
background-size: cover;
opacity: 0;
pointer-events: none;
transition: all 700ms ease;
}
.popup-overlay.active .popup-container {
transform: translate(-50%, -50%);
opacity: 1;
pointer-events: auto;
}
.popup-overlay.active .left .bg-1,
.popup-overlay.active .left .bg-2 {
transform: translateX(0);
}
.popup-container,
.popup-container * {
box-sizing: border-box;
}
.popup-container .left img {
position: absolute;
bottom: 0;
}
.popup-container .left .bg-1 {
left: 80px;
transform: translateX(-20px);
transition: all 1700ms ease;
}
.popup-container .left .bg-2 {
left: 64px;
transform: translateX(-20px);
transition: all 1700ms ease;
transition-delay: 600ms;
}
.popup-container .right {
width: 540px;
padding: 16px;
padding-left: 250px;
}
.popup-container .skip-button {
position: absolute;
top: 4px;
right: 4px;
background: #000;
padding: 2px 6px;
font-size: 14px;
cursor: pointer;
}
.popup-container p.logo {
font-size: 13px;
color: #febdff;
text-transform: uppercase;
margin-bottom: 4px;
}
.popup-container h2.popup-heading {
font-size: 30px;
text-transform: uppercase;
margin: 0;
}
.popup-container p.description {
font-size: 15px;
line-height: 1.8;
}
.popup-container .visit-button {
background: #fff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: #000;
padding: 8px 24px;
margin-top: 8px;
display: inline-block;
}
.popup-container .hero-image-small {
display: none;
}
@media (max-width: 560px) {
.popup-container .left .bg-1,
.popup-container .left .bg-2,
.popup-container .left .hero-image {
display: none;
}
.popup-container .right {
padding: 16px;
width: 300px;
padding-top: 4px;
}
.popup-container .left .hero-image-small {
display: block;
width: 100%;
}
.popup-container .left .hero-image-small {
position: relative;
}
.popup-container {
padding: 0;
}
}
Posting Komentar