/************************************************************************************ THE PLASTIC BASTARDS Single stylesheet. Replaces style.css + media-queries.css + layout.css. Layout is intrinsic: the columns decide for themselves when to stack, so there is exactly one breakpoint in this file, and it exists only because eleven nav links cannot decide on their own to become a button. *************************************************************************************/ :root { /* Surface */ --page: #000000; --panel: #333333; --panel-lit: #4f4f4f; --panel-dark: #282828; --panel-edge: #6a6a6a; /* Magenta is the site. It is the border on every panel AND the hover colour on every link - one value in both places is what ties the structure and the interaction together. */ --accent: #FF0080; /* Text */ --body: #FFFF33; --heading: #FFFFFF; --caption: #DDDDDD; --muted: #CCCCCC; /* Interaction */ --link: #00FFFF; /* Labels - field names, section headers */ --label: #CCFFFF; /* Release status */ --released: #FFA640; --previous: #80FF80; --unreleased: #0080FF; /* Shape */ /* One divider colour site-wide. Deliberately not any of the text colours - a rule the same colour as the copy it separates reads as more copy. This is the value the sidebar widgets always used. */ --rule: #EEEEEE; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,.4); --depth: black 0.2em 0.2em 0.3em; } /************************************************************************************ RESET *************************************************************************************/ *, *::before, *::after { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } /************************************************************************************ GENERAL *************************************************************************************/ body { background: var(--page) url(images/layout/body_bg2.jpg) no-repeat center top; background-size: contain; font: .98em/150% Arial, Helvetica, sans-serif; text-shadow: var(--depth); color: var(--body); } a { color: var(--link); text-decoration: none; outline: none; } a:hover { text-decoration: underline; color: var(--accent); } p { text-indent: 2em; margin: 0 0 1.2em; } hr { color: var(--accent); } /* headings */ h1, h2, h3, h4, h5, h6 { line-height: 1.4em; margin: 20px 0 .4em; color: var(--heading); } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } /* lists */ ul, ol { margin: 1em 0 1.4em 24px; line-height: 140%; } li { margin: 0 0 .5em 0; padding: .5em; } /* Content lists only. Sidebar and footer lists inherit body size. */ #content li { font-size: 1.4em; } /* Except the discography, whose rows are full blocks with their own headings and paragraphs - 1.4em would scale the whole thing up. */ #discography li { font-size: 1em; } /************************************************************************************ TEXT MARKERS Field labels and release status. .highlight and .highlight2 mark the same thing on different pages - they were built months apart in different colours. *************************************************************************************/ .highlight, .highlight2 { font-weight: bold; color: var(--label); } .highlightrelease { font-weight: bold; color: var(--released); } .highlightprevrelease { font-weight: bold; color: var(--previous); } .highlightunrelease { font-weight: bold; color: var(--unreleased); } .smaller { font-size: 15px; } .left { text-align: left; padding: 5px; } /************************************************************************************ PANEL CHROME The nav bar, the content panel, the sidebar widgets and the MENU button are all the same object: dark slab, magenta edge, soft corner, dropped shadow. *************************************************************************************/ #main-nav, #content, .widget, #nav-toggle-label { border: 1px var(--accent) solid; border-radius: var(--radius); box-shadow: var(--shadow); } /************************************************************************************ PAGE SHELL *************************************************************************************/ #pagewrap { width: 90%; margin-inline: auto; } #content, #sidebar, .widget { box-sizing: border-box; } /************************************************************************************ HEADER A column that stacks in source order at every width. Nothing is positioned, so nothing has to be un-positioned further down. *************************************************************************************/ #header { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; } #site-logo, #site-description { margin: 0; } /* The logo used to be an

and took its line box from the heading rule. It is a
now (so each page has exactly one h1 - its own title), which means these two values have to be stated rather than inherited from the tag. The inside sets its own 30px font; this only sets the strut. */ #site-logo { font-size: 2em; line-height: 1.4em; } #site-logo a { font: bold 30px/100% Arial, Helvetica, sans-serif; color: var(--heading); text-decoration: none; } #site-description { font: bold 15px/130% Arial, Helvetica, sans-serif; color: #FFFF00; } /************************************************************************************ MAIN NAVIGATION *************************************************************************************/ #main-nav { width: 100%; /* Overrides the generic "ul, ol" margin below - without this the bar picks up a 24px indent and vertical gaps. */ margin: 0; padding: 0; background: var(--panel); background: linear-gradient(-90deg, var(--panel), var(--panel-edge)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4); display: flex; flex-wrap: wrap; } #main-nav li { margin: 0; padding: 0; list-style: none; position: relative; font-size: 0.95em; } #main-nav li:first-child { margin-left: 10px; } /* Light and tight so all seven labels hold a single row. */ #main-nav a, #main-nav .has-sub > span { line-height: 100%; color: var(--link); display: block; padding: 14px 9px; text-decoration: none; text-shadow: var(--depth); } #main-nav a:hover { color: var(--accent); background: var(--panel-lit); background: linear-gradient(-90deg, var(--panel-dark), var(--panel-lit)); } /* ---- Dropdown trigger ---- */ /* Not a link. It opens the menu and nothing else. */ #main-nav .has-sub > span { cursor: pointer; } #main-nav .has-sub > span::after { content: " \25BE"; } /* The trigger stays lit while its menu is down, anchoring the open panel to the item that opened it. */ #main-nav .has-sub:hover > span, #main-nav .has-sub:focus-within > span { color: var(--accent); background: linear-gradient(-90deg, var(--panel-dark), var(--panel-lit)); } /* ---- Dropdown panel ---- */ #main-nav .has-sub > ul { display: none; position: absolute; top: 100%; left: 0; z-index: 400; min-width: 100%; white-space: nowrap; margin: 0; list-style: none; line-height: 140%; background: var(--panel); border: 1px var(--accent) solid; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 2px 5px rgba(0,0,0,.5); } /* Hover for the mouse, focus-within for the keyboard. On a touchscreen the tap gives the trigger focus, so the panel opens and stays open until something else is tapped. */ #main-nav .has-sub:hover > ul, #main-nav .has-sub:focus-within > ul { display: block; } /* Separator line inside dropdowns — no text, just a rule. */ #main-nav .has-sub li.nav-divider { height: 0; padding: 0; margin: 4px 0; border-top: 1px solid var(--rule); pointer-events: none; } #main-nav .has-sub li { margin: 0; padding: 0; font-size: 1em; border-top: 1px solid var(--rule); } #main-nav .has-sub li:first-child { margin-left: 0; border-top: none; } #main-nav .has-sub li a { padding: 10px 15px; } /* Quieter than the bar: the colour shift carries it without the slab. */ #main-nav .has-sub li a:hover { color: var(--accent); background: rgba(255,255,255,.07); } /* The checkbox holds the open/closed state. Never visible, but reachable with the Tab key. */ #nav-toggle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } #nav-toggle-label { display: none; } /************************************************************************************ MASTHEAD Its own band between the header and the columns, rather than the first figure inside the article. In the panel it read as "the first picture in the piece"; out here it reads as the top of the page. Capped at the source width. The files are 849px, so letting the band stretch them across the full wrap scaled them up by half again and softened them. This keeps them sharp and centred, and they still sit outside the panel - which was the point of moving them. *************************************************************************************/ #masthead { margin: 15px auto 0; max-width: 849px; line-height: 0; } #masthead img { width: 100%; height: auto; display: block; } /************************************************************************************ BODY COLUMNS Content takes three shares of the row and will not go below 400px; the sidebar takes one and will not go below 250px. When both floors can no longer be met the sidebar wraps underneath on its own, at whatever width that happens to be on the device in hand. No breakpoint decides this. *************************************************************************************/ .layout { display: flex; flex-wrap: wrap; gap: 30px; margin: 30px 0; } #content { /* 4.5 to 1 puts the sidebar at roughly a quarter of the wrap. The floors below still decide when the two stop fitting and the sidebar wraps. */ flex: 4.5 1 400px; background: var(--panel) url(images/layout/dumpster.png) no-repeat right bottom; background-size: contain; /* Full 35px sides when there is room, easing to a 15px floor when there is not. Continuous, so no breakpoint. */ padding: 20px clamp(15px, 4%, 35px); /* Lets the captions respond to THIS panel's width, not the window's. */ container-type: inline-size; container-name: content; } #sidebar { flex: 1 1 210px; } /************************************************************************************ FLOAT CONTAINMENT Replaces the old .clearfix class and the 42 markup hooks that went with it. #content and #sidebar are flex ITEMS, but they still lay out their own children in normal block flow, so floats inside them still need containing. *************************************************************************************/ .post, .widget { display: flow-root; } /************************************************************************************ POSTS *************************************************************************************/ .post { margin-bottom: 40px; } .post-title { margin: 0 0 5px; font: bold 26px/120% Arial, Helvetica, sans-serif; } .post-title a { text-decoration: none; color: var(--heading); } .post-meta { background-color: var(--page); color: var(--label); font-weight: bold; font-style: italic; margin: 0 0 10px; font-size: 90%; border: 1px solid var(--link); padding: 3px; } .post-image { margin: 0 0 15px; } /* Floated captions. style.css set "font: 15px" here, an invalid shorthand with no family, so it was discarded and these inherited body size. The drop shadow is dropped too - at this size it smeared black behind grey text on black. */ .post-image_l, .post-image_r { width: 300px; max-width: 100%; border: 1px var(--accent) solid; background: var(--page); font-family: Arial, Helvetica, sans-serif; font-size: 0.85em; font-weight: bold; color: var(--caption); text-align: center; text-shadow: none; } .post-image_l { float: left; margin: 0 15px 15px 0; } .post-image_r { float: right; margin: 15px 0 15px 0; } /* Below roughly 580px of content panel a 300px float leaves under 250px of text beside it - one word per line. The captions stop floating and centre. */ @container content (max-width: 580px) { .post-image_l, .post-image_r { float: none; margin: 0 auto 15px; } } /************************************************************************************ DISCOGRAPHY *************************************************************************************/ /* This was written as "#discography ul" - a list INSIDE the element with that id. But #discography IS the list, so the rule never matched and the generic "ul, ol" 24px left margin was indenting every row. */ ul#discography { list-style-type: none; margin-left: 0; padding-left: 0; } /* The note bullet and its 20px indent suited one-line entries. Each row is now a block several hundred pixels tall, so the note floated at mid-height off to the side and the indent pushed everything in for no reason. */ #discography li { margin-bottom: 10px; color: var(--heading); list-style: none; clear: both; border-top: solid 1px var(--rule); } /************************************************************************************ DISCOGRAPHY ROWS One block per song, all identical. Anything without a value hides itself, so a row shows exactly what is known about it and gains the rest as you fill it in - no commenting out, nothing to remember. The box is the merchandise release box laid out for a wider container: cover on the left, credits on the right, buy and stream side by side underneath. The lyrics sit OUTSIDE it in a
, so opening them does not make the box grow to twenty times its height. *************************************************************************************/ .song-title { margin: 0 0 4px; font-size: 1.3em; } .song-note { margin: 0 0 8px; text-indent: 0; font-size: 0.95em; } .song-copyright { margin: 0 0 8px; text-indent: 0; font-size: 0.8em; color: var(--muted); } /* Cover and credits side by side; they stack on their own when the panel is too narrow to hold both. */ .song-box { display: flex; flex-wrap: wrap; /* Only bites on a row that has space left over - so the cover centres once it wraps onto a line of its own, and nothing moves while the credits sit beside it, because those grow to fill the row. */ justify-content: center; gap: 15px; padding: 12px; margin-bottom: 10px; border: 1px var(--accent) solid; border-radius: var(--radius); background: var(--page); } .cover-slot { flex: none; } /* Takes the whole box when there is no cover beside it. */ .song-credits { flex: 1 1 200px; min-width: 0; } .song-credits p { margin: 0 0 4px; text-indent: 0; font-size: 0.95em; } /* Full width of the box, below both columns. */ .song-buttons { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 10px; } .song-buttons .buy-button { flex: 1 1 140px; margin-top: 0; } /* An empty href means the link has nowhere to go yet. */ a.buy-button[href=""] { display: none; } /* Three buttons - BUY, LISTEN and WATCH - fit a wide row, but as the panel narrows the third wraps alone and sits full width beside a pair of halves. Below 580px, the same point at which the song box itself reflows, every button takes its own row so they stack evenly instead. */ @container content (max-width: 580px) { .song-buttons .buy-button { flex: 1 1 100%; } } /* ---- Lyrics toggle ---- */ .song-lyrics { margin: 0 0 10px; } .song-lyrics summary { cursor: pointer; display: inline-block; padding: 4px 0; font-weight: bold; color: var(--link); list-style: none; } .song-lyrics summary::-webkit-details-marker { display: none; } /* Own marker, so it matches the dropdown carets in the nav. */ .song-lyrics summary::before { content: "\25B8\00a0"; } .song-lyrics[open] summary::before { content: "\25BE\00a0"; } .song-lyrics summary:hover { color: var(--accent); } .lyrics-body { padding: 8px 0 4px 18px; line-height: 150%; } /* The "(previously released)" tag is a link back to the album the track came from. It keeps the green of the status it is reporting, so the colour still reads as a status rather than a link, and only turns to the site's magenta on hover. The arrow is what tells you it is clickable at rest. */ .album-link { text-decoration: none; } .album-link::after { content: "\00a0\2197"; font-size: 0.85em; } .album-link, .album-link .highlightprevrelease { color: var(--previous); } .album-link:hover, .album-link:hover .highlightprevrelease { color: var(--accent); text-decoration: none; } /************************************************************************************ ALBUM BOX The song box in album proportions. Cover on the left at 260px, the release details beside it, track listings full width underneath so they read as lists rather than as a squeezed column. *************************************************************************************/ .album-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 15px; margin-bottom: 20px; border: 1px var(--accent) solid; border-radius: var(--radius); background: var(--page); } .album-cover { flex: none; } .album-details { flex: 1 1 240px; min-width: 0; } .album-details p { margin: 0 0 6px; text-indent: 0; } /* Full width of the box, below both columns. */ .album-tracks { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 20px; } .album-tracks > div { flex: 1 1 200px; } .album-tracks ul { margin: 4px 0 0; padding: 0; list-style: none; } .album-tracks li { margin: 0; padding: 2px 0; font-size: 1em; border: none; } .album-buttons { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 10px; } .album-buttons .buy-button { flex: 1 1 140px; margin-top: 0; } /************************************************************************************ LYRICS PAGE One section per song. Reuses the discography's song box for cover and credits, minus the buy buttons - this page is for reading, not buying. The title links across to the matching discography row. *************************************************************************************/ .lyric-entry { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .lyric-entry h2 { margin-bottom: .3em; } .lyric-entry .lyrics-body { padding-left: 0; } /* On the lyrics page the box goes vertical and floats, so the words wrap around it the way the old page did. Cover on top, credits under, buttons at the foot. */ .lyric-entry .song-box { float: left; flex-direction: column; width: 300px; margin: 0 20px 15px 0; } .lyric-entry .song-box .cover-slot, .lyric-entry .song-box .song-credits, .lyric-entry .song-box .song-buttons { flex: 1 1 100%; width: 100%; } .lyric-entry .song-box .song-buttons { flex-direction: column; } /* In a column the buttons inherit flex-grow from the row layout and stretch to fill the leftover height. Size them to their content instead. */ .lyric-entry .song-box .song-buttons .buy-button { flex: 0 0 auto; } .lyric-entry .song-box .release-cover { width: 100%; } /* Clear the float so the next song does not ride up beside the last one. */ .lyric-entry::after { content: ""; display: block; clear: both; } /* Too narrow to wrap text beside it - centre the box instead, same as the discography boxes do. */ @container (max-width: 620px) { .lyric-entry .song-box { float: none; margin: 0 auto 15px; } } .lyric-offsite { color: var(--caption); font-style: italic; } /* Small explanatory aside sitting under a paragraph - same disclosure pattern as the lyrics toggles, quieter styling. */ .aside-note { margin: 0 0 20px; } .aside-note summary { cursor: pointer; display: inline-block; padding: 4px 0; color: var(--link); font-weight: bold; font-size: 0.9em; list-style: none; } .aside-note summary::-webkit-details-marker { display: none; } .aside-note summary::before { content: "\25B8\00a0"; } .aside-note[open] summary::before { content: "\25BE\00a0"; } .aside-note summary:hover { color: var(--accent); } .aside-note p { margin: 4px 0 0 18px; text-indent: 0; font-size: 0.95em; color: var(--caption); } /************************************************************************************ SIDEBAR SEARCH AND RECENT POSTS One box at the top of the sidebar holding two things that work differently. The search form is written by hand in includes/sidebar.php and posts to /search/, so it is on every page whether or not the blog exists. The RECENT POSTS list under it is includes/recent-posts.html, generated by the WordPress theme every time a post changes, and absent entirely when there are no posts. These rules live here rather than in the blog theme's stylesheet because the twelve static pages need them and never load that stylesheet. Titles wrap and the date sits under each one on its own line, because the sidebar is about 210px wide at its narrowest and a date beside a title would leave no room for the title. *************************************************************************************/ .blogfeed-heading { margin: 18px 0 5px; padding-top: 14px; border-top: 1px solid var(--rule); } .blogfeed { list-style: none; margin: 0; padding: 0; } .blogfeed li { border-bottom: 1px solid var(--rule); padding: 6px 0; } .blogfeed li:last-child { border-bottom: 0; } .blogfeed a { font-weight: bold; } .blogfeed-date { display: block; font-size: 0.85em; color: var(--muted); } .blogfeed-empty { color: var(--caption); font-style: italic; } /* Input and button share a row while there is room and wrap when there is not, the same way the two body columns do. No breakpoint decides it. */ .blogsearch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } /* The label is for screen readers; the placeholder carries it visually. */ .blogsearch-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .blogsearch input[type="search"] { flex: 1 1 110px; min-width: 0; box-sizing: border-box; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--page); color: var(--body); padding: 5px 8px; font: inherit; } .blogsearch button { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel-dark); color: var(--link); padding: 5px 14px; font: inherit; font-weight: bold; cursor: pointer; } .blogsearch button:hover { background: var(--accent); color: var(--heading); } /************************************************************************************ SEARCH RESULTS The /search/ page. It searches the twelve static pages and the blog together, from one index each - includes/site-index.json, rebuilt whenever a page is newer than it, and includes/blog-index.json, written by WordPress whenever a post changes. The list is an
    because the order is the ranking and means something. The numbers are hidden because a visitor does not need to be told they are reading result four. *************************************************************************************/ .searchresults { list-style: none; margin: 25px 0 0; padding: 0; } .searchresults li { border-top: 1px solid var(--rule); padding: 15px 0; } .searchresult-title { display: block; font: bold 20px/125% Arial, Helvetica, sans-serif; } .searchresult-kind { display: block; font-size: 0.85em; font-style: italic; color: var(--muted); margin: 2px 0 6px; } .searchresult-snippet { margin: 0; text-indent: 0; color: var(--caption); } /* The browser's default is black on bright yellow, which on this site reads as a hole punched in the page. Magenta ground, white text - the same pairing as the current page number in the pagination. */ .searchresults mark, #content mark { background: var(--accent); color: var(--heading); padding: 0 2px; border-radius: 2px; } /* The full-width form at the top of the results page, as opposed to the narrow one in the sidebar. */ .sitesearch { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; } .sitesearch-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sitesearch input[type="search"] { flex: 1 1 220px; min-width: 0; box-sizing: border-box; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--page); color: var(--body); padding: 8px 12px; font: inherit; font-size: 1.1em; } .sitesearch button { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel-dark); color: var(--link); padding: 8px 22px; font: inherit; font-size: 1.1em; font-weight: bold; cursor: pointer; } .sitesearch button:hover { background: var(--accent); color: var(--heading); } /* Shared with the blog's own pagination, which is why these are here rather than in the theme stylesheet. */ .pagination { display: flow-root; margin: 30px 0 0; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pagination .page-numbers { display: inline-block; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel-dark); padding: 4px 11px; text-decoration: none; font-weight: bold; } .pagination .page-numbers.current { background: var(--accent); color: var(--heading); } .pagination .page-numbers.dots { border-color: transparent; background: none; } /************************************************************************************ SIDEBAR RELEASE BOXES Each recent release gets the same bordered-box treatment as the merchandise and discography entries, just sized for the sidebar width. Cover full-width, title, one-line description, then BUY and LISTEN buttons stacked below. *************************************************************************************/ .sidebar-releases { display: flex; flex-direction: column; gap: 20px; } .sidebar-release { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--page); padding: 10px; text-align: center; } .sidebar-release img { width: 100%; height: auto; display: block; margin: 0 auto 8px; } .sidebar-release-title { font-weight: bold; color: var(--heading); margin: 0 0 4px; text-indent: 0; font-size: 0.9em; } .sidebar-release-desc { color: var(--caption); margin: 0 0 10px; text-indent: 0; font-size: 0.85em; } .sidebar-release-buttons { display: flex; flex-direction: column; gap: 6px; } .sidebar-release-buttons .buy-button { /* The box already has 10px padding, and the button carries its own border. Without border-box the two are added to 100% and the button overhangs. */ box-sizing: border-box; width: 100%; margin-top: 0; } /************************************************************************************ TOUR DATES Guerrilla performances are marked with an asterisk and explained by the legend at the foot of the list. The asides in brackets are the band's own commentary, so they sit apart from the date itself. *************************************************************************************/ #gigs { list-style: none; margin-left: 0; padding-left: 0; } #gigs li { /* #content li sets 1.4em for short in-article lists. Forty-six dated entries is a table of data, not a list of points - it wants body size. */ font-size: 1em; margin: 0 0 6px; padding: 4px 0 4px 24px; text-indent: -24px; border-top: solid 1px var(--rule); } /* The asterisk carries the meaning, so it needs to be visible at a glance. */ .gig-mark { color: var(--accent); font-weight: bold; } .gig-note { color: var(--label); font-style: italic; } .gig-legend { text-indent: 0; margin-top: 20px; font-size: 0.9em; color: var(--caption); } /************************************************************************************ SIDEBAR *************************************************************************************/ /* Transparent by default - the brick shows through, and the magenta edge does the work the panel colour used to. The text carries its own drop shadow, so it holds up over the photograph. */ .widget { background: none; margin: 0 0 30px; padding: 10px 20px; } /* Except the social row: the icons need something solid under them. */ .widget-social { background: var(--panel) url(images/layout/navi.png) no-repeat left top; background-size: 100% 100%; } .widgettitle { margin: 0 0 5px; } /* Release covers are a fixed 300px, so once the sidebar is wider than that they sit off to the left. Scoped to the sidebar: the mastheads in the content panel already fill their width and need no centring. */ .widget .post-image { text-align: center; } .widget ul { margin: 0; } .widget li { margin: 0; padding: 6px 0; list-style: none; clear: both; border-top: solid 1px var(--rule); } /* Empty list items are placeholders left in the markup to make adding a new entry easier. Without this they still draw their top border and padding, so each one shows up as a blank ruled row. */ li:empty { display: none; } /* Twelve icon boxes, each the same shell as a BUY/LISTEN/WATCH button so the whole site reads as one set of controls. The glyphs are masked, not coloured: a mask takes its colour from the text, so one rule flips every icon on hover. */ .social-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .social-link { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px var(--accent) solid; border-radius: var(--radius); background: linear-gradient(-90deg, var(--panel), var(--panel-edge)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4); color: var(--link); text-decoration: none; } /* These are the only icon-only controls on the site, with no label to carry the hover. So the two colours trade places: cyan glyph on a magenta edge becomes a magenta glyph on a cyan edge. */ .social-link:hover, .social-link:focus { border-color: var(--link); color: var(--accent); background: linear-gradient(-90deg, var(--panel-dark), var(--panel-lit)); text-decoration: none; } .social-link::before { content: ""; width: 26px; height: 26px; flex: none; background: currentColor; -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-repeat: no-repeat; } .social-facebook::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); } .social-instagram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); } .social-x::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E"); } .social-snapchat::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E"); } .social-tiktok::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); } .social-tumblr::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E"); } .social-youtube::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); } .social-vimeo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z'/%3E%3C/svg%3E"); } .social-bandcamp::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M0 18.75l7.437-13.5H24l-7.438 13.5H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M0 18.75l7.437-13.5H24l-7.438 13.5H0z'/%3E%3C/svg%3E"); } .social-linkedin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M5.35 3.25a2.1 2.1 0 1 1 0 4.2 2.1 2.1 0 0 1 0-4.2zM3.55 9.2h3.6v11.6h-3.6zM9.6 9.2h3.6v1.7c.7-1.2 1.9-1.9 3.3-1.9 2.6 0 4.1 1.7 4.1 4.4v7.4h-3.6v-6.9c0-1.4-.6-2.1-1.7-2.1-1.2 0-2.1.8-2.1 2.2v6.8H9.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M5.35 3.25a2.1 2.1 0 1 1 0 4.2 2.1 2.1 0 0 1 0-4.2zM3.55 9.2h3.6v11.6h-3.6zM9.6 9.2h3.6v1.7c.7-1.2 1.9-1.9 3.3-1.9 2.6 0 4.1 1.7 4.1 4.4v7.4h-3.6v-6.9c0-1.4-.6-2.1-1.7-2.1-1.2 0-2.1.8-2.1 2.2v6.8H9.6z'/%3E%3C/svg%3E"); } .social-linktree::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z'/%3E%3C/svg%3E"); } .social-hyperfollow::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); } /************************************************************************************ FORMS *************************************************************************************/ /* border-box, so the 222px includes the 1px borders and the 10px padding: 222 - 2 - 20 = exactly 200px inside, which is the width of the cover art. Cover and buttons therefore match, and share the same margin from the edge. The old 215px was chosen to fit CD Baby's fixed 211px widget, which no longer exists. */ fieldset { width: 222px; max-width: 100%; box-sizing: border-box; padding: 10px; float: left; margin: 0 15px 15px 0; border: 1px var(--accent) solid; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: var(--muted); text-align: center; } /* Same behaviour as the floated captions: once the content panel is narrow enough that the boxes stack anyway, they stop floating and centre. This block MUST sit after the rule above - a container query adds no specificity, so an earlier one would simply lose to it. */ @container content (max-width: 580px) { fieldset { float: none; margin: 0 auto 15px; } } legend { font-size: 0.9em; color: var(--heading); font-weight: bold; } /* The form was built for a 250px sidebar, where width:100% is sensible. In the content panel that same rule would stretch the fields to ~1000px, which is both ugly and hard to read across. Cap it at a comfortable form width. */ .contact-form { max-width: 32em; margin-inline: auto; } /* Roomier than the sidebar copy, since resizing is switched off and this panel has the space. */ .contact-form textarea { height: 170px; } .contact-form label { display: inline-block; margin-top: 10px; } .contact-form #sendbutton { display: inline-flex; width: auto; min-width: 12em; margin-top: 16px; cursor: pointer; font-family: inherit; font-size: 1em; } /* Focus ring, in the site's own magenta rather than the browser's default white/blue. Never remove it outright - it is the only thing telling a keyboard user where they are on the page. */ input:focus, textarea:focus, #sendbutton:focus, #nav-toggle-label:focus, #main-nav .has-sub > span:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* Honeypot wrapper. Positioned off-screen rather than display:none, because some bots skip fields that are outright hidden. People never see it; bots fill it in and get quietly dropped. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } label { font-weight: bold; text-shadow: var(--depth); } input, textarea { width: 100%; /* Without this, width:100% plus the padding below makes every field ~8px wider than its container, so the fields overflow to the right and appear to stop shrinking. */ box-sizing: border-box; color: var(--page); border: none; padding-left: .5em; border-radius: 9px; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } /* Browsers ship "resize: both" on textareas. Off here by preference - the box below is given extra height instead, so there is no need to drag it. */ textarea { resize: none; } input { height: 27px; } textarea { height: 110px; } /* Search form. Currently commented out of every page; kept for when it is implemented. */ #searchform { position: absolute; right: 10px; bottom: 6px; z-index: 100; width: 160px; } #searchform #s { width: 140px; float: right; background: var(--muted); border: none; padding: 6px 10px; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); transition: width .7s; } input[type=search] { -webkit-appearance: none; outline: none; } /************************************************************************************ RELEASE BOXES A release box is a fieldset from the block above - the same 215px slab, the same magenta edge, the same float-then-centre behaviour. Only the inside is new. The buttons are deliberately not new objects. They are the nav bar and the MENU button at a smaller size: dark slab, magenta edge, soft corner, inset highlight, cyan label going magenta on hover. Nothing here introduces a colour or a shape the site did not already have. This replaces the old CD Baby anchors, which drew the cover and a shopping cart as two background images hotlinked from cdbaby.com. The store closed in March 2020, so those links went nowhere and the images sat on servers with no reason to stay up. A background image is also not content: it has no alt text, it does not print, and it is not indexed. The cover is a real now, and the copies in images/release_covers/ were already on disk. *************************************************************************************/ /* display:block kills the descender gap under the image; the auto margins matter only if a cover is ever narrower than the box it sits in. */ /* Width comes from here; height follows the image's own proportions, so a square single and a portrait cassette sleeve both sit 200px wide and keep their shape. The width/height attributes in the markup carry each file's REAL dimensions - the browser only reads them to work out the ratio and reserve the right space before the image arrives. */ .release-cover { display: block; margin: 0 auto; width: 200px; height: auto; } /* Albums get more weight than a single track. */ .album-box .release-cover { width: 260px; } /* Two buttons rather than one, so neither destination has to be guessed at. Each is its own link - the cover is not clickable, because a picture cannot tell you whether it leads to a store or a player. */ .buy-button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; padding: 8px 10px; border: 1px var(--accent) solid; border-radius: var(--radius); background: linear-gradient(-90deg, var(--panel), var(--panel-edge)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4); color: var(--link); font-weight: bold; text-shadow: var(--depth); text-decoration: none; } /* The general a:hover underline would strike a line through the icon and the label both. The colour shift carries the hover on its own. */ .buy-button:hover { border-color: var(--link); color: var(--accent); background: linear-gradient(-90deg, var(--panel-dark), var(--panel-lit)); text-decoration: none; } /* Masked, not coloured. A coloured SVG cannot follow currentColor, so the icon would stay cyan while the label went magenta. A mask takes its colour from the text, so the two move together. */ .buy-button::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat; } .buy-button.stream::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E") center/contain no-repeat; } /* Paper plane, drawn the same way, for the contact form's submit button. */ .buy-button.send::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat; } /* A screen with a play triangle in it. The plain .stream triangle already means "this plays"; on a song row WATCH and LISTEN sit side by side, and two identical triangles would not tell them apart. The screen says video, the triangle says play. */ .buy-button.watch::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpolygon points='10 9 16 12 10 15' fill='%23000000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpolygon points='10 9 16 12 10 15' fill='%23000000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; } /* For a button that wants the label to carry it alone. */ .buy-button.nocart::before { display: none; } /************************************************************************************ COVER PLACEHOLDERS The image and the placeholder are siblings; exactly one of them is ever shown. An with no src attribute at all - not src="" - hides itself and reveals the placeholder beside it. Add the src and it flips back, with nothing to uncomment and nothing to remember. Masked rather than coloured, so the artwork follows --accent the way the buy and stream icons do. The SVGs are black-on-transparent stencils; the colour comes from here. *************************************************************************************/ [class^="cover-placeholder"] { display: none; width: 200px; height: 200px; background-color: var(--accent); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } img.release-cover:not([src]) { display: none; } img.release-cover:not([src]) + [class^="cover-placeholder"] { display: block; } .cover-placeholder1 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EART DEPARTMENT%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EON STRIKE%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EART DEPARTMENT%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EON STRIKE%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder2 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EPENDING%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3ESINCE 1989%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EPENDING%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3ESINCE 1989%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder3 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ETHE BUDGET%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EWENT TO GANJA%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ETHE BUDGET%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EWENT TO GANJA%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder4 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EYOU%26%2339;RE NOT%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EMISSING MUCH%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EYOU%26%2339;RE NOT%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EMISSING MUCH%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder5 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22128%22 font-size=%2217%22 font-weight=%22bold%22%3EASK NED%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22128%22 font-size=%2217%22 font-weight=%22bold%22%3EASK NED%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder6 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ETRUST US, IT%26%2339;S%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EBETTER THIS WAY%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ETRUST US, IT%26%2339;S%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EBETTER THIS WAY%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder7 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ECOMING SOON,%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3ESOON IS RELATIVE%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ECOMING SOON,%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3ESOON IS RELATIVE%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder8 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22128%22 font-size=%2217%22 font-weight=%22bold%22%3EWE%26%2339;LL GET TO IT%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22128%22 font-size=%2217%22 font-weight=%22bold%22%3EWE%26%2339;LL GET TO IT%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder9 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22128%22 font-size=%2217%22 font-weight=%22bold%22%3EERROR 420%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22128%22 font-size=%2217%22 font-weight=%22bold%22%3EERROR 420%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder10 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EWHY ARE YOU%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3ESO NOSEY%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EWHY ARE YOU%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3ESO NOSEY%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder11 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EUSE YOUR%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EIMAGINATION%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3EUSE YOUR%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EIMAGINATION%3C/text%3E%3C/g%3E%3C/svg%3E"); } .cover-placeholder12 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ENOTHING TO SEE%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EHERE, MOVE ALONG%3C/text%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 width=%22200%22 height=%22200%22%3E%3Cg font-family=%22Arial, Helvetica, sans-serif%22 text-anchor=%22middle%22 fill=%22%23000000%22%3E%3Ctext x=%22100%22 y=%2278%22 font-size=%2221%22 font-weight=%22bold%22 letter-spacing=%221%22%3ENO COVER ART%3C/text%3E%3Crect x=%2245%22 y=%2290%22 width=%22110%22 height=%222%22/%3E%3Ctext x=%22100%22 y=%22118%22 font-size=%2215%22 font-weight=%22bold%22%3ENOTHING TO SEE%3C/text%3E%3Ctext x=%22100%22 y=%22139%22 font-size=%2215%22 font-weight=%22bold%22%3EHERE, MOVE ALONG%3C/text%3E%3C/g%3E%3C/svg%3E"); } /************************************************************************************ GALLERY As many columns as will fit, recalculated live. The old .gallery-row wrappers existed only to clear floats and have been removed from the markup. *************************************************************************************/ #MainContent { background: transparent; padding-bottom: 30px; } #Gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } #Gallery div.gallery-item a { display: block; height: 100%; border: 1px solid #3c3c3c; } #Gallery div.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; } /************************************************************************************ VIDEO The actual ratio, rather than min-height guesses at two breakpoints. *************************************************************************************/ .video iframe, .video embed, .video object { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* Spacing between video entries. The .video wrapper above already handles the player itself. */ .video-item { margin-bottom: 30px; } .video-item h2 { margin-bottom: .3em; } /************************************************************************************ VIDEO BOXES Each video is a fieldset, the same bordered slab as the merchandise releases, with the title in the legend. Two per row, growing to share whatever the row offers. Write-ups vary wildly in length, so boxes in a row end up different heights. The border is what makes that read as deliberate rather than broken - a visible edge around each one says "these are separate things", which alignment cannot do. The leftover space then gets a tiled animated gif via .video-filler, so a stretched box gains something rather than sitting empty. *************************************************************************************/ .video-list { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 30px; } /* Overrides the merchandise fieldset: wider, no float, left-aligned text, and a flex column so the filler below can absorb the stretch. */ .video-item { flex: 1 1 340px; min-width: 0; max-width: 100%; float: none; margin: 0; padding: 12px; text-align: left; font-weight: normal; background: var(--panel); display: flex; flex-direction: column; } .video-item legend { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: var(--link); padding: 0 6px; font-size: 0.95em; } .video-item .video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; } .video-writeup { margin: 10px 0 12px; text-indent: 0; font-size: 0.92em; line-height: 1.5; } .video-writeup p { margin: 0 0 .7em; text-indent: 0; } .video-writeup p:last-child { margin-bottom: 0; } /* Zero height when the box is at its natural size; grows to fill whatever a taller neighbour forces on it. The gif tiles in both directions, so a small one repeats to cover however much gap there is. */ .video-filler { flex: 1 1 auto; min-height: 0; margin-bottom: 12px; /* Half opacity so the white linework reads as grey against the panel behind it - present, but not competing with the video or the writing. One number to change if they want to be louder or quieter. */ opacity: .5; } /* Twelve fillers, assigned at random per box. Each tiles in both directions, so a small gif repeats to cover however much gap the stretch leaves. */ .video-filler1 { background: url(images/fillers/filler1.gif) repeat; } .video-filler2 { background: url(images/fillers/filler2.gif) repeat; } .video-filler3 { background: url(images/fillers/filler3.gif) repeat; } .video-filler4 { background: url(images/fillers/filler4.gif) repeat; } .video-filler5 { background: url(images/fillers/filler5.gif) repeat; } .video-filler6 { background: url(images/fillers/filler6.gif) repeat; } .video-filler7 { background: url(images/fillers/filler7.gif) repeat; } .video-filler8 { background: url(images/fillers/filler8.gif) repeat; } .video-filler9 { background: url(images/fillers/filler9.gif) repeat; } .video-filler10 { background: url(images/fillers/filler10.gif) repeat; } .video-filler11 { background: url(images/fillers/filler11.gif) repeat; } .video-filler12 { background: url(images/fillers/filler12.gif) repeat; } /* Pinned to the bottom, so the buttons line up across a row whatever the write-ups above them do. */ .video-item .buy-button { margin-top: auto; } /* One per row once the panel is too narrow for two to be worth reading. */ @container content (max-width: 760px) { .video-item { flex: 1 1 100%; } } /************************************************************************************ AUDIO PAGE One song per section: cover image, HTML5 player, download link. The player stretches full width of the content column. MP3 sources are commented out until the files are available. *************************************************************************************/ /* Two per row. These entries are simpler and far more uniform in height than the discography rows - cover, player, download link and nothing else - so they sit side by side without the ragged edges a two-column discography would have had. */ .audio-list { display: flex; flex-wrap: wrap; gap: 25px; } .audio-item { flex: 1 1 300px; min-width: 0; padding: 15px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--page); text-align: center; } .audio-item h2 { margin-bottom: .5em; font-size: 1.2em; } .audio-item img { display: block; margin: 0 auto 12px; width: 100%; max-width: 260px; height: auto; } .audio-item audio { width: 100%; margin-bottom: 8px; } .audio-item p { text-indent: 0; margin: 0; } /************************************************************************************ FOOTER *************************************************************************************/ #footer { clear: both; color: #CCCCCC; font-size: 85%; } #footer a { color: var(--heading); } /* Group labels in the flat footer index - structure, not links. */ .footer-group { font-weight: bold; } /************************************************************************************ MENU BUTTON The only breakpoint in this file. Seven labels hold one row down to about 830px; below that the bar becomes a button. Sub-items sit nested and indented inside the panel, always visible - there is no hover on a phone. *************************************************************************************/ /************************************************************************************ STICKY NAV The nav sits outside #header as a direct child of #pagewrap, because sticky only sticks within its own parent - inside the header it would unstick the moment the header scrolled past. Desktop only. Below 820px the nav is the MENU button, and a bar pinned to the top of a phone screen costs vertical space where there is least of it. The open menu also pushes content down, which does not work while pinned. scroll-padding-top is what stops every in-page anchor landing underneath the bar - the lyrics page alone has fifty links into discography rows. *************************************************************************************/ html { scroll-padding-top: 4.5em; } nav { position: sticky; top: 0; /* Above the content, below the dropdowns it opens. */ z-index: 300; } /* Back to top. Sits outside #main-nav so it stays visible when the mobile menu is collapsed, and is absolutely positioned so it lands on the bar in both states rather than beside it. #top needs no anchor element - the HTML spec defines that fragment as the top of the document. */ /* No position:relative here - it would override position:sticky below, and sticky already establishes the containing block the button anchors to. */ #nav-top { position: absolute; top: 0; right: 0; z-index: 350; display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 15px; box-sizing: border-box; color: var(--link); font-weight: bold; font-size: 0.9em; text-decoration: none; text-shadow: var(--depth); } #nav-top:hover { color: var(--accent); } /* Smooth only for people who have not asked for less motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media screen and (max-width: 820px) { html { -webkit-text-size-adjust: none; } #nav-toggle-label { display: block; width: 100%; margin: 0 0 10px; padding: 14px 15px; box-sizing: border-box; cursor: pointer; font-weight: bold; font-size: 1.1em; color: var(--link); text-shadow: var(--depth); background: var(--panel); background: linear-gradient(-90deg, var(--panel), var(--panel-edge)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4); } #nav-toggle-label:hover { color: var(--accent); } /* Three bars when closed, an X when open. */ #nav-toggle-label span::before { content: "\2630"; } #nav-toggle:checked + #nav-toggle-label span::before { content: "\2715"; } /* Closed by default, and in normal flow so it pushes the page down instead of floating over it. */ #main-nav { display: none; width: 100%; margin: 0; /* Floats over the page rather than pushing it down - with the bar pinned, a panel in normal flow would slide the content out from under it. */ position: absolute; left: 0; right: 0; /* dvh, not vh: vh measures the screen as if the address bar were hidden, so a 100vh panel runs off the bottom and its last items are unreachable. Sixteen menu rows at a large reading size will outgrow a phone screen. */ max-height: calc(100dvh - 4.5em); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 6px 12px rgba(0,0,0,.5); } #nav-toggle:checked ~ #main-nav { display: block; } /* The bar itself, so content scrolling underneath does not show through. */ nav { background: var(--panel); margin-bottom: 10px; } /* Height of the MENU row, not the whole nav - the open panel is absolute and must not drag the button down with it. */ #nav-top { height: auto; top: 14px; } #main-nav li { display: block; margin: 0; border-top: 1px solid var(--rule); } #main-nav li:first-child { margin-left: 0; border-top: none; } #main-nav a { display: block; padding: 14px 15px; font-size: 1em; } /* Headings, not links - the sub-items below them are what you tap. */ #main-nav .has-sub > span { display: block; padding: 14px 15px; font-weight: bold; color: var(--heading); } /* No caret: nothing here opens or closes. */ #main-nav .has-sub > span::after { content: ""; } #main-nav .has-sub > ul { display: block; position: static; margin: 0; background: none; border: none; box-shadow: none; min-width: 0; } #main-nav .has-sub li a { padding: 14px 15px 14px 35px; } .widget { padding: 3% 4%; margin: 0 0 10px; } }