Skip to content

Match Clay County service cards to St. Johns card pattern #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GsCommand wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Match Clay County service cards to St. Johns card pattern #97

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 145 additions & 54 deletions service-areas/clay-county/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,133 @@
.hazard-amber::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); pointer-events:none; }
.hazard-amber h3{ color:var(--navy); margin-top:18px; }
.hazard-amber p{ color:var(--muted); margin-bottom:12px; }

#county-links-clay .grid.grid-3{
gap: 14px;
}

#county-links-clay .service-card{
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 104px;
padding: 10px 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background:
linear-gradient(135deg,
rgba(255,255,255,0.72) 0%,
rgba(255,233,214,0.88) 45%,
rgba(255,243,227,0.90) 100%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(251,146,60,0.24);
box-shadow: 0 11px 26px rgba(20, 35, 60, 0.08);
border-radius: 14px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
color: var(--navy);
}

#county-links-clay .service-card h3,
#county-links-clay .service-card p,
#county-links-clay .service-card a{
text-align: center;
}

#county-links-clay .service-card::before{
content: "";
position: absolute;
inset: -28% -24% -24% -18%;
background:
radial-gradient(circle at top right,
rgba(251,146,60,0.20),
transparent 42%),
radial-gradient(circle at bottom left,
rgba(245,158,11,0.14),
transparent 45%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
opacity: .84;
transition: opacity .2s ease, filter .2s ease;
}

#county-links-clay .service-card > *{
position: relative;
z-index: 1;
text-align: center;
}

#county-links-clay .service-card h3{
margin: 0 0 6px;
color: #143a5a;
font-size: 1.2rem;
font-weight: 800;
letter-spacing: .1px;
line-height: 1.24;
}

#county-links-clay .service-card p{
margin: 0 0 8px;
font-size: 14px;
line-height: 1.4;
color: #7a5d47;
}

#county-links-clay .service-card strong{
margin-top: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
color: #c26b2f;
text-transform: none;
transition: color .2s ease;
}

#county-links-clay .service-card strong .arrow{
display: inline-block;
transition: transform .2s ease;
}

@media (hover:hover) and (pointer:fine){
#county-links-clay .service-card:hover,
#county-links-clay .service-card:focus-visible{
transform: translateY(-2px);
background:
linear-gradient(135deg,
rgba(255,255,255,0.82) 0%,
rgba(255,225,200,0.94) 42%,
rgba(255,239,220,0.96) 100%);
border-color: rgba(251,146,60,0.32);
box-shadow:
0 16px 34px rgba(20,58,90,0.14),
0 0 0 1px rgba(251,146,60,0.18),
0 0 24px rgba(251,146,60,0.14);
}

#county-links-clay .service-card:hover::before,
#county-links-clay .service-card:focus-visible::before{
opacity: .97;
filter: blur(9px);
}

#county-links-clay .service-card:hover strong,
#county-links-clay .service-card:focus-visible strong{
color: #a95a25;
}

#county-links-clay .service-card:hover strong .arrow,
#county-links-clay .service-card:focus-visible strong .arrow{
transform: translateX(2px);
}
}

@media (max-width: 900px){ .hazard-split{ grid-template-columns: 1fr; } .hazard-hero{ min-height: 260px; } .hazard-hero img{ min-height:260px; } }
</style>
</head>
Expand Down Expand Up @@ -360,76 +487,40 @@ <h2 class="section-title">Areas We Serve in Clay County</h2>

<div class="grid grid-3" style="margin-top:16px;">

