41b8fac464
* Initial structure for updated homepage * Bring back <UseCases /> * Add section stubs * Add ecosystem section * Add features section * Iron out features section * Add Learn Callout section * Copy updates * Better together copy * Add updated copy & swap assets * Remove comment & just add existing icon for now * Copy and asset tweaks * Remove unwanted copy * Process the codeblock * Add transparent img * Swap for transparent img * More transparent img * Use Learn cards pattern * Rearrange img and finishing padding touches
112 lines
1.9 KiB
CSS
112 lines
1.9 KiB
CSS
.carousel {
|
|
& .videos {
|
|
position: relative;
|
|
}
|
|
|
|
& .video-wrapper {
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transform: translateX(-60px);
|
|
line-height: 0;
|
|
box-shadow: 0 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
|
|
|
|
&.is-active {
|
|
opacity: 1;
|
|
padding-top: calc((100% * 0.63569) + 28px);
|
|
transform: translateX(0);
|
|
transition: opacity 0.5s, transform 0.5s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
&.is-deactivating {
|
|
opacity: 0;
|
|
transform: translateX(90px);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
& .bar {
|
|
align-items: center;
|
|
background: #0e1016;
|
|
border-radius: 4px 4px 0 0;
|
|
display: flex;
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
& span {
|
|
background: #252937;
|
|
border-radius: 50%;
|
|
display: block;
|
|
height: 9px;
|
|
margin-right: 7px;
|
|
width: 9px;
|
|
}
|
|
}
|
|
|
|
& .video {
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 28px;
|
|
right: 0;
|
|
}
|
|
|
|
& video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
& .controls {
|
|
display: flex;
|
|
padding: 28px 20px 0;
|
|
|
|
@media (max-width: 1119px) {
|
|
padding: 37px 0 0;
|
|
}
|
|
}
|
|
|
|
& .control {
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
|
|
&:hover .control-hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
& + .control {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
& .control-hover {
|
|
transition: 0.3s ease-in-out;
|
|
transition-property: transform;
|
|
}
|
|
}
|
|
|
|
& .progress-bar {
|
|
background-color: var(--gray-2);
|
|
height: 2px;
|
|
margin-top: 4px;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
& span {
|
|
background: var(--white);
|
|
display: block;
|
|
height: 2px;
|
|
position: absolute;
|
|
transition: width linear 0.2s;
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|