/* Supermartyr Records — refreshed 2026. Light ground, art carries the color. */ @font-face { font-family: "Oswald"; src: url("/fonts/oswald-latin.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; } /* * Registers the weight axis as a typed custom property, which guarantees a valid * value wherever `var(--wght)` is used. Weights are all static now — the hover * interpolation this originally enabled was removed, because changing weight on * hover reflows the text around it. */ @property --wght { syntax: ""; initial-value: 400; inherits: false; } /* * Dark is the design, not a preference. The light palette stays defined and * reachable via [data-theme="light"] on so a toggle can be added without * touching anything else, but nothing sets it automatically — prefers-color-scheme * is deliberately not consulted. */ :root { --bg: #121215; --surface: #1a1a1f; --surface-2: #232329; --text: #dcdce0; --strong: #f2f2f4; --muted: #90909c; --accent: #ef7d92; --accent-in: #17171a; --border: rgba(255, 255, 255, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.35); --link-hover: #ff3b30; --link-active: #cf2a21; --tint-0: #c94a5f; --tint-1: #96568a; --tint-2: #6d8bab; --tint-3: #4f9a84; --tint-4: #9a9c5e; --tint-5: #cd8250; --tint-6: #7272ad; --tint-7: #838a91; --display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --wrap: 72rem; --narrow: 42rem; --gap: clamp(1rem, 3vw, 2rem); --radius: 3px; } :root[data-theme="light"] { --bg: #ffffff; --surface: #f4f3f1; --surface-2: #e9e8e6; --text: #3a4142; --strong: #1c2021; --muted: #63636e; --accent: #9b1b30; --accent-in: #ffffff; --border: rgba(28, 32, 33, 0.14); --shadow: 0 1px 2px rgba(28, 32, 33, 0.07), 0 10px 28px rgba(28, 32, 33, 0.08); --link-hover: #d92b20; --link-active: #a81f16; --tint-0: #9b1b30; --tint-1: #5f2a50; --tint-2: #38506b; --tint-3: #245c4c; --tint-4: #5a5c30; --tint-5: #a05529; --tint-6: #3a3a6e; --tint-7: #454a4f; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; padding-bottom: clamp(3rem, 8vw, 6rem); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; } /* * Nothing here may change the text's size. A scale, a font-size bump or a weight * change on an inline link reflows the paragraph around it and shoves the line * under the cursor. Colour and the underline are the only things that move. */ a:hover, a:focus-visible { color: var(--link-hover); text-decoration-color: currentColor; } a:active { color: var(--link-active); } /* The wordmark is identity rather than navigation, so it holds its colour. */ .masthead__title:hover, .masthead__title:active { color: var(--strong); } /* * Card titles are headings carrying an explicit colour, so an ancestor anchor's * hover state never reaches them. They have to be named directly. */ .release-card__link:hover .release-card__title, .release-card__link:focus-visible .release-card__title, .artist-card__link:hover .artist-card__name, .artist-card__link:focus-visible .artist-card__name { color: var(--link-hover); } .release-card__link:active .release-card__title, .artist-card__link:active .artist-card__name { color: var(--link-active); } h1, h2, h3 { --wght: 500; font-family: var(--display); font-variation-settings: "wght" var(--wght); line-height: 1.14; letter-spacing: 0.005em; color: var(--strong); margin: 0; } del { color: var(--muted); text-decoration-thickness: 1px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 0.75rem 1rem; background: var(--accent); color: var(--accent-in); } .skip:focus { left: 0; } .wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; } .wrap--narrow { width: min(100% - 2 * var(--gap), var(--narrow)); } /* ---------- masthead ---------- */ .masthead { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, var(--surface)); position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(140%) blur(8px); } .masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; flex-wrap: wrap; } /* * Same split as the hero, weighted up for the smaller size: a condensed face * needs more weight as it shrinks, so this pair sits at 700/350 rather than * the hero's 600/300. */ .masthead__title { font-family: var(--display); font-variation-settings: "wght" 350; font-size: 1.45rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--strong); } .masthead__title-lead { font-variation-settings: "wght" 700; } .masthead__toggle { display: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; position: relative; } .masthead__toggle-bar, .masthead__toggle-bar::before, .masthead__toggle-bar::after { position: absolute; left: 50%; width: 1.1rem; height: 1.5px; margin-left: -0.55rem; background: currentColor; content: ""; } .masthead__toggle-bar { top: 50%; } .masthead__toggle-bar::before { top: -5px; left: 0; margin-left: 0; } .masthead__toggle-bar::after { top: 5px; left: 0; margin-left: 0; } .nav__list { display: flex; gap: clamp(1rem, 2.5vw, 2rem); list-style: none; margin: 0; padding: 0; } .nav__link { --wght: 500; font-family: var(--display); font-variation-settings: "wght" var(--wght); font-size: 0.92rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; color: var(--muted); transition: color 170ms ease; } .nav__link:hover, .nav__link:focus-visible { color: var(--link-hover); } .nav__link:active { color: var(--link-active); } @media (max-width: 40rem) { .masthead__toggle { display: block; } .nav { flex-basis: 100%; display: none; } .nav.is-open { display: block; } .nav__list { flex-direction: column; gap: 0.25rem; padding-bottom: 1rem; } .nav__link { display: block; padding: 0.5rem 0; font-size: 0.95rem; } } /* ---------- hero + sections ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(3rem, 10vw, 7rem) 0 clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--border); } /* * Masked rather than used as a background image, so the crest takes its colour * from the palette instead of from the OS preference. * * Centred under the last nav link rather than pinned to the viewport edge, so * the crest sits on the same vertical line as "About" in the masthead at every * width. The offset resolves that from the wrap's right edge, which is where * the last nav link ends: half the crest back off it, then half a link forward. */ .hero::after { --crest-size: min(36vw, 21rem); /* The rendered width of the last nav link, halved in the offset below. The nav is not fluid-sized, so this holds at every width; retune it if that link's text or the nav's type changes. */ --nav-tail: 2.8rem; content: ""; position: absolute; top: 50%; right: calc( 50% - min(100% - 2 * var(--gap), var(--wrap)) / 2 - var(--crest-size) / 2 + var(--nav-tail) / 2 ); width: var(--crest-size); aspect-ratio: 1006 / 1056; transform: translateY(-50%); background: var(--strong); opacity: 0.08; pointer-events: none; -webkit-mask: url("/img/crest.svg") center / contain no-repeat; mask: url("/img/crest.svg") center / contain no-repeat; } @media (max-width: 48rem) { .hero::after { display: none; } } .hero__title { --wght: 300; font-size: clamp(2.5rem, 8vw, 5.5rem); letter-spacing: 0.002em; text-transform: uppercase; } /* * The one place the optical rule is broken on purpose: 600 at this size is a * heavy slab, which is exactly the contrast the 300 of "Records" needs. */ .hero__title-lead { --wght: 600; font-variation-settings: "wght" var(--wght); } .hero__blurb { max-width: 34rem; margin: 1rem 0 0; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.2rem); } .section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .section--alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section--alumni { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--border); } .section__heading { font-size: 0.86rem; font-family: var(--display); font-variation-settings: "wght" 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; } .section__note { margin: -1rem 0 1.5rem; color: var(--muted); font-size: 0.9rem; } .section__more { margin: 2rem 0 0; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .page__title { --wght: 400; text-transform: uppercase; letter-spacing: 0.012em; font-size: clamp(2rem, 6vw, 3.25rem); margin: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); } /* ---------- grids ---------- */ .grid { display: grid; gap: var(--gap); } .grid--releases { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } /* * The homepage shows a fixed 8, so its columns step 1 - 2 - 4 rather than using * auto-fill. Auto-fill would pass through 3 columns around 900-1150px and leave * two orphans on the second row. The full catalogue grid keeps auto-fill. */ .grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 26rem) { .grid--featured { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 60rem) { .grid--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .grid--artists { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); } .grid--news { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } /* ---------- cards ---------- */ /* * Hovering any card takes every other image on the page fully monochrome and 20% * darker, so the one under the cursor is the only thing still in colour. The * dimming crosses grid boundaries: hovering a release dims the news items too, * and hovering a news item dims the releases. * * Driven by an inherited custom property rather than by pairing every selector * against every state. The page sets the dimmed value, the hovered card resets it * for its own subtree, and inheritance settles which wins — no specificity * arithmetic, and one declaration per target instead of eight. * * Scoped to clickable cards on purpose. `.release-card .cover` rather than bare * `.cover`, so the large cover on a release page does not dim when a card in its * Coverage list is hovered. */ .release-card .cover, .artist-card__photo, .news-card__figure img, .news-card__tint { filter: var(--card-filter, none); transition: filter 220ms ease, border-color 220ms ease; } body:has(.grid a:hover), body:has(.grid a:focus-visible) { --card-filter: grayscale(1) brightness(0.8); } .grid > *:has(a:hover), .grid > *:has(a:focus-visible) { --card-filter: none; } .cover, .artist-card__photo { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .cover--placeholder { object-fit: contain; box-shadow: none; } .release-card__link, .artist-card__link { display: block; text-decoration: none; } .release-card__link:hover .cover, .release-card__link:focus-visible .cover, .artist-card__link:hover .artist-card__photo, .artist-card__link:focus-visible .artist-card__photo { border-color: var(--strong); } .news-card { transition: border-color 220ms ease; } .news-card:has(a:hover), .news-card:has(a:focus-visible) { border-color: var(--strong); } .release-card__title, .artist-card__name { --wght: 500; font-size: 1.2rem; margin-top: 0.85rem; transition: color 170ms ease; } .release-card__meta, .artist-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--muted); } .release-card__format, .release__format { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; } .catalog { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.15rem 0.4rem; border: 1px solid var(--border); border-radius: 2px; color: var(--muted); } .badge { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 2px; background: var(--accent); color: var(--accent-in); } .badge--quiet { background: transparent; border: 1px solid var(--border); color: var(--muted); } .badge--oop { background: var(--muted); color: var(--bg); } .kind { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--border); padding-left: 0.5rem; } .news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .news-card__figure { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .news-card__figure img, .news-card__tint { display: block; width: 100%; height: 100%; object-fit: cover; } /* * Image-less news items keep the card's shape via a cycling tint, stamped with * the crest so a missing picture reads as house branding rather than a gap. */ .news-card__tint { position: relative; } .news-card__tint::after { content: ""; position: absolute; inset: 0; background: #ffffff; opacity: 0.17; -webkit-mask: url("/img/crest.svg") center / 62% no-repeat; mask: url("/img/crest.svg") center / 62% no-repeat; } .news-card__tint--0 { background: var(--tint-0); } .news-card__tint--1 { background: var(--tint-1); } .news-card__tint--2 { background: var(--tint-2); } .news-card__tint--3 { background: var(--tint-3); } .news-card__tint--4 { background: var(--tint-4); } .news-card__tint--5 { background: var(--tint-5); } .news-card__tint--6 { background: var(--tint-6); } .news-card__tint--7 { background: var(--tint-7); } .news-card__figure:hover .news-card__tint { filter: brightness(1.12); } .news-card__body { padding: 1.1rem 1.25rem 1.4rem; } .news-card__meta { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--muted); } .news-card__title { --wght: 500; font-size: 1.25rem; } .news-card__title a { text-decoration: none; } .artist-card__photo { aspect-ratio: 4 / 3; } /* ---------- release detail ---------- */ .release { display: grid; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start; margin: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 3rem); } @media (min-width: 48rem) { .release { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); } .artist { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } } .release__eyebrow, .artist__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; color: var(--muted); } .release__title, .artist__name { --wght: 400; text-transform: uppercase; letter-spacing: 0.012em; font-size: clamp(2rem, 6vw, 3.25rem); } .release__artist { margin: 0.5rem 0 0; font-size: 1.35rem; font-family: var(--display); font-variation-settings: "wght" 450; text-transform: uppercase; letter-spacing: 0.02em; } .release__date { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; } .stores { margin-top: 2rem; } .stores__heading { font-family: var(--display); font-size: 0.82rem; font-variation-settings: "wght" 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; } .stores__list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .store { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 0.85rem; text-decoration: none; } .store:hover, .store:focus-visible { border-color: var(--link-hover); color: var(--link-hover); } .store:active { border-color: var(--link-active); color: var(--link-active); } .store--defunct { opacity: 0.45; text-decoration: line-through; } /* ---------- tracks ---------- */ .tracks { margin: clamp(2rem, 5vw, 3rem) 0; padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--border); } .tracks__heading { font-family: var(--display); font-size: 0.82rem; font-variation-settings: "wght" 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .tracks__list { list-style: none; margin: 0; padding: 0; counter-reset: track; } .track { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.4rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); } .track__number { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } .track__title { font-family: var(--display); font-variation-settings: "wght" 450; font-size: 1.12rem; } .track__audio { grid-column: 1 / -1; width: 100%; height: 2.25rem; } /* ---------- artist + prose ---------- */ .artist { display: grid; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start; margin: clamp(2rem, 6vw, 4rem) 0; } .artist__figure img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .artist__credit { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); } /* Matches the voice of the hand-written "Update 2016:" notes in the news bodies. */ .update-note { margin: 1.75rem 0 0; padding: 0.85rem 1rem; border-left: 2px solid var(--muted); background: var(--surface); font-size: 0.9rem; color: var(--text); max-width: 34rem; } .update-note strong { color: var(--strong); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; } .moved-note { margin: 1.75rem 0 0; padding: 0.85rem 1rem; border-left: 2px solid var(--accent); background: var(--surface); font-size: 0.9rem; color: var(--muted); max-width: 34rem; } .artist__links { display: flex; gap: 0.75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: 0.85rem; } .prose { max-width: 38rem; font-size: 1.02rem; } .prose p { margin: 0 0 1.15em; } .prose img { border-radius: var(--radius); margin: 1.5rem 0; } .prose figure { margin: 1.5rem 0; } /* ---------- post ---------- */ .post { margin: clamp(2rem, 6vw, 4rem) 0; } .post__meta { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; font-size: 0.8rem; color: var(--muted); } .post__title { --wght: 450; font-size: clamp(1.85rem, 5vw, 2.85rem); margin-bottom: 1.5rem; } .post__figure { margin: 0 0 1.75rem; } .post__figure .post__image { margin-bottom: 0.6rem; } .post__credit { font-size: 0.78rem; color: var(--muted); } .post__image { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.75rem; box-shadow: var(--shadow); } .post__release { margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid var(--border); max-width: 15rem; } .post__release-heading { font-family: var(--display); font-size: 0.82rem; font-variation-settings: "wght" 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .post__artist { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--muted); } .embed { position: relative; margin: 0 0 1.75rem; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed--soundcloud, .embed--spotify { aspect-ratio: auto; height: 10.5rem; } /* ---------- store matrix ---------- */ /* A quiet way out of a page, not a call to action. */ .page__footnote { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .stores-page__intro { max-width: 40rem; margin: 0 0 0.75rem; color: var(--muted); } /* Wide content scrolls inside its own container; the page body never does. */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .matrix { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .matrix th, .matrix td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .matrix thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-family: var(--display); font-variation-settings: "wght" 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; } .matrix tbody tr:hover { background: var(--surface-2); } .matrix__release { min-width: 15rem; white-space: normal; } .matrix__release a { font-family: var(--display); font-variation-settings: "wght" 500; font-size: 1rem; text-decoration: none; color: var(--strong); } .matrix__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.2rem; font-size: 0.76rem; font-weight: 400; color: var(--muted); } .matrix__count { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.35rem; border-radius: 2px; background: var(--bg); font-size: 0.7rem; color: var(--muted); } .matrix__defunct { text-decoration: line-through; } .matrix__link { font-size: 0.8rem; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .matrix__missing { color: var(--muted); opacity: 0.4; } /* ---------- footer ---------- */ .footer { padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--border); background: var(--surface); font-size: 0.85rem; color: var(--muted); } .footer__inner { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; } .footer__seal { width: 4.75rem; aspect-ratio: 1006 / 1056; flex: none; background: var(--text); opacity: 0.5; -webkit-mask: url("/img/crest.svg") center / contain no-repeat; mask: url("/img/crest.svg") center / contain no-repeat; } .footer__blurb { margin: 0; max-width: 22rem; } .footer__nav ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; } .footer__contact { margin: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }