Cornerstone Lock & Key is a Tiny Mammoth template for a bonded, 24/7 locksmith. These are the notes on why it looks and behaves the way it does: the navy-and-brass security voice, the tumbler-unlock signature, and the choices engineered to turn a scared, locked-out visitor into a phone call.
Most locksmith marketing shouts. Flashing red banners, "CALL NOW!!!" in all caps, a countdown clock — the visual language of an emergency ad. But the person landing on this page is already in the emergency. They're standing in the cold outside their own door, or watching their keys through the car window. Adding more alarm to a panicked buyer doesn't build trust; it makes them keep scrolling for someone who sounds steady.
So this template moves the opposite way. It takes the archetype of the calm, competent tradesperson — the one who shows up, reads the lock, and quietly opens it — and renders it as a brand. Deep midnight navy reads as night-shift, always-on, professional. Brass and bronze read as keys, tumblers, real hardware — warm and physical, not synthetic. IBM Plex Mono on the technical details (license numbers, ETAs, step labels) signals precision and record-keeping, the way a real trade invoice does.
The result is a bonded, 24/7 security aesthetic that reassures instead of shouting. The message underneath every pixel is: stay calm, we've done this a thousand times, we're already on the way. That posture is what a scared buyer is actually shopping for.
Every interaction on the page is pointed at the same outcome — reassure fast, then make the call effortless. Here's how each piece is built.
The hero holds an SVG padlock, cut away so you can see its guts. Five pin stacks sit misaligned across the shear line, the shackle closed. As the hero scrolls into view — or the moment the pointer touches the Call button — the pins each slide to their gate, the shear line flashes, and the shackle springs open on a spring-loaded cubic-bezier. It's a literal picture of the service: the exact thing the buyer needs to happen, happening, calmly and correctly.
The animation is pure CSS transitions toggled by a single .unlocked class; JavaScript only decides when to add it. Each pin carries its own rest offset and staggered delay so they settle like real tumblers rather than snapping in unison.
/* pins rest out of line, then drop to the gate */
.lockart .pin{--y:0px;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.lockart .pin.p1{--y:15px;transition-delay:.02s}
.lockart.unlocked .pin{--y:0px}
.lockart.unlocked .shackle{transform:rotate(-34deg)}The hero sits in near-darkness. A soft brass radial-gradient — the "spotlight" — follows the pointer across it, as if the visitor were holding a small light up to a keyhole in the dark. It's built as one absolutely-positioned layer whose gradient center is driven by two CSS custom properties; a passive pointermove listener writes the coordinates and CSS does the rest, so it stays smooth and never blocks scrolling.
hero.addEventListener("pointermove", e => {
hero.style.setProperty("--mx", x + "%");
hero.style.setProperty("--my", y + "%");
}, { passive: true });On phones — where the vast majority of "locked out right now" searches happen — a fixed bar pins to the bottom of the screen with a brass Call 24/7 button and the live number always in reach. No matter how far the visitor has scrolled or how panicked they are, the primary action is one thumb-tap away. The body reserves matching bottom padding so the bar never covers real content.
@media (max-width:767px){
.callbar{display:grid}
body{padding-bottom:70px}
}Directly under the hero call-to-action sits a strip of hard proof: a 4.9-star rating across 803 reviews, bonded & insured with a BSIS license number, 18 years local, and a ~20-minute average ETA. Fear is answered with facts, in the same eyeful as the phone number, before the visitor has to scroll or wonder whether this is a fly-by-night operation. The license number and review count are set in mono so they read like verifiable record, not marketing.
Set against our other service templates, this one stakes out ground none of the others touch:
This site was hand-coded — plain HTML, CSS, and JavaScript, written line by line. No page builders, no drag-and-drop themes, no off-the-shelf frameworks. Every detail, from the tumbler-unlock lock animation to the sticky call bar, was engineered specifically to move a homeowner toward one action: picking up the phone.
That's the Tiny Mammoth approach to a client website: a template built to convert, not just to look good.