/* global.css — Webmicron | Footer & global styles only (nav CSS is inlined in ) */ /* ── Design Tokens ── */ :root { --bg-primary: #ffffff; --bg-secondary: #f5f4f0; --color-border: #ff6719; --color-text: #202020; --color-text-muted: #6b7280; --color-primary: #ff6719; --color-secondary: #450e05; --font-base: 'Inter', sans-serif; --radius-pill: 9999px; --radius-control: 6px; --radius-base: 8px; --radius-lg: 10px; } /* ── Global Transitions ── */ /* Links: color only — keeps it from interfering with component-level transitions */ a { transition: color .15s ease } /* Buttons & CTAs: bg + border only */ .btn, .nav-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease } /* Press feedback on real CTAs only — not nav trigger buttons */ .btn:active, .nav-btn:active { transform: scale(.97); transition: transform .08s ease } /* ── FOOTER ── */ .site-footer { background: var(--bg-primary); border-top: 1px solid #ece9e4; padding: 4rem 0 0 } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 2rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2rem; border-bottom: 1px solid #ece9e4 } /* Brand */ .footer-logo { font-size: 1.05rem; font-weight: 700; color: var(--color-text); text-decoration: none; display: inline-block; margin-bottom: .5rem } .footer-logo span { color: var(--color-primary) } /* Contact icon list */ .footer-contact { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .7rem } .footer-contact li { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--color-text-muted); line-height: 1.5 } .footer-contact-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-primary); margin-top: 2px } .footer-contact a { color: var(--color-text-muted); text-decoration: none } .footer-contact a:hover { color: var(--color-primary) } /* Social */ .footer-social { display: flex; gap: .625rem } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-control); border: 1px solid #ece9e4; color: var(--color-text-muted); text-decoration: none } .footer-social-link:hover { border-color: var(--color-primary); color: var(--color-primary) } .footer-social-link svg { width: 16px; height: 16px } /* Columns */ .footer-col-title { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text) } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .625rem } .footer-links a { color: var(--color-text-muted); text-decoration: none; font-size: .875rem } .footer-links a:hover { color: var(--color-primary) } /* AI Strip */ .footer-ai-strip { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid #ece9e4; flex-wrap: wrap } .footer-ai-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0 } .footer-ai-logos { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap } .footer-ai-link { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: var(--radius-control); border: 1px solid #ece9e4; text-decoration: none; color: var(--color-text-muted); font-size: .775rem; font-weight: 500; transition: border-color .15s ease, color .15s ease, background .15s ease } .footer-ai-link:hover { border-color: var(--color-primary); color: var(--color-primary); background: #fff8f5 } .footer-ai-link img { display: block; opacity: .65; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease } .footer-ai-link:hover img { opacity: 1; filter: grayscale(0) } /* Bottom Bar */ .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: .815rem; color: var(--color-text-muted) } .footer-bottom p { margin: 0 } .footer-bottom-links { display: flex; align-items: center; gap: 1.25rem } .footer-bottom-links a { color: var(--color-text-muted); text-decoration: none; font-size: .815rem } .footer-bottom-links a:hover { color: var(--color-primary) } /* ── Section Container ── */ .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem } @media(max-width:960px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr } .footer-brand { grid-column: span 3 } } @media(max-width:600px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem } .footer-brand { grid-column: span 2 } .footer-bottom { flex-direction: column; align-items: flex-start; gap: .75rem } } /* ══════════════════════════════════════ TESTIMONIALS — Process Steps (shared) ══════════════════════════════════════ */ .testi { padding: 6rem 0; background: var(--bg-primary) } .testi-top { text-align: center; max-width: 600px; margin: 0 auto 2rem; display: flex; flex-direction: column; align-items: center; gap: .5rem } .testi-badge { display: inline-flex; align-items: center; gap: .45rem; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .8rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--radius-base) } .testi-heading { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--color-text) } .testi-heading span { color: var(--color-primary) } .testi-sub { margin: 0; font-size: 1rem; color: var(--color-text-muted); line-height: 1.65 } /* Steps grid */ .testi-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem } .testi-step { background: var(--bg-secondary); border: 1.5px solid #ece9e4; border-radius: var(--radius-base); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease } .testi-step::before { display: none } .testi-step.is-active { border-color: var(--color-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, .06); transform: translateY(-3px) } .testi-step-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff8f5; color: var(--color-primary); font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; transition: background .3s ease, color .3s ease } .testi-step.is-active .testi-step-num { background: var(--color-primary); color: #fff } .testi-step-info { display: flex; flex-direction: column; gap: .4rem } .testi-step-info strong { font-size: .95rem; font-weight: 700; color: var(--color-text); line-height: 1.2 } .testi-step-info span { font-size: .85rem; color: var(--color-text-muted); line-height: 1.55 } @media(max-width:900px) { .testi-steps { grid-template-columns: repeat(2, 1fr) } } @media(max-width:600px) { .testi { padding: 1.5rem 0 } .testi-top { margin-bottom: 1.5rem } .testi-steps { grid-template-columns: 1fr; gap: 1rem } .testi-step { padding: 1.25rem } } /* ══════════════════════════════════════ REVIEWS (shared) ══════════════════════════════════════ */ .reviews { padding: 6rem 0; background: var(--color-secondary); position: relative; overflow: hidden; } .reviews::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0px, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 52px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0px, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 52px); pointer-events: none; } .reviews-top { text-align: center; max-width: 600px; margin: 0 auto 2rem; display: flex; flex-direction: column; align-items: center; gap: .5rem } .reviews-badge { display: inline-flex; align-items: center; gap: .45rem; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .8rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--radius-base) } .reviews-heading { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff } .reviews-heading span { color: var(--color-primary) } .reviews-sub { margin: 0; font-size: 1rem; color: #ffffff70; line-height: 1.65 } .reviews-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: stretch } .reviews-images { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-base); overflow: hidden; background: var(--bg-primary) } .reviews-img { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease } .reviews-img.active { opacity: 1 } .reviews-img img { width: 100%; height: 100%; object-fit: cover; display: block } .reviews-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #f5f4f0 0%, #ece9e4 100%); color: var(--color-text-muted); font-size: .85rem; text-align: center; padding: 1rem } .reviews-right { background: var(--bg-primary); border-radius: var(--radius-base); padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem } .reviews-cards { position: relative; min-height: 260px } .reviews-card { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; pointer-events: none; display: flex; flex-direction: column; gap: 1.1rem } .reviews-card.active { opacity: 1; pointer-events: auto; position: relative; inset: auto } .reviews-card-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg-secondary); box-shadow: 0 2px 6px rgba(0, 0, 0, .08) } .reviews-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block } .reviews-card-stars { color: #f59e0b; font-size: 1.05rem; letter-spacing: 1px; line-height: 1 } .reviews-card-quote { margin: 0; font-size: .95rem; color: var(--color-text); line-height: 1.7; font-style: normal } .reviews-card-quote::before { content: '\201C'; font-size: 2.5rem; color: var(--color-primary); line-height: .6; display: block; margin-bottom: .5rem } .reviews-card-cite { font-style: normal; display: flex; flex-direction: column; gap: .15rem } .reviews-card-cite strong { font-size: .9rem; font-weight: 700; color: var(--color-text) } .reviews-card-cite span { font-size: .8rem; color: var(--color-text-muted) } .reviews-dots { display: flex; align-items: center; gap: .5rem } .reviews-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1cec8; border: none; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease; flex-shrink: 0 } .reviews-dot.active { background: var(--color-primary); width: 24px; border-radius: var(--radius-pill) } @media(max-width:900px) { .reviews-body { grid-template-columns: 1fr; gap: 2rem } .reviews-images { aspect-ratio: 16/9 } } @media(max-width:600px) { .reviews { padding: 1.5rem 0 } .reviews-cards { min-height: 300px } } /* ══════════════════════════════════════ SHARED BUTTONS ══════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; gap: .55rem; background: var(--color-primary); color: #fff; font-size: .95rem; font-weight: 700; padding: 12px 24px; border-radius: var(--radius-base); text-decoration: none; transition: background .15s ease, transform .08s ease } .btn-primary:hover { background: var(--color-secondary) } .btn-primary:active { transform: scale(.97) } .btn-primary svg { width: 16px; height: 16px; flex-shrink: 0 } .btn-secondary { display: inline-flex; align-items: center; gap: .5rem; background: var(--color-secondary); color: #fff; font-size: .95rem; font-weight: 700; padding: 12px 24px; border-radius: var(--radius-base); text-decoration: none; transition: opacity .15s ease, transform .08s ease } .btn-secondary:hover { opacity: .88 } .btn-secondary:active { transform: scale(.97) } .btn-secondary svg { width: 16px; height: 16px; flex-shrink: 0 } /* ══════════════════════════════════════ SERVICES (shared) ══════════════════════════════════════ */ .services { padding: 6rem 0; background: var(--bg-secondary) } /* Top */ .services-top { text-align: center; max-width: 640px; margin: 0 auto 2rem; display: flex; flex-direction: column; align-items: center; gap: .5rem } .services-badge { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px dashed var(--color-primary); color: var(--color-primary); font-size: .8rem; font-weight: 700; padding: .3rem .85rem; border-radius: var(--radius-base); letter-spacing: .04em; text-transform: uppercase } .services-heading { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--color-text) } .services-heading span { color: var(--color-primary) } .services-sub { margin: 0; font-size: 1rem; color: var(--color-text-muted); line-height: 1.65 } /* Grid */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem } /* Card */ .services-card { background: #fff; border: 1px solid #ece9e4; border-radius: var(--radius-base); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease } .services-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .06); transform: translateY(-3px) } /* Card image slot */ .services-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(145deg, #f5f4f0, #ece9e4); flex-shrink: 0; position: relative } .services-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0 } .services-card-img-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center } .services-card-img-bg svg { width: 64px; height: 64px; color: var(--color-primary); opacity: .2 } .services-card-img-label { position: absolute; bottom: .75rem; left: .75rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px); border-radius: var(--radius-base); padding: .3rem .75rem; font-size: .75rem; font-weight: 700; color: var(--color-text); border: 1px solid rgba(0, 0, 0, .06) } /* Card body */ .services-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; flex: 1 } .services-card-meta { font-size: .72rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .07em } .services-card-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--color-text); line-height: 1.25 } .services-card-title span { color: var(--color-primary) } .services-card-desc { margin: 0; font-size: .875rem; color: var(--color-text-muted); line-height: 1.65 } /* Checklist */ .services-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem } .services-card-list li { display: flex; align-items: center; gap: .5rem; font-size: .825rem; color: var(--color-text-muted); font-weight: 500 } .services-card-list li svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0 } /* Card link */ .services-card-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-primary); font-size: .875rem; font-weight: 700; text-decoration: none; margin-top: auto; transition: gap .15s ease } .services-card-link:hover { gap: .7rem } .services-card-link svg { width: 15px; height: 15px; flex-shrink: 0 } /* Bottom CTA */ .services-cta { text-align: center; margin-top: 2rem } /* Mobile dots — hidden on desktop */ .services-dots { display: none } /* ── Responsive ── */ @media(max-width:900px) { .services-grid { grid-template-columns: repeat(2, 1fr) } } @media(max-width:600px) { .services { padding: 1.5rem 0 } .services-top { margin-bottom: 1.5rem } /* Slider mode */ .services-grid { display: block; position: relative } .services-card { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; transform: none } .services-card:hover { transform: none; box-shadow: none } .services-card.active { opacity: 1; pointer-events: auto; position: relative; inset: auto } .services-dots { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.25rem } .services-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1cec8; border: none; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease; flex-shrink: 0 } .services-dot.active { background: var(--color-primary); width: 24px; border-radius: var(--radius-pill) } } /* ══════════════════════════════════════ CERTIFICATIONS & PARTNERS (shared) ══════════════════════════════════════ */ .certs { position: relative; padding: 6rem 0; background: var(--color-secondary); overflow: hidden; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 32px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 32px) } .certs-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 2rem } /* Block: heading + chips */ .certs-block { display: flex; flex-direction: column; gap: 1.25rem } .certs-block-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -.01em } .certs-block-desc { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .55); line-height: 1.6; max-width: 480px } /* Chip row */ .certs-chips { display: flex; flex-wrap: wrap; gap: .75rem } .certs-chip { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-base); padding: .55rem 1rem; color: #fff; font-size: .85rem; font-weight: 600; white-space: nowrap } .certs-chip-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center } .certs-chip-icon svg { width: 22px; height: 22px } .certs-chip-icon img { width: 22px; height: 22px; object-fit: contain; display: block } /* Responsive */ @media(max-width:600px) { .certs { padding: 1.5rem 0 } .certs-chip { font-size: .8rem; padding: .45rem .85rem } } /* ── Trust / Why Us ─────────────────────────────── */ .trust { padding: 6rem 0; background: var(--bg-secondary) } .trust-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; margin-bottom: 2rem } .trust-badge { display: inline-flex; align-items: center; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem 1rem; border-radius: var(--radius-base) } .trust-heading { margin: 0; font-size: clamp(1.9rem, 3.5vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--color-text) } .trust-heading span { color: var(--color-primary) } .trust-sub { margin: 0; font-size: 1rem; color: var(--color-text-muted); line-height: 1.6; max-width: 520px } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem } .trust-card { background: #fff; border: 1px solid #ece9e4; border-radius: var(--radius-base); padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease } .trust-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .06); transform: translateY(-3px); border-color: rgba(255, 103, 25, .35) } .trust-card-icon { width: 52px; height: 52px; border-radius: var(--radius-base); background: #fff8f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .trust-card-icon svg { width: 26px; height: 26px; color: var(--color-primary) } .trust-card-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--color-text); line-height: 1.3 } .trust-card-title span { color: var(--color-primary) } .trust-card-desc { margin: 0; font-size: .875rem; color: var(--color-text-muted); line-height: 1.65 } @media(max-width:900px) { .trust-grid { grid-template-columns: repeat(2, 1fr) } } @media(max-width:600px) { .trust { padding: 1.5rem 0 } .trust-grid { grid-template-columns: 1fr } } /* ── Local Presence ─────────────────────────────── */ .local { padding: 6rem 0; background: var(--bg-primary) } .local-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center } /* Left */ .local-badge { display: inline-flex; align-items: center; gap: .45rem; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .8rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--radius-base); margin-bottom: .25rem } .local-badge svg { width: 13px; height: 13px; flex-shrink: 0 } .local-heading { margin: .5rem 0 .5rem; font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--color-text) } .local-heading span { color: var(--color-primary) } .local-desc { margin: 0 0 1.75rem; font-size: .975rem; color: var(--color-text-muted); line-height: 1.65; max-width: 480px } .local-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .85rem } .local-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; color: var(--color-text-muted); line-height: 1.5 } .local-list a { color: var(--color-text); font-weight: 600; text-decoration: none } .local-list a:hover { color: var(--color-primary) } .local-list-icon { width: 34px; height: 34px; border-radius: var(--radius-base); background: #fff; border: 1px solid #ece9e4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -.1rem } .local-list-icon svg { width: 16px; height: 16px; color: var(--color-primary) } .local-rating { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; flex-wrap: wrap } .local-rating-stars { color: #f59e0b; font-size: 1.2rem; letter-spacing: .05em; line-height: 1 } .local-rating-text { font-size: .9rem; color: var(--color-text-muted) } .local-rating-text strong { color: var(--color-text); font-weight: 800 } .local-rating-text a { color: var(--color-primary); font-weight: 600; text-decoration: none } .local-rating-text a:hover { text-decoration: underline } .local-actions { display: flex; gap: .875rem; flex-wrap: wrap } /* Right: GMB card */ .local-right { display: flex; justify-content: center } .local-gmb { background: #fff; border: 1px solid #ece9e4; border-radius: var(--radius-base); overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); width: 100%; max-width: 400px } .local-gmb-map { height: 200px; background: #e8e5e0; overflow: hidden } .local-gmb-map iframe { display: block; width: 100%; height: 100%; border: 0 } .local-gmb-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem } .local-gmb-header { display: flex; align-items: flex-start; gap: .85rem } .local-gmb-logo { width: 46px; height: 46px; border-radius: var(--radius-base); background: var(--color-secondary); color: #fff; font-size: 1.3rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: inherit } .local-gmb-title { display: flex; flex-direction: column; gap: .15rem } .local-gmb-title strong { font-size: 1rem; font-weight: 800; color: var(--color-text); line-height: 1.2 } .local-gmb-title span { font-size: .8rem; color: var(--color-text-muted) } .local-gmb-rating { display: flex; align-items: center; gap: .5rem } .local-gmb-stars { color: #f59e0b; font-size: 1rem; letter-spacing: .03em; line-height: 1 } .local-gmb-reviews { font-size: .82rem; color: var(--color-primary); font-weight: 600; text-decoration: none } .local-gmb-reviews:hover { text-decoration: underline } .local-gmb-category { font-size: .8rem; color: var(--color-text-muted); font-weight: 500 } .local-gmb-details { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-direction: column; gap: .55rem } .local-gmb-details li { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: var(--color-text-muted); line-height: 1.45 } .local-gmb-details svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; margin-top: .1rem } .local-gmb-details a { color: var(--color-text); text-decoration: none; font-weight: 500 } .local-gmb-details a:hover { color: var(--color-primary) } .local-gmb-open { color: #16a34a; font-weight: 600 } .local-gmb-cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: .25rem; background: #f8f7f5; border: 1px solid #ece9e4; border-radius: var(--radius-base); padding: 12px 24px; font-size: .82rem; font-weight: 700; color: var(--color-text); text-decoration: none; transition: border-color .15s ease, color .15s ease; width: fit-content } .local-gmb-cta svg { width: 18px; height: 18px; flex-shrink: 0 } .local-gmb-cta:hover { border-color: var(--color-primary); color: var(--color-primary) } @media(max-width:900px) { .local-inner { grid-template-columns: 1fr; gap: 2.5rem } .local-right { justify-content: flex-start } .local-gmb { max-width: 100% } } @media(max-width:600px) { .local { padding: 1.5rem 0 } .local-actions { flex-direction: column } .local-actions .btn-primary, .local-actions .btn-secondary { justify-content: center } } /* ── FAQ ────────────────────────────────────────── */ .faq { padding: 6rem 0; background: var(--bg-primary) } .faq-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: start } /* Left */ .faq-badge { display: inline-flex; align-items: center; gap: .45rem; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .8rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--radius-base); margin-bottom: .25rem } .faq-badge svg { width: 13px; height: 13px; flex-shrink: 0 } .faq-heading { margin: .5rem 0 .5rem; font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--color-text) } .faq-heading span { color: var(--color-primary) } .faq-sub { margin: 0 0 2rem; font-size: .975rem; color: var(--color-text-muted); line-height: 1.65; max-width: 340px } .faq-cta { width: fit-content } /* Accordion */ .faq-right { display: flex; flex-direction: column; gap: 0 } .faq-item { border-bottom: 1px solid #ece9e4 } .faq-item:first-child { border-top: 1px solid #ece9e4 } .faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: transparent; border: none; padding: 1.25rem 0; cursor: pointer; text-align: left } .faq-btn-text { font-size: .975rem; font-weight: 700; color: var(--color-text); line-height: 1.4; transition: color .15s ease } .faq-btn.open .faq-btn-text { color: var(--color-primary) } .faq-btn-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid #ece9e4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease, border-color .2s ease } .faq-btn.open .faq-btn-icon { background: var(--color-primary); border-color: var(--color-primary) } .faq-icon-plus, .faq-icon-minus { width: 14px; height: 14px; position: absolute; transition: opacity .2s ease, transform .2s ease; color: var(--color-text) } .faq-btn-icon { position: relative } .faq-btn.open .faq-icon-plus, .faq-icon-minus { opacity: 0 } .faq-icon-plus { opacity: 1 } .faq-btn.open .faq-icon-minus { opacity: 1; color: #fff } .faq-btn.open .faq-icon-plus { opacity: 0 } .faq-btn:hover .faq-btn-text { color: var(--color-primary) } .faq-btn:hover .faq-btn-icon { border-color: var(--color-primary) } /* Panel */ .faq-panel { height: 0; overflow: hidden; transition: height .32s cubic-bezier(.4, 0, .2, 1) } .faq-panel-inner { padding: .1rem 0 1.35rem } .faq-panel-inner p { margin: 0; font-size: .9rem; color: var(--color-text-muted); line-height: 1.7 } @media(max-width:900px) { .faq-inner { grid-template-columns: 1fr; gap: 2rem } .faq-sub { max-width: 100% } .faq-cta { display: none } } @media(max-width:600px) { .faq { padding: 1.5rem 0 } .faq-btn-text { font-size: .9rem } } /* ── Featured Case Studies ───────────────────────── */ .cs { padding: 6rem 0; } .cs-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; margin-bottom: 2rem } .cs-badge { display: inline-flex; align-items: center; gap: .45rem; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .8rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--radius-base) } .cs-badge svg { width: 13px; height: 13px; flex-shrink: 0 } .cs-heading { margin: 0; font-size: clamp(1.9rem, 3.5vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--color-text) } .cs-heading span { color: var(--color-primary) } .cs-sub { margin: 0; font-size: 1rem; color: var(--color-text-muted); line-height: 1.6; max-width: 500px } /* Grid */ .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem } /* Card */ .cs-card { background: #fff; border: 1px solid #ece9e4; border-radius: var(--radius-base); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .15s ease } .cs-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .06); transform: translateY(-3px) } /* Image area */ .cs-card-img { position: relative; background: linear-gradient(145deg, #f5f4f0, #ece9e4); aspect-ratio: 16/9; overflow: hidden } .cs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block } .cs-card-img-label { position: absolute; bottom: .75rem; left: .75rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px); border-radius: var(--radius-base); padding: .3rem .75rem; font-size: .75rem; font-weight: 700; color: var(--color-text); border: 1px solid rgba(0, 0, 0, .06) } /* Body */ .cs-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; flex: 1 } .cs-card-meta { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em } .cs-card-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--color-text); line-height: 1.2 } .cs-card-title span { color: var(--color-primary) } .cs-card-desc { margin: 0; font-size: .875rem; color: var(--color-text-muted); line-height: 1.65; flex: 1 } /* Stats grid */ .cs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem } .cs-stat { display: flex; align-items: center; gap: .6rem; background: var(--bg-secondary); border-radius: var(--radius-base); padding: .65rem .75rem } .cs-stat-icon { width: 28px; height: 28px; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .cs-stat-icon svg { width: 14px; height: 14px } .cs-stat--up .cs-stat-icon { background: #dcfce7; color: #16a34a } .cs-stat--down .cs-stat-icon { background: #fee2e2; color: #dc2626 } .cs-stat-info { display: flex; flex-direction: column; gap: .05rem; min-width: 0 } .cs-stat-info strong { font-size: .82rem; font-weight: 800; color: var(--color-text); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .cs-stat-info span { font-size: .7rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } /* Link */ .cs-card-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; font-weight: 700; color: var(--color-primary); text-decoration: none; margin-top: auto; transition: gap .15s ease } .cs-card-link svg { width: 16px; height: 16px; transition: transform .15s ease } .cs-card-link:hover svg { transform: translateX(4px) } /* Dots */ .cs-dots { display: none; justify-content: center; gap: .5rem; margin-top: 1.75rem } .cs-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #d1cfc9; cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease } .cs-dot.active { background: var(--color-primary); transform: scale(1.3) } /* CTA */ .cs-cta { display: flex; justify-content: center; margin-top: 2rem } /* Tablet */ @media(max-width:900px) { .cs-grid { grid-template-columns: repeat(2, 1fr) } } /* Mobile slider */ @media(max-width:600px) { .cs { padding: 1.5rem 0 } .cs-grid { position: relative; display: block; min-height: 520px } .cs-card { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease; height: auto } .cs-card.active { opacity: 1; pointer-events: auto; position: relative } .cs-dots { display: flex } } /* ══════════════════════════════════════ HOME BLOG ══════════════════════════════════════ */ .blog { padding: 6rem 0; background: var(--bg-secondary) } .blog-top { text-align: center; margin-bottom: 2rem } .blog-badge { display: inline-block; background: #fff8f5; border: 1px solid #ffdac7; color: var(--color-primary); font-size: .78rem; font-weight: 700; padding: .3rem .85rem; border-radius: var(--radius-base); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem } .blog-heading { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--color-text) } .blog-heading span { color: var(--color-primary) } .blog-sub { margin: 0; font-size: .95rem; color: var(--color-text-muted); max-width: 480px; margin-inline: auto } /* CTA */ .blog-cta { display: flex; justify-content: center; margin-top: 2rem } /* ══════════════════════════════════════ CTA BAND ══════════════════════════════════════ */ .cta-band { position: relative; padding: 6rem 0; background: var(--color-secondary); overflow: hidden; text-align: center } .cta-band::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0px, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 52px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0px, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 52px); pointer-events: none } .cta-band-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem } .cta-band-heading { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; max-width: 780px } .cta-band-heading span { color: var(--color-primary) } .cta-band-desc { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, .6); line-height: 1.7; max-width: 520px } .cta-band-btn { display: inline-flex; align-items: center; gap: .55rem; background: var(--color-primary); color: #fff; font-size: .95rem; font-weight: 700; padding: 12px 24px; border-radius: var(--radius-base); text-decoration: none; transition: background .15s ease, transform .08s ease; margin-top: .5rem } .cta-band-btn:hover { background: #e55a0f } .cta-band-btn:active { transform: scale(.97) } .cta-band-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .15s ease } .cta-band-btn:hover svg { transform: translateX(4px) } @media(max-width:600px) { .cta-band { padding: 1.5rem 0 } .cta-band-btn { width: 100%; max-width: 320px; justify-content: center } } /* ══════════════════════════════════════ INNER-PAGE HEADER — About, Contact, Legal, and sub-service pages (views/includes/page-header.php) ══════════════════════════════════════ */ .wm-page-header { padding: 3rem 0 2.5rem; background: var(--bg-secondary) } .wm-breadcrumb { margin-bottom: 1rem } .wm-breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 0; margin: 0; font-size: .85rem; color: var(--color-text-muted) } .wm-breadcrumb-item { display: flex; align-items: center; gap: .4rem } .wm-breadcrumb-item a { color: var(--color-text-muted); text-decoration: none } .wm-breadcrumb-item a:hover { color: var(--color-primary) } .wm-breadcrumb-item.is-current span { color: var(--color-text); font-weight: 600 } .wm-breadcrumb-sep { color: #ece9e4 } .wm-page-title { margin: 0; font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--color-text) } .wm-page-subtitle { margin: .6rem 0 0; font-size: 1rem; color: var(--color-text-muted); line-height: 1.65; max-width: 620px } @media(max-width:600px) { .wm-page-header { padding: 2rem 0 1.75rem } } /* Alternate-background variant for blog.css' .section utility, used on inner pages to alternate white/secondary bands without inline styles */ .section--alt { background: var(--bg-secondary) }