@charset "utf-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; height:auto; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } ul, li, p, img { font-family: 'Arial, Segoe UI', sans-serif!important; } /**/ body { background:#000; font-family: 'Bebas Neue', sansserif; } .f-center { margin:0 auto; width:100%; display: flex; } .fldr-c { flex-direction: column;} .v-center { align-items: center; justify-content: center; } .t-center { text-align: center; } /* HEADER */ header { box-shadow: inset 0 -3px 0 0 var(--color-theme); background: var(--color-bg); } header a { padding:1rem 0;} .cover { margin:2rem 1rem 0;} header, .band-header { color:var(--color-txt) } .band-header { padding:1rem 0;} .band-name { padding:0 0 1rem; font-size: 3rem;} .band-release { font-size: 2rem;} .band-release-type { font-size: 1.5rem;} #button-container { max-width:320px; display:flex; flex-direction: column; width:90%; margin:0 1rem; background: var(--color-txt); padding:1rem; border-radius:4px } #buttons { display:flex; flex-direction: column; row-gap: 1rem; } .btn-link { display:flex; flex-direction: row; width:100%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); border-radius:3px; background: transparent; overflow: clip; will-change: transform; } #buttons { container-type: inline-size; container-name: btn_links; } @container btn_links (width < 207px) { .btn-link { flex-direction:column; } .btn-icon, .btn-txt, .btn-cta-container { max-width:none!important; text-align:center; width:100%; margin:0 auto!important; } .btn-txt { height:auto!important; padding-bottom:.5rem!important; } } .btn-link, .btn-link * { transition:all .25s ease; } .btn-link span { display:flex; flex-direction: column; height:64px; justify-content: center;} .btn-icon { width:64px!important; /*background: orangered;*/} .btn-txt { width:100%; padding:0 .5rem; max-width: 106px; /*background: grey;*/} .btn-cta-container { width:100%; padding: 0.5rem; max-width: 120px; border-radius:0 3px 3px 0} .btn-cta { background: var(--color-bg); color:var(--color-txt); justify-content: center; align-items: center; border-radius:2px} .btn-icon { position: relative; display: inline-flex; flex-direction: column; margin: 0; max-width: 111px; width: clamp(20%, 2vw, 111px); height: clamp(60%, 6vw, 54px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* FOOTER */ footer { margin-top:4rem } #footer-mid { border-top: 2px solid var(--color-blue); padding: 3rem 0; color: #fff; background: var(--color-bg); } #credits-container { padding: 1rem 0; background: #090736; } #credits-info p, #credits-container p { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 0; text-align: center; } #credits-container p { padding: 0 1rem; margin: 0 auto 1rem; font-size: 1rem; color: var(--color-txt); } #btns-cta-credits img { margin: 1rem auto; max-width: 200px; opacity: 1; } #credits-container p:last-child { margin-top: .75rem; } #credits-info-bot a, #credits-info-bot a:visited { color: var(--color-theme); font-weight: bold; } /* BACKGROUND IMAGE */ .bg-image::before { content: ""; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; /*background-color: rgb(113, 122, 151);*/ background-color: var(--color-bg); opacity: 0.56; } .bg-image { position: fixed; width:100vw; height:100vh; min-height: 100vh; top:0; left:0; z-index: -1; /* Add the blur effect */ filter: blur(20px); -webkit-filter: blur(20px); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } /* CSS VARS + SVG-MASK-IMAGE STREAMING PLATFORM ICONS */ :root { --color-theme:#5e1f22; --color-bg: #000; --color-txt:#fff; /*AMAZON MUSIC */ --bg-color-amazon-music:orange; --url-mask-image-icon-amazon-music:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* APPLE MUSIC */ --url-mask-image-icon-apple-music:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* BANDCAMP */ --bg-color-bandcamp:#1DA0C3; --url-mask-image-icon-bandcamp:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* DEEZER */ --bg-color-deezer:#A238FF; --url-mask-image-icon-deezer:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* LAST.FM */ --bg-color-lastfm:rgb(186,0,0); --url-mask-image-icon-lastfm:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'>> /%3E%3C/svg%3E"); /* REVERBNATION */ --bg-color-reverbnation:deeppink; --url-mask-image-icon-reverbnation:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 160 50'> /%3E%3C/svg%3E"); /* SOUNDCLOUD */ --url-mask-image-icon-soundcloud:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* SPOTIFY */ --bg-color-spotify:#1DB954; --url-mask-image-icon-spotify:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* TIDAL */ --bg-color-tidal:var(--color-bg); --url-mask-image-icon-tidal:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* YOUTUBE */ --bg-color-youtube:red; --url-mask-image-icon-youtube:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); /* YOUTUBE MUSIC */ --url-mask-image-icon-youtube-music:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 50' style='enable-background:new 0 0 160 50;' xml:space='preserve'> /%3E%3C/svg%3E"); } .icon-amazon-music { -webkit-mask-image: var(--url-mask-image-icon-amazon-music); mask-image:var(--url-mask-image-icon-amazon-music); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-amazon-music); } .icon-apple-music { -webkit-mask-image: var(--url-mask-image-icon-apple-music); mask-image: var(--url-mask-image-icon-apple-music); -webkit-mask-position: center; mask-position: center; background: rgb(251,92,116); background: linear-gradient(144deg, rgba(251,92,116,1) 35%, rgba(250,35,59,1) 100%); } .icon-bandcamp { -webkit-mask-image: var(--url-mask-image-icon-bandcamp); mask-image: var(--url-mask-image-icon-bandcamp); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-bandcamp); } .icon-deezer { -webkit-mask-image: var(--url-mask-image-icon-deezer); mask-image:var(--url-mask-image-icon-deezer); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-deezer); } .icon-lastfm { -webkit-mask-image: var(--url-mask-image-icon-lastfm); mask-image: var(--url-mask-image-icon-lastfm); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-lastfm); } .icon-reverbnation { -webkit-mask-image: var(--url-mask-image-icon-reverbnation); mask-image: var(--url-mask-image-icon-reverbnation); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-reverbnation); } .icon-soundcloud { -webkit-mask-image: var(--url-mask-image-icon-soundcloud); mask-image: var(--url-mask-image-icon-soundcloud); -webkit-mask-position: center; mask-position: center; background: #f50; background: linear-gradient(#f70, #f30); } .icon-spotify { -webkit-mask-image: var(--url-mask-image-icon-spotify); mask-image: var(--url-mask-image-icon-spotify); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-spotify); } .icon-tidal { -webkit-mask-image: var(--url-mask-image-icon-tidal); mask-image: var(--url-mask-image-icon-tidal); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-tidal); } .icon-youtube { -webkit-mask-image: var(--url-mask-image-icon-youtube); mask-image: var(--url-mask-image-icon-youtube); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-youtube); } .icon-youtube-music { -webkit-mask-image: var(--url-mask-image-icon-youtube-music); mask-image: var(--url-mask-image-icon-youtube-music); -webkit-mask-position: center; mask-position: center; background: var(--bg-color-youtube); } @media (hover: hover) { .btn-link:hover, .btn-link:hover * {transition:all .25s ease;} .btn-link:hover { background: var(--color-bg); } .btn-link:hover .btn-icon { background: var(--color-txt); } .btn-link:hover .btn-txt, .btn-link:hover .btn-cta { color: var(--color-txt); } .btn-link:hover .btn-cta { background: var(--color-txt); color:var(--color-bg) } .btn-link:hover:has(.icon-amazon-music) { box-shadow: inset 0 0 0 1px var(--bg-color-amazon-music); background: var(--bg-color-amazon-music); } .btn-link:hover:has(.icon-apple-music) { box-shadow: inset 0 0 0 1px rgb(251,92,116); background: rgb(251,92,116); background: linear-gradient(144deg, rgba(251,92,116,1) 35%, rgba(250,35,59,1) 100%); } .btn-link:hover:has(.icon-bandcamp) { box-shadow: inset 0 0 0 1px var(--bg-color-bandcamp); background: var(--bg-color-bandcamp); } .btn-link:hover:has(.icon-deezer) { box-shadow: inset 0 0 0 1px var(--bg-color-deezer); background: var(--bg-color-deezer); } .btn-link:hover:has(.icon-lastfm) { box-shadow: inset 0 0 0 1px var(--bg-color-lastfm); background: var(--bg-color-lastfm); } .btn-link:hover:has(.icon-deezer) { box-shadow: inset 0 0 0 1px var(--bg-color-deezer); background: var(--bg-color-deezer); } .btn-link:hover:has(.icon-reverbnation) { box-shadow: inset 0 0 0 1px var(--bg-color-reverbnation); background: var(--bg-color-reverbnation); } .btn-link:hover:has(.icon-soundcloud) { box-shadow: inset 0 0 0 1px #f50; background: #f50; background: linear-gradient(#f70, #f30); } .btn-link:hover:has(.icon-spotify) { box-shadow: inset 0 0 0 1px var(--bg-color-spotify); background: var(--bg-color-spotify); } .btn-link:hover:has(.icon-youtube, .icon-youtube-music) { box-shadow: inset 0 0 0 1px var(--bg-color-youtube); background: var(--bg-color-youtube); } }