index.module.scss

.hero {
    min-height: 100vh;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    background-color: #ff4754;
    color: whitesmoke;

    > .body {
        flex-grow: 1;
    }

    .heroText {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }
    
    .primary {
        max-width: 560px;

        h2 {
            font-size: 34px;
            font-weight: 700;
        }

        h3 {
            font-size: 34px;
            font-weight: 300;
            margin: 0;
        }
    }

    h4 {
        padding: 5px 0;
    }

    .signup {
        display: flex;
        margin-top: 2em;
        border-radius: 4px;

        background: rgba(0, 0, 0, 0.2);

        input {
            flex-grow: 1;
            padding: 10px;
        }

        button {
            flex: 0 1;

            padding: 10px;
            background: rgba(0, 0, 0, 0.1);
            white-space: nowrap;
        }
    }

    .heroFix {
        min-height: 128px;
    }

    .link {
        display: block;
        margin-top: 4em;

        color: white;
        text-decoration: none;

        span {
            font-weight: 400;
            border-bottom: 2px solid white;
        }
    }

    .heroImage {
        display: flex;
        align-items: center;
        justify-content: center;

        .container {
            background: url('/concept_outer.svg');
            background-repeat: no-repeat;

            animation-name: outer;
            animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
            animation-iteration-count: infinite;
            animation-duration: 5s;

            img {
                position: relative;
                left: -15px;
                top: 10px;

                animation-name: inner;
                animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
                animation-iteration-count: infinite;
                animation-duration: 5s;
            }
        }
    }
}

@keyframes outer {
    0% { transform: translateY(0px) };
    50% { transform: translateY(14px) };
    100% { transform: translateY(0px) };
}

@keyframes inner {
    0% { transform: translateY(0px) };
    50% { transform: translateY(4px) };
    100% { transform: translateY(0px) };
}

// will be moved to its own component
.nav {
    width: 100%;
    min-height: 128px;
    padding: 40px;

    flex: 0 1;

    display: flex;

    .logo {
        height: 38px;
    }
}

@media (max-width: 1240px) {
    .hero > .body {
        flex-direction: column-reverse;
    }
    
    .heroImage {
        margin-bottom: 2em;
    }
}

@media (max-width: 720px) {
    .heroImage {
        transform: scale(0.8);
    }

    .nav {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .heroImage {
        transform: scale(0.7);
    }
}