<a class="card service-card" href="/service-areas/clay-county/orange-park.html" style="
background:
radial-gradient(900px 240px at 18% 0%, rgba(251,146,60,.22), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(253,186,116,.20), transparent 55%),
linear-gradient(180deg, rgba(255,237,213,.9), #ffffff 72%);
border:1px solid rgba(251,146,60,.28);
">
<a class="card service-card" href="/service-areas/clay-county/orange-park.html">
<h3>Orange Park</h3>
<p>Architectural-grade stone and paver protection focused on color restoration and long-term durability.</p>
<strong>View Orange Park →</strong>
<p>Established Homes + Shade</p>
<strong>View Orange Park <span class="arrow" aria-hidden="true">→</span></strong>
</a>

<a class="card service-card" href="/service-areas/clay-county/fleming-island.html" style="
background:
radial-gradient(900px 240px at 18% 0%, rgba(251,146,60,.22), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(253,186,116,.20), transparent 55%),
linear-gradient(180deg, rgba(255,237,213,.9), #ffffff 72%);
border:1px solid rgba(251,146,60,.28);
">
<a class="card service-card" href="/service-areas/clay-county/fleming-island.html">
<h3>Fleming Island</h3>
<p>Premium restoration for Eagle Harbor and gated estates. Specialized algae-resistant sealing for shaded lots.</p>
<strong>View Fleming Island →</strong>
<p>Waterfront + Family Neighborhoods</p>
<strong>View Fleming Island <span class="arrow" aria-hidden="true">→</span></strong>
</a>

<a class="card service-card" href="/service-areas/clay-county/oakleaf-plantation.html" style="
background:
radial-gradient(900px 240px at 18% 0%, rgba(251,146,60,.22), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(253,186,116,.20), transparent 55%),
linear-gradient(180deg, rgba(255,237,213,.9), #ffffff 72%);
border:1px solid rgba(251,146,60,.28);
">
<a class="card service-card" href="/service-areas/clay-county/oakleaf-plantation.html">
<h3>Oakleaf Plantation</h3>
<p>High-performance joint stabilization and UV protection for high-traffic suburban driveways and patios.</p>
<strong>View Oakleaf Plantation →</strong>
<p>Growing Suburbs + Traffic</p>
<strong>View Oakleaf Plantation <span class="arrow" aria-hidden="true">→</span></strong>
</a>

<a class="card service-card" href="/service-areas/clay-county/middleburg.html" style="
background:
radial-gradient(900px 240px at 18% 0%, rgba(251,146,60,.22), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(253,186,116,.20), transparent 55%),
linear-gradient(180deg, rgba(255,237,213,.9), #ffffff 72%);
border:1px solid rgba(251,146,60,.28);
">
<a class="card service-card" href="/service-areas/clay-county/middleburg.html">
<h3>Middleburg</h3>
<p>Driveway and patio paver sealing focused on joint stability, even coverage, and long-term protection.</p>
<strong>View Middleburg →</strong>
<p>Rural Lots + Heavy Rains</p>
<strong>View Middleburg <span class="arrow" aria-hidden="true">→</span></strong>
</a>

<a class="card service-card" href="/service-areas/clay-county/green-cove-springs.html" style="
background:
radial-gradient(900px 240px at 18% 0%, rgba(251,146,60,.22), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(253,186,116,.20), transparent 55%),
linear-gradient(180deg, rgba(255,237,213,.9), #ffffff 72%);
border:1px solid rgba(251,146,60,.28);
">
<a class="card service-card" href="/service-areas/clay-county/green-cove-springs.html">
<h3>Green Cove Springs</h3>
<p>Deep cleaning and joint re-sanding to reduce dark staining, sand loss, and uneven wear in shaded areas.</p>
<strong>View Green Cove Springs →</strong>
<p>Historic Streets + Humidity</p>
<strong>View Green Cove Springs <span class="arrow" aria-hidden="true">→</span></strong>
</a>

<a class="card service-card" href="/service-areas/clay-county/doctors-inlet.html" style="
background:
radial-gradient(900px 240px at 18% 0%, rgba(251,146,60,.22), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(253,186,116,.20), transparent 55%),
linear-gradient(180deg, rgba(255,237,213,.9), #ffffff 72%);
border:1px solid rgba(251,146,60,.28);
">
<a class="card service-card" href="/service-areas/clay-county/doctors-inlet.html">
<h3>Doctors Inlet</h3>
<p>Driveway-focused sealing built for tire wear, even coverage, and joints that hold up after heavy rain.</p>
<strong>View Doctors Inlet →</strong>
<p>Creekside Homes + Moisture</p>
<strong>View Doctors Inlet <span class="arrow" aria-hidden="true">→</span></strong>
</a>

</div>
Expand Down