.contact-page-component { $trans-speed: 100ms; padding-top: px2rem(35px); padding-bottom: 0px; input, textarea { margin-bottom: px2rem(20px); width: 100%; padding: px2rem(5px) px2rem(10px); border: 2px solid fade-out($c-base, 0.75); background-color: rgba(255, 255, 255, 0.8); font-size: px2rem(14px); transition: border $trans-speed; &:focus { border: 2px solid fade-out($c-accent, 0.4); } &.error { border: 2px solid $c-error; } } textarea { resize: none; height: px2rem(150px); } .submit { @include font-sans-bold; background-color: lighten($c-accent, 5%); color: $c-text-light; text-align: center; transition: background-color $trans-speed; cursor: pointer; &:hover { background-color: $c-accent; } &.disabled { background-color: $c-base; } } .notification { margin: 0px auto px2rem(15px) auto; padding: px2rem(5px) px2rem(10px); background-color: lighten($c-error, 15%); color: $c-text-light; font-size: px2rem(14px); text-align: center; opacity: 0; transition: opacity $trans-speed; &.visible { opacity: 1; } &.success { @include font-sans-bold; background-color: transparent; color: $c-text; } span { @include font-sans-bold; } } }