@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; /* stretch (not start) so the Facebook column grows to match the photo column's height — the feed then fills that space via flex below. */ align-items: stretch; } @media (max-width: 980px) { .gallery-layout { grid-template-columns: 1fr; } } .gallery-photos { min-width: 0; } /* 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; /* Flex column so the feed can flex:1 and absorb the height the grid gives this column, leaving the note and "Visit Facebook" card pinned below it. */ display: flex; flex-direction: column; } .fb-card__head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; flex: none; } .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; /* Grow to fill whatever height the stretched column leaves after the header, note and follow card. gallery.js reads this height and asks Facebook to render its feed to match, so the plugin fills rather than leaving a gap. */ flex: 1 1 auto; } .fb-embed iframe { border: none; display: block; width: 100%; height: 100%; } /* Stacked (single-column) below the breakpoint: no column to match, so give the feed a sensible fixed height instead of stretching. */ @media (max-width: 980px) { .fb-embed { flex: none; height: 620px; } } .fb-note { flex: none; } .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: 14px; flex: none; } .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; }