@charset "UTF-8";

/*
Theme Name: Liva Park
Theme URI:
Author: KENNY
Author URI: https://kenny.pl/
Description:
Version: 1.0
Tags: liva, park, kenny
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'PPEditorialNew';
    src:  url('./assets/fonts/PPEditorialNew.woff2') format('woff2'),
          url('./assets/fonts/PPEditorialNew.woff') format('woff');
    font-display: swap;
}

:root {
    --color-white: #fff;
    --color-black: #333;
    --color-lion: #b49568;
    --color-linen: #f8f3ec;
    --color-brown: #a58960;
    --color-black-blur: #333333c3;
}

*,*::before,*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    letter-spacing: -.02rem;
    color: var(--color-black);
    font-size: 14px;
    line-height: 1.65;
}

a {
    text-decoration: none;
}

em {
    font-family: 'PPEditorialNew', serif;
}

h1 {
    letter-spacing: -.04rem;
    font-size: 3rem;
}

h2 {
    letter-spacing: -.04rem;
    font-size: 2.5rem;
}

.fw-500 {
    font-weight: 500;
}

.bg-linen {
    background-color: var(--color-linen);
}

.btn {
    border-radius: 5rem;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 500;

    &.btn-primary {
        background-color: var(--color-black);
        border-color: var(--color-black);
        color: var(--color-white);
    }

    &:disabled {
        opacity: 1;
    }
}


.bg-hero {
    background-color: var(--color-lion);

    .container { 
        --hero-h: clamp(520px, 72vh, 820px);
        min-height: calc(var(--hero-h) + 1px);
    }
}

.hero {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    will-change: opacity, filter;

    p {
        font-size: 16px;
    }
}

.label {
    background-color: var(--color-brown);
    color: var(--color-white);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 5rem;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.video {
    left: 50%;
    top: var(--hero-h) + 1px;
    transform: translateX(-50%);
    width: min(860px, 82%);
    aspect-ratio: 16/9;
    border-radius: 24px;
    overflow: hidden;
    will-change: top, width, border-radius, transform;

    video {
        transform: scale(1.15);
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

.video-space {
    width: 100%;
    aspect-ratio: 16/3;
    top: var(--hero-h) + 1px;
}

.attractions {
    width: 100%;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, var(--color-lion) 10%, var(--color-lion) 90%, transparent 100%);

    ul {
        display: inline-flex;
        justify-content: center;
        animation: marquee 40s linear infinite;
        white-space: nowrap;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 500;

        li {
            padding-left: 1.5rem;
            padding-right: 1.5rem;

            &::before {
                content: '';
                display: inline-flex;
                width: 10px;
                height: 10px;
                margin-right: 10px;
                background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzEwXzU1ODApIj4KPHBhdGggZD0iTTE4LjU5OTUgMy42OTI1MUw3LjA4MzY4IDE1LjIwNzVDNy4wMDYyNSAxNS4yODUyIDYuOTE0MjQgMTUuMzQ2OSA2LjgxMjkyIDE1LjM4OUM2LjcxMTYxIDE1LjQzMTEgNi42MDI5NyAxNS40NTI3IDYuNDkzMjYgMTUuNDUyN0M2LjM4MzU1IDE1LjQ1MjcgNi4yNzQ5MiAxNS40MzExIDYuMTczNiAxNS4zODlDNi4wNzIyOCAxNS4zNDY5IDUuOTgwMjcgMTUuMjg1MiA1LjkwMjg1IDE1LjIwNzVMMS40NDk1MSAxMC43NUMxLjM3MjA5IDEwLjY3MjMgMS4yODAwOCAxMC42MTA2IDEuMTc4NzYgMTAuNTY4NUMxLjA3NzQ0IDEwLjUyNjQgMC45Njg4MDcgMTAuNTA0OCAwLjg1OTA5NSAxMC41MDQ4QzAuNzQ5Mzg0IDEwLjUwNDggMC42NDA3NTIgMTAuNTI2NCAwLjUzOTQzMyAxMC41Njg1QzAuNDM4MTE1IDEwLjYxMDYgMC4zNDYxMDMgMTAuNjcyMyAwLjI2ODY3OCAxMC43NUMwLjE5MDk0OCAxMC44Mjc0IDAuMTI5MjcxIDEwLjkxOTQgMC4wODcxODYxIDExLjAyMDhDMC4wNDUxMDE0IDExLjEyMjEgMC4wMjM0Mzc1IDExLjIzMDcgMC4wMjM0Mzc1IDExLjM0MDRDMC4wMjM0Mzc1IDExLjQ1MDEgMC4wNDUxMDE0IDExLjU1ODggMC4wODcxODYxIDExLjY2MDFDMC4xMjkyNzEgMTEuNzYxNCAwLjE5MDk0OCAxMS44NTM0IDAuMjY4Njc4IDExLjkzMDhMNC43MjM2OCAxNi4zODVDNS4xOTM2NCAxNi44NTQxIDUuODMwNTEgMTcuMTE3NSA2LjQ5NDUxIDE3LjExNzVDNy4xNTg1MSAxNy4xMTc1IDcuNzk1MzkgMTYuODU0MSA4LjI2NTM1IDE2LjM4NUwxOS43ODAzIDQuODcyNTFDMTkuODU4IDQuNzk1MSAxOS45MTk1IDQuNzAzMTQgMTkuOTYxNSA0LjYwMTlDMjAuMDAzNSA0LjUwMDY1IDIwLjAyNTIgNC4zOTIxMiAyMC4wMjUyIDQuMjgyNTFDMjAuMDI1MiA0LjE3Mjg5IDIwLjAwMzUgNC4wNjQzNiAxOS45NjE1IDMuOTYzMTJDMTkuOTE5NSAzLjg2MTg4IDE5Ljg1OCAzLjc2OTkyIDE5Ljc4MDMgMy42OTI1MUMxOS43MDI5IDMuNjE0NzggMTkuNjEwOSAzLjU1MzEgMTkuNTA5NiAzLjUxMTAxQzE5LjQwODMgMy40Njg5MyAxOS4yOTk2IDMuNDQ3MjcgMTkuMTg5OSAzLjQ0NzI3QzE5LjA4MDIgMy40NDcyNyAxOC45NzE2IDMuNDY4OTMgMTguODcwMyAzLjUxMTAxQzE4Ljc2ODkgMy41NTMxIDE4LjY3NjkgMy42MTQ3OCAxOC41OTk1IDMuNjkyNTFaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzEwXzU1ODAiPgo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
                background-size: contain;
            }
        }
    }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.card {
    background-color: var(--color-lion);
    aspect-ratio: 1/1;
    border: none;
    display: flex;
    justify-content: flex-end;

    &.namiot {
        background-image: url('./assets/images/namiot.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    &.willa {
        background-image: url('./assets/images/willa.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    &:hover .card-wrapper {
        transform: translateY(-10px);
    }

    .card-wrapper {
        background-color: var(--color-black-blur);
        backdrop-filter: blur(6px);
        max-width: 400px;
        padding: 18px 22px;
        margin: 24px;
        transition: transform 0.25s ease;

        div {
            font-size: 16px;
            font-weight: 500;
        }

        p {
            line-height: 1.4;
            opacity: .75;
        }
    }
}

.review {
    aspect-ratio: 1/1;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .rate {
        font-size: 46px;
        font-family: 'PPEditorialNew', serif;
    }
}

.quote {
    font-size: 20px;
}

.name {
    font-size: 18px;
    font-weight: 500;
}

.copyright {
    /* border-top: .5px solid var(--color-black); */
    position: relative;

    a {
        color: var(--color-black);
        font-weight: 500;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: .5px;
        width: 100%;
        background: linear-gradient(
            to right,
            rgba(255,255,255,0) 0%,
            var(--color-black) 50%,
            rgba(255,255,255,0) 100%
        );
    }
}

