/* ========================================================================= BIG EASY CUSTOM CARS – homepage mockup Design system for Big Easy Custom Cars: editorial serif + clean sans, .kw keyword highlight, .eyeb eyebrows, generous radius on all imagery, .rv reveal gated on .js with a full reduced-motion switch-off, btn-p / btn-s / btn-l / btn-o button set only. Palette retuned from pool navy to automotive ink + Big Easy orange. Outfit is already self-hosted on the live site, so it carries over. ========================================================================= */ :root{ --ink:#0B0C0E; /* body ground */ --ink-2:#14161A; /* raised panels */ --ink-3:#1C1F24; /* cards on dark */ --paper:#F7F5F2; /* light ground */ --paper-2:#EFECE7; --line:#E4E0DA; --line-d:rgba(255,255,255,.13); --body:#55514C; /* body copy on light */ --body-d:#B6B1AA; /* body copy on dark */ /* Orange, retuned 2026-09-20: the live site's #FF5C1A glowed on dark and was tiring to read against. These are the same hue, desaturated and darkened, with a separate deeper value for orange text on LIGHT grounds so it clears WCAG AA instead of shimmering. */ --amber:#E4783F; /* accent on DARK grounds */ --amber-2:#C25F2B; /* hover, and deeper fills */ --amber-ink:#A64E23; /* orange TEXT on LIGHT grounds, AA-safe */ --amber-tint:#FBF0E9; --steel:#8A8F98; --white:#fff; --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Outfit",-apple-system,"Segoe UI",Arial,sans-serif; --r:20px; --wrap:1440px; --ease:cubic-bezier(.22,.61,.36,1); /* One chevron for every menu that opens something: the top-level dropdowns, the town fly-outs and the mobile toggles all mask this same path and rotate it, so the caret is identical everywhere and picks up the link's own colour through currentColor. Replaces the text glyphs the mockup used, which rendered at a different weight and baseline in every font fallback. */ --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth; /* The header is sticky, so without this every in-page jump (all the Free Estimate buttons, the footer links, the dropdown items) lands the section top UNDER the header and hides its heading. The value is the UNSHRUNK header, not the shrunk one. The header is in flow, so when it shrinks after the jump it pulls everything below it up. Re-measured 23 Sep: the logo is 86px and the bar's padding was cut to 10px, which puts the header back at 107px unshrunk and 81px shrunk. */ scroll-padding-top:108px} @media(max-width:700px){html{scroll-padding-top:88px}} /* 54px logo + 32 + 1 */ body{background:var(--paper);color:var(--body);font-family:var(--sans); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,32px)} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.1} h1{font-size:clamp(38px,6.2vw,72px);letter-spacing:-.02em} h2{font-size:clamp(29px,3.9vw,46px);letter-spacing:-.015em} h3{font-size:clamp(20px,2.2vw,25px)} a{color:inherit} /* Orange text switches value by ground so it never glows and never goes under WCAG AA: the deep tone on light, the lighter tone on dark. */ .kw{color:var(--amber-ink);font-style:italic} .on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)} .on-dark{color:var(--body-d)} .on-dark .kw,.hero .kw{color:var(--amber)} .eyeb{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--amber-ink);margin-bottom:14px} .on-dark .eyeb,.hero .eyeb{color:var(--amber)} .lead{max-width:56ch} .lead p:not(.eyeb){margin-top:14px;font-size:clamp(15.5px,1.6vw,17.5px)} /* Section rhythm. Two stacked sections each carrying 104px left about 208px of dead space between a CTA and the next heading, which read as a gap rather than a break. */ section{padding:clamp(28px,2.4vw,44px) 0} /* ---------- buttons: only these four exist ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;text-decoration:none;padding:15px 28px;border-radius:999px; border:2px solid transparent;cursor:pointer;transition:all .3s var(--ease)} .btn-p{background:var(--amber);color:#1A0600;border-color:var(--amber)} .btn-p:hover{background:var(--amber-2);border-color:var(--amber-2);color:#fff;transform:translateY(-2px)} .btn-s{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-s:hover{background:var(--ink);color:#fff;transform:translateY(-2px)} .btn-l{background:#fff;color:var(--ink);border-color:#fff} .btn-l:hover{background:var(--amber);border-color:var(--amber);color:#1A0600;transform:translateY(-2px)} .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* ---------- reveal (gated on .js, killed by reduced motion) ---------- */ .rv{opacity:1;transform:none} .js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js .rv{opacity:1!important;transform:none!important;transition:none} html{scroll-behavior:auto} } /* ---------- ribbon + header ---------- */ /* Ribbon was a full-width band of bright orange, which is the single most tiring element on a page this dark. It is now a quiet dark strip with the orange used only on the rating, the way Velocity Restorations does it. */ .ribbon{background:#06070A;color:var(--body-d);font-size:12.5px;font-weight:500; letter-spacing:.03em;padding:10px 16px;display:flex;justify-content:center; align-items:center;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--line-d)} .ribbon b{color:var(--amber)} .ribbon .rt{color:var(--amber);letter-spacing:1.5px} .ribbon a{text-decoration:none;color:var(--paper);border-bottom:1px solid rgba(255,255,255,.28)} .ribbon a:hover{border-bottom-color:var(--amber);color:var(--amber)} .ribbon .sep{opacity:.28} @media(max-width:860px){.ribbon .hide-sm{display:none}} .head{position:sticky;top:0;z-index:60;background:rgba(11,12,14,.9); backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d); transition:padding .35s var(--ease)} /* padding-block, never the `padding` shorthand: this element is also a .wrap, and the shorthand wipes out the side gutter, leaving the logo hard against the left edge and the burger against the right at every width below --wrap. */ .head-in{display:flex;align-items:center;justify-content:space-between;gap:20px; padding-block:10px;transition:padding .35s var(--ease)} .head.shrink .head-in{padding-block:6px} /* Brand mark: the client's own logo file, used as-is. Do not substitute a typographic wordmark. The badge already contains the name, so no text is set beside it. */ .brand{display:block;text-decoration:none;flex:0 0 auto} .brand img{height:86px;width:auto;transition:height .35s var(--ease)} .head.shrink .brand img{height:68px} @media(max-width:700px){.brand img{height:62px}.head.shrink .brand img{height:54px}} .nav{display:flex;gap:26px;list-style:none;align-items:center} .nav a{text-decoration:none;color:var(--body-d);font-size:16px;font-weight:500; padding:6px 0;border-bottom:2px solid transparent;transition:.25s} .nav a:hover,.nav a.active{color:var(--paper);border-bottom-color:var(--amber)} /* Menu mirrors the live site: Home, About, Services, Services Areas, Testimonials, Contact, with the same two dropdowns. "Services Areas" is the client's own spelling, carried over deliberately. */ .nav>li{position:relative} .nav .has-sub>a::after{content:"";display:inline-block;vertical-align:-1px; margin-left:7px;opacity:.7;background-color:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;width:11px;height:11px; transition:transform .25s var(--ease),opacity .25s var(--ease)} .nav .has-sub:hover>a::after,.nav .has-sub:focus-within>a::after{ transform:rotate(180deg);opacity:1} /* The menus are a white card on the dark bar. Orange here is --amber-ink, not --amber: the tokens block calls that out as the AA-safe orange for text on a light ground, and --amber is tuned for the dark one. */ .nav .sub{position:absolute;left:-10px;top:100%;min-width:246px;list-style:none; background:var(--white);border:1px solid var(--line);border-radius:14px; padding:8px;display:block;opacity:0;visibility:hidden;transform:translateY(8px); /* A closed panel must not be hit-testable. visibility:hidden alone is not enough here: the mega panel re-shows its nested town lists with visibility:visible, and a visible child inside a hidden parent IS rendered and IS hoverable. opacity:0 hides it, so the panel became an invisible 1376x391 hit area lying over the hero — moving the mouse anywhere across the banner opened the Service Areas menu. */ pointer-events:none; box-shadow:0 18px 44px rgba(11,12,14,.26);z-index:80; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s} .nav .has-sub:hover>.sub,.nav .has-sub:focus-within>.sub{ opacity:1;visibility:visible;transform:none;pointer-events:auto} .nav .sub li{margin:0} .nav .sub a{display:block;padding:9px 12px;border-radius:9px;border-bottom:0; font-size:14.5px;font-weight:400;color:var(--body);white-space:nowrap} .nav .sub a:hover,.nav .sub a:focus-visible{ background:var(--amber-tint);color:var(--amber-ink);border-bottom:0} /* Third level: each town opens its own twelve location+service pages. It flies out beside the town, and to the left where the window is too narrow for it to sit on the right. */ .nav .sub-areas .has-sub2{position:relative} .nav .sub-areas .has-sub2>a::after{content:"";float:right;margin:4px 0 0 10px; width:10px;height:10px;opacity:.55;transform:rotate(-90deg);background-color:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat; transition:transform .25s var(--ease),opacity .25s var(--ease)} .nav .sub-areas .has-sub2:hover>a::after, .nav .sub-areas .has-sub2:focus-within>a::after{opacity:1} @media(max-width:1180px){ /* the fly-out swaps to the left of the menu here, so the caret turns with it */ .nav .sub-areas .has-sub2>a::after{transform:rotate(90deg)} } .nav .sub2{position:absolute;left:100%;top:-9px;min-width:212px;list-style:none; background:var(--white);border:1px solid var(--line);border-radius:14px; padding:8px;opacity:0;visibility:hidden;transform:translateX(6px); box-shadow:0 18px 44px rgba(11,12,14,.26);z-index:90; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s} .nav .has-sub2:hover>.sub2,.nav .has-sub2:focus-within>.sub2{opacity:1;visibility:visible;transform:none} @media(max-width:1180px){.nav .sub2{left:auto;right:100%;transform:translateX(-6px)}} .head .btn{padding:12px 22px} /* phone + Free Estimate + burger travel as one right-hand cluster, so the number stays beside the button instead of drifting into the gap that space-between opens up on a wide header */ .head-cta{display:flex;align-items:center;gap:18px;flex:0 0 auto} @media(max-width:1180px){.head-cta{gap:14px}} /* Phone in the sticky bar. The number is already in the proof ribbon, but that ribbon sits above the header and scrolls away; the header is what stays on screen, so the number has to live here too. It sits immediately left of Free Estimate. Below 980px the nav and that button collapse into the burger, so the digits drop and the handset stays on its own as a tap-to-call target beside the burger. */ .head-tel{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto; text-decoration:none;color:var(--paper);font-family:var(--sans); font-weight:700;font-size:15px;letter-spacing:.04em;white-space:nowrap; padding:8px 2px;border-radius:8px; /* The proof ribbon above the header carries the same number and is still on screen at the top of the page, so showing both reads as a mistake. The ribbon scrolls away, the header does not, so this copy fades in only once the header has shrunk onto the top edge. visibility, not display: the slot stays reserved so nothing shifts when it appears. */ opacity:0;visibility:hidden;pointer-events:none;transform:translateX(6px); transition:opacity .3s var(--ease),transform .3s var(--ease), visibility .3s,color .25s var(--ease)} .head.shrink .head-tel{opacity:1;visibility:visible;pointer-events:auto;transform:none} .head-tel svg{width:18px;height:18px;flex:0 0 auto;fill:var(--amber); transition:transform .25s var(--ease)} .head-tel:hover{color:var(--amber)} .head-tel:hover svg{transform:rotate(-12deg)} .head-tel:focus-visible{outline:2px solid var(--amber);outline-offset:3px} @media(max-width:1180px){.head-tel{font-size:14px;gap:7px}} @media (prefers-reduced-motion:reduce){.head-tel svg{transition:none}} .burger{display:none;background:none;border:0;cursor:pointer;padding:8px} .burger i{display:block;width:22px;height:2px;background:var(--paper);margin:5px 0;transition:.3s} /* 981-1180px: the bar has to carry the logo, six nav items, the phone and the estimate button. At the default 26px gap and 16px type that needs about 1040px, so through this band the nav wrapped onto two and even three lines. Tightening the gaps and the type keeps it on one line all the way down to 981, where the burger takes over. */ @media(min-width:981px) and (max-width:1180px){ .head-in{gap:12px} .nav{gap:15px} .nav a{font-size:14.5px} .head-cta{gap:10px} .head .btn{padding:11px 16px;font-size:11px} } @media(max-width:980px){ .nav,.head .btn{display:none} .burger{display:block} .head-tel{width:42px;height:42px;padding:0;justify-content:center; border:1px solid var(--line-d);border-radius:999px} .head-tel .head-tel-n{display:none} } /* the bars cross over while the drawer is open */ .burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open i:nth-child(2){opacity:0} .burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Services Areas: mega panel ---------- The towns used to fly out one at a time on hover, three levels deep. They now all sit in a single panel under the bar, each town a column heading with its own twelve services beneath it, so every location page is one move away instead of two. The structure is a plain nested menu -- exactly the shape wp_nav_menu() emits -- so a WordPress menu drops straight into these rules: li.mega the Services Areas item. In wp-admin, type "mega" into that item's CSS Classes field (Screen Options -> CSS Classes if the field is hidden). > ul the panel itself == ul.sub-menu (depth 1) > li one town == li.menu-item-has-children > ul that town's services == ul.sub-menu (depth 2) This build calls those .sub-areas / .has-sub2 / .sub2; the selectors below accept WordPress's own class names alongside them, so nothing has to be renamed on either side. The only markup WordPress will not produce by itself is the mobile .sub-toggle button, which wants a short custom walker. Desktop only: below 981px the panel falls back to the stacked accordion in the mobile block further down, because 96 links opened at once is not a phone menu. */ @media(min-width:981px){ /* the panel spans the content width, so it is measured from the header rather than from the one menu item it hangs off */ .nav .mega{position:static} .nav .mega>.sub, .nav .mega>.sub-menu{ left:clamp(16px,4vw,32px);right:clamp(16px,4vw,32px); max-width:var(--wrap);margin-inline:auto;min-width:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 12px;padding:20px 18px; max-height:calc(100svh - 150px);overflow-y:auto;overscroll-behavior:contain} /* eight towns, eight columns, once there is room for them */ @media(min-width:1240px){ .nav .mega>.sub, .nav .mega>.sub-menu{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px 8px} } /* The panel hangs below the WHOLE header, which leaves 47px of nothing between the menu item and the top of the panel. The mouse crosses that gap on its way down, the item stops being hovered, and the panel shuts before it can be reached. This is a corridor the width of the screen that exists ONLY while the item is hovered, so the closed panel stays untouchable and the banner underneath it is not a hover trap. */ .nav .mega>a{position:relative} .nav .mega:hover>a::before, .nav .mega:focus-within>a::before{ content:"";position:absolute;top:100%;left:50%;width:100vw;height:52px; transform:translateX(-50%)} /* a town is a column, not a fly-out trigger */ .nav .mega .has-sub2, .nav .mega .menu-item-has-children{position:static;display:block} .nav .mega .has-sub2>a, .nav .mega .menu-item-has-children>a{ display:block;padding:5px 8px;color:var(--ink); font-family:var(--sans);font-size:11.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; border-bottom:1px solid var(--line);border-radius:0;margin-bottom:5px} .nav .mega .has-sub2>a:hover, .nav .mega .has-sub2>a:focus-visible, .nav .mega .menu-item-has-children>a:hover, .nav .mega .menu-item-has-children>a:focus-visible{ background:none;color:var(--amber-ink)} /* the caret pointed at a fly-out that no longer exists */ .nav .mega .has-sub2>a::after, .nav .mega .menu-item-has-children>a::after{content:none} /* that town's services: a plain list in the column, always open */ .nav .mega .sub2, .nav .mega .sub-menu .sub-menu{ position:static;opacity:1;visibility:visible;transform:none;display:block; min-width:0;padding:0;margin:0;list-style:none; background:none;border:0;box-shadow:none;backdrop-filter:none} .nav .mega .sub2 a, .nav .mega .sub-menu .sub-menu a{ padding:4px 8px;font-size:13.5px;white-space:normal;line-height:1.35} } /* ---------- touch targets ---------- The footer link columns are 15px tall, well under the ~30px a thumb needs. The padding goes on the link rather than the li so the hit area grows without moving the text, and the li margin comes off so the rhythm stays roughly where it was. Links sitting inside a sentence are left alone — padding those breaks the line (WCAG 2.5.8 exempts them). */ @media(max-width:834px){ .foot-grid>div>ul>li{margin-bottom:0} .foot-grid>div>ul>li>a{display:block;padding:8px 0} .foot-phone a{display:inline-block;padding:6px 0} } /* ---------- mobile: off-canvas drawer ---------- Carried over from the SDBody build. The drawer is BUILT BY JS from