azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
848ab69df5796314e6f3594d0143e1a176f4c5b2
claudetools/clients/azcomputerguru.com/src/pages/index.astro
Mike Swanson e80c36e6bf sync: auto-sync from DESKTOP-0O8A1RL at 2026-05-22 11:07:55 
Author: Mike Swanson
Machine: DESKTOP-0O8A1RL
Timestamp: 2026-05-22 11:07:55
2026-05-22 11:07:59 -07:00

1444 lines
41 KiB
Plaintext
Raw Blame History

---
// Arizona Computer Guru — Homepage
// Prototype build for review and WP handoff
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Arizona Computer Guru | Managed IT Services Tucson AZ</title>
<meta name="description" content="Any system, any problem, solved. 20+ years of managed IT, security, monitoring, and remote support for Arizona businesses. Call 520.304.8300." />
<link rel="canonical" href="https://azcomputerguru.com/" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://azcomputerguru.com/" />
<meta property="og:title" content="Arizona Computer Guru | Managed IT Services Tucson AZ" />
<meta property="og:description" content="Any system, any problem, solved. 20+ years of managed IT, security, monitoring, and remote support for Arizona businesses. Call 520.304.8300." />
<meta property="og:site_name" content="Arizona Computer Guru" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Arizona Computer Guru | Managed IT Services Tucson AZ" />
<meta name="twitter:description" content="Any system, any problem, solved. 20+ years of managed IT for Arizona businesses." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Lexend:wght@300;400;500;600&display=swap" rel="stylesheet" />
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<!-- UTILITY BAR -->
<div class="util-bar" role="region" aria-label="Contact information">
<div class="util-inner">
<span class="util-message">
For immediate assistance:
<a href="tel:5203048300" class="util-phone">520.304.8300</a>
</span>
<span class="util-tagline" aria-hidden="true">any system, any problem, solved.</span>
</div>
</div>
<!-- NAVIGATION -->
<header class="site-header" id="site-header">
<nav class="main-nav" aria-label="Main navigation">
<a href="/" class="nav-logo" aria-label="Arizona Computer Guru — Home">
<span class="logo-arizona">Arizona</span>
<span class="logo-main">Computer<span class="logo-accent">G</span>uru</span>
</a>
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-menu" id="nav-menu" role="list">
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<a href="/remote-support" class="btn-nav">Remote Support</a>
</nav>
</header>
<main id="main-content">
<!-- HERO -->
<section class="hero" aria-labelledby="hero-headline">
<div class="hero-content">
<p class="hero-eyebrow">Managed IT Services &middot; Tucson, Arizona</p>
<h1 class="hero-headline" id="hero-headline">
Any system.<br>
Any problem.<br>
<span class="headline-accent">Solved.</span>
</h1>
<p class="hero-sub">
Remote and onsite support, security monitoring, backups, and compliance
for Arizona businesses. One call handles everything.
</p>
<div class="hero-actions">
<a href="/contact" class="btn-primary">Schedule a Free Consultation</a>
<a href="tel:5203048300" class="btn-phone" aria-label="Call 520.304.8300">520.304.8300</a>
</div>
</div>
<div class="hero-graphic" aria-hidden="true">
<svg class="hero-arcs" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
<circle cx="500" cy="500" r="75" stroke="var(--color-brand)" stroke-width="1.5" opacity="0.14"/>
<circle cx="500" cy="500" r="135" stroke="var(--color-brand)" stroke-width="1.5" opacity="0.11"/>
<circle cx="500" cy="500" r="200" stroke="var(--color-brand)" stroke-width="1" opacity="0.09"/>
<circle cx="500" cy="500" r="275" stroke="var(--color-brand)" stroke-width="1" opacity="0.07"/>
<circle cx="500" cy="500" r="355" stroke="var(--color-brand)" stroke-width="1" opacity="0.05"/>
<circle cx="500" cy="500" r="445" stroke="var(--color-brand)" stroke-width="0.75" opacity="0.04"/>
<line x1="500" y1="425" x2="500" y2="499" stroke="var(--color-brand)" stroke-width="1.5" opacity="0.18"/>
<line x1="425" y1="500" x2="499" y2="500" stroke="var(--color-brand)" stroke-width="1.5" opacity="0.18"/>
<circle cx="500" cy="500" r="6" fill="var(--color-brand)" opacity="0.22"/>
</svg>
</div>
</section>
<!-- FEATURED SERVICES -->
<section class="services-featured" aria-labelledby="services-heading">
<div class="services-inner">
<div class="service-primary">
<span class="section-label">Managed IT</span>
<h2 id="services-heading" class="service-primary-heading">
One partner for every system in your business
</h2>
<p class="service-primary-body">
From workstations and servers to network monitoring and security patches,
we handle it all proactively. No downtime surprises, no scrambling for a
fix when something breaks. For over 20 years, Arizona businesses have trusted
us to keep their IT invisible — running in the background while they focus
on their work.
</p>
<a href="/services/managed-it" class="text-link">
See what's included
<svg class="link-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M3 8h10m0 0L9 4m4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
<div class="services-secondary">
<div class="service-secondary-item">
<span class="section-label">Security</span>
<h3>Penetration testing, audits, and HIPAA/PCI compliance</h3>
<p>We find vulnerabilities before attackers do. Security auditing, endpoint
protection, and compliance readiness for healthcare, retail, and finance.</p>
<a href="/services/security" class="text-link">
Learn about security
<svg class="link-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M3 8h10m0 0L9 4m4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
<div class="service-secondary-item">
<span class="section-label">Remote Support</span>
<h3>Same-day remote help when something breaks today</h3>
<p>Most issues resolved in under an hour without anyone leaving their desk.
Connect with a technician right now.</p>
<a href="/remote-support" class="text-link">
Get remote help now
<svg class="link-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M3 8h10m0 0L9 4m4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- TRUST BAND -->
<section class="trust-band" aria-label="Company highlights">
<div class="trust-inner">
<div class="trust-stat">
<span class="trust-value">20+</span>
<span class="trust-label">Years in Arizona</span>
</div>
<div class="trust-divider" aria-hidden="true"></div>
<div class="trust-stat">
<span class="trust-value">Statewide</span>
<span class="trust-label">Tucson &middot; Phoenix &middot; Flagstaff &middot; Prescott</span>
</div>
<div class="trust-divider" aria-hidden="true"></div>
<div class="trust-stat">
<span class="trust-value">24/7</span>
<span class="trust-label">Monitoring &amp; alerting</span>
</div>
<div class="trust-divider" aria-hidden="true"></div>
<div class="trust-stat">
<span class="trust-value">Any system</span>
<span class="trust-label">Windows &middot; Mac &middot; Linux &middot; Cloud</span>
</div>
</div>
</section>
<!-- SERVICE CATALOG -->
<section class="catalog" aria-labelledby="catalog-heading">
<div class="catalog-inner">
<div class="catalog-header">
<span class="section-label">Full Service List</span>
<h2 id="catalog-heading">Everything your business needs, covered</h2>
<p class="catalog-sub">
Whether you need ongoing managed support or a one-time project, we handle it.
<a href="/contact" class="inline-link">Talk to us about your situation.</a>
</p>
</div>
<div class="catalog-groups">
<div class="catalog-group">
<h3 class="catalog-group-label">Management</h3>
<ul class="catalog-list" role="list">
<li>
<span class="catalog-item-name">Managed IT Service</span>
<span class="catalog-item-desc">Full-coverage proactive IT management</span>
</li>
<li>
<span class="catalog-item-name">24/7 System Monitoring</span>
<span class="catalog-item-desc">Continuous oversight of all devices and servers</span>
</li>
<li>
<span class="catalog-item-name">Automated Backups</span>
<span class="catalog-item-desc">Offsite storage for critical files and systems</span>
</li>
<li>
<span class="catalog-item-name">Network Management</span>
<span class="catalog-item-desc">Routers, switches, Wi-Fi, and VPN</span>
</li>
<li>
<span class="catalog-item-name">Server Administration</span>
<span class="catalog-item-desc">Windows Server, Linux, virtualization</span>
</li>
</ul>
</div>
<div class="catalog-group">
<h3 class="catalog-group-label">Security</h3>
<ul class="catalog-list" role="list">
<li>
<span class="catalog-item-name">Antivirus &amp; Endpoint Protection</span>
<span class="catalog-item-desc">Real-time defense against malware and threats</span>
</li>
<li>
<span class="catalog-item-name">Security Auditing</span>
<span class="catalog-item-desc">Vulnerability assessment and detailed reporting</span>
</li>
<li>
<span class="catalog-item-name">Penetration Testing</span>
<span class="catalog-item-desc">Controlled attacks to find weaknesses first</span>
</li>
<li>
<span class="catalog-item-name">HIPAA / PCI Compliance</span>
<span class="catalog-item-desc">Audit prep and compliance guidance</span>
</li>
</ul>
</div>
<div class="catalog-group">
<h3 class="catalog-group-label">Support</h3>
<ul class="catalog-list" role="list">
<li>
<span class="catalog-item-name">Remote Support</span>
<span class="catalog-item-desc">Same-day help without a site visit</span>
</li>
<li>
<span class="catalog-item-name">Onsite Support</span>
<span class="catalog-item-desc">In-person service across Arizona</span>
</li>
<li>
<span class="catalog-item-name">Web Design &amp; SEO</span>
<span class="catalog-item-desc">Sites built to convert and rank</span>
</li>
</ul>
</div>
</div>
<p class="catalog-footer">
Not sure what you need?
<a href="/contact" class="inline-link">Request a free consultation</a>
and we'll walk through your setup.
</p>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" aria-labelledby="testimonials-heading">
<div class="testimonials-inner">
<span class="section-label">What clients say</span>
<h2 id="testimonials-heading" class="sr-only">Client testimonials</h2>
<div class="testimonial-grid">
<blockquote class="testimonial-item">
<p class="testimonial-quote">We've had zero network outages in three years since switching. They fixed problems we didn't know we had.</p>
<footer class="testimonial-attribution">
<strong>Sarah M.</strong>
<span>Operations Manager, Tucson manufacturing firm</span>
</footer>
</blockquote>
<blockquote class="testimonial-item">
<p class="testimonial-quote">When ransomware hit on a Friday at 4pm, they had us back online by Monday morning. I don't know what we would have done.</p>
<footer class="testimonial-attribution">
<strong>James K.</strong>
<span>Owner, Phoenix professional services</span>
</footer>
</blockquote>
<blockquote class="testimonial-item">
<p class="testimonial-quote">Responsive, knowledgeable, and they explain things without making you feel like an idiot. Best IT decision we've made.</p>
<footer class="testimonial-attribution">
<strong>Linda R.</strong>
<span>Office Manager, Prescott healthcare practice</span>
</footer>
</blockquote>
</div>
</div>
</section>
<!-- SERVICE AREA -->
<section class="service-area" aria-labelledby="area-heading">
<div class="area-inner">
<span class="section-label">Service Area</span>
<h2 id="area-heading">We serve all of Arizona</h2>
<p>
Headquartered in Tucson, we serve businesses across the state. Remote support
covers anywhere with a connection. Onsite visits across Southern and Central Arizona.
</p>
<ul class="area-cities" role="list" aria-label="Cities we serve">
<li>Tucson</li>
<li>Phoenix</li>
<li>Prescott</li>
<li>Flagstaff</li>
<li>Sierra Vista</li>
<li>Nogales</li>
</ul>
<a href="/contact" class="btn-outline">Schedule an Onsite Visit</a>
</div>
</section>
<!-- CTA BAND -->
<section class="cta-band" aria-labelledby="cta-heading">
<div class="cta-inner">
<div class="cta-text">
<h2 id="cta-heading" class="cta-heading">Ready to stop worrying about IT?</h2>
<p class="cta-sub">
Free consultation. No commitment. We assess your setup and tell you
exactly what needs attention.
</p>
<a href="tel:5203048300" class="cta-phone">520.304.8300</a>
</div>
<div class="cta-form-wrap">
<form class="cta-form" action="/contact" method="get" aria-label="Schedule a consultation">
<div class="cta-form-field">
<label for="cta-name" class="cta-form-label">Your name</label>
<input type="text" id="cta-name" name="name" class="cta-form-input" autocomplete="name" required />
</div>
<div class="cta-form-field">
<label for="cta-contact" class="cta-form-label">Phone or email</label>
<input type="text" id="cta-contact" name="contact" class="cta-form-input" autocomplete="tel" required />
</div>
<div class="cta-form-field">
<label for="cta-issue" class="cta-form-label">What's going on?</label>
<textarea id="cta-issue" name="issue" class="cta-form-input cta-form-textarea" rows="3" placeholder="Brief description — we'll follow up within the hour."></textarea>
</div>
<button type="submit" class="cta-form-submit">Schedule Free Consultation</button>
</form>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="site-footer" role="contentinfo">
<div class="footer-inner">
<div class="footer-brand">
<a href="/" class="footer-logo" aria-label="Arizona Computer Guru">
<span class="logo-arizona">Arizona</span>
<span class="logo-main">Computer<span class="logo-accent">G</span>uru</span>
</a>
<p class="footer-tagline">any system, any problem, solved.</p>
<a href="tel:5203048300" class="footer-phone">520.304.8300</a>
</div>
<nav class="footer-nav" aria-label="Footer navigation">
<div class="footer-nav-col">
<h3 class="footer-nav-heading">Services</h3>
<ul role="list">
<li><a href="/services/managed-it">Managed IT</a></li>
<li><a href="/services/security">Security</a></li>
<li><a href="/remote-support">Remote Support</a></li>
<li><a href="/services/web-design">Web Design</a></li>
<li><a href="/services">All Services</a></li>
</ul>
</div>
<div class="footer-nav-col">
<h3 class="footer-nav-heading">Company</h3>
<ul role="list">
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div class="footer-nav-col">
<h3 class="footer-nav-heading">Follow</h3>
<ul role="list">
<li><a href="https://instagram.com/azcomputerguru" rel="noopener noreferrer" target="_blank">Instagram</a></li>
<li><a href="https://facebook.com/azcomputerguru" rel="noopener noreferrer" target="_blank">Facebook</a></li>
<li><a href="https://x.com/azcomputerguru" rel="noopener noreferrer" target="_blank">X</a></li>
<li><a href="https://yelp.com/biz/arizona-computer-guru-tucson" rel="noopener noreferrer" target="_blank">Yelp</a></li>
</ul>
</div>
</nav>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Arizona Computer Guru LLC. All rights reserved.</p>
<p>Tucson, Arizona &middot; <a href="tel:5203048300">520.304.8300</a></p>
</div>
</footer>
<script>
// Mobile nav toggle
const toggle = document.querySelector('.nav-toggle');
const menu = document.querySelector('.nav-menu');
if (toggle && menu) {
toggle.addEventListener('click', () => {
const open = menu.classList.toggle('is-open');
toggle.setAttribute('aria-expanded', String(open));
});
}
// Sticky header shadow
const header = document.getElementById('site-header');
if (header) {
const obs = new IntersectionObserver(
([e]) => header.classList.toggle('is-stuck', e.intersectionRatio < 1),
{ threshold: [1], rootMargin: '-1px 0px 0px 0px' }
);
obs.observe(header);
}
</script>
</body>
</html>
<style is:global>
/* ===========================================
RESET
=========================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
ul[role="list"] { list-style: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
/* Prevent flex/grid text overflow */
.flex-item, .grid-item { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ===========================================
TOKENS
=========================================== */
:root {
--color-brand: oklch(0.70 0.18 55);
--color-brand-dark: oklch(0.58 0.18 55);
--color-bg: oklch(0.985 0.007 75);
--color-bg-alt: oklch(0.962 0.006 75);
--color-bg-dark: oklch(0.14 0.012 75);
--color-text: oklch(0.14 0.012 75);
--color-text-2: oklch(0.40 0.012 75);
--color-text-3: oklch(0.58 0.009 75);
--color-navy: oklch(0.24 0.028 255);
--color-border: oklch(0.88 0.007 75);
--color-border-sub: oklch(0.93 0.005 75);
--font-display: 'Barlow Condensed', system-ui, sans-serif;
--font-body: 'Lexend', system-ui, sans-serif;
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-24: 6rem;
--max-w: 1200px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ===========================================
BASE
=========================================== */
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
font-kerning: normal;
font-optical-sizing: auto;
}
.skip-link {
position: absolute;
top: -100%;
left: var(--sp-4);
z-index: 200;
padding: var(--sp-2) var(--sp-4);
background: var(--color-brand);
color: white;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
}
.skip-link:focus { top: 0; }
:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 3px;
}
/* ===========================================
SHARED COMPONENTS
=========================================== */
.section-label {
display: inline-block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-brand);
margin-bottom: var(--sp-3);
}
.btn-primary {
display: inline-flex;
align-items: center;
height: 52px;
padding: 0 var(--sp-8);
background: var(--color-brand);
color: white;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
transition: background 140ms var(--ease-out);
}
.btn-primary:hover { background: var(--color-brand-dark); }
.btn-outline {
display: inline-flex;
align-items: center;
height: 48px;
padding: 0 var(--sp-6);
border: 1.5px solid var(--color-text);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.btn-outline:hover { background: var(--color-text); color: var(--color-bg); }
.btn-inverse {
display: inline-flex;
align-items: center;
height: 52px;
padding: 0 var(--sp-8);
background: white;
color: oklch(0.40 0.14 55);
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 700;
white-space: nowrap;
transition: background 140ms var(--ease-out);
}
.btn-inverse:hover { background: oklch(0.97 0.007 75); }
.btn-nav {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 var(--sp-4);
background: var(--color-brand);
color: white;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
transition: background 140ms var(--ease-out);
}
.btn-nav:hover { background: var(--color-brand-dark); }
.btn-phone {
display: inline-flex;
align-items: center;
height: 52px;
padding: 0 var(--sp-6);
border: 1.5px solid var(--color-text);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.02em;
line-height: 1;
transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.btn-phone:hover {
background: var(--color-text);
color: var(--color-bg);
}
.text-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-brand-dark);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: border-color 140ms var(--ease-out), gap 140ms var(--ease-out);
}
.text-link:hover { border-color: var(--color-brand); gap: var(--sp-3); }
.text-link:hover .link-arrow { transform: translateX(3px); }
.link-arrow { flex-shrink: 0; transition: transform 140ms var(--ease-out); }
.inline-link {
color: var(--color-brand-dark);
font-weight: 500;
border-bottom: 1px solid oklch(0.70 0.18 55 / 0.35);
transition: border-color 140ms;
}
.inline-link:hover { border-color: var(--color-brand); }
/* Logo text treatment */
.nav-logo, .footer-logo {
display: flex;
flex-direction: column;
line-height: 1.1;
flex-shrink: 0;
}
.logo-arizona {
font-family: var(--font-display);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-brand);
}
.logo-main {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-navy);
line-height: 1;
}
.logo-accent { color: var(--color-brand); }
/* ===========================================
UTILITY BAR
=========================================== */
.util-bar {
background: var(--color-brand);
color: oklch(0.98 0.007 75);
padding: var(--sp-2) var(--sp-6);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.util-inner {
max-width: var(--max-w);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
}
.util-phone {
font-weight: 700;
text-decoration: underline;
text-decoration-color: oklch(0.88 0.12 55);
text-underline-offset: 2px;
transition: text-decoration-color 120ms;
}
.util-phone:hover { text-decoration-color: white; }
.util-tagline {
font-style: italic;
font-weight: 300;
opacity: 0.82;
}
@media (max-width: 600px) { .util-tagline { display: none; } }
/* ===========================================
NAV
=========================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border-sub);
transition: box-shadow 200ms var(--ease-out);
}
.site-header.is-stuck { box-shadow: 0 1px 12px oklch(0.14 0.012 75 / 0.08); }
.main-nav {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
height: 64px;
display: flex;
align-items: center;
gap: var(--sp-8);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--sp-6);
list-style: none;
margin-left: auto;
}
.nav-menu a {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-2);
padding-bottom: 2px;
border-bottom: 1.5px solid transparent;
transition: color 120ms, border-color 120ms;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] {
color: var(--color-text);
border-color: var(--color-brand);
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 7px;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
}
.nav-toggle span {
display: block;
width: 100%;
height: 1.5px;
background: var(--color-text);
transition: transform 200ms var(--ease-out), opacity 150ms;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 768px) {
.nav-toggle { display: flex; }
.btn-nav { display: none; }
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0 var(--sp-6) var(--sp-4);
}
.nav-menu.is-open { display: flex; }
.nav-menu a {
display: block;
padding: var(--sp-3) 0;
font-size: 1rem;
border-bottom: none;
border-top: 1px solid var(--color-border-sub);
}
.nav-menu li:first-child a { border-top: none; margin-top: var(--sp-3); }
}
/* ===========================================
HERO
=========================================== */
.hero {
position: relative;
min-height: clamp(520px, 78vh, 680px);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 1;
padding: var(--sp-24) var(--sp-12) var(--sp-24) max(var(--sp-6), calc((100vw - var(--max-w)) / 2 + var(--sp-6)));
}
.hero-eyebrow {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-text-2);
margin-bottom: var(--sp-6);
}
.hero-headline {
font-family: var(--font-display);
font-size: clamp(3.5rem, 6.5vw, 5.75rem);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.0;
color: var(--color-text);
margin-bottom: var(--sp-6);
}
.headline-accent { color: var(--color-brand); }
.hero-sub {
font-size: clamp(1rem, 1.4vw, 1.125rem);
font-weight: 300;
line-height: 1.7;
color: var(--color-text-2);
max-width: 50ch;
margin-bottom: var(--sp-8);
}
.hero-actions {
display: flex;
align-items: center;
gap: var(--sp-4);
flex-wrap: wrap;
}
.hero-graphic {
position: absolute;
right: 0;
bottom: 0;
width: 52%;
height: 110%;
pointer-events: none;
overflow: hidden;
}
.hero-arcs {
position: absolute;
right: -8%;
bottom: -8%;
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
.hero-eyebrow { animation: reveal 0.55s var(--ease-out) 0ms both; }
.hero-headline { animation: reveal 0.55s var(--ease-out) 80ms both; }
.hero-sub { animation: reveal 0.55s var(--ease-out) 160ms both; }
.hero-actions { animation: reveal 0.55s var(--ease-out) 240ms both; }
@keyframes reveal {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-content {
padding: var(--sp-16) var(--sp-6) var(--sp-12);
}
.hero-graphic { display: none; }
.hero-actions { flex-direction: column; align-items: flex-start; }
.btn-phone { width: 100%; max-width: 280px; }
}
/* ===========================================
FEATURED SERVICES
=========================================== */
.services-featured {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border-sub);
border-bottom: 1px solid var(--color-border-sub);
padding: var(--sp-24) 0;
}
.services-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--sp-16);
align-items: start;
}
.service-primary-heading {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.8vw, 2.4rem);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.15;
color: var(--color-text);
margin-bottom: var(--sp-6);
}
.service-primary-body {
font-size: 1rem;
line-height: 1.75;
color: var(--color-text-2);
max-width: 54ch;
margin-bottom: var(--sp-6);
}
.services-secondary {
display: flex;
flex-direction: column;
gap: 1px;
padding-top: var(--sp-8);
min-width: 0;
}
.service-secondary-item {
padding: var(--sp-6);
background: var(--color-bg);
border: 1px solid var(--color-border-sub);
transition: border-color 200ms var(--ease-out);
}
.service-secondary-item:hover { border-color: var(--color-border); }
.service-secondary-item h3 {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
color: var(--color-text);
margin-bottom: var(--sp-3);
}
.service-secondary-item p {
font-size: 0.875rem;
line-height: 1.65;
color: var(--color-text-2);
max-width: none;
margin-bottom: var(--sp-4);
}
@media (max-width: 880px) {
.services-inner {
grid-template-columns: 1fr;
gap: var(--sp-8);
}
.services-secondary { padding-top: 0; }
}
/* ===========================================
TRUST BAND
=========================================== */
.trust-band {
background: var(--color-bg-dark);
padding: var(--sp-12) 0;
}
.trust-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-8);
flex-wrap: wrap;
}
.trust-stat {
display: flex;
flex-direction: column;
gap: var(--sp-1);
text-align: center;
flex: 1;
min-width: 120px;
}
.trust-value {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
letter-spacing: 0.01em;
color: oklch(0.985 0.007 75);
line-height: 1;
}
.trust-label {
font-size: 0.72rem;
font-weight: 400;
color: oklch(0.60 0.012 75);
letter-spacing: 0.04em;
line-height: 1.5;
}
.trust-divider {
width: 1px;
height: 44px;
background: oklch(0.28 0.012 75);
flex-shrink: 0;
align-self: center;
}
@media (max-width: 640px) {
.trust-inner { justify-content: center; }
.trust-divider { display: none; }
.trust-stat { min-width: 130px; }
}
/* ===========================================
SERVICE CATALOG
=========================================== */
.catalog {
padding: var(--sp-24) 0;
background: var(--color-bg);
}
.catalog-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.catalog-header {
margin-bottom: var(--sp-12);
}
.catalog-header h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.8vw, 2.25rem);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--color-text);
margin-bottom: var(--sp-3);
}
.catalog-sub {
font-size: 1rem;
color: var(--color-text-2);
max-width: 60ch;
}
.catalog-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
margin-bottom: var(--sp-8);
}
.catalog-group-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--color-accent);
}
.catalog-list {
border-top: none;
}
.catalog-list li {
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--color-border-sub);
min-width: 0;
}
@media (max-width: 768px) {
.catalog-groups {
grid-template-columns: 1fr;
}
}
.catalog-item-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
overflow-wrap: break-word;
}
.catalog-item-desc {
font-size: 0.8125rem;
color: var(--color-text-3);
overflow-wrap: break-word;
}
.catalog-footer {
font-size: 0.9rem;
color: var(--color-text-2);
}
/* ===========================================
TESTIMONIALS
=========================================== */
.testimonials {
background: var(--color-bg);
border-top: 1px solid var(--color-border-sub);
padding: var(--sp-24) 0;
}
.testimonials-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.testimonials-inner > .section-label {
display: block;
margin-bottom: var(--sp-8);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.testimonial-item {
margin: 0;
padding: var(--sp-8);
background: var(--color-bg-alt);
border: 1px solid var(--color-border-sub);
border-top: 3px solid var(--color-accent);
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.testimonial-quote {
margin: 0;
font-family: var(--font-body);
font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
font-weight: 400;
line-height: 1.6;
color: var(--color-text);
flex: 1;
}
.testimonial-attribution {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.testimonial-attribution strong {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-text);
}
.testimonial-attribution span {
font-size: 0.8125rem;
color: var(--color-text-3);
}
@media (max-width: 900px) {
.testimonial-grid {
grid-template-columns: 1fr;
max-width: 540px;
}
}
/* ===========================================
SERVICE AREA
=========================================== */
.service-area {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border-sub);
padding: var(--sp-24) 0;
}
.area-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.area-inner h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.8vw, 2.25rem);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--color-text);
margin-bottom: var(--sp-4);
}
.area-inner p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-2);
max-width: 58ch;
margin-bottom: var(--sp-6);
}
.area-cities {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
margin-bottom: var(--sp-8);
}
.area-cities li {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-2);
padding: var(--sp-1) var(--sp-3);
border: 1px solid var(--color-border);
background: var(--color-bg);
letter-spacing: 0.02em;
}
/* ===========================================
CTA BAND
=========================================== */
.cta-band {
background: var(--color-brand);
padding: var(--sp-24) 0;
}
.cta-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6);
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--sp-16);
align-items: start;
}
.cta-text {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding-top: var(--sp-2);
}
.cta-heading {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
letter-spacing: 0.01em;
color: white;
margin: 0;
}
.cta-sub {
font-size: 1.0625rem;
color: oklch(0.96 0.04 55);
line-height: 1.65;
margin: 0;
}
.cta-phone {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 800;
letter-spacing: 0.02em;
color: white;
border-bottom: 2px solid oklch(0.85 0.12 55);
padding-bottom: 2px;
transition: border-color 120ms;
align-self: flex-start;
margin-top: var(--sp-2);
}
.cta-phone:hover { border-color: white; }
.cta-form-wrap {
background: oklch(0.22 0.06 30);
padding: var(--sp-8);
}
.cta-form {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.cta-form-field {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.cta-form-label {
font-size: 0.8125rem;
font-weight: 600;
color: oklch(0.88 0.06 55);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cta-form-input {
background: oklch(0.17 0.04 30);
border: 1px solid oklch(0.38 0.06 30);
color: white;
font-family: var(--font-body);
font-size: 0.9375rem;
padding: var(--sp-3) var(--sp-4);
width: 100%;
outline: none;
transition: border-color 120ms;
}
.cta-form-input::placeholder {
color: oklch(0.52 0.04 30);
}
.cta-form-input:focus {
border-color: oklch(0.78 0.12 55);
}
.cta-form-textarea {
resize: vertical;
min-height: 72px;
}
.cta-form-submit {
background: white;
color: var(--color-brand);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border: none;
padding: var(--sp-4) var(--sp-6);
cursor: pointer;
width: 100%;
margin-top: var(--sp-2);
transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.cta-form-submit:hover {
background: oklch(0.96 0.04 55);
}
@media (max-width: 900px) {
.cta-inner {
grid-template-columns: 1fr;
max-width: 540px;
}
}
/* ===========================================
FOOTER
=========================================== */
.site-footer {
background: var(--color-bg-dark);
color: oklch(0.60 0.012 75);
padding-top: var(--sp-16);
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--sp-6) var(--sp-16);
display: grid;
grid-template-columns: 1.4fr 2.6fr;
gap: var(--sp-16);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.footer-logo .logo-arizona { color: var(--color-brand); }
.footer-logo .logo-main { color: oklch(0.92 0.007 75); }
.footer-tagline {
font-size: 0.8125rem;
font-style: italic;
color: oklch(0.48 0.010 75);
max-width: none;
}
.footer-phone {
display: inline-block;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.02em;
color: oklch(0.82 0.010 75);
transition: color 120ms;
}
.footer-phone:hover { color: var(--color-brand); }
.footer-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
}
.footer-nav-heading {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(0.42 0.010 75);
margin-bottom: var(--sp-4);
}
.footer-nav-col li + li { margin-top: var(--sp-3); }
.footer-nav-col a {
font-size: 0.875rem;
color: oklch(0.56 0.010 75);
transition: color 120ms;
}
.footer-nav-col a:hover { color: oklch(0.82 0.010 75); }
.footer-bottom {
border-top: 1px solid oklch(0.22 0.012 75);
max-width: var(--max-w);
margin: 0 auto;
padding: var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.footer-bottom p {
font-size: 0.75rem;
color: oklch(0.40 0.009 75);
max-width: none;
}
.footer-bottom a {
color: oklch(0.52 0.010 75);
transition: color 120ms;
}
.footer-bottom a:hover { color: oklch(0.72 0.010 75); }
@media (max-width: 860px) {
.footer-inner { grid-template-columns: 1fr; gap: var(--sp-12); }
}
@media (max-width: 560px) {
.footer-nav { grid-template-columns: repeat(2, 1fr); }
}
</style>
Reference in New Issue View Git Blame Copy Permalink