Last active
January 22, 2021 00:29
-
-
Save cornelism/6042a165b2d887acee18c30dd42155a5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin tablet { | |
| @media only screen and (min-width: 768px) { | |
| @content; | |
| } | |
| } | |
| @mixin desktop { | |
| @media only screen and (min-width: 1024px) { | |
| @content; | |
| } | |
| } | |
| @font-face { | |
| font-family: "Century-Gothic"; | |
| src: url("/media/images/requisitions-2021/fonts/CenturyGothic.woff") | |
| format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Century-Gothic-Bold"; | |
| src: url("/media/images/requisitions-2021/fonts/CenturyGothic-Bold.woff") | |
| format("woff"); | |
| } | |
| body { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .job_details { | |
| #logo_hldr, | |
| #description_box .info_box .info_box_fields, | |
| #content .content_body .content_header, | |
| #container #right_bar, | |
| #footer { | |
| display: none !important; | |
| } | |
| #content #job_details_content, | |
| .job_details_content { | |
| padding: 0; | |
| border: 0; | |
| word-wrap: break-word; | |
| } | |
| #description_box { | |
| .info_box .info_btn_box { | |
| padding: 0; | |
| margin: 0; | |
| text-align: left; | |
| background: none; | |
| } | |
| .job_description { | |
| margin-top: 0; | |
| color: #595959; | |
| line-height: 1.45; | |
| font-family: "Century-Gothic", Helvetica, Arial, sans-serif; | |
| font-weight: 400; | |
| } | |
| } | |
| #container #content { | |
| width: 100%; | |
| float: inherit; | |
| } | |
| .main_content_box { | |
| width: inherit; | |
| } | |
| #header { | |
| border-bottom: 0; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| #content .content_body .job_description ul { | |
| margin-bottom: 37px; | |
| padding-left: 0; | |
| } | |
| #content .content_body .job_description ul li { | |
| position: relative; | |
| margin: 0; | |
| padding-left: 30px; | |
| line-height: 1.38; | |
| list-style: none; | |
| font-size: 15px; | |
| &::before { | |
| content: ""; | |
| display: inline-block; | |
| position: absolute; | |
| top: 8px; | |
| left: 0; | |
| width: 7px; | |
| height: 7px; | |
| background-color: #656565; | |
| border-radius: 50%; | |
| } | |
| & + li { | |
| margin-top: 8px; | |
| } | |
| } | |
| #boilerplate_wrapper { | |
| min-height: inherit; | |
| min-width: inherit; | |
| margin-top: 95px; | |
| } | |
| .job_description { | |
| h2 { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| color: #15234a; | |
| line-height: 1.2; | |
| margin-bottom: 15px; | |
| font-size: 26px; | |
| } | |
| p { | |
| font-family: "Century-Gothic", Helvetica, Arial, sans-serif !important; | |
| font-weight: 400; | |
| font-size: 15px; | |
| line-height: 1.45; | |
| color: #595959; | |
| margin-bottom: 16px; | |
| &:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| strong { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| } | |
| a { | |
| color: #15234a; | |
| text-decoration: underline; | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| &:hover { | |
| text-decoration: none; | |
| } | |
| } | |
| .gradient { | |
| background: -webkit-linear-gradient(left, #15c1d4, #b4bd1c); | |
| background-clip: border-box; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| } | |
| } | |
| .section { | |
| padding: 25px 0 20px 0; | |
| &__title { | |
| position: relative; | |
| padding-left: 30px; | |
| padding-right: 40px; | |
| margin-bottom: 30px; | |
| color: rgb(21, 35, 74); | |
| font-family: "Century-Gothic-Bold", Helvetica, sans-serif; | |
| font-size: 24px; | |
| z-index: 0; | |
| word-break: break-all; | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| top: -10px; | |
| left: 0; | |
| width: 73px; | |
| height: 72px; | |
| background-image: url("/media/images/requisitions-2021/image.png"); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| z-index: -1; | |
| } | |
| } | |
| &__content { | |
| flex: 4; | |
| padding-top: 2px; | |
| z-index: 0; | |
| h4 { | |
| margin-bottom: 15px; | |
| font-size: 18px; | |
| font-family: "Century-Gothic-Bold", Helvetica, sans-serif; | |
| } | |
| } | |
| } | |
| &.desktop #container { | |
| width: initial; | |
| min-width: initial !important; | |
| } | |
| &.mobile #container { | |
| margin-top: 0; | |
| } | |
| &.full_width #body_wrapper { | |
| padding-bottom: 0; | |
| } | |
| @include tablet { | |
| #boilerplate_wrapper { | |
| margin-top: 0; | |
| } | |
| } | |
| @include desktop { | |
| .job_description { | |
| h2 { | |
| margin-bottom: 5px; | |
| line-height: 2; | |
| font-size: 34px; | |
| } | |
| p { | |
| font-size: 18px; | |
| } | |
| } | |
| #content .content_body .job_description ul li { | |
| font-size: 18px; | |
| &::before { | |
| top: 10px; | |
| } | |
| } | |
| .section { | |
| display: flex; | |
| flex-direction: row; | |
| padding: 70px 0 48px; | |
| &__title { | |
| flex: 1; | |
| margin-bottom: 0; | |
| padding-left: 0; | |
| &::before { | |
| top: -10px; | |
| left: -36px; | |
| width: 83px; | |
| height: 82px; | |
| } | |
| } | |
| &__content { | |
| flex: 4; | |
| h4:first-child, | |
| p:first-child, | |
| ul:first-child { | |
| margin-top: 4px; | |
| } | |
| } | |
| } | |
| } | |
| .benefits { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-bottom: 40px; | |
| &__title { | |
| flex-basis: 100%; | |
| text-align: center; | |
| margin-bottom: 30px !important; | |
| } | |
| &__item { | |
| flex-basis: 33.3333333%; | |
| text-align: center; | |
| img { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| p { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif !important; | |
| font-size: 13px; | |
| } | |
| } | |
| } | |
| } | |
| #fakeHeader { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| height: 358px; | |
| background-size: cover; | |
| background-position: center center; | |
| &__wrapper { | |
| width: 100%; | |
| max-width: 960px; | |
| margin: 0 auto; | |
| color: white; | |
| padding: 0 20px 50px 20px; | |
| } | |
| &__pretext { | |
| font-size: 18px; | |
| line-height: 1.5; | |
| } | |
| &__title { | |
| margin-bottom: 15px; | |
| line-height: 1; | |
| font-size: 30px; | |
| } | |
| &__lines { | |
| width: 42px; | |
| margin-bottom: 20px; | |
| } | |
| &__info { | |
| font-size: 15px; | |
| } | |
| &__pretext, | |
| &__title, | |
| &__info { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| color: white; | |
| letter-spacing: 0.007em; | |
| } | |
| &__logo { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 250px; | |
| } | |
| @include desktop { | |
| height: 425px; | |
| justify-content: center; | |
| &__wrapper { | |
| width: 790px; | |
| padding: 0 150px 0 0; | |
| } | |
| &__pretext { | |
| font-size: 28px; | |
| line-height: 1; | |
| } | |
| &__title { | |
| margin-bottom: 7px; | |
| line-height: 1.3; | |
| font-size: 72px; | |
| letter-spacing: 0.007em; | |
| } | |
| &__lines { | |
| width: 60px; | |
| } | |
| &__info { | |
| font-size: 16px; | |
| } | |
| &__logo { | |
| width: 373px; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: "Century-Gothic"; | |
| src: url("/media/images/requisitions-2021/fonts/CenturyGothic.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Century-Gothic-Bold"; | |
| src: url("/media/images/requisitions-2021/fonts/CenturyGothic-Bold.woff") format("woff"); | |
| } | |
| body { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .job_details #logo_hldr, | |
| .job_details #description_box .info_box .info_box_fields, | |
| .job_details #content .content_body .content_header, | |
| .job_details #container #right_bar, | |
| .job_details #footer { | |
| display: none !important; | |
| } | |
| .job_details #content #job_details_content, | |
| .job_details .job_details_content { | |
| padding: 0; | |
| border: 0; | |
| word-wrap: break-word; | |
| } | |
| .job_details #description_box .info_box .info_btn_box { | |
| padding: 0; | |
| margin: 0; | |
| text-align: left; | |
| background: none; | |
| } | |
| .job_details #description_box .job_description { | |
| margin-top: 0; | |
| color: #595959; | |
| line-height: 1.45; | |
| font-family: "Century-Gothic", Helvetica, Arial, sans-serif; | |
| font-weight: 400; | |
| } | |
| .job_details #container #content { | |
| width: 100%; | |
| float: inherit; | |
| } | |
| .job_details .main_content_box { | |
| width: inherit; | |
| } | |
| .job_details #header { | |
| border-bottom: 0; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .job_details #content .content_body .job_description ul { | |
| margin-bottom: 37px; | |
| padding-left: 0; | |
| } | |
| .job_details #content .content_body .job_description ul li { | |
| position: relative; | |
| margin: 0; | |
| padding-left: 30px; | |
| line-height: 1.38; | |
| list-style: none; | |
| font-size: 15px; | |
| } | |
| .job_details #content .content_body .job_description ul li::before { | |
| content: ""; | |
| display: inline-block; | |
| position: absolute; | |
| top: 8px; | |
| left: 0; | |
| width: 7px; | |
| height: 7px; | |
| background-color: #656565; | |
| border-radius: 50%; | |
| } | |
| .job_details #content .content_body .job_description ul li + li { | |
| margin-top: 8px; | |
| } | |
| .job_details #boilerplate_wrapper { | |
| min-height: inherit; | |
| min-width: inherit; | |
| margin-top: 95px; | |
| } | |
| .job_details .job_description h2 { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| color: #15234a; | |
| line-height: 1.2; | |
| margin-bottom: 15px; | |
| font-size: 26px; | |
| } | |
| .job_details .job_description p { | |
| font-family: "Century-Gothic", Helvetica, Arial, sans-serif !important; | |
| font-weight: 400; | |
| font-size: 15px; | |
| line-height: 1.45; | |
| color: #595959; | |
| margin-bottom: 16px; | |
| } | |
| .job_details .job_description p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .job_details .job_description strong { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| } | |
| .job_details .job_description a { | |
| color: #15234a; | |
| text-decoration: underline; | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| } | |
| .job_details .job_description a:hover { | |
| text-decoration: none; | |
| } | |
| .job_details .job_description .gradient { | |
| background: -webkit-linear-gradient(left, #15c1d4, #b4bd1c); | |
| background-clip: border-box; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| } | |
| .job_details .section { | |
| padding: 25px 0 20px 0; | |
| } | |
| .job_details .section__title { | |
| position: relative; | |
| padding-left: 30px; | |
| padding-right: 40px; | |
| margin-bottom: 30px; | |
| color: #15234a; | |
| font-family: "Century-Gothic-Bold", Helvetica, sans-serif; | |
| font-size: 24px; | |
| z-index: 0; | |
| word-break: break-all; | |
| } | |
| .job_details .section__title::before { | |
| content: ""; | |
| position: absolute; | |
| top: -10px; | |
| left: 0; | |
| width: 73px; | |
| height: 72px; | |
| background-image: url("/media/images/requisitions-2021/image.png"); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| z-index: -1; | |
| } | |
| .job_details .section__content { | |
| flex: 4; | |
| padding-top: 2px; | |
| z-index: 0; | |
| } | |
| .job_details .section__content h4 { | |
| margin-bottom: 15px; | |
| font-size: 18px; | |
| font-family: "Century-Gothic-Bold", Helvetica, sans-serif; | |
| } | |
| .job_details.desktop #container { | |
| width: initial; | |
| min-width: initial !important; | |
| } | |
| .job_details.mobile #container { | |
| margin-top: 0; | |
| } | |
| .job_details.full_width #body_wrapper { | |
| padding-bottom: 0; | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .job_details #boilerplate_wrapper { | |
| margin-top: 0; | |
| } | |
| } | |
| @media only screen and (min-width: 1024px) { | |
| .job_details .job_description h2 { | |
| margin-bottom: 5px; | |
| line-height: 2; | |
| font-size: 34px; | |
| } | |
| .job_details .job_description p { | |
| font-size: 18px; | |
| } | |
| .job_details #content .content_body .job_description ul li { | |
| font-size: 18px; | |
| } | |
| .job_details #content .content_body .job_description ul li::before { | |
| top: 10px; | |
| } | |
| .job_details .section { | |
| display: flex; | |
| flex-direction: row; | |
| padding: 70px 0 48px; | |
| } | |
| .job_details .section__title { | |
| flex: 1; | |
| margin-bottom: 0; | |
| padding-left: 0; | |
| } | |
| .job_details .section__title::before { | |
| top: -10px; | |
| left: -36px; | |
| width: 83px; | |
| height: 82px; | |
| } | |
| .job_details .section__content { | |
| flex: 4; | |
| } | |
| .job_details .section__content h4:first-child, | |
| .job_details .section__content p:first-child, | |
| .job_details .section__content ul:first-child { | |
| margin-top: 4px; | |
| } | |
| } | |
| .job_details .benefits { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-bottom: 40px; | |
| } | |
| .job_details .benefits__title { | |
| flex-basis: 100%; | |
| text-align: center; | |
| margin-bottom: 30px !important; | |
| } | |
| .job_details .benefits__item { | |
| flex-basis: 33.3333333%; | |
| text-align: center; | |
| } | |
| .job_details .benefits__item img { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .job_details .benefits__item p { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif !important; | |
| font-size: 13px; | |
| } | |
| #fakeHeader { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| height: 358px; | |
| background-size: cover; | |
| background-position: center center; | |
| } | |
| #fakeHeader__wrapper { | |
| width: 100%; | |
| max-width: 960px; | |
| margin: 0 auto; | |
| color: white; | |
| padding: 0 20px 50px 20px; | |
| } | |
| #fakeHeader__pretext { | |
| font-size: 18px; | |
| line-height: 1.5; | |
| } | |
| #fakeHeader__title { | |
| margin-bottom: 15px; | |
| line-height: 1; | |
| font-size: 30px; | |
| } | |
| #fakeHeader__lines { | |
| width: 42px; | |
| margin-bottom: 20px; | |
| } | |
| #fakeHeader__info { | |
| font-size: 15px; | |
| } | |
| #fakeHeader__pretext, #fakeHeader__title, #fakeHeader__info { | |
| font-family: "Century-Gothic-Bold", Helvetica, Arial, sans-serif; | |
| color: white; | |
| letter-spacing: 0.007em; | |
| } | |
| #fakeHeader__logo { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 250px; | |
| } | |
| @media only screen and (min-width: 1024px) { | |
| #fakeHeader { | |
| height: 425px; | |
| justify-content: center; | |
| } | |
| #fakeHeader__wrapper { | |
| width: 790px; | |
| padding: 0 150px 0 0; | |
| } | |
| #fakeHeader__pretext { | |
| font-size: 28px; | |
| line-height: 1; | |
| } | |
| #fakeHeader__title { | |
| margin-bottom: 7px; | |
| line-height: 1.3; | |
| font-size: 72px; | |
| letter-spacing: 0.007em; | |
| } | |
| #fakeHeader__lines { | |
| width: 60px; | |
| } | |
| #fakeHeader__info { | |
| font-size: 16px; | |
| } | |
| #fakeHeader__logo { | |
| width: 373px; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.26.11", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment