/* ========== Theme / Base ========== */ :root { --bg: #0e0e12; --bg-2: #151521; --text: #e9e9ef; --muted: #b9b9cc; --accent: #ffd166; --accent-2: #a0e7e5; } /* Light theme (opt-in via ) */ html.light, body.light { /* Surface & text (warm cream) */ --bg: #f8f3ea; /* cream base */ --bg-2: #efe8dc; /* subtle contrast */ --text: #0e0e12; --muted: #5e5e70; /* Keep brand accents consistent */ --accent: #ffd166; --accent-2: #a0e7e5; /* Decorative rail tweaks for light backgrounds */ --rail-divider: rgba(0,0,0,0.08); --rail-fade-color: rgba(255,255,255,0.6); } /* Header adjustments for light theme */ body.light .site-header { background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); border-bottom: 1px solid rgba(0,0,0,0.08); } /* Light theme: Extras dropdown */ body.light nav .dropdown-content { background: rgba(255,255,255,0.98); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 12px 30px rgba(0,0,0,0.15); } body.light nav .dropdown-content a:hover { background: rgba(0,0,0,0.06); color: #111; } /* Light theme: Footer */ body.light footer { background: rgba(255,255,255,0.6); border-top: 1px solid rgba(0,0,0,0.08); } /* UI fonts (assets/ui/fonts) */ @font-face { font-family: 'Ari'; src: url('assets/ui/fonts/Ari-W9500.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ari'; src: url('assets/ui/fonts/Ari-W9500Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Ari Condensed'; src: url('assets/ui/fonts/Ari-W9500Condensed.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ari Condensed'; src: url('assets/ui/fonts/Ari-W9500CondensedBold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Ari Display'; src: url('assets/ui/fonts/Ari-W9500Display.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Ari Display Condensed'; src: url('assets/ui/fonts/Ari-W9500CondensedDisplay.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Local Gill Sans Condensed (WOFF2) */ @font-face { font-family: 'Gill Sans Condensed Local'; src: url('assets/ui/fonts/GillSans Condensed.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gill Sans Condensed Local'; src: url('assets/ui/fonts/GillSans Condensed.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; min-height: 100%; overflow-x: hidden; } /* ========== Global Side Background (applies to all pages) ========== */ /* Two animated decorative rails pinned to the left and right edges. */ /* Disable by adding class `no-bg` on (not needed for admin which uses its own CSS). */ :root { --rail-w: clamp(120px, 16vw, 220px); --rail-divider: rgba(255,255,255,0.12); --rail-fade-w: 24px; --rail-fade-color: rgba(0,0,0,0.55); } body::before, body::after { content: ""; position: fixed; top: 0; height: 100vh; width: var(--rail-w); z-index: 1; /* above #global-flash (z-index:0), below content (>=2) */ pointer-events: none; /* Layer order (top → bottom): 1) 1px divider line at inner edge 2) 24px soft fade into rail (gives depth vs global layer) 3) circles A, 4) circles B, 5) plus sparkles */ background-repeat: no-repeat, no-repeat, repeat, repeat, repeat; background-size: 1px 100%, /* divider line */ var(--rail-fade-w) 100%, /* soft fade */ 140px 140px, /* circles A */ 140px 140px, /* circles B */ 160px 160px; /* pluses */ opacity: 0.9; } /* Left rail */ body::before { left: 0; background-image: linear-gradient(to left, var(--rail-divider), var(--rail-divider)), /* divider */ linear-gradient(to left, var(--rail-fade-color), rgba(0,0,0,0)), /* fade */ radial-gradient(circle at 25% 25%, transparent 18px, rgba(255,255,255,0.10) 19px, rgba(255,255,255,0.10) 21px, transparent 22px), radial-gradient(circle at 75% 75%, transparent 18px, rgba(255,255,255,0.10) 19px, rgba(255,255,255,0.10) 21px, transparent 22px), url("data:image/svg+xml;utf8,"); background-position: right top, /* divider line pinned to inner edge */ right top, /* soft fade from inner edge */ 0 0, 0 0, 0 0; animation: rail-left-move 36s linear infinite; } /* Right rail */ body::after { right: 0; background-image: linear-gradient(to right, var(--rail-divider), var(--rail-divider)), /* divider */ linear-gradient(to right, var(--rail-fade-color), rgba(0,0,0,0)), /* fade */ radial-gradient(circle at 25% 25%, transparent 18px, rgba(255,255,255,0.10) 19px, rgba(255,255,255,0.10) 21px, transparent 22px), radial-gradient(circle at 75% 75%, transparent 18px, rgba(255,255,255,0.10) 19px, rgba(255,255,255,0.10) 21px, transparent 22px), url("data:image/svg+xml;utf8,"); background-position: left top, /* divider line pinned to inner edge */ left top, /* soft fade from inner edge */ 0 0, 0 0, 0 0; animation: rail-right-move 28s linear infinite; } /* Animate each layer by shifting background-position at different deltas to mimic the separate speeds from index.html */ @keyframes rail-left-move { from { background-position: right top, right top, 0 0, 0 0, 0 0; } to { background-position: right top, right top, 140px 140px, -140px 140px, -160px 160px; } } @keyframes rail-right-move { from { background-position: left top, left top, 0 0, 0 0, 0 0; } to { background-position: left top, left top, -140px 140px, 140px 140px, 160px 160px; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* Opt-out class (not applied anywhere except if you want to disable) */ body.no-bg::before, body.no-bg::after { display: none; } /* Mobile: disable animated side rails to reduce distraction */ @media (max-width: 900px) { body::before, body::after { display: none !important; } } .container { width: min(1100px, 92vw); margin: 0 auto; padding: 32px 0 56px; } /* ========== Header & Nav ========== */ .site-header { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(130%) blur(6px); background: linear-gradient(to bottom, rgba(20,20,28,0.85), rgba(20,20,28,0.35)); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; } .site-header h1 { margin: 0; font-size: 22px; letter-spacing: 0.4px; color: var(--accent); } /* Site brand font: use local Gill Sans Condensed WOFF2, then fall back */ .site-header h1.brand, .brand { font-family: "Gill Sans Condensed Local", "Gill Sans Condensed", "Gill Sans MT Condensed", "Gill Sans MT", "Gill Sans", "Gill Sans Nova", "Gill Sans Std", "Ari Display Condensed", "Ari Condensed", Arial, sans-serif; font-stretch: condensed; font-weight: 700; } nav a { display: inline-block; margin-left: 14px; color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 10px; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; } nav a:hover { color: #111; background: var(--accent); transform: translateY(-1px); } /* Center nav links horizontally across header */ .site-header { position: sticky; } .site-header nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; } nav > a:first-child { margin-left: 0; } nav > .dropdown:first-child { margin-left: 0; } /* Simple dropdown in header nav */ nav .dropdown { display: inline-block; position: relative; margin-left: 14px; } /* ===== Responsive header: prevent overlap on mobile ===== */ @media (max-width: 720px) { .site-header { display: block; /* stack elements */ padding: 10px 12px; } .site-header h1 { /* center brand, slightly smaller */ text-align: center; font-size: 20px; } .site-header nav { position: static; /* stop overlapping brand */ transform: none; left: auto; top: auto; display: flex; flex-wrap: wrap; /* allow wrapping to new line */ justify-content: center; /* center buttons under brand */ align-items: center; gap: 6px 8px; /* compact spacing */ margin-top: 8px; } nav > a, nav > .dropdown { margin-left: 0; } /* gap handles spacing */ nav a { padding: 6px 8px; } /* smaller touch target but still usable */ } nav .dropbtn { display: inline-block; background: transparent; border: 0; font: inherit; color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 10px; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; cursor: pointer; } nav .dropdown:hover .dropbtn, nav .dropdown:focus-within .dropbtn { color:#111; background: var(--accent); transform: none; } nav .dropdown-content { position: absolute; top: calc(100% - 8px); /* stronger overlap to avoid hover gap */ right: 0; /* prevent clipping on the right edge */ left: auto; min-width: 200px; max-width: min(320px, 90vw); background: rgba(10,10,16,0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); padding: 6px; display: none; z-index: 1000; } nav .dropdown:hover .dropdown-content, nav .dropdown:focus-within .dropdown-content, nav .dropdown-content:hover { display: block; } nav .dropdown-content a { display:block; margin:0; padding:8px 10px; border-radius: 8px; transform: none; transition: background-color 0.18s ease, color 0.18s ease; } nav .dropdown-content a:hover { background: rgba(255,255,255,0.08); color: var(--text); transform: none; } nav .dropdown-content { pointer-events: auto; } /* Add a caret via CSS to avoid charset issues */ nav .dropbtn::after { content: ' ▾'; } /* ========== Hero / Banner ========== */ .hero { position: relative; height: clamp(320px, 60vh, 520px); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.05) brightness(0.9); transform: scale(1.04); } .hero-overlay { position: relative; z-index: 1; text-align: center; padding: 18px 22px; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } /* === Horizontal 3-up vertical video hero === */ .video-hero{ position: relative; height: clamp(160px, 34vh, 300px); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); } .video-hero .video-grid{ position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); will-change: transform; } .video-hero .video-grid .cell{ position: relative; overflow: hidden; } .video-hero video{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); /* vertically center */ width: 100%; height: auto; /* use full width of the column */ min-width: 100%; min-height: 0; object-fit: contain; /* avoid cropping; letterbox vertically if needed */ filter: blur(6px) saturate(1.05) brightness(0.9); display: block; margin: 0 auto; } /* Page variant: force white text inside hero */ .hero.hero-white .hero-overlay h2, .hero.hero-white .hero-overlay .tagline { color: #fff; } .hero-overlay h2 { margin: 0 0 6px 0; font-weight: 700; font-size: clamp(22px, 3vw, 34px); } .tagline { margin: 0 0 14px 0; color: var(--muted); } .cta-row { display: inline-flex; gap: 10px; } .btn { display: inline-block; background: var(--accent); color: #101015; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 700; box-shadow: 0 6px 22px rgba(255, 209, 102, 0.25); transition: transform 0.18s ease, filter 0.18s ease; } .btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18); box-shadow: none; } .btn-ghost:hover { background: rgba(255,255,255,0.08); } /* Headings use the brand condensed font */ h1, h2, h3 { font-family: "Gill Sans Condensed Local", "Gill Sans Condensed", "Gill Sans MT Condensed", "Gill Sans MT", "Gill Sans", "Gill Sans Nova", "Gill Sans Std", "Ari Display Condensed", "Ari Condensed", Arial, sans-serif; font-stretch: condensed; font-weight: 700; } /* Slightly larger heading sizes in content */ .container h1 { font-size: clamp(28px, 4.8vw, 38px); } .container h2 { font-size: clamp(24px, 3.8vw, 32px); } .container h3 { font-size: clamp(20px, 3.0vw, 26px); } /* Make body paragraph text a touch grayer for softer contrast */ .container p { color: var(--text); /* fallback */ color: color-mix(in srgb, var(--text), var(--muted) 22%); } /* Body links use brand accent color (exclude buttons) */ main a:not(.btn), .container a:not(.btn) { color: var(--accent); } /* ========== Content ========== */ .intro h3 { margin-top: 0; } /* (Legacy index background classes kept removed; superseded by body::before/::after) */ /* ========== Footer ========== */ footer { background: rgba(0,0,0,0.25); border-top: 1px solid rgba(255,255,255,0.06); text-align: center; padding: 16px; font-size: 0.95rem; } /* Footer social links */ footer .social-links { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 2px 0 10px 0; } footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--accent); text-decoration: none; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; opacity: 0.9; } footer .social-links a:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); opacity: 1; box-shadow: 0 6px 18px rgba(0,0,0,0.25); } footer .social-links img { display: block; width: 22px; height: 22px; } /* Dark mode: tint monochrome SVG imgs to brand accent */ body:not(.light) footer .social-links img { /* Approximate #ffd166 via CSS filter */ filter: invert(84%) sepia(37%) saturate(769%) hue-rotate(340deg) brightness(104%) contrast(102%); } /* Optional: soften on hover */ body:not(.light) footer .social-links a:hover img { filter: invert(88%) sepia(45%) saturate(900%) hue-rotate(340deg) brightness(108%) contrast(104%); } /* (removed Ko-fi exception; using default tint rules) */ /* ========================================================= = MUSIC PAGE: GRID & CARDS = ========================================================= */ .muted { color: var(--muted); } .releases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; align-items: start; } .release { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0; overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; will-change: transform, box-shadow; } .release:hover { transform: translateY(-3px) scale(1.02); border-color: rgba(255,255,255,0.14); box-shadow: 0 14px 36px rgba(0,0,0,0.35); } .release.hovering .cover-wrap { animation: hover-bob 1.8s ease-in-out infinite; } @keyframes hover-bob { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } } .cover-wrap { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); overflow: hidden; border-radius: 0; } .cover { position: absolute; inset: 0; background-size: cover; background-position: center; /* unified, animatable filter list; default strength = 0 (no recolor) */ --base-sat: 1.05; --base-ctr: 1.02; filter: grayscale(var(--rec-strength, 0)) sepia(var(--rec-strength, 0)) hue-rotate(var(--recolor-angle, 0deg)) saturate(calc(var(--base-sat) + var(--rec-strength, 0) * 1.4)) brightness(calc(1 - var(--rec-strength, 0) * 0.06)) contrast(calc(var(--base-ctr) - var(--rec-strength, 0) * 0.02)); transition: filter var(--recolor-ms, 200ms) ease, transform 220ms ease; border-radius: 0; } .release:hover .cover { transform: scale(1.06); } .shine { position: absolute; inset: -20%; background: radial-gradient(160px 160px at 20% 10%, rgba(255,255,255,0.08), transparent 60%), linear-gradient(120deg, rgba(255,255,255,0.06), transparent 40%, transparent 60%, rgba(255,255,255,0.06)); mix-blend-mode: screen; pointer-events: none; } .release .meta { display: none; padding: 10px 12px 6px 12px; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; } .release.hovering .meta, .release.open .meta { display: grid; } .title { margin: 0; font-size: 16px; line-height: 1.2; } .year { margin: 0; color: var(--muted); font-size: 12px; } .toggle-tracks { margin: 0 12px 12px 12px; background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: background-color 160ms ease, transform 120ms ease; } @media (hover: hover) { .toggle-tracks { display: none; } } @media (hover: none) { /* Hide tracklist button on mobile; cover tap handles it */ .toggle-tracks { display: none; } } .toggle-tracks:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); } .tracklist { padding: 6px 10px 12px 10px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); } .tracklist ul { list-style: none; margin: 8px 0 10px 0; padding: 0; display: grid; gap: 6px; } .track { width: 100%; display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--text); text-align: left; padding: 8px 8px; border-radius: 10px; cursor: pointer; transition: background-color 120ms ease, transform 120ms ease; } .track:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); } .track .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(255,209,102,0.55); } .track .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .album-links { display: flex; justify-content: flex-end; } .album-links a { color: var(--accent-2); text-decoration: none; font-size: 12px; } .album-links a:hover { text-decoration: underline; } @media (max-width: 520px) { .title { font-size: 15px; } .releases-grid { gap: 14px; } } /* ====== Halftone pulse overlay (BPM-timed) ====== */ .pulse { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--pulse-color, rgb(255 209 102)) 1.1px, transparent 1.2px); background-size: 6px 6px; mix-blend-mode: screen; filter: brightness(1.15) saturate(1.15); opacity: 0; transition: opacity 180ms ease; } .release.pulsing .pulse { animation: pulseFlash var(--pulse-period, 0.5s) infinite ease-in-out; opacity: .45; } @keyframes pulseFlash { 0%, 100% { opacity: .18; } 50% { opacity: .68; } } /* === Global flash container (always behind content) === */ #global-flash { position: fixed; inset: 0; z-index: 0; /* behind your UI */ pointer-events: none; } /* Big soft glow from bottom */ #global-flash .glow { position: absolute; inset: -12vmin; opacity: 0; background: radial-gradient(circle at 50% 100%, var(--pulse-color-global, #ffd166) 0%, transparent 60%); filter: blur(40px) saturate(1.1); will-change: opacity, transform; } /* Random dots on a canvas; opacity animated with glow */ #global-flash .dots { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; } /* Simple flash curve */ @keyframes bg-pulse { 0% { opacity: 0; transform: scale(.98); } 10% { opacity: .2; transform: scale(1.00); } 55% { opacity: 0; transform: scale(1.00); } 100% { opacity: 0; transform: scale(1.00); } } #global-flash.on .glow, #global-flash.on .dots { animation: bg-pulse var(--pulse-period-global, .6s) ease-in-out infinite; } /* Keep your site above the flash */ /* Keep content above global flashes, but let header sit on top of content */ .container, footer { position: relative; z-index: 2; } /* Ensure header and its dropdown always sit above page content/windows */ .site-header { z-index: 2000; } /* Tracklist clearly above flashes */ .tracklist { position: relative; z-index: 3; background: rgba(10,10,14,0.90); } /* === NOW PLAYING (bottom-left, bigger, with black translucent bg) === */ #now-playing-text{ position: fixed; left: 14px; bottom: 12px; z-index: 4; font: 800 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color: color-mix(in srgb, var(--np-color, #ffd166), white 10%); text-shadow: 0 1px 3px rgba(0,0,0,.55); /* background + shape */ background: rgba(0,0,0,.65); /* <- translucent black */ border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px 10px; /* optional glassy vibe (safe to keep or remove) */ backdrop-filter: saturate(130%) blur(6px); opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease; pointer-events: none; } #now-playing-text.show{ opacity: 1; transform: translateY(0); } /* ===== Global Recolor-on-Hover for release covers ===== */ :root { --recolor-angle: 0deg; --rec-strength: 0; /* 0..1 strength for smooth fades */ --recolor-ms: 300ms; /* transition duration; set via JS to match audio */ } /* Set strength to 1 while recolor mode is active */ body.recolor-active { --rec-strength: 1; } /* When active, recolor all covers except the hovered card */ body.recolor-active .release .cover { /* Luminance-preserving recolor with tunable strength */ /* Full strength approximates hue replacement; brightness slightly reduced to avoid over-illumination */ filter: grayscale(var(--rec-strength)) sepia(var(--rec-strength)) hue-rotate(var(--recolor-angle)) saturate(calc(1 + var(--rec-strength) * 1.4)) brightness(calc(1 - var(--rec-strength) * 0.06)) contrast(calc(1 - var(--rec-strength) * 0.02)); transition: filter var(--recolor-ms) ease; } /* Keep same filter list on hover to allow smooth hue transitions; just zero strength */ body.recolor-active .release:hover { --recolor-angle: 0deg; --rec-strength: 0; } /* =============================== A R T ==========================================================*/ /* ===== Page-scoped styles ===== */ /* Centered collage with comfy side gaps (wins over older full-bleed rules) */ .bleed{ width: min(1400px, 94vw); /* ← tweak 88vw to change side gaps: smaller = larger margins, e.g. 84vw */ margin-inline: auto; padding-inline: 14px; /* inner breathing room near edges */ } /* Masonry columns */ .art-collage{ column-width: 260px; column-gap: 14px; padding: 0; } @media (max-width: 640px){ .art-collage{ column-width: 200px; column-gap: 10px; } } /* Items */ .art-item{ break-inside: avoid; margin: 0 0 14px 0; display: block; position: relative; /* for glow layer */ --glow: rgba(255,209,102,.85); --gox: 50%; --goy: 85%; transition: box-shadow .22s ease; } /* Glow behind image */ .art-item::before{ content:""; position:absolute; inset:-3vmin; z-index:0; /* behind the img */ /* Fallback radial + nicer mid ring when supported */ background: radial-gradient(120% 120% at var(--gox) var(--goy), var(--glow) 0%, rgba(0,0,0,0) 65%), radial-gradient(120% 120% at var(--gox) var(--goy), color-mix(in srgb, var(--glow), transparent 50%) 0%, transparent 35%); filter: blur(28px) saturate(1.1); opacity: 0; transform: scale(.98); transition: opacity .22s ease, transform .22s ease; pointer-events: none; } /* Make the glow visible on :hover AND keyboard focus AND JS “focused” class */ .art-item:hover::before, .art-item:focus-within::before, .art-item.focused::before{ opacity: .95; transform: scale(1); } /* A little color-tinted lift too */ .art-item:hover, .art-item.focused{ box-shadow: 0 22px 52px color-mix(in srgb, var(--glow), transparent 65%), 0 0 42px color-mix(in srgb, var(--glow), transparent 40%); } /* Images */ .art-item img{ width: 100%; height: auto; display: block; border-radius: 0; background: transparent; cursor: zoom-in; position: relative; z-index: 1; /* above the glow */ } /* Tiny pop when a note plays */ .art-item.playing img{ animation:hover-pop 220ms ease; } @keyframes hover-pop{ 0%{transform:scale(1)} 40%{transform:scale(1.035)} 100%{transform:scale(1)} } /* Lightbox */ #lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.88); backdrop-filter:blur(2px); z-index:9999; } #lightbox.show{ display:flex; } #lightbox img{ max-width:96vw; max-height:92vh; box-shadow:0 20px 60px rgba(0,0,0,.6); cursor:zoom-out; } #lightbox .hint{ position:fixed; bottom:10px; left:50%; transform:translateX(-50%); font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:rgba(255,255,255,.7); user-select:none; pointer-events:none; } /* --- Music controls --- */ #music-controls { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 6px 10px; z-index: 9999; backdrop-filter: blur(6px); } #mute-btn { font-size: 20px; background: none; border: none; color: #fff; cursor: pointer; } #volume-slider { width: 0; opacity: 0; transition: width 0.25s ease, opacity 0.25s ease; } #music-controls:hover #volume-slider { width: 100px; opacity: 1; } /* ========================================================= = LUNA WINDOW (UI TEST) = ========================================================= */ /* Notes: - Expects optional image assets at assets/ui/luna/ window-frame-active.png, window-frame-inactive.png, titlebar-active.png, titlebar-inactive.png - Provides a CSS-only .fallback style until assets exist. */ /* Tunable variables so slice geometry matches your PNG - --luna-slice: how far in from each edge the 9-slice cut is (px in source image) - --luna-width: visual border thickness on the page (can differ from slice) */ .luna-window { /* 8px 9-slice with 8px visible border (tweak as you like) */ --luna-slice: 8; /* pixels in source image (unitless OK) */ --luna-width: 8px; /* visible border thickness on page */ --luna-radius: 12px;/* top corner radius to match caps */ --titlebar-h: 40px; /* keep in sync with .luna-titlebar height */ position: relative; border: none; /* frame is drawn on inner wrapper so it can start below titlebar */ isolation: isolate; /* keep pseudo-element glow underneath contained */ /* Clip side borders under the rounded titlebar corners */ border-top-left-radius: var(--luna-radius); border-top-right-radius: var(--luna-radius); overflow: hidden; background-color: color-mix(in srgb, var(--bg-2), white 3%); /* subtle body tint */ background-clip: padding-box; /* keep background out of the border area */ box-shadow: 0 14px 36px rgba(0,0,0,0.35); } /* Frame element: real child so Chrome reliably paints border-image */ .luna-frame { position: absolute; left: 0; right: 0; bottom: 0; top: var(--titlebar-h); pointer-events: none; border-style: solid; border-color: transparent; border-width: 0 var(--luna-width) var(--luna-width) var(--luna-width); border-image-source: url('assets/ui/luna/window-frame-active.png'); border-image-slice: var(--luna-slice) fill; border-image-width: 0 var(--luna-width) var(--luna-width) var(--luna-width); border-image-repeat: stretch; z-index: 1; } /* Use pseudo-element only when no .luna-frame child exists (Chrome-safe with :has) */ .luna-window::after { content: none; } .luna-window:not(:has(.luna-frame))::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: var(--titlebar-h); pointer-events: none; border-style: solid; border-color: transparent; border-width: 0 var(--luna-width) var(--luna-width) var(--luna-width); border-image-source: url('assets/ui/luna/window-frame-active.png'); border-image-slice: var(--luna-slice) fill; border-image-width: 0 var(--luna-width) var(--luna-width) var(--luna-width); border-image-repeat: stretch; z-index: 1; } /* Subtle exterior hover glow using layered shadows (outside even with overflow hidden) */ .luna-window:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.35), 0 0 0 2px rgba(255, 200, 80, 0.12), 0 0 14px 6px rgba(255, 210, 100, 0.16), 0 0 28px 12px rgba(255, 240, 160, 0.10); } .luna-window.glow-off:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.35); } /* Optional modifier to enable center fill from the PNG if ever desired */ .luna-window.with-fill { border-image-slice: var(--luna-slice) fill; } .luna-window.is-inactive { /* unused */ } .luna-window.is-inactive::after { /* unused */ } .luna-window.is-inactive .luna-titlebar { /* inactive variant removed */ } .luna-window.is-inactive .luna-titlebar::before { /* inactive variant removed */ } .luna-window.is-inactive .luna-titlebar::after { /* inactive variant removed */ } .luna-titlebar { position: relative; /* for caps */ height: 40px; display: flex; align-items: center; gap: 10px; /* Non-stretch caps + adjustable inner padding */ --cap-w: 24px; /* width of left/right cap art */ --inner-pad: 0px;/* breathing room inside caps */ padding-left: calc(var(--cap-w) + var(--inner-pad)); padding-right: calc(var(--cap-w) + var(--inner-pad)); /* Center strip tiles across the middle; gradient fallback underneath */ background-image: url('assets/ui/luna/titlebar-center.png'), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)); background-repeat: repeat-x, no-repeat; background-size: auto 100%, 100% 100%; background-position: 0 0, 0 0; /* Keep the center strip out from under the caps by clipping to content box */ background-origin: content-box, border-box; background-clip: content-box, border-box; image-rendering: pixelated; /* inherit rounded top corners so the caps align with clipped border */ border-top-left-radius: inherit; border-top-right-radius: inherit; color: #fff; font-weight: 700; font-family: 'Ari Display', 'Ari Condensed', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing: 0.2px; user-select: none; } /* Window title text: subtle pixel-style shadow for readability */ .luna-titlebar .luna-title { /* Softer, lower shadow for readability */ text-shadow: 0 3px 6px rgba(0,0,0,0.55); } /* Wave animation for title text */ .luna-titlebar .luna-title.wave { --wave-amp: 2px; --wave-period: 2.2s; } .luna-titlebar .luna-title.wave .char { display: inline-block; transform: translateY(0); animation: luna-wave var(--wave-period) ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); will-change: transform; } @keyframes luna-wave { 0% { transform: translateY(0); } 25% { transform: translateY(calc(var(--wave-amp) * -1)); } 50% { transform: translateY(0); } 75% { transform: translateY(var(--wave-amp)); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .luna-titlebar .luna-title.wave .char { animation: none; } } /* Left/Right cap images — fixed size, not stretched */ /* Free both pseudos for overlay use (caps are rendered via titlebar backgrounds) */ .luna-titlebar::before, .luna-titlebar::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--cap-w); pointer-events: none; image-rendering: pixelated; } .luna-titlebar::before { left: 0; background: url('assets/ui/luna/titlebar-left.png') left top / 100% 100% no-repeat; } .luna-titlebar::after { right: 0; background: url('assets/ui/luna/titlebar-right.png') right top / 100% 100% no-repeat; } /* removing non-stretch caps for now (first-iteration behavior) */ /* Inactive titlebar rules removed (unused) */ .luna-body { padding: 14px; font-family: 'Ari', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Post toolbar (optional): appears directly under titlebar inside post windows */ .luna-window.post .luna-toolbar { display: flex; align-items: stretch; /* children fill full height */ gap: 0; /* no spacing between chips */ height: 36px; /* fixed toolbar height */ padding: 0; /* chips should touch the edges */ background: color-mix(in srgb, var(--bg-2), white 7%); border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.28); color: var(--text); } /* Toolbar chips (date and icons) */ .luna-window.post .tool-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 100%; /* span full toolbar */ border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); border-radius: 0; /* square tabs */ margin: 0; /* remove spacing */ } .luna-window.post .tool-chip + .tool-chip { margin-left: -1px; } /* collapse adjoining borders */ .luna-window.post .tool-date { font-family: 'Ari', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; opacity: 0.78; /* a bit less opaque */ } .luna-window.post .tool-icons, .luna-window.post .tool-tag { display: inline-flex; } .luna-window.post .tool-icons img, .luna-window.post .tool-tag img { width: 16px; height: 16px; image-rendering: pixelated; display: block; } .luna-window.post .tool-tag .tag-text { font-family: 'Ari', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; } .luna-window.post .luna-toolbar .spacer { flex: 1; } /* Images inside windows */ .luna-body img.luna-img { display:block; max-width:100%; height:auto; border-radius:8px; } .luna-body img.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; } /* ===== Commissions page layout helpers ===== */ body.comm-page .luna-window { width: 100%; max-width: 780px; /* consistent, centered windows */ margin: 20px auto; } /* Commissions: windows with no fill (transparent body area) */ body.comm-page .luna-window { background-color: transparent; } /* Remove center fill from border-image for both real frame and fallback pseudo */ body.comm-page .luna-frame { border-image-slice: var(--luna-slice); } body.comm-page .luna-window:not(:has(.luna-frame))::after { border-image-slice: var(--luna-slice); } body.comm-page .luna-window.narrow { max-width: 620px; } body.comm-page .luna-window.compact { max-width: 520px; } body.comm-page .luna-window.wide { max-width: 980px; } /* Commissions page: center key headings */ body.comm-page .intro h3 { text-align: center; } /* Keep window titles left-aligned (do not center) */ body.comm-page .luna-window .luna-title { display: inline; margin: 0; text-align: left; } /* Commissions page: big status banner */ .comm-status{ font-family: 'Ari Display', 'Ari', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; font-size: clamp(42px, 8vw, 84px); line-height: 1.05; text-align: center; margin: 10px 0 18px; letter-spacing: 0.5px; text-shadow: 0 6px 24px rgba(0,0,0,0.35); } .comm-status.open{ color: #5cffb0; } .comm-status.closed{ color: #ff6b6b; } /* Simple 3-up gallery for examples */ .luna-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .luna-gallery img { display:block; width:100%; height:auto; border-radius:8px; } @media (max-width: 800px){ .luna-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px){ .luna-gallery { grid-template-columns: 1fr; } } /* Titlebar tint variants (overlay gradient hue) */ /* Strong, full override of titlebar background layers (no base gradient bleed) */ .luna-window.tint-gold .luna-titlebar, .luna-window.tint-blue .luna-titlebar, .luna-window.tint-pink .luna-titlebar, .luna-window.tint-green .luna-titlebar { /* Reset any previous background-layer settings in one go */ background: none; } .luna-window.tint-gold .luna-titlebar { /* Strong recolor: overlay tint on top of strip */ background-image: linear-gradient(180deg, rgba(255,209,102,1), rgba(255,209,102,1)), url('assets/ui/luna/titlebar-center.png'); background-repeat: no-repeat, repeat-x; background-size: 100% 100%, auto 100%; background-position: 0 0, 0 0; background-origin: content-box, content-box; background-clip: content-box, content-box; background-blend-mode: hue, normal; } .luna-window.tint-blue .luna-titlebar { background-image: linear-gradient(180deg, rgba(110,170,255,1), rgba(110,170,255,1)), url('assets/ui/luna/titlebar-center.png'); background-repeat: no-repeat, repeat-x; background-size: 100% 100%, auto 100%; background-position: 0 0, 0 0; background-origin: content-box, content-box; background-clip: content-box, content-box; background-blend-mode: hue, normal; } .luna-window.tint-pink .luna-titlebar { background-image: linear-gradient(180deg, rgba(255,140,200,1), rgba(255,140,200,1)), url('assets/ui/luna/titlebar-center.png'); background-repeat: no-repeat, repeat-x; background-size: 100% 100%, auto 100%; background-position: 0 0, 0 0; background-origin: content-box, content-box; background-clip: content-box, content-box; background-blend-mode: hue, normal; } .luna-window.tint-green .luna-titlebar { background-image: linear-gradient(180deg, rgba(140,230,190,1), rgba(140,230,190,1)), url('assets/ui/luna/titlebar-center.png'); background-repeat: no-repeat, repeat-x; background-size: 100% 100%, auto 100%; background-position: 0 0, 0 0; background-origin: content-box, content-box; background-clip: content-box, content-box; background-blend-mode: hue, normal; } /* Ensure the center strip uses the same base texture as default, then recolor via filter for a perfect match */ /* Frame tint only; caps are handled by per-variant overlay below */ .luna-window.tint-gold .luna-frame, .luna-window.tint-gold:not(:has(.luna-frame))::after { filter: hue-rotate(0deg) saturate(1.1) brightness(1.03); } .luna-window.tint-blue .luna-frame, .luna-window.tint-blue:not(:has(.luna-frame))::after { filter: hue-rotate(190deg) saturate(1.1) brightness(1.02); } .luna-window.tint-pink .luna-frame, .luna-window.tint-pink:not(:has(.luna-frame))::after { filter: hue-rotate(320deg) saturate(1.15) brightness(1.02); } .luna-window.tint-green .luna-frame, .luna-window.tint-green:not(:has(.luna-frame))::after { filter: hue-rotate(140deg) saturate(1.1) brightness(1.02); } /* Variant tint on caps via overlay blend (preserves button colors) */ .luna-window.tint-gold .luna-titlebar::before { background: url('assets/ui/luna/titlebar-left.png') left top / 100% 100% no-repeat, linear-gradient(180deg, rgba(255,209,102,1), rgba(255,209,102,1)); background-blend-mode: normal, hue; } .luna-window.tint-gold .luna-titlebar::after { background: url('assets/ui/luna/titlebar-right.png') right top / 100% 100% no-repeat, linear-gradient(180deg, rgba(255,209,102,1), rgba(255,209,102,1)); background-blend-mode: normal, hue; } .luna-window.tint-blue .luna-titlebar::before { background: url('assets/ui/luna/titlebar-left.png') left top / 100% 100% no-repeat, linear-gradient(180deg, rgba(110,170,255,1), rgba(110,170,255,1)); background-blend-mode: normal, hue; } .luna-window.tint-blue .luna-titlebar::after { background: url('assets/ui/luna/titlebar-right.png') right top / 100% 100% no-repeat, linear-gradient(180deg, rgba(110,170,255,1), rgba(110,170,255,1)); background-blend-mode: normal, hue; } .luna-window.tint-pink .luna-titlebar::before { background: url('assets/ui/luna/titlebar-left.png') left top / 100% 100% no-repeat, linear-gradient(180deg, rgba(255,140,200,1), rgba(255,140,200,1)); background-blend-mode: normal, hue; } .luna-window.tint-pink .luna-titlebar::after { background: url('assets/ui/luna/titlebar-right.png') right top / 100% 100% no-repeat, linear-gradient(180deg, rgba(255,140,200,1), rgba(255,140,200,1)); background-blend-mode: normal, hue; } .luna-window.tint-green .luna-titlebar::before { background: url('assets/ui/luna/titlebar-left.png') left top / 100% 100% no-repeat, linear-gradient(180deg, rgba(140,230,190,1), rgba(140,230,190,1)); background-blend-mode: normal, hue; } .luna-window.tint-green .luna-titlebar::after { background: url('assets/ui/luna/titlebar-right.png') right top / 100% 100% no-repeat, linear-gradient(180deg, rgba(140,230,190,1), rgba(140,230,190,1)); background-blend-mode: normal, hue; } /* Tint titlebar buttons (min/max/close) within each variant */ /* Buttons remain original colors */ /* Close button stays original */ .luna-window .luna-btn.close { filter: none !important; } /* CSS-only fallback look while assets are not present */ .luna-window.fallback { border: none; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.14)) padding-box, radial-gradient(140% 100% at 50% -20%, rgba(255,255,255,0.12), rgba(0,0,0,0)) border-box; box-shadow: 0 14px 36px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.06); } .luna-window.fallback::after { content: none; } .luna-window.fallback .luna-titlebar { background: linear-gradient(180deg, rgba(80,120,220,0.65), rgba(60,90,180,0.65)); border-top-left-radius: 18px; border-top-right-radius: 18px; } /* Debug: force a visible 9-slice border with inline SVG if your PNGs aren't ready */ .luna-window.debug .luna-frame { --luna-slice: 8; --luna-width: 8px; border-image-source: url("data:image/svg+xml;utf8,"); } /* ======= Titlebar controls (min, max, close) ======= */ .luna-controls { position: absolute; top: 0; right: calc(var(--cap-w) + var(--inner-pad)); height: 100%; display: flex; align-items: center; gap: 4px; z-index: 2; } .luna-btn { width: 40px; height: 26px; display: inline-block; border: none; background: transparent; cursor: pointer; padding: 0; image-rendering: pixelated; /* preserve pixel art */ background-repeat: no-repeat; background-position: center; background-size: contain; /* avoid stretch */ line-height: 0; } .luna-btn:hover { filter: brightness(1.05); } .luna-btn:active { filter: brightness(0.95); } /* Icon mapping (provide PNGs in assets/ui/luna) */ .luna-btn.minimize { background-image: url('assets/ui/luna/btn-minimize.png'); } .luna-btn.maximize { background-image: url('assets/ui/luna/btn-maximize.png'); } .luna-btn.close { background-image: url('assets/ui/luna/btn-close.png'); } /* Inactive tint removed (unused) */ /* ===== Videos page ===== */ .videos-page .yt-latest { display:grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px){ .videos-page .yt-latest { grid-template-columns: 1fr; } } .aspect-16x9 { position: relative; width: 100%; padding-top: 56.25%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .aspect-16x9 > iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .videos-page .yt-description { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.5; } .videos-page .yt-description a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent), transparent 60%); } .videos-page .yt-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .videos-page .yt-card .luna-body { padding: 0; } .videos-page .yt-card .aspect-16x9 { border: 0; background: transparent; } /* Videos title handling */ .luna-titlebar .luna-title { white-space: nowrap; overflow: hidden; } .luna-titlebar .luna-title.wave { display: inline-block; } /* Card titles are narrower: add side padding so text doesn't hit edges/buttons */ /* Only add extra edge padding when a card title is scrolling */ .yt-card .luna-titlebar .luna-title.marquee { padding-left: 16px; padding-right: calc(40px * 3 + 28px); } /* If JS marks a title as marquee, scroll it horizontally within the clipped area */ .luna-titlebar .luna-title.marquee { display: inline-block; animation: title-marquee var(--marquee-t, 10s) linear infinite; will-change: transform; } @keyframes title-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--marquee-dx, 40px))); } } /* Shorts vertical aspect */ .aspect-9x16 { position: relative; width: 100%; padding-top: 177.7778%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .aspect-9x16 > iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } /* Ensure titles stay in one line and hide overflow (wave anim handled by JS/CSS) */ .luna-titlebar .luna-title { white-space: nowrap; overflow: hidden; } /* Reserve space for titlebar controls so text clips sooner */ .luna-titlebar .luna-title { padding-right: calc(40px * 3 + 16px); } /* Videos: adjustable space for rock toggle */ :root { --rock-bottom-space: 240px; --rock-rail-gap: 0px; } .videos-page { padding-bottom: var(--rock-bottom-space); } /* Rock toggle: constrain and prevent horizontal overflow */ #rock-toggle { position: absolute !important; right: calc(var(--rail-w) + var(--rock-rail-gap)); bottom: 0; width: min(30vw, 260px); max-width: calc(100vw - (var(--rail-w) + var(--rock-rail-gap) + 12px)); height: auto; pointer-events: auto; } /* ===== SylviumLighting: Product Showcase ===== */ .product { margin: 22px 0; } .product .product-title { margin: 0 0 10px 2px; } .product-showcase { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px){ .product-showcase { grid-template-columns: 1fr; } } .product-video { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); display: block; } .img-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .img-grid img{ display:block; width:100%; height:auto; border-radius:10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); } .product-meta{ margin: 12px 0 18px; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; } .product-price{ font-family: 'Ari', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; font-size: 36px; line-height: 1; color: var(--accent); text-shadow: 0 2px 6px rgba(0,0,0,0.55); } body.light .product-price{ color: #000; } .product-meta .btn{ font-size: 18px; padding: 12px 18px; } /* ===== Dog Posting page ===== */ .dogposting-page #posts-list { display: flex; flex-direction: column; align-items: flex-start; /* keep windows hugging the left edge */ gap: 14px; } .dogposting-page .luna-window.post { /* Default: constrain but allow smaller variants */ max-width: 640px; width: auto; min-width: 280px; } /* Size variants (optional) */ .dogposting-page .luna-window.post.size-small { max-width: 320px; } .dogposting-page .luna-window.post.size-medium{ max-width: 560px; } .dogposting-page .luna-window.post.size-tall { max-width: 460px; } .dogposting-page .luna-window.post.wide { max-width: none; width: 100%; } @media (max-width: 720px) { .dogposting-page .luna-window.post { width: 100%; max-width: 100%; } } /* Hide stray top-level Dog-Posting link; dropdown has canonical entry */ .site-header nav > a[href="dog-posting.html"] { display: none; }