/*
============================================================
LANYON SINGERS — STYLESHEET
============================================================
This file controls all visual styling for the website.
It is shared across every page (index, about, contact)
via the tag in
each HTML file's .
STRUCTURE:
1. Google Fonts import
2. CSS reset
3. Colour & theme variables (dark + light mode)
4. Base body styles
5. Page transition animation
6. Grain texture overlay
7. Scroll reveal animations
8. Navigation bar
9. Hamburger menu (mobile)
10. Logo theme switching
11. Page wrapper
12. Hero section (homepage)
13. Buttons
14. General sections & typography
15. Audition banner
16. Two-column layout
17. Page header (inner pages)
18. Contact grid
19. Events list
20. Gallery grid
21. Audio section
22. Footer
23. Keyframe animations
24. Responsive / mobile styles
25. Reduced motion
TO CHANGE FONTS:
Visit https://fonts.google.com, pick a font, copy the
@import URL and paste it over the one below. Then update
the --font-serif or --font-sans variable in :root.
TO CHANGE COLOURS:
Edit the values inside :root {} for dark mode, and inside
the @media (prefers-color-scheme: light) block for light mode.
============================================================
*/
/* ============================================================
1. GOOGLE FONTS
Cormorant Garamond — elegant serif used for headings
Jost — clean sans-serif used for body text & nav
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');
/* ============================================================
2. CSS RESET
Ensures consistent sizing and removes default browser spacing.
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ============================================================
2b. ACCESSIBILITY UTILITIES
.sr-only — visually hidden but readable by screen readers.
Used for the skip link label and hidden page h1.
.skip-link — keyboard-only shortcut to jump past the nav.
Invisible until focused; appears in top-left
corner when a keyboard user tabs to it.
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100%;
left: 1.5rem;
z-index: 200;
padding: 0.75rem 1.5rem;
background: var(--text);
color: var(--bg);
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
}
.skip-link:focus {
top: 1rem;
}
/* ============================================================
3. COLOUR & THEME VARIABLES
CSS custom properties (variables) used throughout the file.
Changing a value here updates it everywhere on the site.
DARK MODE (default — black background, warm white text):
--bg : page background colour
--text : main text colour
--mid : muted text (labels, captions, secondary info)
--border : subtle dividing lines and borders
--nav-bg : navigation bar background (semi-transparent)
LIGHT MODE overrides follow below in the @media block.
The site switches automatically based on the visitor's
device/OS setting — no manual toggle needed.
============================================================ */
:root {
--bg: #0a0a0a; /* near-black background */
--text: #f4f0ea; /* warm white text */
--mid: #888880; /* muted grey for labels */
--border: rgba(244, 240, 234, 0.12); /* faint warm-white lines */
--nav-bg: rgba(10, 10, 10, 0.92); /* dark frosted nav */
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Jost', 'Helvetica Neue', sans-serif;
}
/* Light mode — activated automatically when the visitor's device
is set to light theme in their OS/browser settings. */
@media (prefers-color-scheme: light) {
:root {
--bg: #faf8f5; /* warm off-white background */
--text: #0a0a0a; /* near-black text */
--mid: #666660; /* slightly darker muted grey */
--border: rgba(10, 10, 10, 0.12); /* faint dark lines */
--nav-bg: rgba(250, 248, 245, 0.92); /* light frosted nav */
}
}
/* ============================================================
4. BASE BODY STYLES
============================================================ */
html {
font-size: 16px;
scroll-behavior: smooth;
overflow-x: hidden; /* prevents horizontal scrolling on mobile */
width: 100%;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-weight: 300;
line-height: 1.6;
min-height: 100vh;
width: 100%;
max-width: 100%;
position: relative; /* required for overflow-x: hidden on html to take effect */
-webkit-font-smoothing: antialiased;
animation: pageFadeIn 0.5s ease both;
}
/* ============================================================
5. PAGE TRANSITION ANIMATION
Pages fade in on load and fade out when navigating away.
The fade-out is triggered by JavaScript in main.js adding
the class "page-exit" to the body just before navigation.
============================================================ */
@keyframes pageFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.page-exit {
animation: pageFadeOut 0.3s ease forwards;
pointer-events: none; /* prevent clicks during fade-out */
}
@keyframes pageFadeOut {
to { opacity: 0; transform: translateY(-8px); }
}
/* ============================================================
6. GRAIN TEXTURE OVERLAY
A subtle film-grain noise is applied on top of everything
using a fixed SVG filter. It adds texture and depth without
affecting interactivity (pointer-events: none).
To remove the grain effect, delete this entire block.
============================================================ */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1000;
opacity: 0.4;
}
/* ============================================================
7. SCROLL REVEAL ANIMATIONS
Elements with class "reveal" start invisible and slide up
into view as the visitor scrolls down to them.
JavaScript in main.js watches for these elements and adds
the "visible" class when they enter the viewport.
Usage in HTML:
...
...
(slight delay)
...
(more delay)
...
(most delay)
Delay classes are useful for staggering items in a row.
============================================================ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ============================================================
8. NAVIGATION BAR
Fixed to the top of the screen at all times.
Uses backdrop-filter for a frosted-glass effect.
============================================================ */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100; /* sits above all page content */
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 3rem;
border-bottom: 1px solid var(--border);
background: var(--nav-bg);
backdrop-filter: blur(12px); /* frosted glass blur */
-webkit-backdrop-filter: blur(12px); /* Safari support */
}
/* Logo in the top-left corner */
.nav-logo {
display: flex;
align-items: center;
text-decoration: none;
}
.nav-logo img {
height: 36px; /* adjust this value to resize the nav logo */
width: auto;
}
.nav-logo:focus-visible {
outline: 2px solid var(--text);
outline-offset: 4px;
}
/* Navigation links list */
.nav-links {
display: flex;
align-items: center;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--mid);
transition: color 0.3s ease;
position: relative;
}
/* Animated underline on hover and active page */
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px; left: 0;
width: 0; height: 1px;
background: var(--text);
transition: width 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--text);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-links a:focus-visible {
color: var(--text);
outline: 2px solid var(--text);
outline-offset: 4px;
}
/* ============================================================
9. HAMBURGER MENU (mobile only)
Hidden on desktop. On mobile, this button replaces the
nav links and opens a dropdown menu when tapped.
JavaScript in main.js handles the toggle behaviour.
The three elements animate into an X when open.
============================================================ */
.hamburger {
display: none; /* hidden on desktop — shown in mobile styles below */
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 10px 8px;
min-height: 44px;
min-width: 44px;
justify-content: center;
}
.hamburger span {
display: block;
width: 24px;
height: 1px;
background: var(--text);
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Animate bars into an X when menu is open */
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hamburger:focus-visible {
outline: 2px solid var(--text);
outline-offset: 4px;
}
/* ============================================================
10. LOGO THEME SWITCHING
Two versions of each logo are included in the HTML:
.logo-dark — dark-mode logo (e.g. logo-icon-dark.png, logo-full-dark.png)
.logo-light — light-mode logo (e.g. logo-icon-light.png, logo-full-light.png)
CSS shows/hides the correct one based on the visitor's
system theme preference automatically.
============================================================ */
.logo-dark { display: block; }
.logo-light { display: none; }
@media (prefers-color-scheme: light) {
.logo-dark { display: none; }
.logo-light { display: block; }
}
/* ============================================================
11. PAGE WRAPPER
Adds top padding to all pages to account for the fixed nav.
============================================================ */
.page {
padding-top: 80px;
}
/* ============================================================
12. HERO SECTION (homepage only)
The large full-screen opening section on index.html.
============================================================ */
.hero {
min-height: calc(100vh - 80px); /* fills the screen minus the nav */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 2rem;
position: relative;
}
/* Decorative vertical line at the bottom of the hero */
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 1px; height: 80px;
background: linear-gradient(to bottom, var(--border), transparent);
}
/* Large logo in the centre of the hero */
.hero-logo {
width: min(340px, 70vw); /* responsive: never wider than 70% of screen */
height: auto;
margin-bottom: 3rem;
animation: fadeUp 1.2s ease both;
}
.hero-tagline {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 2.5vw, 1.4rem); /* scales with screen width */
font-style: italic;
color: var(--mid);
margin-bottom: 1rem;
animation: fadeUp 1.2s 0.15s ease both;
}
/* Thin horizontal rule between tagline and subtitle */
.hero-divider {
width: 40px; height: 1px;
background: var(--border);
margin: 0 auto 2.5rem;
animation: fadeUp 1.2s 0.25s ease both;
}
.hero-subtitle {
font-size: 0.85rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 3rem;
animation: fadeUp 1.2s 0.35s ease both;
}
/* Stagger the hero button in after the subtitle */
.hero .btn {
animation: fadeUp 1.2s 0.45s ease both;
}
/* ============================================================
13. BUTTONS
Two variants:
.btn — outlined button (transparent background)
.btn-solid — filled button (solid background)
Button colours automatically adapt to dark/light mode.
============================================================ */
.btn {
display: inline-block;
padding: 0.9rem 2.4rem;
border: 1px solid rgba(244, 240, 234, 0.35);
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
color: var(--text);
cursor: pointer;
background: transparent;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn:hover {
background: rgba(244, 240, 234, 0.08);
border-color: rgba(244, 240, 234, 0.6);
}
/* Solid filled button — used for primary calls to action */
.btn-solid {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.btn-solid:hover {
background: transparent;
color: var(--text);
}
.btn:focus-visible {
outline: 2px solid var(--text);
outline-offset: 4px;
}
/* Light mode button adjustments */
@media (prefers-color-scheme: light) {
.btn { border-color: rgba(10, 10, 10, 0.35); }
.btn:hover { background: rgba(10, 10, 10, 0.06); border-color: rgba(10, 10, 10, 0.6); }
}
/* ============================================================
14. GENERAL SECTIONS & TYPOGRAPHY
Shared styles used across all pages for consistent layout.
============================================================ */
/* Section wrapper — limits width and centres content */
section {
padding: 6rem 3rem;
max-width: 1100px;
margin: 0 auto;
}
/* Small uppercase label above headings (e.g. "Our Story") */
.section-label {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 3rem;
display: flex;
align-items: center;
gap: 1rem;
}
/* Decorative line that extends to the right of the label */
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* Large section headings — use inside for italic words */
.section-heading {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 300;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.section-heading em { font-style: italic; }
/* Body paragraph text */
.section-body {
font-size: 1rem;
font-weight: 300;
line-height: 1.8;
color: rgba(244, 240, 234, 0.7);
max-width: 640px;
}
@media (prefers-color-scheme: light) {
.section-body { color: rgba(10, 10, 10, 0.65); }
}
/* Full-width horizontal rule used between sections */
hr.divider {
border: none;
border-top: 1px solid var(--border);
}
/* ============================================================
15. AUDITION BANNER
The highlighted recruitment section used on index and about.
Uses a two-column grid: text on the left, button on the right.
============================================================ */
.audition-banner {
border: 1px solid var(--border);
padding: 4rem;
display: grid;
grid-template-columns: 1fr auto; /* text fills space, button shrinks to fit */
gap: 2rem;
align-items: center;
background: rgba(244, 240, 234, 0.02);
}
@media (prefers-color-scheme: light) {
.audition-banner { background: rgba(10, 10, 10, 0.02); }
}
.audition-label {
font-size: 0.8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 1rem;
}
.audition-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 300;
line-height: 1.1;
}
/* Row of voice part tags (Soprano, Alto, Tenor, Bass) */
.audition-voices {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.voice-tag {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.4rem 1rem;
border: 1px solid var(--border);
color: var(--mid);
}
/* ============================================================
16. TWO-COLUMN LAYOUT
Used for side-by-side content blocks (heading + body text).
Collapses to a single column on mobile.
============================================================ */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
/* ============================================================
17. PAGE HEADER (inner pages)
The large title area at the top of About, Contact, Events,
and Gallery pages. Sits just below the nav bar.
============================================================ */
.page-header {
padding: 6rem 3rem 3rem;
border-bottom: 1px solid var(--border);
}
.page-header .section-label {
margin-bottom: 1.5rem;
}
.page-header-title {
font-family: var(--font-serif);
font-size: clamp(3.5rem, 8vw, 6rem);
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.02em;
}
.page-header-title em { font-style: italic; }
/* ============================================================
18. CONTACT GRID
A grid of contact cards on the Contact page.
Cards sit side-by-side on desktop, stack on mobile.
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1px; /* gap shows the background as dividing lines */
border: 1px solid var(--border);
background: var(--border);
overflow: hidden;
}
.contact-item {
background: var(--bg);
padding: 2.5rem;
transition: background 0.3s ease;
}
.contact-item:hover { background: rgba(244, 240, 234, 0.03); }
@media (prefers-color-scheme: light) {
.contact-item:hover { background: rgba(10, 10, 10, 0.03); }
}
.contact-item-label {
font-size: 0.8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 1.5rem;
}
.contact-item-value {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 300;
color: var(--text);
text-decoration: none;
display: block;
transition: opacity 0.2s ease;
word-break: break-word; /* prevents long email addresses overflowing */
}
.contact-item-value:hover { opacity: 0.65; }
.contact-item-value:focus-visible {
opacity: 0.65;
outline: 2px solid var(--text);
outline-offset: 3px;
}
.contact-item-note {
font-size: 0.82rem;
color: var(--mid);
margin-top: 0.75rem;
}
/* ============================================================
19. EVENTS LIST
Used on events.html to display upcoming and past concerts.
TO ADD AN EVENT — in events.html, use this structure:
