ldc-volena/resources/sass/fo/base/_layout.scss

body {
    position: relative;
    display: flex;
    min-height: 100lvh;
    flex-direction: column;

    #backtotop {
        position: fixed;
        z-index: 99;
        right: 1rem;
        bottom: 1rem;
        display: none;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border-color: transparent;
        border-radius: 3rem;
        background-color: $color-white;

        .arrow {
            padding: 0.5rem;
            border: 1px solid;
            border-color: $primary;
            border-radius: 2rem;
            transform: rotate(-90deg);
        }
    }

    #search-bar {
        transition: opacity 0.7s ease;

        button {
            transition: 0.1s ease-out all;
        }

        input {
            width: 35vw;
            min-width: 8rem;
            max-width: 20rem;
            padding-right: 0;
            padding-left: 0;
            border-right: 0;
            border-left: 0;
            opacity: 0;
            transition: 0.3s ease all;

            @include media-breakpoint-up(sm) {
                width: 25vw;
            }

            &::placeholder {
                color: $color-white;
            }
        }

        .collapsing input {
            transition: 0.6s ease all;

            &::placeholder {
                visibility: hidden;
            }
        }

        .collapse.show input {
            opacity: 1;
            transition: 0.6s ease all;
        }
    }

    // * Used to hide Header bar when menu is oppened
    .hide-header-bg {
        border-color: transparent;
        backdrop-filter: inherit;

        #search-bar {
            opacity: 0;
        }
    }

    > .banner-section {
        min-height: $header-height;

        .banner {
            position: relative;

            .banner-image {
                width: 100%;
                height: 35rem;
                object-fit: cover;
            }

            .overlay {
                position: absolute;
                background: linear-gradient(0deg,#{rgba($color: $color-dark, $alpha: 60%)} 20%,#{rgba($color: $color-dark, $alpha: 0%)} 100%) no-repeat;
                inset:0;
            }

            .text-parts {
                position: absolute;
                top: 50%;
                left: 50%;
                width: max-content;
                padding: 1rem;
                border-radius: 1rem;
                color: $color-white;
                transform: translateX(-50%) translateY(-50%);

                .logo {
                    max-width: 75%;
                }
            }

            .banner-arrow {
                position: absolute;
                bottom: 3vw;
                left: 50%;
                width: 2.25rem;
                height: 2.25rem;
                padding: .3rem;
                background-color: #{rgba($color: $color-white, $alpha: 20%)};
                transform: translateX(-50%);
            }
        }

        .banner.banner-slider {
            height: 35rem;

            .swiper-banner {
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .swiper-banner-pagination {
                    bottom: 2rem;
                    left: 5%;
                    height: 3rem;

                    @include media-breakpoint-up(lg) {
                        bottom: 2rem;
                        left: 5%;
                        height: 5rem;
                    }
                }

                .swiper-pagination-bullet {
                    position: absolute;
                    bottom: 0.25rem;
                    width: 3rem;
                    height: 3rem;
                    border: 2px solid;
                    border-color: $color-white;
                    border-radius: 4rem;
                    background-size: cover;

                    &:hover {
                        cursor: pointer;
                    }
                }

                .swiper-pagination-bullet-active {
                    bottom: 0;
                    width: 3.5rem;
                    height: 3.5rem;
                    border-color: $color-quad;
                }
            }

            .banner-arrow {
                bottom: 5vw;
            }
        }
    }

    > header {
        position: fixed;
        z-index: 10001;
        top: 0;
        left: 0;
        width: 100%;
        height: $header-height;
        border-bottom: #{$color-primary} 0.2rem solid;
        backdrop-filter: blur(5px);
        pointer-events: none;
        transition: border-bottom 0.7s ease;
        transition: backdrop-filter 0.7s ease;

        .col {
            flex-wrap: wrap;

            @include media-breakpoint-up(sm) {
                flex-wrap: nowrap;
            }
        }

        .pointer-events {
            pointer-events: initial;
        }

        #main-menu {
            top: 0.75rem;
            right: 0.75rem;
            bottom: inherit;
            left: 0.75rem;
            height: fit-content;
            max-height: 90lvh;
            pointer-events: all;

            @include media-breakpoint-up(sm) {
                top: 2rem;
                right: inherit;
                bottom: inherit;
                left: 2.75rem;
                min-width: 30lvw;
            }

            ~ .offcanvas-backdrop {
                background-color: $color-primary;
                opacity: 0.9;
                pointer-events: all;
                transition: 0.3s all;
            }

            hr {
                border: #{$color-primary} calc(0.1875rem / 2) solid;
                opacity: 1;
            }
        }

        .nav-link {
            position: relative;
            opacity: 0.5;
            transition: all 1s ease;

            @include rfs(1.875rem, font-size);

            @include media-breakpoint-up(md) {
                @include rfs(2rem, font-size);
            }

            &::before {
                position: absolute;
                top: 50%;
                left: 0;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='15' viewBox='0 0 19 15' fill='none'%3E%3Cpath d='M0 15C2.39681 6.57528 14.3197 7.2887 18.4211 0C17.823 11.751 4.5676 9.74705 0 15Z' fill='%23103251'/%3E%3C/svg%3E");
                background-position: center;
                background-repeat: no-repeat;
                content: " ";
                opacity: 0;
                transform: translateY(-50%);
            }

            &.active, &:focus, &:hover {
                opacity: 1;
                transition: all 1s ease;

                @include rfs(1.875rem, padding-left);

                @include media-breakpoint-up(md) {
                    @include rfs(2rem, padding-left);
                }

                &::before {
                    opacity: 1;
                    transition: opacity 1s ease 0.4s;

                    @include rfs(1.875rem, width);
                    @include rfs(1.875rem, height);

                    @include media-breakpoint-up(md) {
                        @include rfs(2rem, height);
                        @include rfs(2rem, height);
                    }
                }
            }
        }
    }

    > main {
        flex-grow: 1;
        flex-shrink: 0;
    }

    > footer {
        flex-grow: 0;
        flex-shrink: 1;
    }
}