#css-hero-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
#css-hero-wrap {
position: relative;
width: 100%;
min-height: 100vh;
background: #000;
overflow: hidden;
font-family: ‘Courier New’, Courier, monospace;
color: #00ff41;
}
#css-hero-wrap canvas#css-matrix {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
#css-hero-wrap .scanlines {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 2px,
rgba(0,0,0,0.15) 2px,
rgba(0,0,0,0.15) 4px
);
pointer-events: none;
z-index: 5;
}
#css-hero-wrap .vignette {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.80) 100%);
pointer-events: none;
z-index: 4;
}
#css-hero-wrap .service-feed {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 2;
overflow: hidden;
}
#css-hero-wrap .svc-item {
position: absolute;
font-size: 11px;
color: #004d14;
letter-spacing: 0.04em;
white-space: nowrap;
opacity: 0;
animation: fadeItem 4.5s ease-in-out forwards;
}
#css-hero-wrap .svc-item.mid { color: #009926; font-size: 11.5px; }
#css-hero-wrap .svc-item.top { color: #00cc33; text-shadow: 0 0 6px rgba(0,204,51,0.5); }
@keyframes fadeItem {
0% { opacity: 0; }
8% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
#css-hero-wrap .top-bar {
position: absolute;
top: 0; left: 0; right: 0;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #002a0c;
font-size: 10px;
color: #004d14;
z-index: 20;
flex-wrap: wrap;
gap: 4px;
}
#css-hero-wrap .status-dot {
display: inline-block;
width: 6px; height: 6px;
background: #00ff41;
border-radius: 50%;
margin-right: 6px;
box-shadow: 0 0 6px rgba(0,255,65,0.9);
animation: blink-dot 1.4s step-end infinite;
}
@keyframes blink-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.1; }
}
#css-hero-wrap .hero-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 5rem 1.5rem 4rem;
text-align: center;
}
/* ── LOGO ── */
#css-hero-wrap .logo-img-wrap {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #00ff41;
box-shadow: 0 0 18px rgba(0,255,65,0.35), 0 0 40px rgba(0,255,65,0.12);
margin-bottom: 1.25rem;
flex-shrink: 0;
}
#css-hero-wrap .logo-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.9) brightness(1.05);
}
/* ── HEADLINE ── */
#css-hero-wrap .eyebrow {
font-size: 10px;
color: #004d14;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 0.6rem;
}
#css-hero-wrap h1.glitch {
font-size: clamp(1.7rem, 4.5vw, 3.4rem);
font-weight: 700;
color: #00ff41;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.08;
position: relative;
text-shadow: 0 0 22px rgba(0,255,65,0.35);
margin-bottom: 0.5rem;
}
#css-hero-wrap h1.glitch::before,
#css-hero-wrap h1.glitch::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0; right: 0;
}
#css-hero-wrap h1.glitch::before {
color: #00ccff;
animation: g1 4s infinite;
clip-path: polygon(0 18%, 100% 18%, 100% 38%, 0 38%);
}
#css-hero-wrap h1.glitch::after {
color: #ff003c;
animation: g2 4s infinite;
clip-path: polygon(0 62%, 100% 62%, 100% 76%, 0 76%);
}
@keyframes g1 {
0%,88%,100%{transform:translate(0);opacity:0}
90%{transform:translate(-3px,1px);opacity:.8}
93%{transform:translate(2px,-1px);opacity:.8}
97%{transform:translate(0);opacity:0}
}
@keyframes g2 {
0%,86%,100%{transform:translate(0);opacity:0}
88%{transform:translate(3px,2px);opacity:.7}
92%{transform:translate(-2px,-1px);opacity:.7}
96%{transform:translate(0);opacity:0}
}
#css-hero-wrap .business-sub {
font-size: clamp(0.65rem, 1.6vw, 0.85rem);
color: #00aa28;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.55rem;
}
#css-hero-wrap .scripture {
font-size: 11px;
color: #004d14;
letter-spacing: 0.12em;
font-style: italic;
margin-bottom: 1.6rem;
}
/* ── DIVIDER ── */
#css-hero-wrap .divider {
width: 100%;
max-width: 440px;
height: 1px;
background: linear-gradient(to right, transparent, #00ff41, transparent);
opacity: 0.4;
margin: 0 auto 1.6rem;
}
/* ── SERVICE TICKER ── */
#css-hero-wrap .ticker-box {
width: 100%;
max-width: 680px;
background: rgba(0,18,5,0.88);
border: 1px solid #002a0c;
border-radius: 3px;
padding: 1rem 1.4rem;
margin: 0 auto 1.6rem;
text-align: left;
}
#css-hero-wrap .ticker-label {
font-size: 9px;
color: #004d14;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
#css-hero-wrap .ticker-label span { color: #00cc33; }
#css-hero-wrap #css-rotating-svc {
font-size: clamp(0.82rem, 2.4vw, 1.05rem);
color: #00ff41;
text-shadow: 0 0 10px rgba(0,255,65,0.45);
min-height: 1.4em;
}
#css-hero-wrap #css-rotating-svc::after {
content: ‘_’;
animation: blink-dot 0.9s step-end infinite;
}
/* ── TAGS ── */
#css-hero-wrap .tags {
display: flex;
gap: 0.6rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1.6rem;
}
#css-hero-wrap .tag {
font-size: 9px;
letter-spacing: 0.13em;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid #002a0c;
color: #009926;
background: rgba(0,12,4,0.6);
}
/* ── STATS ── */
#css-hero-wrap .stats {
display: flex;
gap: 1.4rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
#css-hero-wrap .stat {
text-align: center;
border: 1px solid #001f08;
padding: 0.65rem 1.1rem;
min-width: 100px;
background: rgba(0,12,4,0.55);
}
#css-hero-wrap .stat-n {
font-size: 1.5rem;
color: #00ff41;
text-shadow: 0 0 10px rgba(0,255,65,0.35);
display: block;
}
#css-hero-wrap .stat-l {
font-size: 8.5px;
color: #004d14;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 3px;
display: block;
}
/* ── CTAs ── */
#css-hero-wrap .ctas {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
#css-hero-wrap .btn-p {
display: inline-block;
padding: 0.65rem 1.8rem;
border: 1px solid #00ff41;
color: #00ff41;
background: transparent;
font-family: ‘Courier New’, monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background .2s, color .2s, box-shadow .2s;
}
#css-hero-wrap .btn-p:hover {
background: #00ff41;
color: #000;
box-shadow: 0 0 22px rgba(0,255,65,0.4);
}
#css-hero-wrap .btn-s {
display: inline-block;
padding: 0.65rem 1.8rem;
border: 1px solid #002a0c;
color: #004d14;
background: transparent;
font-family: ‘Courier New’, monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: border-color .2s, color .2s;
}
#css-hero-wrap .btn-s:hover { border-color: #00cc33; color: #00cc33; }
/* ── BOTTOM BAR ── */
#css-hero-wrap .bot-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 9px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #001f08;
font-size: 9.5px;
color: #002a0c;
z-index: 20;
flex-wrap: wrap;
gap: 4px;
}
@media (max-width: 580px) {
#css-hero-wrap .top-bar .right-info { display: none; }
#css-hero-wrap .stats { gap: 0.6rem; }
#css-hero-wrap .stat { min-width: 80px; padding: 0.5rem 0.7rem; }
#css-hero-wrap .logo-img-wrap { width: 72px; height: 72px; }
}
CALVARY SUPPORT SOLUTIONS — SYSTEMS ONLINE
–:–:– UTC
> MINISTRY • TECHNOLOGY • STEWARDSHIP
CALVARY SUPPORT SOLUTIONS
Helping Ministries Thrive with Affordable, Reliable IT
“ Each of you should use whatever gift you have to serve others ” — 1 Peter 4:10
> ACTIVE SERVICE MODULE: 001
Loading…
// Break & Fix Support
// Managed Services
// Cybersecurity
// Web Design
// Ministry Mentorship
// Admin Services
∞
Patience & Care
100%
Ministry Focused
24/7
Here to Serve
$0
Web Design Templates
ENCRYPTED — TLS 1.3
SCANNING FOR MINISTRY NEEDS…
Psalm 103
(function(){
/* ── Services pulled from calvarysupportsolutions.com ── */
var services = [
“Break / Fix IT Support — We’re Here When You Need Us”,
“Managed IT Services — Be a Better Steward of Your Resources”,
“Vendor Consultations — We Translate the Tech So You Don’t Have To”,
“Cybersecurity Assessments — Protecting Your Ministry’s Data”,
“Server Infrastructure Planning & Management”,
“Ministry Mentorship — Equipping Your Tech-Savvy Church Staff”,
“Web Design & Management — Professional Sites, Free Templates”,
“Administrative Services — Newsletters, Schedules & More”,
“Microsoft 365 Setup & Administration”,
“Google Workspace for Ministries”,
“Network Design & Wi-Fi for Church Campuses”,
“IT Vendor Meetings — We Sit In So You’re Not Alone”,
“Help Desk & End-User Support — Patient, Caring, Every Time”,
“Cloud Backup & Disaster Recovery Planning”,
“Security Awareness Training for Church Staff”,
“Email Security & Anti-Phishing Protection”,
“Hardware Procurement & Lifecycle Management”,
“Remote & Hybrid Work Solutions for Ministry Teams”,
“IT Budgeting & Cost Reduction Consulting”,
“ITIL-Based IT Management — Efficient, Purposeful, Trusted”
];
var prefixes = [
“SVC://”, “MODULE://”, “MINISTRY://”, “TASK://”,
“SUPPORT://”, “DEPLOY://”, “SERVE://”, “CARE://”
];
var locations = [
“CHURCH_NET”, “MINISTRY_HUB”, “SMALL_BIZ_01”, “LOCAL_ORG”,
“REMOTE_CAMPUS”, “ADMIN_NODE”, “CLOUD_BACKUP”, “DOMAIN_CTL”,
“CONGREGATION_A”, “FAITH_SRV_02″
];
/* ── Matrix rain ── */
var canvas = document.getElementById(‘css-matrix’);
var ctx = canvas.getContext(‘2d’);
var cols, drops;
function resizeMatrix(){
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
cols = Math.floor(canvas.width / 16);
drops = [];
for(var i=0;i<cols;i++) drops[i] = Math.random() * -canvas.height;
}
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*!/\\|{}[]’;
function drawMatrix(){
ctx.fillStyle=’rgba(0,0,0,0.045)’;
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle=’#00ff41′;
ctx.font=’14px Courier New’;
for(var i=0;icanvas.height && Math.random()>0.975) drops[i]=0;
drops[i]+=16;
}
}
resizeMatrix();
window.addEventListener(‘resize’, resizeMatrix);
setInterval(drawMatrix, 50);
/* ── Background service feed ── */
var feed = document.getElementById(‘css-feed’);
var tiers = [”,”,’mid’,’mid’,’top’];
function spawnItem(){
var el = document.createElement(‘div’);
el.className = ‘svc-item ‘ + tiers[Math.floor(Math.random()*tiers.length)];
var svc = services[Math.floor(Math.random()*services.length)];
var pfx = prefixes[Math.floor(Math.random()*prefixes.length)];
var loc = locations[Math.floor(Math.random()*locations.length)];
var ts = new Date().toISOString().slice(11,19);
el.textContent = ‘[‘+ts+’] ‘+pfx+svc.split(‘ — ‘)[0].toUpperCase().replace(/ /g,’_’)+’ > ‘+loc;
el.style.left = (Math.random() * Math.max(window.innerWidth – 560, 40)) + ‘px’;
el.style.top = (Math.random() * Math.max(window.innerHeight – 50, 120)) + ‘px’;
var dur = 3800 + Math.random() * 2600;
el.style.animationDuration = dur + ‘ms’;
feed.appendChild(el);
setTimeout(function(){ el.remove(); }, dur + 150);
}
setInterval(spawnItem, 175);
for(var i=0;i= text.length){ clearInterval(typeTimer); if(cb) setTimeout(cb, 2600); }
}, 38);
}
function nextSvc(){
svcIdx = (svcIdx+1) % services.length;
idxEl.textContent = pad3(svcIdx+1);
tickerEl.style.opacity = ‘0’;
setTimeout(function(){ typeIn(services[svcIdx], nextSvc); }, 340);
}
typeIn(services[0], nextSvc);
/* ── Live UTC clock ── */
var clockEl = document.getElementById(‘css-clock’);
function tick(){
var n=new Date();
var h=(‘0’+n.getUTCHours()).slice(-2);
var m=(‘0’+n.getUTCMinutes()).slice(-2);
var s=(‘0’+n.getUTCSeconds()).slice(-2);
clockEl.textContent = h+’:’+m+’:’+s+’ UTC’;
}
tick(); setInterval(tick,1000);
/* ── Bottom scan message rotation ── */
var scanEl = document.getElementById(‘css-scan-msg’);
var scanMsgs = [
‘SCANNING FOR MINISTRY NEEDS…’,
‘CHECKING SERVER HEALTH…’,
‘MONITORING ENDPOINTS…’,
‘AUDITING VENDOR QUOTES…’,
‘PROTECTING YOUR CONGREGATION…’,
‘STEWARDING YOUR IT RESOURCES…’,
‘STANDING BY TO SERVE…’
];
var scanIdx = 0;
setInterval(function(){
scanIdx = (scanIdx+1) % scanMsgs.length;
scanEl.textContent = scanMsgs[scanIdx];
}, 2800);
})();
Calvary Support Solutions 