Our Services
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hover ID → Justice Impact CTA</title>
<style>
:root{
--w: 360px; /* card width */
--h: 228px; /* card height (keep 5:3-ish to resemble ID) */
--radius: 16px;
--shadow: 0 10px 24px rgba(0,0,0,.22);
--gold: #d6b25e;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;display:grid;place-items:center;min-height:100svh;background:#0b0b0c;color:#e9e9ea;padding:24px}
.cta-wrap{display:grid;gap:14px;justify-items:center;text-align:center}
.id-card{
width:var(--w);
height:var(--h);
position:relative;
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
outline:2px solid rgba(214,178,94,.25);
transition:transform .25s ease, outline-color .25s ease;
cursor:pointer;
user-select:none;
}
.id-card:focus-visible{outline-color:var(--gold);}
.id-card:hover{transform:translateY(-2px)}
/* Base and hover images stacked */
.id-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .35s ease}
.id-img.initial{opacity:1}
.id-img.hover{opacity:0}
.id-card:hover .id-img.hover,
.id-card:focus .id-img.hover,
.id-card.active .id-img.hover{opacity:1}
.id-card:hover .id-img.initial,
.id-card:focus .id-img.initial,
.id-card.active .id-img.initial{opacity:0}
/* Bottom banner prompt (initial) */
.prompt{
position:absolute;left:0;right:0;bottom:0;
background:linear-gradient( to top, rgba(0,0,0,.65), rgba(0,0,0,0));
padding:18px 16px 12px;
font-weight:600; letter-spacing:.2px;
}
.prompt b{color:var(--gold)}
/* Hover overlay content */
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .35s ease}
.id-card:hover .overlay,
.id-card:focus .overlay,
.id-card.active .overlay{opacity:1}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
/* Silhouette block (provide your own PNG/SVG silhouette) */
.silhouette{
position:relative;z-index:1;
width: 54%;
aspect-ratio: 3/4;
background: center / contain no-repeat url('silhouette.png'); /* <- replace with your silhouette asset */
display:grid;place-items:center;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.silhouette .stat{
font-weight: 800;
font-size: clamp(16px, 3.4vw, 28px);
line-height:1.15; text-align:center;
color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
padding:0 6px;
}
.subcopy{
position:relative;z-index:1;margin-top:14px;
background:rgba(0,0,0,.45);
border:1px solid rgba(255,255,255,.08);
padding:8px 10px; border-radius:12px; font-size:14px;
}
/* CTA label under card */
.cta-label{font-size:14px;color:#bdbdc2}
.cta-label a{color:var(--gold);text-underline-offset:4px}
/* Mobile/touch support: tapping toggles the hover state before following the link */
@media (hover:none){
.instruction{font-size:12px;color:#bdbdc2}
}
</style>
</head>
<body>
<div class="cta-wrap">
<a class="id-card" id="justiceCta" href="/justice-impact" aria-label="Stories of lives impacted by the justice system (open)" role="link">
<!-- Replace these image URLs with your actual assets -->
<div class="id-img initial" style="background-image:url('texas_id_18yo.jpg')" aria-hidden="true"></div>
<div class="id-img hover" style="background-image:url('tdcj_id.jpg')" aria-hidden="true"></div>
<!-- Initial prompt strip -->
<div class="prompt" aria-hidden="true">Click to see <b>what happened to me</b>.</div>
<!-- Hover state overlay -->
<div class="overlay" aria-hidden="true">
<div class="scrim"></div>
<div class="silhouette">
<div class="stat">1 out of 67 Americans</div>
</div>
<div class="subcopy">Impacted by the justice system. Learn our mission.</div>
</div>
</a>
<div class="cta-label">Part of <a href="/bts">Beat the Streets</a> × <a href="/ihn">Inside Hustle Network</a></div>
<div class="instruction">On phones: tap once to preview, tap again to open.</div>
</div>
<script>
// Touch-friendly: first tap toggles the 'active' (hover) preview, second tap follows link
(function(){
const card = document.getElementById('justiceCta');
if(!card) return;
let tapped = false;
card.addEventListener('click', function(e){
const isTouch = matchMedia('(hover: none)').matches;
if(isTouch && !tapped){
e.preventDefault();
card.classList.add('active');
tapped = true;
setTimeout(()=> tapped=false, 1400); // small window for second tap
}
}, {passive:false});
// Keyboard accessibility: space/enter toggle preview then follow
card.addEventListener('keydown', function(e){
if(e.code === 'Space'){
e.preventDefault();
card.classList.toggle('active');
}
});
})();
</script>
</body>
</html>
Get a Quote
This is a Paragraph. Click on "Edit Text" or double click on the text box to start editing the content.