Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import '../../styles/utility';
- .wrap {
- position: relative;
- background-color: #fff;
- margin-top: 88px;
- border-top: 1px solid #e8e8e8;
- border-bottom: 1px solid #eee;
- }
- .root {
- @include container();
- position: relative;
- display: flex;
- flex-flow: row nowrap;
- margin-bottom: $vertical-margin;
- margin-top: $vertical-margin;
- @media (max-width: $lg) {
- align-items: center;
- flex-flow: column-reverse nowrap;
- margin-top: 0;
- }
- }
- .image {
- width: 570px;
- img {
- height: 100%;
- object-fit: cover;
- width: 100%;
- }
- @media (max-width: $xl) and (orientation: portrait) {
- height: 60vh;
- }
- @media (max-width: $xl) and (orientation: landscape) {
- height: 60vw;
- }
- @media (max-width: $lg) {
- display: none;
- }
- }
- .content {
- display: flex;
- flex-flow: column;
- justify-content: center;
- padding-left: 32px;
- padding-right: 32px;
- width: calc(100% - 570px);
- @media (max-width: $lg) {
- margin-bottom: 6rem;
- padding-top: 32px;
- padding-bottom: 32px;
- width: initial;
- }
- @media (max-width: $md) {
- margin-bottom: 0;
- margin-top: 2rem;
- padding: 16px;
- }
- }
- .form {
- display: flex;
- padding-bottom: 10px;
- margin-top: 35px;
- align-items: flex-end;
- @media (max-width: $xl) {
- flex-flow: column;
- align-items: unset;
- }
- }
- .formInnerContainer {
- display: flex;
- flex-flow: column;
- position: relative;
- }
- .button {
- @include base-font();
- @include base-transition();
- background-color: white;
- border: 2px solid #161616;
- box-shadow: 4px 4px 0 0 #161616;
- color: $black;
- cursor: pointer;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- height: $input-height;
- left: -4px;
- padding: 0 1rem;
- position: relative;
- white-space: nowrap;
- &:hover {
- box-shadow: 0 0 0 0 $black;
- transform: translate(2px, 2px);
- }
- @media (max-width: $lg) {
- width: 100%;
- }
- }
- .input {
- @include base-font();
- @include base-transition();
- background-color: #f4f4f4;
- border: 2px solid #f4f4f4;
- font-size: 18px;
- font-style: normal;
- font-weight: normal;
- height: $input-height;
- line-height: 22px;
- margin-right: 20px;
- margin-top: 0;
- min-width: initial;
- padding-left: 16px;
- padding-right: 24px;
- &:focus {
- border-color: $black;
- box-shadow: none;
- outline: none;
- }
- @media (max-width: $xl) {
- margin-bottom: 1rem;
- width: 100%;
- }
- }
- .success {
- border: 2px solid lightgreen;
- }
- .error {
- border: 2px solid tomato;
- }
- .title {
- @include base-font();
- color: $black;
- font-size: 3rem;
- line-height: 1.3;
- margin-bottom: 50px;
- @media (max-width: $xl) {
- font-size: 2.5rem;
- }
- @media (max-width: $sm) {
- font-size: 2rem;
- }
- @media (max-width: $md) {
- margin-bottom: 1rem;
- }
- }
- .description {
- @include base-font();
- color: $black;
- font-size: 1.125rem;
- font-style: normal;
- font-weight: normal;
- line-height: 150%;
- margin-bottom: 20px;
- @media (max-width: $md) {
- line-height: 1.8;
- margin-bottom: 2rem;
- }
- }
- .under {
- @include base-font();
- color: #333333;
- font-size: 12px;
- font-style: normal;
- font-weight: normal;
- line-height: 14px;
- @media (max-width: $lg) {
- margin-top: 1rem;
- }
- }
- .status {
- position: absolute;
- top: -22px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement