64 lines
1.3 KiB
CSS
64 lines
1.3 KiB
CSS
.home-header {
|
|
@apply max-w-screen-xl mx-auto px-8 pt-16 xl:pt-8
|
|
mb-16
|
|
container;
|
|
isolation: isolate;
|
|
|
|
&__titling {
|
|
@apply max-w-[580px]
|
|
relative
|
|
z-10
|
|
lg:absolute
|
|
mb-[-100px]
|
|
lg:mb-0;
|
|
}
|
|
&__title {
|
|
@apply text-3xl md:text-4xl font-medium mb-6 pt-0 lg:pt-20;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
&__scroll-down-indicator {
|
|
@apply bg-primary rounded-full flex justify-center items-center mt-6;
|
|
width: 80px;
|
|
height: 80px;
|
|
&__arrow {
|
|
animation: bouncingArrow 1s 6 alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
|
|
/* cubic-bezier(0.01, 0.61, 0.39, 1); */
|
|
/* cubic-bezier(0.18, 0.89, 0.3, 1); */
|
|
}
|
|
}
|
|
|
|
&__fresque {
|
|
@apply w-full;
|
|
z-index: -1;
|
|
|
|
.mobile_pic {
|
|
@apply md:hidden;
|
|
}
|
|
.desktop_pic {
|
|
@apply hidden md:block;
|
|
}
|
|
img {
|
|
@apply w-full h-full max-h-full object-contain;
|
|
}
|
|
@media (max-aspect-ratio: 16 / 9) {
|
|
img {
|
|
/* @apply bg-red-100; */
|
|
}
|
|
}
|
|
@media (min-aspect-ratio: 16 / 9) {
|
|
img {
|
|
/* @apply bg-green-100; */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes bouncingArrow {
|
|
0% {
|
|
transform: translateY(4px);
|
|
}
|
|
100% {
|
|
transform: translateY(-6px);
|
|
}
|
|
}
|