<commit_before>@import '~style/helpers';

@heroFadeInSpeed: 750ms;

* {
    box-sizing: border-box;
}

html {
    font-size: 12px;

    @media (min-width: 768px) {
        font-size: 16px;
    }
}

body {
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
    background-repeat: repeat;
    background-size: cover;
}

h1 {
    margin: 0;
    font-size: 5rem;
    text-align: center;
    color: rgba(255, 245, 235, 0.9);
    user-select: none;

    @media (min-width: 768px) {
        font-size: 6rem;
    }
}

h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 3.5rem;
}

h3 {
    margin: 0;
    font-size: 2rem;
    color: @primary;

    &.important {
        color: @secondary;
        margin-bottom: 1rem;
    }
}

h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

p {
    font-size: 1.6rem;
    margin: 0.2rem 0 2rem;
}

.engagementIcon svg {
    height: 5rem;
    width: 6rem;
    margin: 0 1rem;
    fill: @secondary;

    @media (min-width: 768px) {
        font-size: 6rem;
    }
}

.heartIcon {
    display: block;
    width: 8rem;
    margin: 0 auto 0;

    svg {
        fill: @secondary;
    }
}

.home {
    position: relative;
}

.section {
    @overlayColor: rgba(255, 255, 255, 0.80);

    position: relative;
    padding: 0;
    text-align: left;

    .content {
        position: relative;
        max-width: 960px;
        padding: 4rem 1.5rem;
        margin: 0 auto;
        background: @overlayColor;
    }

    @media (min-width: 768px) {
        &:not(.hero) {
            &:before,
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            // left side fade-to-white
            &:before {
                right: ~"calc(50% + 480px)";
                background: @overlayColor;
            }
            // right side fade-to-white
            &:after {
                left: ~"calc(50% + 480px)";
                background: @overlayColor;
            }
        }
    }

    .button {
        margin-top: 3rem;
    }

    &.hero {
        background: #444;
        color: @white !important;
        min-height: 100vh;
        padding: 10rem 0;
        will-change: transform;
        transition: transform 500ms;

        // turning off parallax
        transform: none !important;

        .content {
            background: transparent;

            &:after {
                display: none;
            }
        }

        &:before,
        &:after {
            content: '';
            position: fixed;
            top: -300px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            opacity: 0;

            // turning off parallax
            position: absolute;
        }

        // hero background image
        &:before {
            background-image: url('../../assets/images/cover.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;

            @media (min-width: 768px) {
                top: -300px;
            }
        }

        // hero background gradient overlay
        &:after {
            background: linear-gradient(to bottom, fade(@primary, 20%), fade(@black, 50%));
        }

        > * {
            position: relative;
            z-index: 2;
        }

        &.showBackground {
            &:before,
            &:after {
                opacity: 1;
                transition: opacity @heroFadeInSpeed ease-out;
            }
        }
    }

    &.proposal {
        background-image: url('../../assets/images/kat_angels_landing.jpg');
        background-position: bottom;
        background-repeat: no-repeat;<commit_msg>make hero image responsive<commit_after>@import '~style/helpers';

@heroFadeInSpeed: 750ms;

* {
    box-sizing: border-box;
}

html {
    font-size: 12px;

    @media (min-width: 768px) {
        font-size: 16px;
    }
}

body {
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
    background-repeat: repeat;
    background-size: cover;
}

h1 {
    margin: 0;
    font-size: 5rem;
    text-align: center;
    color: rgba(255, 245, 235, 0.9);
    user-select: none;

    @media (min-width: 768px) {
        font-size: 6rem;
    }
}

h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 3.5rem;
}

h3 {
    margin: 0;
    font-size: 2rem;
    color: @primary;

    &.important {
        color: @secondary;
        margin-bottom: 1rem;
    }
}

h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

p {
    font-size: 1.6rem;
    margin: 0.2rem 0 2rem;
}

.engagementIcon svg {
    height: 5rem;
    width: 6rem;
    margin: 0 1rem;
    fill: @secondary;

    @media (min-width: 768px) {
        font-size: 6rem;
    }
}

.heartIcon {
    display: block;
    width: 8rem;
    margin: 0 auto 0;

    svg {
        fill: @secondary;
    }
}

.home {
    position: relative;
}

.section {
    @overlayColor: rgba(255, 255, 255, 0.80);

    position: relative;
    padding: 0;
    text-align: left;

    .content {
        position: relative;
        max-width: 960px;
        padding: 4rem 1.5rem;
        margin: 0 auto;
        background: @overlayColor;
    }

    @media (min-width: 768px) {
        &:not(.hero) {
            &:before,
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            // left side fade-to-white
            &:before {
                right: ~"calc(50% + 480px)";
                background: @overlayColor;
            }
            // right side fade-to-white
            &:after {
                left: ~"calc(50% + 480px)";
                background: @overlayColor;
            }
        }
    }

    .button {
        margin-top: 3rem;
    }

    &.hero {
        background: #333;
        color: @white !important;
        min-height: 100vh;
        padding: 10rem 0;
        will-change: transform;
        transition: transform 500ms;

        // turning off parallax
        transform: none !important;

        .content {
            background: transparent;

            &:after {
                display: none;
            }
        }

        &:before,
        &:after {
            content: '';
            position: fixed;
            top: -300px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            opacity: 0;

            // turning off parallax
            position: absolute;
        }

        // hero background image
        &:before {
            background-image: url('../../assets/images/cover.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top 100px left -400px;

            @media (min-width: 768px) {
                top: -300px;
                background-position: center;
            }
        }

        // hero background gradient overlay
        &:after {
            background: linear-gradient(to bottom, fade(@primary, 20%), fade(@black, 50%));
        }

        > * {
            position: relative;
            z-index: 2;
        }

        &.showBackground {
            &:before,
            &:after {
                opacity: 1;
                transition: opacity @heroFadeInSpeed ease-out;
            }
        }
    }

    &.proposal {
        background-image: url('../../assets/images/kat_angels_landing.jpg');
        background-position: bottom;
        background-repeat: no-repeat;
{'fraction_non_alphanumeric': 0.12514336689180577, 'fraction_numerical': 0.035427551930674143, 'mean_word_length': 1.3225806451612903, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4601827', 'n_tokens_mistral': 2769, 'n_tokens_neox': 2440, 'n_words': 561}