/* ========================================================================== SNT Plumbing & Heating Ltd Rebuild of the previous Built For Trades site on the Trade Grow Astro stack. Design tokens below are the values the old site actually RESOLVED to at runtime, not the ones declared in its stylesheet: that shipped Built For Trades' own template defaults (a maroon --color-primary: #723147) and injected the real SNT green over the top via an inline style on . ========================================================================== */ :root { --color-primary: #58a53f; --color-primary-dark: #018846; --color-primary-light: #6cb852; --color-surface-dark: #191d24; --color-cert-strip: #a6a6a6; --color-text-on-primary: #ffffff; --color-text-light: #f2f2f2; --color-text-dark: #141414; --color-text-muted: #737373; --font-heading: "Manrope", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --weight-body: 400; --weight-subheading: 600; --weight-heading: 700; --weight-display: 800; --text-hero: clamp(2.25rem, 5vw + 0.5rem, 4rem); --text-h1: clamp(2rem, 3.5vw + 0.5rem, 3rem); --text-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); --text-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem); --text-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); --text-small: 0.875rem; --leading-tight: 1.1; --leading-snug: 1.15; --leading-normal: 1.6; --leading-relaxed: 1.8; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --container-max: 80rem; --container-padding: 1.5rem; --section-padding-y: clamp(3rem, 8vw, 7rem); --gap-sm: 1rem; --gap-md: 1.5rem; --gap-lg: 2rem; --gap-xl: 3rem; --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12); --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --header-height: 96px; } /* Hard rule: set on html so iOS Safari can't paint a white strip below the footer when the toolbar collapses. */ html { background-color: var(--color-primary); -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-body); line-height: var(--leading-normal); color: var(--color-text-light); background-color: var(--color-primary); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } main { flex: 1 0 auto; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-heading); line-height: var(--leading-snug); margin: 0 0 0.5em; } h1 { font-size: var(--text-h1); line-height: var(--leading-tight); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } li { margin-bottom: 0.4em; } :focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: -9999px; top: 0; background: #ffffff; color: var(--color-text-dark); padding: 12px 20px; z-index: 1000; border-radius: 0 0 var(--radius-md) 0; } .skip-link:focus { left: 0; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 1rem; line-height: 1; padding: 0.875rem 1.75rem; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); min-height: 44px; } .btn:hover { transform: translateY(-2px); } /* White on green: the CTA sits on brand-primary surfaces almost everywhere, so a brand-primary button would be invisible. */ .btn-primary { background: #ffffff; color: var(--color-primary-dark); border-color: #ffffff; } .btn-primary:hover { background: var(--color-text-light); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); } .btn-outline { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); } .btn-outline:hover { background: rgba(255, 255, 255, 0.18); border-color: #ffffff; } .btn-dark { background: var(--color-primary-dark); color: #ffffff; border-color: var(--color-primary-dark); } .btn-dark:hover { background: #016b37; border-color: #016b37; } /* WhatsApp keeps its own brand green so it reads as the third, distinct action rather than another version of the site's green. */ .btn-whatsapp { background: #25d366; color: #0b3d1f; border-color: #25d366; } .btn-whatsapp:hover { background: #1fbb57; border-color: #1fbb57; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.38); } /* ---------- top bar ---------- */ .topbar { background: var(--color-primary-dark); color: var(--color-text-light); font-size: var(--text-small); } .topbar-inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.75rem 1.25rem; min-height: 44px; padding-block: 0.4rem; } .topbar-social { display: flex; gap: 0.75rem; margin-right: auto; } .topbar-social a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 999px; color: var(--color-text-light); transition: background-color var(--transition-fast); } .topbar-social a:hover { background: rgba(255, 255, 255, 0.16); } .topbar-social svg { width: 16px; height: 16px; fill: currentColor; } .topbar-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; white-space: nowrap; min-height: 44px; } .topbar-link:hover { text-decoration: underline; } .topbar-link svg { width: 15px; height: 15px; fill: currentColor; flex: none; } .topbar-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.35); } .topbar-quote { border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 0.35rem 0.95rem; background: rgba(255, 255, 255, 0.95); color: var(--color-primary-dark); font-weight: var(--weight-subheading); min-height: 34px; } .topbar-quote:hover { text-decoration: none; background: #ffffff; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 100; background: var(--color-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding-block: 0.75rem; } .header-logo { flex: none; display: block; } .header-logo img { height: 76px; width: auto; border-radius: var(--radius-md); } .header-nav { display: none; } .header-nav ul { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.4rem); list-style: none; margin: 0; padding: 0; } .header-nav a { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-heading); font-weight: var(--weight-subheading); font-size: 0.95rem; color: var(--color-text-light); text-decoration: none; padding: 0.5rem 0.25rem; border-radius: var(--radius-sm); transition: color var(--transition-fast); } .header-nav a:hover { color: #ffffff; text-decoration: underline; } .has-submenu { position: relative; } .has-submenu > a svg { width: 12px; height: 12px; fill: currentColor; } /* Specificity note: `.header-nav ul` above is (0,0,1,1) and would beat a bare `.submenu` (0,0,1,0), leaving every dropdown permanently open. These rules carry the `.header-nav` prefix so they win. */ .header-nav .submenu { position: absolute; top: 100%; left: 0; min-width: 260px; max-height: min(70vh, 520px); overflow-y: auto; background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 0.5rem; display: none; flex-direction: column; gap: 0; z-index: 20; } .header-nav .has-submenu:hover .submenu, .header-nav .has-submenu:focus-within .submenu { display: flex; } .header-nav .submenu li { margin: 0; } .header-nav .submenu a { display: block; color: var(--color-text-dark); font-weight: var(--weight-body); padding: 0.6rem 0.85rem; border-radius: var(--radius-md); } .header-nav .submenu a:hover { background: var(--color-primary); color: #ffffff; text-decoration: none; } .header-cta { display: none; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-md); color: #ffffff; cursor: pointer; } .menu-toggle svg { width: 22px; height: 22px; fill: currentColor; } /* ---------- mobile menu ---------- */ .mobile-menu { display: none; background: #212121; border-top: 1px solid rgba(255, 255, 255, 0.12); max-height: calc(100dvh - 140px); overflow-y: auto; } .mobile-menu.open { display: block; } .mobile-menu ul { list-style: none; margin: 0; padding: 1rem; display: grid; gap: 0.5rem; } .mobile-menu li { margin: 0; } .mobile-menu a { display: block; background: #303030; color: #ffffff; text-decoration: none; padding: 0.9rem 1rem; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: var(--weight-subheading); min-height: 44px; } .mobile-menu a:hover, .mobile-menu a:focus { background: var(--color-primary); } .mobile-submenu { background: #3a3a3a; border-radius: var(--radius-md); padding: 0.5rem; margin-top: 0.25rem; } .mobile-submenu a { background: transparent; font-weight: var(--weight-body); padding: 0.65rem 0.75rem; min-height: 40px; } /* ---------- sections ---------- */ .section { padding-block: var(--section-padding-y); background: var(--color-primary); color: var(--color-text-light); } .section--alt { background: var(--color-primary-dark); } .section--dark { background: var(--color-surface-dark); } .section--tight { padding-block: clamp(2rem, 4vw, 3rem); } /* Eyebrow: dot + short uppercase label above the heading, as the old site had. */ .section-head { margin-bottom: var(--gap-md); } .section-eyebrow { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.75rem; font-weight: var(--weight-subheading); letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.9; margin: 0 0 0.75rem; } .section-eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: none; } .section-head .section-title { margin-bottom: 0; } .section-title { font-size: var(--text-h2); font-weight: var(--weight-heading); margin-bottom: var(--gap-md); } .section-lede { max-width: 60ch; line-height: var(--leading-relaxed); } .section-body { max-width: 70ch; line-height: var(--leading-relaxed); } .section-body > * + * { margin-top: 1em; } /* ---------- hero ---------- */ .hero { background: var(--color-primary); padding-block: clamp(2.5rem, 6vw, 5rem); } .hero-grid { display: grid; gap: var(--gap-xl); align-items: center; } .hero-eyebrow { font-family: var(--font-heading); font-size: 0.85rem; font-weight: var(--weight-heading); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9; margin-bottom: 1rem; } .hero h1 { font-size: var(--text-hero); font-weight: var(--weight-display); line-height: var(--leading-tight); margin-bottom: 1rem; } .hero-subtitle { font-size: clamp(1.05rem, 1.4vw + 0.8rem, 1.35rem); line-height: var(--leading-normal); max-width: 56ch; margin-bottom: var(--gap-lg); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); } .hero-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } /* ---------- cards ---------- */ .card-grid { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; } .card { display: flex; flex-direction: column; background: #ffffff; color: var(--color-text-dark); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); height: 100%; } .card-media { aspect-ratio: 16 / 10; overflow: hidden; background: #e9e9e9; } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h3 { color: var(--color-text-dark); margin-bottom: 0.5rem; } .card-body p { color: var(--color-text-muted); line-height: var(--leading-normal); } .card-link { margin-top: auto; padding-top: 1rem; font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--color-primary-dark); text-decoration: none; align-self: flex-start; } .card-link:hover { text-decoration: underline; } /* feature list, the plain text triples used through the service pages */ .feature-grid { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; } .feature { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-lg); padding: 1.5rem; } .feature h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .feature p { line-height: var(--leading-normal); } .feature-media { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.12); } .feature-media img { width: 100%; height: 100%; object-fit: cover; } .section-image { border-radius: var(--radius-lg); width: 100%; } /* Numbered process list, matching the old site's divided rows rather than free-floating cards: each step is separated by a hairline, with a counter badge in the margin. */ .steps { list-style: none; counter-reset: step; margin: var(--gap-lg) 0 0; padding: 0; display: block; } .steps .step { counter-increment: step; position: relative; margin: 0; padding: 1.25rem 0 1.25rem 3.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.22); background: none; border-radius: 0; } .steps .step:last-child { border-bottom: 0; padding-bottom: 0; } .steps .step:first-child { padding-top: 0; } .steps .step::before { content: counter(step); position: absolute; left: 0; top: 1.25rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55); font-family: var(--font-heading); font-size: 0.85rem; font-weight: var(--weight-heading); line-height: 1; } .steps .step:first-child::before { top: 0; } .steps .step h3 { font-size: 1.1rem; margin-bottom: 0.35rem; } .steps .step p { line-height: var(--leading-normal); margin: 0; } /* ---------- split text + image ---------- */ .split { display: grid; gap: var(--gap-xl); align-items: center; } .split-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ---------- accreditation strip ---------- */ .cert-strip { background: var(--color-cert-strip); padding-block: clamp(2rem, 4vw, 3rem); } .cert-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); } .cert-strip img { height: clamp(48px, 7vw, 72px); width: auto; max-width: 170px; object-fit: contain; } /* ---------- FAQ ---------- */ .faq-list { display: grid; gap: 0.75rem; max-width: 60rem; } .faq-item { background: #ffffff; color: var(--color-text-dark); border-radius: var(--radius-lg); overflow: hidden; } .faq-item > summary { cursor: pointer; list-style: none; padding: 1.15rem 1.35rem; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--color-primary-dark); flex: none; } .faq-item[open] > summary::after { content: "\2013"; } .faq-answer { padding: 0 1.35rem 1.35rem; color: var(--color-text-muted); line-height: var(--leading-relaxed); } /* ---------- reviews ---------- */ .reviews-grid { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; } .reviews-card { background: #ffffff; color: var(--color-text-dark); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0.85rem; } .reviews-stars { display: flex; gap: 2px; color: #f5a623; } .reviews-stars svg { width: 18px; height: 18px; fill: currentColor; } .reviews-text { line-height: var(--leading-relaxed); color: var(--color-text-dark); flex: 1 1 auto; } .reviews-meta { display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-small); color: var(--color-text-muted); border-top: 1px solid #ececec; padding-top: 0.85rem; } .reviews-meta img { width: 18px; height: 18px; } .reviews-name { font-weight: var(--weight-heading); color: var(--color-text-dark); } /* ---------- gallery ---------- */ .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-md); } .gallery figure { margin: 0; flex: 0 0 min(320px, 100%); } .gallery img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* ---------- CTA band ---------- */ .cta-band { background: var(--color-primary-dark); padding-block: var(--section-padding-y); text-align: center; } .cta-band h2 { font-size: var(--text-h2); margin-bottom: 1rem; } .cta-band p { max-width: 55ch; margin-inline: auto; margin-bottom: var(--gap-lg); line-height: var(--leading-relaxed); } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); justify-content: center; } /* ---------- contact ---------- */ .contact-grid { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; } .contact-card { background: #ffffff; color: var(--color-text-dark); border-radius: var(--radius-lg); padding: 1.75rem; text-align: center; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0.6rem; } .contact-card h3 { margin: 0; color: var(--color-text-dark); } .contact-card p { color: var(--color-text-muted); margin: 0; } .contact-card .btn { margin-top: auto; align-self: center; } .area-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .area-pill { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.9rem; text-decoration: none; white-space: nowrap; } .area-pill:hover { background: rgba(255, 255, 255, 0.24); } .enquiry-form { display: grid; gap: 1rem; max-width: 42rem; } .enquiry-form label { font-family: var(--font-heading); font-weight: var(--weight-subheading); font-size: 0.95rem; display: grid; gap: 0.4rem; } .enquiry-form input, .enquiry-form select, .enquiry-form textarea { font: inherit; padding: 0.8rem 0.9rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.35); background: #ffffff; color: var(--color-text-dark); width: 100%; min-height: 44px; } .enquiry-form textarea { min-height: 140px; resize: vertical; } /* ---------- article ---------- */ .article { max-width: 48rem; margin-inline: auto; } .article-meta { font-size: var(--text-small); opacity: 0.9; margin-bottom: var(--gap-md); } .article-hero img { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--gap-lg); max-height: 420px; object-fit: cover; } .article-body { line-height: var(--leading-relaxed); } .article-body h2 { margin-top: 2rem; } .article-body h3 { margin-top: 1.5rem; font-size: 1.25rem; } .article-body ul { padding-left: 1.25em; } .breadcrumb { font-size: var(--text-small); opacity: 0.9; margin-bottom: 1rem; } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* ---------- footer ---------- */ .footer { background: var(--color-surface-dark); color: var(--color-text-light); padding-block: var(--section-padding-y) 0; margin-top: auto; } .footer-grid { display: grid; gap: var(--gap-xl); grid-template-columns: 1fr; padding-bottom: var(--gap-xl); } .footer h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .footer a { color: var(--color-text-light); text-decoration: none; } .footer a:hover { text-decoration: underline; } .footer-brand img { height: 120px; width: auto; border-radius: var(--radius-md); margin-bottom: 1rem; } .footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; } .footer-social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.08); } .footer-social a:hover { background: rgba(255, 255, 255, 0.18); } .footer-social svg { width: 18px; height: 18px; fill: #ffffff; } .footer-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; } .footer-hours dt { opacity: 0.85; } .footer-hours dd { margin: 0; text-align: right; } .footer-certs { border-top: 1px solid rgba(255, 255, 255, 0.28); padding-block: var(--gap-lg); text-align: center; font-size: var(--text-small); opacity: 0.9; } .footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.28); padding-block: var(--gap-md); font-size: var(--text-small); opacity: 0.85; line-height: var(--leading-normal); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.28); padding-block: var(--gap-md) var(--gap-lg); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: center; text-align: center; font-size: var(--text-small); } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* ---------- 404 / support pages ---------- */ .support-page { padding-block: clamp(3rem, 8vw, 6rem); } .support-page .container { max-width: 48rem; } /* ========================================================================== Breakpoints. Mobile styles stay inside max-width blocks and desktop styles inside min-width blocks, so neither can silently overwrite the other. ========================================================================== */ @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-grid { grid-template-columns: 1.1fr 0.9fr; } .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } @media (min-width: 1100px) { .header-nav { display: block; } .header-cta { display: inline-flex; } .menu-toggle { display: none; } .mobile-menu { display: none !important; } } @media (max-width: 1099px) { .header-logo img { height: 60px; } } @media (max-width: 767px) { :root { --container-padding: 1.15rem; } .header-logo img { height: 52px; } .topbar-inner { justify-content: center; } .topbar-social { margin-right: 0; } .topbar-divider { display: none; } .hero { padding-block: clamp(2rem, 8vw, 3rem); } .hero-actions .btn { width: 100%; } .footer-brand img { height: 96px; } .footer-hours dd { text-align: left; } .gallery figure { flex: 0 0 100%; } .cta-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .btn:hover { transform: none; } } /* ========================================================================== Scroll reveal. Matches the previous site's behaviour exactly: sections start 20px low and transparent, then fade up over 0.5s ease-out once scrolled into view. Values were read off the live site's computed styles rather than eyeballed. The no-JS guard matters: without it, a visitor whose JavaScript fails would get opacity:0 on every section and a blank page. Content only starts hidden once main.js has confirmed it is running. ========================================================================== */ /* Same 0.5s ease-out fade-and-rise the old site had, built so it cannot fail invisible. The default state here is VISIBLE. Nothing is hidden by the stylesheet. main.js adds .is-armed only to elements that are below the fold, and removes it as each scrolls into view. So the code that hides an element is the same code that shows it again, and anything that stops that code (no JS, an error, an observer that never fires) leaves the page fully readable rather than blank. Arming happens after parse, but only ever to content below the fold, so the change is off screen and a visitor never sees it. */ .scroll-reveal { transition: opacity 0.5s ease-out var(--scroll-reveal-delay, 0s), transform 0.5s ease-out var(--scroll-reveal-delay, 0s); } .scroll-reveal.is-armed { opacity: 0; transform: translateY(20px); } /* Arming has to be instant. Without this the element transitions from visible to hidden over 0.5s the moment it is armed, so below-fold content fades out and then fades back in on scroll. main.js sets this, forces a reflow, then removes it, so only the reveal direction is animated. */ .scroll-reveal.no-anim { transition: none !important; } @media (prefers-reduced-motion: reduce) { .scroll-reveal, .scroll-reveal.is-armed { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Homepage rebuild additions (match the original section-for-section) ========================================================================== */ /* Featured Google review card, sits directly under the hero on a green band. */ .review-featured { background: #ffffff; color: var(--color-text-dark); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 42rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .review-featured-head { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.5rem; } .review-featured-stars { display: flex; gap: 3px; color: #f5a623; } .review-featured-stars svg { width: 22px; height: 22px; fill: currentColor; } .review-featured-google { width: 24px; height: 24px; } .review-featured-heading { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 1.25rem; margin-bottom: 0.85rem; color: var(--color-text-dark); } .review-featured-quote { margin: 0; border: 0; padding: 0; line-height: var(--leading-relaxed); color: var(--color-text-dark); } /* Why Choose Us grid sits inside the split's right column: two columns. */ .split .feature-grid { grid-template-columns: 1fr; } @media (min-width: 640px) { .split .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* About section tick list. */ .ticklist { list-style: none; margin: var(--gap-lg) 0 0; padding: 0; display: grid; gap: 0.75rem; } .ticklist li { position: relative; padding-left: 1.9rem; line-height: var(--leading-normal); color: var(--color-text-light); } .ticklist li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.72rem no-repeat, var(--color-primary-light); } /* Floating WhatsApp button, persistent bottom-left as the original had. */ .whatsapp-float { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.05rem; border-radius: 999px; background: #25d366; color: #ffffff; font-weight: 600; font-size: 0.95rem; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32); color: #fff; } .whatsapp-float svg { flex: none; } @media (max-width: 480px) { .whatsapp-float span { display: none; } .whatsapp-float { padding: 0.85rem; } }