Big C's Detailing | Velocity Detailing Products
:root {
--neon-green: #39FF14;
--neon-purple: #B026FF;
--chrome-light: #FFFFFF;
--chrome-mid: #A0A5B5;
--chrome-dark: #4A4E5A;
--bg-dark: #0A0A0E;
--bg-card: #12131A;
--bg-card-hover: #1A1B26;
--border-chrome: linear-gradient(135deg, #ffffff 0%, #a0a5b5 50%, #4a4e5a 100%);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--bg-dark);
color: #E2E8F0;
font-family: 'Rajdhani', sans-serif;
font-size: 18px;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, .brand-font {
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Metallic Chrome Text Effect */
.chrome-text {
background: linear-gradient(180deg, #FFFFFF 0%, #D8DFE8 30%, #8A94A6 50%, #EBF1F8 70%, #4A5160 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8));
}
.green-glow {
color: var(--neon-green);
text-shadow: 0 0 12px rgba(57, 255, 20, 0.6);
}
.purple-glow {
color: var(--neon-purple);
text-shadow: 0 0 12px rgba(176, 38, 255, 0.6);
}
/* Layout Containers */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: rgba(10, 10, 14, 0.95);
border-bottom: 2px solid var(--neon-green);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
box-shadow: 0 4px 25px rgba(57, 255, 20, 0.15);
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.header-logo {
max-height: 65px;
width: auto;
display: block;
transition: transform 0.3s ease;
}
.header-logo:hover {
transform: scale(1.02);
}
.nav-actions {
display: flex;
align-items: center;
gap: 18px;
}
.nav-link {
color: #FFF;
text-decoration: none;
font-family: 'Orbitron', sans-serif;
font-size: 0.85rem;
font-weight: 700;
transition: color 0.3s ease;
white-space: nowrap;
}
.nav-link:hover {
color: var(--neon-green);
text-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}
.phone-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--neon-green), #20aa03);
color: #000;
font-weight: 800;
padding: 8px 18px;
border-radius: 50px;
text-decoration: none;
font-family: 'Orbitron', sans-serif;
font-size: 0.85rem;
box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
transition: all 0.3s ease;
white-space: nowrap;
}
.phone-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
}
/* Hero Section */
.hero {
position: relative;
padding: 60px 0 50px;
text-align: center;
background: radial-gradient(circle at 50% 20%, rgba(176, 38, 255, 0.15) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, rgba(57, 255, 20, 0.1) 0%, transparent 50%);
}
.hero-tag {
display: inline-block;
padding: 6px 16px;
border: 1px solid var(--neon-purple);
border-radius: 20px;
color: var(--neon-purple);
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(176, 38, 255, 0.3);
}
.velocity-hero-logo {
max-width: 380px;
width: 100%;
height: auto;
margin: 0 auto 20px;
display: block;
filter: drop-shadow(0 0 15px rgba(176, 38, 255, 0.4));
}
.hero h1 {
font-size: 3.2rem;
margin-bottom: 15px;
line-height: 1.1;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 35px;
color: #A0A5B5;
}
/* Interactive Vehicle Selector */
.selector-box {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 10px;
display: inline-flex;
gap: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
margin-bottom: 40px;
flex-wrap: wrap;
justify-content: center;
}
.size-btn {
background: transparent;
border: none;
color: #8A94A6;
padding: 12px 24px;
font-family: 'Orbitron', sans-serif;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
border-radius: 12px;
transition: all 0.3s ease;
}
.size-btn.active {
background: linear-gradient(135deg, rgba(176, 38, 255, 0.2), rgba(57, 255, 20, 0.2));
border: 1px solid var(--neon-green);
color: #FFF;
box-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
}
/* Pricing Section */
.section-title {
text-align: center;
font-size: 2.2rem;
margin-bottom: 40px;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--neon-green), var(--neon-purple));
margin: 10px auto 0;
border-radius: 2px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 25px;
margin-bottom: 60px;
}
.card {
background: var(--bg-card);
border-radius: 16px;
padding: 30px 25px;
position: relative;
border: 1px solid rgba(255,255,255,0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card:hover {
transform: translateY(-5px);
border-color: var(--neon-purple);
box-shadow: 0 10px 30px rgba(176, 38, 255, 0.2);
}
.card.popular {
border: 2px solid var(--neon-green);
box-shadow: 0 0 25px rgba(57, 255, 20, 0.2);
}
.badge {
position: absolute;
top: -12px;
right: 20px;
background: var(--neon-green);
color: #000;
font-family: 'Orbitron', sans-serif;
font-size: 0.75rem;
font-weight: 900;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
}
.card-header h3 {
font-size: 1.4rem;
margin-bottom: 10px;
}
.price-display {
font-size: 2.5rem;
font-weight: 900;
font-family: 'Orbitron', sans-serif;
margin: 15px 0;
display: flex;
align-items: baseline;
gap: 5px;
}
.price-sub {
font-size: 0.9rem;
color: #8A94A6;
font-weight: 500;
}
.card-features {
list-style: none;
margin: 20px 0;
flex-grow: 1;
}
.card-features li {
margin-bottom: 10px;
position: relative;
padding-left: 22px;
color: #C0C6D4;
font-size: 0.95rem;
}
.card-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--neon-green);
font-weight: bold;
}
.card-btn {
display: block;
width: 100%;
text-align: center;
padding: 12px 0;
background: transparent;
border: 1px solid var(--chrome-mid);
color: #FFF;
text-decoration: none;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
border-radius: 8px;
transition: all 0.3s ease;
}
.card-btn:hover {
background: var(--neon-purple);
border-color: var(--neon-purple);
box-shadow: 0 0 15px rgba(176, 38, 255, 0.5);
}
/* Velocity Spray Sealants & Addons */
.velocity-banner {
background: linear-gradient(135deg, rgba(18, 19, 26, 0.95), rgba(26, 27, 38, 0.95));
border: 2px solid var(--neon-purple);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
box-shadow: 0 0 35px rgba(176, 38, 255, 0.15);
position: relative;
overflow: hidden;
}
.velocity-banner::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(57, 255, 20, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.addon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 25px;
}
.addon-card {
background: rgba(10, 10, 14, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
}
.addon-card h4 {
color: var(--neon-green);
font-size: 1.1rem;
margin-bottom: 8px;
}
.addon-price {
font-size: 1.3rem;
font-family: 'Orbitron', sans-serif;
font-weight: 800;
color: #FFF;
margin-bottom: 8px;
}
/* Glass Treatments & Ceramic Split */
.split-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.glass-box {
background: var(--bg-card);
border-left: 4px solid var(--neon-green);
border-radius: 12px;
padding: 30px;
}
.ceramic-box {
background: var(--bg-card);
border-left: 4px solid var(--neon-purple);
border-radius: 12px;
padding: 30px;
}
/* About Us Section */
.about-section {
background: linear-gradient(135deg, rgba(18, 19, 26, 0.9), rgba(10, 10, 14, 0.95));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 50px 40px;
margin: 60px 0;
position: relative;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
align-items: center;
}
.about-card {
background: rgba(10, 10, 14, 0.5);
border-left: 3px solid var(--neon-green);
padding: 20px;
border-radius: 8px;
margin-top: 15px;
}
/* Live Calculator Section */
.calc-section {
background: linear-gradient(180deg, var(--bg-card) 0%, rgba(10,10,14,1) 100%);
border-radius: 20px;
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 60px;
box-shadow: 0 0 30px rgba(57, 255, 20, 0.1);
}
.calc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 25px;
}
.calc-field-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.calc-label {
font-family: 'Orbitron', sans-serif;
font-size: 0.9rem;
color: var(--neon-purple);
font-weight: 700;
}
.calc-select, .calc-input-field {
width: 100%;
padding: 12px;
background: #000;
border: 1px solid var(--chrome-mid);
color: #FFF;
border-radius: 8px;
font-family: 'Rajdhani', sans-serif;
font-size: 1rem;
outline: none;
}
.calc-select:focus, .calc-input-field:focus {
border-color: var(--neon-green);
box-shadow: 0 0 10px rgba(57,255,20,0.3);
}
.total-box {
margin-top: 35px;
padding: 25px;
background: rgba(0,0,0,0.8);
border: 2px solid var(--neon-green);
border-radius: 16px;
text-align: center;
box-shadow: 0 0 20px rgba(57,255,20,0.2);
}
.grand-total {
font-family: 'Orbitron', sans-serif;
font-size: 2.8rem;
font-weight: 900;
color: var(--neon-green);
text-shadow: 0 0 15px rgba(57,255,20,0.6);
}
/* Footer */
footer {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 40px 0;
text-align: center;
color: #6C727F;
font-size: 0.9rem;
}
/* Responsive */
@media (max-width: 850px) {
.nav-actions { display: none; }
.hero h1 { font-size: 2.2rem; }
.velocity-hero-logo { max-width: 280px; }
.header-logo { max-height: 50px; }
.velocity-banner { padding: 25px; }
.about-section { padding: 30px 20px; }
}
ST. JOSEPH, MO & SURROUNDING AREAS
BIG SHINE. BIG PROTECTION.
Precision interior restoration, high-gloss paint correction, Velocity spray sealants, and certified ceramic coatings.
🚗 CAR / SEDAN
🚙 SUV / CROSSTREK
🛻 TRUCK / LARGE SUV
FULL DETAIL PACKAGES
$129
Complete Hand Wash & Dry
Light Interior Vacuum & Wipe
Glass Cleaned Inside & Out
Tire & Wheel Shine
SELECT IN CALCULATOR
MOST POPULAR
$229
Deep Interior Scrub & Steam
Full Carpet & Seat Vacuum
Exterior Decontamination Wash
Gloss Enhancing Sealant
SELECT IN CALCULATOR
$349
Full Interior Deep Steam Extraction
Stain & Odor Treatment
Iron Decon & Clay Bar Exterior
Single Stage Polish
SELECT IN CALCULATOR
$549
Concourse Level Interior Detail
Engine Bay Detail
Multi-Stage Paint Correction
Premium Sealant Protection
SELECT IN CALCULATOR
INTERIOR ONLY SERVICES
EXPRESS INTERIOR
$75
Fast wipe down, vacuum, and window cleaning.
STANDARD INTERIOR
$149
Thorough cleaning of all vinyl, plastic, leather, and carpets.
RESET INTERIOR
$249
Heavy stain extraction, leather conditioning, and deep steam treatment.
EXTERIOR ONLY SERVICES
EXPRESS EXTERIOR
$59
Hand wash, wheel cleaning, tire shine, and spray wax.
STANDARD + CLAY + FUSION 14
$149
Decon clay bar treatment topped with Fusion 14 spray sealant.
FULL EXTERIOR RESET
$279
Deep decon, gloss enhancement polish, and long-term protection.
VELOCITY SPRAY SEALANTS
Spray-on SiO2 protection. No heavy paint correction needed. Perfect yearly topper option!
FUSION 14 (6-MONTH SPRAY)
Add-On To Any Exterior / Full Detail:
+$100
Standalone Service: $250
ATOMIC 14 (12-MONTH SPRAY)
Add-On To Any Exterior / Full Detail:
+$200
Standalone Service: $350
GLASS PROTECTION
GLASS SPRAY SEALANT
Fast hydrophobic glass coating. Excellent $50/yr topper to maintain Glass Ceramic.
$99
Add-On To Any Detail: $50
GLASS CERAMIC COATING
REAL CERAMIC - 1 to 2 Year Durability. Requires glass polish prep prior to application.
$149
Includes: Deep Glass Polish & Prep
TRUE CERAMIC COATINGS
REAL COATINGS • REQUIRES PAINT CORRECTION • IN-SHOP ONLY
$699
Requires Level 1 Correction
Hydrophobic Gloss Shield
1-Year Chemical Protection
In-Shop Application
SCHEDULE SHOP VISIT
MOST POPULAR
$1099
High Durability SiO2 Matrix
Deep Gloss Reflection
3-Year Protection Guarantee
In-Shop Application
SCHEDULE SHOP VISIT
$1599
Level 2 Correction Included Maximum 9H Hardness
5-Year Extreme Gloss & Shield
In-Shop Application
SCHEDULE SHOP VISIT
LIVE SERVICE & TOTAL ESTIMATE CALCULATOR
Build your custom detailing package in real-time. Calculate package price, add-ons, ceramic coatings, and mobile travel fees instant total!
1. SELECT VEHICLE SIZE
Car / Sedan
SUV / Crosstrek
Truck / Large SUV
2. CHOOSE MAIN SERVICE
-- None / Addons Only --
Express Full
Standard Full (Most Popular)
Full Reset
Showroom
Express Interior
Standard Interior
Reset Interior
Express Exterior
Standard + Clay + Fusion 14
Full Exterior Reset
Velocity Fusion 14 Standalone (6-Mo)
Velocity Atomic 14 Standalone (12-Mo)
Velocity V1 7H (1-Yr Real)
Velocity V3 7H (3-Yr Real)
Velocity V5 9H (5-Yr Real)
3. VELOCITY SPRAY ADD-ON
None
Fusion 14 (6-Mo Spray Add-on)
Atomic 14 (12-Mo Spray Add-on)
4. GLASS PROTECTION
None
Glass Spray Sealant ($50 Add-on)
Glass Spray Sealant (Solo)
Glass Ceramic Coating (1-2 Year)
5. SERVICE TYPE / MOBILE TRAVEL
In-Shop Service ($0 Travel)
Mobile Service (At Your Location)
MILES FROM ZIP 64506
ABOUT BIG C'S DETAILING
PROUDLY SERVING ST. JOSEPH, MO
At Big C's Detailing, we deliver professional-grade automotive care designed to protect your investment and restore your vehicle to peak condition.
Whether you need an express interior refresh, multi-stage paint correction, or long-term certified ceramic protection, we take pride in doing the job right with precision techniques and premium products.
VELOCITY DETAILING PRODUCTS
We utilize our proprietary line of Velocity Detailing Products, formulated specifically for intense gloss, hydrophobic water-beading, and maximum environmental protection.
IN-SHOP & MOBILE SERVICE
Visit our shop for dedicated true ceramic coatings, or take advantage of our mobile detailing service delivered straight to your driveway within St. Joseph and surrounding areas.
// Dynamic Pricing Selector Logic
function setVehicleSize(size, element) {
document.querySelectorAll('.size-btn').forEach(btn => btn.classList.remove('active'));
element.classList.add('active');
document.querySelectorAll('.price-val').forEach(el => {
if (el.dataset[size]) {
el.textContent = el.dataset[size];
}
});
// Sync size dropdown in calculator
const calcSize = document.getElementById('calcSize');
if (calcSize) {
calcSize.value = size;
updateLiveEstimate();
}
}
// Toggle Mobile Distance Field
function toggleMobileInput() {
const mobileType = document.getElementById('calcMobileType').value;
const distanceGroup = document.getElementById('distanceGroup');
if (mobileType === 'mobile') {
distanceGroup.style.display = 'flex';
} else {
distanceGroup.style.display = 'none';
}
updateLiveEstimate();
}
// Live Total Estimate Pricing Matrix
const pricingMatrix = {
full_express: { car: 129, suv: 159, truck: 189, name: 'Express Full' },
full_standard: { car: 229, suv: 279, truck: 329, name: 'Standard Full' },
full_reset: { car: 349, suv: 399, truck: 449, name: 'Full Reset' },
full_showroom: { car: 549, suv: 649, truck: 749, name: 'Showroom Detail' },
int_express: { car: 75, suv: 95, truck: 115, name: 'Express Interior' },
int_standard: { car: 149, suv: 179, truck: 209, name: 'Standard Interior' },
int_reset: { car: 249, suv: 299, truck: 349, name: 'Reset Interior' },
ext_express: { car: 59, suv: 69, truck: 79, name: 'Express Exterior' },
ext_standard: { car: 149, suv: 179, truck: 199, name: 'Standard Exterior + Clay + Fusion 14' },
ext_reset: { car: 279, suv: 329, truck: 379, name: 'Full Exterior Reset' },
v_fusion_solo: { car: 250, suv: 325, truck: 375, name: 'Fusion 14 Standalone' },
v_atomic_solo: { car: 350, suv: 450, truck: 499, name: 'Atomic 14 Standalone' },
cer_v1: { car: 699, suv: 849, truck: 949, name: 'Velocity V1 7H Ceramic' },
cer_v3: { car: 1099, suv: 1299, truck: 1449, name: 'Velocity V3 7H Ceramic' },
cer_v5: { car: 1599, suv: 1899, truck: 2099, name: 'Velocity V5 9H Ceramic' }
};
const addonMatrix = {
fusion_addon: { car: 100, suv: 150, truck: 175, name: 'Fusion 14 Add-on' },
atomic_addon: { car: 200, suv: 275, truck: 325, name: 'Atomic 14 Add-on' }
};
const glassMatrix = {
glass_spray_addon: { car: 50, suv: 50, truck: 50, name: 'Glass Spray Add-on' },
glass_spray_solo: { car: 99, suv: 149, truck: 179, name: 'Glass Spray Standalone' },
glass_ceramic: { car: 149, suv: 199, truck: 249, name: 'Glass Ceramic Coating' }
};
function updateLiveEstimate() {
const size = document.getElementById('calcSize').value;
const pkgKey = document.getElementById('calcPackage').value;
const addonKey = document.getElementById('calcAddon').value;
const glassKey = document.getElementById('calcGlass').value;
const mobileType = document.getElementById('calcMobileType').value;
const miles = parseFloat(document.getElementById('calcMiles').value) || 0;
let total = 0;
let summaryItems = [];
// Main Package
if (pkgKey !== 'none' && pricingMatrix[pkgKey]) {
const pkgPrice = pricingMatrix[pkgKey][size];
total += pkgPrice;
summaryItems.push(`${pricingMatrix[pkgKey].name} ($${pkgPrice})`);
}
// Velocity Addon
if (addonKey !== 'none' && addonMatrix[addonKey]) {
const addonPrice = addonMatrix[addonKey][size];
total += addonPrice;
summaryItems.push(`${addonMatrix[addonKey].name} (+$${addonPrice})`);
}
// Glass Protection
if (glassKey !== 'none' && glassMatrix[glassKey]) {
const glassPrice = glassMatrix[glassKey][size];
total += glassPrice;
summaryItems.push(`${glassMatrix[glassKey].name} (+$${glassPrice})`);
}
// Mobile Travel Fee Calculation
if (mobileType === 'mobile') {
let mobileFee = 35;
if (miles > 10) {
mobileFee += (miles - 10) * 1.50;
}
total += mobileFee;
summaryItems.push(`Mobile Fee ($${mobileFee.toFixed(2)})`);
} else {
summaryItems.push('In-Shop Service');
}
// Update Display
document.getElementById('grandTotalDisplay').textContent = total.toFixed(2);
document.getElementById('calcBreakdownText').textContent = summaryItems.join(' • ');
}
// Initialize calculator
updateLiveEstimate();
