@import 'reset'; @import 'variables'; body { font-family: $font2; overflow-x: hidden; &: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; } header { background: -webkit-linear-gradient($maroon - 50, $maroon); background: -o-linear-gradient($maroon - 50, $maroon); background: linear-gradient($maroon - 50, $maroon); 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; } #inner-header { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-align: center; -webkit-box-align: center; align-items: center; color: #fff; padding: 1.5rem .5rem; } #logo { -webkit-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; } #inner-right { 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: center; -webkit-box-pack: center; justify-content: center; padding: 0 .5rem; #inner-right-top { display: -ms-flexbox; display: -webkit-box; display: flex; text-align: center; line-height: 1.3; margin-bottom: 5px; > div { margin: 0 8px; } } #inner-right-btm { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; margin-top: 5px; p { font-family: $font3; line-height:1.2; letter-spacing: 1px; font-size: 24px; -webkit-transform: skewX(-5deg); -ms-transform: skewX(-5deg); transform: skewX(-5deg); margin: 0 5px; } i { margin: 0 .5rem; font-size: 24px; &:hover { -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } } } } #nav { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; background: -webkit-gradient(linear, left top, left bottom, from($grey - 40), to($grey)); background: -webkit-linear-gradient($grey - 40, $grey); background: -o-linear-gradient($grey - 40, $grey); background: linear-gradient($grey - 40, $grey); width: 100%; li { color: #fff; padding: 1rem 10px; -webkit-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; border-right: 2px solid rgba(255,255,255,.25); &:hover { background: #fff; color: $grey; } &#contact-nav { border-right: none; } } } #nav.fixed { position: fixed; -webkit-transform: translateY(-10vh); -ms-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); } } #menuBtn { display: none; } .hero { background: url("../graphics/sign.JPG"); padding: 2rem 0; width: 100%; background-repeat: no-repeat; background-size: cover; -webkit-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; background-position: 50% 70%; background-color: rgba(255,255,255,.35); background-blend-mode: screen; } #top-call { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 330px; margin: 0 1rem; h1,p { background: rgba(255,255,255,.9); padding: 1rem; color: $grey; margin: .5rem 0; -webkit-box-shadow: inset 0px 0px 8px 2px rgba(0,0,0,.5); box-shadow: inset 0px 0px 8px 2px rgba(0,0,0,.5); text-align: right; } h1 { font-size: 2.5rem; font-family: $font3; font-weight: 700; } p { font-size: 17px; } #srchBtn { font-family: $font2; background: $maroon; color: #fff; padding: 1rem 6rem; text-align: center; margin: 1rem 0; font-size: 16px; text-transform: uppercase; -webkit-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; border-bottom: 3px solid transparent; &:hover { background: $maroon; border-bottom: 3px solid #fff; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } &:active { border-bottom: 3px solid transparent; -webkit-transform: none; -ms-transform: none; transform: none; } } } #info { background: -webkit-gradient(linear, left top, left bottom, from($grey), to(#000)); background: -webkit-linear-gradient($grey, #000); background: -o-linear-gradient($grey, #000); background: linear-gradient($grey, #000); color: #fff; padding: 5rem 0rem 2rem; } #info-img-wrap { position: relative; max-width: 90%; 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; margin: 0 auto; -webkit-transform: translateX(3rem); -ms-transform: translateX(3rem); transform: translateX(3rem); } #info-img-wrap img { position: absolute; height: auto; width: 75%; top: -205px; } #about { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; h1 { font-family: $font3; font-size: 2.9rem; line-height: 1.1; color: #fff; letter-spacing: 1px; padding: 0 .5rem; padding-bottom: 10px; margin: 1rem 0; border-bottom: 2px solid #fff; text-align: center; } p { line-height: 1.5; max-width: 88ch; padding: 0 .5rem; margin: 10px; text-align: center; } #inner-about { margin-top: 30px; background-image: url("../graphics/tire.jpg"); background-color: rgba(0,0,0,.65); background-blend-mode: multiply; background-size: cover; background-attachment: fixed; -webkit-box-shadow: inset 0px 0px 40px 25px #000; box-shadow: inset 0px 0px 40px 25px #000; padding: 4rem; iframe { float: right; margin: 10px; height: 60vh; max-height: 355px; width: 100vw; max-width: 400px; -webkit-box-shadow: 0px 0px 5px #fff; box-shadow: 0px 0px 5px #fff; } p { line-height: 1.7; max-width: 88ch; padding: 0 .5rem; text-align: left; font-size: 16px; } /*h2 { margin: 5px 15px; font-size: 1.5rem; font-family: $font3; line-height: 1.2; span { color: $maroon + 40; font-size: 32px; } }*/ #call-now { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: $font3; #call-left { color: #fff; font-size: 32px; color: $maroon + 50; margin-left: 15px; } #call-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; p { color: #fff; line-height: 1; font-size: 32px; } } } } /*-webkit-background-clip: text; background-clip: text; background-image: url("../graphics/tire.jpg"); background-size: cover; background-attachment: fixed; background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-repeat: no-repeat; background-size: cover; text-align: center; background-image: url("../graphics/tire.jpg");*/ } #service-wrap { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3rem 0; } .service-list { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; margin: 0 1rem; p { margin-top: 10px; line-height: 1.7; max-width: 35ch; text-align: center; } } .service-call { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; i { font-size: 2.25rem; margin: 0 .5rem 0 0; } li { font-size: 16px; max-width: 50ch; &:nth-child(1) { font-family: $font3; color: $maroon + 60; font-size: 23px; margin-bottom: 5px; letter-spacing: 1px; } } } #calltoday { text-align: center; font-size: 3rem; font-family: $font3; letter-spacing: 1px; padding: 1rem 0; span { color: $maroon; } } .footer { background: -webkit-linear-gradient($maroon, $maroon - 50); background: -o-linear-gradient($maroon, $maroon - 50); background: linear-gradient($maroon, $maroon - 50); } .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; #assoc-wrap { background: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; border-radius: 10px; margin: 10px 0; img { } } h1 { font-size: 1.3rem; font-weight: 700; padding-bottom: 1rem; font-family: "Anton", sans-serif; letter-spacing: 2px; } li { line-height: 1.7; i { padding-right: .5rem; } } } p#copy { padding: .5rem; color: #fff; font-size: 13px; } /** MAP PAGE **/ /*#scroller { animation: scroller 17s linear infinite; font-size: 18px; color: $maroon; font-family: $font3; letter-spacing: 1px; text-align: center; min-width: 100%; padding: 10px; font-weight: 700; display: flex; aling-items: center; justify-content: center; flex-wrap: wrap; .spacer { display: flex; aling-items: center; justify-content: center; width: 15px; height: 15px; background: $grey; margin: 0 15px; border-radius: 50%; } } */ #map { min-width: 100%; height: 380px; position: relative; iframe { min-width: 100%; height: 100%; backround-size: cover; } img { position: absolute; bottom: 0; max-width: 300px; height: auto; width: 100%; -webkit-transform: translateX(calc(50vw - 150px)); -ms-transform: translateX(calc(50vw - 150px)); transform: translateX(calc(50vw - 150px)); bottom: -110px; z-index: 3; } } /*@keyframes scroller { 0% { transform: translateX(-45vw); } 50% { transform: translateX(0%); } 100% { transform: translateX(45vw); } }*/ #map-call { background-color: $grey; 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: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; text-align: center; padding: 6rem 1rem 1rem; color: #fff; h1 { font-family: $font2; font-weight: 700; font-size: 2rem; color: #fff; margin: .5rem 0; } h2 { font-size: 1.5rem; margin-bottom: .5rem; } p { padding-bottom: 1rem; border-bottom: 5px dotted $maroon + 50; } } #directions { background: -webkit-linear-gradient($grey, $grey - 80); background: -o-linear-gradient($grey, $grey - 80); background: linear-gradient($grey, $grey - 80); width: 100%; } #directions-wrap { padding: 1rem .5rem 2rem; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: distribute; -webkit-box-pack: center; justify-content: center; width: 100%; ul { color: #fff; margin: 0 .5rem; li { line-height: 1.7; max-width: 44ch; font-size: 15px; list-style: decimal inside; } h1 { font-family: $font3; font-size: 1.4rem; margin: 1rem 0; span { font-family: $font2; } } } } /*** SELL YOUR CAR PAGE - FORM ************************************/ .form-hero { background: url("../graphics/keys.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% right; } #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: 8rem 0; h1 { font-family: $font3; font-size: 4rem; color: $maroon; 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; } #mailForm h1 { font-size: 16px; } #mailForm label { color: $grey; font-weight: 700; } #mailForm .junkerDetails { border: 5px double $maroon; 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: $maroon - 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: $maroon; color: #fff; padding: 1rem 4rem; } #mailForm input[type="submit"]:hover, #mailForm input[type="reset"]:hover { background: $maroon; color: #fff; border-color: $maroon; } /****************************BEGIN MOBILE BREAKPOINTS*******************************************/ @media all and (max-width: 900px) { #inner-header { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; padding: 1rem .5rem; } #nav { li { padding: 1rem 7px; font-size: 14px; } } #info { padding: 3.2rem 0rem 5rem; } #info-img-wrap img { top: -130px; } #about { h1 { font-family: $font3; font-size: 2rem; line-height: 1.1; text-shadow: -1px 1px 0px rgba(255,255,255,.7); letter-spacing: 1px; padding: 0 .5rem; margin: 10px; } p { line-height: 1.5; max-width: 75%; padding: 0 .5rem; } } } @media all and (max-width: 767px) { body { padding-top: none !important; } #inner-right-top, #inner-right-btm { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; & > div { padding: 5px 0; } } #inner-right-btm { p { text-align: center; } } /****nav****/ #menuBtn { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: flexend; -webkit-box-pack: end; justify-content: flex-end; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding: .5rem; z-index: 100; font-size: 2rem; background: $maroon; i { color: #fff; } } #nav, #nav-items, #nav-wrap { display: none; position: relative; z-index: 101; } #nav.active { 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-align: start; -webkit-box-align: start; align-items: flex-start; padding-bottom: 0; width: 100%; left: 0; top: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)); background: -webkit-linear-gradient(#eee, #fff); background: -o-linear-gradient(#eee, #fff); background: linear-gradient(#eee, #fff); li { 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-align: start; -webkit-box-align: start; align-items: flex-start; padding: 1rem; font-size: 1.2rem; width: 100%; color: $grey; } a { width: 100%; border-right: none; border-bottom: 2px solid rgba(0,0,0,.15); } } #nav li:hover, #nav a:hover { background: $grey; color: #fff; } .hero{ margin-top: 0px !important; background-position: left; } #nav.fixed { position: initial !important; -webkit-animation: none !important; animation: none !important; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #top-call{ height: auto; padding-top: 0; h1 { font-size: 3rem; font-family: $font3; } p { font-size: 1rem; } } /** info / about **/ #info { padding: 1rem 0; } #info-img-wrap img { display: none; } #about { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-align: center; -webkit-box-align: center; align-items: center; h1 { text-align: center; margin-bottom: 1rem; } #inner-about { 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; max-width: 90%; iframe { float: none; min-width: 90vw; min-height: 40vh; max-width: 100%; } h2 { margin: 0 auto; font-size: 6vw; } } } #service-wrap { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 0; .service-list { margin: 1rem 2.75rem; } } #calltoday { font-size: 6vw; } /***********FOOTER********************/ .footer-cont { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 1rem; } #copy { font-size: 12px; } /**map page mobile**/ #map { border-bottom: 5px solid $maroon; min-width: 100%; height: 45vw; iframe { min-width: 100%; height: 100%; backround-size: cover; } img { position: absolute; bottom: 0; max-width: 200px; -webkit-transform: translateX(calc(50vw - 90px)); -ms-transform: translateX(calc(50vw - 90px)); transform: translateX(calc(50vw - 90px)); bottom: -110px; z-index: 3; } } #directions-wrap { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; ul { h1 { text-align: left; } li { max-width: 80%; } } } /** 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; } }