/* Scss Document */ @import 'reset'; @import 'variables'; body { font-family: $font2; overflow-x: hidden; background: url("../graphics/cars.JPG"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-color: rgba(255,255,255,.55); background-blend-mode: screen; &:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,.6); box-shadow: 0px 0px 8px rgba(0,0,0,.6); z-index: 100; } } .container { max-width: 1100px; margin: 0 auto; } a { text-decoration: none; color: inherit; } /*Overlay and cut sheets stuff*/ .overlay { background-color: rgba(0,0,16,0.7); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 500; } .modal { background-color: $yellow; color: $green; display: block; padding: 20px; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px); z-index: 520; -webkit-box-shadow: 5px 5px 7px #000; box-shadow: 5px 5px 7px #000; font-size: 18px; border: 5px solid #000; height: auto; width: 400px; margin: 0 auto; } .modal h1 { font-weight: 700; margin-bottom: 10px; } .modal a { text-decoration: none; } .modal a:hover, .modal a:active { color: $green - 50; text-decoration: underline; } .modal ul.sheets { padding: 10px; } .modal ul.sheets li:before { font-family: FontAwesome; content: "\f00c"; padding-right: 0.5em; } .sheets li { padding-bottom: 5px; } .sheets:after { font-family: FontAwesome; content: "\f1b9"; float: right; positon: absolute; margin-top: -190px; margin-right: 20px; font-size: 184px; color: #fff; } #cutSheetsBtn:hover { cursor: pointer; } /*End cut sheet stuff*/ header { width: 100%; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.6); box-shadow: 0px 0px 10px rgba(0,0,0,.6); position: relative; background: #28722c; background: linear-gradient(to bottom, #28722c 0%, #355e3b 50%, #104622 100%); } #inner-header { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding: .5rem 0; color: #fff; } #logo { padding: .5rem; -webkit-transition: .2s all ease-in-out; transition: .2s all ease-in-out; img { max-width: 250px; } } /*#inner-mid { margin: 0 .5rem; #inner-mid-top { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; text-align: center; margin-bottom: 10px; p:nth-of-type(2) { font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; color: $yellow; } } }*/ #right-header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #top-right-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 8px; } #top-bottom-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; h1 { font-family: $font1; font-size: 2.1rem; letter-spacing: 1px; margin: 5px; } } ul.top-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; li { font-size: 15px; line-height: 1.5; color: #fff; text-align: center; } &:nth-of-type(3) { li { line-height: 1.2; } li:nth-of-type(1) { font-weight: 700; } } } #social i { position: relative; font-size: 2rem; margin: 0 .5rem; &:hover { color: $yellow; cursor: pointer; }/* &:nth-of-type(1):after { content: "Like us!"; font-size: 10px; font-family: $font2; text-align: center; color: #fff; display: none; } &:nth-of-type(2):after { content: "Email us!"; font-size: 11px; font-family: $font2; text-align: center; color: #fff; display: none; }*/ } #social i:hover:after { display: block; position: absolute; top: -25px; } #menuBtn { display: none; } #nav { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; background: $yellow; width: 100%; li { font-weight: 700; padding: 1rem; font-size: 17px; border-right: 2px solid rgba(0,0,0,.2); &:hover { background: #28722c; color: $yellow; } } } li#sellnav { border-right: none; } #nav.fixed { position: fixed; -webkit-transform: translateY(-10vh); transform: translateY(-10vh); top: 0; -webkit-animation: slideDown .3s linear; animation: slideDown .3s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; z-index: 200; } @-webkit-keyframes slideDown { 100% { -webkit-transform: translateY(0vh); transform: translateY(0vh); } } @keyframes slideDown { 100% { -webkit-transform: translateY(0vh); transform: translateY(0vh); } } .hero { background: url("../graphics/front.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 60%; background-color: rgba(255,255,255,.15); background-blend-mode: screen; height: 380px; width: 95%; max-width: 95%; margin: 0 auto; margin-top: 1rem; border: 5px solid #28722c; } #top-call { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 640px; text-align: center; #srchBtn { margin: 3rem 0 0 3rem; text-transform: uppercase; -webkit-transition: .1s all ease-in-out; transition: .1s all ease-in-out; display: inline-block; background: #28722c; background: linear-gradient(to bottom, #28722c 0%, #355e3b 50%, #104622 100%); color: #fff; text-shadow: 1px 1px 0px #000; padding: 1.5rem 2rem; font-size: 46px; font-weight: 700; font-family: $font3; letter-spacing: 2px; border: 4px solid $yellow; border-radius: 8px; &:active { -webkit-transform: translateY(4px); transform: translateY(4px); } } } #wrnty { margin: 1rem 0 0 2rem; p { font-family: $font1; font-size: 3.5rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; -webkit-text-stroke: .5px $green; font-style: italic; span { color: $yellow; -webkit-text-stroke: .5px $green; } } } #mid-call { font-size: 4rem; color: $yellow; text-shadow: -2px 0px 3px #000; -webkit-text-stroke: 1px #000; font-family: $font1; margin: 1.5rem; text-align: center; } #about { border: 5px solid #28722c; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; background: rgba(255,255,255,.9); padding: 1rem .75rem; margin: 1rem 0; width: 98%; } #inner-about { h1 { font-family: $font3; font-weight: 700; font-size: 5rem; text-align: center; color: #28722c; letter-spacing: 2px; padding: 0 .5rem; margin-bottom: 1rem; span { color: $yellow; -webkit-text-fill-color: $yellow; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: $green; } } p { line-height: 1.7; padding: 0 .5rem; margin-bottom: 1rem; } } #about-btm { width: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; img { margin: 1rem .5rem; border: 5px solid #28722c; height: auto; width: 90%; } } #slider { height: 335px; width: 596px; background-position: left center; background: url("../graphics/newslider.jpg"); margin: 1rem .5rem; border: 5px solid $green; -webkit-animation: slider 30s steps(10) infinite; animation: slider 30s steps(10) infinite; } @-webkit-keyframes slider { 100% { background-position: -5960px; } } @keyframes slider { 100% { background-position: -5960px; } } aside { display: -ms-flexbox; display: -webkit-box; display: flex; width: 350px; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: .25rem; text-align: center; -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; } #hours { display: block; line-height: 1.3em; margin-bottom: .5rem; padding: 1rem; background: #28722c; color: $yellow; font-weight: 700; h1 { border-bottom: 2px solid $yellow; font-size: 1rem; margin-bottom: 3px; } } #associations { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; h2 { font-family: $font2; font-size: 18px; margin: .5rem; } img { width: 215px; height: 108px; margin: .25rem 0; border: none; } } p#industry { font-size: 14px; line-height: 1.6; padding: 1rem .5rem; } p#copy { color: #fff; padding: .5rem 0; } #btm-call { font-family: "Lobster", serif; font-size: 2.2rem; color: $yellow; text-shadow: -2px 1px 5px #000; text-align: center; margin: 1.5rem; } .footer { background: #28722c; background: linear-gradient(to bottom, #28722c 0%, #355e3b 50%, #104622 100%); } .footer-cont { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; padding: 1rem .5rem 0rem; color: #fff; h1 { font-size: 1.3rem; font-weight: 700; padding-bottom: 1rem; letter-spacing: 2px; } #footer-mid, #footer-right { li { &:hover { color: $yellow; } } } li { line-height: 1.7; i { padding-right: .5rem; } } ul.btn { margin-bottom: 1rem; } a.btn { text-decoration: none; } div.btn, ul.btn li { background: linear-gradient($yellow, $yellow - 50); color: $green; font-weight: 700; margin: .4rem auto; padding: .25rem .5rem; } div.btn:hover, ul.btn li:hover { background: $yellow; cursor: pointer; } .btn .lg { font-size: 1rem; text-transform: uppercase; } .btn .sm { font-size: .9rem; } .shbox, aside ul.btn li { -webkit-box-shadow: 1px 1px 4px $yellow; box-shadow: 1px 1px 4px $yellow; } } /***************************************MAP PAGE ********************************/ #map { width: 100%; display: block; margin: 0 auto; iframe { height: 350px; width: 99%; margin-top: 1rem; border: 3px solid $grey; } } #about-map-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #eee; padding: 1rem 5px; margin: 1rem 0; background: $yellow; border: 3px solid $grey; } #map-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; overflow: auto; margin: 10px 5px; padding: 10px 5px; img { width: 90%; height: auto; padding: 15px; background: #28722c; border: 3px solid $grey; } h1.mapcall { margin: 10px 0; font-family: $font3; font-size: 21px; font-weight: 700; color: $grey; &:nth-of-type(2) { font-family: $font2; font-size: 16px; font-weight: normal; } } } #directions { background: #28722c; border: 3px solid $grey; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px; margin: 1rem; ul.direction-list { margin: 10px 5px; li { list-style: decimal; list-style-position: outside; max-width: 35ch; line-height: 1.4; } h1.direction-title { font-family: $font3; font-weight: 700; font-size: 16px; margin: 10px 0; span { font-size: 14px; font-family: $font2; font-weight: normal; } } } } /*** SELL YOUR CAR PAGE - FORM ************************************/ .form-hero { background: url("../graphics/keys.jpeg"); background-size: cover; background-repeat: no-repeat; background-position: center; border: 3px solid $grey; } #form-call { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; padding: 3rem 1rem; h1 { font-family: $font3; font-size: 4rem; color: $yellow; text-shadow: -2px 2px 0px $grey; margin: 1rem .5rem; } h2 { font-family: $font3; font-size: 1.8rem; color: $grey; margin: 0 .5rem 1rem; } p { margin: 0 .5rem; font-size: 18px; color: $grey; } } #mailForm { margin: 1rem auto; padding: 1rem; background: $yellow; border: 3px solid $grey; width: 90%; } #mailForm h1 { font-size: 16px; } #mailForm label { color: $grey; font-weight: 700; } #mailForm .junkerDetails { border: 5px double $green; margin: .5em 0; padding: 1em; } #mailForm .fixed { display: inline-block; width: 10ch; } #mailForm .block { display: block; margin-bottom: 1em; } #mailForm .req, #mailForm label.req { color: $green - 80; } #mailForm .note, #check { margin: 1em 0; } #mailForm textarea { -webkit-box-sizing: border-box; box-sizing: border-box; height: 6em; outline: none; resize: none; width: 100%; } #mailForm input[type="submit"], #mailForm input[type="reset"] { background: $grey - 40; background: $green; color: #fff; padding: 1rem 4rem; } #mailForm input[type="submit"]:hover, #mailForm input[type="reset"]:hover { background: $green; color: #fff; border-color: $green; } @media all and (max-width: 875px) { #inner-header { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding: .5rem 0; color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #nav { li { padding: 1rem .5rem; } } .footer-cont { & > ul { margin: .5rem; li { font-size: 13px; } } } } @media all and (max-width: 767px) { #top-right-header { margin-bottom: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #top-bottom-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; h1 { font-size: 1.25rem; margin: none; text-align: center; } } #social i { font-size: 1.25rem; } /****nav****/ #menuBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: flexend; -ms-flex-pack: flexend; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: .5rem; z-index: 100; color: #fff; font-size: 2rem; background: $yellow; i { color: $green; } } #nav { display: none; position: relative; z-index: 101; } #nav.active { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative !important; -webkit-animation: none; animation: none; -webkit-transform: translateY(0vh); transform: translateY(0vh); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 0; width: 100%; left: 0; top: 0; background: $green; } #nav li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: .5rem 0 .5rem .5rem; width: 100%; color: $yellow; font-weight: 700; line-height: 1.8; } #nav a { width: 100%; border-right: none; border-bottom: 2px solid rgba(0,0,0,.15); } #nav li:hover{ background: $yellow; color: $green; } .hero { background-position: right; #top-call { width: 100%; #srchBtn { font-size: 21px; letter-spacing: 1px; border: 3px solid $yellow; margin: 1rem; } } #wrnty { margin: 1rem; p { font-size: 1.75rem; color: #fff; letter-spacing: 1px; } } } #mid-call { font-size: 7.5vw; } #about { width: 100%; border: none; } #inner-about { h1 { font-size: 8vw; max-width: 10ch; margin: 0 auto; margin-bottom: 1rem; } p { padding: 1rem 2rem 0 1rem; text-align: justify; } } #about-btm { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #slider { display: none; } aside { width: 90%; padding: .5rem; margin-right: 1rem; } p#industry { padding: 1rem; } .footer-cont { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; & > ul { margin: 10px 0; li { font-size: 15px; } } } /******* map mobile **********/ #map { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; iframe { width: 90vw; } } #about-map-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 90%; margin: 0 auto; margin-top: 1rem; margin-bottom: 1rem; } /** form page mobile **/ #form-call { height: auto; padding: 2rem 0; h1 { font-size: 3rem; } p { font-size: 1rem; } } .junkerDetails input { display: block; margin: .5rem 0; } }