/* pondlife — 2026 site Light, bold "dusty" palette: each page gets its own background tint, dark ink text throughout. Reds are a muted brick/terracotta family (in the spirit of Forbo Marmoleum "Berlin Red" flooring, sampled from a real swatch photo) rather than a vivid orange-red. Contrast checked (WCAG 2.2 AA) against every page background (cream / pale dusty pink / dusty blue): ink on any page bg 12.0–16.7:1 ink-dim (muted text) on any 5.0–6.9:1 (≥4.5 required for body text) red-ink (headlines/accents) 4.3–5.9:1 (large text / non-text only) red-strong (error text) 5.0–6.9:1 (≥4.5 required for body text) cream on red (buttons) 5.1:1 red on dark cover overlay 3.3:1 (large text only) The album-art "out now" overlay sits on its own fixed dark scrim, so its text stays legible there regardless of the page's own background colour. */ :root { --page-cream: #f7f1e6; --page-pink: #f0dcd5; --page-blue: #c7d0da; --bg: var(--page-cream); --ink: #150b2e; --ink-dim: #505069; --cream: #fff4e8; --cream-dim: #ffd2c2; --red: #b3452d; --red-ink: #9e3d28; --red-strong: #8e3724; --line: rgba(21, 11, 46, 0.18); --shell: min(72rem, 100%); --gutter: clamp(1rem, 4vw, 2.5rem); --radius: 2px; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; color-scheme: light; } /* Per-page background: set via . Home/404 use the default cream above. */ [data-page="shows"] { --bg: var(--page-pink); } [data-page="press"] { --bg: var(--page-blue); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; font-family: var(--sans); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.5; color: var(--ink); background: var(--bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--radius); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--gutter); top: 0; z-index: 20; transform: translateY(-120%); background: var(--cream); color: var(--ink); font-weight: 700; padding: 0.6rem 1rem; text-decoration: none; } .skip-link:focus { transform: translateY(0.5rem); color: var(--ink); } .shell { width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- header ---------- */ .site-header { padding-block: clamp(0.85rem, 2.5vw, 1.5rem); border-bottom: 3px solid var(--ink); } .site-header .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem clamp(1rem, 3vw, 2rem); } .brand { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; text-decoration: none; line-height: 1; } .brand:hover { color: var(--red-ink); } .site-nav ul, .platforms ul, .social ul, .gigs ol { list-style: none; margin: 0; padding: 0; } .site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem clamp(0.75rem, 2.5vw, 1.75rem); } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.15rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .site-nav a:hover { text-decoration: underline; text-underline-offset: 0.35em; } .site-nav a[aria-current="page"] { font-weight: 800; text-decoration: underline; text-decoration-color: var(--red-ink); text-decoration-thickness: 3px; text-underline-offset: 0.35em; } .social ul { display: flex; align-items: center; gap: 0.15rem; } .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); } .icon-link svg { width: 24px; height: 24px; } .icon-link:hover { color: var(--red-ink); } /* ---------- hero ---------- */ main { flex: 1; } .hero { padding-block: clamp(1.5rem, 5vw, 3.5rem); } .hero .shell { display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); } .cover { position: relative; width: min(34rem, 100%); margin: 0; border: 3px solid var(--ink); } .cover img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* This overlay is a fixed dark scrim printed on the artwork itself, so its text keeps the cream/red-on-dark treatment no matter which page bg is active around it. */ .cover-overlay { position: absolute; inset: auto 0 0 0; display: grid; gap: 0.15rem; padding: clamp(0.6rem, 2.5vw, 1.1rem); background: linear-gradient( to top, rgba(11, 18, 51, 0.94) 0%, rgba(11, 18, 51, 0.88) 62%, rgba(11, 18, 51, 0) 100% ); } .out-now { margin: 0; font-size: clamp(1.6rem, 1rem + 4.5vw, 3rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; color: var(--red); } .cover-title { margin: 0; font-size: clamp(1rem, 0.8rem + 1.4vw, 1.5rem); font-weight: 700; letter-spacing: 0.02em; color: var(--cream); } /* ---------- platform links ---------- */ .platforms { width: min(34rem, 100%); text-align: center; } .platforms h2 { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } .platforms ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .platform-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.9rem; border: 2px solid var(--ink); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; background: transparent; } .platform-link svg { width: 20px; height: 20px; flex: none; } .platform-link:hover { background: var(--ink); color: var(--cream); } .platforms .note { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--ink-dim); } /* ---------- generic sections ---------- */ .section { padding-block: clamp(2rem, 6vw, 4rem); } .section + .section { border-top: 3px solid var(--ink); } .section h1, .section h2 { margin: 0 0 1rem; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; } .section h1 { font-size: clamp(2.2rem, 1.4rem + 4.5vw, 4.5rem); color: var(--red-ink); } .section h2 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.25rem); } .lede { max-width: 44ch; margin: 0 0 1.5rem; color: var(--ink-dim); } /* ---------- gigs ---------- */ .gigs ol { display: grid; gap: 0.75rem; max-width: 48rem; } .gig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-block: 0.85rem; border-top: 2px solid var(--line); } .gig:last-child { border-bottom: 2px solid var(--line); } .gig-date { flex: 0 0 9.5rem; font-weight: 800; letter-spacing: 0.02em; } .gig-venue { flex: 1 1 14rem; min-width: 0; } .gig-tickets { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.9rem; border: 2px solid var(--red); background: var(--red); color: var(--cream); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none; } .gig-tickets:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); } .gig.is-past { color: var(--ink-dim); } .gig.is-past .gig-date, .gig.is-past .gig-venue { text-decoration: line-through; } /* ---------- forms ---------- */ .field { display: grid; gap: 0.35rem; text-align: left; } .field label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .field input { width: 100%; min-height: 48px; padding: 0.6rem 0.75rem; font: inherit; font-size: 1rem; /* keeps iOS from zooming on focus */ color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius); } .field input::placeholder { color: #5d5347; } .form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.6rem 1.4rem; font: inherit; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: var(--radius); cursor: pointer; background: transparent; color: var(--ink); } .btn-primary { background: var(--red); border-color: var(--red); color: var(--cream); flex: 1 1 8rem; } .btn-primary:hover:not(:disabled) { background: var(--cream); border-color: var(--cream); color: var(--ink); } .btn-secondary:hover { background: var(--ink); color: var(--cream); } .btn:disabled { opacity: 0.65; cursor: not-allowed; } .form-status { margin: 0; font-size: 0.9rem; min-height: 1.35rem; color: var(--ink-dim); } .form-status.is-error { color: var(--red-strong); font-weight: 700; } .signup-form { display: grid; gap: 0.85rem; max-width: 26rem; } /* ---------- signup success animation (inline footer form) ---------- */ /* Holds the form and its "welcome" message stacked on top of each other so one can slide out as the other slides in, without the container jumping size. Used by the footer's inline form only — the popup dialog uses the "whizz" effect below instead, since there's a whole modal to dismiss. */ .signup-stage { position: relative; overflow: hidden; } .signup-panel.is-leaving { animation: signup-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .signup-celebrate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding-inline: 0.5rem; } .signup-celebrate[hidden] { display: none; } .signup-celebrate.is-entering { animation: signup-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .signup-celebrate p { margin: 0; font-size: clamp(1.75rem, 1.1rem + 5vw, 3.25rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: var(--red-ink); } @keyframes signup-slide-out { to { transform: translateX(-115%); } } @keyframes signup-slide-in { from { transform: translateX(115%); } to { transform: translateX(0); } } /* ---------- dialog ---------- */ /* Matches whichever page it was opened from, separated from the page by an ink border and a dark, dimmed backdrop. Deliberately NOT overflow:hidden/ auto here — an ancestor's overflow clips descendants' paint even when they're position:fixed, which would trap .whizz-message inside this small box instead of letting it travel the full viewport. The scroll safety net for tall content lives on .dialog-body below instead. */ dialog.signup-dialog { width: min(26rem, calc(100vw - 2rem)); margin: auto; padding: clamp(1rem, 3.5vw, 1.75rem); color: var(--ink); background: var(--bg); border: 3px solid var(--ink); border-radius: var(--radius); } dialog.signup-dialog::backdrop { background: rgba(11, 18, 51, 0.72); } /* On success: the box's own border/background vanish instantly (nothing boxy left on screen), its content whizzes off in one direction, and the "welcome" message — pinned to the full viewport, but still a DOM child of the dialog so it paints above the native ::backdrop rather than under it — chases in from the other side and keeps going, past centre and off the far edge, without ever stopping. The backdrop itself (and the now-invisible dialog) only close once the message's own journey is completely finished, so the dimmed backdrop lasts the whole thing and the site is revealed at the exact moment the message disappears. */ dialog.signup-dialog.is-whizzing { background: transparent; border-color: transparent; } .dialog-body.is-whizzing-out { animation: dialog-whizz-off 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards; } @keyframes dialog-whizz-off { to { transform: translateX(-160%); } } .whizz-message { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; } .whizz-message[hidden] { display: none; } /* Animating the text itself (not the full-viewport flex box around it) so the start/end offsets can be "half the viewport plus half the text's own width" via calc() — an exact fit that starts/ends it just out of sight regardless of viewport width or how long the text renders, rather than a flat vw guess whose relative on-screen time shrank on wider screens once the font-size clamp capped out. ~2s of that is genuinely readable, not just "quick" — legibility matters more here than snappiness. */ .whizz-message.is-active p { animation: whizz-across 2.4s linear forwards; } @keyframes whizz-across { from { transform: translateX(calc(50vw + 50%)); } to { transform: translateX(calc(-50vw - 50%)); } } .whizz-message p { margin: 0; padding-inline: 1rem; font-size: clamp(2rem, 1rem + 7vw, 4.25rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; text-align: center; white-space: nowrap; /* Seen against the dialog's own dark-blue ::backdrop for its whole journey, so cream/white reads far better here than the page-context red-ink used elsewhere. */ color: var(--cream); } .dialog-body { display: grid; gap: clamp(0.6rem, 2vh, 1rem); /* Roughly accounts for the dialog's own padding + border so content never needs more room than the viewport actually has. */ max-height: calc(100dvh - 6rem); overflow: auto; } .dialog-body h2 { margin: 0; font-size: clamp(1.3rem, 1rem + 2vw, 1.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--red-ink); } .dialog-body p { margin: 0; font-size: clamp(0.85rem, 0.8rem + 0.4vw, 1rem); color: var(--ink-dim); } /* Short viewports (e.g. phones in landscape): shrink everything so the whole form stays on screen without scrolling. */ @media (max-height: 30rem) { dialog.signup-dialog { padding: 0.85rem 1rem; } .dialog-body { gap: 0.5rem; } .dialog-body h2 { font-size: 1.15rem; } .dialog-body p { font-size: 0.8rem; } .dialog-body .field label { font-size: 0.75rem; } .dialog-body .field input, .dialog-body .btn { min-height: 40px; } .dialog-body .form-status { min-height: 0; } .signup-celebrate p { font-size: 1.5rem; } } /* ---------- footer ---------- */ .site-footer { border-top: 3px solid var(--ink); padding-block: clamp(1.75rem, 5vw, 3rem); } .footer-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .footer-grid h2 { margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .footer-grid p { margin: 0 0 0.5rem; color: var(--ink-dim); } .footer-grid a { color: var(--ink); } .colophon { margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-top: 1rem; border-top: 2px solid var(--line); font-size: 0.8rem; color: var(--ink-dim); } .colophon p { margin: 0 0 0.25rem; } /* ---------- press page ---------- */ .press-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } @media (max-width: 55rem) { .press-layout { grid-template-columns: 1fr; } } .press-photo { margin: 0; border: 3px solid var(--ink); } .press-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; } .press-photo figcaption { padding: 0.5rem clamp(0.6rem, 2vw, 1rem); font-size: 0.75rem; color: var(--ink-dim); border-top: 3px solid var(--ink); } .press-bio p { max-width: 60ch; margin: 0 0 1rem; color: var(--ink-dim); } .press-bio p:last-child { margin-bottom: 0; } .press-facts { display: grid; gap: 1.5rem; align-content: start; } .press-facts h3 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .press-facts .links { display: grid; gap: 0.4rem; } .track-list { display: grid; gap: 0.5rem; max-width: 32rem; margin: 0; padding: 0; list-style: none; counter-reset: track; } .track-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-top: 2px solid var(--line); } .track-list li::before { counter-increment: track; content: counter(track) ". "; margin-right: 0.35rem; color: var(--ink-dim); } .track-title { flex: 1; } .track-length { color: var(--ink-dim); font-variant-numeric: tabular-nums; } dl.credit-list { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; max-width: 40rem; margin: 0; } dl.credit-list dt { color: var(--ink-dim); } dl.credit-list dd { margin: 0; } .asset-list { display: grid; gap: 0.4rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }