/*fonts loaded via in HTML for faster parallel fetch*/
:root{
--main-text: rgb(232, 236, 234);
--nav-fill: rgba(28, 36, 34, .82);
--header-background:url("/assets/img/head.png");
--site-accent: white;
--site-accent-deep:#2a3a36;
--site-accent-light:#7a9a90;
--page-accent: red;
/* Typography */
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/*These are the default colors for variables which change depending on the page. */
--background: linear-gradient(180deg, #010302 0%, #050908 28%, #0a1210 52%, #050807 78%, #000000 100%);
/* PS3 XMB-style wave tones — smoked teal / fog */
--ribbon-blue: rgba(58, 110, 98, 0.42);
--ribbon-blue-mid: rgba(28, 72, 64, 0.30);
--ribbon-warm: rgba(48, 78, 68, 0.20);
--ribbon-warm-mid: rgba(20, 48, 42, 0.14);
--ribbon-glow: rgba(120, 168, 152, 0.32);
--music-info-text: rgb(140, 210, 180);
--music-info-stroke: none;
/* Layout – unified gutters & max widths */
--site-gutter: clamp(16px, 4vw, 24px);
--page-top-offset: 1.25rem;
--page-bottom-offset: 1.25rem;
--page-footer-gap: 1.25rem;
--nav-float-offset: 56px;
--desktop-nav-pill-height: 50px;
--header-chip-duration: 0.5s;
--header-chip-ease: cubic-bezier(0.22, 1, 0.36, 1);
--bottom-nav-offset: 84px;
--site-max-width: 1100px;
--content-max-width: 900px;
--layout-tablet-max: 1030px;
--narrow-max-width: 720px;
/* Border radius scale */
--radius-thumb: 8px;
--radius-inner: 10px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-xl: 32px;
--radius-pill: 999px;
/* Accent channels – smoked teal / fog green; album pages override these */
--accent-r: 110;
--accent-g: 158;
--accent-b: 142;
--accent-deep-r: 42;
--accent-deep-g: 78;
--accent-deep-b: 68;
--accent-glow-r: 150;
--accent-glow-g: 190;
--accent-glow-b: 172;
--accent-bright-r: 186;
--accent-bright-g: 220;
--accent-bright-b: 204;
/* Shared glass morphism — tactile thickness */
--glass-bg: linear-gradient(
180deg,
rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.16) 0%,
rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.07) 40%,
rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.10) 70%,
rgba(0, 0, 0, 0.14) 100%
);
--glass-border: 1px solid rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.28);
--glass-shadow:
0 10px 40px rgba(0, 0, 0, 0.38),
0 2px 0 rgba(0, 0, 0, 0.22),
0 0 22px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.10),
inset 0 1.5px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.42),
inset 0 -2px 0 rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.28),
inset 1.5px 0 0 rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.18),
inset -1.5px 0 0 rgba(0, 0, 0, 0.16);
--glass-shadow-lift:
0 14px 44px rgba(0, 0, 0, 0.42),
0 4px 0 rgba(0, 0, 0, 0.18),
0 0 28px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.14),
inset 0 2px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.52),
inset 0 -1px 0 rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.18),
inset 1.5px 0 0 rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.22),
inset -1.5px 0 0 rgba(0, 0, 0, 0.12);
--glass-shadow-pressed:
0 2px 12px rgba(0, 0, 0, 0.28),
0 0 8px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.06),
inset 0 3px 8px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(0, 0, 0, 0.35),
inset 0 -1px 0 rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.12),
inset 2px 0 4px rgba(0, 0, 0, 0.2),
inset -2px 0 4px rgba(0, 0, 0, 0.2);
/* Slightly lighter blur: glass still frosts, but cheaper when waves move behind it */
--glass-blur: blur(18px) saturate(1.55) contrast(1.04);
--glass-press-duration: 0.18s;
--glass-press-ease: cubic-bezier(0.22, 1, 0.36, 1);
--hover-glow-shadow:
drop-shadow(0 0 4px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.42))
drop-shadow(0 2px 8px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.36));
/* Fluent Reveal hover – background + border (Win10-style) */
--theme-hover-border: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.62);
--theme-hover-fill: rgba(255, 255, 255, 0.06);
--theme-hover-glow: rgba(255, 255, 255, 0.11);
--theme-hover-glow-soft: rgba(255, 255, 255, 0.04);
--theme-hover-border-reveal: rgba(255, 255, 255, 0.92);
--fluent-reveal-spot-size: 130px;
--fluent-proximity-radius: 28px;
--fluent-hover-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
--fluent-hover-transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
/* Album / streaming glass controls */
--album-btn-bg: linear-gradient(
180deg,
rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.07) 0%,
rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.03) 45%,
rgba(0, 0, 0, 0.05) 100%
);
--album-btn-border: 1px solid rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14);
--album-btn-shadow:
0 4px 18px rgba(0, 0, 0, 0.16),
inset 0 1px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.16),
inset 0 -1px 0 rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.05);
--album-btn-hover-bg: rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.07);
--album-btn-hover-border: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.22);
--album-btn-hover-shadow:
0 5px 20px rgba(0, 0, 0, 0.20),
0 0 10px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.06),
inset 0 1px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.22),
inset 0 -1px 0 rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.07);
--album-inset-tray-bg: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.03);
--album-inset-tray-border: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.08);
--album-inset-tray-shadow:
inset 0 1px 2px rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.06),
inset 0 0 0 1px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.04);
--album-art-glass-border: 1px solid rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.32);
--album-art-glass-shadow:
0 4px 18px rgba(0, 0, 0, 0.34),
0 0 14px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.16),
inset 0 1px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.44),
inset 0 -1px 0 rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.2),
inset 1px 0 0 rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14),
inset -1px 0 0 rgba(0, 0, 0, 0.12);
--album-art-glass-shine:
linear-gradient(125deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 26%, transparent 50%, transparent 70%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, transparent 36%),
radial-gradient(ellipse 85% 55% at 50% 0%, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.22) 0%, transparent 68%);
--album-art-radius: var(--radius-sm);
--bottom-nav-glass-bg: linear-gradient(
180deg,
rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.07) 0%,
rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.035) 48%,
rgba(0, 0, 0, 0.115) 100%
);
--bottom-nav-glass-border: 1px solid rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.24);
--bottom-nav-glass-shadow:
0 8px 26px rgba(0, 0, 0, 0.18),
0 0 18px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.07),
inset 0 1px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.46),
inset 0 -1px 0 rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.16),
inset 1px 0 0 rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.16),
inset -1px 0 0 rgba(0, 0, 0, 0.12);
/* Navbar social icon brand tints */
--navicon-tint-duration: 0.78s;
--navicon-tint-color-duration: 1.05s;
--navicon-tint-ease: cubic-bezier(0.33, 0, 0.14, 1);
--navicon-icon-duration-in: 0.26s;
--navicon-icon-duration-out: 0.52s;
--navicon-icon-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
--navicon-icon-ease-out: cubic-bezier(0.33, 0, 0.14, 1);
--icon-spotify-r: 29;
--icon-spotify-g: 185;
--icon-spotify-b: 84;
--icon-apple-music-r: 252;
--icon-apple-music-g: 60;
--icon-apple-music-b: 68;
--icon-youtube-r: 255;
--icon-youtube-g: 0;
--icon-youtube-b: 0;
--icon-bandcamp-r: 41;
--icon-bandcamp-g: 177;
--icon-bandcamp-b: 209;
}
/* Fluent border reveal – only the border segment near the cursor lights up */
.contact-card-btn::after,
.film-card::after,
.film-featured-link::after,
.latest-hero-streaming a::after,
.album-dropdown::after,
.coverflow-nav::after,
.coverflow-details .album-action-cta::after,
.coverflow-details .album-actions-stream a::after,
.featured-stream a::after,
.slideshow-controls .prev::after,
.slideshow-controls .next::after,
.slideshow-container > .slideshow-resume.contact-card-btn::after,
.single-chip-streaming a::after,
.album-dropdown-content .streamingicons a::after,
.album-listen-icons a::after,
.musicpage .streamingicons a::after,
.film-search-wrap::after,
.contact-input-wrap::after,
.navlinks a:not(.active)::after,
.film-filter-btn::after,
.film-filter-toggle::after,
.film-featured-cta::after,
.album-listen-cta::after,
.contact-cta::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: radial-gradient(
var(--fluent-reveal-spot-size) circle at var(--mouse-x) var(--mouse-y),
var(--theme-hover-border-reveal) 0%,
rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.55) 38%,
transparent 68%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 2;
}
.contact-card-btn:is(:hover, .is-proximity-hover)::after,
.film-card:is(:hover, .is-proximity-hover)::after,
.film-featured-link:is(:hover, .is-proximity-hover)::after,
.latest-hero-streaming a:is(:hover, .is-proximity-hover)::after,
.album-dropdown:not(.open):is(:hover, .is-proximity-hover)::after,
.album-dropdown.open:has(.album-dropdown-header:hover)::after,
.album-dropdown:not(.open).touch-active::after,
.coverflow-nav:is(:hover, .is-proximity-hover)::after,
.coverflow-details .album-action-cta:is(:hover, .is-proximity-hover)::after,
.coverflow-details .album-actions-stream a:is(:hover, .is-proximity-hover)::after,
.featured-stream a:is(:hover, .is-proximity-hover)::after,
.slideshow-controls .prev:is(:hover, .is-proximity-hover)::after,
.slideshow-controls .next:is(:hover, .is-proximity-hover)::after,
.slideshow-container > .slideshow-resume.contact-card-btn:is(:hover, .is-proximity-hover)::after,
.single-chip-streaming a:is(:hover, .is-proximity-hover)::after,
.album-dropdown-content .streamingicons a:is(:hover, .is-proximity-hover)::after,
.album-listen-icons a:is(:hover, .is-proximity-hover)::after,
.musicpage .streamingicons a:is(:hover, .is-proximity-hover)::after,
.film-search-wrap:is(:hover, .is-proximity-hover):not(:focus-within)::after,
.contact-input-wrap:is(:hover, .is-proximity-hover):not(:focus-within)::after,
.navlinks a:not(.active):is(:hover, .is-proximity-hover)::after,
.film-filter-btn:is(:hover, .is-proximity-hover)::after,
.film-filter-toggle:is(:hover, .is-proximity-hover)::after,
.film-featured-cta:is(:hover, .is-proximity-hover)::after,
.album-listen-cta:is(:hover, .is-proximity-hover)::after,
.contact-cta:is(:hover, .is-proximity-hover)::after {
opacity: var(--proximity-opacity, 1);
}
@property --ribbon-a {
syntax: '';
inherits: false;
initial-value: rgba(62, 122, 118, 0.34);
}
@property --ribbon-b {
syntax: '';
inherits: false;
initial-value: rgba(42, 83, 80, 0.14);
}
@property --ribbon-c {
syntax: '';
inherits: false;
initial-value: rgba(28, 78, 75, 0.24);
}
@property --ribbon-d {
syntax: '';
inherits: false;
initial-value: rgba(138, 205, 199, 0.3);
}
@property --navicon-tint-r {
syntax: '';
inherits: true;
initial-value: 138;
}
@property --navicon-tint-g {
syntax: '';
inherits: true;
initial-value: 205;
}
@property --navicon-tint-b {
syntax: '';
inherits: true;
initial-value: 199;
}
@property --navicon-tint-strength {
syntax: '';
inherits: true;
initial-value: 0;
}
/* Animatable accent channels — homepage nav fade clear ↔ tinted */
@property --accent-r {
syntax: '';
inherits: true;
initial-value: 110;
}
@property --accent-g {
syntax: '';
inherits: true;
initial-value: 158;
}
@property --accent-b {
syntax: '';
inherits: true;
initial-value: 142;
}
@property --accent-deep-r {
syntax: '';
inherits: true;
initial-value: 42;
}
@property --accent-deep-g {
syntax: '';
inherits: true;
initial-value: 78;
}
@property --accent-deep-b {
syntax: '';
inherits: true;
initial-value: 68;
}
@property --accent-glow-r {
syntax: '';
inherits: true;
initial-value: 150;
}
@property --accent-glow-g {
syntax: '';
inherits: true;
initial-value: 190;
}
@property --accent-glow-b {
syntax: '';
inherits: true;
initial-value: 172;
}
@property --accent-bright-r {
syntax: '';
inherits: true;
initial-value: 186;
}
@property --accent-bright-g {
syntax: '';
inherits: true;
initial-value: 220;
}
@property --accent-bright-b {
syntax: '';
inherits: true;
initial-value: 204;
}
/*Desktop Style (also mobile if not overidden*/
* {
box-sizing: border-box;
}
/* PS3 XMB wave background.
Perf: no filter/blur or mix-blend-mode on moving layers (those force glass
backdrop-filter to re-sample every frame). Soft gradients + transform-only. */
html {
min-height: 100%;
background-color: #000;
}
html::before,
html::after,
body::before,
body::after {
content: '';
position: fixed;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Deep blue glossy wash, like the idle XMB screen. */
html::before {
inset: 0;
z-index: -3;
background:
radial-gradient(ellipse 90% 46% at 50% 52%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 0%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.05) 42%, transparent 72%),
radial-gradient(ellipse 75% 48% at 50% 105%, rgba(2, 3, 8, 0.92) 0%, transparent 66%),
radial-gradient(ellipse 65% 58% at 50% -10%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.35) 0%, transparent 62%),
var(--background);
background-size: 120% 120%, 100% 100%, 100% 100%, 100% 100%;
background-position: 50% 48%, 0 0, 0 0, 0 0;
}
/* Primary soft horizontal wave layer. */
html::after {
z-index: -2;
inset: -12% -36%;
--ribbon-a: var(--ribbon-blue);
--ribbon-b: var(--ribbon-warm);
--ribbon-c: var(--ribbon-blue-mid);
--ribbon-d: var(--ribbon-glow);
background:
radial-gradient(ellipse 48% 9% at 14% 49%, rgba(255, 255, 255, 0.42) 0%, var(--ribbon-d) 22%, var(--ribbon-a) 48%, transparent 78%),
radial-gradient(ellipse 58% 11% at 41% 45%, rgba(255, 255, 255, 0.28) 0%, var(--ribbon-a) 26%, var(--ribbon-c) 56%, transparent 82%),
radial-gradient(ellipse 52% 10% at 70% 51%, rgba(255, 255, 255, 0.34) 0%, var(--ribbon-d) 20%, var(--ribbon-a) 46%, transparent 78%),
radial-gradient(ellipse 74% 14% at 88% 58%, var(--ribbon-a) 0%, var(--ribbon-c) 40%, transparent 80%),
radial-gradient(ellipse 64% 10% at 28% 62%, var(--ribbon-b) 0%, var(--ribbon-warm-mid) 40%, transparent 80%);
background-size: 88% 100%, 95% 100%, 90% 100%, 100% 100%, 92% 100%;
background-position: 8% 56%, 44% 52%, 86% 54%, 136% 62%, 58% 72%;
background-repeat: no-repeat;
opacity: 0.7;
will-change: transform;
contain: layout style paint;
-webkit-transform: translate3d(calc(-3% + var(--fluid-x, 0px)), var(--fluid-y, 0px), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.08 * var(--fluid-scale, 1)));
transform: translate3d(calc(-3% + var(--fluid-x, 0px)), var(--fluid-y, 0px), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.08 * var(--fluid-scale, 1)));
-webkit-animation: XmbWaveDrift 22s ease-in-out infinite alternate;
animation: XmbWaveDrift 22s ease-in-out infinite alternate;
}
body {
margin: 0;
min-height: 100%;
position: relative;
background: transparent;
overflow-x: hidden;
font-family: var(--font-body);
color: var(--main-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Soft film-grain fog overlay */
body.home-page::after,
.page-haze {
pointer-events: none;
}
/* Vignette, faint scanline texture, and center bloom. */
body::before {
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 48% 22% at 50% 48%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.045) 0%, transparent 72%),
radial-gradient(ellipse 86% 70% at 50% 46%, transparent 14%, rgba(0, 0, 0, 0.74) 100%);
}
/* Secondary counter wave layer for the glassy PS3 depth. */
body::after {
inset: -14% -30%;
z-index: -1;
--ribbon-a: var(--ribbon-blue);
--ribbon-b: var(--ribbon-warm);
--ribbon-c: var(--ribbon-blue-mid);
--ribbon-d: var(--ribbon-glow);
background:
radial-gradient(ellipse 80% 12% at 18% 43%, rgba(255, 255, 255, 0.22) 0%, var(--ribbon-a) 28%, transparent 78%),
radial-gradient(ellipse 88% 14% at 55% 56%, rgba(255, 255, 255, 0.2) 0%, var(--ribbon-a) 24%, var(--ribbon-c) 52%, transparent 84%),
radial-gradient(ellipse 68% 11% at 86% 48%, var(--ribbon-d) 0%, var(--ribbon-c) 34%, transparent 82%),
radial-gradient(ellipse 90% 14% at 45% 64%, var(--ribbon-b) 0%, var(--ribbon-warm-mid) 46%, transparent 86%);
background-size: 105% 100%, 112% 100%, 96% 100%, 108% 100%;
background-position: 72% 52%, 34% 58%, 8% 56%, 50% 68%;
background-repeat: no-repeat;
opacity: 0.5;
will-change: transform;
contain: layout style paint;
-webkit-transform: translate3d(calc(4% - var(--fluid-x, 0px)), calc(var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
transform: translate3d(calc(4% - var(--fluid-x, 0px)), calc(var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
-webkit-animation: XmbWaveDriftBack 28s ease-in-out infinite alternate;
animation: XmbWaveDriftBack 28s ease-in-out infinite alternate;
}
/* Transform-only; skew stays constant so compositor can cache the layer.
Fluid scroll vars (--fluid-*) keep waves reacting while the drift loop runs. */
@-webkit-keyframes XmbWaveDrift {
0% {
-webkit-transform: translate3d(calc(-9% + var(--fluid-x, 0px)), calc(2% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.08 * var(--fluid-scale, 1)));
transform: translate3d(calc(-9% + var(--fluid-x, 0px)), calc(2% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.08 * var(--fluid-scale, 1)));
}
50% {
-webkit-transform: translate3d(calc(2% + var(--fluid-x, 0px)), calc(10% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
transform: translate3d(calc(2% + var(--fluid-x, 0px)), calc(10% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
}
100% {
-webkit-transform: translate3d(calc(9% + var(--fluid-x, 0px)), calc(3% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.1 * var(--fluid-scale, 1)));
transform: translate3d(calc(9% + var(--fluid-x, 0px)), calc(3% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.1 * var(--fluid-scale, 1)));
}
}
@keyframes XmbWaveDrift {
0% {
-webkit-transform: translate3d(calc(-9% + var(--fluid-x, 0px)), calc(2% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.08 * var(--fluid-scale, 1)));
transform: translate3d(calc(-9% + var(--fluid-x, 0px)), calc(2% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.08 * var(--fluid-scale, 1)));
}
50% {
-webkit-transform: translate3d(calc(2% + var(--fluid-x, 0px)), calc(10% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
transform: translate3d(calc(2% + var(--fluid-x, 0px)), calc(10% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
}
100% {
-webkit-transform: translate3d(calc(9% + var(--fluid-x, 0px)), calc(3% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.1 * var(--fluid-scale, 1)));
transform: translate3d(calc(9% + var(--fluid-x, 0px)), calc(3% + var(--fluid-y, 0px)), 0) skewY(calc(-4deg + var(--fluid-skew, 0deg))) scale(calc(1.1 * var(--fluid-scale, 1)));
}
}
@-webkit-keyframes XmbWaveDriftBack {
0% {
-webkit-transform: translate3d(calc(8% - var(--fluid-x, 0px)), calc(4% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
transform: translate3d(calc(8% - var(--fluid-x, 0px)), calc(4% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
}
50% {
-webkit-transform: translate3d(calc(-1% - var(--fluid-x, 0px)), calc(12% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.14 * var(--fluid-scale, 1)));
transform: translate3d(calc(-1% - var(--fluid-x, 0px)), calc(12% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.14 * var(--fluid-scale, 1)));
}
100% {
-webkit-transform: translate3d(calc(-8% - var(--fluid-x, 0px)), calc(6% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.13 * var(--fluid-scale, 1)));
transform: translate3d(calc(-8% - var(--fluid-x, 0px)), calc(6% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.13 * var(--fluid-scale, 1)));
}
}
@keyframes XmbWaveDriftBack {
0% {
-webkit-transform: translate3d(calc(8% - var(--fluid-x, 0px)), calc(4% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
transform: translate3d(calc(8% - var(--fluid-x, 0px)), calc(4% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.12 * var(--fluid-scale, 1)));
}
50% {
-webkit-transform: translate3d(calc(-1% - var(--fluid-x, 0px)), calc(12% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.14 * var(--fluid-scale, 1)));
transform: translate3d(calc(-1% - var(--fluid-x, 0px)), calc(12% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.14 * var(--fluid-scale, 1)));
}
100% {
-webkit-transform: translate3d(calc(-8% - var(--fluid-x, 0px)), calc(6% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.13 * var(--fluid-scale, 1)));
transform: translate3d(calc(-8% - var(--fluid-x, 0px)), calc(6% + var(--fluid-y, 0px) * -0.55), 0) skewY(calc(5deg - var(--fluid-skew, 0deg))) scale(calc(1.13 * var(--fluid-scale, 1)));
}
}
html.xmb-paused::after,
html.xmb-paused body::after {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* Fluid scroll mode: drop stepped keyframes — JS spring owns the motion */
html.fluid-bg::after,
html.fluid-bg body::after {
-webkit-animation: none !important;
animation: none !important;
transition: none;
}
html.fluid-bg::after {
-webkit-transform: translate3d(var(--fluid-x, 0px), var(--fluid-y, 0px), 0) skewY(calc(-3deg + var(--fluid-skew, 0deg))) scale(calc(1.06 * var(--fluid-scale, 1)));
transform: translate3d(var(--fluid-x, 0px), var(--fluid-y, 0px), 0) skewY(calc(-3deg + var(--fluid-skew, 0deg))) scale(calc(1.06 * var(--fluid-scale, 1)));
filter: blur(0.4px);
opacity: 0.62;
}
html.fluid-bg body::after {
-webkit-transform: translate3d(calc(var(--fluid-x, 0px) * -0.7), calc(var(--fluid-y, 0px) * -0.45), 0) skewY(calc(3.5deg - var(--fluid-skew, 0deg))) scale(calc(1.1 * var(--fluid-scale, 1)));
transform: translate3d(calc(var(--fluid-x, 0px) * -0.7), calc(var(--fluid-y, 0px) * -0.45), 0) skewY(calc(3.5deg - var(--fluid-skew, 0deg))) scale(calc(1.1 * var(--fluid-scale, 1)));
filter: blur(0.8px);
opacity: 0.42;
}
/* Softer, broader ribbons when fluid scroll is active */
html.fluid-bg::after {
inset: -18% -42%;
background:
radial-gradient(ellipse 58% 14% at 18% 48%, rgba(255, 255, 255, 0.28) 0%, var(--ribbon-d) 24%, var(--ribbon-a) 52%, transparent 82%),
radial-gradient(ellipse 70% 16% at 48% 44%, rgba(255, 255, 255, 0.18) 0%, var(--ribbon-a) 30%, var(--ribbon-c) 58%, transparent 86%),
radial-gradient(ellipse 62% 15% at 78% 52%, rgba(255, 255, 255, 0.22) 0%, var(--ribbon-d) 22%, var(--ribbon-a) 48%, transparent 82%),
radial-gradient(ellipse 88% 20% at 92% 60%, var(--ribbon-a) 0%, var(--ribbon-c) 42%, transparent 84%),
radial-gradient(ellipse 76% 16% at 30% 64%, var(--ribbon-b) 0%, var(--ribbon-warm-mid) 44%, transparent 84%);
background-size: 100% 100%, 110% 100%, 105% 100%, 120% 100%, 108% 100%;
background-position: 6% 52%, 42% 48%, 82% 54%, 120% 62%, 50% 70%;
}
html.fluid-bg body::after {
inset: -20% -36%;
background:
radial-gradient(ellipse 92% 18% at 22% 42%, rgba(255, 255, 255, 0.14) 0%, var(--ribbon-a) 32%, transparent 80%),
radial-gradient(ellipse 100% 20% at 58% 56%, rgba(255, 255, 255, 0.12) 0%, var(--ribbon-a) 28%, var(--ribbon-c) 54%, transparent 86%),
radial-gradient(ellipse 78% 16% at 88% 48%, var(--ribbon-d) 0%, var(--ribbon-c) 38%, transparent 84%),
radial-gradient(ellipse 110% 20% at 48% 66%, var(--ribbon-b) 0%, var(--ribbon-warm-mid) 48%, transparent 88%);
}
/* Header title still uses AnimationName alias */
@-webkit-keyframes AnimationName {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes AnimationName {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
html::after,
body::after {
-webkit-animation: none;
animation: none;
will-change: auto;
}
html::after {
opacity: 0.55;
-webkit-transform: translate3d(0, 0, 0) skewY(-3deg) scale(1.08);
transform: translate3d(0, 0, 0) skewY(-3deg) scale(1.08);
}
body::after {
opacity: 0.36;
-webkit-transform: translate3d(0, 0, 0) skewY(4deg) scale(1.12);
transform: translate3d(0, 0, 0) skewY(4deg) scale(1.12);
}
}
@media (max-width: 1030px) {
/* Softer static base — still responds to fluid scroll vars */
html::after {
inset: 0;
--ribbon-a: var(--ribbon-blue);
--ribbon-b: var(--ribbon-warm);
--ribbon-c: var(--ribbon-blue-mid);
--ribbon-d: var(--ribbon-glow);
background:
radial-gradient(ellipse 70% 50% at 50% 42%, var(--ribbon-glow) 0%, transparent 62%),
radial-gradient(ellipse 95% 42% at 18% -4%, var(--ribbon-d) 0%, transparent 62%),
radial-gradient(ellipse 80% 48% at 100% 72%, var(--ribbon-a) 0%, transparent 64%),
radial-gradient(ellipse 70% 36% at 8% 100%, var(--ribbon-c) 0%, transparent 60%);
background-size: 100% 100%;
background-position: 0 0;
background-repeat: no-repeat;
opacity: 0.56;
-webkit-transform: translate3d(var(--fluid-x, 0px), calc(var(--fluid-y, 0px) * 0.35), 0) skewY(calc(var(--fluid-skew, 0deg) * 0.4)) scale(var(--fluid-scale, 1));
transform: translate3d(var(--fluid-x, 0px), calc(var(--fluid-y, 0px) * 0.35), 0) skewY(calc(var(--fluid-skew, 0deg) * 0.4)) scale(var(--fluid-scale, 1));
-webkit-animation: none;
animation: none;
will-change: transform;
contain: strict;
}
body::after {
display: none;
}
html.fluid-bg::after {
filter: none;
opacity: 0.5;
-webkit-transform: translate3d(var(--fluid-x, 0px), calc(var(--fluid-y, 0px) * 0.28), 0) skewY(calc(var(--fluid-skew, 0deg) * 0.3)) scale(var(--fluid-scale, 1));
transform: translate3d(var(--fluid-x, 0px), calc(var(--fluid-y, 0px) * 0.28), 0) skewY(calc(var(--fluid-skew, 0deg) * 0.3)) scale(var(--fluid-scale, 1));
}
}
@media (max-width: 1030px) and (prefers-reduced-motion: reduce) {
html::after,
body::after {
-webkit-animation: none;
animation: none;
will-change: auto;
}
}
.mobilepage {
width: 100%;
max-width: var(--site-max-width);
margin: 0 auto;
padding-left: var(--site-gutter);
padding-right: var(--site-gutter);
box-sizing: border-box;
}
/* Shared top/bottom spacing for inner pages (discography, album, contact) */
.mobilepage,
.musicpage,
.contact-page {
margin-top: 0;
padding-top: var(--page-top-offset);
padding-bottom: var(--page-bottom-offset);
}
.mobilepage > :last-child,
.musicpage > :last-child,
.contact-page > :last-child {
margin-bottom: 0;
}
@media (min-width: 1031px) {
.mobilepage,
.musicpage,
.contact-page {
padding-top: calc(var(--page-top-offset) + var(--nav-float-offset));
}
}
.textcentered {
width: 100%;
max-width: var(--narrow-max-width);
margin: 1.25rem auto 0;
padding: 0 var(--site-gutter);
box-sizing: border-box;
text-align: center;
}
.musecard {
font-family: var(--font-display) !important;
z-index: 22;
transition: 0.3s;
width: 100%;
max-width: var(--narrow-max-width);
margin: 0 auto 1.5em;
padding: 0;
text-align: left;
font-size: clamp(18px, 2.5vw, 22px);
box-sizing: border-box;
}
.musecard h4{
font-family: var(--font-display);
font-size: 55px;
margin: 8px 0px 10px 0;
font-weight: bold;
}
.musecard h6{
font-family: var(--font-mono) !important;
font-size:20px;
margin:0;
font-weight: normal;
font-style: italic;
}
.musecard h5{
margin:0;
}
.musecard p{
font-family: var(--font-mono) !important;
font-size: 24px;
margin: 10px 15px 0px 15px;
text-align: left;
-moz-text-align-last: center; /* Firefox 12+ */
}
.musecard a{
color: var(--main-text);
}
.header{
position: relative;
isolation: isolate;
padding: 0 30px;
margin: var(--site-gutter) var(--site-gutter) 0;
background-color: rgba(0, 0, 0, 0.28) !important;
height:200px;
line-height: 200px;
background-image: var(--header-background);
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
font-weight: bold;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
font-size: 80px;
font-family: var(--font-display);
color:var(--site-accent-light);
border-radius: var(--radius-xl);
overflow: hidden;
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
}
.header::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: var(--glass-bg);
}
/* Header title: gradient + transparent white for legibility (punch-through) */
.header .header-gradient-text {
position: relative;
z-index: 2;
display: inline-block;
margin: 0;
padding: 0;
font-weight: inherit;
line-height: inherit;
background:
linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
linear-gradient(270deg, #000000, #000000, #000000, #000000);
background-size: 100% 100%, 800% 800%;
background-position: 0 0, 0% 50%;
-webkit-animation: HeaderGradientText 11s ease infinite;
animation: HeaderGradientText 11s ease infinite;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font: inherit;
text-shadow: none;
}
@-webkit-keyframes HeaderGradientText {
0% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
100% { background-position: 0 0, 0% 50%; }
}
@keyframes HeaderGradientText {
0% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
100% { background-position: 0 0, 0% 50%; }
}
.navbar {
z-index: 5;
background: transparent;
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 8px var(--site-gutter);
margin-top: -2px;
margin-bottom: calc(-1 * var(--nav-float-offset));
}
.countdown p{
margin:0;
}
.tracklist {
margin-top: 12px;
}
.tracklist h4 {
font-size: clamp(20px, 3vw, 25px) !important;
margin-bottom: 6px;
}
.track {
padding: 10px 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.track img {
height: 22px;
width: 22px;
flex-shrink: 0;
filter: invert();
}
.track span {
font-family: var(--font-body);
color: rgb(189, 189, 189);
font-weight: bold;
flex-shrink: 0;
}
.album-dropdown-content .tracklist .track > span:first-child {
font-family: var(--font-mono);
font-weight: 500;
color: rgba(255, 255, 255, 0.35);
}
.album-dropdown-content .tracklist .track .track-title {
font-family: var(--font-display);
font-weight: normal;
color: inherit;
flex-shrink: unset;
}
.album-dropdown-content .tracklist .track-music-video-link span {
font-family: inherit;
font-weight: inherit;
color: inherit;
flex-shrink: unset;
}
.track audio {
max-width: 100%;
min-width: 0;
flex: 1 1 200px;
height: 32px;
}
.track:nth-child(even) {
background-color: rgba(56, 56, 56, 0.46);
}
.track:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.4);
}
.album-dropdown-content .tracklist .track:nth-child(even),
.album-dropdown-content .tracklist .track:nth-child(odd) {
background-color: transparent;
}
.container p{
margin-bottom: 15px;
}
.navitems {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--desktop-nav-pill-height);
width: 100%;
position: relative;
}
.navlinks {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
gap: 4px;
min-height: 38px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-xl);
padding: 6px 8px;
}
.navlinks::after,
.navicons::after,
.header::after,
.header-chip::after,
.single-chip::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background:
linear-gradient(112deg, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.24) 0%, transparent 22%, transparent 62%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.18) 100%),
radial-gradient(ellipse 70% 110% at 20% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.28) 0%, transparent 55%),
radial-gradient(ellipse 90% 80% at 85% 100%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.22) 0%, transparent 60%);
opacity: 0.78;
}
.navicons::after {
background:
linear-gradient(112deg, rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / calc(0.24 - 0.1 * var(--navicon-tint-strength))) 0%, transparent 22%, transparent 62%, rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / calc(0.18 - 0.1 * var(--navicon-tint-strength))) 100%),
radial-gradient(ellipse 70% 110% at 20% 0%, rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / calc(0.28 - 0.14 * var(--navicon-tint-strength))) 0%, transparent 55%),
radial-gradient(ellipse 90% 80% at 85% 100%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / calc(0.22 - 0.12 * var(--navicon-tint-strength))) 0%, transparent 60%);
opacity: calc(0.78 + 0.06 * var(--navicon-tint-strength));
}
.navlinks > *,
.navicons > *,
.header-chip > *,
.single-chip > * {
position: relative;
z-index: 2;
}
.navlinks a {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 8px 14px;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.06em;
border: none;
border-radius: var(--radius-lg);
transition:
color 300ms,
background-color 300ms,
box-shadow var(--glass-press-duration) var(--glass-press-ease),
transform var(--glass-press-duration) var(--glass-press-ease);
transform: perspective(600px) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg));
--mouse-x: 50%;
--mouse-y: 50%;
--glass-rx: 0deg;
--glass-ry: 0deg;
}
.navlinks a:active,
.navlinks a.is-pressed {
transform: perspective(600px) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg)) translateY(2px) scale(0.97);
box-shadow: var(--glass-shadow-pressed);
}
.navlinks a > * {
position: relative;
z-index: 2;
}
.navlinks a .tab-icon {
display: flex;
align-items: center;
justify-content: center;
height: 18px;
flex-shrink: 0;
}
.navlinks a .tab-icon svg {
display: block;
width: 18px;
height: 18px;
stroke-width: 2.35;
}
.navlinks a .tab-icon svg rect {
rx: 5;
ry: 5;
}
.navlinks a .tab-label {
line-height: 1;
}
.navlinks a::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
var(--theme-hover-glow) 0%,
var(--theme-hover-glow-soft) 36%,
transparent 55%
);
opacity: 0;
transition: opacity 0.15s ease;
}
.navlinks a.active {
color: var(--main-text);
isolation: isolate;
background:
linear-gradient(180deg, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.12) 0%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 58%, rgba(0, 0, 0, 0.08) 100%),
radial-gradient(ellipse 80% 100% at 50% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14) 0%, transparent 62%);
box-shadow:
inset 0 1px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.36),
inset 0 -1px 0 rgba(0, 0, 0, 0.16),
0 0 14px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12);
/* same padding as .navlinks a so pill size doesn't change when active */
padding: 8px 14px;
}
.navlinks a.active::before {
z-index: 0;
background:
linear-gradient(112deg, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.18) 0%, transparent 32%, transparent 58%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 100%),
radial-gradient(ellipse 85% 120% at 26% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.16) 0%, transparent 54%);
opacity: 1;
}
.navlinks a.active::after {
content: '';
position: absolute;
top: -35%;
bottom: -35%;
left: -45%;
z-index: 1;
width: 38%;
pointer-events: none;
background: linear-gradient(105deg, transparent 0%, rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.22) 48%, transparent 100%);
transform: rotate(12deg);
opacity: 0.55;
}
.navlinks a:not(.active):hover {
color: var(--main-text);
background-color: var(--theme-hover-fill);
box-shadow: var(--fluent-hover-shadow);
}
.navlinks a:not(.active):hover::before,
.navlinks a:not(.active).is-proximity-hover::before {
opacity: var(--proximity-opacity, 1);
}
.navlinks a.active:hover {
color: var(--main-text);
background:
linear-gradient(180deg, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.12) 0%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 58%, rgba(0, 0, 0, 0.08) 100%),
radial-gradient(ellipse 80% 100% at 50% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14) 0%, transparent 62%);
}
.navlinks a.active:hover::before {
opacity: 1;
}
.navicons {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
gap: 16px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius-xl);
padding: 10px 20px;
--navicon-tint-strength: 0;
--navicon-tint-r: var(--accent-r);
--navicon-tint-g: var(--accent-g);
--navicon-tint-b: var(--accent-b);
border: 1px solid rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / calc(0.30 - 0.08 * var(--navicon-tint-strength)));
box-shadow:
0 8px 36px rgba(0, 0, 0, 0.32),
0 0 calc((26 - 6 * var(--navicon-tint-strength)) * 1px) rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.12),
inset 0 1px 0 rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / calc(0.34 - 0.18 * var(--navicon-tint-strength))),
inset 0 -1px 0 rgb(0 0 0 / calc(0.20 - 0.08 * (1 - var(--navicon-tint-strength)))),
inset 1px 0 0 rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / calc(0.16 - 0.08 * var(--navicon-tint-strength))),
inset -1px 0 0 rgba(0, 0, 0, 0.12);
transition:
--navicon-tint-strength var(--navicon-tint-duration) var(--navicon-tint-ease),
--navicon-tint-r var(--navicon-tint-color-duration) var(--navicon-tint-ease),
--navicon-tint-g var(--navicon-tint-color-duration) var(--navicon-tint-ease),
--navicon-tint-b var(--navicon-tint-color-duration) var(--navicon-tint-ease);
}
.navicons::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
opacity: calc(0.72 * var(--navicon-tint-strength));
background:
linear-gradient(
180deg,
rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.1) 0%,
rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.05) 48%,
rgba(0, 0, 0, 0.04) 100%
),
radial-gradient(ellipse 85% 110% at 50% 0%, rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.12) 0%, transparent 68%);
}
.navicons:has(a:hover) {
--navicon-tint-strength: 1;
}
.navicons:has(a:hover img[src*="spotify"]) {
--navicon-tint-r: var(--icon-spotify-r);
--navicon-tint-g: var(--icon-spotify-g);
--navicon-tint-b: var(--icon-spotify-b);
}
.navicons:has(a:hover img[src*="am.png"]) {
--navicon-tint-r: var(--icon-apple-music-r);
--navicon-tint-g: var(--icon-apple-music-g);
--navicon-tint-b: var(--icon-apple-music-b);
}
.navicons:has(a:hover img[src*="yt.png"]) {
--navicon-tint-r: var(--icon-youtube-r);
--navicon-tint-g: var(--icon-youtube-g);
--navicon-tint-b: var(--icon-youtube-b);
}
.navicons:has(a:hover img[src*="bandcamp"]) {
--navicon-tint-r: var(--icon-bandcamp-r);
--navicon-tint-g: var(--icon-bandcamp-g);
--navicon-tint-b: var(--icon-bandcamp-b);
}
.navicons a {
position: relative;
display: block;
height: 30px;
width: 30px;
border-radius: 50%;
transition: transform var(--navicon-icon-duration-out) var(--navicon-icon-ease-out);
}
.navicons a::before {
content: '';
position: absolute;
inset: -5px;
border-radius: inherit;
pointer-events: none;
z-index: 0;
opacity: 0;
transform: scale(0.76);
background: radial-gradient(
circle at 50% 50%,
rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.34) 0%,
rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.12) 44%,
transparent 72%
);
transition:
opacity var(--navicon-icon-duration-out) var(--navicon-icon-ease-out),
transform var(--navicon-icon-duration-out) var(--navicon-icon-ease-out);
}
.navicons a:hover {
transform: translateY(-2px) scale(1.08);
transition: transform var(--navicon-icon-duration-in) var(--navicon-icon-ease-in);
}
.navicons a:hover::before {
opacity: 1;
transform: scale(1);
transition:
opacity var(--navicon-icon-duration-in) var(--navicon-icon-ease-in),
transform var(--navicon-icon-duration-in) var(--navicon-icon-ease-in);
}
.navicons img {
position: relative;
z-index: 1;
display: block;
height: 30px;
width: 30px;
transition:
filter var(--navicon-icon-duration-out) var(--navicon-icon-ease-out);
}
.navicons a:hover img {
transition: filter var(--navicon-icon-duration-in) var(--navicon-icon-ease-in);
filter:
brightness(1.06) saturate(1.14)
drop-shadow(0 0 6px rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.44))
drop-shadow(0 3px 8px rgb(var(--navicon-tint-r) var(--navicon-tint-g) var(--navicon-tint-b) / 0.24));
}
/* Sticky header chip – appears when header scrolls out of view */
.header-chip {
z-index: 6;
box-sizing: border-box;
padding: 10px 24px;
font-weight: bold;
font-family: var(--font-mono);
font-size: 22px;
line-height: 1;
color: var(--main-text);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-xl);
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
overflow: hidden;
isolation: isolate;
transform: translateY(calc(-100% - 12px));
transition:
opacity var(--header-chip-duration) var(--header-chip-ease),
transform var(--header-chip-duration) var(--header-chip-ease),
visibility 0s linear var(--header-chip-duration);
}
.header-chip-track {
display: inline-flex;
align-items: center;
gap: 2.5rem;
width: max-content;
max-width: none;
}
.header-chip-label {
display: inline-block;
white-space: nowrap;
}
.header-chip.is-marquee {
justify-content: flex-start;
}
.header-chip.is-marquee .header-chip-track {
animation: header-chip-marquee 16s linear infinite;
}
@keyframes header-chip-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50% - 1.25rem));
}
}
@media (prefers-reduced-motion: reduce) {
.header-chip.is-marquee .header-chip-track {
animation: none;
}
.header-chip.is-marquee .header-chip-label:first-child {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.header-chip.is-marquee .header-chip-label[aria-hidden='true'] {
display: none;
}
}
.header-chip.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity var(--header-chip-duration) var(--header-chip-ease),
transform var(--header-chip-duration) var(--header-chip-ease),
visibility 0s linear 0s;
}
@media (min-width: 1031px) {
.navitems {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
container-type: inline-size;
container-name: site-nav;
}
.navlinks {
grid-column: 1;
grid-row: 1;
height: var(--desktop-nav-pill-height);
min-height: var(--desktop-nav-pill-height);
padding-block: 0;
padding-inline: 8px;
box-sizing: border-box;
}
.navicons {
grid-column: 3;
grid-row: 1;
height: var(--desktop-nav-pill-height);
min-height: var(--desktop-nav-pill-height);
padding-block: 0;
padding-inline: 20px;
box-sizing: border-box;
}
.header-chip {
grid-column: 2;
grid-row: 1;
position: relative;
justify-self: center;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: 100%;
min-width: 0;
height: var(--desktop-nav-pill-height);
min-height: var(--desktop-nav-pill-height);
padding-block: 0;
padding-inline: 24px;
z-index: 7;
transform: translateY(calc(-100% - 12px));
}
.header-chip.is-marquee {
width: 100%;
justify-self: stretch;
justify-content: flex-start;
}
.header-chip.visible {
transform: translateY(0);
}
/* Wide desktop: center chip on the bar (viewport center) when pills leave room */
@container site-nav (min-width: 1360px) {
.header-chip {
grid-column: 1 / -1;
position: absolute;
left: 50%;
top: 50%;
justify-self: auto;
max-width: none;
transform: translate(-50%, calc(-50% - 100% - 12px));
}
.header-chip.visible {
transform: translate(-50%, -50%);
}
}
}
.discandvid-group {
display: flex;
justify-content: center;
width: 100%;
}
.discandvid {
display: flex;
justify-content: center;
gap: 80px;
padding: 0;
margin-bottom: 10px;
}
.disc {
display: block;
max-width: 460px;
text-align: center;
text-decoration: none;
padding: 20px;
}
.disc img {
display: block;
width: 100%;
max-width: 460px;
height: auto;
transition: transform 0.5s, filter 300ms;
}
.disc:hover {
transform: none;
}
.disc:hover img {
transform: scale(1.05);
filter: var(--hover-glow-shadow);
}
.disc p {
text-align: center !important;
color: var(--main-text);
margin-top: 8px;
font-size: 11px;
}
/* Home hero – latest single (matches discography latest release) */
.hero-latest-single {
--album-surface-radius: 20px;
--album-art-radius: var(--radius-sm);
--album-inset-radius: var(--radius-md);
--album-control-radius: var(--radius-inner);
--album-pad-x: 16px;
--album-pad-y: 12px;
--album-inset-pad: 6px;
--album-inset-gap: 4px;
width: 100%;
max-width: var(--narrow-max-width);
margin: 0 auto;
text-align: left;
}
.hero-latest-single .albums-section-title {
margin-bottom: 14px;
}
.hero-latest-single .album-art-glass {
position: relative;
display: block;
flex-shrink: 0;
overflow: hidden;
isolation: isolate;
border-radius: var(--album-art-radius);
border: var(--album-art-glass-border);
box-shadow: var(--album-art-glass-shadow);
}
.hero-latest-single .album-art-glass::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: var(--album-art-glass-shine);
opacity: 0.78;
}
.hero-latest-single .album-art-glass img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
border: none;
}
.hero-latest-single .latest-hero {
display: grid;
grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
gap: var(--album-pad-x);
align-items: center;
width: 100%;
padding: calc(var(--album-pad-y) + 2px) var(--album-pad-x);
color: var(--main-text);
text-align: left;
border-radius: var(--album-surface-radius);
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
cursor: default;
}
.hero-latest-single .latest-hero-art {
margin: 0;
align-self: start;
width: 100%;
aspect-ratio: 1;
}
.hero-latest-single .latest-hero-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
min-width: 0;
}
.hero-latest-single .latest-hero-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 4px;
min-width: 0;
flex: 1;
text-align: left;
}
.hero-text .hero-latest-single .latest-hero-title,
.hero-text .hero-latest-single .latest-hero-meta {
text-align: left;
max-width: none;
text-shadow: none;
letter-spacing: normal;
}
.hero-latest-single .latest-hero-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3.2vw, 1.85rem);
font-weight: 600;
line-height: 1.25;
margin: 0;
}
.hero-latest-single .latest-hero-title a {
color: inherit;
text-decoration: none;
}
.hero-latest-single .latest-hero-title a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.hero-latest-single .latest-hero-art-link {
display: block;
width: 100%;
min-width: 0;
color: inherit;
text-decoration: none;
}
.hero-latest-single .latest-hero-meta {
font-family: var(--font-mono);
font-size: clamp(0.9rem, 2vw, 1.05rem);
font-weight: normal;
font-style: normal;
opacity: 0.55;
margin: 0;
}
.hero-latest-single .latest-hero-streaming {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--album-inset-gap);
margin: 0;
flex-shrink: 0;
padding: var(--album-inset-pad);
background: var(--album-inset-tray-bg);
border: 1px solid var(--album-inset-tray-border);
border-radius: var(--album-inset-radius);
box-shadow: var(--album-inset-tray-shadow);
}
.hero-latest-single .latest-hero-streaming a {
position: relative;
overflow: hidden;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 8px;
text-decoration: none;
color: var(--main-text);
background: var(--album-btn-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--album-btn-border);
border-radius: var(--album-control-radius);
box-shadow: var(--album-btn-shadow);
transition: var(--fluent-hover-transition);
box-sizing: border-box;
--mouse-x: 50%;
--mouse-y: 50%;
cursor: pointer;
}
.hero-latest-single .latest-hero-streaming a::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
var(--theme-hover-glow) 0%,
var(--theme-hover-glow-soft) 35%,
transparent 55%
);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 1;
}
.hero-latest-single .latest-hero-streaming a:hover {
background-color: var(--theme-hover-fill);
box-shadow: var(--album-btn-hover-shadow), var(--fluent-hover-shadow);
}
.hero-latest-single .latest-hero-streaming a:hover::before {
opacity: 1;
}
.hero-latest-single .latest-hero-streaming img {
position: relative;
z-index: 1;
width: 34px;
height: 34px;
display: block;
}
@media (max-width: 640px) {
.hero-latest-single .albums-section-title {
font-size: clamp(1.15rem, 2.8vw, 1.4rem);
margin-bottom: 10px;
}
.hero-latest-single .latest-hero {
grid-template-columns: 88px minmax(0, 1fr);
gap: 12px;
padding: var(--album-pad-y) 14px;
}
.hero-latest-single .latest-hero-art {
width: 88px;
height: 88px;
aspect-ratio: auto;
flex-shrink: 0;
}
.hero-latest-single .latest-hero-body {
gap: 10px;
}
.hero-latest-single .latest-hero-title {
font-size: 1.2rem;
}
.hero-latest-single .latest-hero-meta {
font-size: 0.85rem;
}
.hero-latest-single .latest-hero-streaming a {
padding: 4px 5px;
min-height: 40px;
}
.hero-latest-single .latest-hero-streaming img {
width: 28px;
height: 28px;
}
}
/* Home hero: default stacked (mobile) */
.hero {
font-family: var(--font-body);
font-size: clamp(18px, 3vw, 24px);
max-width: var(--site-max-width);
margin: 1.5rem auto 0;
padding: 0 var(--site-gutter);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.hero-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.hero-intro {
display: flex;
flex-direction: column;
gap: 0.65rem;
width: 100%;
}
.hero-bottom {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.hero-text .whoisbobby {
margin: 0 0 0;
padding-bottom: 0;
line-height: 1;
font-family: var(--font-display);
font-size: clamp(48px, 10vw, 88px);
font-weight: bold;
text-align: center;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: none;
}
.hero-text p {
text-align: center;
max-width: 800px;
line-height: 1.6;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 0.015em;
margin: 0.25em 0;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: none;
}
.hero-text p:first-of-type {
margin-top: -0.2em;
margin-bottom: 0.1em;
line-height: 1.35;
font-size: clamp(22px, 4.2vw, 34px);
}
.coming-soon {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85em;
line-height: 1;
margin-top: -0.15em;
margin-bottom: 0;
}
.whoisbobby {
margin: 0 0 0;
line-height: 1;
font-family: var(--font-display);
font-size: clamp(48px, 10vw, 88px);
font-weight: bold;
text-align: center;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.middlecontent p {
text-align: justify;
max-width: 800px;
width: 100%;
line-height: 1.75;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 0.015em;
margin-top: 1.25em;
margin-bottom: 0.5em;
}
.middlecontent p:first-of-type {
margin-top: 1.5em;
}
.discandvid {
margin-top: 1em;
}
.hero-footer-links {
display: none;
}
/* Desktop: two columns, keep original header size */
@media (min-width: 1031px) {
body:has(.hero) {
display: flex;
flex-direction: column;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
}
body:has(.hero) .navbar {
margin-bottom: 0;
}
body:has(.hero) footer {
margin-top: 0;
padding: 12px var(--site-gutter);
flex-shrink: 0;
}
body:has(.hero) .hero {
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 40%);
align-items: stretch;
gap: clamp(1.5rem, 2.5vw, 2.25rem);
margin: 0;
padding: 0.5rem var(--site-gutter) 0.75rem;
max-width: 100%;
overflow: hidden;
}
body:has(.hero) .slideshow-wrapper {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
margin: 0;
}
body:has(.hero) .slideshow-container {
flex: 1;
min-height: 0;
width: 100%;
aspect-ratio: auto;
}
body:has(.hero) .hero-text {
width: 100%;
min-width: 0;
min-height: 0;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
justify-content: flex-start;
overflow-y: auto;
overflow-x: hidden;
gap: clamp(0.85rem, 1.8vh, 1.65rem);
padding: 0.25rem 0;
container-type: size;
container-name: hero-sidebar;
-webkit-overflow-scrolling: touch;
}
body:has(.hero) .hero-text .hero-intro,
body:has(.hero) .hero-text .hero-bottom {
width: 100%;
min-width: 0;
}
body:has(.hero) .hero-text .hero-intro {
gap: clamp(0.5rem, 1.2vh, 0.75rem);
}
body:has(.hero) .hero-text .whoisbobby {
font-size: clamp(22px, 7.5cqi, 64px);
line-height: 1.08;
text-align: left;
margin: 0;
padding-bottom: 0;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: none;
}
body:has(.hero) .hero-text .hero-intro p {
text-align: left;
margin: 0;
font-size: clamp(13px, 3.8cqi, 23px);
line-height: 1.55;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: none;
}
body:has(.hero) .hero-text .hero-intro p:first-of-type {
font-size: clamp(14px, 4.5cqi, 30px);
line-height: 1.45;
}
body:has(.hero) .hero-text .hero-intro .coming-soon {
font-size: clamp(12px, 3.6cqi, 22px);
line-height: 1.4;
margin-top: 0;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.72);
}
body:has(.hero) .hero-text .hero-bottom {
gap: clamp(0.75rem, 1.5vh, 1.1rem);
align-items: center;
width: 100%;
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
body:has(.hero) .hero-text .discandvid-group {
width: 100%;
justify-content: center;
}
body:has(.hero) .hero-text .discandvid {
margin-top: 0;
padding-top: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 3cqi, 24px);
width: auto;
max-width: min(100%, 620px);
min-width: 0;
align-items: start;
}
body:has(.hero) .disc {
display: block;
min-width: 0;
width: 100%;
max-width: none;
padding: clamp(2px, 1.2cqi, 8px);
box-sizing: border-box;
text-decoration: none;
}
body:has(.hero) .disc img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
transition: transform 0.3s ease, filter 300ms;
}
body:has(.hero) .disc p {
display: block;
margin-top: clamp(4px, 1.5cqi, 8px) !important;
width: 100%;
font-size: clamp(12px, 3.6cqi, 20px);
font-weight: 600;
letter-spacing: 0.04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center !important;
}
body:has(.hero) .disc:hover {
transform: none;
}
body:has(.hero) .disc:hover img {
transform: scale(1.02);
}
.hero-footer-links {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
text-align: center;
gap: 4px;
margin-top: auto;
padding-top: clamp(0.75rem, 1.5vh, 1.1rem);
font-family: var(--font-mono);
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.hero-footer-links .footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.hero-footer-links .footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.hero-footer-links .footer-links a:hover {
color: var(--main-text);
}
body:has(.hero) footer {
display: none;
}
}
/* Narrow desktop: tighter grid only — keep side-by-side cards until sidebar is very narrow */
@media (min-width: 1031px) and (max-width: 1200px) {
body:has(.hero) .hero {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 44%);
gap: clamp(0.75rem, 1.5vw, 1.25rem);
padding: 0.5rem var(--site-gutter) var(--site-gutter);
}
body:has(.hero) .hero-text {
gap: 0.85rem;
}
}
/* Stacked compact rows when sidebar is too narrow for a clean 2-column grid */
@container hero-sidebar (max-width: 519px) {
.hero-text .discandvid-group {
justify-content: center;
width: 100%;
}
.hero-text .discandvid {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
width: auto;
max-width: 100%;
grid-template-columns: none;
}
.hero-text .disc {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: clamp(0.75rem, 3cqi, 1.05rem);
width: auto;
max-width: 100%;
padding: 8px 16px 8px 8px;
text-align: left;
}
.hero-text .disc img {
width: auto;
height: 78px;
max-width: 135px;
min-width: 0;
flex-shrink: 0;
object-fit: contain;
transform: none;
transition: transform 0.3s ease, filter 300ms;
}
.hero-text .disc p {
margin: 0 !important;
flex: 1 1 auto;
min-width: 0;
width: auto;
text-align: left !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(15px, 4.2cqi, 20px);
}
.hero-text .disc:hover img {
transform: none;
}
.hero-latest-single .latest-hero {
grid-template-columns: 88px minmax(0, 1fr);
gap: 12px;
padding: var(--album-pad-y) 14px;
}
.hero-latest-single .latest-hero-art {
width: 88px;
height: 88px;
aspect-ratio: auto;
flex-shrink: 0;
}
.hero-latest-single .latest-hero-body {
gap: 10px;
}
.hero-latest-single .latest-hero-title {
font-size: 1.2rem;
}
.hero-latest-single .latest-hero-meta {
font-size: 0.85rem;
}
.hero-latest-single .latest-hero-streaming a {
padding: 4px 5px;
min-height: 40px;
}
.hero-latest-single .latest-hero-streaming img {
width: 28px;
height: 28px;
}
.hero-footer-links .footer-links {
flex-direction: column;
align-items: center;
gap: 4px;
}
}
/* Tablet/mobile homepage: compact row-style disc buttons */
@media (max-width: 1030px) {
body:has(.hero) .discandvid-group {
justify-content: center;
width: 100%;
}
body:has(.hero) .discandvid {
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
width: auto;
max-width: 100%;
}
body:has(.hero) .disc {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.95rem;
width: auto;
max-width: 100%;
align-self: auto;
padding: 8px 16px 8px 8px;
text-align: left;
}
body:has(.hero) .disc img {
width: auto;
height: 88px;
max-width: 155px;
min-width: 108px;
flex-shrink: 0;
object-fit: contain;
transition: transform 0.3s ease, filter 300ms;
}
body:has(.hero) .disc p {
margin: 0 !important;
flex: 0 1 auto;
min-width: 0;
text-align: left !important;
align-self: center;
font-size: clamp(17px, 4.2vw, 21px);
}
}
@container hero-sidebar (max-height: 680px) and (max-width: 519px) {
.hero-intro {
gap: 0.45rem;
}
.hero-bottom {
gap: 0.6rem;
}
.discandvid {
gap: 0.45rem;
}
.disc img {
height: 68px;
max-width: 118px;
min-width: 86px;
}
.disc p {
margin-top: 0;
}
}
/* Short desktop viewports: compress sidebar before scroll kicks in */
@media (min-width: 1031px) and (max-height: 820px) {
body:has(.hero) .hero-text {
gap: 0.75rem;
}
body:has(.hero) .hero-text .hero-intro p:first-of-type {
line-height: 1.4;
}
}
/* Legacy layout (unused on current pages; kept for reference)
.menu { float: left; width: 20%; text-align: center; }
.menu a { background-color: #52505083; border: solid 1px rgba(255,255,255,0.45); padding: 8px; margin-top: 7px; display: block; width: 100%; color: var(--main-text); }
.main { float: left; width: 60%; padding: 0 20px; }
.right { background-color: #52505083; float: left; width: 20%; padding: 15px; margin-top: 7px; text-align: center; }
*/
/*CSS for the header on discography pages*/
.musicheader{
position: relative;
isolation: isolate;
z-index: 8;
margin: var(--site-gutter) var(--site-gutter) 0;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: rgba(0, 0, 0, 0.28);
border-radius: var(--radius-xl);
overflow: hidden;
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
}
.musicheader::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: var(--glass-bg);
}
.musicheader img,
.musicheader .headeralbumart{
position: relative;
z-index: 1;
height: 140px;
width: auto;
flex-shrink: 0;
border-radius: var(--radius-sm);
-webkit-filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
}
/* Shared glossy album-art frame (discography / hero / album pages) */
.album-art-glass {
position: relative;
display: block;
flex-shrink: 0;
overflow: hidden;
isolation: isolate;
border-radius: var(--album-art-radius, var(--radius-sm));
border: var(--album-art-glass-border);
box-shadow: var(--album-art-glass-shadow);
}
.album-art-glass::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: var(--album-art-glass-shine);
opacity: 0.78;
}
.album-art-glass img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
border: none;
}
body.album-page .musicheader .album-art-glass {
position: relative;
z-index: 1;
width: 140px;
height: 140px;
-webkit-filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
}
body.album-page .musicheader .album-art-glass .headeralbumart,
body.album-page .musicheader .album-art-glass img {
width: 100%;
height: 100%;
-webkit-filter: none;
filter: none;
}
.headermusicinfo{
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 20px;
font-size: 22px;
padding: 20px 30px;
height: 200px;
box-sizing: border-box;
min-width: 0;
width: 100%;
overflow: hidden;
}
.headermusicinfo h1{
-webkit-text-stroke: var(--music-info-stroke);
font-weight: bold;
color: var(--music-info-text);
-webkit-filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
font-size: clamp(1.65rem, 4.8vw, 75px);
margin: 0;
padding: 0;
line-height: 1.05;
font-family: var(--font-display);
min-width: 0;
flex: 1 1 auto;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Album pages: blurred cover bg; same glass border as normal music headers */
body.album-page .musicheader {
background-color: #050505;
background-image: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: hidden;
isolation: isolate;
border: var(--glass-border);
box-shadow: var(--glass-shadow);
}
body.album-page .musicheader::before {
content: '';
position: absolute;
/* Expand past edges so blur softens without a hard/center seam */
inset: -18%;
z-index: 0;
pointer-events: none;
background-image: var(--musicheader-cover);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: transparent;
filter: blur(22px) brightness(0.62) saturate(1.08);
transform: none;
}
body.album-page .musicheader::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(
100deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.2) 55%,
rgba(0, 0, 0, 0.34) 100%
);
}
body.album-page .headermusicinfo h1 {
/* `none` is invalid for -webkit-text-stroke shorthand in some engines */
-webkit-text-stroke: 0 transparent;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.85),
0 2px 14px rgba(0, 0, 0, 0.55);
-webkit-filter: none;
filter: none;
}
.pagecontent {
font-family: var(--font-body) !important;
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--site-gutter);
box-sizing: border-box;
}
.musicpage {
font-family: var(--font-display);
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding-left: var(--site-gutter);
padding-right: var(--site-gutter);
box-sizing: border-box;
}
.musicpage h2{
}
.musicpage .musicpage-title{
font-size: 55px;
margin: 8px 0px 10px 0;
font-weight: bold;
}
.musicpage h2{
font-size: 20px;
margin: 0;
font-weight: normal;
}
.musicpage audio{
margin-top:15px;
width:290px;
}
.musicpage iframe{
margin: 0;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
width:700px;
}
.homevideo{
margin: 15px 0 0 0;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
width:700px;
}
.streaming{
background-color: rgba(36, 36, 36, 0.507);
width:290px;
padding:7px;
margin-top:10px;
border: 3px solid rgba(255, 255, 255, 0.651);
border-radius: var(--radius-md);
}
.streaming p{
margin:0 0 3px 0;
font-size:20px;
}
.streaming span{
font-size:14px;
margin-left:5px;
}
.streamingicons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.streamingicons a {
font-size: 17px;
}
.streamingicons img {
height: 40px;
width: 40px;
transition: transform 0.3s ease;
}
.streamingicons img:hover {
transform: scale(1.1);
}
/* —— Singles / Albums section (discography) —— */
.albums-section {
margin-top: 0.5rem;
margin-bottom: 1.75rem;
}
.albums-section.latest-hero-section {
margin-top: 0;
margin-bottom: 0;
}
.albumsdisplay {
z-index: 0;
overflow: visible;
margin: 0 auto;
width: 100%;
max-width: var(--narrow-max-width);
padding: 0;
}
.albumsdisplay:last-of-type {
margin-bottom: 0;
}
.albums-section-title {
font-family: var(--font-display) !important;
font-weight: 600;
font-size: clamp(1.5rem, 3.5vw, 2rem);
letter-spacing: 0.02em;
color: var(--main-text);
margin: 0 0 16px;
padding: 0 0 0.12em;
border-bottom: none;
position: relative;
display: inline-block;
}
.albums-section-title::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.72), rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.28));
box-shadow: 0 0 12px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.22);
}
.albumsdisplay h2.albums-section-title {
margin-bottom: 16px;
}
.albums {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px 20px;
justify-items: stretch;
align-items: start;
}
.albums a {
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
color: var(--main-text);
text-align: center;
padding: 0;
text-decoration: none;
transition: color 0.2s ease;
width: 100%;
max-width: 180px;
margin: 0 auto;
}
.albums a:hover {
color: rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.95);
}
.albums a:hover img {
border-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.56);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 18px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.34);
}
.albums img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: var(--radius-sm);
margin-bottom: 12px;
display: block;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.album-title {
font-size: clamp(0.875rem, 1.8vw, 1.05rem);
line-height: 1.35;
min-height: 2.4em;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
word-break: break-word;
color: inherit;
}
/* —— Singles section: compact release rows —— */
.albumsdisplay.singles-section {
margin-bottom: 12px;
}
.single-chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-width: var(--narrow-max-width);
width: 100%;
margin: 0 auto;
}
.single-chip:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.single-chip {
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--radius-md);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
cursor: default;
}
.single-chip > .album-art-glass {
width: 64px;
height: 64px;
flex-shrink: 0;
}
.single-chip-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
}
.single-chip-title {
font-family: var(--font-display);
font-size: clamp(0.92rem, 1.8vw, 1.05rem);
font-weight: 600;
color: var(--main-text);
line-height: 1.25;
margin: 0;
word-break: break-word;
}
.single-chip-meta {
font-family: var(--font-mono);
font-size: clamp(0.72rem, 1.4vw, 0.82rem);
font-weight: normal;
color: rgba(255, 255, 255, 0.55);
margin: 0;
line-height: 1.3;
}
.single-chip-streaming {
display: flex;
align-items: center;
gap: var(--album-inset-gap, 4px);
flex-shrink: 0;
padding: var(--album-inset-pad, 6px);
border-radius: var(--album-inset-radius, var(--radius-md));
background: var(--album-inset-tray-bg);
border: 1px solid var(--album-inset-tray-border);
box-shadow: var(--album-inset-tray-shadow);
}
.single-chip-streaming a {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--album-control-radius, var(--radius-inner));
text-decoration: none;
color: var(--main-text);
background: var(--album-btn-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--album-btn-border);
box-shadow: var(--album-btn-shadow);
transition: var(--fluent-hover-transition);
box-sizing: border-box;
--mouse-x: 50%;
--mouse-y: 50%;
cursor: pointer;
}
.single-chip-streaming a::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
var(--theme-hover-glow) 0%,
var(--theme-hover-glow-soft) 35%,
transparent 55%
);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 1;
}
.single-chip-streaming a:hover {
background-color: var(--theme-hover-fill);
box-shadow: var(--album-btn-hover-shadow), var(--fluent-hover-shadow);
}
.single-chip-streaming a:hover::before {
opacity: 1;
}
.single-chip-streaming img {
position: relative;
z-index: 1;
width: 28px;
height: 28px;
border: none;
box-shadow: none;
border-radius: 0;
}
@media (max-width: 640px) {
.single-chips {
grid-template-columns: 1fr;
}
.single-chip:last-child:nth-child(odd) {
grid-column: auto;
}
.single-chip {
grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 10px;
padding: 10px;
}
.single-chip > .album-art-glass {
width: 56px;
height: 56px;
}
.single-chip-streaming a {
width: 36px;
height: 36px;
}
.single-chip-streaming img {
width: 26px;
height: 26px;
}
}
/*these classes can be applied to elements to provide the given, yeah..*/
.centered{ /*This bad boy will center a div*/
margin-left:auto;
margin-right:auto;
}
footer {
width: 100%;
text-align: center;
margin-top: 0;
padding-inline: max(var(--site-gutter), env(safe-area-inset-left, 0px)) max(var(--site-gutter), env(safe-area-inset-right, 0px));
padding-bottom: max(var(--page-footer-gap), env(safe-area-inset-bottom, 0px));
font-family: var(--font-mono);
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
box-sizing: border-box;
}
.footer-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 480px;
margin: 0 auto;
padding: 0;
}
.footer-brand {
font-size: 15px;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.85);
}
.footer-links {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--main-text);
}
.bottom-nav {
display: none;
}
/* Mobile-style nav (bottom bar) for both mobile and tablet – all pages */
@media only screen and (max-width: 1030px) {
.navbar {
display: block;
height: 0;
padding: 0;
margin: 0;
margin-bottom: 0;
overflow: visible;
position: static;
background: transparent;
}
.navitems {
display: block;
height: 0;
min-height: 0;
overflow: visible;
}
.navlinks,
.navicons {
display: none;
}
.header-chip {
position: fixed;
top: max(12px, env(safe-area-inset-top, 12px));
left: 50%;
transform: translateX(-50%) translateY(calc(-100% - max(12px, env(safe-area-inset-top, 12px))));
max-width: calc(100vw - (2 * var(--site-gutter)));
min-width: 0;
width: max-content;
height: auto;
min-height: 0;
padding: 10px 24px;
font-size: 20px;
border-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.30);
display: block;
transition:
opacity var(--header-chip-duration) var(--header-chip-ease),
transform var(--header-chip-duration) var(--header-chip-ease),
visibility 0s linear var(--header-chip-duration);
}
.header-chip.is-marquee {
width: calc(100vw - (2 * var(--site-gutter)));
max-width: calc(100vw - (2 * var(--site-gutter)));
}
.header-chip.visible {
transform: translateX(-50%) translateY(0);
transition:
opacity var(--header-chip-duration) var(--header-chip-ease),
transform var(--header-chip-duration) var(--header-chip-ease),
visibility 0s linear 0s;
}
body {
padding-bottom: var(--bottom-nav-offset);
}
.bottom-nav {
--bottom-nav-height: 64px;
--bottom-nav-bottom-gap: 12px;
--bottom-nav-outer-radius: 40px;
--bottom-nav-item-gap: 4px;
--bottom-tab-pill-radius: var(--radius-pill);
--bottom-nav-glass-blur: blur(11px) saturate(1.55) contrast(1.1) brightness(1.03);
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: auto;
z-index: 10;
pointer-events: none;
}
.bottom-nav-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: 100%;
box-sizing: border-box;
padding-inline: max(var(--site-gutter), env(safe-area-inset-left, 0px)) max(var(--site-gutter), env(safe-area-inset-right, 0px));
padding-bottom: max(var(--bottom-nav-bottom-gap), env(safe-area-inset-bottom, 0px));
pointer-events: none;
}
.bottom-nav-tabs {
position: relative;
overflow: hidden;
isolation: isolate;
container-type: inline-size;
display: flex;
justify-content: center;
align-items: center;
width: min(
348px,
calc(100vw - (2 * var(--site-gutter)) - var(--bottom-nav-height) - 12px)
);
min-width: 0;
height: var(--bottom-nav-height);
background: var(--bottom-nav-glass-bg);
backdrop-filter: var(--bottom-nav-glass-blur);
-webkit-backdrop-filter: var(--bottom-nav-glass-blur);
border: var(--bottom-nav-glass-border);
box-shadow: var(--bottom-nav-glass-shadow);
border-radius: var(--bottom-nav-outer-radius);
padding: var(--bottom-nav-item-gap);
gap: var(--bottom-nav-item-gap);
pointer-events: auto;
box-sizing: border-box;
}
.bottom-nav-tabs::after,
.bottom-links-btn::after,
.bottom-nav-panel::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background:
linear-gradient(118deg, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.18) 0%, transparent 18%, transparent 66%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.14) 100%),
linear-gradient(72deg, transparent 0%, rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.08) 48%, transparent 54%),
radial-gradient(ellipse 78% 90% at 20% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.12) 0%, transparent 52%),
radial-gradient(ellipse 90% 70% at 82% 100%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.16) 0%, transparent 62%);
opacity: 0.82;
}
.bottom-nav-tabs > *,
.bottom-links-btn > *,
.bottom-nav-panel > * {
position: relative;
z-index: 2;
}
.bottom-tab {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-mono);
font-weight: 700;
background: none;
border: none;
cursor: pointer;
padding: 0;
min-width: 0;
min-height: 0;
align-self: stretch;
border-radius: var(--bottom-tab-pill-radius);
transition: color 300ms, background-color 300ms;
flex: 1 1 0;
box-sizing: border-box;
}
.bottom-tab > * {
position: relative;
z-index: 2;
}
.bottom-tab.active::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(180deg, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.12) 0%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 58%, rgba(0, 0, 0, 0.08) 100%),
radial-gradient(ellipse 80% 100% at 50% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14) 0%, transparent 62%),
linear-gradient(112deg, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.18) 0%, transparent 32%, transparent 58%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 100%),
radial-gradient(ellipse 85% 120% at 26% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.16) 0%, transparent 54%);
box-shadow:
inset 0 1px 0 rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.36),
inset 0 -1px 0 rgba(0, 0, 0, 0.16),
0 0 14px rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12);
}
.bottom-tab.active::after {
content: '';
position: absolute;
top: -35%;
bottom: -35%;
left: -45%;
z-index: 1;
width: 38%;
pointer-events: none;
background: linear-gradient(105deg, transparent 0%, rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.22) 48%, transparent 100%);
transform: rotate(12deg);
opacity: 0.55;
}
.bottom-tab .tab-icon {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
flex-shrink: 0;
}
.bottom-tab .tab-icon svg {
display: block;
width: 20px;
height: 20px;
stroke-width: 2.35;
}
.bottom-tab .tab-icon svg rect {
rx: 5;
ry: 5;
}
.bottom-tab .tab-label {
font-size: 9px;
letter-spacing: 0.5px;
line-height: 1;
}
.bottom-tab.active {
z-index: 3;
color: var(--main-text);
border-radius: var(--radius-pill);
background: none;
box-shadow: none;
padding: 0;
}
/* Very narrow tab bar: icon-only keeps each pill at least as wide as tall */
@container (max-width: 232px) {
.bottom-tab {
gap: 0;
padding: 0;
border-radius: var(--radius-pill);
}
.bottom-tab.active {
padding: 0;
}
.bottom-tab.active::before {
inset: 0;
}
.bottom-tab .tab-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
.bottom-tab:hover {
color: var(--main-text);
background-color: rgba(255, 255, 255, 0.06);
}
.bottom-links-btn {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: var(--bottom-nav-height);
height: var(--bottom-nav-height);
padding: 0;
background: var(--bottom-nav-glass-bg);
backdrop-filter: var(--bottom-nav-glass-blur);
-webkit-backdrop-filter: var(--bottom-nav-glass-blur);
border: var(--bottom-nav-glass-border);
box-shadow: var(--bottom-nav-glass-shadow);
border-radius: 50%;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-mono);
font-weight: 700;
cursor: pointer;
transition:
color 300ms,
background-color 300ms,
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: auto;
flex-shrink: 0;
box-sizing: border-box;
}
.bottom-links-btn .tab-icon {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
}
.bottom-links-btn .tab-icon svg {
display: block;
width: 20px;
height: 20px;
}
.bottom-links-btn .tab-label {
font-size: 9px;
letter-spacing: 0.5px;
line-height: 1;
}
.bottom-links-btn:hover {
color: var(--main-text);
background-color: rgba(255, 255, 255, 0.06);
}
.bottom-links-btn:active {
background-color: rgba(255, 255, 255, 0.09);
}
.bottom-nav:has(.bottom-nav-panel.open) .bottom-links-btn {
color: var(--main-text);
background-color: rgba(255, 255, 255, 0.1);
transform: scale(1.05);
box-shadow:
0 6px 28px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.bottom-nav::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s linear 0.4s;
z-index: -1;
}
.bottom-nav:has(.bottom-nav-panel.open)::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
@keyframes bottom-nav-item-in {
0% {
opacity: 0;
transform: translate3d(0, 5px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.bottom-nav-panel {
display: flex;
flex-direction: column;
max-width: 320px;
position: absolute;
right: max(var(--site-gutter), env(safe-area-inset-right, 0px));
bottom: calc(var(--bottom-nav-height) + 14px + var(--bottom-nav-bottom-gap));
left: auto;
transform-origin: 100% 100%;
background: var(--bottom-nav-glass-bg);
backdrop-filter: var(--bottom-nav-glass-blur);
-webkit-backdrop-filter: var(--bottom-nav-glass-blur);
border: var(--bottom-nav-glass-border);
box-shadow: var(--bottom-nav-glass-shadow);
border-radius: var(--bottom-nav-outer-radius);
overflow: hidden;
isolation: isolate;
pointer-events: none;
visibility: hidden;
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.94);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.7, 0.8),
opacity 0.22s ease,
visibility 0s linear 0.3s,
box-shadow 0.3s ease;
}
.bottom-nav-panel.open {
visibility: visible;
pointer-events: auto;
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.38),
0 4px 16px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s,
box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bottom-nav-panel .bottom-nav-section-title,
.bottom-nav-panel a {
opacity: 0;
transform: translate3d(0, 5px, 0);
}
.bottom-nav-panel.open .bottom-nav-section-title,
.bottom-nav-panel.open a {
animation: bottom-nav-item-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bottom-nav-panel.open .bottom-nav-section:nth-child(1) .bottom-nav-section-title { animation-delay: 0.1s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(1) a:nth-of-type(1) { animation-delay: 0.14s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(1) a:nth-of-type(2) { animation-delay: 0.18s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(2) .bottom-nav-section-title { animation-delay: 0.16s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(2) a { animation-delay: 0.2s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(3) .bottom-nav-section-title { animation-delay: 0.2s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(3) a:nth-of-type(1) { animation-delay: 0.24s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(3) a:nth-of-type(2) { animation-delay: 0.28s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(4) .bottom-nav-section-title { animation-delay: 0.24s; }
.bottom-nav-panel.open .bottom-nav-section:nth-child(4) a { animation-delay: 0.28s; }
.bottom-nav-panel a {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 22px;
text-decoration: none;
color: var(--main-text);
font-family: var(--font-mono);
font-size: 15px;
font-weight: 700;
transition: background-color 300ms;
}
.bottom-nav-section {
display: flex;
flex-direction: column;
}
.bottom-nav-section-title {
padding: 14px 22px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-mono);
}
.bottom-nav-section:first-child .bottom-nav-section-title {
padding-top: 16px;
}
.bottom-nav-panel a:hover {
background-color: rgba(255, 255, 255, 0.07);
}
.bottom-nav-panel img {
height: 26px;
width: 26px;
}
@media (prefers-reduced-motion: reduce) {
.bottom-nav::before {
transition: none;
}
.bottom-nav-panel,
.bottom-nav-panel.open {
animation: none;
transition: none;
}
.bottom-nav-panel .bottom-nav-section-title,
.bottom-nav-panel a,
.bottom-nav-panel.open .bottom-nav-section-title,
.bottom-nav-panel.open a {
animation: none;
opacity: 1;
transform: none;
}
.bottom-nav-panel {
opacity: 0;
visibility: hidden;
}
.bottom-nav-panel.open {
opacity: 1;
visibility: visible;
}
.bottom-nav:has(.bottom-nav-panel.open) .bottom-links-btn {
transform: none;
}
}
}
@media only screen and (max-width: 1150px) {
.disc {
max-width: 298px;
}
}
/*halfway*/
@media only screen and (max-width: 910px) {
.navicons a {
height: 28px;
width: 28px;
}
.navicons img {
height: 28px;
width: 28px;
}
.navicons {
gap: 8px;
}
.musicpage iframe{
width:100%;
}
.homevideo{
width:100%;
}
}
/* Tablet-ish: between mobile and desktop – layout only; nav is in (max-width: 1030px) */
@media only screen and (min-width: 621px) and (max-width: 1030px) {
.hero {
max-width: var(--site-max-width);
padding: 0 var(--site-gutter);
margin-top: 1.25rem;
}
.hero-text .whoisbobby {
margin-bottom: 0.5em;
font-size: clamp(36px, 7vw, 50px);
text-align: left;
}
.hero-text {
align-items: flex-start;
text-align: left;
}
.hero-text p {
text-align: left;
}
.hero-text p:first-of-type {
font-size: clamp(18px, 3.4vw, 24px);
line-height: 1.4;
}
}
/* Mobile Style */
@media only screen and (max-width: 620px) {
html {
background-color: #000;
}
html::before {
background:
radial-gradient(ellipse 70% 42% at 8% 18%, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.26) 0%, transparent 68%),
radial-gradient(ellipse 58% 36% at 92% 28%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.18) 0%, transparent 62%),
radial-gradient(ellipse 80% 48% at 78% 78%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.28) 0%, transparent 64%),
radial-gradient(ellipse 62% 40% at 12% 72%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.14) 0%, transparent 58%),
radial-gradient(ellipse 95% 55% at 48% 48%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 0%, transparent 70%),
linear-gradient(165deg, #0a0a0a 0%, #000000 38%, #030303 72%, #000000 100%);
background-size: 100% 100%;
background-position: 0 0;
-webkit-animation: none;
animation: none;
will-change: auto;
}
body::before {
background:
radial-gradient(ellipse 55% 32% at 22% 34%, rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.1) 0%, transparent 70%),
radial-gradient(ellipse 48% 28% at 82% 52%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.07) 0%, transparent 68%),
radial-gradient(ellipse 70% 36% at 40% 88%, rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.09) 0%, transparent 72%),
radial-gradient(ellipse 120% 100% at 50% 40%, transparent 42%, rgba(0, 0, 0, 0.42) 100%);
}
html::after {
inset: 0;
background:
radial-gradient(ellipse 52% 34% at 0% 42%, var(--ribbon-glow) 0%, transparent 72%),
radial-gradient(ellipse 48% 30% at 100% 18%, var(--ribbon-blue) 0%, transparent 70%),
radial-gradient(ellipse 60% 28% at 70% 62%, var(--ribbon-glow) 0%, transparent 74%),
radial-gradient(ellipse 70% 26% at 30% 8%, var(--ribbon-blue-mid) 0%, transparent 68%),
radial-gradient(ellipse 85% 30% at 55% 100%, var(--ribbon-warm-mid) 0%, transparent 70%),
linear-gradient(125deg, transparent 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.05) 45%, transparent 78%);
background-size: 100% 100%;
background-position: 0 0;
background-repeat: no-repeat;
mix-blend-mode: normal;
-webkit-filter: none;
filter: none;
opacity: 0.62;
-webkit-transform: none;
transform: none;
-webkit-animation: none;
animation: none;
will-change: auto;
}
body::after {
display: none;
}
.hero {
margin-top: 1.25rem;
padding: 0 var(--site-gutter);
}
.middlecontent {
flex-direction: column;
align-items: center;
gap: 1.25rem;
text-align: center;
}
.hero-text {
width: 100%;
align-items: center;
}
.albumsdisplay {
overflow: visible;
width: 100%;
padding: 0;
}
.albums {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 18px 16px;
}
.albums-section-title {
font-size: clamp(1.35rem, 5vw, 1.75rem);
margin-bottom: 12px;
}
.album-title {
min-height: 2.4em;
font-size: 0.875rem;
}
.albumsdisplay {
margin-bottom: 22px;
}
.header {
text-align: left;
font-size: 40px;
height: 100px;
line-height: 100px;
margin: var(--site-gutter) var(--site-gutter) 0;
border-radius: var(--radius-lg);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
}
.header-chip {
font-size: 20px;
padding: 10px 24px;
top: max(12px, env(safe-area-inset-top, 12px));
}
.pagecontent {
width: 100%;
margin: 0 auto;
}
.musicpage {
width: 100%;
margin: 0 auto;
}
.container p {
font-size: 20px;
margin-bottom: 15px !important;
}
.musicpage .musicpage-title {
font-size: 40px;
}
.musicpage iframe {
width: 100%;
}
.homevideo {
width: 95%;
}
.musicheader {
height: 100px;
margin: var(--site-gutter) var(--site-gutter) 0;
border-radius: var(--radius-lg);
}
.musicheader img,
.musicheader .headeralbumart {
height: 80px;
}
body.album-page .musicheader .album-art-glass {
width: 80px;
height: 80px;
}
.headermusicinfo {
height: 100px;
padding: 10px 20px;
gap: 12px;
}
.headermusicinfo h1 {
font-size: clamp(1.1rem, 4.5vw, 40px);
margin: 0;
}
body.album-page .musicheader {
height: 120px;
}
body.album-page .headermusicinfo {
height: 120px;
}
body.album-page .headermusicinfo h1 {
font-size: clamp(1.5rem, 7vw, 2.15rem);
-webkit-text-stroke: 0 transparent;
}
.middlecontent {
padding: 0 var(--site-gutter);
}
.middlecontent p {
text-align: left;
}
.hero-text {
align-items: flex-start;
text-align: left;
}
.hero-text .whoisbobby {
font-size: clamp(32px, 8vw, 42px);
text-align: left;
}
.hero-text p {
text-align: left;
}
.hero-text p:first-of-type {
font-size: clamp(16px, 4vw, 20px);
line-height: 1.4;
}
.hero-text p:first-of-type {
margin-top: 0.4em;
}
.discandvid {
flex-direction: column;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0;
align-self: center;
}
.disc {
max-width: 260px;
width: 100%;
}
.countdown {
font-size: 30px;
}
.musecard {
width: 100%;
padding: 0;
margin-bottom: 0;
}
.musecard h4 {
font-family: var(--font-display);
font-size: 55px;
margin: 8px 0 10px 0;
font-weight: bold;
}
.musecard h6 {
font-size: 20px;
margin: 0;
font-weight: normal;
font-style: italic;
}
.musecard h5 {
margin: 0;
}
.musecard p {
font-family: var(--font-mono) !important;
margin: 10px 15px 0 15px;
text-align: left;
}
figure img {
width: 100%;
}
.albumsdisplay h2 {
margin-left: 0;
}
.tracklist h4 {
margin-left: 5px;
}
.container h4 {
font-size: 40px;
}
}
/* Album detail pages – match discography column centering */
body.album-page .musicpage {
max-width: var(--narrow-max-width);
text-align: left;
}
body.album-page .musicpage > h2,
body.album-page .musicpage .musicpage-blurb,
body.album-page .musicpage .streaming,
body.album-page .musicpage .tracklist,
body.album-page .musicpage .album-videos,
body.album-page .musicpage iframe {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
body.album-page .musicpage iframe {
display: block;
}
/* Album detail pages – tracklist + blurb + streaming */
.musicpage .musicpage-blurb {
font-family: var(--font-mono);
font-size: 0.95rem;
line-height: 1.55;
margin: 14px 0 0;
max-width: 42rem;
color: rgba(255, 255, 255, 0.85);
}
.musicpage > h2 {
margin-top: 8px;
}
.musicpage .streaming {
width: 100%;
max-width: 42rem;
margin-top: 16px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
box-sizing: border-box;
}
.musicpage .streaming > p {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin: 0 0 8px;
}
.musicpage .streaming > span {
display: block;
margin: 8px 0 0;
font-family: var(--font-mono);
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.35);
}
.musicpage .streamingicons {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--album-inset-gap, 4px);
margin: 0;
padding: var(--album-inset-pad, 6px);
background: var(--album-inset-tray-bg);
border: 1px solid var(--album-inset-tray-border);
border-radius: var(--album-inset-radius, var(--radius-md));
box-shadow: var(--album-inset-tray-shadow);
}
.musicpage .streamingicons a {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--main-text);
background: var(--album-btn-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--album-btn-border);
border-radius: var(--album-control-radius, var(--radius-inner));
box-shadow: var(--album-btn-shadow);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
box-sizing: border-box;
--mouse-x: 50%;
--mouse-y: 50%;
font-size: inherit;
}
.musicpage .streamingicons a::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
var(--theme-hover-glow) 0%,
var(--theme-hover-glow-soft) 35%,
transparent 55%
);
opacity: 0;
transition: opacity 0.15s ease;
}
.musicpage .streamingicons a:hover {
background-color: var(--theme-hover-fill);
box-shadow: var(--album-btn-hover-shadow), var(--fluent-hover-shadow);
}
.musicpage .streamingicons a:hover::before {
opacity: 1;
}
.musicpage .streamingicons a > * {
position: relative;
z-index: 1;
}
.musicpage .streamingicons a:not(.album-film-btn):not(.bandcamp-download-btn) {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
padding: 6px 4px;
}
.musicpage .streamingicons img {
height: 34px;
width: 34px;
display: block;
transform: none;
transition: none;
}
.musicpage .streamingicons a:not(.album-film-btn):not(.bandcamp-download-btn):hover img {
transform: none;
filter: none;
}
.musicpage .streamingicons .album-film-btn {
flex: 1 1 100%;
width: 100%;
gap: 8px;
padding: 10px 20px;
margin-right: 0;
margin-bottom: 2px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border: var(--album-btn-border);
color: var(--main-text);
}
.musicpage .streamingicons .album-film-btn img {
height: 20px;
width: 20px;
}
.musicpage .streamingicons .album-film-btn:hover {
background: var(--theme-hover-fill);
}
.musicpage .streamingicons .bandcamp-download-btn {
flex: 1 1 100%;
width: 100%;
gap: 8px;
padding: 10px 20px;
margin-right: 0;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border: var(--album-btn-border);
color: var(--main-text);
}
.musicpage .streamingicons .bandcamp-download-btn img {
height: 20px;
width: 20px;
}
.musicpage .streamingicons .bandcamp-download-btn:hover {
background: var(--theme-hover-fill);
}
.musicpage .tracklist {
margin-top: 22px;
margin-bottom: 24px;
padding: 14px 16px;
max-width: 42rem;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.musicpage .tracklist h4 {
font-family: var(--font-mono);
font-size: 0.65rem !important;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin: 0 0 8px;
padding: 0;
border: none;
}
.musicpage .tracklist .track {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: transparent;
min-width: 0;
font-family: var(--font-display);
font-size: 0.95rem;
line-height: 1.35;
}
.musicpage .tracklist .track:nth-child(even),
.musicpage .tracklist .track:nth-child(odd) {
background: transparent;
}
.musicpage .tracklist .track:last-child {
border-bottom: none;
}
.musicpage .tracklist .track > span:first-child {
flex: 0 0 1.5rem;
width: auto;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.35);
text-align: right;
font-variant-numeric: tabular-nums;
}
.musicpage .tracklist .track-title {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-display) !important;
font-weight: normal !important;
color: inherit !important;
flex-shrink: 1;
overflow-wrap: break-word;
word-break: break-word;
}
.musicpage .tracklist .track-title-link {
flex: 1 1 auto;
min-width: 0;
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
color: inherit;
text-decoration: none;
overflow-wrap: break-word;
word-break: break-word;
}
.musicpage .tracklist .track-title-link:hover {
color: rgba(255, 255, 255, 0.95);
text-decoration: underline;
text-underline-offset: 2px;
}
.musicpage .tracklist .track-link-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.45;
}
.musicpage .tracklist .track-title-link:hover .track-link-icon {
opacity: 0.85;
}
.musicpage .tracklist .track-music-video-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-left: auto;
padding: 0 0 0 8px;
border-radius: var(--radius-sm);
border: none;
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: color 0.15s ease, background 0.15s ease;
flex-shrink: 0;
}
.musicpage .tracklist .track-music-video-link:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.06);
}
.musicpage .tracklist .track-music-video-link svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.musicpage .tracklist .track-music-video-link span {
font-family: inherit;
font-weight: inherit;
color: inherit;
flex-shrink: unset;
}
@media (max-width: 640px) {
.musicpage .tracklist {
padding: 12px 12px;
}
.musicpage .tracklist .track {
padding: 9px 0;
font-size: 0.92rem;
gap: 8px;
}
.musicpage .streamingicons a:not(.album-film-btn):not(.bandcamp-download-btn) {
min-height: 40px;
}
.musicpage .streamingicons img {
height: 32px;
width: 32px;
}
.musicpage .streamingicons .bandcamp-download-btn img,
.musicpage .streamingicons .album-film-btn img {
height: 20px;
width: 20px;
}
body.album-page.album-stars-saturn .musicpage .tracklist::before,
body.album-page.album-stars-winter .musicpage .tracklist::before,
body.album-page.album-stars-slowpoke .musicpage .tracklist::before,
body.album-page.album-stars-redux .musicpage .tracklist::before,
body.album-page.album-stars-iseewhatidont .musicpage .tracklist::before {
opacity: 0.07;
}
}
/* Album pages: stars/dots tracklist backgrounds (match discography) */
body.album-page.album-stars-saturn .musicpage .tracklist,
body.album-page.album-stars-winter .musicpage .tracklist,
body.album-page.album-stars-slowpoke .musicpage .tracklist,
body.album-page.album-stars-redux .musicpage .tracklist,
body.album-page.album-stars-iseewhatidont .musicpage .tracklist {
position: relative;
overflow: hidden;
isolation: isolate;
}
body.album-page.album-stars-saturn .musicpage .tracklist::before,
body.album-page.album-stars-winter .musicpage .tracklist::before,
body.album-page.album-stars-slowpoke .musicpage .tracklist::before,
body.album-page.album-stars-redux .musicpage .tracklist::before,
body.album-page.album-stars-iseewhatidont .musicpage .tracklist::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
opacity: 0.13;
mix-blend-mode: screen;
pointer-events: none;
}
body.album-page.album-stars-saturn .musicpage .tracklist::before {
background: url('/assets/img/dots/orange stars.png') center / cover no-repeat;
}
body.album-page.album-stars-winter .musicpage .tracklist::before {
background: url('/assets/img/dots/white stars.png') center / cover no-repeat;
opacity: 0.12;
}
body.album-page.album-stars-slowpoke .musicpage .tracklist::before {
background: url('/assets/img/dots/yellow stars.png') center / cover no-repeat;
}
body.album-page.album-stars-redux .musicpage .tracklist::before {
background: url('/assets/img/dots/red stars.png') center / cover no-repeat;
}
body.album-page.album-stars-iseewhatidont .musicpage .tracklist::before {
background: url('/assets/img/dots/blue stars.png') center / cover no-repeat;
}
body.album-page.album-stars-saturn .musicpage .tracklist > *,
body.album-page.album-stars-winter .musicpage .tracklist > *,
body.album-page.album-stars-slowpoke .musicpage .tracklist > *,
body.album-page.album-stars-redux .musicpage .tracklist > *,
body.album-page.album-stars-iseewhatidont .musicpage .tracklist > * {
position: relative;
z-index: 1;
}
/* Album pages: video cards between streaming and tracklist — always mobile inline layout */
.musicpage .album-videos {
--film-thumb-glass-shine:
linear-gradient(125deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 26%, transparent 50%, transparent 70%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.14) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, transparent 36%),
radial-gradient(ellipse 85% 55% at 50% 0%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.22) 0%, transparent 68%);
margin-top: 22px;
margin-bottom: 0;
max-width: 42rem;
}
.musicpage .album-videos > h4 {
font-family: var(--font-mono);
font-size: 0.65rem !important;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 12px;
}
.musicpage .album-videos .film-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.musicpage .album-videos .film-card {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
transition: var(--fluent-hover-transition);
}
.musicpage .album-videos .film-card:hover {
background-color: var(--theme-hover-fill);
box-shadow: var(--fluent-hover-shadow);
}
.musicpage .album-videos .film-card-link {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 12px;
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
}
.musicpage .album-videos .film-card-thumb {
position: relative;
flex: 0 0 116px;
width: 116px;
min-width: 116px;
aspect-ratio: 16 / 9;
border-radius: calc(var(--radius-xl) - 12px);
overflow: hidden;
}
.musicpage .album-videos .film-card-thumb::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: var(--film-thumb-glass-shine);
opacity: 0.78;
}
.musicpage .album-videos .film-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.musicpage .album-videos .film-card:hover .film-card-thumb img {
transform: scale(1.02);
}
.musicpage .album-videos .film-play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.22);
border-radius: inherit;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 2;
}
.musicpage .album-videos .film-card:hover .film-play-btn {
opacity: 1;
}
.musicpage .album-videos .film-play-btn svg {
width: 22px;
height: 22px;
fill: rgba(255, 255, 255, 0.9);
opacity: 0.88;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}
.musicpage .album-videos .film-card-body {
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: baseline;
row-gap: 0.2rem;
flex: 1;
min-width: 0;
padding: 0;
position: relative;
z-index: 2;
}
.musicpage .album-videos .film-card-title {
order: 1;
flex: 1 1 100%;
width: 100%;
margin: 0;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
line-height: 1.35;
color: rgba(255, 255, 255, 0.92);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.musicpage .album-videos .film-card-tag {
order: 2;
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.48);
}
.musicpage .album-videos .film-card-date {
order: 3;
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.48);
}
.musicpage .streamingicons a {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 6px;
transform: perspective(600px) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg));
transition: transform var(--glass-press-duration) var(--glass-press-ease), box-shadow var(--glass-press-duration) var(--glass-press-ease);
}
.musicpage .streamingicons a:active,
.musicpage .streamingicons a.is-pressed {
transform: perspective(600px) translateY(2px) scale(0.96);
box-shadow: var(--glass-shadow-pressed);
}
.musicpage h2 {
font-family: var(--font-mono);
font-weight: 500;
letter-spacing: 0.06em;
font-size: 0.9rem;
text-transform: uppercase;
color: rgba(232, 236, 234, 0.55);
}
.musicpage-blurb {
font-family: var(--font-body);
font-size: 1.1rem;
}
.headermusicinfo h1 {
font-family: var(--font-display) !important;
letter-spacing: -0.03em;
}
/* ========== Tactile glass utilities ========== */
.glass {
position: relative;
isolation: isolate;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-lg);
}
.glass-press {
--glass-rx: 0deg;
--glass-ry: 0deg;
position: relative;
isolation: isolate;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-lg);
transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(0) scale(1);
transform-style: preserve-3d;
transition:
transform var(--glass-press-duration) var(--glass-press-ease),
box-shadow var(--glass-press-duration) var(--glass-press-ease),
border-color 0.2s ease;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.glass-press:hover,
.glass-press.is-proximity-hover {
box-shadow: var(--glass-shadow-lift);
}
.glass-press:active,
.glass-press.is-pressed {
transform: perspective(700px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(2px) scale(0.98);
box-shadow: var(--glass-shadow-pressed);
}
.glass-press:focus-visible {
outline: 2px solid rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.55);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.glass-press,
.navlinks a,
.navicons a {
transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
transform: none !important;
}
.glass-press:active,
.glass-press.is-pressed,
.navlinks a:active,
.navlinks a.is-pressed {
transform: none !important;
box-shadow: var(--glass-shadow-pressed);
}
}
/* ========== Homepage redesign ========== */
body.home-page {
--nav-float-offset: 0px;
}
body.home-page .navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
/* Match shared .navbar inset (8px + site gutter) so pills land in the same spot */
padding: 8px var(--site-gutter);
margin: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 70%, transparent 100%);
pointer-events: none;
}
body.home-page .navbar .navitems {
pointer-events: auto;
}
body.home-page .header-chip {
display: none !important;
}
/* Legacy homepage block below — kept for selectors not yet migrated to home.css.
Nav glass / CTA chrome live in home.css + glass.css. */
.whats-new-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: var(--main-text);
}
.whats-new-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.whats-new-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.whats-new-slide.active {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
.whats-new-slide img,
.whats-new-slide .whats-new-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.whats-new-slide::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 28%, transparent 42%, rgba(0, 0, 0, 0.72) 78%, rgba(0, 0, 0, 0.92) 100%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(2, 8, 6, 0.7) 0%, transparent 70%);
pointer-events: none;
}
.whats-new-content {
position: relative;
z-index: 2;
width: min(1100px, 100%);
margin: 0 auto;
padding: 0 var(--site-gutter) clamp(88px, 12vh, 140px);
display: flex;
flex-direction: column;
gap: 1rem;
}
.whats-new-brand {
font-family: var(--font-display);
font-size: clamp(3.2rem, 12vw, 7.5rem);
font-weight: 700;
line-height: 0.92;
letter-spacing: -0.04em;
margin: 0;
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}
.whats-new-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
}
.whats-new-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.4rem);
font-weight: 600;
margin: 0;
line-height: 1.15;
}
.whats-new-blurb {
max-width: 34rem;
margin: 0;
font-size: clamp(0.95rem, 2vw, 1.1rem);
color: rgba(232, 236, 234, 0.78);
}
.whats-new-cta {
/* Layout only — chrome comes from .contact-cta in glass.css / home.css */
width: fit-content;
margin-top: 0.35rem;
}
.whats-new-controls {
position: absolute;
z-index: 3;
left: var(--site-gutter);
right: var(--site-gutter);
bottom: clamp(24px, 4vh, 40px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
pointer-events: none;
}
.whats-new-controls > * {
pointer-events: auto;
}
.whats-new-nav-btn {
overflow: hidden;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: var(--glass-border);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
color: var(--main-text);
text-decoration: none;
cursor: pointer;
padding: 0;
--mouse-x: 50%;
--mouse-y: 50%;
}
.whats-new-nav-btn svg {
width: 18px;
height: 18px;
}
.whats-new-dots {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
flex: 1;
}
.whats-new-dots .dot {
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.45);
background: rgba(255, 255, 255, 0.18);
padding: 0;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.whats-new-dots .dot.active {
background: rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.85);
transform: scale(1.2);
}
.home-section {
width: min(var(--site-max-width), 100%);
margin: 0 auto;
padding: clamp(3.5rem, 8vh, 6rem) var(--site-gutter);
}
.home-section-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.75);
margin: 0 0 0.75rem;
}
.home-section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 650;
letter-spacing: -0.03em;
margin: 0 0 1.25rem;
line-height: 1.05;
}
.home-section-copy {
max-width: 40rem;
margin: 0 0 1.75rem;
font-size: 1.05rem;
color: rgba(232, 236, 234, 0.78);
}
.about-section {
display: grid;
gap: 2rem;
}
.about-carousel {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 16 / 9;
border: var(--glass-border);
box-shadow: var(--glass-shadow);
}
.about-carousel-track {
position: absolute;
inset: 0;
}
.about-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s ease;
}
.about-slide.active {
opacity: 1;
}
.about-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-carousel-btn {
position: absolute;
top: 50%;
/* Use translate (not transform) so glass-press tilt/press doesn't drop centering */
translate: 0 -50%;
z-index: 2;
overflow: hidden;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: var(--glass-border);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
color: var(--main-text);
cursor: pointer;
padding: 0;
--mouse-x: 50%;
--mouse-y: 50%;
}
.about-carousel-btn.prev { left: 12px; }
.about-carousel-btn.next { right: 12px; }
.about-carousel-btn svg {
width: 18px;
height: 18px;
}
.featured-split {
display: grid;
gap: 1.5rem;
align-items: center;
}
@media (min-width: 820px) {
.featured-split {
grid-template-columns: 1fr 1.1fr;
gap: 2.5rem;
}
.featured-split.is-flip .featured-media { order: 2; }
.featured-split.is-flip .featured-copy { order: 1; }
}
.featured-media {
border-radius: var(--radius-xl);
overflow: hidden;
border: var(--glass-border);
box-shadow: var(--glass-shadow);
aspect-ratio: 1;
max-width: 420px;
}
.featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.featured-media.is-wide {
aspect-ratio: 16 / 9;
max-width: none;
}
.featured-copy h3 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.featured-copy p {
margin: 0 0 1.25rem;
color: rgba(232, 236, 234, 0.78);
}
.featured-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.featured-cta {
display: inline-flex;
align-items: center;
padding: 0.8rem 1.2rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--main-text);
}
.featured-stream {
display: inline-flex;
gap: 0.65rem;
align-items: center;
}
.featured-stream a {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
}
.featured-stream img {
width: 28px;
height: 28px;
display: block;
}
.home-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.home-reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.home-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* Page load entrance — softer than hero copy (large blocks); nav / bottom-nav excluded */
@keyframes page-content-in {
0% {
opacity: 0;
transform: translate3d(0, 12px, 0);
}
/* Opacity settles early so glass/backdrop children aren't stuck mid-fade */
40% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
body > main,
body > .mobilepage,
body > .musicpage,
body > footer {
will-change: opacity, transform;
animation: page-content-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body > footer {
animation-delay: 0.1s;
}
@media (prefers-reduced-motion: reduce) {
body > main,
body > .mobilepage,
body > .musicpage,
body > footer {
will-change: auto;
animation: none;
}
}
/* ========== Film detail template ========== */
.filmpage {
width: min(var(--content-max-width), 100%);
margin: 0 auto;
padding: calc(var(--nav-float-offset) + 1.5rem) var(--site-gutter) 3rem;
}
.filmpage .film-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-xl);
overflow: hidden;
border: var(--glass-border);
box-shadow: var(--glass-shadow);
margin: 1.25rem 0 1.75rem;
background: #000;
}
.filmpage .film-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.filmpage .film-meta {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(232, 236, 234, 0.55);
margin: 0 0 0.75rem;
}
.filmpage .film-blurb {
font-size: 1.05rem;
color: rgba(232, 236, 234, 0.8);
max-width: 38rem;
}
.filmheader {
position: relative;
min-height: clamp(220px, 36vw, 360px);
margin: var(--site-gutter);
margin-bottom: 0;
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
align-items: flex-end;
border: var(--glass-border);
box-shadow: var(--glass-shadow);
background:
linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.78) 100%),
var(--filmheader-cover) center / cover no-repeat;
}
.filmheader h1 {
position: relative;
z-index: 2;
margin: 0;
padding: 1.5rem 1.75rem;
font-family: var(--font-display);
font-size: clamp(1.8rem, 5vw, 3rem);
letter-spacing: -0.03em;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
@media only screen and (max-width: 1030px) {
body.home-page .navbar {
display: none;
}
.whats-new-content {
padding-bottom: calc(var(--bottom-nav-offset) + 48px);
}
.whats-new-controls {
bottom: calc(var(--bottom-nav-offset) + 8px);
}
}