Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Redesigning the Brandi Carlile Event Page: Modal Integration, S3 Asset Management, and Brand-Aligned Theming

Overview

We recently completed a redesign of the Brandi Carlile artist event page at brandicarlile.queenofsandiego.com to improve booking conversion and align visual theming with the artist's brand identity. This involved three distinct technical challenges: fixing the Reserve Now button to trigger the booking modal, sourcing and optimizing artist photography, and rebuilding the page's color scheme and layout to reflect Brandi Carlile's folk/Americana aesthetic.

What Was Done

  • Modified /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/brandicarlile/index.html to integrate modal booking functionality
  • Verified and optimized S3 asset paths for artist imagery across the brandicarlile bucket and root domain bucket
  • Retheamed the page from cobalt blue to an earthy forest-green and warm-amber palette
  • Deployed changes to staging environment at https://queenofsandiego.com/_staging/brandicarlile.html

Technical Details: Modal Button Integration

The original page's "Reserve Now" button was a standard anchor link, which didn't trigger the booking system modal. We replaced all CTA button elements with proper <button> tags invoking the jadaOpenBook() function, a global JavaScript handler exposed in the site's shared booking module.

Changes made:


<!-- Before -->
<a href="#" class="btn btn-primary">Reserve Now</a>

<!-- After -->
<button onclick="jadaOpenBook()" class="btn btn-primary">Reserve Now</button>

This pattern was applied across four distinct sections:

  • Navigation bar primary CTA
  • Hero section call-to-action
  • Mid-page hook/value proposition section
  • Pricing and footer CTAs

The jadaOpenBook() function is defined in the shared event booking JavaScript library (loaded globally across all Rady Shell event pages). It handles modal initialization, focus management, and ARIA attributes for accessibility compliance.

S3 Asset Pipeline and Image Sourcing

We needed to verify that Brandi Carlile imagery was properly accessible and optimized for delivery. Our investigation revealed:

  • brandicarlile.jpg exists at https://queenofsandiego.com/assets/images/concert-nights/brandicarlile.jpg (root domain bucket)
  • The image is served via CloudFront distribution with gzip compression enabled
  • No artist-specific images existed in the brandicarlile S3 bucket (which is used for event-specific overrides)

Asset reference structure:


S3 Bucket: queenofsandiego.com
├── /assets/images/concert-nights/
│   ├── brandicarlile.jpg
│   ├── (other artist images)

Rather than creating separate buckets, we leveraged the existing centralized asset structure. This reduces operational overhead and ensures consistent cache invalidation patterns across all event pages. The image is referenced directly in the HTML:


<div class="hero" style="background-image: url('https://queenofsandiego.com/assets/images/concert-nights/brandicarlile.jpg');">
  <div class="hero-overlay"></div>
</div>

We also included the same image as the lead element in a 3-photo gallery strip below the hero for narrative continuity and to reinforce artist recognition.

Brand-Aligned Color Theming

Brandi Carlile's artistic brand centers on folk, Americana, and introspective songwriting. The original cobalt-blue palette didn't align with this identity. We redesigned using an earthy, warm color scheme:

  • Primary: Deep forest green (#2c4934) — evokes natural, grounded aesthetics
  • Accent: Warm amber (#d4a843) — suggests warmth, acoustic instrumentation, stage lighting
  • Background: Parchment cream (#f5ede0) — vintage vinyl/folk album aesthetic
  • Secondary: Dark warm brown (custom shades between #3d2817 and #5a4a3a) — wood, authenticity, earthy tones

These colors were applied as CSS variables in the page's stylesheet, allowing for consistent theming across components:


:root {
  --color-primary: #2c4934;
  --color-accent: #d4a843;
  --color-bg: #f5ede0;
  --color-text-dark: #1a1a1a;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border: 2px solid var(--color-accent);
}

.hero-overlay {
  background: linear-gradient(135deg, rgba(44, 73, 52, 0.6), rgba(212, 168, 67, 0.4));
}

The gradient overlay applied to the hero image uses transparency to preserve the artist photo while establishing brand colors. This technique balances visual impact with legibility of the image itself.

Staging and Deployment

Per standing deployment rules, all changes were tested in the staging environment before pushing to production. The staging URL follows the pattern:


https://queenofsandiego.com/_staging/brandicarlile.html

This staging path is configured in the root domain CloudFront distribution to serve directly from the _staging prefix in the S3 bucket, with cache TTL set to 60 seconds for rapid iteration during review cycles.

The production deployment, once approved, updates the main event subdomain through the Rady Shell events infrastructure, which uses Route53 CNAME records pointing to the event-specific CloudFront distribution.

Key Architectural Decisions

  • Centralized asset bucket: Rather than creating separate S3 buckets per event, we use a single organized directory structure. This simplifies cross-event image reuse and reduces CloudFront distribution management overhead.
  • CSS variables for theming: Using --color-* custom properties allows future designers to swap themes without touching HTML, supporting A/B testing or seasonal variations.
  • Inline background images: The hero uses a CSS background image rather than an <img> tag, enabling the gradient overlay to sit cleanly above the image without additional DOM nesting.
  • Modal as global function: By keeping jadaOpenBook() in a shared library, all event pages benefit from unified booking logic and consistent user experience.

What's Next