/* Dependable Paving Co. — concept redesign. Palette sampled from their logo (black) + their fresh-paved lot photo (asphalt #1f232a, white striping) + their own yellow excavator/equipment (amber). Type: Archivo Expanded (their sturdy sans grown up) + Hanken Grotesk. */ /* ---- fonts (self-hosted-style via Google woff2, loaded in ) ---- */ :root{ --asphalt:#1f232a; /* sampled fresh pavement */ --asphalt-2:#262b34; --asphalt-deep:#14171b; /* darkest band */ --ink:#101216; --paper:#f5f4f0; /* warm light ground */ --paper-2:#ebe8e1; --card:#ffffff; --line:#ffffff; /* striping white */ --amber:#e0a20f; /* equipment/road amber (their excavator) */ --amber-deep:#b8850a; --text:#1a1c20; --muted:#5c626b; --muted-d:#9aa1ab; /* muted on dark */ --hair:#d9d6ce; --hair-d:#343a44; --maxw:1180px; --r:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--text); font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{font-family:"Archivo Expanded","Archivo",system-ui,sans-serif;font-weight:800;line-height:1.02;margin:0;letter-spacing:-.01em} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .skip{position:absolute;left:-999px;top:0;background:var(--amber);color:#111;padding:10px 16px;z-index:200} .skip:focus{left:8px;top:8px} /* ---- kicker: logo receding-lines motif ---- */ .kick{display:inline-flex;align-items:center;gap:12px;font-family:"Archivo Expanded",sans-serif; font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-deep)} .kick svg{flex:0 0 auto} .on-dark .kick{color:var(--amber)} /* ---- header ---- */ header.site{position:sticky;top:0;z-index:100;background:rgba(20,23,27,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--hair-d)} .nav{display:flex;align-items:center;gap:20px;height:70px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;margin-right:auto} .brand img{height:30px;width:auto;filter:invert(1) brightness(1.5)} .brand b{font-family:"Archivo Expanded",sans-serif;font-weight:800;font-size:.98rem;letter-spacing:.01em;white-space:nowrap} .nav nav{display:flex;gap:5px;align-items:center} .nav nav a{color:#d7dbe2;text-decoration:none;font-weight:600;font-size:.92rem;padding:9px 11px;border-radius:8px} .nav nav a:hover{color:#fff;background:rgba(255,255,255,.07)} .nav nav a.on{color:var(--amber)} .callbtn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#141414; font-weight:800;text-decoration:none;padding:11px 16px;border-radius:10px;font-size:.92rem;white-space:nowrap; font-family:"Archivo Expanded",sans-serif;letter-spacing:.01em} .callbtn:hover{background:#fff} .burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px} .burger svg{display:block} /* mobile drawer: absolute below bar so it adds zero height when closed */ .drawer{display:none} @media(max-width:920px){ .nav{gap:12px} .nav nav{display:none} .burger{display:block} .callbtn.top{padding:9px 12px;font-size:.86rem} .drawer{display:block;position:absolute;left:0;right:0;top:70px;background:var(--asphalt-deep); border-bottom:1px solid var(--hair-d);opacity:0;pointer-events:none;transform:translateY(-8px); transition:.22s;padding:8px 14px 16px} .drawer.open{opacity:1;pointer-events:auto;transform:none} .drawer a{display:block;color:#e7eaef;text-decoration:none;font-weight:600;padding:13px 8px;border-bottom:1px solid var(--hair-d)} .drawer a:last-child{border-bottom:0} } @media(max-width:600px){ .brand b{display:none} .brand img{height:26px} .callbtn.top{padding:8px 11px;font-size:.8rem;border-radius:9px} .nav{height:62px} .drawer{top:62px} } /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:"Archivo Expanded",sans-serif;font-weight:700; text-decoration:none;padding:14px 22px;border-radius:11px;font-size:.95rem;letter-spacing:.01em; border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,color .15s} .btn:hover{transform:translateY(-2px)} .btn-amber{background:var(--amber);color:#141414} .btn-amber:hover{background:var(--amber-deep);color:#fff} .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn-ink{background:var(--ink);color:#fff} .btn-ink:hover{background:#000} .btn-ghost{background:transparent;color:var(--text);border-color:var(--hair)} .btn-ghost:hover{border-color:var(--ink)} /* ---- hero ---- */ .hero{position:relative;background:var(--asphalt-deep);color:#fff;overflow:hidden} .hero .bg{position:absolute;inset:0} .hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.66; animation:kenb 22s ease-out both} @keyframes kenb{from{transform:scale(1.08)}to{transform:scale(1)}} .hero .scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(16,18,22,.5) 0%,rgba(16,18,22,.3) 42%,rgba(20,23,27,.9) 100%)} .hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:96px 22px 84px} .hero h1{font-size:clamp(2.5rem,6.4vw,5rem);max-width:14ch;text-transform:uppercase;letter-spacing:-.02em} .hero h1 .u{position:relative;display:inline-block} /* striping-paint sweep under hero headline */ .hero h1 .u::after{content:"";position:absolute;left:0;bottom:-.12em;height:.13em;width:100%; background:repeating-linear-gradient(90deg,var(--amber) 0 26px,transparent 26px 44px); transform:scaleX(0);transform-origin:left;animation:sweep 1.3s .35s cubic-bezier(.2,.7,.2,1) forwards} @keyframes sweep{to{transform:scaleX(1)}} .hero p.sub{font-size:1.18rem;max-width:44ch;margin:22px 0 0;color:#e9ebef} .hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .hero .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-weight:600;color:#cfd4db;font-size:.95rem} /* open-now chip */ .chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.86rem} .chip .dot{width:9px;height:9px;border-radius:50%;background:#7bdc7b;box-shadow:0 0 0 0 rgba(123,220,123,.6);animation:pulse 2.4s infinite} .chip.closed .dot{background:#e2915a;animation:none} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,220,123,.5)}70%{box-shadow:0 0 0 8px rgba(123,220,123,0)}100%{box-shadow:0 0 0 0 rgba(123,220,123,0)}} /* ---- trust strip ---- */ .trust{background:var(--amber);color:#171717} .trust .row{display:flex;flex-wrap:wrap;gap:8px 34px;align-items:center;justify-content:center; padding:15px 22px;font-family:"Archivo Expanded",sans-serif;font-weight:700;font-size:.9rem; letter-spacing:.04em;text-transform:uppercase;text-align:center} .trust .row span{display:inline-flex;align-items:center;gap:10px} .trust .sep{width:6px;height:6px;background:#171717;border-radius:50%;opacity:.5} /* ---- sections ---- */ section{padding:74px 0} .section-head{max-width:62ch;margin-bottom:40px} .section-head h2{font-size:clamp(1.9rem,3.8vw,2.9rem);margin-top:14px;text-transform:uppercase} .section-head p.lead{font-size:1.12rem;color:var(--muted);margin:16px 0 0} .on-dark{background:var(--asphalt);color:#eef0f3} .on-dark .section-head p.lead{color:#c3c9d2} .on-deep{background:var(--asphalt-deep);color:#eef0f3} .on-deep .section-head p.lead,.on-deep .muted{color:#c3c9d2} .tint{background:var(--paper-2)} /* striped section divider (logo receding lines) */ .stripes{height:2px;background:transparent;position:relative;overflow:hidden} .stripe-rule{display:flex;flex-direction:column;gap:7px;margin:2px 0 22px} .stripe-rule i{display:block;height:3px;background:var(--amber);border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .stripe-rule i:nth-child(1){width:34px} .stripe-rule i:nth-child(2){width:64px} .stripe-rule i:nth-child(3){width:96px} .reveal.in .stripe-rule i{transform:scaleX(1)} .reveal.in .stripe-rule i:nth-child(2){transition-delay:.08s} .reveal.in .stripe-rule i:nth-child(3){transition-delay:.16s} /* ---- services grid ---- */ .grid{display:grid;gap:22px} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g2{grid-template-columns:repeat(2,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}} .svc{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--hair); display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .svc:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(20,23,27,.16)} .svc .ph{aspect-ratio:16/11;overflow:hidden;background:var(--asphalt)} .svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .svc:hover .ph img{transform:scale(1.06)} .svc .bd{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1} .svc h3{font-size:1.24rem;text-transform:uppercase;letter-spacing:-.005em} .svc p{color:var(--muted);font-size:.98rem;margin:9px 0 16px;flex:1} .svc .more{font-family:"Archivo Expanded",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--amber-deep);text-decoration:none;display:inline-flex;align-items:center;gap:8px} .svc .more:hover{gap:12px} /* ---- prose ---- */ .prose{max-width:74ch} .prose p{margin:0 0 18px} .prose h3{font-size:1.5rem;margin:34px 0 12px;text-transform:uppercase} .prose h4{font-size:1.14rem;font-family:"Hanken Grotesk";font-weight:800;margin:24px 0 8px} .prose ul{margin:0 0 20px;padding-left:0;list-style:none} .prose ul li{position:relative;padding:6px 0 6px 30px} .prose ul li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:3px;background:var(--amber);border-radius:2px} .on-dark .prose h4{color:#fff} /* process steps (spec-sheet, tabular numerals) */ .steps{counter-reset:st;display:grid;gap:2px;border-radius:var(--r);overflow:hidden;border:1px solid var(--hair)} .on-dark .steps,.on-deep .steps{border-color:var(--hair-d)} .steps .step{background:var(--card);display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:baseline;padding:16px 20px} .on-dark .steps .step,.on-deep .steps .step{background:var(--asphalt-2)} .steps .step .n{counter-increment:st;font-family:"Archivo Expanded",sans-serif;font-weight:800;font-size:1.1rem; color:var(--amber-deep);font-variant-numeric:tabular-nums} .on-dark .steps .step .n,.on-deep .steps .step .n{color:var(--amber)} .steps .step .n::before{content:counter(st,decimal-leading-zero)} .steps .step .t{color:var(--text)} .on-dark .steps .step .t,.on-deep .steps .step .t{color:#e7eaef} /* spec chip band (measurements from their two-phase method) */ .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-radius:var(--r);overflow:hidden; border:1px solid var(--hair-d);background:var(--hair-d)} @media(max-width:700px){.specs{grid-template-columns:repeat(2,1fr)}} .specs .sp{background:var(--asphalt-2);padding:24px 18px;text-align:center} .specs .sp b{display:block;font-family:"Archivo Expanded",sans-serif;font-weight:800;font-size:2.2rem;color:#fff; font-variant-numeric:tabular-nums;line-height:1} .specs .sp span{display:block;margin-top:8px;font-size:.82rem;color:var(--muted-d);text-transform:uppercase;letter-spacing:.08em;font-weight:600} /* ---- gallery ---- */ .gal{columns:3;column-gap:14px} @media(max-width:900px){.gal{columns:2}} @media(max-width:560px){.gal{columns:1}} .gal figure{margin:0 0 14px;break-inside:avoid;border-radius:12px;overflow:hidden;position:relative;background:var(--asphalt)} .gal figure img{width:100%;transition:transform .5s} .gal figure:hover img{transform:scale(1.05)} .gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-weight:600;font-size:.86rem; background:linear-gradient(0deg,rgba(16,18,22,.85),transparent);opacity:0;transition:.25s} .gal figure:hover figcaption{opacity:1} /* ---- reviews ---- */ .rev{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column} .on-dark .rev,.on-deep .rev{background:var(--asphalt-2);border-color:var(--hair-d)} .rev .stars{color:var(--amber);letter-spacing:2px;font-size:1rem} .rev .q{font-size:1.16rem;font-weight:700;margin:12px 0 10px;line-height:1.3;font-family:"Archivo Expanded",sans-serif;letter-spacing:-.01em} .on-dark .rev .q,.on-deep .rev .q{color:#fff} .rev p{color:var(--muted);font-size:.97rem;margin:0 0 16px;flex:1} .on-dark .rev p,.on-deep .rev p{color:#c3c9d2} .rev .by{font-weight:700;color:var(--text);font-size:.92rem} .on-dark .rev .by,.on-deep .rev .by{color:#e7eaef} /* ---- quote tiers ---- */ .tiers{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:760px){.tiers{grid-template-columns:1fr}} .tier{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column} .tier.prem{background:var(--asphalt);color:#fff;border-color:var(--asphalt)} .tier h3{font-size:1.5rem;text-transform:uppercase} .tier .price{font-family:"Archivo Expanded",sans-serif;font-weight:800;font-size:2.4rem;margin:6px 0 4px} .tier.free .price{color:var(--amber-deep)} .tier.prem .price{color:var(--amber)} .tier ul{list-style:none;padding:0;margin:16px 0 22px;flex:1} .tier ul li{position:relative;padding:8px 0 8px 28px;font-size:.98rem} .tier ul li::before{content:"";position:absolute;left:0;top:16px;width:15px;height:3px;background:var(--amber);border-radius:2px} .tier.prem ul li{color:#dfe3e9} .tier .fine{font-size:.82rem;color:var(--muted);margin-top:10px} .tier.prem .fine{color:var(--muted-d)} /* ---- book callout ---- */ .book{display:grid;grid-template-columns:.9fr 1.4fr;gap:38px;align-items:center} @media(max-width:800px){.book{grid-template-columns:1fr}} .book .cov{border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);background:#fff} /* ---- contact / cta band ---- */ .ctaband{background:var(--amber);color:#141414;text-align:center;padding:70px 0} .ctaband h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase} .ctaband .big{font-family:"Archivo Expanded",sans-serif;font-weight:800;font-size:clamp(2rem,6vw,3.4rem); display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#141414;margin-top:12px} .ctaband .big:hover{color:#000} .infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:820px){.infocards{grid-template-columns:1fr}} .info{background:var(--asphalt-2);border:1px solid var(--hair-d);border-radius:var(--r);padding:24px} .info h3{font-size:1.05rem;text-transform:uppercase;color:#fff;letter-spacing:.02em} .info .k{color:var(--muted-d);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:14px} .info a,.info .v{color:#e7eaef;text-decoration:none;font-weight:600} .info a:hover{color:var(--amber)} .hoursrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--hair-d);color:#dfe3e9;font-size:.95rem} .hoursrow:last-child{border-bottom:0} .hoursrow.today{color:var(--amber);font-weight:700} /* ---- forms ---- */ .form{display:grid;gap:14px;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--hair); border-radius:var(--r);padding:26px} .form .full{grid-column:1/-1} @media(max-width:600px){.form{grid-template-columns:1fr}} .form label{font-weight:700;font-size:.85rem;display:block;margin-bottom:5px} .form input,.form select,.form textarea{width:100%;padding:12px 13px;border:1px solid var(--hair);border-radius:9px; font:inherit;font-size:.98rem;background:#fff} .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--amber);border-color:var(--amber)} .form .note{font-size:.82rem;color:var(--muted)} /* ---- footer ---- */ footer.site{background:var(--asphalt-deep);color:#c3c9d2;padding:56px 0 28px;border-top:3px solid var(--amber)} footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} @media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer.site .cols{grid-template-columns:1fr}} footer.site h4{color:#fff;font-family:"Archivo Expanded",sans-serif;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px} footer.site a{color:#c3c9d2;text-decoration:none;display:block;padding:5px 0;font-size:.95rem} footer.site a:hover{color:var(--amber)} footer.site .foot-brand img{height:32px;filter:invert(1) brightness(1.6);margin-bottom:12px} footer.site .foot-brand p{font-size:.92rem;max-width:34ch} footer.site .base{margin-top:38px;padding-top:20px;border-top:1px solid var(--hair-d);font-size:.82rem;color:#7d838d; display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between} /* ---- reveal ---- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} .stripe-rule i{transform:scaleX(1)} .hero h1 .u::after{transform:scaleX(1)} .hero .bg img{opacity:.5} }