/* Fonts are loaded via in each page's (with preconnect). The previous render-blocking @import here duplicated that request and delayed first paint — removed intentionally. */ :root { --bg: #090f08; --bg2: #0d160b; --bg-alt: #0b1309; --accent: #6fa050; --accent2: #8cbe5a; --accent-dim: rgba(111,160,80,0.1); --accent-line: rgba(111,160,80,0.18); --accent-border: rgba(111,160,80,0.3); --text: #ecede8; --text-muted: rgba(236,237,232,0.48); --text-dim: rgba(236,237,232,0.22); --border: rgba(111,160,80,0.12); --border-mid: rgba(111,160,80,0.25); --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(111,160,80,0.016) 0px, rgba(111,160,80,0.016) 1px, transparent 1px, transparent 40px); } /* === NAV === */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; background: rgba(9,15,8,0.96); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } nav::after { content: ''; position: absolute; bottom: 0; left: 5vw; right: 5vw; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.28; } .nav-logo { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: 0.01em; } .nav-logo em { font-style: italic; color: var(--accent2); } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-links a { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: var(--accent2); } .nav-cta { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent-border) !important; padding: 0.42rem 1.2rem !important; border-radius: 2px !important; transition: background 0.2s, border-color 0.2s !important; } .nav-cta:hover { background: var(--accent-dim) !important; border-color: var(--accent) !important; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 4px; } @media (max-width: 860px) { .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(9,15,8,0.98); padding: 1.5rem 5vw 2rem; gap: 1.25rem; border-bottom: 1px solid var(--border); } .nav-links.open { display: flex; } .nav-links a { font-size: 0.9rem; } .nav-toggle { display: block; } } /* === HERO V2 (see bottom of file) === */ /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0.88rem 2rem; border-radius: 2px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; border: 1px solid transparent; } .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-primary:hover { background: var(--accent2); border-color: var(--accent2); } .btn-secondary { background: transparent; color: var(--accent); border-color: var(--accent-border); } .btn-secondary:hover { background: var(--accent-dim); border-color: var(--accent); } .btn-white { background: var(--text); color: var(--bg); border-color: var(--text); } .btn-white:hover { background: rgba(236,237,232,0.85); } /* === SECTIONS === */ section { position: relative; z-index: 2; padding: 5.5rem 5vw; } section.alt { background: var(--bg2); } .section-label { font-size: 0.66rem; letter-spacing: 0.38em; text-transform: uppercase; color: rgba(111,160,80,0.6); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.6rem; } .section-label::before { content: ''; width: 18px; height: 1px; background: var(--accent-border); } .section-title { font-family: var(--serif); font-size: clamp(2.1rem, 4.5vw, 3.5rem); font-weight: 700; color: var(--text); line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 1.25rem; } .section-title em { font-style: italic; color: var(--accent2); } .section-lead { font-size: 1.02rem; color: var(--text-muted); max-width: 60ch; line-height: 1.85; } /* === GRIDS === */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 2.5rem; } .three-col { grid-template-columns: 1fr 1fr; } .four-col { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .three-col, .four-col { grid-template-columns: 1fr; } section { padding: 3.5rem 5vw; } } /* === CARDS === */ .card { background: var(--bg-alt); border: 1px solid var(--border); padding: 1.85rem; border-radius: 2px; transition: border-color 0.2s; } .card:hover { border-color: var(--accent-border); } .card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; } .card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; } .card-icon { font-size: 1.5rem; margin-bottom: 0.9rem; } /* Pricing figure inside cards (used on /affordable-lawn-mowing) */ .card-num { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; font-style: italic; color: var(--accent2); line-height: 1; margin-bottom: 0.9rem; } /* === PAGE HEADER === */ .page-header { padding: calc(var(--nav-h) + 5rem) 5vw 5rem; border-bottom: 1px solid var(--border); position: relative; z-index: 2; } .page-header h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; color: var(--text); line-height: 0.93; letter-spacing: -0.01em; margin-bottom: 1.25rem; max-width: 20ch; } .page-header h1 em { font-style: italic; color: var(--accent2); } .page-header p { font-size: 1rem; color: var(--text-muted); max-width: 54ch; line-height: 1.85; margin-bottom: 0.5rem; } .page-header .btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; } /* === BREADCRUMB === */ .breadcrumb { position: relative; z-index: 2; padding: 0.9rem 5vw; font-size: 0.76rem; color: var(--text-dim); display: flex; gap: 0.5rem; align-items: center; border-bottom: 1px solid var(--border); } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span { opacity: 0.4; } /* === FAQ === */ .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--text); text-align: left; gap: 1rem; } .faq-q svg { flex-shrink: 0; color: var(--accent); transition: transform 0.25s; } .faq-q.open svg { transform: rotate(45deg); } .faq-a { display: none; padding: 0 0 1.25rem; font-size: 0.88rem; color: var(--text-muted); line-height: 1.85; } .faq-a.open { display: block; } .faq-a a { color: var(--accent); text-decoration: none; } .faq-a a:hover { color: var(--accent2); } /* === KEYWORD CHIPS === */ .kw-cloud { display: flex; flex-wrap: wrap; gap: 0.55rem; } .kw-chip { background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent2); font-size: 0.76rem; padding: 0.28rem 0.8rem; border-radius: 2px; letter-spacing: 0.03em; } /* === SUBURB MESH === */ .mesh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 0.85rem; margin-top: 2rem; } .mesh-card { display: flex; flex-direction: column; gap: 0.15rem; background: var(--bg-alt); border: 1px solid var(--border); padding: 1.2rem 1.35rem; text-decoration: none; transition: border-color 0.2s; border-radius: 2px; } .mesh-card:hover { border-color: var(--accent-border); } .mesh-card-label { font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(111,160,80,0.5); } .mesh-card-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; color: var(--text); line-height: 1.2; } .mesh-card-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.2rem; } /* === PROCESS STEPS === */ .process-step { display: flex; gap: 2rem; align-items: flex-start; padding: 2rem 0; border-bottom: 1px solid var(--border); } .process-step:first-child { padding-top: 0; } .process-step:last-child { border-bottom: none; } .step-num { font-family: var(--serif); font-size: 3rem; font-weight: 700; font-style: italic; color: var(--accent2); opacity: 0.45; line-height: 1; flex-shrink: 0; width: 3rem; } .step-body h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: 0.45rem; } .step-body p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.85; } /* === CTA BAND === */ .cta-band { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5.5rem 5vw; text-align: center; position: relative; z-index: 2; } .cta-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 70% at 50% 50%, rgba(111,160,80,0.05) 0%, transparent 65%); } .cta-band .section-lead { margin: 0 auto 2.5rem; } .cta-band .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* === STATS BAR === */ .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); margin-top: 3rem; } .stat-item { padding: 2rem 1.75rem; border-right: 1px solid var(--border); } .stat-item:last-child { border-right: none; } .stat-val { font-family: var(--serif); font-size: 2.8rem; font-weight: 700; font-style: italic; color: var(--accent2); line-height: 1; } .stat-label { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.35rem; } /* === TESTIMONIAL === */ .testimonial { border: 1px solid var(--border); padding: 2rem 2.25rem; border-radius: 2px; background: var(--bg-alt); } .testimonial .stars { color: var(--accent2); font-size: 0.85rem; margin-bottom: 0.75rem; letter-spacing: 3px; } .testimonial blockquote { font-family: var(--serif); font-size: 1.12rem; font-style: italic; color: var(--text); line-height: 1.75; margin-bottom: 0.9rem; } .testimonial cite { font-size: 0.78rem; color: var(--text-muted); font-style: normal; } /* === MESH LIST === */ .mesh-list { list-style: none; display: flex; flex-direction: column; } .mesh-list li { border-bottom: 1px solid var(--border); } .mesh-list a { display: block; padding: 0.8rem 0; font-size: 0.88rem; color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .mesh-list a:hover { color: var(--accent2); } /* === FOOTER === */ footer { position: relative; z-index: 2; padding: 4rem 5vw 2.5rem; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; } .footer-logo { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--text); text-decoration: none; display: block; margin-bottom: 0.75rem; } .footer-logo em { font-style: italic; color: var(--accent2); } .footer-copy { font-size: 0.78rem; color: var(--text-dim); line-height: 1.9; } .footer-copy a { color: var(--text-dim); text-decoration: none; } .footer-copy a:hover { color: var(--accent); } .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 2.5rem; } .footer-nav a { font-size: 0.78rem; color: var(--text-muted); text-decoration: none; } .footer-nav a:hover { color: var(--accent2); } @media (max-width: 640px) { footer { grid-template-columns: 1fr; } } /* === SCROLLBAR === */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 3px; } /* ── Cinematic hero canvas — shared across all pages ── */ .page-header { position: relative; overflow: hidden; background: #080e07; } #lawnCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } #grainCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.10; mix-blend-mode: overlay; z-index: 0; } .hero-vignette, .hero-text-scrim, .hero-light-rays { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hero-vignette { background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 25%, rgba(0,0,0,0.65) 100%), linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 18%, transparent 72%, rgba(0,0,0,0.6) 100%); } .hero-text-scrim { background: linear-gradient(90deg, rgba(8,14,7,0.96) 0%, rgba(8,14,7,0.88) 22%, rgba(8,14,7,0.60) 42%, rgba(8,14,7,0.22) 62%, rgba(8,14,7,0) 82%); } .hero-light-rays { background: radial-gradient(ellipse 40% 55% at 88% 8%, rgba(255,220,140,0.07) 0%, transparent 55%), radial-gradient(circle at 92% 4%, rgba(255,235,170,0.13) 0%, transparent 22%); mix-blend-mode: screen; } /* Page-header content must sit above canvas layers */ .page-header > *:not(#lawnCanvas):not(#grainCanvas):not(.hero-vignette):not(.hero-text-scrim):not(.hero-light-rays) { position: relative; z-index: 3; } /* ============================================ HERO V2 — fresh rebuild, locked-down height ============================================ */ .herov2 { position: relative; box-sizing: border-box; width: 100%; background: #080e07; overflow: hidden; padding: calc(var(--nav-h) + 2.5rem) 5vw 3rem; display: block; } .herov2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; } .herov2-grain { opacity: 0.10; mix-blend-mode: overlay; } .herov2-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,14,7,0.96) 0%, rgba(8,14,7,0.86) 24%, rgba(8,14,7,0.55) 46%, rgba(8,14,7,0.18) 66%, rgba(8,14,7,0) 84%); } .herov2-inner { position: relative; z-index: 2; max-width: 680px; } .herov2-eyebrow { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.38em; color: rgba(111,160,80,0.7); text-transform: uppercase; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .herov2-eyebrow::after { content: ''; flex: 0 0 28px; height: 1px; background: var(--accent-border); } .herov2-h1 { font-family: var(--serif); font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 700; color: var(--text); line-height: 0.98; letter-spacing: -0.01em; margin: 0 0 1.1rem; } .herov2-h1 em { font-style: italic; color: var(--accent2); } .herov2-rule { width: 44px; height: 1px; background: var(--accent-border); margin-bottom: 1.25rem; } .herov2-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.8; max-width: 46ch; margin: 0 0 1.75rem; } .herov2-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .herov2-trust { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .herov2-trust span { font-size: 0.78rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.45rem; } .herov2-trust i { font-style: normal; color: var(--accent2); } @media (max-width: 560px) { .herov2 { padding: calc(var(--nav-h) + 1.5rem) 5vw 2.5rem; } .herov2-h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); } } /* === Respect prefers-reduced-motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .herov2-canvas, #lawnCanvas, #grainCanvas { display: none !important; } } /* === FORM VALIDATION STATES === */ .form-group input.invalid, .form-group select.invalid, .form-group textarea.invalid { border-color: #c0563f; } .field-msg { font-size: 0.74rem; color: #e08a72; min-height: 0.9rem; } .form-note { font-size: 0.78rem; color: var(--text-dim); } /* ════════════════════════════════════════════════════════════ v20 — accessibility, performance fallback & mobile conversion (appended; nothing above this line was changed) ════════════════════════════════════════════════════════════ */ /* === Skip link (keyboard / screen-reader) === */ .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 1000; background: var(--accent); color: var(--bg); font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.7rem 1.4rem; border-radius: 0 0 4px 4px; transition: transform 0.18s ease; } .skip-link:focus { transform: translate(-50%, 0); outline: none; } /* === Visible focus ring for keyboard users (no change for mouse) === */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .faq-q:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 2px; } #main:focus { outline: none; } /* === Static hero fallback === Used by the hero script on small screens, Save-Data, low-memory devices, or prefers-reduced-motion — a painted, mown-stripe scene so the hero still looks designed without burning battery. */ .hero-static { background: #080e07 !important; } .hero-static::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(28,84,24,0.55) 0px, rgba(28,84,24,0.55) 78px, rgba(13,31,6,0.62) 78px, rgba(13,31,6,0.62) 156px), radial-gradient(ellipse 60% 75% at 78% 8%, rgba(255,220,140,0.10) 0%, transparent 55%), radial-gradient(ellipse 120% 90% at 50% 120%, rgba(111,160,80,0.10) 0%, transparent 60%), linear-gradient(160deg, #14290f 0%, #0d1f08 55%, #080e07 100%); } .hero-static::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 30%, rgba(0,0,0,0.6) 100%), linear-gradient(90deg, rgba(8,14,7,0.95) 0%, rgba(8,14,7,0.7) 38%, rgba(8,14,7,0.15) 66%, transparent 86%); } /* === Mobile sticky action bar (phones only) === */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; gap: 0.6rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(11,19,9,0.97); backdrop-filter: blur(14px); border-top: 1px solid var(--border-mid); } .mobile-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; } .mobile-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 0.5rem; border-radius: 3px; border: 1px solid transparent; } .mobile-cta .mc-call { background: transparent; color: var(--accent2); border-color: var(--accent-border); } .mobile-cta .mc-quote { background: var(--accent); color: var(--bg); border-color: var(--accent); } @media (max-width: 640px) { .mobile-cta { display: flex; } body { padding-bottom: 4.5rem; } /* clear the fixed bar */ } /* ════════════════════════════════════════════════════════════ v25 — "The Cut Edge" design refinement layer Appended; hero sections (.herov2*, .page-header, hero canvas layers) deliberately untouched. The signature motif: a fine clipped corner on every card-like surface — a crisp edge, the same thing the business sells. ════════════════════════════════════════════════════════════ */ ::selection { background: rgba(111,160,80,0.35); color: var(--text); } /* Balanced headings, no awkward orphans */ .section-title, .card h3, .step-body h3 { text-wrap: balance; } .section-lead, .card p { text-wrap: pretty; } /* ── Section label: paired hairlines, brighter tracking ── */ .section-label { color: rgba(140,190,90,0.75); } .section-label::after { content: ''; flex: 0 0 36px; height: 1px; background: linear-gradient(90deg, var(--accent-border), transparent); } /* ── Buttons: lift + glow, no layout shift ── */ .btn { will-change: transform; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.25s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary:hover { box-shadow: 0 6px 24px -6px rgba(111,160,80,0.45); } .btn-secondary:hover { box-shadow: 0 4px 18px -8px rgba(111,160,80,0.35); } /* ── Cards: clipped corner + rising accent edge ── */ .card { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); position: relative; transition: border-color 0.25s, transform 0.25s, background 0.25s; } .card::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), transparent); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .card:hover { transform: translateY(-3px); background: #0d1810; } .card:hover::before { width: 100%; } .card h3 { transition: color 0.2s; } .card:hover h3 { color: var(--accent2); } /* Emoji icons sit in a fine framed tile */ .card-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; border: 1px solid var(--accent-line); background: var(--accent-dim); border-radius: 2px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); margin-bottom: 1.1rem; transition: border-color 0.25s, background 0.25s; } .card:hover .card-icon { border-color: var(--accent-border); background: rgba(111,160,80,0.16); } /* Pricing figure: hairline underscore ties number to card */ .card-num { position: relative; padding-bottom: 0.9rem; margin-bottom: 1rem; } .card-num::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 1px; background: var(--accent-border); } /* ── Stats bar: quiet by default, lit on hover ── */ .stats-bar { position: relative; background: var(--bg-alt); } .stats-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.25; } .stat-item { transition: background 0.25s; } .stat-item:hover { background: rgba(111,160,80,0.05); } .stat-val { transition: color 0.25s, text-shadow 0.25s; } .stat-item:hover .stat-val { text-shadow: 0 0 28px rgba(140,190,90,0.45); } @media (max-width: 640px) { .stat-item { border-right: none; border-bottom: 1px solid var(--border); } .stat-item:last-child { border-bottom: none; } } /* ── Testimonials: oversized serif quote mark, cut corner ── */ .testimonial { position: relative; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: border-color 0.25s, transform 0.25s; overflow: hidden; } .testimonial::before { content: '\201C'; position: absolute; top: 0.4rem; right: 1.4rem; font-family: var(--serif); font-size: 6.5rem; font-weight: 700; font-style: italic; line-height: 1; color: rgba(111,160,80,0.12); pointer-events: none; } .testimonial:hover { border-color: var(--accent-border); transform: translateY(-2px); } .testimonial cite { display: inline-flex; align-items: center; gap: 0.6rem; } .testimonial cite::before { content: ''; width: 22px; height: 1px; background: var(--accent-border); } /* ── Mesh cards (suburb links): edge slide + arrow reveal ── */ .mesh-card { position: relative; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); transition: border-color 0.25s, background 0.25s, transform 0.25s; } .mesh-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), transparent); transform: scaleY(0); transform-origin: top; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .mesh-card::after { content: '→'; position: absolute; right: 1.1rem; top: 50%; transform: translate(6px, -50%); opacity: 0; color: var(--accent2); font-size: 0.9rem; transition: opacity 0.25s, transform 0.25s; } .mesh-card:hover { background: #0d1810; transform: translateX(2px); } .mesh-card:hover::before { transform: scaleY(1); } .mesh-card:hover::after { opacity: 1; transform: translate(0, -50%); } .mesh-card:hover .mesh-card-title { color: var(--accent2); } .mesh-card-title { transition: color 0.2s; } /* ── Mesh list links: offset underline on hover ── */ .mesh-list a { position: relative; padding-left: 0; transition: color 0.2s, padding-left 0.25s; } .mesh-list a::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent); transition: width 0.25s; } .mesh-list a:hover { padding-left: 1.4rem; } .mesh-list a:hover::before { width: 0.9rem; } /* ── Process steps: number sharpens, row tints ── */ .process-step { transition: background 0.25s; padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.75rem; margin-right: -0.75rem; } .process-step:hover { background: rgba(111,160,80,0.04); } .step-num { transition: opacity 0.25s, color 0.25s; } .process-step:hover .step-num { opacity: 1; color: var(--accent2); } /* ── FAQ: gentle reveal + hover affordance ── */ .faq-q { transition: color 0.2s; } .faq-q:hover { color: var(--accent2); } @media (prefers-reduced-motion: no-preference) { .faq-a.open { animation: faqIn 0.3s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } } /* ── Keyword chips: live on hover ── */ .kw-chip { transition: border-color 0.2s, background 0.2s, color 0.2s; cursor: default; } .kw-chip:hover { border-color: var(--accent-border); background: rgba(111,160,80,0.16); color: #a5d472; } /* ── CTA band: corner cut-marks frame the offer ── */ .cta-band::after { content: ''; position: absolute; inset: 1.75rem 5vw; pointer-events: none; background: linear-gradient(90deg, var(--accent-border), var(--accent-border)) top left / 26px 1px, linear-gradient(180deg, var(--accent-border), var(--accent-border)) top left / 1px 26px, linear-gradient(90deg, var(--accent-border), var(--accent-border)) bottom right / 26px 1px, linear-gradient(180deg, var(--accent-border), var(--accent-border)) bottom right / 1px 26px; background-repeat: no-repeat; opacity: 0.8; } .cta-band .section-title { position: relative; z-index: 1; } /* ── Breadcrumb: quieter chrome, brighter trail ── */ .breadcrumb { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.68rem; } .breadcrumb a:hover { color: var(--accent2); } /* ── Forms (contact page): focus glow + lifted labels ── */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(111,160,80,0.12); } .form-group:focus-within label { color: var(--accent2); transition: color 0.2s; } .contact-form .btn-primary { align-self: flex-start; } /* ── Footer: gradient seam + refined link hovers ── */ footer { background: var(--bg2); } footer::before { content: ''; position: absolute; top: -1px; left: 5vw; right: 5vw; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.3; } .footer-nav a { position: relative; transition: color 0.2s; } .footer-nav a:hover { color: var(--accent2); } .footer-copy a:hover { color: var(--accent2); } /* ── Mobile sticky bar: subtle entrance glow already present; nudge tap targets ── */ .mobile-cta a { transition: background 0.2s, border-color 0.2s; } .mobile-cta .mc-call:active { background: var(--accent-dim); } /* ── Reduced motion: disable v25 transforms too ── */ @media (prefers-reduced-motion: reduce) { .card, .mesh-card, .testimonial, .btn { transform: none !important; } }