/* ========================================================================== Me You Us Them — site-wide styles Design language matched from imaginaldisk.world: fixed pastel iridescent gradient backdrop, glowing lavender serif type, rectangular holographic- bordered buttons, centered single-column layout. Organized: variables -> reset -> layout -> components -> page sections -> responsive ========================================================================== */ @font-face { font-family: "Unison Pro"; src: url("../fonts/unison-pro-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --gradient-stops: linear-gradient( 45deg, #ebddca, #b6d2dd, #dea4bd, #a581c4, #60cbb6, #8adcde ); --gradient-stops-soft: linear-gradient( 45deg, rgba(239, 232, 223, 0.85), rgba(182, 210, 221, 0.85), rgba(222, 164, 189, 0.85), rgba(165, 129, 196, 0.85), rgba(170, 235, 152, 0.85), rgba(138, 220, 222, 0.85) ); --color-accent: #B48EF0; --color-accent-deep: #9B6EE8; --color-text: rgba(0, 0, 0, 0.85); --color-text-soft: rgba(0, 0, 0, 0.6); --color-border: rgba(0, 0, 0, 0.15); --color-white: #ffffff; --font-serif: "Unison Pro", Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", sans-serif; --nav-height: 76px; --max-width: 900px; } * { box-sizing: border-box; } /* Native scrolling is switched off completely on the home page (see #page-wrapper below) — there's nothing to scroll-behavior: smooth anymore, navigation is entirely a JS-driven transform animation. */ html { height: 100%; overflow: hidden; } body { margin: 0; height: 100%; overflow: hidden; min-height: 100vh; color: var(--color-text); font-family: var(--font-serif); line-height: 1.4; text-transform: uppercase; } /* Fixed background photo, zoomed in 10% beyond a plain "cover" fit. A scale transform is used (rather than a background-size tweak) since "cover" is a fitting algorithm, not a percentage — this is the reliable way to go beyond it. Lives on a dedicated layer so the transform doesn't touch any real content, with a translucent scrim so body text stays legible no matter which part of the image ends up behind it. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)) center center / cover no-repeat, url("../img/hero-band-bg.jpg?v=3") center center / cover no-repeat; transform: scale(1.1) translateX(-1%); filter: blur(0); transition: filter 0.4s ease; } /* Added by main.js the moment the page scrolls off the very top, removed only once it's back at scrollY 0 — independent of scroll direction. */ body.is-scrolled::before { filter: blur(5px); } /* News/Live/Contact: background stays blurred all the time, regardless of scroll position — set directly in each page's class. */ body.bg-blurred::before { filter: blur(5px); } /* TV static, drawn onto this canvas by initStaticOverlay() in main.js — sits directly above the background photo (same fixed layer, painted after it so it visually overlays it) and below all real page content. Rendered at a fraction of screen resolution and scaled up with crisp pixel edges (rather than smoothed) so it reads as chunky analog grain, not a blur. */ #static-overlay { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; image-rendering: pixelated; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Glowing lavender serif treatment, used on the band name / release titles */ .glow-text { color: var(--color-accent); filter: drop-shadow(0 0 24px rgba(180, 142, 240, 0.8)); animation: glow-pulse 2.5s ease-in-out infinite alternate; } @keyframes glow-pulse { 0% { filter: drop-shadow(0 0 8px rgba(180, 142, 240, 0.6)); } 100% { filter: drop-shadow(0 0 28px rgba(180, 142, 240, 0.9)); } } @keyframes mbglow { 0% { background-position: 25% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .btn { display: inline-block; padding: 1rem 2rem; border: 2px solid var(--color-accent); border-radius: 0; font-family: var(--font-serif); font-size: 1.1rem; text-transform: uppercase; color: var(--color-white); background: var(--gradient-stops-soft); background-size: 300% 300%; animation: mbglow 10s ease-in-out infinite alternate; } /* ---------------------------------- Nav ---------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; min-height: var(--nav-height); display: flex; align-items: center; justify-content: flex-start; padding: 0.75rem 1.5rem; } /* Occupies the same top-left spot as .site-nav__links — shown only on the hero, where NAV_VISIBILITY (see initPageNav in main.js) leaves that corner empty, and hidden everywhere the real menu takes over instead. */ .site-nav__brand { font-family: var(--font-serif); font-size: 2.25rem; } /* Keeps .glow-text's lavender color but not its glow — same treatment as .section__heading.glow-text below. */ .site-nav__brand.glow-text { filter: none; animation: none; } .site-nav__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.9rem; list-style: none; margin: 0; padding: 0; } .site-nav__links a { font-family: var(--font-serif); font-size: 1.875rem; color: var(--color-accent); text-decoration: none; } .site-nav__toggle { display: none; } /* Small brand-icon links, pinned to the top-right corner of the nav bar */ .site-nav__social { position: absolute; right: clamp(1rem, 4vw, 2rem); top: 50%; transform: translateY(-50%); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.55rem; list-style: none; margin: 0; padding: 0; } .site-nav__social a { display: inline-flex; color: var(--color-accent); } .site-nav__social svg { width: 33.75px; height: 33.75px; fill: currentColor; display: block; } /* ------------------------------ Page sections ------------------------------ */ .section { padding: 3rem 1.5rem; max-width: var(--max-width); margin: 0 auto; text-align: center; } .section--tight { max-width: 560px; } .section__heading { font-size: clamp(3.75rem, 7.5vw, 4.6875rem); margin-bottom: 2rem; } /* News/Live/Contact keep .glow-text's lavender color but not its glow — same treatment as .site-nav__brand.glow-text above. */ .section__heading.glow-text { filter: none; animation: none; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Home page: a plain vertical stack of exactly-100vh "pages" (nav is fixed/overlaid, not in document flow, so 100vh is the whole frame, not 100vh + nav height) — see initPageNav() in main.js for how this wrapper gets moved. Fixed height (not min-height) on every page matters here: the translateY(-N * 100vh) math driving navigation assumes every page is exactly one viewport tall, so any page whose content overflows that scrolls internally instead (see .page-section's own overflow-y) rather than growing taller and throwing that math off. */ #page-wrapper { transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; } .hero { height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 3rem; } /* Positioned at the bottom of whichever section it's in — .hero (flex, justify-content: flex-end) or .page-section (absolute — see below — since .page-section is position: relative). The bounce animation lives on the inner svg rather than this element itself, since this element's own transform is already doing the horizontal-centering job on .page-section variants (see .page-section .scroll-cue) and a single transform property can't do both at once. */ .scroll-cue { display: inline-flex; color: #000; filter: drop-shadow(0 0 8px rgba(180, 142, 240, 0.85)); } /* On the black pages, black-on-black would be invisible. */ .dark-section .scroll-cue { color: var(--color-white); } .scroll-cue svg { width: 2.25rem; height: 2.25rem; fill: currentColor; animation: scroll-cue-bounce 2s ease-in-out infinite; } @keyframes scroll-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } /* Releases/News/Live/Contact: each a full 100vh page (see #page-wrapper above). position: relative so its own .scroll-cue can be pinned to its bottom edge; overflow-y: auto so a page whose content is taller than the viewport scrolls internally within its own fixed 100vh box, rather than growing taller and breaking the wrapper's translateY(-N * 100vh) math. */ .page-section { position: relative; height: 100vh; display: flex; flex-direction: column; align-items: center; text-align: center; overflow-y: auto; padding: calc(var(--nav-height) + 2rem) 1.5rem 5rem; } /* News/Live/Contact only (not Releases, which is already deliberately sized/positioned to exactly fill the page — see .release__art) — shifts the heading and content down toward vertical center instead of sitting right below the top padding. */ .page-section--centered { justify-content: center; } .page-section .scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); } .dark-section { background: rgba(0, 0, 0, 0.5); --color-text: var(--color-white); --color-text-soft: rgba(255, 255, 255, 0.65); --color-border: rgba(255, 255, 255, 0.15); /* Redefining the custom properties above only changes what elements that explicitly reference var(--color-text) resolve to (e.g. .show-row__date) — it doesn't retroactively change already-inherited color on elements that never set their own (e.g. .post__title, plain paragraph text), which would otherwise stay inherited-black-on-black. Setting color here too means THIS element's own resolved color updates, and that's what actually inherits down to everything under it. */ color: var(--color-text); } /* Static grid, newest release first — three per row (not var(--max-width)'s usual 900px column: at this card size, 2 per row would need a 3rd row for 5 releases and overflow one page — see .release__art below), wrapping to as many rows as needed. Replaced the old auto-scrolling single-row strip (see git history / prior conversation) with a plain grid once releases moved to their own full-page section with room to lay them out properly. */ #release-list { display: grid; /* Double resolution — 6 tracks standing in for the 3 visual columns — so the top row's 2 cards can be centered on a half-column boundary the bottom row's 3 cards don't land on. See the explicit placements below. */ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 2rem; width: 100%; max-width: 1200px; } /* Each release card — one per grid cell (see #release-list) */ .release { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0; } /* Explicit placement rather than the default left-to-right/top-to-bottom auto-flow: top row holds only the two newest releases, centered as a pair over the three-wide bottom row (each bottom card spans 2 of the 6 tracks; the top pair spans the middle 4, leaving 1 empty track on each side), with the newest (RELEASES[0], "It's Really Nothing") in the true center. Written by DOM order (RELEASES is newest-first) since #release-list has no ids/classes to hook per-release. */ #release-list > .release:nth-child(1) { grid-column: 2 / span 2; grid-row: 1; } #release-list > .release:nth-child(2) { grid-column: 4 / span 2; grid-row: 1; } #release-list > .release:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; } #release-list > .release:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; } #release-list > .release:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; } /* Sized (not just width: 100%) so all 5 releases fit within one 100vh page without relying on .page-section's overflow-y: auto, which is no longer reachable: wheel/touch/keyboard are all claimed globally for page-to-page navigation (see initPageNav in main.js), so a section whose content doesn't fit has no way to be scrolled into view anymore. */ .release__art { width: min(360px, 36vh); margin: 0 auto; } /* Cover art doubles as a dropdown toggle for the release's streaming links */ .art-wrap { position: relative; width: 100%; } .art-toggle { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; } /* Overlaid directly on the cover art (not positioned below it) so it's always fully within view — the art itself is guaranteed visible already, since the user just clicked it. */ .art-dropdown { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.5rem; padding: 1.5rem; overflow-y: auto; border: 2px solid #000; background: rgba(10, 8, 12, 0.88); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 20; } /* Hover/keyboard-focus reveals it directly, for pointer and keyboard users. The click/tap toggle in main.js (.is-open) still applies on top of this, since touch devices have no real hover state to rely on. */ .art-wrap:hover .art-dropdown, .art-wrap:focus-within .art-dropdown, .art-wrap.is-open .art-dropdown { opacity: 1; visibility: visible; } .art-dropdown a { padding: 0.65em 1em; font-family: var(--font-serif); font-size: 1.05rem; text-transform: uppercase; color: var(--color-white); text-align: center; transition: background 0.2s ease; } .art-dropdown a:hover, .art-dropdown a:focus-visible { background: rgba(180, 142, 240, 0.15); } /* News/Live/Contact content used to inherit a centered max-width column from the old .section wrapper — now that those pages are full-bleed .page-section black cards (needed so the black background reaches the viewport edges), the same constraint is applied directly to each page's content instead. */ #posts-list, #shows-list, .follow-buttons, #bandsintown-widget { width: 100%; max-width: var(--max-width); } /* Shows list (live page) */ .shows-empty { color: var(--color-text-soft); } .show-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.5rem 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--color-border); font-size: 1.725rem; } .show-row:last-child { border-bottom: 1px solid var(--color-border); } .show-row__date { font-family: var(--font-serif); color: var(--color-text); font-weight: bold; min-width: 9ch; } .show-row__venue { flex: 1 1 240px; } .show-row__location { color: var(--color-text-soft); } .show-row__link { text-decoration: underline; } .follow-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; } /* 25% smaller than the base .btn (1rem 2rem padding / 1.1rem font-size) — scoped here rather than changing .btn itself, which the Contact page's Send button also uses at full size. */ .follow-buttons .btn { padding: 0.75rem 1.5rem; font-size: 0.825rem; } /* Swaps .btn's usual moving gradient glare for TV static instead (drawn by initButtonStatic() in main.js onto a canvas prepended into the button — see .btn__static below) — position: relative/overflow: hidden contains it, background covers the moment before the canvas's first frame (and, at 50% rather than solid, lets whatever's behind the button show through a bit, matching .dark-section). z-index: 0 (with position: relative) forces this button to establish its own stacking context, so .btn__static's z-index: -1 is scoped to just this element — without it, the canvas compared its negative z-index against a much wider, unrelated set of elements (whatever ancestor actually establishes the nearest stacking context) and ended up painted behind other content entirely, invisibly, despite otherwise being correctly sized/positioned/populated with real noise. */ .btn--static { position: relative; z-index: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); animation: none; } .btn__static { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; image-rendering: pixelated; } #bandsintown-widget { margin-bottom: 1.5rem; } /* The Bandsintown widget renders real same-origin DOM (not an iframe — that part of it is a tiny hidden messaging frame), but hardcodes its own pixel font-sizes on these specific elements rather than inheriting, so a font-size on an ancestor has no effect (confirmed) — these need direct, !important overrides. Scoped to just the date/location/venue text, not the RSVP/Tickets buttons or anything else in the widget (a whole-widget transform: scale() enlarged those too, which wasn't wanted). */ #bandsintown-widget .bit-date, #bandsintown-widget .bit-mobile-date, #bandsintown-widget .bit-location-under-desktop, #bandsintown-widget .bit-location-under-mobile, #bandsintown-widget .bit-venue { font-size: 150% !important; } /* Hides the RSVP button specifically, leaving Tickets in place. */ #bandsintown-widget .bit-rsvp { display: none !important; } /* The small share-icon box above the buttons — data-social-share-icon ="false" on .bit-widget-initializer (see index.html) is supposed to turn this off but doesn't actually stop it rendering, so it's hidden directly instead. */ #bandsintown-widget .bit-desktop-social-share-button, #bandsintown-widget .bit-mobile-social-share-button { display: none !important; } /* .bit-event is the widget's own outer wrapping link — the whole listing (date, venue, location) navigates to the Bandsintown event page by default. Only Tickets (.bit-offers, nested inside .bit-event) should stay clickable, so pointer-events: none here and pointer-events: auto re-enabling it specifically on that one descendant. */ #bandsintown-widget .bit-event { pointer-events: none; } #bandsintown-widget .bit-offers { pointer-events: auto; } /* News page: posts list, newest first */ .post { padding: 2rem 0; border-top: 1px solid var(--color-border); text-align: left; } .post:last-child { border-bottom: 1px solid var(--color-border); } .post__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1rem; } .post__title { font-size: clamp(1.5rem, 4vw, 2rem); } .post__date { font-family: var(--font-serif); font-size: 1rem; color: var(--color-text-soft); white-space: nowrap; } .post__body p { margin: 0 0 1em; } .post__body p:last-child { margin-bottom: 0; } /* Contact form */ .contact-form { display: grid; gap: 1.5rem; max-width: 520px; margin: 0 auto; text-align: left; } .form-field { display: grid; gap: 0.4rem; } .form-field label { font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-text); } .form-field input, .form-field textarea { background: rgba(255, 255, 255, 0.5); border: 2px solid var(--color-accent); border-radius: 0; padding: 0.75em 1em; color: var(--color-text); font-family: var(--font-serif); font-size: 1.1rem; text-transform: uppercase; } .form-field input:focus, .form-field textarea:focus { outline: none; filter: drop-shadow(0 0 16px rgba(180, 142, 240, 0.7)); } .form-field textarea { resize: vertical; min-height: 140px; } /* honeypot field, hidden from real users, visible to bots that fill everything */ .form-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form .btn { justify-self: center; cursor: pointer; font-size: 1.15rem; } .form-status { font-family: var(--font-serif); font-size: 1.1rem; } .form-status--success { color: var(--color-text); } .form-status--error { color: #7f170e; } /* ---------------------------------- Responsive ---------------------------------- */ @media (max-width: 720px) { :root { --nav-height: 132px; } .site-nav { flex-direction: column; gap: 0.6rem; padding: 0.85rem 1.25rem; } .site-nav__social { position: static; transform: none; justify-content: center; } } @media (max-width: 480px) { .site-nav__links { gap: 0.4rem 0.55rem; } .site-nav__links a { font-size: 1.6875rem; } }