/* ============================================================ Wrenchly — shared styles (linked by every page) Design language: THE SHOP SIGN — hand-painted trade signage. Bottle-green enamel, gold-leaf keylines, chalk cards on putty. Gold is for borders, rules and badges — NEVER text on light. Fonts: Besley (Clarendon slab display) + Work Sans (body) + Yellowtail (script flourish, sparingly), per-page. ============================================================ */ :root{ /* Painted-sign palette */ --bg:#F2F0E6; /* putty — aged sign field */ --bg-2:#E9E6D8; /* deeper putty band */ --card:#FBFAF4; /* chalk white */ --ink:#22352C; /* deep green-cast ink */ --ink-2:#33493F; --ink-soft:#5C6E62; --line:#DCD6C2; --green:#17453B; /* bottle-green enamel — primary */ --green-deep:#0F332B; /* headline / hover */ --gold:#C9A227; /* gold leaf — keylines, badges, shades */ --gold-soft:#EAE0BC; --chalk-warm:#F5E9C8; /* lettering on green */ --red:#9E2F23; /* signal red — readable on light */ --red-bright:#B5382D; /* small marks only */ /* Legacy token names kept so existing page CSS re-themes cleanly */ --accent:#17453B; --accent-dark:#0F332B; --accent-tint:#E7EBDD; --sage:#E5EBDC; --sky:#E3EAE6; --sand:#F0E7C8; --blush:#F2E2DB; --ok:#2E6B4F; --ok-tint:var(--sage); --req:#9E2F23; --crit:#9E2F23; --crit-tint:var(--blush); --rec:#8A6E14; --rec-tint:var(--sand); --opt:#4A6459; --opt-tint:var(--sky); --radius:14px; --shadow:0 5px 18px rgba(34,53,44,.10),0 2px 5px rgba(34,53,44,.06); --shadow-lg:0 16px 40px rgba(34,53,44,.14),0 4px 10px rgba(34,53,44,.07); --shadow-xl:0 24px 56px rgba(34,53,44,.18),0 6px 14px rgba(34,53,44,.08); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{ font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--bg); line-height:1.7;-webkit-font-smoothing:antialiased; overflow-x:hidden;overflow-x:clip; /* side-entrances and tilted cards must never cause horizontal scroll */ } .wrap{max-width:1360px;margin:0 auto;padding:0 22px} .wrap-narrow{max-width:760px} h1,h2,h3{font-family:'Besley',serif;letter-spacing:-.005em} /* ---------- Motion system (site.js adds .js-anim to ) ---------- */ :root{ --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); } .js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)} .js-anim .reveal.in{opacity:1;transform:none} .js-anim .reveal-pop{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s var(--ease-spring),transform .6s var(--ease-spring)} .js-anim .reveal-pop.in{opacity:1;transform:none} .js-anim .reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .js-anim .reveal-right{opacity:0;transform:translateX(36px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .js-anim .reveal-left.in,.js-anim .reveal-right.in{opacity:1;transform:none} .js-anim [data-stagger]>*{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .55s var(--ease-spring),transform .55s var(--ease-spring);transition-delay:var(--d,0ms)} .js-anim [data-stagger].in>*{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal,.reveal-pop,.reveal-left,.reveal-right,[data-stagger]>*{opacity:1!important;transform:none!important} } /* Hover physics — fine pointers only */ @media(hover:hover) and (pointer:fine){ .btn{transition:background .15s,transform .22s var(--ease-out),box-shadow .22s var(--ease-out)} .btn:hover{transform:scale(1.035);background:var(--green-deep)} .hover-lift{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)} .hover-lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .nav-links a.cta{transition:background .15s,transform .22s var(--ease-out)} .nav-links a.cta:hover{transform:scale(1.04)} } /* Animated underline sweep on text links — gold pinstripe */ .nav-links a:not(.cta),footer.site-footer a,.prose a,.billing a,details .a a{ text-decoration:none; background-image:linear-gradient(var(--gold),var(--gold)); background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .28s var(--ease-out),color .15s; } .nav-links a:not(.cta):hover,footer.site-footer a:hover,.prose a:hover,.billing a:hover,details .a a:hover{ background-size:100% 2px; } /* ---------- Navigation (shared on every page) ---------- */ nav.site-nav{background:var(--bg);padding:20px 0;border-bottom:2px solid var(--line)} nav.site-nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .logo{font-family:'Besley',serif;font-weight:800;font-size:21px;color:var(--green-deep);text-decoration:none} .logo span{color:var(--red)} .nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .nav-links a{font-family:'Work Sans',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} .nav-links a:hover{color:var(--green-deep)} .nav-links a[aria-current="page"]{color:var(--green-deep)} .nav-links a.cta{ color:var(--chalk-warm);background:var(--green); padding:11px 22px;border-radius:9px;box-shadow:0 3px 0 var(--gold); } .nav-links a.cta:hover{background:var(--green-deep)} /* ---------- Buttons — painted sign plates ---------- */ .btn{ display:inline-block;font-family:'Work Sans',sans-serif;font-weight:700;font-size:14.5px; letter-spacing:.06em;text-transform:uppercase; background:var(--green);color:var(--chalk-warm);padding:16px 32px;border-radius:10px; text-decoration:none;border:none;cursor:pointer;box-shadow:0 3px 0 var(--gold); } .btn:hover{background:var(--green-deep)} .btn.ghost{background:transparent;color:var(--green-deep);border:2px solid var(--green);box-shadow:none} .btn.ghost:hover{background:var(--sage)} /* ---------- Kickers, sections, page heroes ---------- */ .kicker{ font-family:'Work Sans',sans-serif;font-size:12.5px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:18px; } .sec-kicker{ font-family:'Work Sans',sans-serif;font-size:12.5px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px; display:flex;align-items:center;gap:10px; } .sec-kicker::after{content:"";height:2px;width:44px;background:var(--gold);border-radius:2px} section{padding:88px 0} section h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;line-height:1.14;margin-bottom:16px;max-width:26ch;color:var(--green-deep)} section p.intro{color:var(--ink-soft);font-size:16.5px;max-width:60ch;margin-bottom:44px} .band{background:var(--bg-2)} .page-hero{background:var(--bg);color:var(--ink);padding:68px 0 30px} .page-hero h1{font-size:clamp(30px,4.2vw,44px);font-weight:800;line-height:1.1;margin-bottom:18px;max-width:24ch;color:var(--green-deep)} .page-hero p{color:var(--ink-soft);font-size:17px;max-width:56ch} /* ---------- FAQ accordion — framed panels ---------- */ details{background:var(--card);border:1.5px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)} summary{ cursor:pointer;padding:18px 22px;font-family:'Besley',serif;font-weight:700;font-size:16px; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--green-deep); } summary::-webkit-details-marker{display:none} summary::after{content:"+";font-family:'Work Sans',sans-serif;font-weight:700;color:var(--red);font-size:20px;flex:none} details[open] summary::after{content:"–"} details[open]{border-color:var(--gold)} details .a{padding:0 22px 20px;font-size:14.5px;color:var(--ink-soft);max-width:70ch} /* ---------- Form controls ---------- */ label.q{display:block;font-weight:600;font-size:14px;margin-bottom:6px} .req-star{color:var(--req);font-weight:600} input[type=text],input[type=tel],input[type=email],input[type=url],input[type=number],select,textarea{ width:100%;font-family:inherit;font-size:15px;color:var(--ink); padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff; transition:border-color .15s,box-shadow .15s; } textarea{resize:vertical;min-height:82px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--sage)} select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6E62' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:36px; } .field{margin-bottom:16px} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--req)} .err-msg{display:none;color:var(--req);font-size:12.5px;margin-top:4px} .field.invalid .err-msg{display:block} .err-summary{ display:none;background:var(--blush);color:#7C2418; border-radius:10px;padding:13px 16px;font-size:13.5px;margin-bottom:16px; } .err-summary.show{display:block} /* ---------- Prose pages (about / privacy / terms) ---------- */ .prose{max-width:720px} .prose h2{font-size:23px;font-weight:800;margin:40px 0 12px;color:var(--green-deep)} .prose h2:first-child{margin-top:0} .prose h3{font-size:17px;font-weight:700;margin:24px 0 8px} .prose p{font-size:15px;color:var(--ink-2);margin-bottom:12px;max-width:70ch} .prose ul{padding-left:22px;margin:0 0 14px} .prose li{font-size:15px;color:var(--ink-2);margin-bottom:6px;max-width:66ch} .prose a{color:var(--green)} .updated{font-size:13px;color:var(--ink-soft);margin-bottom:30px} /* ---------- Footer — the enamel sign itself ---------- */ footer.site-footer{background:var(--green);color:#A9BFB2;padding:36px 0;font-size:13.5px;border-top:4px solid var(--gold)} footer.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .footer-brand{color:var(--chalk-warm);font-family:'Besley',serif;font-weight:800} .footer-brand span{color:var(--gold)} footer.site-footer a{color:#CBDACF} footer.site-footer a:hover{color:var(--chalk-warm)} /* ---------- Accessibility ---------- */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--green);outline-offset:2px; } @media(max-width:860px){ section{padding:60px 0} .page-hero{padding:50px 0 22px} }