@keyframes flip {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(360deg);
}
}
:root {
--glencor-blue: #00476b;
--glencor-blue-dark: #002033;
--glencor-teal: #359E99;
}
body {
background: linear-gradient(180deg, #012C46 0%, #003A5D 100%);
background-repeat: no-repeat;
background-color: #003A5D;
}
header {
background-color: white;
}
main {
h1, h2 {
color: white;
font-size: 40px;
font-style: italic;
font-weight: 700;
line-height: normal;
margin-bottom: 40px;
}
p {
font-size: 20px;
margin-bottom: 40px;
}
.btn {
font-size: 20px;
display: flex;
justify-content: center;
align-items: baseline;
}
.btn-secondary {
&:focus {
box-shadow: none;
background-color: var(--glencor-blue);
border-color: transparent;
}
&:not(:disabled):not(.disabled).active {
background-color: var(--glencor-teal);
border-color: var(--glencor-teal);
&:focus {
box-shadow: none;
}
}
&:hover {
background-color: var(--glencor-teal);
border-color: var(--glencor-teal);
}
}
.btn-icon {
span {
transition-duration: 0.2s;
transition-property: width;
width: 0;
overflow: hidden;
}
&.active {
span {
width: 1.5rem;
}
}
}
.btn-link {
color: white;
text-decoration: none;
&:hover, 
&:focus {
color: var(--glencor-teal);
text-decoration: none;
}
}
.stage {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1170px;
margin: auto;
.images {
--bs-aspect-ratio: 100%;
margin-top: -8rem;
margin-bottom: 1.5rem;
@media screen and (min-width: 768px) {
width: 50%;
order: 2;
}
.img-1, .img-2 {
object-fit: cover;
object-position: center center;
aspect-ratio: 1;
height: auto;
}
.img-1 {
@media screen and (min-width: 768px) {
width: 110%;
}
@media screen and (min-width: 992px) {
width: 100%;
}
}
}
&.stage-0 {
.images {
margin-top: -5rem;
margin-bottom: -2rem;
@media screen and (min-width: 768px) {
margin-top: -8rem;
margin-bottom: 8rem;
}
.img-1 {
left: 40%;
@media screen and (min-width: 768px) {
width: 95%;
left: 5%;
}
}
.img-2 {
width: 50%;
top: 50%;
transform: translate(0, -50%);
@media screen and (min-width: 768px) {
width: 40%;
left: 0;
transform: none;
top: auto;
bottom: 0;
}
}
}
}
.text {
width: 100%;
@media screen and (min-width: 768px) {
order: 1;
width: 50%;
}
.departure-board {
font-family: "Azeret Mono", monospace;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
color: #DB8914;
font-size: 25px;
column-gap: 0.25rem;
line-height: 1;
text-transform: uppercase;
position: relative;
z-index: 10;
@media screen and (min-width: 400px) {
font-size: 30px;
}
@media screen and (min-width: 576px) {
font-size: 40px;
}
div {
display: flex;
margin-bottom: 5px;
column-gap: 5px;
span {
background-color: #1E1E1E;
padding: 0.5rem;
display: inline-block;
width: 35px;
text-align: center;
perspective: 1000px;
transition: transform 0.2s;
transform-style: preserve-3d;
@media screen and (min-width: 576px) {
width: 48px;
}
&.loading {
animation-iteration-count: infinite;
animation-name: flip;
animation-duration: 0.2s;
}
}
}
}
}
}
}
.indicators {
column-gap: 0.5rem;
.indicator {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: var(--glencor-blue-dark);
color: white;
&:hover {
text-decoration: none;
background-color: var(--glencor-teal);
}
&.active {
background-color: white;
color: var(--glencor-blue-dark);
}
}
}
.awaken {
opacity: 0;
transition-duration: 1s;
transition-property: all;
transform: translateY(3rem);
&.in-viewport {
opacity: 1;
transform: translateY(0);
}
}
.offer-cards {
min-height: 361px;
align-content: flex-start;
.col-12 {
opacity: 0;
transition-duration: 1s;
transition-property: all;
transform: translateY(3rem);
&.in-viewport {
opacity: 1;
transform: translateY(0);
}
}
}
footer {
background-color: transparent;
}