/* Scss Document */ @import 'reset'; @import 'variables'; @import 'mixins'; body { font-family: $font1, sans-serif; background-color: $darkred; overflow-x: hidden; } .container { max-width: 95vw; margin: 0 auto; position: relative; } 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: $darkred; color: #fff; display: block; padding: 20px; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px); z-index: 520; 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: #fff; 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 area */ #top-header { background: $lightred; } #top-info { text-align: center; font-size: 3vw; color: #fff; padding: .5rem 0; } header { /*background: url("../graphics/metal2.jpg");*/ position: relative; background-color: rgba(0,0,0,1); /*background-blend-mode: multiply;*/ } #inner-header { padding: 1rem 0; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: auto; } #logo { padding: .5rem; width: 95vw; height: auto; } #logo img{ height: auto; width: 100%; } #right-header { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } #phone { color: #fff; font-weight: 700; font-size: $font-size * 2.3; letter-spacing: 1px; text-align: center; padding: .5rem 0; } #sm-nav { display: -ms-flexbox; display: -webkit-flex; display: flex; padding: .5rem 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; li { color: #fff; font-family: $font2; padding: 0 .5rem; letter-spacing: 4px; font-weight: 700; &:hover { text-decoration: underline; } } } /* end header area */ /*nav - mobile */ #menuBtn { width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: flexend; -webkit-justify-content: flex-end; justify-content: flex-end; -ms-flex-align: center; -webkit-align-items: center; align-items: center; z-index: 400; margin: 0; font-size: 2rem; position: relative; background-color: #fff; } #menuBtn i { padding: .5rem 1rem .5rem 0; color: $darkred; } #menuBtn p { font-size: 14px; padding-right: 10px; color: $darkred; font-family: $font2; } #nav { display: none; position: absolute; z-index: 101; } #nav.active { position: relative; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; height: auto; width: 100%; background: $midred; z-index: 50000; overflow-x: hidden; padding-top: 0; } #nav li { text-align: left; padding: 1rem 0rem 1rem 1rem; font-size: $font-size; width: 100vw; color: #fff; border-top: 2px solid rgba(0,0,0,.2); &:hover { background: $lightred; } } /* end mobild nav */ /* hero section */ .hero { width: 100%; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center; } .main-hero { background-image: url("../graphics/hero.jpg"); } #top-call { background: rgba(192, 58, 43, .66); padding: 1rem 0; } #intro { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; width: 100%; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #fff; text-align: center; } #top-left { font-family: $font1; font-weight: 700; text-transform: uppercase; padding: .5rem 0; h1 { font-size: 59px; } h2 { font-size: $font-size * 2; } } #top-right p{ max-width: 60ch; font-family: $font2; line-height: 1.3; } #top-right-info p { font-size: $font-size * 2.2; color: #fff; text-transform: uppercase; font-weight: 700; text-align: center; font-family: $font1; padding-top: .5rem; } #top-right-info p span { color: $lightred; text-shadow: 2px 1px 1px #fff; } /* end hero */ /*boxes*/ #boxes { padding: .5rem 0; border-top: 2px dashed #fff; border-bottom: 2px dashed #fff; } #box-list { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; li { color: #fff; font-family: $font2; text-align: center; padding: .5rem; font-size: $font-size / 1.25; } > ul.box { margin: 1rem 0; background: rgba(0,0,0,1); box-shadow: 0px 0px 4px #fff; } } #box-list li.box-title { font-size: $font-size * 2; font-weight: 700; padding: .5rem 0; text-transform: uppercase; font-family: $font1; } li#searchBtn { color: #fff; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-weight: 700; text-align: center; background: $midred; padding: 10px 0; text-transform: capitalize; &:hover { color: $darkred; background: #fff; } } /*end boxes*/ /*main*/ #main { background: url("../graphics/pistons.jpg") no-repeat; width: 100%; background-size: cover; min-height: 500px; background-position: center; } #inner-main { padding: 2rem; } .main-section { background: rgba(255,255,255,.75); padding: 1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 1rem 0; } #why { color: $grey; font-size: $font-size * 3.15; font-style: italic; text-align: center; & span { color: $midred; } } #left-main { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } #hours { background: rgba(192, 58, 43, .75); -ms-flex-order: -1; -webkit-order: -1; order: -1; } #hours-wrap { display: block; width: 100%; color: #fff; line-height: 1.4; h1 { font-size: $font-size * 2.2; font-weight: 700; text-transform: uppercase; padding-bottom: 5px; border-bottom: 5px solid #fff; text-align: center; } li { font-weight: 700; text-transform: uppercase; font-size: 21px; &.day { float: left; } &.time { float: right; } } } #mid-main { width: 100%; } p.main-section { color: $grey; font-size: 21px; font-weight: 700; font-family: $font2; } #sidebar { background: url("../graphics/stack.jpg");/* background-color: rgba(0,0,0,.8); background-blend-mode: multiply;*/ background-repeat: no-repeat; background-size: cover; padding: .75rem; position: relative; &:after { content:""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: rgba(192, 58, 43, .75); z-index: 0; } #sidewrap { height: 375px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; } #forms, #orgs, #pay, #sidewrap p{ z-index: 3; } #sidewrap p { font-size: 6vw; color: #fff; font-weight: 700; text-shadow: 1px 1px 5px #000; text-align: center; } #pay { max-width: 100%; } #pay img { height: auto; width: 100%; } #forms li{ font-size: $font-size * 1.5; font-weight: 700; border: 2px solid #fff; padding: .5rem .25rem; width: calc(100% - 20px); margin: 0 auto; margin-top: 20px; background: $lightred; color: #fff; &:hover { background: #fff; color: $darkred; } & span { font-size: $font-size; } } } /*end main*/ /*footer*/ .footer { background: $lightred; } .footer-cont { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; padding: 1rem 1rem 0; color: #fff; } .footer-cont h1 { font-size: 2.25rem; font-weight: 700; padding-bottom: 1rem; font-family: "Oswald", sans-serif; letter-spacing: 2px; } .footer-cont li { line-height: 1.7; font-family: "Oswald", sans-serif; } #footer-mid li:hover, #footer-right li:hover { cursor: pointer; color: $grey; } .footer-cont li i { padding-right: .5rem; } p#copy { color: #fff; font-family: "Oswald", sans-serif; letter-spacing: 1px; padding: 1rem .5rem; } /*map page*/ .map-hero { background-image: url("../graphics/maphero.jpg"); width: 100%; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center; } #map-cont { padding: 2rem 0; } #map-wrap { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; width: 100%; -ms-flex-pack: distribute; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: start; -webkit-align-items: center; align-items: center; padding: 0 .5rem; overflow: hidden; color: #fff; } .directions { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-transform: translateX(-100vw); -ms-transform: translateX(-100vw); transform: translateX(-100vw); -webkit-animation: slide .5s .75s linear; animation: slide .5s .75s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards } .directions > ul { padding: .5rem; } ul.location { margin: 10px 0; line-height: 1.5; li { font-family: $font2; } } li.location-name { font-weight: 700; text-decoration: underline; margin-bottom: 5px; font-size: 1.3rem; } iframe#mapframe { -webkit-transform: translateX(100vw); -ms-transform: translateX(100vw); transform: translateX(100vw); -webkit-animation: slide .5s .75s linear; animation: slide .5s .75s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; max-width: 80vw; } @-webkit-keyframes slide { 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slide { 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /************************************************************ E N D M A P P A G E **************************/ /*end map page*/ /* contact form page */ .contact-hero { background-image: url("../graphics/engine.JPG"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 300px; } .form-container { padding: 2rem 0; } .card-form { width: calc(100% - 50px); background: $lightred; box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15); margin: 0 auto; -webkit-animation: slide .5s .5s linear; animation: slide .5s .5s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: translateX(-100vw); -ms-transform: translateX(-100vw); transform: translateX(-100vw); } .card-form .form-title { width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: 80px; font-size: 2rem; font-weight: bold; background: $grey; text-align: center; line-height: 1.5; font-family: "Oswald", sans-serif; letter-spacing: 2px; color: #fff; } .form-title span { font-size: 16px; padding: 0 5px; } .card-form .form-body { padding: 10px; } .card-form .form-body .row { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; padding: 10px; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; } ::-moz-placeholder { /* Firefox 19+ */ color: #000; } :-ms-input-placeholder { /* IE 10+ */ color: #000; } :-moz-placeholder { /* Firefox 18- */ color: #000; } .card-form .form-body .row input[type="text"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; margin: 0 15px; height: 35px; padding: 5px 15px; border-radius: 5px; outline: none; border: none; background: #fff; color: #000; font-size: 24px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .card-form .form-footer { margin: 0 25px 15px 25px; padding: 15px 10px; } .card-form .form-footer a { height: 40px; border: none; border-radius: 5px; padding: 5px 15px; background: $grey; margin-right: 10px; font-size: 24px; color: #fff; width: 200px; text-align: center; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0 auto; transition: .2s all; } .card-form .form-footer span { margin-left: 8px; } .form-footer a:hover { background: #fff; color: $darkred; -webkit-animation: wobble .3s linear; animation: wobble .3s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } input#message { height: 130px; } .form-container { padding-bottom: 10px; } #check { text-align: center; padding-bottom: 5px; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(0px); transform: translateX(0px); } 75% { -webkit-transform: translateX(6px); transform: translateX(6px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes wobble { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(0px); transform: translateX(0px); } 75% { -webkit-transform: translateX(6px); transform: translateX(6px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } /*********************************************** E N D C O N T A C T P A G E **************************************************/ /*end contact form page*/ @media all and (min-width: 768px) { #logo { transition: .2s all ease-in-out; max-width: 412px; } .container { max-width: 1100px; padding: 0 .5rem; margin: 0 auto; } #top-info { font-size: $font-size; text-align: right; padding: .5rem; } /* header area */ #inner-header { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } /*#mid-header { text-align: right; font-size: $font-size * 1.8; } #mid-header span { color: $lightred; text-shadow: 2px 1px 2px #fff; }*/ #right-header { height: 80px; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } #sm-nav { display: -ms-flexbox; display: -webkit-flex; display: flex; padding: .5rem .25rem; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; li { color: #fff; font-family: $font2; font-size: 14px; } a { padding: 0 .25rem; } } /* end header area */ /*nav - desktop*/ #menuBtn { display: none } #nav { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; position: absolute; background: $lightred; color: #fff; font-size: 18px; right: .5rem; margin-top: -25px; box-shadow: 0px 3px 7px #000; & li { padding: .75rem 2.25rem; font-size: $font-size; width: auto; color: #fff; border-top: none; transition: all .2s ease-in-out; &:hover { background: #fff; color: $darkred; } } } /* end desktop nav */ /* hero section */ #top-call { padding: 3rem 0; } #intro { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; width: 100%; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #fff; text-align: left; } #top-left { font-family: $font1; font-weight: 700; text-transform: uppercase; padding: .5rem 0; h1 { font-size: 44px; } h2 { font-size: $font-size * 1.7; } } #top-right p{ max-width: 55ch; font-family: $font2; line-height: 1.3; } #top-right-info p { padding-top: 0; } /* end hero */ /*main*/ #main { width: 100%; background-size: cover; min-height: 500px; background-position: center; } #inner-main { padding: 1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; padding-top: 50px; > div { } } .main-section { background: rgba(255,255,255,.75); padding: 1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 0; height: 100%; } #mid-main { max-width: 40ch; padding: 0 1rem; } p.main-section { line-height: 1.45; } #why { color: $grey; font-size: $font-size * 3.15; font-style: italic; & span { color: $midred; } } #left-main { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; height: 385px; > div { } } #hours { background: rgba(192, 58, 43, .75); -ms-flex-order: 1; -webkit-order: 1; order: 1; } #hours-wrap { h1 { font-size: $font-size * 1.5; } li { font-weight: 700; text-transform: uppercase; font-size: 21px; &.day { float: left; } &.time { float: right; } } } p.main-section { color: $grey; font-size: 21px; font-weight: 700; font-family: $font2; } #sidebar { #sidewrap { height: 370px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; } #sidewrap p { font-size: 2rem; color: #fff; font-weight: 700; text-shadow: 1px 1px 5px #000; text-align: center; } #pay { max-width: 305px; margin: 0 auto; } #pay img { height: auto; width: 100%; } #forms li{ font-size: $font-size * 1.5; font-weight: 700; border: 2px solid #fff; padding: .5rem .25rem; width: calc(100% - 20px); margin: 0 auto; margin-top: 20px; background: $lightred; color: #fff; &:hover { background: #fff; color: $darkred; } & span { font-size: $font-size; } } } /*end main*/ /* footer */ .footer-cont { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } /*end footer*/ /*map mobile*/ #map-wrap { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } } @media all and (min-width: 860px) { #logo { max-width: 512px; margin-bottom: 10px; } #mid-header { font-size: $font-size * 2.2; } #right-header { height: 90px; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } #sm-nav{ li { padding: 0 .5rem; &:last-child { padding-right: 0; } } } #top-left { h1 { font-size: 59px; } h2 { font-size: $font-size * 2; } } #breaker { display: block; width: 3px; background: #fff; height: 120px; } /*boxes*/ #boxes { border-top: none; border-bottom: none; height: 340px; position: relative; } #box-list { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; position: absolute; width: 100%; margin-top: -65px; } li#searchBtn { background: $midred; padding: 28px 0; text-transform: capitalize; } /*end boxes*/ } @media all and (min-width: 1000px) { #nav { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; position: absolute; background: $lightred; color: #fff; font-size: 18px; right: .5rem; margin-top: -30px; & li { padding: 1.5rem 3.25rem; font-size: $font-size; width: auto; color: #fff; border-top: none; } } } @media all and (max-width: 395px) { #why { font-size: 11vw; } #sm-nav { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; line-height: 1.3; } }