webtrigon-workex-onboarding/src/pages/signup/Signup.module.scss

.upfold {
    background-color: var(--charcoal);
    height: auto;
    transform: translateY(-50vh);
    width: 100%;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    position: relative;
    z-index: 1;
    box-shadow: 0px 0px 10px 5px var(--black-rock);
    animation: riseDown 1s forwards;
    display: flex;
    align-items: center;
    justify-content: center;

    .container {
        padding: 30px 5%;
        text-align: center;
    }

    h2 {
        font-size: 26px;
        color: white;
    }

    p {
        font-size: 14px;
        color: var(--grey-rock);
    }

    figure {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 10px 0;
        animation: fadeIn 1s forwards;
        opacity: 0;
        transform: translateY(10vh);
    }

    img {
        margin: 5px auto 0;
        width: 70%;
        display: block;
    }

    @keyframes riseDown {
        from {
            transform: translateY(-50vh);
        }
        to {
            transform: translateY(0vh);
        }
    }
}

.inputForm {
    width: 80%;
    margin: 40px auto 0;
    opacity: 0;
    transform: translateY(10vh);
    position: relative;
    animation: fadeIn 1s forwards;

    .confirmationAction {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: visible;

        label {
            margin: 0;
            font-size: 14px;
            text-align: left;
            color: var(--rock);
        }

        .toggle {
            contain: none;
            --handle-background: var(--apricot);
            --handle-background-checked: var(--shamrock);
            --background: var(--ash-dust);
            --background-checked: var(--ash-dust);
        }
    }

    .separator {
        display: block;
        width: 100%;
        height: 0px;
        overflow: visible;
        margin: 40px 0;
        border-bottom: 1px dashed var(--ash);
        border-width: 2px;
    }

    .input {
        margin: 20px 0;
    }

    .actionLink {
        text-align: right;
        margin: 20px 0;

        span {
            font-size: 14px;
            color: var(--rock);
            text-decoration: none;
        }
    }

    .actionButtonsHolder {
        width: 60%;
        margin: 20px auto;

        .actionButton {
            height: 50px;
            text-transform: none;
            font-size: 16px;            
            --border-radius: 30px;
            --border-color: var(--shamrock);
            font-weight: 500;

            &:nth-child(1) {
                --background: var(--shamrock);            
            }
        }
    }    
}

.navigationLink {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: var(--rock);
    margin-top: 30px;

    span, a {
        color: var(--shamrock);
        text-decoration: none;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10vh);
    }

    to {
        opacity: 1;
        transform: translateY(0vh);
    }
}