/* =========================================================== Jake's Tree Lopping Services — "Illustrated Tradie" system Hand-drawn comic vibe to match the caricature brand artwork =========================================================== */ /* ---------- Fonts ---------- */ /* Anton (signwriting display), Permanent Marker (brush/marker accent), Inter (body). Loaded in via Google Fonts. */ :root{ /* Brand palette sampled from the caricature artwork */ --hi-vis:#C2DC00; /* hero hi-vis lime/chartreuse */ --hi-vis-deep:#9CB000; /* darker lime for text on light */ --hi-vis-glow:#D6ED3A; --sky:#A9D8EA; /* paint-stroke sky blue */ --sky-deep:#1E6F93; --ink:#15170F; /* warm near-black ink */ --ink-soft:#2C3024; --cream:#F6F3E8; /* paper background */ --paper:#FFFDF6; --earth:#C9A063; /* ground / ochre */ --leaf:#4E7A2F; /* foliage depth green */ --line:#15170F; --red:#E5402A; /* small alert/quote accent from truck lettering */ --maxw:1180px; --radius:18px; --shadow:6px 6px 0 var(--ink); --shadow-sm:4px 4px 0 var(--ink); --shadow-lg:10px 10px 0 var(--ink); --font-display:'Anton',Impact,'Arial Narrow',sans-serif; --font-marker:'Permanent Marker',cursive; --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .container{max-width:var(--maxw);margin:0 auto;padding:0 22px} /* ---------- Type ---------- */ h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.98; letter-spacing:.01em;text-transform:uppercase;margin:0 0 .35em} h1{font-size:clamp(2.6rem,7vw,5.2rem)} h2{font-size:clamp(2rem,4.6vw,3.4rem)} h3{font-size:clamp(1.3rem,2.6vw,1.8rem)} p{margin:0 0 1.1em} .lead{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:60ch} .marker{font-family:var(--font-marker);text-transform:none;line-height:1.1} .hl{color:var(--hi-vis-deep)} .eyebrow{font-family:var(--font-marker);color:var(--sky-deep); font-size:1.05rem;letter-spacing:.02em;margin-bottom:.4em;display:inline-block; transform:rotate(-2deg)} .center{text-align:center} /* highlighter swash behind words */ .swish{background:linear-gradient(transparent 58%,var(--hi-vis) 58% 92%,transparent 92%); padding:0 .08em} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display); text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em; padding:.85em 1.4em;border:3px solid var(--ink);border-radius:14px; background:var(--hi-vis);color:var(--ink);box-shadow:var(--shadow-sm); cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;white-space:nowrap} .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .btn.alt{background:var(--ink);color:var(--paper)} .btn.sky{background:var(--sky)} .btn.ghost{background:var(--paper)} .btn.lg{font-size:1.25rem;padding:1em 1.7em} .btn svg{width:1.1em;height:1.1em} /* sticker badge */ .sticker{display:inline-block;font-family:var(--font-marker);background:var(--hi-vis); border:3px solid var(--ink);border-radius:30px;padding:.3em 1em; box-shadow:var(--shadow-sm);transform:rotate(-3deg);font-size:1rem} .sticker.sky{background:var(--sky)} .sticker.red{background:var(--red);color:#fff} /* ---------- Top bar / nav ---------- */ .topbar{background:var(--ink);color:var(--paper);font-size:.85rem; font-weight:600;letter-spacing:.02em} .topbar .container{display:flex;justify-content:space-between;align-items:center; gap:14px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap} .topbar a{color:var(--hi-vis)} .topbar .dot{color:var(--sky)} header.nav{position:sticky;top:0;z-index:50;background:var(--cream); border-bottom:3px solid var(--ink)} .nav .container{display:flex;align-items:center;justify-content:space-between; gap:18px;padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:12px;line-height:.85} .brand-logo{height:88px;width:auto;display:block; filter:drop-shadow(1px 1px 1.5px rgba(0,0,0,.25))} @media(max-width:560px){.brand-logo{height:62px}} .brand .mark{font-family:var(--font-marker);color:var(--hi-vis-deep); font-size:1.05rem;-webkit-text-stroke:.4px var(--ink);text-shadow:1px 1px 0 var(--ink)} .brand .lock{display:flex;flex-direction:column} .brand .big{font-family:var(--font-display);font-size:1.45rem;text-transform:uppercase; color:var(--ink)} .brand .sub{font-family:var(--font-marker);font-size:.8rem;color:var(--sky-deep);margin-top:-2px} .brand .blob{width:46px;height:46px;border:3px solid var(--ink);border-radius:50%; background:var(--hi-vis);display:grid;place-items:center;box-shadow:var(--shadow-sm); flex:none;overflow:hidden} .brand .blob svg{width:26px;height:26px} .brand .blob img{width:100%;height:100%;object-fit:cover;display:block} .navlinks{display:flex;align-items:center;gap:6px} .navlinks a{font-weight:700;padding:.5em .8em;border-radius:10px;font-size:.98rem} .navlinks a:hover,.navlinks a.active{background:var(--hi-vis); box-shadow:3px 3px 0 var(--ink);border:2px solid var(--ink);padding:calc(.5em - 2px) calc(.8em - 2px)} .nav .call{margin-left:6px} .burger{display:none;background:var(--hi-vis);border:3px solid var(--ink); border-radius:12px;width:50px;height:46px;cursor:pointer;box-shadow:var(--shadow-sm)} .burger span{display:block;width:22px;height:3px;background:var(--ink);margin:3px auto; border-radius:2px} /* mobile menu — placed OUTSIDE header to avoid fixed-in-filter trap */ .mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(21,23,15,.55); display:none} .mobile-menu.open{display:block} .mobile-menu .sheet{position:absolute;top:0;right:0;height:100%;width:min(82%,340px); background:var(--cream);border-left:3px solid var(--ink);padding:22px; display:flex;flex-direction:column;gap:8px;overflow-y:auto} .mobile-menu .sheet a{font-family:var(--font-display);text-transform:uppercase; font-size:1.5rem;padding:.4em .2em;border-bottom:2px dashed var(--ink)} .mobile-menu .x{align-self:flex-end;background:var(--ink);color:#fff;border:none; width:44px;height:44px;border-radius:10px;font-size:1.4rem;cursor:pointer} /* ---------- Hero ---------- */ .hero{position:relative;background: radial-gradient(120% 80% at 80% 0%,var(--sky) 0%,transparent 55%), var(--cream); border-bottom:3px solid var(--ink);overflow:hidden} .hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:34px; align-items:center;padding-top:46px;padding-bottom:46px} .hero h1 span{display:block} .hero .badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px} .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .hero-art{position:relative} .hero-art img{border:3px solid var(--ink);border-radius:var(--radius); box-shadow:var(--shadow-lg);background:var(--sky)} .hero-art .float{position:absolute;z-index:3} .hero-art .float.q{top:-14px;left:-14px;transform:rotate(-6deg)} .hero-art .float.r{bottom:18px;right:-12px;transform:rotate(5deg)} /* full-bleed photo hero (home) */ .hero--photo{background:var(--ink);min-height:82vh;display:flex;align-items:center;overflow:hidden} .hero--photo .hero-photo-bg{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 14%;z-index:0;display:block} .hero--photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(15,17,8,.88) 0%,rgba(15,17,8,.52) 48%,rgba(15,17,8,.12) 100%), linear-gradient(0deg,rgba(15,17,8,.5),transparent 52%)} .hero--photo .container{position:relative;z-index:2;display:block; padding-top:64px;padding-bottom:64px} .hero--photo .hero-copy{max-width:640px} .hero--photo h1,.hero--photo .lead{color:var(--paper)} .hero--photo .lead{text-shadow:0 1px 10px rgba(0,0,0,.45)} .hero--photo .eyebrow{color:var(--hi-vis)} @media(max-width:760px){.hero--photo{min-height:78vh} .hero--photo .hero-photo-bg{object-position:50% 16%}} .stars{color:#F2A900;letter-spacing:2px;font-size:1.1rem} /* marquee strip */ .strip{background:var(--ink);color:var(--hi-vis);border-bottom:3px solid var(--ink); overflow:hidden;white-space:nowrap} .strip .track{display:inline-flex;gap:42px;padding:11px 0;font-family:var(--font-display); text-transform:uppercase;letter-spacing:.05em;animation:slide 28s linear infinite} .strip .track span{display:inline-flex;gap:42px} .strip .dot{color:var(--sky)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- Sections ---------- */ section{padding:64px 0} .sec-head{max-width:62ch} .sec-head.center{margin:0 auto;text-align:center} /* services grid */ .grid{display:grid;gap:20px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius); padding:22px;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s} .card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)} .card .ico{width:58px;height:58px;border:3px solid var(--ink);border-radius:14px; background:var(--hi-vis);display:grid;place-items:center;margin-bottom:14px} .card .ico svg{width:32px;height:32px} .card h3{margin-bottom:.3em} .card p{margin:0;font-size:.97rem;color:var(--ink-soft)} .card.sky .ico{background:var(--sky)} .card .more{font-family:var(--font-marker);color:var(--sky-deep);margin-top:10px; display:inline-block} /* AI illustration header inside a card */ .card .illus{margin:-22px -22px 14px;border-bottom:3px solid var(--ink); background:linear-gradient(180deg,#cdeaf6,#eef7e0);aspect-ratio:16/11;overflow:hidden; border-radius:calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0} .card .illus img{width:100%;height:100%;object-fit:cover; transition:transform .35s ease;mix-blend-mode:multiply} .card:hover .illus img{transform:scale(1.05)} /* feature / why band */ .band{background:var(--hi-vis);border-top:3px solid var(--ink); border-bottom:3px solid var(--ink)} .band.sky{background:var(--sky)} .band.ink{background:var(--ink);color:var(--paper)} .band.ink h2,.band.ink h3{color:var(--paper)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center} .stat .n{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1} .stat .l{font-weight:700;font-size:.95rem} /* steps */ .steps{counter-reset:s} .step{position:relative;padding-left:0} .step .num{font-family:var(--font-display);font-size:2.6rem;color:var(--hi-vis-deep); -webkit-text-stroke:1.5px var(--ink)} /* gallery */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .gallery figure{margin:0;border:3px solid var(--ink);border-radius:14px;overflow:hidden; box-shadow:var(--shadow-sm);background:var(--ink);position:relative;cursor:pointer; aspect-ratio:4/3} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .gallery figure:hover img{transform:scale(1.06)} .gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,23,15,.78); color:var(--paper);font-size:.8rem;font-weight:600;padding:8px 10px; transform:translateY(100%);transition:transform .2s} .gallery figure:hover figcaption{transform:translateY(0)} /* reviews */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .review{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow-sm)} .review .stars{margin-bottom:8px} .review p{font-size:.98rem} .review .who{font-family:var(--font-marker);color:var(--sky-deep)} .review .src{font-size:.78rem;color:var(--ink-soft);font-weight:600} /* split / about */ .split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center} .split img{border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)} /* circular illustration badge floating on a photo */ .photo-wrap{position:relative} .photo-wrap .badge-illus{position:absolute;bottom:-18px;right:-14px;width:118px;height:118px; border:3px solid var(--ink);border-radius:50%;background:linear-gradient(180deg,#cdeaf6,#eef7e0); box-shadow:var(--shadow-sm);overflow:hidden;z-index:2} .photo-wrap .badge-illus img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0; box-shadow:none;mix-blend-mode:multiply} @media(max-width:680px){.photo-wrap .badge-illus{width:88px;height:88px;right:6px;bottom:-14px}} .checks{list-style:none;padding:0;margin:0;display:grid;gap:10px} .checks li{display:flex;gap:10px;align-items:flex-start;font-weight:600} .checks li::before{content:"";flex:none;width:24px;height:24px;border:3px solid var(--ink); border-radius:7px;background:var(--hi-vis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2315170F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat} /* areas */ .areas{display:flex;flex-wrap:wrap;gap:10px} .areas .chip{background:var(--paper);border:3px solid var(--ink);border-radius:30px; padding:.4em 1em;font-weight:700;box-shadow:3px 3px 0 var(--ink);font-size:.95rem} /* contact / form */ .form{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius); padding:26px;box-shadow:var(--shadow)} .form label{display:block;font-weight:700;margin:0 0 6px} .form .row{margin-bottom:16px} .form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form input,.form select,.form textarea{width:100%;font-family:var(--font-body); font-size:1rem;padding:.75em .85em;border:3px solid var(--ink);border-radius:12px; background:var(--cream)} .form textarea{min-height:130px;resize:vertical} .field-list{columns:2;font-weight:600} /* big CTA */ .cta-band{background:var(--ink);color:var(--paper);text-align:center; border-top:3px solid var(--ink)} .cta-band h2{color:var(--paper)} .cta-band .phone{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.4rem); color:var(--hi-vis);display:inline-block;margin:6px 0 14px} /* footer */ footer{background:var(--ink);color:#cfd2c4;border-top:3px solid var(--hi-vis); padding:48px 0 120px} footer a{color:var(--hi-vis)} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px} footer h4{font-family:var(--font-display);text-transform:uppercase;color:var(--paper); font-size:1.1rem;margin:0 0 12px;font-weight:400;letter-spacing:.03em} footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:.95rem} .foot-bottom{border-top:1px solid #3a3d31;margin-top:30px;padding-top:18px; font-size:.82rem;color:#9a9d8e;display:flex;justify-content:space-between; flex-wrap:wrap;gap:8px} /* sticky mobile call bar */ .callbar{position:fixed;bottom:0;left:0;right:0;z-index:55;display:none; grid-template-columns:1fr 1fr;gap:0;border-top:3px solid var(--ink)} .callbar a{display:flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-display);text-transform:uppercase;padding:14px;font-size:1.05rem} .callbar .c{background:var(--hi-vis);color:var(--ink)} .callbar .q{background:var(--ink);color:var(--paper)} /* lightbox */ .lb{position:fixed;inset:0;background:rgba(21,23,15,.92);z-index:90;display:none; align-items:center;justify-content:center;padding:24px} .lb.open{display:flex} .lb img{max-width:92vw;max-height:88vh;border:3px solid var(--hi-vis);border-radius:12px} .lb .x{position:absolute;top:18px;right:22px;background:var(--hi-vis);border:3px solid var(--ink); width:50px;height:50px;border-radius:12px;font-size:1.5rem;cursor:pointer} /* deco torn divider */ .torn{height:26px;background:var(--ink); -webkit-mask:radial-gradient(14px at 14px 0,#0000 98%,#000) repeat-x 0 0/28px 100%; mask:radial-gradient(14px at 14px 0,#0000 98%,#000) repeat-x 0 0/28px 100%} /* reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} /* ---------- Responsive ---------- */ @media(max-width:920px){ .hero .container{grid-template-columns:1fr;gap:26px} .hero-art{order:-1} .g3,.g4,.reviews,.gallery{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .foot{grid-template-columns:1fr 1fr} } @media(max-width:680px){ .navlinks,.nav .call{display:none} .burger{display:block} .callbar{display:grid} footer{padding-bottom:120px} .g3,.g4,.g2,.reviews{grid-template-columns:1fr} .gallery{grid-template-columns:repeat(2,1fr);gap:10px} .form .two{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .foot{grid-template-columns:1fr} .field-list{columns:1} section{padding:48px 0} .topbar{font-size:.78rem} } @media(max-width:380px){ .gallery{grid-template-columns:1fr} }