/* ========================================================================== Junk Removal Pro Service LLC ========================================================================== */ /* -------------------------------------------------------------------------- Fonts Barlow and Barlow Condensed (SIL Open Font License, see fonts/OFL.txt), hosted on this site instead of Google Fonts so the page doesn't wait on another company's server before it can show text. Latin subset only, which covers every character the site uses. The three fonts the top of the page needs (barlow-400, barlow-500, barlow-condensed-800-italic) are preloaded in each page's . -------------------------------------------------------------------------- */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-800-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- Design tokens -------------------------------------------------------------------------- */ :root { --font-heading: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Brand red, sampled from the logo */ --red: #d70302; --red-dark: #a80200; /* Layout */ --container: 1240px; --gutter: 1rem; /* Navbar (mobile first). The logo is taller than the bar on purpose, so it hangs below the bar. --logo-top nudges it down from the top edge. */ --nav-h: 60px; --nav-line: 4px; --logo-w: clamp(132px, 40vw, 168px); --logo-h: calc(var(--logo-w) * 0.5017); /* logo is 600 x 301 */ --logo-top: 6px; --logo-overhang: calc(var(--logo-top) + var(--logo-h) - var(--nav-h) - var(--nav-line)); /* Red brush stroke, used behind nav hovers and the hero headline */ --streak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23d70302' d='M6 15C3 10 9 7 20 8L58 4 108 7 158 3 188 6C196 8 196 15 198 21L194 26 199 32 193 38 197 46C196 52 187 54 175 53L128 56 78 53 30 56 14 53C6 52 8 46 5 42L9 36 2 30 8 24 4 18ZM194 13L200 14 195 17ZM196 47L200 49 193 50Z'/%3E%3C/svg%3E"); /* Check mark, used as a mask so it can take any color (about list, service lists) */ --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); } /* Light theme (default) */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --text: #111113; --text-muted: #4a4d55; --surface: #f4f4f6; /* alternate section background */ --card-bg: #ffffff; --card-border: #e5e5ea; --card-shadow: 0 8px 24px rgb(0 0 0 / 0.06); --accent-text: var(--red); /* red used as text / hover color */ --nav-shadow: rgb(0 0 0 / 0.12); --focus: var(--red); --success: #15803d; --logo-shadow: rgb(0 0 0 / 0.3); --field-bg: #ffffff; --field-border: #868993; /* about 3.6:1 against the card, so the box edges stay visible */ } /* Dark theme */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b0c; --text: #f4f4f5; --text-muted: #b6b6bd; --surface: #101013; --card-bg: #18181c; --card-border: #2a2a30; --card-shadow: 0 8px 24px rgb(0 0 0 / 0.35); --accent-text: #ff4a4a; /* brighter red so it stays readable on black */ --nav-shadow: rgb(0 0 0 / 0.6); --focus: #ffffff; --success: #4ade80; --logo-shadow: rgb(0 0 0 / 0.7); --field-bg: #101013; --field-border: #7a7c88; } @media (min-width: 40em) { :root { --gutter: 1.5rem; } } @media (min-width: 62em) { :root { --nav-h: 80px; /* Smaller than the 75em+ size on purpose: two drop-downs plus five other nav items need the room between 62em and 75em, and the logo gets to grow again once the bar has space to spare. */ --logo-w: 185px; --logo-top: 8px; } } @media (min-width: 75em) { :root { --logo-w: 250px; } } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The navbar is sticky, so in-page links and keyboard focus stop below it instead of underneath it */ html { scroll-padding-top: calc(var(--nav-h) + var(--nav-line) + 0.5rem); } /* In-page links glide instead of jumping, unless the visitor asked for less motion */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } img { display: block; max-width: 100%; height: auto; } /* Visible only to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* First tab stop on every page: jumps past the navbar to the main content */ .skip-link { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.6rem 1.1rem; border-radius: 4px; background: var(--red); color: #ffffff; font-family: var(--font-heading); font-size: 1.2rem; font-style: italic; font-weight: 800; text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: none; outline: 3px solid #ffffff; outline-offset: 2px; } /* main is only focused by the skip link, so it doesn't need a focus ring */ main:focus { outline: none; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.6rem 1.5rem; border-radius: 4px; font-family: var(--font-heading); font-size: 1.3rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; /* links get this for free, but a real