.footer {
    
    ul {
        list-style: none;

        li {
            margin-bottom: 12px;
        }
    }

    a {
        color: var(--color-black);
    }
}

.header-wrapper {
    position: fixed;
    z-index: 999;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, 0);
    transition: transform 0.45s ease, opacity 0.45s ease;

    &.is-compact .header-content {
        background: var(--color-white);
        box-shadow: 0 10px 30px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04);
    }

    &.is-hidden {
        transform: translate(-50%, calc(-30% - 16px));
        opacity: 0;
    }

    .header-content {
        background-color: var(--color-white);
        border-radius: 5rem;
        display: flex;
        align-items: stretch;
        justify-content: center;
        border: .0625rem solid #edefe8;
        transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;

        .header-logo {
            padding: 12px 20px;
            line-height: 0;
            display: flex;
            align-items: center;

            svg {
                display: block;
                height: 22px;
                width: auto;
            }
        }

        ul {
            list-style: none;
            display: flex;
            align-items: stretch;
            margin: 0;
            padding: 0;

            li {
                margin: 0;
                height: 100%;
                display: flex;
                align-items: center;

                a {
                    display: block;
                    color: var(--color-black);
                    font-size: 16px;
                    padding: 12px 20px;
                    line-height: 1;
                }
            }

            .header-item {
                border-left: .0625rem solid #edefe8; 
            }
        }
    }
}

.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.form-control {
    font-size: 14px;
    padding: 10px 20px;
    border: .5px solid var(--color-black);
    border-radius: 5rem;

    &:focus {
        border-color: #d4c3aa;
        box-shadow: 0 0 0 .25rem rgb(180 149 104 / 35%);
    }
}

.form-check-input:checked {
    background-color: var(--color-lion);
    border-color: var(--color-lion)
}

.form-check-input:focus {
    border-color: #d4c3aa;
    box-shadow: 0 0 0 .25rem rgb(180 149 104 / 35%);
}

.wpcf7-spinner {
    position: absolute;
}

.wpcf7-list-item {
    margin: 0;
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    margin-left: 12px;
}