/*
Theme Name: Moving on Express
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1;-webkit-font-smoothing:antialiased}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
.container {
max-width: 1312px;
}
h1{font-weight: 800}
/* ===================================================================
Moving On Express — Responsive CSS (Bootstrap grid only)
- Pixel-accurate to comp; tuned for mobile improvements you asked for
- Brand-left / hamburger-right on phones, tighter vertical rhythm,
mobile-centered FAQ & reassurance, white Tips background,
footer centered & stacked, field spacing on mobile.
=================================================================== */
/* -------------------- Design Tokens -------------------- */
:root{
--ink:#1f232a;
--ink-2:#475062;
--paper:#ffffff;
--line:#e9ecef;
--maroon:#8E1B22; /* Topbar + bands */
--blue:#1793CA; /* Primary CTA */
--blue-hover:#0F7DAC;
--band-gray:#F2F3F5; /* Feature band (not Tips) */
--r-4:4px; --r-6:6px; --r-8:8px;
--sec-y:72px; /* desktop section spacing */
/* Background images (swap as needed) */
--hero-img:url("https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-10-20/67fSdgzR9w.png");
--cta-img:url("https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-10-20/9sh82wPWxX.png");
}
/* -------------------- Base -------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:#fff; color:var(--ink);
font-family:"Sofia Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
font-size:16px; line-height:1.6;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0 0 .35rem}
h1,h2,h3,h4,.h-section,.h-kicker,.h-cta{
font-family:"Teko", ui-sans-serif;
line-height:1.05; letter-spacing:.2px;
}
.info h1 {
margin: 0 0 60px 0;
font-weight: 800;
font-size: 50px;
text-transform: uppercase;
}
.info h2 {
margin: 0 0 10px 0;
font-weight: 800;
font-size: 29px;
text-transform: uppercase;
}
.info p {
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0.32px;
margin-bottom: 24px;
-webkit-font-smoothing: subpixel-antialiased;}
.info strong{font-weight: 900}
.info ul{list-style: disc;padding-left: 30px; margin-bottom: 24px;}
.info li{ font-weight: 500;}
.contactintro p {
margin-bottom: 25px;
}
body .bx-wrapper {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
background: transparent;
margin-bottom: 0px
}
body .bx-wrapper .bx-pager.bx-default-pager a{border:2px solid white;width:15px;height:15px;background: transparent;border-radius: 15px;-moz-border-radius: 15px;
-webkit-border-radius: 15px;}
body .bx-wrapper .bx-pager.bx-default-pager a:hover,body .bx-wrapper .bx-pager.bx-default-pager a.active,body .bx-wrapper .bx-pager.bx-default-pager a:focus{
background: white
}
#map_canvas {
height: 500px;
}
/* Type scale */
.hero-title{font-size:clamp(52px,8vw,92px);line-height: 85%;margin-bottom: 0px; letter-spacing: 5%;}
.h-section {
font-size: 45px;
font-weight: 700;
}
.h-kicker {
font-size: 52px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .6px;
}
.h-cta{font-size:clamp(36px,4vw,50px); font-weight:600}
.meta{color:black; font-size:.94rem}
.split-safe p {
font-size: 16px;
line-height: 150%;
}
/* Sections */
section{padding-block:clamp(40px,6vw,var(--sec-y))}
.article-hero {
padding-top: 50px;
}
.img-hero img {
width: 100%;
}
.article-body {
padding-top: 0px;
}
.article-body .article-content p{font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
letter-spacing: 0.32px;margin-bottom: 24px;-webkit-font-smoothing: subpixel-antialiased;}
.article-body .article-content strong{font-weight: 800}
.article-body .article-content h2{font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 33.6px */
margin-bottom: 20px;}
.article-body .article-content h3{font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: 150%;
letter-spacing: 0.36px;font-family: "Sofia Sans", sans-serif;-webkit-font-smoothing: subpixel-antialiased;
margin-bottom: 28px;}
.article-body .article-content li{font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
letter-spacing: 0.32px;-webkit-font-smoothing: subpixel-antialiased;}
.article-body .article-content ol{list-style: decimal;margin:.25rem 0 45px 1.35rem }
/* Shadows / radii */
.has-textshadow{ text-shadow:0 2px 14px rgba(0,0,0,.26) } /* hero text */
.has-shadow{ box-shadow:0 2px 4px rgba(0,0,0,.25) } /* CTA shadow */
.img-shadow{ border-radius:var(--r-6); box-shadow:0 2px 4px rgba(0,0,0,.25) }
/* ===================================================================
Buttons
=================================================================== */
.btn-blue, .btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 20px 10px;
border-radius: var(--r-6);
font-weight: 700;
border: 1px solid transparent;
cursor: pointer;
transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
text-transform: uppercase;
font-family: "Teko";
letter-spacing: 5%;
-webkit-font-smoothing: antialiased;
font-size: 20px;
line-height: 20px;
}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-hover); transform:translateY(-1px)}
.btn-outline{background:transparent; color:#fff; border-color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.14); transform:translateY(-1px)}
.btn-estimate{text-transform:uppercase; letter-spacing:.5px}
header .btn-estimate {
letter-spacing: 6%;
font-size: 20px;
}
/* ===================================================================
Header (Topbar + Mainnav)
- Mobile: brand-left / hamburger-right on same row (no wrap)
=================================================================== */
.site-header{position:relative}
/* Topbar */
.topbar {
background: var(--maroon);
color: #fff;
position: relative;
z-index: 3;
padding-block: .45rem;
font-family: "Teko";
text-transform: uppercase;
font-size: 18px;
letter-spacing: 5%;
}
.lang-nav{display:flex; align-items:center; gap:8px}
.lang{color:#fff; opacity:.9}
.lang.is-active,.lang:hover{opacity:1;font-weight: 700;}
.lang-sep{opacity:.6}
.contact-inline{display:flex; justify-content:flex-end; align-items:center; gap:24px}
.contact-link{color:#fff; opacity:.9}
.contact-link:hover{opacity:1}
/* Mainnav */
.mainnav{
background:#fff;
position:relative; z-index:2; /* below topbar */
}
.nav-row{padding: 23px 0 21px;display:flex; align-items:center}
.brand{display:flex; align-items:center}
.brand-img{height:60px; width:auto;display: table;
margin: auto;}
.toplogo{text-align: center}
/* Desktop links / CTA */
.nav-links{list-style:none; display:flex; gap:33px; align-items:center; padding:0; margin:0}
.nav-links a {
font-weight: 400;
font-family: "Teko";
letter-spacing: 10%;
text-transform: uppercase;
font-size: 20px;
}
.nav-links a:hover{color:var(--maroon)}
/* Hamburger (md- and below) */
.hamburger{display:none; width:36px; height:30px; position:relative; cursor:pointer}
.hamb-line{position:absolute; left:0; right:0; height:2px; background:#1f232a; border-radius:2px; transform-origin:center}
.hamb-line:nth-child(1){top:4px}
.hamb-line:nth-child(2){top:14px}
.hamb-line:nth-child(3){top:24px}
/* Mobile drawer */
.mobile-drawer{
position:absolute; left:0; right:0; top:100%;
background:#fff; border-bottom:1px solid var(--line);
transform:translateY(-6px) scaleY(.98); opacity:0; visibility:hidden;
transition:transform .18s ease, opacity .18s ease, visibility .18s;
z-index:4;
}
.mobile-links{list-style:none; margin:12px 0 8px; padding:0; display:grid; gap:8px}
.mobile-links a{display:block; padding:.6rem 0; font-weight:600; min-height:44px}
.mobile-cta{display:block; width:100%; text-align:center; margin:8px 0 12px; min-height:44px}
.mobile-meta{display:flex; gap:16px; flex-wrap:wrap; padding-bottom:12px}
/* Toggle: when checkbox is checked, show drawer */
.mainnav:has(#navcheck:checked) .mobile-drawer{
transform:translateY(0) scaleY(1); opacity:1; visibility:visible;
}
/* Visibility / layout switches */
@media (max-width: 991.98px){ /* < lg */
.nav-links{display:none} /* hide desktop links */
.btn-estimate{display:none} /* CTA lives in drawer on md/sm */
.hamburger{display:inline-flex}
}
@media (min-width: 992px){ /* lg+ */
.mobile-drawer,.hamburger,.navcheck{display:none}
}
/* Prevent topbar wrap on very small screens */
@media (max-width:575.98px){
.topbar{padding-block:6px}
.contact-email{display:none} /* keep just phone at xs */
.brand-img{height:36px}
.nav-row{padding-block:10px}
}
/* ===================================================================
Hero
=================================================================== */
.hero{
color:#fff;
background:
linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18) 55%, rgba(0,0,0,.10)),
var(--hero-img);
background-size:cover; background-position:center;
padding-block:clamp(64px,12vw,145px);
}
.hero-sub{color:#eef2f7; margin:0 0 1.1rem;letter-spacing: 2%}
/* ===================================================================
Intro + Icons
=================================================================== */
/* Existing rules (kept) */
.intro-sub{max-width:77ch; margin:6px auto 0;color:black; text-align:center}
.icon-row{margin-top:24px}
.icard{
background:#fff; border:0; border-radius:var(--r-8);
padding:20px 16px; text-align:center; height:100%;
}
.icard-ico{height:clamp(36px,5vw,48px); width:auto; margin:0 auto 10px}
.icard-title {
font-size: 26px;
font-weight: 700;
}
.icard-text{color:var(--ink-2); font-size:.98rem}
/* Merged additions for dynamic, even-fill columns without row-cols utilities */
.icon-row{
/* Bootstrap .row already provides flex + wrap; we only set sizing knobs */
--icon-min: 220px; /* base min column width; tune as needed */
}
/* Each .col grows to fill the row and wraps when below the min width */
.icon-row > .col{
flex: 1 1 var(--icon-min);
max-width: 100%;
}
/* Make cards equal-height and vertically tidy */
.icard{
display:flex;
flex-direction:column;
padding: 20px 10px;
}
/* Optional: slightly tighter vertical rhythm inside cards */
.icard-title{margin-top:.5rem}
.icard-text{margin-top:.25rem; margin-bottom:0;font-size: 15px !important;}
.page-template-services .intro {
padding-bottom: 0px;
}
.page-template-about .intro-sub{max-width: 83ch;}
.archive-feature {
padding-top: 30px;
}
.blog .feature-band {
background: white;padding-top: 0px
}
/* Responsive tuning of the minimum column width */
@media (min-width: 768px){ /* md */
.icon-row{ --icon-min: 240px; }
}
@media (min-width: 1200px){ /* xl */
.icon-row{ --icon-min: 260px; }
}
.intro p {
font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
}
/* ===================================================================
Testimonial Band (maroon; hollow dots)
=================================================================== */
.band-quote{background:var(--maroon); color:#fff; padding-block: 120px;}
.quote{
font-weight:700; letter-spacing:.8px;
font-size:clamp(18px,1.5vw,20px);
margin:0 auto 6px; text-align:center;
}
.band-quote .quote p {
font-size: 42px;
font-weight: 700;
line-height: 110%;
font-family:"Teko";
}
.quote-meta {
opacity: .95;
text-align: center;
font-size: 24px;
font-family: "Teko",sans-serif;
text-transform: uppercase;
}
.getquote {
padding: 112px 0;
}
.band-faq .h-kicker{font-weight: 600;}
.qname {
font-weight: 700;
}
.quote-dots{display:flex; gap:10px; justify-content:center; margin-top:12px}
.quote-dots .dot{
width:10px; height:10px; border-radius:50%;
border:2px solid rgba(255,255,255,.65); background:transparent;
}
.quote-dots .dot.is-active{border-color:transparent; background:#fff}
/* ===================================================================
Get a Quote (placeholders only; centered submit)
=================================================================== */
.getquote .kicker-sub {
color: black;
margin-top: 2px;
font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
}
.form-col{display:flex; justify-content:center; margin-top:22px}
.fieldbox {
margin-bottom: 24px;
}
.fieldbox ::placeholder {
color: black;
}
:-ms-input-placeholder {
color: black;
}
::-ms-input-placeholder {
color: black;
}
.form{width:100%; max-width:820px; background:transparent; border:0; padding:0}
.input,.select,.textarea,.wpcf7-textarea{
width:100%;
border:1px solid #DFE3E8; background:#fff; color:var(--ink);
border-radius:6px !important; padding:.72rem .85rem; font:inherit;font-size: 18px;
transition:border-color .15s ease, box-shadow .15s ease; margin:0;resize: none
}
.input:focus,.select:focus,.textarea:focus{
outline:0; border-color:var(--blue);
box-shadow:0 0 0 3px rgba(23,147,202,.18);
}
.select{
appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #9aa0a6 50%),
linear-gradient(135deg, #9aa0a6 50%, transparent 50%);
background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
background-size:6px 6px, 6px 6px; background-repeat:no-repeat;font-size: 18px
}
.form-actions{margin-top:0px;}
.wpcf7-submit.btn-blue {
box-shadow: 0 2px 4px rgba(0,0,0,.25);
border-radius: 6px;
}
/* Add field spacing on phones */
@media (max-width:575.98px){
.form .input,.form .select,.form .textarea{margin-bottom:12px}
.form-actions{margin-top:12px}
}
/* ===================================================================
Split reassurance (md side-by-side; sm centered text)
=================================================================== */
.split-safe .lead{color:var(--ink-2); margin:6px 0 16px}
.img-card{margin:0}
@media (max-width:575.98px){
.order-sm-last{order:2}
.split-safe .split-row > .col-12:first-child{ text-align:center }
.split-safe .split-row > .col-12:first-child .btn-blue{ margin-left:auto; margin-right:auto }
}
/* ===================================================================
FAQ Band (center-align on phones; no dividers)
=================================================================== */
.band-faq{background:var(--maroon); color:#fff; padding-block:56px;text-align: center}
.band-faq .light{color:#fff}
.faq-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:23px}
.faq-item{margin:0}
.faq-q{font-family:"Teko"; margin:0;font-size: 22px;
font-weight: 500;}
.faq-a{margin:2px 0 0; color:#f6f8fb}
@media (max-width:575.98px){
.band-faq .faq-list, .band-faq .faq-item{ text-align:center }
}
/* ===================================================================
Article
=================================================================== */
.article-head{padding-bottom:10px; text-align:center}
.img-hero{margin:0}
.article-content{margin-inline:auto}
.article-content h3{font-size:26px; margin-top:14px}
.article-content ul{margin:.25rem 0 1rem 1.35rem;list-style: disc;
margin-bottom: 45px;}
.article-content li{margin:.2rem 0}
/* ===================================================================
Feature Band (gray) — image + title + blurb
=================================================================== */
.feature-band{background:var(--band-gray)}
.post{display:block}
.post-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.post-title {
font-family: "Teko";
font-size: 25px;
margin: 10px 2px 10px;
font-weight: 700;
}
.post-excerpt {
color: black;
margin: 0 2px 12px;
font-weight: 500;
}
.tips-grid .h-section {
font-size: 52px;
}
/* ===================================================================
Moving Tips (WHITE background per comp)
=================================================================== */
.tips-grid{background:#fff;padding-bottom: 60px}
.tips-sub {
color: black;
max-width: 70ch;
margin: 4px auto 0;
font-size: 18px;
font-weight: 500;
}
.tips-grid .btn-blue {
margin-top: 30px;
}
.tips-rows{margin-top:0px; row-gap:18px}
.tip{display:block}
.tip-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.tip-title{font-family:"Teko"; font-size:20px; margin:12px 2px 0;font-weight: 700}
.tips-grid .text-center {
margin-bottom: 30px;
}
.tips-grid .col.text-center {
margin-bottom: 0px;
}
.feature-band .post-media {
margin-bottom: 20px;
}
.tip-media {
margin-bottom: 18px;
}
.page-template-faq .band-faq{background:white;color:black;padding:112px 0}
.page-template-faq .faq-a {
color: black;
}
.page-template-faq .band-faq .light {
color: black;
}
@media (max-width:575.98px){
.tips-rows{row-gap:22px}
}
/* ===================================================================
Full-bleed CTA (no radius) — white outline w/ gray shadow
=================================================================== */
.cta-full{padding:0}
.cta-full .cta-inner{
background:
linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.38)),
var(--cta-img);
background-size:cover; background-position:center;
color:#fff; border-radius:0;
padding:193px 0;
}
.cta-sub{color:#e9eef5; margin:.4rem 0 32px;font-size: 18px;
font-weight: 500;}
.cta-full .h-cta {
font-size: 52px;
font-weight: 700;
}
.cta-full .btn-outline {
background: white;
color: black;
}
/* ===================================================================
Services (no borders; images shadowed)
=================================================================== */
.services-row-1,.services-row-2{row-gap:24px}
.service{display:block;text-align: center;margin-bottom:48px}
.service-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.service-title {
font-size: 28px;
margin: 12px 2px 12px;
font-weight: 700;
}
.service-text{color:black; margin:0 2px 16px;font-size: 16px;line-height: 150%;font-weight: 500;}
.service-media {
margin-bottom: 23px;
}
/* ===================================================================
Footer (centered contact; links stacked & centered on phones)
=================================================================== */
.site-footer{background:#fff; color:black}
.footer-row{row-gap:24px; padding:40px 0}
.footer-head {
font-family: "Teko";
font-size: 24px;
color: #151a22;
margin-bottom: 6px;
font-weight: 700;
}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.footer-links a{color:black;font-weight: 600}
.footer-links a:hover{color:var(--maroon)}
.footer-copy{font-size:14px}
.site-footer .brand{margin-bottom: 24px}
.site-footer .brand-img {
height: auto;
width: 181px;
display: table;
margin: 0px;
}
@media (max-width:575.98px){
.site-footer .brand{justify-content:center}
.site-footer .footer-copy{ text-align:center; margin-top:8px }
.footer-head{ text-align:center; margin-top:10px }
.footer-links{ justify-items:center; text-align:center }
}
/* ===================================================================
Responsive polish (Tablet/Mobile)
=================================================================== */
@media (max-width: 991.98px){ /* md and below */
section{padding-block:clamp(36px,7vw,56px)} /* tighten vertical rhythm */
.h-section{font-size:clamp(30px,3.4vw,40px)}
.hero{padding-block:clamp(56px,12vw,120px)}
.icard-ico{height:40px}
.band-quote .quote p{ font-size: 26px;}
.split-safe .order-sm-last{margin-top:60px}
.tips-grid .h-section {
font-size: 32px;
}
.cta-full .h-cta {
font-size: 42px;
}
.page-template-faq .band-faq {
padding: 50px 0;
}
.archive-feature .img-card{margin-top:60px}
.h-kicker{ font-size: 42px;}
.mobile-links a {
padding: .2rem 0;
font-weight: 900;
min-height: 37px;
text-align: center;
font-size: 19px;
}
}
@media (max-width: 767.98px){ /* sm and below (bootstrap 'sm' ~ phones) */
.hero-title{font-size:clamp(44px,11vw,64px)}
.icard-ico{height:36px}
.quote-dots{gap:8px}
}