66 lines
1.4 KiB
CSS
Executable File
66 lines
1.4 KiB
CSS
Executable File
.home-header {
|
|
@apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20
|
|
mb-24
|
|
relative
|
|
/* bg-red-100 */;
|
|
/* aspect-ratio: 1.5; */
|
|
|
|
/* min-height: 80vh; */
|
|
/* background-color: #fbfff5a6; */
|
|
&__titling {
|
|
@apply max-w-[580px]
|
|
relative
|
|
z-10
|
|
lg:absolute
|
|
mb-[-100px]
|
|
lg:mb-0;
|
|
}
|
|
&__title {
|
|
@apply text-4xl font-medium pb-6 pt-16;
|
|
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 infinite 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;
|
|
@apply bg-purple-50;
|
|
img {
|
|
@apply w-full h-full max-h-full object-contain;
|
|
/* object-position: 100% 100%; */
|
|
@screen lg {
|
|
/* object-position: 100% 0%; */
|
|
}
|
|
}
|
|
@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);
|
|
}
|
|
}
|