/* =============================================================
CELADUS.TV — styles.css
Sections:
1. Reset + Accessibility
2. Typography
3. Site Header
4. Navigation — Desktop
5. Mobile Menu (hamburger + slide-down drawer)
6. Content Layout
7. About Page
8. Audio Page
9. Video Page
10. Photo Page
11. Archive Page
12. Contact Form
13. Responsive Breakpoints
============================================================= */
/* -------------------------------------------------------------
1. Reset + Accessibility
------------------------------------------------------------- */
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
font-family: 'EB Garamond', serif; /* baseline for all elements; blackletter overrides where needed */
}
/*
Skip-to-content link — visually hidden until focused.
Required for keyboard and screen reader users (WCAG 2.4.1).
Add Skip to main content
as the very first element inside on every page.
*/
.skip-link {
position: absolute;
top: -100%;
left: 8px;
background: #000;
color: #fff;
padding: 8px 16px;
font-family: 'EB Garamond', serif;
font-size: 1rem;
z-index: 999;
transition: top 0.15s;
}
.skip-link:focus { top: 8px; }
/* -------------------------------------------------------------
2. Typography
Fonts loaded via Google Fonts in each page's :
UnifrakturMaguntia — headings, nav links, buttons
EB Garamond — body text, captions, labels
------------------------------------------------------------- */
h1 {
font-family: 'UnifrakturMaguntia', serif;
font-size: 5.5em;
margin: 20px 0 0.25em;
color: #000;
}
h2 {
font-family: 'EB Garamond', serif;
font-size: 3em;
letter-spacing: 0.08em; /* tracked caps — archive and video sections override this */
margin: 20px 0;
}
/* Shared font family — override text-align per context */
p, a {
font-family: 'EB Garamond', serif;
margin-bottom: 0.15em;
}
p {
font-size: 1.1rem;
line-height: 1.6;
text-align: left;
}
a {
font-size: 1em;
color: #000;
text-decoration: none;
transition: opacity 0.2s ease;
}
a:hover {
text-decoration: underline;
opacity: 0.6;
}
/* -------------------------------------------------------------
3. Site Header — shared across all pages
.top contains: h1 (site title) + .topbar (nav or hamburger)
Background is set so the mobile drawer slides cleanly beneath it.
------------------------------------------------------------- */
.top {
max-width: 980px;
margin: 0 auto 16px;
padding: 60px 20px 10px;
text-align: center;
background: #fff; /* blocks mobile drawer from showing through */
position: relative; /* establishes stacking context */
z-index: 201; /* sits above drawer (200) and backdrop (199) */
}
.top h1 {
margin: 0 0 24px; /* space between title and nav */
font-size: 5.5em;
line-height: 1;
}
/* -------------------------------------------------------------
4. Navigation — Desktop inline links
Hidden at ≤600px and replaced by the hamburger menu.
------------------------------------------------------------- */
.topbar {
display: flex;
justify-content: center;
align-items: center;
}
.links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: clamp(12px, 4vw, 120px);
margin: 0;
padding: 0;
}
.nav-link {
font-family: 'UnifrakturMaguntia', serif;
font-size: clamp(1.1rem, 3.4vw, 2.4rem);
letter-spacing: 0.05em;
line-height: 1.1;
transition: opacity 0.2s ease;
}
/*
Active/current page link — dimmed and non-clickable.
Uses an explicit color instead of opacity so only the link text is
affected (not child elements), and contrast stays above WCAG AA 4.5:1.
*/
.nav-link.active {
color: rgba(0, 0, 0, 0.45);
pointer-events: none;
text-decoration: underline;
}
/* -------------------------------------------------------------
5. Mobile Menu — hamburger button + slide-down drawer
How it works:
- At ≤600px: .links is hidden, .menu-button is shown
- Clicking the button runs nav.js → openMenu()
- Drawer slides down from top; header stays visible above it
- JS sets padding-top on the drawer to match the header height
- Clicking the backdrop, pressing Escape, or resizing past 600px
closes the menu
------------------------------------------------------------- */
/* Hamburger toggle button */
.menu-button {
display: none; /* shown via media query below */
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
font-size: 1.8rem;
line-height: 1;
color: #000;
}
/* Slide-down drawer */
.menu-drawer {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 200; /* below .top (201) so header stays on top */
padding: 0 32px 36px; /* padding-top injected by nav.js */
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
box-shadow: 0 6px 24px rgba(0,0,0,0.1);
overflow-y: auto;
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.menu-drawer[hidden] { display: none; }
.menu-drawer.is-open { transform: translateY(0); }
/* Drawer nav links */
.menu-link {
font-family: 'UnifrakturMaguntia', serif;
font-size: 2.4rem;
color: #000;
text-decoration: none;
transition: opacity 0.2s ease;
}
.menu-link:hover { opacity: 0.6; text-decoration: underline; }
/* Active/current page — mirrors desktop nav treatment */
.menu-link[aria-current="page"] {
color: rgba(0, 0, 0, 0.45);
pointer-events: none;
text-decoration: underline;
}
/* Semi-transparent backdrop behind the open drawer */
.menu-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 199;
}
.menu-backdrop[hidden] { display: none; }
/* Switch to hamburger on narrow screens */
@media screen and (max-width: 600px) {
.links { display: none; }
.menu-button { display: block; }
}
/* -------------------------------------------------------------
6. Content Layout
.content-wrapper — max-width container, used as on most pages
.content — inner alignment wrapper (centered by default)
------------------------------------------------------------- */
.content-wrapper {
max-width: 980px;
margin: 0 auto;
padding: 20px 40px;
min-height: 100vh;
}
.content {
color: #000;
max-width: 640px;
margin: 0 auto;
}
/* About page bio doesn't need full viewport height */
.about-page .content-wrapper { min-height: auto; }
/* -------------------------------------------------------------
7. About Page
------------------------------------------------------------- */
/* Profile / hero image */
.main-pic {
max-width: 100%;
height: auto;
padding-top: 20px;
}
/* -------------------------------------------------------------
8. Audio Page — left-aligned column matching video-section layout
------------------------------------------------------------- */
/* Outer column — same max-width as .video-section */
.audio-layout {
max-width: 800px;
margin: 0 auto;
}
/* Album titles — 1.8rem to match video-section h2 */
.audio-layout h2 {
font-size: 1.8rem;
letter-spacing: 0.12em;
width: 80%;
margin: 30px auto 8px;
text-align: left;
}
/* Band/year and role lines — same 80% column as title and player */
.audio-layout .work-byline,
.audio-layout .meta {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.audio-layout .work-byline { margin-bottom: 4px; }
/* Player container — 80% wide, left edge aligned with title */
.bandcamp-embed {
display: flex;
justify-content: flex-start;
width: 80%;
margin: 12px auto 40px;
}
/* The embedded iframe player */
.bc-player {
width: 100%;
max-width: 100%;
height: 630px;
border: 0;
display: block;
}
/* -------------------------------------------------------------
9. Video Page — lightbox modal player
Thumbnails sit inline; clicking opens a full-screen lightbox.
video-lightbox.js handles open / close / keyboard dismiss.
------------------------------------------------------------- */
.video-section {
margin: 50px auto;
max-width: 800px;
}
/*
Video title heading — 1.8rem to match audio .content h2 (unified work-title size).
Scoped so it doesn't inherit the global h2 size (3em).
*/
.video-section h2 {
font-family: 'EB Garamond', serif;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
width: 80%;
margin: 0 auto 8px;
text-align: left;
}
/* Band/artist name and year — video: left-aligned at 80% width; audio: centered */
.work-byline {
font-size: 0.95rem;
letter-spacing: 0.05em;
margin: 0 auto 20px;
}
.video-section .work-byline {
width: 80%;
text-align: left;
margin-bottom: 4px;
}
/* Role credit — same 80% column as byline, sits just above the player */
.video-section > .meta {
display: block;
width: 80%;
margin: 0 auto 12px;
text-align: left;
font-size: 0.95rem;
}
/* Thumbnail wrapper — same 80% column as the title and description */
.video-player-wrapper {
width: 80%;
margin: 0 auto;
}
/*
Clickable thumbnail — opens the lightbox on click.
To add a new video: copy a .video-section block in video.html,
set data-src to the YouTube embed URL and data-poster to the thumbnail image.
*/
.video-thumb {
position: relative;
display: block;
width: 100%;
padding: 0;
border: none;
background: #000;
cursor: pointer;
overflow: hidden;
}
.video-thumb img {
width: 100%;
height: auto;
display: block;
transition: opacity 0.2s;
}
.video-thumb:hover img { opacity: 0.85; }
/* Circular play button overlay */
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
background: rgba(0, 0, 0, 0.55);
border-radius: 50%;
pointer-events: none;
transition: background 0.2s;
}
.play-btn::after {
content: '';
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 11px 0 11px 20px;
border-color: transparent transparent transparent #fff;
}
.video-thumb:hover .play-btn,
.video-thumb:focus-visible .play-btn { background: rgba(0, 0, 0, 0.80); }
/*
Description block — same width as player so text
doesn't extend past the video frame edges.
*/
.video-description {
width: 80%;
margin: 20px auto 0;
line-height: 1.6;
text-align: left;
}
/* ---- Video Lightbox Modal ---- */
.lightbox {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.88);
cursor: pointer;
}
.lightbox-inner {
position: relative;
z-index: 1;
width: min(92vw, 960px);
}
.lightbox-inner video {
width: 100%;
height: auto;
max-height: 80vh;
display: block;
background: #000;
}
.lightbox-close {
position: absolute;
top: -44px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 2.2rem;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
opacity: 0.8;
font-family: 'EB Garamond', serif;
transition: opacity 0.15s;
}
.lightbox-close:hover { opacity: 1; }
/* -------------------------------------------------------------
10. Photo Page
------------------------------------------------------------- */
.photo-grid {
max-width: 1200px;
margin: 0 auto;
}
.photo-item {
margin-bottom: 60px;
text-align: center;
}
.photo-item img {
width: 100%;
max-width: 1000px;
height: auto;
display: block;
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.photo-caption {
margin-top: 15px;
font-size: 0.9em;
color: #666;
font-style: italic;
}
/* -------------------------------------------------------------
11. Archive Page
Hierarchy: medium (h2) → format (h3) → collection → items
------------------------------------------------------------- */
.archive {
max-width: 980px;
margin: 0 auto 80px;
padding: 20px 40px;
}
/* Medium heading — VIDEO, AUDIO */
.archive h2 {
font-family: 'EB Garamond', serif;
font-size: 2.2em;
margin: 48px 0 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
padding-top: 18px;
border-top: 1px solid rgba(0,0,0,0.14);
}
/* Format heading — Music Video, Visualizer, etc. */
.archive h3 {
font-size: 1.5em;
margin: 22px 0 10px;
text-align: left;
font-weight: 600;
}
.group { margin-bottom: 20px; }
/* Collection — grouped by artist or client */
.collection {
margin: 10px 0 18px;
padding: 10px 0 6px 12px;
border-top: 1px solid rgba(0,0,0,0.08);
border-left: 2px solid rgba(0,0,0,0.08);
}
.collection:first-of-type { border-top: 0; }
.collection-title {
font-size: 1.2em;
font-weight: 600;
margin: 0 0 8px;
text-align: left;
}
.collection-title .count {
font-size: 0.9em;
opacity: 0.6;
margin-left: 8px;
}
.items {
list-style: none;
margin: 0;
padding: 0;
}
.item {
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
text-align: left;
}
.item:last-child { border-bottom: 0; }
.item a,
.item .title {
font-size: 1.15em;
display: inline-block;
text-align: left;
}
/* Shared metadata style — used on archive and video pages */
.meta {
display: block;
font-size: 0.95em;
opacity: 0.75;
margin-top: 2px;
}
.note {
display: block;
font-size: 0.9em;
opacity: 0.6;
margin-top: 2px;
font-style: italic;
}
/* -------------------------------------------------------------
12. Contact Form
Backend: Formspree (https://formspree.io)
Set the form action URL in contact.html before going live.
------------------------------------------------------------- */
.contact-section {
max-width: 600px;
margin: 0 auto;
padding: 0 20px 80px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-family: 'EB Garamond', serif;
font-size: 1rem;
opacity: 0.65;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.form-group input,
.form-group textarea {
font-family: 'EB Garamond', serif;
font-size: 1.15rem;
padding: 10px 12px;
border: 1px solid rgba(0,0,0,0.22);
border-radius: 0;
background: transparent;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: rgba(0,0,0,0.65); }
.form-group textarea {
resize: vertical;
min-height: 140px;
}
.form-submit {
font-family: 'UnifrakturMaguntia', serif;
font-size: 1.5rem;
padding: 10px 32px;
background: #000;
color: #fff;
border: none;
cursor: pointer;
transition: opacity 0.2s ease;
align-self: flex-start;
letter-spacing: 0.04em;
}
.form-submit:hover { opacity: 0.7; }
/* Shown after successful submission via JS */
.form-success {
display: none;
font-family: 'EB Garamond', serif;
font-size: 1.2rem;
padding: 16px;
border: 1px solid rgba(0,0,0,0.2);
text-align: center;
margin-top: 10px;
}
/* -------------------------------------------------------------
13. Responsive Breakpoints
------------------------------------------------------------- */
/* --- Tablet (≤768px) --- */
@media screen and (max-width: 768px) {
h1 { font-size: 4em; }
h2 { font-size: 2em; }
.main-pic { max-width: 90%; }
/* Video player, title, artist line, role, and description collapse to full width */
.video-section h2,
.video-section .work-byline,
.video-section > .meta,
.video-player-wrapper,
.video-description,
.lightbox-inner { width: 100%; }
/* Audio — same collapse */
.audio-layout h2,
.audio-layout .work-byline,
.audio-layout .meta,
.bandcamp-embed { width: 100%; }
/* Archive */
.archive h2 { font-size: 1.8em; }
.archive h3 { font-size: 1.35em; }
/* Photo */
.photo-item { margin-bottom: 40px; }
.photo-caption { font-size: 0.85em; padding: 0 10px; }
}
/* --- Mobile (≤480px) --- */
@media screen and (max-width: 480px) {
.top {
padding: 44px 14px 16px;
margin-bottom: 22px;
}
.top h1 { font-size: 3.8em; }
/* Reduce side padding — 40px is too tight on small screens */
.content-wrapper,
.archive { padding: 16px 20px; }
/* Bandcamp player — shorter height to reduce blank space */
.bc-player { width: 92vw; height: 520px; }
.archive h2 { font-size: 1.6em; }
.meta, .note { font-size: 0.92em; }
}