@import url('/assets/fonts/fonts.css'); /* ========================================================================== Northern Dirt & Septic — design tokens Ported from the original Claude Design export. Colours are unchanged. ========================================================================== */ :root { --orange: #EF7F1A; --orange-dark: #d16d10; --orange-tint: #fbf1e6; --orange-tint-border: #f2ddc2; --orange-text: #c56a10; --green: #5CA33C; --green-dark: #3d7a26; --green-tint: #f0f7ea; --green-light: #a6e07f; --ink: #22262B; --ink-deep: #191c1f; --ink-line: #2c3034; --body: #F4F1EA; --surface: #ffffff; --line: #e6e1d7; --line-soft: #f0eadd; --muted: #5A5F65; --muted-2: #8a8f95; --muted-3: #a4a8ad; --on-dark: #a9adb2; --on-dark-2: #c7cbcf; --on-dark-3: #d7d3ca; --facebook: #1877F2; --facebook-dark: #0f61d4; --display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; --sans: 'Barlow', system-ui, -apple-system, sans-serif; --shell: 1200px; --gutter: 22px; --radius: 6px; --radius-lg: 10px; --shadow-card: 0 10px 26px rgba(34, 38, 43, 0.10); --shadow-panel: 0 12px 30px rgba(34, 38, 43, 0.06); /* Set by JS so 100vh doesn't overflow on mobile browsers with dynamic chrome. */ --vh: 1vh; } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Room for the fixed mobile call button so it never covers footer content. */ padding-bottom: 0; overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.02; } p { margin: 0; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--orange); text-decoration: none; } a:hover { color: var(--orange-dark); } input, select, textarea, button { font-family: inherit; font-size: 100%; } ::placeholder { color: #9aa0a6; opacity: 1; } /* A visible, on-brand focus ring everywhere — the original export had none. */ :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 2px; } .on-dark :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) var(--radius); font-family: var(--display); font-weight: 700; text-transform: uppercase; transition: top .15s ease; } .skip-link:focus { top: 0; color: #fff; } .shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); width: 100%; } .shell--narrow { max-width: 900px; } .shell--mid { max-width: 1100px; } .page { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } /* ========================================================================== Animation ========================================================================== */ @keyframes ndsFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Reveal-on-scroll is enhancement only. The hidden start state is scoped to `.js`, which an inline script in sets. Without JS — or if the script fails, or IntersectionObserver never fires — every .reveal stays plainly visible. Content must never depend on a script running for a human or a crawler to see it. */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border: none; border-radius: 4px; cursor: pointer; text-align: center; /* 44px minimum touch target (WCAG 2.5.5 / Apple HIG). */ min-height: 44px; padding: 13px 22px; font-size: 19px; line-height: 1.1; transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } .btn--orange { background: var(--orange); color: #fff; } .btn--orange:hover { background: var(--orange-dark); color: #fff; } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: #000; color: #fff; } .btn--white { background: #fff; color: var(--green-dark); } .btn--white:hover { background: #f0f0f0; color: var(--green-dark); } .btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.55); } .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; } .btn--facebook { background: var(--facebook); color: #fff; border-radius: var(--radius); font-size: 16px; } .btn--facebook:hover { background: var(--facebook-dark); color: #fff; } .btn--lg { font-size: 20px; padding: 15px 26px; } .btn--block { width: 100%; } .btn .icon { flex: none; } /* ========================================================================== Header ========================================================================== */ .header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); } .header__bar { max-width: var(--shell); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; flex: none; } .brand img { height: 58px; width: 58px; object-fit: contain; } .brand__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .brand__lg { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: var(--orange); text-transform: uppercase; } .brand__sm { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; color: #4a4f55; text-transform: uppercase; } .brand__sm .amp { color: var(--green); } .nav-desktop { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-link { background: none; border: none; cursor: pointer; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px; padding: 12px; color: #4a4f55; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; } .nav-link:hover { color: var(--orange); } .nav-link[aria-current="page"] { border-bottom-color: var(--orange); color: var(--ink); } .nav-call { margin-left: 8px; font-size: 17px; padding: 11px 18px; } .header__mobile { display: none; align-items: center; gap: 10px; margin-left: auto; } .header__mobile .btn { font-size: 16px; padding: 9px 13px; gap: 6px; } .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--ink); border: none; border-radius: var(--radius); cursor: pointer; color: #fff; flex: none; } .hamburger .icon { width: 22px; height: 22px; } .hamburger__close { display: none; } .hamburger[aria-expanded="true"] .hamburger__open { display: none; } .hamburger[aria-expanded="true"] .hamburger__close { display: block; } .nav-mobile { display: none; flex-direction: column; padding: 8px 14px 16px; border-top: 1px solid var(--line-soft); background: #fff; } .nav-mobile.is-open { display: flex; } .nav-mobile a { text-align: left; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 21px; color: var(--ink); padding: 14px 6px; border-bottom: 1px solid var(--line-soft); min-height: 44px; } .nav-mobile a:hover { color: var(--orange); } .nav-mobile a[aria-current="page"] { color: var(--orange); } .nav-mobile a:last-of-type { border-bottom: none; } .nav-mobile .btn { margin-top: 12px; font-size: 20px; padding: 14px; border-radius: var(--radius); } .nav-mobile .btn:hover { color: #fff; } @media (max-width: 900px) { .nav-desktop { display: none; } .header__mobile { display: flex; } .brand img { height: 48px; width: 48px; } .brand__lg { font-size: 19px; } .brand__sm { font-size: 13px; } } @media (max-width: 360px) { .header__bar { gap: 8px; padding: 8px 14px; } .brand img { height: 40px; width: 40px; } .brand__lg { font-size: 16px; } .brand__sm { font-size: 11px; letter-spacing: 0.1em; } .header__mobile .btn { padding: 9px 10px; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: var(--ink); } /* Photo-less hero. Built from the brand palette rather than a flat block of dark: a diagonal base gradient, a warm orange bloom off to the right where the subject of a photo would sit, and a faint green counterweight. Costs nothing to load and keeps the headline the hero of the page. To put a photo back, see "Adding a hero photo" in README.md. */ .hero--flat { background: radial-gradient(120% 140% at 88% 18%, rgba(239, 127, 26, 0.20) 0%, rgba(239, 127, 26, 0) 55%), radial-gradient(90% 120% at 72% 100%, rgba(92, 163, 60, 0.14) 0%, rgba(92, 163, 60, 0) 60%), linear-gradient(135deg, #2b3036 0%, #22262B 45%, #15171a 100%); } /* A hairline of brand colour along the bottom edge, picking up the trust bar directly below it. */ .hero--flat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--orange) 0%, rgba(239, 127, 26, 0.15) 45%, rgba(92, 163, 60, 0.35) 100%); } /* Kept for when a hero photo is added back — see README. */ .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,25,0.90) 0%, rgba(20,22,25,0.72) 45%, rgba(20,22,25,0.30) 100%); pointer-events: none; } .hero__inner { position: relative; max-width: var(--shell); margin: 0 auto; padding: 80px var(--gutter); width: 100%; } .hero__copy { max-width: 660px; animation: ndsFade 0.6s ease both; } .hero h1 { color: #fff; font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 6vw, 78px); letter-spacing: 0.005em; margin-top: 20px; } .hero h1 .o { color: var(--orange); } .hero h1 .g { color: var(--green); } .hero p { color: var(--on-dark-3); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; margin-top: 20px; max-width: 540px; } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; } .eyebrow--green { color: var(--green); } .eyebrow--orange { color: var(--orange); } .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(92, 163, 60, 0.18); border: 1px solid rgba(92, 163, 60, 0.5); color: var(--green-light); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px; padding: 6px 12px; border-radius: 3px; } @media (max-width: 700px) { .hero { min-height: 0; } .hero__inner { padding: 56px var(--gutter); } .hero__scrim { /* Vertical scrim reads better than horizontal on a narrow column. */ background: linear-gradient(180deg, rgba(20,22,25,0.82) 0%, rgba(20,22,25,0.88) 100%); } } @media (max-width: 540px) { .hero__actions .btn { flex: 1 1 100%; } } /* ========================================================================== Trust bar ========================================================================== */ .trustbar { background: var(--orange); } .trustbar__inner { max-width: var(--shell); margin: 0 auto; padding: 18px var(--gutter); display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; align-items: center; list-style: none; } .trustbar li { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 19px; } .trustbar .icon { width: 20px; height: 20px; flex: none; } /* Flex-wrap orphans these on a phone: "Residential & commercial" is too wide to pair with anything, so you get a ragged 2 / 1 / 1. A fixed 2-column grid is predictable at every width. The long one wraps to two lines inside its cell, which reads far better than a stray item on its own row. */ @media (max-width: 700px) { .trustbar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px var(--gutter); } .trustbar li { font-size: 15px; align-items: flex-start; line-height: 1.25; letter-spacing: 0.04em; } .trustbar .icon { width: 17px; height: 17px; margin-top: 1px; } } @media (max-width: 359px) { .trustbar__inner { grid-template-columns: 1fr; } } /* ========================================================================== Sections ========================================================================== */ .section { padding: 72px 0; } .section--tight { padding: 48px 0; } .section--dark { background: var(--ink); } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; } .section--dark p { color: var(--on-dark); } .page-head { background: var(--ink); padding: 64px 0; } .page-head h1 { color: #fff; text-transform: uppercase; font-size: clamp(34px, 5vw, 68px); margin-top: 8px; } .page-head p { color: var(--on-dark); font-size: 19px; line-height: 1.55; margin-top: 14px; max-width: 680px; } @media (max-width: 700px) { .page-head { padding: 44px 0; } .page-head p { font-size: 17px; } .section { padding: 48px 0; } } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; } .section-head__copy { max-width: 640px; } .section-head h2 { font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 4vw, 52px); margin-top: 8px; color: var(--ink); } .section-head p { color: var(--muted); font-size: 18px; line-height: 1.55; margin-top: 14px; } .section-head .btn { white-space: nowrap; } /* ========================================================================== Service cards ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (max-width: 560px) { .card-grid, .card-grid--wide { grid-template-columns: 1fr; } } .svc-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); padding: 22px 20px 20px; transition: box-shadow .2s ease, transform .2s ease; } .svc-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); } .svc-card__num { font-family: var(--display); font-weight: 700; color: var(--line); font-size: 34px; line-height: 1; } .svc-card h3 { text-transform: uppercase; font-weight: 600; font-size: 23px; margin-top: 8px; color: var(--ink); } .svc-card p { color: var(--muted); font-size: 15.5px; line-height: 1.5; margin-top: 8px; } .svc-row { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--orange); border-radius: var(--radius); padding: 24px 22px; display: flex; gap: 16px; align-items: flex-start; transition: box-shadow .2s ease; } .svc-row:hover { box-shadow: var(--shadow-card); } .svc-row__num { flex: none; font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--orange); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--orange-tint); border-radius: var(--radius); } .svc-row h3 { text-transform: uppercase; font-weight: 600; font-size: 24px; color: var(--ink); } .svc-row p { color: var(--muted); font-size: 16px; line-height: 1.55; margin-top: 6px; } /* ========================================================================== Steps ("why us") band ========================================================================== */ .steps { max-width: var(--shell); margin: 0 auto; padding: 64px var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px; list-style: none; } .step__num { font-family: var(--display); font-weight: 700; font-size: 52px; color: var(--orange); line-height: 1; } .step h3 { color: #fff; text-transform: uppercase; font-size: 24px; margin-top: 6px; } .step p { color: var(--on-dark); font-size: 16px; line-height: 1.55; margin-top: 8px; } /* ========================================================================== CTA band ========================================================================== */ .cta-band { background: var(--green); border-radius: var(--radius-lg); padding: 46px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cta-band__copy { max-width: 600px; } .cta-band h2 { color: #fff; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 44px); } .cta-band p { color: #eaf6e2; font-size: 18px; line-height: 1.5; margin-top: 10px; } .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 620px) { .cta-band { flex-direction: column; align-items: flex-start; padding: 32px 24px; } .cta-band__actions { width: 100%; } .cta-band__actions .btn { flex: 1 1 100%; } } .callout { margin-top: 40px; background: #f7f3ec; border: 1px dashed #d8d2c5; border-radius: 8px; padding: 30px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .callout p { font-family: var(--display); text-transform: uppercase; font-size: 26px; color: var(--ink); } .callout .btn { white-space: nowrap; } @media (max-width: 620px) { .callout { padding: 22px; } .callout p { font-size: 22px; } .callout .btn { width: 100%; } } /* ========================================================================== Gallery ========================================================================== */ .gallery-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; } @media (max-width: 980px) { .gallery-layout { grid-template-columns: 1fr; } } /* Auto-growing grid: more photos simply add rows, no layout change needed. */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } /* The first photo gets a hero slot when there are enough images to justify it. */ .photo-grid__item { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: #e9e4da; border: 1px solid var(--line); } .photo-grid__item--feature { grid-column: span 2; aspect-ratio: 4 / 3; } @media (max-width: 560px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .photo-grid__item--feature { grid-column: span 2; } } .photo-btn { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .photo-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .photo-btn:hover img { transform: scale(1.04); } .photo-grid__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(180deg, transparent, rgba(20, 22, 25, 0.78)); color: #fff; font-size: 13px; line-height: 1.35; pointer-events: none; } .gallery-empty { grid-column: 1 / -1; background: #fff; border: 1px dashed #d8d2c5; border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; color: var(--muted); } .fb-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; } .fb-card__head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; } .fb-card__mark { width: 26px; height: 26px; border-radius: 5px; background: var(--facebook); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--display); font-size: 18px; flex: none; } .fb-card__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 18px; color: var(--ink); } .fb-embed { position: relative; width: 100%; overflow: hidden; border-radius: 8px; min-height: 560px; background: #f7f5f0; } .fb-embed iframe { border: none; display: block; width: 100%; height: 760px; } .fb-embed__fallback { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; } .fb-note { color: var(--muted-3); font-size: 13px; text-align: center; margin: 12px 0 4px; } .follow-card { background: var(--orange-tint); border: 1px solid var(--orange-tint-border); border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 16px; } .follow-card__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 20px; color: var(--orange-text); } .follow-card p { color: #7a5a33; font-size: 15px; line-height: 1.55; margin: 6px 0 12px; } /* Lightbox */ /* The `display` must stay scoped to [open]: a bare `display:flex` on the element would override the UA stylesheet's `dialog:not([open]){display:none}` (author styles beat UA styles) and the lightbox would sit open over the gallery on page load. */ .lightbox[open] { display: flex; align-items: center; justify-content: center; } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12, 13, 15, 0.94); padding: 16px; border: none; width: 100%; height: 100%; max-width: none; max-height: none; } .lightbox::backdrop { background: rgba(12, 13, 15, 0.94); } .lightbox img { max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(var(--vh, 1vh) * 100 - 140px); object-fit: contain; border-radius: 8px; margin: 0 auto; } .lightbox__cap { color: #d7d3ca; text-align: center; font-size: 15px; margin-top: 14px; min-height: 20px; } .lightbox__count { color: var(--muted-2); text-align: center; font-size: 13px; margin-top: 4px; font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease; } .lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); } .lightbox__nav--prev { left: 12px; } .lightbox__nav--next { right: 12px; } .lightbox__close { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox__close:hover { background: rgba(255, 255, 255, 0.28); } @media (max-width: 560px) { .lightbox__nav { width: 44px; height: 44px; } .lightbox__nav--prev { left: 4px; } .lightbox__nav--next { right: 4px; } } /* ========================================================================== FAQ accordion ========================================================================== */ .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden; } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 22px; color: var(--ink); } .faq-q:hover { color: var(--orange); } .faq-q__sign { flex: none; font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--orange); line-height: 1; transition: transform .2s ease; } .faq-q[aria-expanded="true"] .faq-q__sign { transform: rotate(45deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .faq-a > div { overflow: hidden; } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a p { color: var(--muted); font-size: 17px; line-height: 1.6; padding: 0 22px 22px; } /* ========================================================================== Contact ========================================================================== */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } .contact-tile { display: flex; align-items: center; gap: 16px; border-radius: var(--radius-lg); padding: 22px 24px; } /* Must set an explicit colour: the icon is `fill="currentColor"`, and without this it inherits the global `a { color: var(--orange) }` and disappears against the orange tile. */ .contact-tile--phone { background: var(--orange); color: #fff; } .contact-tile--phone:hover { background: var(--orange-dark); color: #fff; } .contact-tile--email { background: #fff; border: 1px solid var(--line); margin-top: 14px; color: inherit; transition: box-shadow .2s ease; } .contact-tile--email:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); color: inherit; } .contact-tile .icon { flex: none; } .contact-tile__label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--display); font-weight: 600; } .contact-tile--phone .contact-tile__label { color: #ffe9d4; } .contact-tile--email .contact-tile__label { color: var(--muted-2); } .contact-tile__val { display: flex; flex-direction: column; line-height: 1.15; } .contact-tile--phone .contact-tile__num { color: #fff; font-family: var(--display); font-weight: 700; font-size: 32px; } .contact-tile--email .contact-tile__num { color: var(--ink); font-weight: 600; font-size: 18px; word-break: break-word; } .info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; margin-top: 14px; } .info-card__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 20px; color: var(--ink); } .info-card__title + p { margin-top: 8px; } .info-card p { color: var(--muted); font-size: 16px; line-height: 1.6; } .info-card .info-card__title:not(:first-child) { margin-top: 16px; } .chips { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 14px; padding: 5px 10px; border-radius: 4px; } .chip--green { background: var(--green-tint); color: var(--green-dark); } .chip--orange { background: var(--orange-tint); color: var(--orange-text); } .chip .icon { width: 14px; height: 14px; } .form-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px; box-shadow: var(--shadow-panel); } .form-card h2 { text-transform: uppercase; font-size: 30px; color: var(--ink); } .form-card__sub { color: var(--muted-2); font-size: 15px; margin: 6px 0 20px; } @media (max-width: 480px) { .form-card { padding: 22px 18px; } } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 15px; color: #4a4f55; } /* The label text and its asterisk must live in one element. Loose text nodes in a flex column each become their own line. */ .field__label { display: block; } .field + .field, .field-row + .field { margin-top: 14px; } /* ...but not side by side inside a row. Name and Phone are adjacent siblings, so the rule above pushed Phone 14px lower than Name on desktop. */ .field-row > .field + .field { margin-top: 0; } .field input, .field select, .field textarea { font-family: var(--sans); font-weight: 400; text-transform: none; letter-spacing: normal; /* 16px minimum stops iOS Safari zooming the viewport on focus. */ font-size: 16px; padding: 12px; border: 1px solid #d8d2c5; border-radius: var(--radius); background: #fbfaf7; color: var(--ink); min-height: 44px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { resize: vertical; min-height: 110px; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F65' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239, 127, 26, 0.18); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c0392b; background: #fdf6f5; } .field__req { color: var(--orange); } .field__error { color: #c0392b; font-family: var(--sans); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: normal; min-height: 0; } .field__error:empty { display: none; } /* Honeypot — hidden from humans, tempting to naive bots. */ .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .form-note { color: var(--muted-3); font-size: 13px; text-align: center; margin: 12px 0 0; } .form-status { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); font-size: 15px; line-height: 1.5; display: none; } .form-status.is-error { display: block; background: #fdf1f0; border: 1px solid #f0c8c3; color: #a5342a; } .form-success { text-align: center; padding: 30px 10px; } .form-success h2 { text-transform: uppercase; font-size: 32px; color: var(--ink); margin-top: 10px; } .form-success p { color: var(--muted); font-size: 17px; line-height: 1.55; margin-top: 10px; } .form-success .btn { margin-top: 16px; } .form-success__again { margin-top: 18px; } .form-success__again button { background: none; border: none; color: var(--muted-2); cursor: pointer; text-decoration: underline; font-size: 15px; padding: 8px; } [hidden] { display: none !important; } .btn[aria-busy="true"] { opacity: .75; cursor: progress; } .spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Service area map ========================================================================== */ .map-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; } @media (max-width: 860px) { .map-layout { grid-template-columns: 1fr; } } .map-frame { position: relative; height: 480px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #e9e4da; } @media (max-width: 620px) { .map-frame { height: 360px; } } .map-frame .leaflet-container { height: 100%; width: 100%; background: #e9e4da; font-family: var(--sans); } .map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 15px; gap: 10px; } .leaflet-popup-content-wrapper { border-radius: var(--radius); } .leaflet-popup-content { margin: 12px 14px; font-family: var(--sans); font-size: 14px; line-height: 1.45; } .map-popup__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 17px; color: var(--ink); display: block; } .map-popup__meta { color: var(--muted); } /* Crawlable community list that sits alongside the map. */ .area-list { columns: 2; column-gap: 18px; list-style: none; padding: 0; margin: 14px 0 0; } .area-list li { break-inside: avoid; color: var(--muted); font-size: 15.5px; display: flex; align-items: center; gap: 8px; } .area-list li .icon { color: var(--green); width: 13px; height: 13px; flex: none; } /* The button is the tap target, not the li — padding on the li doesn't help. Bare, these render ~19px tall: under WCAG 2.5.8's 24px floor and far too small to hit with a thumb. Each one pans the map, so they're real controls. */ .area-list button { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; min-height: 44px; display: flex; align-items: center; flex: 1; } .area-list button:hover { color: var(--orange); } /* Two columns hold down to ~360px — the longest name ("Sault Ste. Marie") is ~120px, well inside a 164px column at 390px. Only collapse on very narrow phones, otherwise it's nine rows of mostly-empty line. */ @media (max-width: 359px) { .area-list { columns: 1; } } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--ink-deep); color: var(--on-dark-2); } .footer__inner { max-width: var(--shell); margin: 0 auto; padding: 48px var(--gutter) 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .footer__brand { display: flex; align-items: center; gap: 12px; } .footer__brand img { height: 54px; width: 54px; object-fit: contain; } .footer__brand-lg { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--orange); text-transform: uppercase; } .footer__brand-sm { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; color: #9aa0a6; text-transform: uppercase; } .footer__blurb { font-size: 15px; line-height: 1.6; margin-top: 14px; max-width: 300px; } .footer__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; font-size: 18px; } .footer__links { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; align-items: flex-start; } .footer__links a { color: var(--on-dark-2); font-size: 15px; padding: 7px 0; /* Comfortable tap targets on touch devices without stretching the footer out on desktop, where a mouse doesn't need the extra room. */ min-height: 44px; display: flex; align-items: center; } .footer__links a:hover { color: var(--orange); } .footer__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; align-items: flex-start; } .footer__phone { color: #fff; font-family: var(--display); font-weight: 700; font-size: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; min-height: 44px; } .footer__phone:hover { color: var(--orange); } .footer__email { color: var(--on-dark-2); font-size: 15px; word-break: break-word; padding: 4px 0; min-height: 44px; display: flex; align-items: center; } .footer__email:hover { color: var(--orange); } .footer__legal { border-top: 1px solid var(--ink-line); } .footer__legal-inner { max-width: var(--shell); margin: 0 auto; padding: 16px var(--gutter); font-size: 13px; color: #7c8187; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* Clear the floating call button on mobile. */ @media (max-width: 900px) { .footer__legal-inner { padding-bottom: 84px; } } /* On a phone the three footer blocks stack, and with 44px tap targets that made the footer taller than the viewport — 22% of the homepage. Sit the two link columns side by side instead: same tap targets, ~160px less scroll. */ @media (max-width: 620px) { .footer__inner { /* Uneven on purpose: "Explore" holds one-word links, "Get in touch" holds a 26-character email. Equal columns break it mid-word. */ grid-template-columns: 0.78fr 1.22fr; gap: 24px 14px; padding-top: 36px; } .footer__inner > div:first-child { grid-column: 1 / -1; } .footer__blurb { margin-top: 10px; } .footer__contact { gap: 2px; } .footer__title { font-size: 16px; } .footer__email { font-size: 13.5px; } .footer__phone { font-size: 22px; } } /* ========================================================================== Floating call button — mobile only ========================================================================== */ .call-fab { position: fixed; right: 18px; right: max(18px, env(safe-area-inset-right)); bottom: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; gap: 9px; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 18px; padding: 14px 20px; min-height: 52px; border-radius: 40px; box-shadow: 0 8px 22px rgba(239, 127, 26, 0.45); transition: background-color .15s ease, transform .2s ease, opacity .2s ease; } .call-fab:hover { background: var(--orange-dark); color: #fff; } .call-fab:active { transform: scale(.96); } /* Only show where a tel: link actually does something: touch devices without a fine pointer. Desktop users get the header number instead. */ @media (max-width: 900px) and (pointer: coarse) { .call-fab { display: flex; } } /* Hide it while the mobile menu is open — it has its own call button. */ body.nav-open .call-fab { opacity: 0; pointer-events: none; } body.nav-open { overflow: hidden; }