/* Desert Haul and Transport LLC — site styles Palette derived from the company's own maintenance PDF (umber, rust, olive, gold) rather than invented, and cross-checked against the photo library. */ :root{ /* ── MONSOON ────────────────────────────────────────────── Cyrus's pick, replacing Sagebrush. Storm slate and wet teal. Same structure as before: DARK AT THE TOP, opening into a light body. The hero is a video and needs a dark ground; his own services PDF is a light document. The cap gives both. A NOTE ON THE VARIABLE NAMES. --rust, --sage and --ember are historical - they were named for the old palette. They are kept because they are semantic in practice (band colour, secondary accent, action colour) and renaming seven variables across the stylesheet risks breaking something for no visible gain. Read them as roles, not colours. WHAT HAPPENED TO THE RUST. It was not a small accent: it was the full-bleed closing band on all four pages. Left rust in a teal site it reads as something nobody got round to changing, so it becomes the deep teal. ──────────────────────────────────────────────────────── */ --ground:#F2F5F6; /* storm-washed paper — the page */ --ground-2:#E6ECEE; /* raised band */ --bone:#182228; /* near-black slate — body text */ --rust:#0E5A64; /* ROLE: full-bleed band. Deep teal. */ --sage:#4A6468; /* ROLE: secondary accent. Slate. */ --ember:#0F6B77; /* ROLE: action colour. Wet teal. */ --stone:#525E63; /* muted type and rules */ --hair:rgba(24,34,40,.30); /* outline-button border. Flips with the zone for the same reason --on-ember does: a light border is invisible on light paper. */ --on-ember:#F2F5F6; /* text ON the action colour. MUST flip with --ember: the body teal is dark and needs light text, the cap teal is bright and needs dark. Hardcoding one value here is a real bug - it shipped in the Sagebrush pass and made every solid CTA in the light body fail contrast at 3.03:1. */ --display:"Bahnschrift","DIN Alternate","DIN Condensed","Franklin Gothic Medium","Arial Narrow",system-ui,sans-serif; --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,ui-monospace,monospace; --gut:clamp(20px,4vw,60px); --max:1240px; --rule:1px solid rgba(139,129,117,.30); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ground);color:var(--bone); font-family:var(--body);font-size:clamp(16px,1.02vw,17.5px);line-height:1.62; -webkit-font-smoothing:antialiased; } /* Guard against sideways scroll without making its own scroll box: overflow-x on body forces overflow-y to compute as auto, which clamps how far the page can scroll. Keep it on the root instead. */ html{overflow-x:hidden} img,video{display:block;max-width:100%} a{color:inherit} :focus-visible{outline:3px solid var(--ember);outline-offset:3px} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .stack{display:flex;flex-direction:column} /* ── type roles ─────────────────────────────────────────── */ .eyebrow{ font-family:var(--mono);font-size:.7rem;letter-spacing:.22em; text-transform:uppercase;color:var(--ember);margin:0; } .h1{ font-family:var(--display);font-weight:700;font-stretch:condensed; font-size:clamp(2.6rem,7.4vw,6.2rem);line-height:.9;letter-spacing:-.015em; text-transform:uppercase;margin:0;text-wrap:balance; } .h2{ font-family:var(--display);font-weight:700;font-stretch:condensed; font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:.98;letter-spacing:-.01em; text-transform:uppercase;margin:0;text-wrap:balance; } .h3{ font-family:var(--display);font-weight:700;font-stretch:condensed; font-size:1.28rem;line-height:1.08;letter-spacing:.015em; text-transform:uppercase;margin:0; } .lede{max-width:62ch;color:#CFC6B6;margin:0;font-size:clamp(1rem,1.35vw,1.12rem)} .prose{max-width:66ch;color:#CFC6B6;margin:0} .prose strong{color:var(--bone);font-weight:600} .pull{color:var(--ember);font-weight:600} /* ── nav ────────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:80;background:rgba(20,30,35,.93); backdrop-filter:blur(10px);border-bottom:var(--rule)} /* ── the dark cap ───────────────────────────────────────── Nav and hero only. Re-scoping the palette variables flips the whole region without touching a single component rule. */ .nav,.hero{ --ground:#141E23; --ground-2:#1D2A30; --bone:#EFF4F5; --sage:#8FA6AA; --ember:#54B9C7; /* teal can be bright again on a dark ground */ --stone:#93A2A6; --hair:rgba(239,244,245,.42); --on-ember:#0A1F23; color:var(--bone); } /* The handover. A short gradient from the hero's dark into the page's light, so the transition reads as the page opening up rather than as two sites stitched together. */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,9vh,120px); background:linear-gradient(to bottom, rgba(242,245,246,0) 0%,rgba(242,245,246,.08) 45%, rgba(242,245,246,.42) 74%,rgba(242,245,246,.86) 91%,#F2F5F6 100%); pointer-events:none;z-index:2; } .nav__in{max-width:var(--max);margin-inline:auto;padding:.62rem var(--gut); display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap} .nav__mark{font-family:var(--display);font-weight:700;font-stretch:condensed; text-transform:uppercase;letter-spacing:.02em;font-size:1.02rem;line-height:1.05; text-decoration:none} .nav__mark span{color:var(--ember)} .nav__mark small{display:block;font-family:var(--mono);font-size:.56rem; letter-spacing:.18em;color:var(--stone);font-weight:400} .nav__link{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;color:#C4BBAC;padding-bottom:3px; border-bottom:2px solid transparent;transition:color .18s,border-color .18s} .nav__link:hover{color:var(--bone);border-color:var(--stone)} .nav__link.is-on{color:var(--bone);border-color:var(--ember)} /* phone reads first: it is the thing most visitors actually want */ /* ── the nav on a phone ─────────────────────────────────── flex-wrap was collapsing this into three rows: logo, then two stranded links, then phone and button. Roughly 200px of sticky header on a 844px screen, which is a quarter of the viewport before any content shows. Three decisions, in order of how much height they save: 1. The "Schedule an estimate" BUTTON IS DROPPED on phones. It is not lost - the hero repeats it a few hundred pixels below, so on mobile it was the same call to action twice inside one screen. The phone number stays, because for a contractor a tap-to-call IS the conversion. 2. The wordmark drops its "Joshua Tree, CA" line and shrinks. The hero says it, and the whole site is one town. 3. The links become one tight row that can scroll sideways rather than wrapping. Wrapping is what created rows two and three in the first place. ──────────────────────────────────────────────────────── */ @media (max-width:719px){ .nav__in{ padding:.5rem var(--gut); gap:.5rem .7rem; display:grid; grid-template-columns:1fr auto; grid-template-areas:"mark tel" "links links"; align-items:center; } .nav__mark{grid-area:mark;font-size:.9rem;line-height:1.1} .nav__mark small{display:none} .nav__act{grid-area:tel;margin-left:0;gap:0} .nav__cta{display:none} .nav__tel{ flex-direction:row;align-items:baseline;gap:.4rem; padding:.34rem .6rem;border:1px solid rgba(84,185,199,.45);border-radius:3px; } .nav__tel small{display:none} .nav__tel strong{font-size:.92rem;color:var(--ember)} /* One row, scrollable rather than wrapping. */ .nav__links-row{ grid-area:links; display:flex;gap:1.1rem; overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.1rem; } .nav__links-row::-webkit-scrollbar{display:none} .nav__link{font-size:.66rem;white-space:nowrap;padding-bottom:.18rem} } /* Above the breakpoint the wrapper is inert, so the desktop row is unchanged. This MUST be scoped to min-width: as a bare rule it sits after the mobile block and, at equal specificity, silently overrode it - which is exactly what left the links wrapping onto two lines. */ @media (min-width:720px){ .nav__links-row{display:contents} } .nav__act{display:flex;align-items:center;gap:.8rem;margin-left:auto} .nav__tel{display:flex;flex-direction:column;line-height:1;text-decoration:none; gap:.16rem} .nav__tel small{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em; text-transform:uppercase;color:var(--stone)} .nav__tel strong{font-family:var(--display);font-weight:700;font-stretch:condensed; font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--ember);letter-spacing:.01em} .nav__tel:hover strong{color:#8FE3EE} .nav__cta{font-family:var(--display);font-weight:700;font-stretch:condensed; text-transform:uppercase;letter-spacing:.045em;font-size:.95rem; background:var(--ember);color:var(--on-ember);padding:.6rem 1rem;text-decoration:none; white-space:nowrap;transition:transform .18s} .nav__cta:hover{transform:translateY(-2px)} @media(max-width:860px){ /* ── the dark cap ───────────────────────────────────────── Nav and hero only. Re-scoping the palette variables flips the whole region without touching a single component rule. */ .nav,.hero{ --ground:#141E23; --ground-2:#1D2A30; --bone:#EFF4F5; --sage:#8FA6AA; --ember:#54B9C7; /* teal can be bright again on a dark ground */ --stone:#93A2A6; --hair:rgba(239,244,245,.42); --on-ember:#0A1F23; color:var(--bone); } /* The handover. A short gradient from the hero's dark into the page's light, so the transition reads as the page opening up rather than as two sites stitched together. */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,9vh,120px); background:linear-gradient(to bottom, rgba(242,245,246,0) 0%,rgba(242,245,246,.08) 45%, rgba(242,245,246,.42) 74%,rgba(242,245,246,.86) 91%,#F2F5F6 100%); pointer-events:none;z-index:2; } .nav__in{gap:.7rem} .nav__act{width:100%;order:3;justify-content:space-between; border-top:var(--rule);padding-top:.6rem} } /* ── buttons ────────────────────────────────────────────── */ .btn{display:inline-block;font-family:var(--display);font-weight:700; font-stretch:condensed;text-transform:uppercase;letter-spacing:.05em; font-size:1.05rem;padding:.78rem 1.45rem;text-decoration:none; border:2px solid transparent;transition:transform .18s,background-color .18s,border-color .18s} .btn--go{background:var(--ember);color:var(--on-ember)} .btn--go:hover{transform:translateY(-2px)} .btn--line{border-color:var(--hair);color:var(--bone)} .btn--line:hover{border-color:var(--bone);transform:translateY(-2px)} .btn-row{display:flex;flex-wrap:wrap;gap:.7rem} /* ── hero ───────────────────────────────────────────────── */ .hero{position:relative;min-height:clamp(500px,80vh,780px);display:flex; align-items:flex-end;overflow:hidden} .hero--short{min-height:clamp(340px,50vh,460px)} .hero__media{position:absolute;inset:0} .hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover} .hero__scrim{position:absolute;inset:0;background: linear-gradient(to top,rgba(20,30,35,.97) 4%,rgba(20,30,35,.66) 40%,rgba(20,30,35,.2) 72%,rgba(20,30,35,.5) 100%), linear-gradient(to right,rgba(20,30,35,.66),rgba(20,30,35,0) 64%)} .hero__in{position:relative;width:100%;padding-block:clamp(2.2rem,6vh,4rem); display:flex;flex-direction:column;gap:1.35rem;align-items:flex-start} .hero__in .lede{color:#DCD3C3} /* ── bands ──────────────────────────────────────────────── */ .band{padding-block:clamp(3.2rem,8vh,5.6rem)} .band--raised{background:var(--ground-2)} .band--rust{background:var(--rust);color:#F2F5F6} .band__head{display:flex;flex-direction:column;gap:.85rem;margin-bottom:2.4rem} /* service strip under the nav — the real coverage claim */ .strip{border-top:var(--rule);border-bottom:var(--rule);background:var(--ground-2)} .strip__in{max-width:var(--max);margin-inline:auto;padding:.8rem var(--gut); display:flex;flex-wrap:wrap;gap:1.6rem;font-family:var(--mono);font-size:.68rem; letter-spacing:.16em;text-transform:uppercase;color:var(--stone)} .strip__in b{color:var(--bone);font-weight:600} /* ── the standard: three claims, not a sequence ─────────── */ .triad{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .triad__item{border-top:3px solid var(--ember);padding-top:.9rem; display:flex;flex-direction:column;gap:.4rem} .triad__k{font-family:var(--display);font-weight:700;font-stretch:condensed; text-transform:uppercase;font-size:1.6rem;line-height:1} .triad__v{margin:0;color:#CFC6B6;font-size:.95rem} /* ── split feature ──────────────────────────────────────── */ .split{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center; grid-template-columns:1fr} @media(min-width:900px){.split{grid-template-columns:1.05fr .95fr} .split--flip .split__media{order:-1}} .split__media img{width:100%;aspect-ratio:4/3;object-fit:cover} .split__body{display:flex;flex-direction:column;gap:1.05rem} /* ── two column lists (mirrors the PDF's paired panels) ─── */ .panels{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .panel{border:var(--rule);padding:1.4rem 1.5rem 1.6rem; display:flex;flex-direction:column;gap:1rem} .panel--sage{border-color:rgba(126,143,101,.55);background:rgba(126,143,101,.09)} .panel--rust{border-color:rgba(160,74,38,.55);background:rgba(160,74,38,.09)} .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem} .ticks li{position:relative;padding-left:1.35rem;color:#CFC6B6;font-size:.95rem} .ticks li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px; background:var(--ember)} .panel--sage .ticks li::before{background:var(--sage)} .panel--rust .ticks li::before{background:var(--rust)} /* ── service cards ──────────────────────────────────────── */ .svc{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .svc__card{background:var(--ground);border:var(--rule);overflow:hidden; display:flex;flex-direction:column} .band--raised .svc__card{background:var(--ground)} .svc__img{aspect-ratio:4/3;overflow:hidden} .svc__img img{width:100%;height:100%;object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1)} .svc__card:hover .svc__img img{transform:scale(1.05)} .svc__body{padding:1.1rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.5rem} .svc__txt{margin:0;font-size:.93rem;color:#BFB6A7;line-height:1.55} /* ── seasonal phases: order is real, names carry it ─────── */ .phases{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .phase{border-top:3px solid var(--stone);padding-top:1rem; display:flex;flex-direction:column;gap:.85rem} .phase--pre{border-top-color:var(--ember)} .phase--during{border-top-color:var(--rust)} .phase--post{border-top-color:var(--sage)} .phase__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em; text-transform:uppercase;color:var(--bone);margin:0} /* ── SIGNATURE: the cut ─────────────────────────────────── */ .cut{display:flex;flex-direction:column;gap:.8rem} .cut__pair{display:grid;grid-template-columns:1fr 1fr;background:var(--ember)} .cut__panel{position:relative;overflow:hidden;background:var(--ground); transition:transform .85s cubic-bezier(.16,.84,.28,1)} .cut__panel img{width:100%;aspect-ratio:1/1;object-fit:cover} .cut__panel--a{transform:translateX(5px)} .cut__panel--b{transform:translateX(-5px)} .is-cut .cut__panel--a{transform:translateX(-4px)} .is-cut .cut__panel--b{transform:translateX(4px)} .cut__tag{position:absolute;left:0;bottom:0;background:var(--ground);color:var(--bone); font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; padding:.45rem .8rem;opacity:0;transform:translateY(6px); transition:opacity .5s ease .25s,transform .5s ease .25s} .is-cut .cut__tag{opacity:1;transform:none} .cut__panel--b .cut__tag{background:var(--ember);color:var(--on-ember)} .cut__cap{display:flex;justify-content:space-between;gap:1.1rem;flex-wrap:wrap; font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--stone)} .cut__cap b{color:var(--bone);font-weight:600} .cuts{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} @media(max-width:640px){ .cut__panel--a,.cut__panel--b, .is-cut .cut__panel--a,.is-cut .cut__panel--b{transform:none} .cut__pair{gap:3px} } /* ── radius device ──────────────────────────────────────── */ .radius{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center; grid-template-columns:1fr} @media(min-width:820px){.radius{grid-template-columns:minmax(240px,320px) 1fr}} .radius__dial{width:100%;max-width:320px;justify-self:center} .radius__ring{fill:none;stroke:rgba(139,129,117,.45);stroke-width:1} .radius__ring--out{stroke:var(--ember);stroke-dasharray:3 5} .radius__hub{fill:var(--ember)} .radius__lab{font-family:var(--mono);font-size:7px;letter-spacing:.14em; fill:var(--stone);text-transform:uppercase} .radius__hublab{font-family:var(--mono);font-size:8px;letter-spacing:.16em;fill:var(--bone)} .areas{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none} .areas li{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;border:var(--rule);padding:.35rem .7rem;color:#CFC6B6} /* ── closing CTA ────────────────────────────────────────── */ .close__in{display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start} .band--rust .eyebrow{color:#F6D9A8} .band--rust .lede{color:#F4E3D2} .band--rust .btn--go{background:#F2F5F6;color:#0E5A64} .band--rust .btn--line{border-color:rgba(242,245,246,.55);color:#F2F5F6} .band--rust .btn--line:hover{border-color:#F2F5F6} .close__tel{font-family:var(--display);font-weight:700;font-stretch:condensed; font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;letter-spacing:.01em; text-decoration:none;display:inline-block} .close__note{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:#F0CBA6;margin:0} /* ── footer ─────────────────────────────────────────────── */ .foot{padding-block:2.2rem;border-top:var(--rule)} .foot__in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-family:var(--mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:var(--stone)} /* agency credit — Serge Business Development, in their own brand blue. Swap .built__sb for an if a logo mark is ever produced. */ .built{--serge:#1A5CFF; display:flex;align-items:center;gap:.55rem;text-decoration:none; color:var(--stone);transition:color .18s} .built:hover{color:var(--bone)} .built__sb{display:grid;place-items:center;width:26px;height:26px; border:1px solid var(--serge);color:#5B8CFF; font-family:var(--display);font-weight:700; font-stretch:condensed;font-size:.82rem;letter-spacing:.02em;line-height:1; flex:none;transition:background-color .18s,color .18s} .built:hover .built__sb{background:var(--serge);color:#fff} .built__txt{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;white-space:nowrap} .built__txt b{color:var(--bone);font-weight:600} .built:hover .built__txt b{color:var(--ember)} /* ── contact form ───────────────────────────────────────── */ .form{display:flex;flex-direction:column;gap:1.1rem} .field{display:flex;flex-direction:column;gap:.4rem} .field__row{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--stone)} .field label .req{color:var(--ember)} .field input,.field select,.field textarea{ font-family:var(--body);font-size:1rem;color:var(--bone); background:rgba(240,232,218,.05);border:var(--rule);border-radius:0; padding:.72rem .85rem;width:100%;transition:border-color .18s,background-color .18s} .field textarea{min-height:130px;resize:vertical} .field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%), linear-gradient(135deg,var(--stone) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ember);background:rgba(240,232,218,.08);outline:none} .field input::placeholder,.field textarea::placeholder{color:rgba(139,129,117,.75)} .field select option{background:var(--ground-2);color:var(--bone)} .form__note{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;color:var(--stone);margin:0} .form__status{margin:0;padding:.85rem 1rem;border:var(--rule);display:none; font-size:.95rem} .form__status.is-on{display:block} .form__status--ok{border-color:rgba(126,143,101,.7);background:rgba(126,143,101,.14); color:#DCE6CE} .form__status--err{border-color:rgba(160,74,38,.75);background:rgba(160,74,38,.16); color:#F3D6C6} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contact{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:1fr} @media(min-width:940px){.contact{grid-template-columns:1.15fr .85fr}} .contact__aside{display:flex;flex-direction:column;gap:1.5rem; border:var(--rule);padding:1.5rem 1.6rem 1.8rem;align-self:start} .contact__block{display:flex;flex-direction:column;gap:.35rem} .contact__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em; text-transform:uppercase;color:var(--stone);margin:0} .contact__v{font-family:var(--display);font-weight:700;font-stretch:condensed; font-size:1.5rem;line-height:1.05;text-decoration:none;color:var(--bone);margin:0} a.contact__v:hover{color:var(--ember)} .contact__sm{margin:0;font-size:.92rem;color:#CFC6B6} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important;animation-duration:.01ms !important} .cut__panel--a,.cut__panel--b{transform:none} .cut__tag{opacity:1;transform:none} }