Internal Reference
Everything in style.css — live. Changes here and on the site stay in sync automatically.
1 — Colour
Active palette
Colour ideas — candidates for the palette
Not active — add to :root in style.css to use. All are earthy, mountain-warm tones that sit naturally against the green and off-white.
2 — Typography
Typefaces
Libre Franklin — Body & UI
--font-body · self-hosted variable · wght 100–900 · italic
Fraunces — Display
--font-display · self-hosted variable · all headings/titles · wght 100–900
.page-title — Page H1
font-size: 1.875rem → 2.25rem · font-weight: 650 · var(--font-display)
Raw heading scale — h2 / h3 / h4
font-family: var(--font-display) · font-weight: 600 · line-height: 1.2
.article-body h2 — var(--font-display)
var(--font-display) · wght 650 · clamp(1.2rem, 2.5vw, 1.5rem) · use for article h2/h3, hero title only
Body prose — .body-text & .article-body p
Liam is a British guitarist and singer based in Banff, Alberta, with over 150 live performances across the Canadian Rockies. His sets move naturally from relaxed background music to upbeat crowd moments.
font-size: 1rem · line-height: 1.75
.body-text adds max-width: 40rem — use on page layouts.
.article-body wraps the full article body and inherits the same size and line-height.
Labels & eyebrows
.section-label · 0.75rem · 0.2em tracking
.journal-featured__eyebrow · clip-path bookmark · drop-shadow · anchored to card top edge
.article-tag
.journal-card__tag
.text-link — Inline body copy links
Find out more about live music in Banff and upcoming sets at the Rose and Crown.
color: var(--lm-blue) · underline · hover: var(--lm-green) · focus-visible: blue outline
Use .text-link for inline prose links on general pages. Article body links (.article-body a) use the same treatment automatically.
3 — Buttons
On light background
On dark background
.btn.btn-light
Contact Me.btn.btn-outline (dark)
Learn MoreDisabled state
opacity: 0.45 · cursor: not-allowed · pointer-events: none
Focus state — keyboard navigation
Tab to this button to see the focus ring:
Book a Set:focus-visible → outline: 3px solid var(--lm-blue) · offset: 3px
Base token — .btn
All buttons share: border-radius: 9999px · padding: 0.65rem 1.6rem · font-size: 0.9rem · font-weight: 500 · transition: 160ms ease
4 — Forms
Error state
.form-input--error · border: var(--lm-red) · .form-error-message · color: var(--lm-red)
.form-label: 0.8125rem · 0.1em tracking · 0.65 opacity
.form-input / .form-textarea: 1.5px border · rgba(40,53,31,0.18) → focus: var(--lm-green)
.form-input--error / .form-textarea--error: border + shadow → var(--lm-red)
5 — Spacing
.page-wrapper: max-width 64rem · auto margins · padding 0.5rem 1rem 3.5rem (mobile) → 0.625rem 3rem 4rem (desktop)
6 — Components: Article
Article hero — .article-hero · 16:9
aspect-ratio: 16/9 · border-radius: 0.875rem · margin: 1.5rem 0 2.5rem
Article metadata
Article body — .article-body
The Beaver Bar is Banff's only backpacker pub right on Banff Avenue. It's a good warm-up spot — relaxed crowd, cold beer, and the kind of energy you get when a lot of people are at the start of their evening rather than the end of it.
These times work well for Saturdays, but live music schedules can shift.
7 — Components: Journal Card
8 — Components: Featured / Bookmarked Banner
Used at the top of journal.html. Pin a new article by updating that block manually.
Thinking about live music for your Banff wedding? Here's what the experience actually looks like.
9 — Components: CTA Band
One consolidated component — .cta-band. Legacy class names .booking-cta, .lm-bottom-cta, .epk-cta are aliases and continue to work. Use .cta-band for any new instances.
.sets-contact-note — Sets page footer
Want to be on the list?
Get in touch10 — Navigation
Desktop nav — .nav-desktop
Mobile nav — .nav-mobile · 820px breakpoint
position: absolute · top: 100% of header · clip-path: inset() · 85ms ease-out · backdrop rgba(0,0,0,0.5)
Background: var(--lm-green) · Nav links: 0.8rem · 0.08em tracking · cream · 0.75 opacity → 1 on hover
Focus: outline: 2px solid var(--lm-cream) · offset: 4px
11 — Components: Hero
Full-bleed, full-viewport section. Background video with fallback JPG. Centred content with staggered CSS animations (opacity/blur-in, 2–3s delays). Only used on index.html.
.hero · min-height: 100dvh · .hero-media (bg img) · .hero-overlay (gradient) · .hero-inner (max-width: 960px)
Animations: hero-fade-in (subtitle, text, CTAs) · hero-blur-in (title) · delays: 2s / 2.25s / 2.8s / 3s
12 — Components: Testimonial
.lm-testimonial · green bg · .lm-testimonial__quote: clamp(1rem, 2.2vw, 1.35rem) · italic · wght 300 · .lm-testimonial__name: wght 600
13 — Components: Gigs List
Responsive grid: 3 columns (mobile) → 4 (641–1024px) → 5 (1024px+). Populated by main.js from a Google Sheet via PapaParse. Falls back to "Loading…" then a message if the sheet is empty.
.gigs-list → .gig-row (grid) → .gig-col-date / -time / -venue / -notes / -link
Grid breakpoints: 640px (3→4 cols) · 1024px (4→5 cols). Header row via .gig-header.
Home
Sets
About