:root {
--font-display: 'Fjalla One', sans-serif;
--font-body: 'Open Sans', sans-serif;
--color-black: #000;
--color-white: #fff;
--color-blue: #2568CD;
--color-blue-dark: #153C77;
--color-border: #edf2f7;
--color-form-bg: #2a323c;
} *, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 1rem;
background: #fff;
color: #000;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
display: block;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
a {
position: relative;
cursor: pointer;
color: inherit;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
p {
margin: 0;
} .hidden { display: none !important; }
@media (max-width: 768px) {
.mobile-hide { display: none !important; }
} header.site-header {
background: #000;
position: fixed;
width: 100%;
z-index: 50;
top: 0;
}
.header-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.header-nav { padding: 1rem 3rem; }
}
.w-logo {
width: 13em;
} .w-logo a::before {
content: none !important;
} nav li {
display: inline-block;
margin: 0 0.5rem;
}
nav li a {
color: #fff;
}
.mobilize-toggle {
cursor: pointer !important;
}
.mobilize-toggle svg {
fill: #fff !important;
} #mobilize-menu {
background-color: rgba(0, 0, 0, .57) !important;
}
.mobilize-menu-content ul,
.mobilize-menu-content {
text-align: right !important;
}
.mobilize-menu-content {
padding: 48px 9% !important;
} .home-section {
min-height: 100vh;
display: flex;
flex-direction: column;
} .home-section a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: #fff;
transform-origin: bottom right;
transform: scaleX(0);
transition: transform 0.5s ease;
}
.home-section a:hover::before {
transform-origin: bottom left;
transform: scaleX(1);
} .home-nav-wrapper {
background: #000;
width: 100%;
} .home-hero {
flex-grow: 1;
display: flex;
flex-direction: column;
background-image: url(https://dealerag.com/wp-content/uploads/2021/04/home.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.home-hero-content {
margin: auto 0;
padding: 2.5rem;
}
@media (min-width: 1024px) {
.home-hero-content { padding-left: 12rem; }
} .page-hero {
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 6rem 4rem 4rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media (min-width: 1024px) {
.page-hero {
padding-left: 0;
padding-right: 0;
}
}
.page-hero-content {
margin: auto 0;
max-width: 48rem;
}
@media (min-width: 1024px) {
.page-hero-content { padding-left: 12rem; }
} .bg-services {
background-image: url(https://dealerag.com/wp-content/uploads/2021/04/services.jpg);
}
.bg-about {
background-image: url(https://dealerag.com/wp-content/uploads/2021/04/about.jpg);
}
.bg-contact {
background-image: url(https://dealerag.com/wp-content/uploads/2021/04/contact.jpg);
} .hero-title {
font-family: var(--font-display);
font-size: 2.25rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
.hero-title { font-size: 3.75rem; }
}
.hero-text {
color: #fff;
line-height: 1.625;
margin-bottom: 1rem;
}
.hero-link {
color: #fff;
line-height: 1.625;
} footer.site-footer {
background: #000;
padding: 2.5rem 1.5rem;
color: #fff;
font-size: 0.75rem;
}
@media (min-width: 1024px) {
footer.site-footer { padding: 2.5rem 3rem; }
}
.footer-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
@media (min-width: 1024px) {
.footer-inner { flex-direction: row; }
}
.footer-left {
text-align: center;
margin-bottom: 2rem;
}
.footer-left p + p {
margin-top: 1rem;
}
@media (min-width: 1024px) {
.footer-left { text-align: left; margin-bottom: 0; }
}
.footer-right {
text-align: center;
}
@media (min-width: 1024px) {
.footer-right { text-align: right; }
}
.footer-right .copyright {
margin-bottom: 1rem;
}
@media (min-width: 1024px) {
.footer-right .copyright { margin-bottom: 0.25rem; }
}
footer nav li {
display: inline-block;
margin: 0 0.5rem;
}
footer nav li a {
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.footer-icon-gap {
margin-left: 1rem;
} .content-section {
padding: 4rem;
overflow-x: hidden;
}
@media (min-width: 1024px) {
.content-section { padding: 12rem; overflow-x: visible; }
}
.content-row {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (min-width: 1024px) {
.content-row { flex-direction: row; }
}
.content-half {
width: 100%;
}
@media (min-width: 1024px) {
.content-half { width: 50%; }
} .section-title {
font-family: var(--font-display);
font-size: 1.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #000;
line-height: 1.4;
margin-bottom: 3rem;
}
@media (min-width: 1024px) {
.section-title {
font-size: 2.25rem;
margin-bottom: 0;
}
}
.section-title span {
display: block;
font-size: 0.75em;
} .bio-text {
width: 100%;
margin-bottom: 0;
}
@media (min-width: 1024px) {
.bio-text { width: 50%; }
}
.bio-text p {
margin-bottom: 2rem;
line-height: 1.8;
}
.bio-text ul {
list-style: disc;
padding-left: 1.25rem;
}
.bio-text ul li {
list-style-type: disc;
margin-bottom: 0.5rem;
line-height: 1.625;
} .services-list {
list-style: none;
width: 100%;
padding: 0;
}
@media (min-width: 1024px) {
.services-list { width: 50%; }
}
.services-list li {
font-size: 1.125rem;
padding: 1rem 0;
border-bottom: 1px solid #edf2f7;
line-height: 1.625;
}
@media (min-width: 1024px) {
.services-list li { font-size: 1.5rem; padding: 2rem 0; }
}
.services-list li:first-child { padding-top: 0; }
.services-list li:last-child { border-bottom: none; padding-bottom: 0; }
.services-list li.services-note { font-weight: 700; font-size: 1rem; } .solution-wrapper {
padding-top: 5rem;
}
.solution-intro {
text-align: center;
padding: 0 3rem 1rem;
max-width: 64rem;
margin: 0 auto;
}
.solution-intro h1 {
font-size: 1.875rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1.5rem;
}
.solution-step {
display: flex;
flex-direction: column-reverse;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.solution-step {
flex-direction: row;
height: 22em;
}
}
.solution-step-content {
background: #fff;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}
@media (min-width: 768px) {
.solution-step-content { width: 50%; }
}
.solution-step-label {
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
position: absolute;
top: 1.5rem;
left: 1.5rem;
display: none;
}
@media (min-width: 768px) {
.solution-step-label { display: block; }
}
.solution-step-inner {
margin: auto;
width: 60%;
}
@media (max-width: 767px) {
.solution-step-inner { padding: 3rem; width: 100%; }
}
.solution-step-inner h2 {
font-size: 1.25rem;
font-weight: 700;
padding-bottom: 0.75rem;
margin-bottom: 1rem;
border-bottom: 1px solid #edf2f7;
}
.solution-step-img {
width: 100%;
}
@media (min-width: 768px) {
.solution-step-img { width: 50%; }
}
.solution-step-img img {
object-fit: cover;
width: 100%;
height: 100%;
}
.solution-cta {
text-align: center;
padding: 2.5rem 0 5rem;
} .dag-button,
input[type=submit] {
display: inline-block;
position: relative;
z-index: 1;
font-size: inherit;
font-family: inherit;
color: #fff;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: var(--color-blue);
cursor: pointer;
text-decoration: none;
}
.dag-button::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--color-blue-dark);
transform-origin: center right;
transform: scaleX(0);
transition: transform 0.25s ease-in-out;
}
.dag-button:hover { opacity: 1; }
.dag-button:hover::before {
transform-origin: center left;
transform: scaleX(1);
}
.dag-button-lg {
font-size: 1.125rem;
font-weight: 700;
padding: 0.75rem 3rem;
} input[type=text],
input[type=tel],
input[type=email],
input[type=date],
textarea {
border: 1px solid var(--color-border);
padding: 1rem !important;
width: 100%;
background: #fff;
color: #000;
}
textarea {
width: 100%;
height: 8rem;
max-width: 100% !important;
} .wpcf7 form.sent .wpcf7-response-output {
border-color: #fff !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 15px 0 0 !important;
padding: 0 !important;
border: 0 none !important;
}
.wpcf7-not-valid-tip {
margin-top: 10px;
} .mailgo-modal .mailgo-modal-content a.mailgo-by {
display: none !important;
} .dag-single ul {
list-style: disc !important;
}
.dag-single h2 {
font-weight: 700;
} .error-404 {
padding: 8rem 2rem 4rem;
text-align: center;
} .page-content-wrapper {
padding: 7rem 1.5rem 4rem;
}
@media (min-width: 1024px) {
.page-content-wrapper { padding: 8rem 5rem 6rem; }
}
.page-article {
background: #fff;
max-width: 56rem;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
text-transform: uppercase;
font-weight: 700;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #edf2f7;
line-height: 1.4;
} .dag-single p {
margin-bottom: 1rem;
line-height: 1.75;
}
.dag-single h2 {
font-size: 1.25rem;
font-weight: 700;
margin: 1.5rem 0 0.75rem;
}
.dag-single h3 {
font-size: 1.1rem;
font-weight: 700;
margin: 1.25rem 0 0.5rem;
}
.dag-single ul {
list-style: disc !important;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.dag-single ol {
list-style: decimal;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.dag-single li {
margin-bottom: 0.4rem;
line-height: 1.7;
}
.dag-single a {
color: var(--color-blue);
text-decoration: underline;
} .post-meta {
font-size: 0.875rem;
color: #666;
margin-bottom: 1.5rem;
}
.post-thumbnail {
margin-bottom: 2rem;
}
.post-thumbnail img {
width: 100%;
height: auto;
}