/* ── STYLE.CSS ── */ /* Shared styles used across all 10 service pages. */ /* index.html also loads this file, with home.css loaded after for homepage-specific overrides. */ /* Fonts (Playfair Display + DM Sans) are loaded via Google Fonts in each HTML file's . */ /* ── VARIABLES ── */ /* Global colour tokens used throughout both CSS files. Change a value here to update it everywhere. */ :root { --green-dark: #2A6229; --green-mid: #3d8b3c; --green-light: #5aab59; --cream: #F4EFE3; --cream-dark: #e8e0d0; --white: #ffffff; --text-dark: #1a2e1a; --text-mid: #4a5e4a; } /* ── RESET ── */ /* Zero out margins/padding and use border-box sizing on everything. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text-dark); overflow-x: hidden; } /* ── NAV ── */ /* Fixed navbar — stays at the top as the user scrolls. Height is 72px. */ /* .nav-logo wraps the tree image + business name + service areas text. */ /* .nav-logo-areas is hidden on mobile (≤768px) to save space. */ /* .nav-cta is the green Call Now button on the right. */ /* nav.scrolled adds a drop shadow triggered by JavaScript on scroll. */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(244, 239, 227, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cream-dark); padding: 0 5%; display: flex; align-items: center; justify-content: space-between; height: 72px; transition: box-shadow 0.3s; } nav.scrolled { box-shadow: 0 2px 20px rgba(42,98,41,0.12); } .nav-logo { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; line-height: 1.2; } /* picture wrapper must also be height-constrained to prevent the logo image rendering at full size */ .nav-logo picture { display: block; height: 44px; flex-shrink: 0; } .nav-logo-img { height: 44px; width: auto; display: block; } .nav-logo-text { display: flex; flex-direction: column; } .nav-logo-name { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 900; color: var(--green-dark); } /* Service areas text — small uppercase below the business name, hidden on mobile */ .nav-logo-areas { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.07em; color: var(--text-mid); text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--text-mid); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--green-dark); } .nav-links a.nav-cta { background: var(--green-dark); color: var(--white); padding: 0.55rem 1.3rem; border-radius: 4px; font-weight: 500; transition: background 0.2s; } .nav-links a.nav-cta:hover { background: var(--green-mid); color: var(--white); } /* Hamburger — hidden on desktop/tablet, shown on mobile */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--green-dark); transition: 0.3s; } /* ── BREADCRUMB ── */ /* "Home › Service Name" trail shown at the top of every service page. */ /* Top padding (92px) clears the fixed 72px navbar. */ .breadcrumb { padding: 92px 5% 0; font-size: 0.82rem; color: var(--text-mid); } .breadcrumb a { color: var(--text-mid); text-decoration: none; } .breadcrumb a:hover { color: var(--green-dark); } .breadcrumb span { margin: 0 0.4rem; } /* ── PAGE HERO ── */ /* Hero section used on service pages (not the homepage). */ /* Includes the green badge, h1 heading, intro paragraph, and CTA buttons. */ .page-hero { padding: 2.5rem 5% 5rem; max-width: 700px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(42,98,41,0.1); color: var(--green-dark); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 100px; margin-bottom: 1.5rem; } /* Green dot before the badge text */ .hero-badge::before { content: ''; width: 7px; height: 7px; background: var(--green-mid); border-radius: 50%; } /* h1 size is shared across homepage and service pages */ h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 900; line-height: 1.1; color: var(--text-dark); margin-bottom: 1.25rem; } /* Italic green text used inside h1 (e.g. "in Bromsgrove") */ h1 em { font-style: italic; color: var(--green-dark); } .page-intro { font-size: 1.05rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 2rem; font-weight: 300; } /* Wraps the primary and secondary CTA buttons */ .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } /* Green filled button — used for WhatsApp quote and main CTAs */ .btn-primary { background: var(--green-dark); color: var(--white); padding: 0.85rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: background 0.2s, transform 0.2s; display: inline-block; } .btn-primary:hover { background: var(--green-mid); transform: translateY(-1px); } /* Text-only link button with arrow — used for "Call 07904 096460 →" */ .btn-secondary { color: var(--green-dark); font-weight: 500; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s; } .btn-secondary:hover { gap: 12px; } .btn-secondary::after { content: '→'; } /* ── SECTIONS ── */ /* Default padding for all sections. homepage matches this via home.css. */ section { padding: 80px 5%; } /* Small uppercase label above h2 headings (e.g. "WHY CHOOSE US") */ .section-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 0.75rem; } h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--text-dark); line-height: 1.2; } h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; } /* ── SERVICES INCLUDED ── */ /* Dark green section on service pages listing what's included in that service. */ #included { background: var(--green-dark); } #included .section-label { color: var(--green-light); } #included h2 { color: var(--white); margin-bottom: 3rem; } .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5px; } .service-card { flex: 1 1 240px; max-width: 400px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 2.5rem 2rem; transition: background 0.3s; text-align: center; } .service-card:hover { background: rgba(255,255,255,0.08); } .service-icon { font-size: 2rem; margin-bottom: 1.25rem; display: block; } .service-card h3 { color: var(--white); margin-bottom: 0.75rem; } .service-card p { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.7; font-weight: 300; } /* Photo grid used on service pages — 3 columns by default */ .section-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } .section-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; display: block; } /* 2x2 grid modifier — applied to garden clearance pages which have 4 photos instead of 3 */ .section-photos--four { grid-template-columns: repeat(2, 1fr); } /* ── AREAS ── */ /* "Areas We Cover" section with location pill badges. */ #areas { background: var(--cream-dark); } #areas h2 { margin-bottom: 1rem; } #areas > p { color: var(--text-mid); font-size: 1rem; line-height: 1.8; font-weight: 300; margin-bottom: 2rem; max-width: 680px; } /* Auto-fit grid so pills wrap naturally on smaller screens */ .areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 2rem; } .area-pill { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 4px; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 500; color: var(--text-dark); } .area-pill::before { content: '📍'; font-size: 1rem; } /* ── WHY US ── */ /* 2-column section — text left, image right on service pages / Shapo reviews widget on homepage. */ /* align-items: center vertically centres landscape images alongside the text column. */ /* Homepage overrides gap to 5rem in home.css. */ #why { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .why-text > p { color: var(--text-mid); font-size: 1rem; line-height: 1.8; font-weight: 300; margin-top: 1.25rem; margin-bottom: 2rem; } /* 2-column feature bullet list (Fully insured, Free quotes etc.) */ .why-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .feature { display: flex; gap: 12px; align-items: flex-start; } .feature-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-mid); margin-top: 6px; flex-shrink: 0; } .feature p { font-size: 0.9rem; margin: 0; color: var(--text-dark); font-weight: 500; } /* Green tinted badge showing coverage area at the bottom of the Why Us section */ .coverage-badge { margin-top: 2rem; background: rgba(42,98,41,0.08); border: 1px solid rgba(42,98,41,0.15); border-radius: 4px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 12px; } .coverage-badge .pin { font-size: 1.3rem; } .coverage-badge div { font-size: 0.85rem; color: var(--text-mid); line-height: 1.5; } .coverage-badge strong { display: block; color: var(--text-dark); font-size: 0.9rem; } /* Service page why-us image */ #why img { width: 100%; border-radius: 4px; display: block; } /* ── OTHER SERVICES ── */ /* Link cards at the bottom of each service page pointing to the other services. */ #other-services h2 { margin-bottom: 2rem; } .other-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; } .other-card { flex: 1 1 200px; max-width: 320px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 4px; padding: 1.5rem; text-decoration: none; color: var(--text-dark); transition: border-color 0.2s, transform 0.2s; display: block; text-align: center; } .other-card:hover { border-color: var(--green-mid); transform: translateY(-2px); } .other-card .other-icon { font-size: 1.5rem; margin-bottom: 0.75rem; display: block; } .other-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; } .other-card p { font-size: 0.85rem; color: var(--text-mid); font-weight: 300; line-height: 1.5; } /* ── FAQ ── */ /* Accordion-style FAQ section. Open/close toggled by JavaScript adding the .open class. */ #faq { background: var(--cream-dark); } #faq h2 { margin-bottom: 2.5rem; } .faq-list { max-width: 760px; display: flex; flex-direction: column; margin-top: 2rem; } .faq-item { border-bottom: 1px solid var(--cream-dark); } .faq-item:first-child { border-top: 1px solid var(--cream-dark); } .faq-q { width: 100%; background: none; border: none; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 500; color: var(--text-dark); gap: 1rem; } /* + icon rotates to × when open */ .faq-q::after { content: '+'; font-size: 1.4rem; color: var(--green-mid); flex-shrink: 0; transition: transform 0.25s; } .faq-item.open .faq-q::after { transform: rotate(45deg); } .faq-a { display: none; padding: 0 0 1.25rem; font-size: 0.95rem; color: var(--text-mid); line-height: 1.75; font-weight: 300; } .faq-item.open .faq-a { display: block; } /* ── CTA BANNER ── */ /* Full-width dark green call-to-action strip near the bottom of every service page. */ #cta { background: var(--green-dark); text-align: center; padding: 80px 5%; } #cta h2 { color: var(--white); margin-bottom: 1rem; } #cta p { color: rgba(255,255,255,0.65); font-size: 1rem; font-weight: 300; margin-bottom: 2rem; } /* Button row inside the CTA banner — flex row, wraps on small screens */ #cta .cta-actions { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; align-items: center; } /* White button variant used inside the dark green CTA banner */ #cta .btn-primary { background: var(--white); color: var(--green-dark); font-weight: 600; } #cta .btn-primary:hover { background: var(--cream); } /* Ghost text link used alongside the CTA button (e.g. "or call us") */ #cta .btn-ghost { color: rgba(255,255,255,0.8); font-weight: 500; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; } #cta .btn-ghost:hover { color: var(--white); } /* ── FOOTER ── */ /* 3-column dark footer — brand/description, service links, contact details. */ /* Collapses to single column on mobile. */ footer { background: var(--text-dark); color: rgba(255,255,255,0.6); padding: 3rem 5%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; } footer p { font-size: 0.85rem; line-height: 1.7; margin-top: 0.75rem; } .footer-links h4, .footer-contact h4 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 1rem; } .footer-links a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.5rem; transition: color 0.2s; } .footer-links a:hover { color: var(--cream); } .footer-contact a { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.6rem; transition: color 0.2s; } .footer-contact a:hover { color: var(--cream); } .footer-location { font-size: 0.82rem; } /* Copyright bar spans all 3 columns */ .footer-bottom { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.5rem; text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.3); } /* ── ANIMATIONS ── */ /* Scroll reveal — elements start invisible and fade up into view. */ /* JavaScript adds .visible when the element enters the viewport. */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ── TABLET (max-width: 1024px) ── */ /* Covers iPads and smaller laptops. Nav logo shrinks, Call Now button tightens. */ @media (max-width: 1024px) { .nav-logo-name { font-size: 1.1rem; } /* picture element must also shrink — without this the image ignores the img height rule */ .nav-logo picture { height: 36px; } .nav-logo-img { height: 36px; } .nav-links { gap: 0.9rem; } .nav-links a.nav-cta { padding: 0.45rem 0.9rem; font-size: 0.85rem; } } /* ── MOBILE (max-width: 768px) ── */ /* Nav collapses to hamburger menu. Why Us and footer stack to single column. */ /* .nav-links.open is toggled by JavaScript when the hamburger is tapped. */ @media (max-width: 768px) { .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: var(--cream); padding: 1.5rem 5%; border-bottom: 1px solid var(--cream-dark); gap: 1rem; } .nav-hamburger { display: flex; } /* Areas text hidden on mobile — too long to fit beside the logo */ .nav-logo-areas { display: none; } .nav-logo-name { font-size: 1.15rem; line-height: 1.1; } /* Why Us stacks to single column */ #why { grid-template-columns: 1fr; gap: 2rem; } .why-features { grid-template-columns: 1fr; } /* Footer stacks to single column */ footer { grid-template-columns: 1fr; gap: 2rem; } /* Photo grid drops to single column */ .section-photos { grid-template-columns: 1fr; } }