.contact.page { #content_box { article { section.links { @include span(first 3); @include breakpoint(max-width $bp-middle) { @include span(6) } } section.form { @include span(last 3); @include breakpoint(max-width $bp-middle) { @include span(full) } p.contact_thanks { background: hsl(120, 50, 95); color: hsl(120, 80, 25); padding: 0.5em $base-line-height/2; @include border-radius($corner-radius); } p.meanwhile { padding: 0.5em $base-line-height/2; } .field { display: block; width: 100%; padding-bottom: $base-line-height; label { display: block; color: adjust-lightness($link-color, 25); } input, textarea { @include border-radius($corner-radius); padding: 0 0 0 0.25em; display: block; width: span(full); height: $base-line-height; font-size: em(16px); font-family: "Open Sans", sans-serif; border: 0; border-bottom: 2px solid hsl(210, 50, 50); background: hsl(210, 50, 98); @include breakpoint(max-width $bp-middle) { width: span(full split); } } textarea { min-height: 5*$base-line-height; max-width: span(full); } input:focus, textarea:focus { outline: none; } input.invalid, textarea.invalid { border-bottom: 2px solid hsl(210, 50, 50); background: hsl(210, 50, 98); } input.valid, textarea.valid { border-bottom: 2px solid hsl(210, 50, 50); background: white; } } .button { text-align: right; button { background: hsl(210, 50, 45); font-weight: bold; @include border-radius($corner-radius); color: white; border: 0; font-size: 1em; line-height: 2.5em; padding: 0 0.75em 0.1em 0.5em; .fa { padding-right: 0.25em; } &:disabled { background: adjust-lightness($link-color, 30); } } } } } } }