/* ==========================================================================
DECENZEE — Shared Styles
Design system: monochrome black/white, Bebas Neue (display) + Source Sans 3 (body)
========================================================================== */
/* Smooth cross-fade between pages (Home/About/Artists/EPK) instead of the
default hard cut, including browser back/forward. Supported in Chrome/
Edge and newer Safari; browsers without support just do a normal instant
navigation — no fallback code needed. Automatically skipped when the
visitor has prefers-reduced-motion set. */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.35s;
animation-timing-function: ease;
}
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
/*
* Rama Gothic E is a licensed commercial font (not on Google Fonts) — it isn't
* bundled here. Buy/download it, then drop the files into assets/fonts/ using
* these exact names (or update the src paths below to match what you have).
* Until those files exist, --font-display falls back to Bebas Neue.
*/
@font-face {
font-family: 'Rama Gothic E';
src: url('../assets/fonts/RamaGothicE.woff2') format('woff2'),
url('../assets/fonts/RamaGothicE.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/*
* Grtsk Var is a licensed commercial variable font (not on Google Fonts) — it
* isn't bundled here either. Buy/download it, then drop the files into
* assets/fonts/ using these exact names (or update the src paths below).
* Until those files exist, --font-kicker falls back to the body font.
*/
@font-face {
font-family: 'Grtsk Var';
src: url('../assets/fonts/GrtskVar.woff2') format('woff2-variations'),
url('../assets/fonts/GrtskVar.woff2') format('woff2'),
url('../assets/fonts/GrtskVar.woff') format('woff');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/*
* Acumin Pro ExtraCondensed Ultra Black is an Adobe (licensed) font — it isn't
* bundled here. It comes from Adobe Fonts (Creative Cloud) or a direct Adobe
* license, not a plain font file download like the others above. Activate it
* via Adobe Fonts (creates a kit link you'd add in ) or, if you have
* licensed font files, drop them into assets/fonts/ using these names.
* Until one of those is set up, --font-page-heading falls back to Rama Gothic E.
*/
@font-face {
font-family: 'Acumin Pro ExtraCondensed Ultra Black';
src: url('../assets/fonts/AcuminProExtraCondensedUltraBlack.woff2') format('woff2'),
url('../assets/fonts/AcuminProExtraCondensedUltraBlack.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root {
--color-bg: #000000;
--color-fg: #ffffff;
--color-muted: #a6a6a6;
--color-border: #2b2b2b;
--color-bg-inverse: #ffffff;
--color-fg-inverse: #0a0a0a;
--font-display: 'Rama Gothic E', 'Bebas Neue', Impact, sans-serif;
--font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
--font-kicker: 'Grtsk Var', 'Source Sans 3', system-ui, -apple-system, sans-serif;
--font-page-heading: 'Acumin Pro ExtraCondensed Ultra Black', 'Rama Gothic E', 'Bebas Neue', Impact, sans-serif;
--container: 1200px;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 4rem;
--space-7: 6rem;
--space-8: 8rem;
--transition: 220ms ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
min-height: 100dvh;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.02em;
margin: 0;
}
p {
margin: 0;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-3);
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-fg);
outline-offset: 3px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-fg);
color: var(--color-bg);
padding: var(--space-1) var(--space-2);
z-index: 100;
font-family: var(--font-body);
font-weight: 600;
}
.skip-link:focus {
left: var(--space-2);
top: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Header ---------- */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
padding: var(--space-3) 0;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.site-header--static .container {
justify-content: space-between;
}
.site-header--static .main-nav {
flex: 0 0 auto;
margin: 0;
}
.site-header--home .container {
justify-content: space-between;
max-width: none;
padding: 0 var(--space-7);
}
.site-header--home .main-nav {
flex: 0 0 auto;
justify-content: flex-start;
margin: 0;
}
/* Follows the logo in on page load — starts a beat after logo-entrance
above so nav + social icons visibly arrive right after the logo. */
.site-header--home {
animation: header-entrance 0.6s ease-out 0.5s both;
}
@keyframes header-entrance {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header-social {
display: flex;
align-items: center;
gap: var(--space-1);
}
.header-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
opacity: 0.8;
transition: opacity var(--transition);
}
.header-social a:hover {
opacity: 1;
}
.header-social img,
.header-social svg {
width: 18px;
height: 18px;
}
.site-header--static {
position: relative;
border-bottom: 1px solid var(--color-border);
padding: var(--space-3) 0;
margin-bottom: var(--space-6);
}
.brand-logo {
display: inline-flex;
align-items: center;
}
.brand-logo img {
height: 36px;
width: auto;
max-width: 34vw;
}
@media (max-width: 600px) {
/* The nav now includes a "Home" link, so the header logo is redundant
for navigation on narrow screens — hiding it avoids the logo colliding
with the centered nav once there are 3 items to fit. */
.site-header--static .brand-logo {
display: none;
}
.site-header--static .main-nav {
gap: var(--space-2);
position: static;
transform: none;
margin: 0 auto;
}
.site-header--home .container {
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.site-header--home .main-nav {
gap: var(--space-2);
justify-content: center;
}
/* Social icons move down to the footer on mobile (above the contact
email) instead of sitting in the header — see .home-footer-social.
This has to win over the unscoped .footer-row .home-footer-social
"hidden by default" rule below despite matching specificity, so it's
repeated here at the very end of the file — see that comment for why. */
.site-header--home .header-social {
display: none;
}
}
/* Hidden by default (desktop keeps icons in the header). Shown again on
mobile via the last rule in this file (same selector, so it wins on
source order) — kept there instead of here so a media query added later
in the file can't accidentally beat it back to none. */
.footer-row .home-footer-social {
display: none;
}
.main-nav {
display: flex;
gap: var(--space-4);
list-style: none;
margin: 0 auto;
padding: 0;
}
.site-header .brand-logo {
flex: 0 0 auto;
}
.main-nav {
flex: 1 1 auto;
justify-content: center;
}
.main-nav a {
font-family: var(--font-kicker);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-fg);
padding: var(--space-1) 0;
border-bottom: 1px solid transparent;
transition: opacity var(--transition), border-color var(--transition);
opacity: 0.6;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
opacity: 1;
}
.main-nav a[aria-current="page"] {
border-bottom-color: var(--color-fg);
}
/* ---------- Hero (Home) ---------- */
.hero {
position: relative;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-6) var(--space-3) var(--space-5);
overflow: hidden;
}
/* Optional video background — see the commented example in index.html for
how to enable this. Sits behind the logo, dimmed for legibility. */
.hero-video-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-video-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 22%),
rgba(0, 0, 0, 0.55);
z-index: 1;
}
.hero-logo,
.hero-tagline {
position: relative;
z-index: 2;
}
.hero-logo {
width: 100%;
max-width: 950px;
height: auto;
animation:
logo-entrance 0.9s ease-out both,
neon-glow 5s ease-in-out 0.9s infinite;
}
/* Entrance on page load: logo fades/scales in first, then the header
(nav + social icons, see .site-header--home below) follows right after. */
@keyframes logo-entrance {
from {
opacity: 0;
transform: scale(0.94);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* 80s neon-sign pulse: sits idle, then flares up white and fades back out
once every 5s cycle. Respects prefers-reduced-motion via the global
rule above, which freezes this to a single frame for those users. */
@keyframes neon-glow {
0%, 65% {
filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
}
78% {
filter:
drop-shadow(0 0 14px rgba(255, 255, 255, 0.95))
drop-shadow(0 0 34px rgba(255, 255, 255, 0.75))
drop-shadow(0 0 60px rgba(255, 255, 255, 0.5));
}
92%, 100% {
filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
}
}
.hero-tagline {
margin-top: var(--space-3);
color: var(--color-muted);
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ---------- Footer band (white) ---------- */
.site-footer {
background: var(--color-bg);
color: var(--color-fg);
border-top: 1px solid var(--color-border);
padding: var(--space-5) 0 var(--space-4);
}
.footer-row {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.footer-social {
display: flex;
gap: var(--space-2);
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
transition: opacity var(--transition);
}
.footer-social a:hover {
opacity: 0.6;
}
.footer-social img,
.footer-social svg {
width: 26px;
height: 26px;
}
.footer-email {
font-weight: 600;
font-size: 1.15rem;
border-bottom: 1px solid transparent;
transition: border-color var(--transition);
}
.footer-email:hover {
border-bottom-color: var(--color-fg);
}
.footer-copyright {
margin-top: var(--space-2);
text-align: center;
font-size: 0.95rem;
color: var(--color-muted);
}
/* ---------- Page header (Roster / About) ---------- */
.page-header {
padding: var(--space-2) 0 var(--space-2);
text-align: center;
}
.page-header h1 {
font-family: var(--font-page-heading);
color: var(--color-fg);
font-weight: 900;
font-size: clamp(2.5rem, 7vw, 4.5rem);
/* Same neon-sign pulse as the homepage logo — see @keyframes neon-glow. */
animation: neon-glow 5s ease-in-out infinite;
}
.page-header p {
margin-top: var(--space-2);
color: var(--color-muted);
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* ---------- Roster ---------- */
/* Poster-style grid: each artist is a rectangular photo, with their logo
and official website link centered in a strip underneath it (not on top
of the photo, so the photo stays fully visible) — no bio here, that
lives on the artist's own EPK page. 3 columns on desktop, 2 on mobile.
New artists added in VS Code just become another card in the grid. */
.roster-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
padding: var(--space-5) 0 var(--space-8);
}
@media (max-width: 700px) {
.roster-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
}
.artist-card {
display: flex;
flex-direction: column;
}
/* .artist-photo is just a positioning wrapper (no overflow:hidden of its
own) so that if an artist card ever gets so many social links they don't
all fit, the overflow spills out visibly above the photo instead of
silently getting clipped and disappearing. The actual image cropping/
framing lives on .artist-photo-frame inside it. */
.artist-photo {
position: relative;
}
.artist-photo-frame {
aspect-ratio: 3 / 4;
background: #111111;
border: 1px solid var(--color-border);
overflow: hidden;
}
.artist-photo-frame > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.artist-card:hover .artist-photo-frame > img {
transform: scale(1.04);
}
.artist-photo-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-muted);
font-size: 0.85rem;
text-align: center;
padding: var(--space-3);
font-family: var(--font-body);
letter-spacing: 0.04em;
}
/* Logo + website link, below the photo (not overlaid on it). */
.artist-card-info {
margin-top: var(--space-3);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
}
.artist-card-logo {
display: block;
max-width: min(180px, 70%);
height: auto;
}
.artist-card-name {
display: block;
font-family: var(--font-kicker);
font-weight: 800;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 0.02em;
color: var(--color-fg);
text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.artist-name {
font-family: var(--font-kicker);
font-weight: 700;
margin-top: var(--space-3);
font-size: 2rem;
letter-spacing: 0.02em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.artist-card-logo-inline {
display: block;
max-width: min(280px, 100%);
height: auto;
}
.artist-card-name-inline {
display: block;
font-family: var(--font-kicker);
font-weight: 800;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 0.02em;
color: var(--color-fg);
text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.artist-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-1);
}
.artist-tag {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
border: 1px solid var(--color-fg);
border-radius: 999px;
padding: 0.3rem 0.85rem;
min-height: 32px;
}
a.artist-tag {
color: var(--color-fg);
transition: border-color var(--transition), color var(--transition);
}
a.artist-tag:hover {
border-color: var(--color-fg);
}
.artist-bio {
margin-top: var(--space-3);
max-width: 620px;
color: var(--color-muted);
font-size: 1rem;
line-height: 1.75;
}
.artist-social {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
}
.artist-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: opacity var(--transition);
}
.artist-social a:hover {
opacity: 0.7;
}
.artist-social img {
width: 18px;
height: 18px;
}
/* Mobile sizing for the roster cards — kept down here, after the base
rules above, on purpose: a media-query rule and an unconditional rule of
equal specificity are decided by source order, not by the media query,
so this block has to come last to actually win on small screens. */
@media (max-width: 700px) {
.artist-card-logo {
max-width: min(150px, 62%);
}
.artist-card-name-inline {
font-size: 0.95rem;
}
.artist-card-info {
margin-top: var(--space-2);
gap: var(--space-1);
}
.artist-tag {
max-width: 80%;
font-size: 0.6rem;
padding: 0.3rem 0.7rem;
min-height: 24px;
}
}
/* ---------- About page ---------- */
.about-content {
max-width: 720px;
margin: 0 auto;
padding: 0 0 var(--space-8);
color: var(--color-muted);
font-size: 1.05rem;
line-height: 1.8;
}
.about-content p + p {
margin-top: var(--space-3);
}
.placeholder-flag {
display: inline-block;
margin-top: var(--space-3);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #666666;
border: 1px solid var(--color-border);
padding: 0.35rem 0.6rem;
}
/* ---------- EPK page ---------- */
.epk-body {
background: var(--color-bg);
}
.epk-grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100dvh;
}
.epk-photo {
position: sticky;
top: 0;
align-self: start;
height: 100dvh;
min-width: 0;
background: #151515;
overflow: hidden;
}
.epk-photo > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
}
.epk-photo-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-muted);
text-align: center;
padding: var(--space-4);
font-size: 0.9rem;
}
.epk-photo-header {
position: absolute;
left: 0;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4);
/* Fades from the very top instead of holding flat at high opacity — the
old version (0.75, flat until 10%) sat on top of the subject's dark
hair and read as a solid black block instead of a blend into the
photo. This dips low enough, immediately enough, that photo texture
stays visible through it while the logo/kicker text overlaid on top
(which have their own text-shadow) stay legible. */
background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
}
.epk-photo-header-logo {
height: 24px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.epk-photo-kicker {
font-family: var(--font-kicker);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-fg);
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
white-space: nowrap;
}
.epk-photo-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--space-4) var(--space-4) var(--space-7);
background: linear-gradient(to top, rgba(0,0,0,0.95) 25%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
}
.epk-artist-name {
font-family: var(--font-body);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
font-size: clamp(1.9rem, 4.2vw, 2.75rem);
line-height: 1.05;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.epk-artist-logo {
max-width: min(380px, 100%);
max-height: 130px;
width: auto;
height: auto;
filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}
.epk-social {
display: flex;
gap: var(--space-2);
margin-top: var(--space-2);
}
.epk-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 -0.35rem;
}
.epk-social img,
.epk-social svg {
width: 20px;
height: 20px;
}
.epk-website {
display: inline-block;
margin-top: var(--space-2);
color: var(--color-fg);
font-size: 1.05rem;
/* Always underlined (not just on hover) so it reads as a link on touch
devices too, where hover never happens. */
border-bottom: 1px solid var(--color-muted);
transition: border-color var(--transition);
}
.epk-website:hover {
border-color: var(--color-fg);
}
.epk-management-line {
margin-top: var(--space-2);
color: var(--color-fg);
font-size: 1.05rem;
}
.epk-management-line a {
color: var(--color-fg);
border-bottom: 1px solid var(--color-muted);
transition: border-color var(--transition);
}
.epk-management-line a:hover {
border-color: var(--color-fg);
}
.epk-management-name {
font-weight: 700;
}
.epk-panel {
padding: var(--space-4) var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
min-width: 0;
}
.epk-heading {
font-family: var(--font-body);
font-weight: 800;
text-transform: uppercase;
font-size: 1.15rem;
letter-spacing: 0.04em;
}
.epk-rule {
width: 48px;
height: 2px;
background: var(--color-fg);
border: 0;
margin: var(--space-2) 0 var(--space-3);
}
.epk-bio {
color: #d4d4d4;
font-size: 1rem;
line-height: 1.8;
/* Caps line length on wide screens so paragraphs stay readable instead
of stretching edge to edge of the right column. */
max-width: 640px;
}
.epk-copy-btn {
margin-top: var(--space-3);
align-self: flex-start;
background: transparent;
border: 1px solid var(--color-fg);
color: var(--color-fg);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.75rem 1.25rem;
cursor: pointer;
transition: background var(--transition), color var(--transition);
min-height: 44px;
}
.epk-copy-btn:hover {
background: var(--color-fg);
color: #000;
}
.epk-section-gap {
margin-top: var(--space-6);
}
/* ---------- EPK: sections stacked in the scrolling right column ---------- */
.epk-section-note {
color: var(--color-muted);
margin-top: 0.5rem;
font-size: 0.9rem;
}
.epk-more-subheading {
margin-top: var(--space-5);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-fg);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--color-border);
}
/* Shows */
.shows-list {
list-style: none;
margin: var(--space-3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.show-card {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
align-items: center;
padding: var(--space-2);
border: 1px solid var(--color-border);
transition: border-color var(--transition);
}
.show-card:hover {
border-color: #4d4d4d;
}
/* Not currently used — every show card is flyer-free. Kept here in case a
flyer image is wanted again on a show later: add a
![]()