/* Site-wide additions layered on top of each page's own stylesheet. Linked last in on every page so these rules win without needing !important or inflated selectors. Three jobs: 1. the skip link keyboard and screen-reader users need to jump the nav 2. a visible focus ring, since the theme is dark and the browser default is close to invisible against it 3. the footer legal row (credentials, privacy, terms) Design tokens come from the host page's :root, so this file stays in whatever palette the page it is loaded into is using. */ /* ---- SKIP LINK ---- Off-screen until focused, then pinned over the sticky bar and nav (both sit at z-index 150-200, so this has to clear them). */ .skip-link{ position:fixed;top:0;left:50%;transform:translate(-50%,-120%); z-index:500; padding:12px 26px; background:var(--gold,#c4a35a);color:var(--black,#08080a); font-family:'DM Mono',monospace;font-size:11px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;text-decoration:none; border:1px solid var(--black,#08080a); transition:transform .18s cubic-bezier(.22,1,.36,1); } .skip-link:focus{transform:translate(-50%,0);} /* Never animate the skip link in for someone who asked for less motion — it should simply be there the instant it takes focus. */ @media(prefers-reduced-motion:reduce){ .skip-link{transition:none;} } /* ---- FOCUS RING ---- :focus-visible only, so a mouse click on a button does not leave a ring behind, but tabbing always shows where you are. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold-lt,#dfc07e); outline-offset:3px; border-radius:1px; } /* Form fields already shift their border on focus; the ring sits tight to the field instead of floating away from it. */ .ef-input:focus-visible, .ef-select:focus-visible, .ef-textarea:focus-visible{ outline-offset:0; } /* The nav and footer links sit on their own backgrounds where a 3px offset collides with the neighbouring link. */ nav a:focus-visible, .f-links a:focus-visible, .f-legal a:focus-visible, .mm-link:focus-visible{ outline-offset:2px; } /* ---- FOOTER LEGAL ROW ---- Sits below the existing footer content as a full-width band: credentials on the left, policy links on the right. The PA registration number lives here because HICPA expects it on advertising, and because it is the first thing a homeowner is told to look up before hiring a contractor. */ .f-legal{ flex-basis:100%; margin-top:6px;padding-top:18px; border-top:1px solid var(--rule,#2a2a35); display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px 24px; font-family:'DM Mono',monospace; font-size:10px;letter-spacing:.08em; color:#9a9183; } .f-legal-creds{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;} .f-legal-creds span{white-space:nowrap;} .f-legal-links{display:flex;flex-wrap:wrap;gap:18px;} .f-legal a{ color:#9a9183;text-decoration:none; text-transform:uppercase;letter-spacing:.1em; transition:color .2s; } .f-legal a:hover,.f-legal a:focus-visible{color:var(--gold,#c4a35a);} /* The verified-reviews link earns a little more weight than the policy links — it is the one item in this row a visitor might actually want to click. */ .f-legal-reviews{color:var(--gold-lt,#dfc07e)!important;} .f-legal-reviews:hover{color:var(--gold,#c4a35a)!important;} @media(max-width:640px){ .f-legal{flex-direction:column;text-align:center;gap:12px;} .f-legal-creds,.f-legal-links{justify-content:center;} } /* Verifiable proof. The "50+ five-star reviews" claim sits directly above this, so the link that lets a visitor check it belongs directly below — not buried in the footer. Sits between the heading and the review grid. */ .reviews-verify{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 40px;} .reviews-verify-link{font-family:'DM Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lt,#dfc07e);text-decoration:none;border-bottom:1px solid rgba(196,163,90,.4);padding-bottom:2px;transition:color .2s,border-color .2s;} .reviews-verify-link:hover{color:var(--white,#fff);border-color:var(--white,#fff);} .reviews-verify-note{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sub,#a09889);} @media(max-width:640px){ .reviews-verify{margin:4px 0 28px;gap:8px;} }