hypothetical/resources/assets/sass/pages/_contact.scss

.page-contact {
    #contact-form {
        $trans-speed: 100ms;
        margin-top: 35px;
        margin-bottom: 20px;

        input, textarea {
            margin-bottom: 20px;
            width: 100%;
            padding: 5px 10px;
            border: 2px solid fade-out($c-text, 0.75);
            background-color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            transition: border $trans-speed;
            &:focus { border: 2px solid fade-out($c-base, 0.4); }
            &.error { border: 2px solid $c-error; }
        }

        textarea {
            resize: none;
            height: 150px;
        }

        .submit {
            background-color: lighten($c-base, 5%);
            color: $c-text-light;
            font-weight: bold;
            text-align: center;
            transition: background-color $trans-speed;
            &:hover { background-color: $c-base; }
            &.disabled { background-color: $c-base; }
        }

        .notification {
            margin: 0px auto 15px auto;
            padding: 5px 10px;
            background-color: lighten($c-error, 15%);
            color: $c-text-light;
            font-size: 14px;
            text-align: center;
            opacity: 0;
            transition: opacity $trans-speed;
            span { font-weight: bold; }
            &.visible { opacity: 1; }

            &.success {
                background-color: transparent;
                color: $c-text;
                font-weight: bold;
            }
        }
    }
}