<div class="blur-container">
  <div class="blur-layer layer1"></div>
  <div class="blur-layer layer2"></div>
  <div class="blur-layer layer3"></div>
  <div class="blur-layer layer4"></div>
</div>

.blur-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.blur-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blur-layer.layer1 {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

.blur-layer.layer2 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
}

.blur-layer.layer3 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
}

.blur-layer.layer4 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
}

Ballantyne Law

/ Gold Coast, Australia
Legal expertise meets purposeful design.
  • UX & UI Design
  • Modular Content
  • Custom Development

Project overview

We collaborated with James and his team to build a digital presence that reflects their standing in Australian law. Moving away from cookie-cutter templates, we developed a professional, responsive platform designed to serve both new and returning clients.
It’s a high-performance tool built for a high-stakes industry.

The challenge

The goal was to create a site that balanced a polished, authoritative look with real-world functionality. We needed to organize complex legal information into a layout that felt accessible and easy to navigate on any device.
The real test was ensuring that the site’s "behind-the-scenes" performance was as sharp as its visual design.

What we did
(and what we avoided)

  • Custom legal-first architecture

  • Fully integrated blog

  • High-performance coding

  • Tailored content strategy

  • Generic "law firm" templates
  • Information overload
  • Clunky mobile navigation
  • Poorly structured SEO

Our focus lies in delivering tangible bottom line outcomes that make a real impact.

  • Custom Web Development
    Building a responsive, high-performance site from the ground up.
  • SEO & Visibility Strategy
    Optimising every page to ensure the firm ranks for key legal terms.
  • Blog System Integration
    Developing a user-friendly CMS for the team to share regular legal updates.
  • User Experience Design
    Mapping out a logical journey for clients seeking specific legal services.
  • Performance Tuning
    Fine-tuning the backend to guarantee a smooth browsing experience.
Studio Quatro made the entire process remarkably smooth and efficient. From the initial discussions through to the final delivery. The website presents our firm in a professional, modern light and has already begun to add value to our business.
James / Managing Director of Ballantyne Law

Keep exploring