/*** The new CSS reset - version 1.8.4 (last updated 14.2.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 */ *: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%; } /* 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; } /* some fixes */ html { /* prevents page jumping when there is no scroll-bar by default */ overflow-y: scroll; overflow-x: hidden; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* overflow: visible; */ } /* apply this class toclear floats */ .group:after { content: ""; display: table; clear: both; } html { background-color: #83c2b9; } html, body { min-height: 100%; /* padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); */ /* height: 100%; */ } body { font-size: 16px; background-color: #e6e6e6; font-family: 'Karla', sans-serif; color: #111; } body.elscrt-ware-promo { background-image: url(/site/templates/styles/promo-only-angled.png); background-size: 628px 514px; background-color: #e3e3e3; } body.big-splash-loading #big-loading-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity ease-in-out .25s; background-color: #8c9896; z-index: 9999; } body #big-loading-splash #big-loading-splash-loading-circle { position: absolute; width: 64px; height: 64px; left: calc(100% - 96px); top: calc(32px); } body #big-loading-splash #big-loading-splash-loading-circle img { -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } body #big-loading-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity ease-in-out .25s; background-color: #8c9896; z-index: 9999; opacity: 0 } body #big-loading-splash.done { z-index: -9999; width: 0; height: 0; } .bold { font-weight:bold; } .horizontal-rule { display: block; line-height: 1.5em; margin-top: 1.5em; } .lowercase { text-transform: lowercase; } .big-splash-visible .header { /* opacity: 0; */ } .big-splash-visible .header { /* position: absolute; */ } #big-splash { /* position: relative; */ background-image: url("/site/templates/styles/pyrofon-wallpaper-tile.jpg"); background-size: 492px auto; /* 492px native */ background-position: center bottom; height: 100vh; width: 100%; transition: height ease-in-out 0.5s; } .big-splash-arrows { width: 70px; height: 84px; position: absolute; left: 50%; margin-left: -35px; bottom: 20px; opacity: 0; transition: opacity ease-in-out 3s; } body.big-splash-visible .big-splash-arrows.active { opacity: 1; } .big-splash-arrows path { stroke: #ffffff; fill: transparent; stroke-width: 3px; animation: big-spash-arrow 2s infinite; -webkit-animation: big-spash-arrow 2s infinite; } @keyframes big-spash-arrow { 0% {opacity:0} 40% {opacity:1} 80% {opacity:0} 100% {opacity:0} } @-webkit-keyframes big-spash-arrow /*Safari and Chrome*/ { 0% {opacity:0} 40% {opacity:1} 80% {opacity:0} 100% {opacity:0} } .big-splash-arrows path.a1 { animation-delay:-1s; -webkit-animation-delay:-1s; /* Safari 和 Chrome */ } .big-splash-arrows path.a2 { animation-delay:-0.5s; -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */ } .big-splash-arrows path.a3 { animation-delay:0s; -webkit-animation-delay:0s; /* Safari 和 Chrome */ } #small-splash { /* position: relative; */ background-image: url("/site/templates/styles/pyrofon-wallpaper-tile.jpg"); background-size: 492px auto; /* 492px native */ background-position: center bottom; height: 24px; width: 100%; } #big-splash-logo { position: absolute; top: 50%; left: 50%; width: 40vh; line-height: 1px; /* max-width: 320px; */ filter: drop-shadow(1px 1px 0.5px rgb(0, 0, 0,.6)); margin: -20vh -20vh; } #head-wrap { z-index: 999; position: -webkit-sticky; position: sticky; top: 0; background-color:#393939; width: 100%; /* height: 20vh; max-height: 120px; */ padding: 0px; } #header { background-color: rgba(35, 35, 35, 0); transition: background-color ease-in-out 0.1s; } #top-accent { background-image: url(/site/templates/styles/pyrofon-wallpaper-tile.jpg); background-size: 492px auto; background-position: center 0; height: 8px; width: 100%; } .header { position: relative; /* height: 20vh; */ /* max-height: 120px; width: 100%; */ /* padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); */ } #head-logo { display: inline-block; vertical-align: middle; opacity: 1; line-height: 1px; width: 80px; margin: 10px; max-width: 20vh; filter: drop-shadow(1px 1px 0.5px black); transition: opacity .5s ease; } .big-splash-visible #head-logo { opacity: 0; } #head-logo img { width: 100%; height: auto; } #head-menu { display: inline-block; /* position: absolute; */ float: right; height: 100%; padding: 26px 0; text-align: right; margin-right: 1.5em; } #head-menu a { position: relative; font-family: 'DM Mono', monospace; letter-spacing: 1px; font-weight: 500; font-size: 0.875em; /* line-height: 48px; */ height: 48px; /* top: 50%; */ /* margin-top: -24px; */ text-transform: uppercase; color: #eee; display: inline-block; vertical-align: middle; margin: 0 0.4285714285714286em; padding: 0 0.4285714285714286em; padding-top: 14px; } #head-menu a#head-menu-btn { display: none; padding-top: 2px; } #head-menu a#head-menu-btn svg { stroke: #eee; position: relative; height: 48px; line-height: 48px; padding: 10px 0 14px; vertical-align: middle; } #head-wrap svg.menu-burger { display: initial; } #head-wrap svg.menu-close { display: none; } #content, .artist-news { position: relative; max-width: 640px; width: 92%; padding-top: 2.75em; margin: 0 auto; } .artist-news { margin: 0 0; width: 100%; max-width: initial; } body.artist #content { max-width: initial; } /* .releases #content { width: 96%; } */ .sap { /* safe area padding */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } body.home #content { overflow: hidden; width: 100%; } body.blog-entry #content { width: 92%; max-width: 1200px; } body.home #content h3, body.release #content h3, body.blog-entry #content h3 { font-family: 'Eliza', serif; font-size: 2.25em; font-weight: 400; line-height: 1.333333333333333em; margin: 3em 0 0.666666666666666em; } body.artist .artist-news h3, body.artists h3 { font-family: 'Karla', serif; font-size: 1.25em; font-weight: 500; line-height: 1.2em; margin: 1.5em 0 0; } body.artists h3 a { border-bottom: 1.5px solid #83c2b9; transition: border-bottom ease-in-out 0.3s; } body.artists h3 a:hover { border-color:#ebae51; } #content p { line-height: 1.5em; margin: 1.5em 0; } body.artist #content .artist-news p { margin: initial; } #content p a { /* font-weight: 600; */ /* color: #55cfc1; */ color: #333; text-decoration: underline; text-decoration-color: #82c6be; transition: text-decoration-color ease-in-out 0.3s; } #content p a:hover { text-decoration-color: #ebae51; } #content p em { font-style: italic; } .entry { position: relative; } .home #content { max-width: initial; width: 94%; } .home .home-entries { margin: 0 4%; } .home .featured-release { margin-bottom: 4.5em; margin-top: 3em; } .home .featured-release figure { width: 48%; float: left; /* border: 0.75vw solid #fcfcfc; */ border-radius: 2px; /* box-shadow: 0 4px 4px 0 rgba(66, 66, 66, 0.04), 0 4px 12px 4px rgba(66, 66, 66, 0.08); */ overflow: hidden; transition: opacity ease-in-out 0.3s; } .home .featured-release figure:hover { opacity: .9; } .home #content h2, .blog #content h2, .contact #content h2, .members #content h2, .member #content h2 { font-family: 'Karla'; text-transform: uppercase; font-weight: 600; font-size: 1.5em; margin-bottom: 1.5em; color: #222; } .members #content h2, .member #content h2 { margin-top: 1.8333333333333333em; } .home .featured-release .featured-release-details { width: 48%; float: right; } .home .featured-release .featured-release-details .listen-buy-btn { text-transform: uppercase; border-bottom: 1.5px solid #83c2b9; transition: border-bottom ease-in-out 0.3s; } .home .featured-release .featured-release-details .listen-buy-btn:hover { border-bottom-color: #ebae51; } .home .featured-release .featured-release-details .featured-release-formats { font-size: 0.875em; margin-top: 3.428571428571429em; } .home .featured-release h4 { font-family: 'Karla', serif; font-size: 1.25em; font-weight: 500; line-height: 1.2em; } body.home #content .featured-release h3 { margin-bottom: 0; } body.home .home-entries h2:first-of-type, body.blog .entries h2:first-of-type { margin-bottom: 1em; margin-top: 12.5vw; padding: 0.5em 0; /* background-color: #c78c94; */ /* color: #eee; */ /* border-top: 2px solid #b7b7b7; */ border-bottom: 2px solid #c2858d; } body.blog h2:first-of-type { padding-top: 0; } .home .entry, .blog-entry .entry { /* background-image: linear-gradient(to right, rgba(156,156,156,1) 33%, rgba(255,255,255,0) 0%); */ /* background-position: top; */ /* background-size: 3px 1px; */ /* background-repeat: repeat-x; */ margin: 1.5em 0 4.5em; } .home .entry:first-child { margin-top: 4.5em; } .home .entry .img-frame, .blog-entry .entry .img-frame { width: 48%; float: left; margin-top: 1.5em; } .home .entry .video-link, .blog-entry .entry .video-link { } .home .entry .entry-content, .blog-entry .entry .entry-content { /* border-top: 1px dotted #555; */ width: 48%; float: right; } .home #content .entry .entry-content .entry-body p:first-child, .blog-entry #content .entry .entry-content .entry-body p:first-child { margin-top: 0; } .home .entry .entry-content .entry-meta, .blog-entry .entry .entry-content .entry-meta { /* background-image: linear-gradient(to right, rgba(156,156,156,1) 33%, rgba(255,255,255,0) 0%); background-position: top; background-size: 3px 1px; background-repeat: repeat-x; */ margin-top: 1.5em; } .home .entry .entry-content .entry-meta .entry-date, .blog-entry .entry .entry-content .entry-meta .entry-date { float: right; margin-top: 1px; } .home .entry .entry-content .entry-meta .tags, .blog-entry .entry .entry-content .entry-meta .tags { /* text-align: right; */ margin-right: 0; width: 48%; padding-right: 100px; position: absolute; top: 1.5em; left: 52%; } body.home #content .entry-content h3, body.blog-entry #content .entry-content h3 { margin-top: 1.5em; } .home .entry .entry-read-more a, .blog-entry .entry .entry-read-more a { text-transform: uppercase; border-bottom: 1.5px solid #83c2b9; transition: border-bottom ease-in-out 0.3s; } .artist-news .entry { background-color: white; margin: 1.5em 0; padding: 1.5em; } h4.entry-date, h4.artist-news-date { font-family: 'DM Mono', monospace; font-weight: 500; letter-spacing: 0.05em; font-size: 0.7291666em; text-transform: uppercase; line-height: 1.714285714285714em; margin-bottom: 1.714285714285715em; color: #777; } h4.artist-news-date { margin-bottom: initial; float: initial; font-size: 0.75em; text-transform: uppercase; line-height: 2em; } .entry-body { margin-top: 3em; max-width: 540px; } #footer { background-color: #83c2b9; color: #f2f2f2; text-align: center; padding: 1.5em; margin-top: 6em; } .foot-links { position: relative; width: 100%; } .foot-links a { font-weight: 500; font-size: 0.875em; line-height: 48px; height: 48px; margin: 0 0.4285714285714286em; padding: 0 0.4285714285714286em; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-family: 'DM Mono', monospace; } .foot-copyright { font-size: .75em; line-height: 1.333333333333333em; } .tags { margin-bottom: 1.5em; margin-right: 120px; } .tag { display: inline-block; /* font-family: 'DM Mono', monospace; */ /* font-weight: 500; */ font-size: 0.7291666em; line-height: 1.285714285714286em; color: #f2f2f2; /* background-color: #82c2bb; */ background-color: #aac0be; padding: 0.2142857142857143em 0.4285714285714286em; margin-right: 0.4285714285714286em; margin-bottom: 0.4285714285714286em; border-radius: 3px; } .tag.category { /* background-color: #bf8891; */ background-color: #c0aeb1; } .std-img { position: relative; display: block; height: 0; } .std-img img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } /* img { width: 100%; height: auto; line-height: 1px; vertical-align: top; } */ .iso-grid { opacity: 0; } .iso-grid.window-loaded { opacity: 1; transition: opacity .5s ease-in; } .iso-item { display: inline-block; width: 100%; /* height: 0; */ /* padding-bottom: 20%; */ margin: 0 0 10% 0; } body.releases #content { max-width: initial; } .iso-item .iso-item-image { position: relative; width: 100%; height: 0px; padding-bottom: 100%; background-color: rgb(0, 0, 0,.1); } .iso-item .iso-item-image { border-radius: 3px; overflow: hidden; } .iso-item-image img { z-index: 50; position: absolute; top: 0; left: 0; width: 100%; height: auto; } .iso-item-words { color: #333; line-height: 1.5em; font-size: 1em; padding-top: 0.375em; } .iso-item-words .iso-item-title { font-weight: 700; } .iso-item-words .iso-item-subtitle { } .iso-item-words .iso-item-detail { font-size: 0.75em; line-height: 1.33333333333333em; padding: .3333333333333em 0; font-weight: 700; color: #777; } .iso-item-release-type { font-family: 'DM Mono', monospace; text-transform: uppercase; font-weight: 500; font-size: 11px; line-height: 16px; padding: 1px 4px; letter-spacing: 1px; margin-right: 6px; line-height: 18px; /* margin-bottom: 0.4285714285714286em; */ border-radius: 2px; background-color: #aaa; color: #eee; } .release-format-separator { margin: 0 4px; } .iso-item-flag { z-index: 100; position: absolute; font-size: 12px; top: 1.5em; left: -4px; font-style: italic; padding: .25em .5em; background-color: #83c2b9; color: #eee; line-height: 1.5em; } .iso-item-flag:after { width: 0; height: 0; border-bottom: 4px solid #5e9b92; border-left: 4px solid transparent; position: absolute; left: 0; top: -4px; content: " "; } body.releases .iso-item-title { font-weight: 400; } body.releases .iso-item-subtitle { font-weight: 700; } /* body.release .blurb { position: relative; max-height: 2560px; overflow: hidden; transition: max-height ease-in-out 1s; } */ .lengthy { position: relative; overflow: hidden; max-height: 192px; mask-image: linear-gradient(to bottom, black 0%, transparent 99%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 99%); transition: max-height 1s ease-in-out, mask-image 0.5s ease-in-out, -webkit-mask-image 0.5s ease-in-out; } .lengthy.active { max-height: 2560px; mask-image: none; -webkit-mask-image: none; } .unfurl { margin-top: 0.5em; text-transform: uppercase; position: relative; z-index: 99; transition: opacity ease-in-out 2s, height ease-in-out 2s, margin ease-in-out 2s; text-align: center; height: 24px; } .unfurl.active { opacity: 0; height: 0; margin-top: 0; } .unfurl-inner { color: #333; display: inline-block; margin: 0 auto; font-size: 0.75em; line-height: 1.166666666667; font-weight: 500; letter-spacing: 0.5px; } .unfurl-inner svg { stroke:#83c2b9; transition: stroke ease-in-out 0.2s; } .unfurl.active .unfurl-inner svg .unfurl-vertical-line { opacity: 0; } .unfurl:hover .unfurl-inner svg { stroke: #ebae51; } .unfurl:hover { cursor: pointer; } .unfurl:after { content: 'READ\00a0\00a0\00a0\00a0\00a0\00a0MORE'; font-family: 'DM Mono', monospace; font-size: 10px; height: 10px; overflow: hidden; line-height: 10px; position: absolute; z-index: 1; top: 8px; color: #83c2b9; left: 0; pointer-events: none; width: 100%; } body.release #content .unfurl + h3 { margin-top: 1.5em; } .home .lengthy { max-height: 240px; } .home .lengthy.active { max-height: 2560px; } .elscrt-ware-promo #content .lengthy p:first-child { margin-top: 0; } body.home .entry .unfurl { max-width: 540px; } body.artist h1 + .img-frame { margin-top: 1.5em; } #sub-nav { display: none; /* background: #e592ac; */ background: #ccc; /* background: #ffe9e8; */ /* border-bottom: 1px solid #e592ac; */ border-bottom: 1px solid #999; padding: 12px 16px 18px 20px; /* position: absolute; */ /* top: 8px; */ } #sub-nav.active { display: inherit; } #sub-nav a { color: #333; } .micro-cart-inner > a { float: left; width: 32px; height: 32px; } #sub-nav #go-checkout { width: 32px; height: 32px; /* position: relative; */ /* display: inline-block; */ /* vertical-align: top; */ } #sub-nav #go-checkout svg { width: 32px; height: 32px; stroke: #444; margin-top: 3.5px; } #sub-nav #go-checkout #totalQty { font-family: 'DM Mono', monospace; font-weight: 500; position: absolute; font-size: 9px; width: 32px; text-align: center; height: 32px; line-height: 20px; padding: 9px 0 0 6px; } #sub-nav #go-checkout a { display: block; width: 32px; height: 32px; z-index: 999; } #sub-nav #totalAmount { /* position: absolute; */ /* display: inline-block; */ float: left; /* vertical-align: top; */ font-family: 'DM Mono', monospace; font-weight: 500; font-size: 12px; height: 32px; line-height: 20px; padding: 10px 0 0 16px; } #sub-nav #checkout-invite { /* position: absolute; */ /* display: inline-block; */ /* vertical-align: top; */ float: left; font-family: 'DM Mono', monospace; font-weight: 500; font-size: 12px; height: 32px; line-height: 20px; padding: 10px 0 0 12px; text-transform: lowercase; } #sub-nav #checkout-invite a { color: #333; } body.release h1, body.artist h1 { font-family: 'Eliza', serif; font-size: 2.25em; font-weight: 400; line-height: 1.333333333333333em; /* margin-top: 1.333333333333333em; */ } body.release h2 { font-family: 'Karla', serif; font-size: 1.25em; font-weight: 500; line-height: 1.2em; /* text-decoration: underline; */ /* text-decoration-color: #83c2b9; */ /* color: #83c2b9; */ } body.release h2 a { border-bottom: 1.5px solid #83c2b9; transition: border-bottom ease-in-out 0.3s; } body.release h2 a:hover { border-bottom-color: #ebae51; } body.release #content .release-composer-credits p { font-size: 0.8125em; margin-top: 1.846153846153846em; line-height: 1.384615384615385; margin-bottom: 2.307692307692308em; } body.release #content .release-composer-credits p a { text-decoration: none; border-bottom: 1px; } body.release #content h3, body.artist h2, body.artists h2, body.blog h2 { font-family: 'Karla'; text-transform: uppercase; font-weight: 600; font-size: 1.5em; color: #222; } body.artists h2, body.blog h2, body.contact h2 { margin-top: 1.8333333333333333333em; } body.blog h2 { padding: 0.5em 0; border-bottom: 2px solid #c2858d; } body.release .release-cat-no, body.release .release-type, body.release .release-date { font-size: 0.75em; line-height: 2em; margin: 0; padding: 1em 0; /* border-right: 1px solid #333; */ display: inline-block; color: #333; font-family: 'DM Mono', monospace; } body.release .release-cat-no { /* font-weight: 500; */ } body.release .release-cat-no:after, body.release .release-type:after { font-family: 'DM Mono', monospace; content: '·'; font-weight: 500; margin: 0 0.5em; /* display: inline-block; */ } body.release .release-date { text-transform: uppercase; } body.release .buy { /* margin-top: 1.5em; */ } body.release .buy .elscrt-ware-title svg { stroke: #888; width: 24px; height: 24px; float: right; margin: 0.9em 1.1em 0 0.5em; } body.release .cart-add-button { position: absolute; right: 0px; width: 54px; height: 54px; top: -2.75px; right: 10px; /* margin-right: -32px; */ background-color: #f2f2f2; border-radius: 50%; border: 2px solid #f2a6a6; /* box-shadow: 0 0 0 2px #f1f1f1; */ filter: drop-shadow(1px 1px 0.5px #999); z-index: 30; } #sidebar { line-height: 1.5em; } body.release .release-credits-notes { background-color: #666; border-radius: 12px; color: #eee; font-size: 0.875em; line-height: 1.5em; padding: 1.846153846153846em 1.846153846153846em 0.2307692307692308em; } body.release #content .release-credits-notes .notes p:first-child { margin-top: 0; } body.release #content .release-credits-notes .credits li:last-child { margin-bottom: 1.5em; } body.release .release-videos { width: 42%; margin: 0 4%; margin-top: 2.75em; } body.release .release-videos .release-video div:first-child { border-radius: 3px; overflow: hidden; } body.release .release-videos p { font-size: 0.875em; width: 100%; max-width: 360px; margin-bottom: 0; } body.release #content .release-videos p { margin-bottom: 0; } body.release .release-videos .release-video { margin-bottom: 3em; } .entry .video-link, body.release .release-video-link { vertical-align: middle; font-size: 0.75em; font-family: 'DM Mono'; font-weight: 400; line-height: 2em; color: #333; margin-top: 6px; text-decoration: underline; text-decoration-color: #82c6be; transition: text-decoration ease-in-out .3s; } .entry .video-link { margin-top: 10px; margin-left: -1px; } .entry .video-link svg, body.release .release-video-link svg { display: inline-block; width: 24px; height: 24px; padding: 1px 6px 5px 0; stroke:#82c6be; vertical-align: middle; transition: stroke ease-in-out .3s; } .entry .video-link:hover, body.release .release-video-link:hover { text-decoration: underline; text-decoration-color: #ebae51; } .entry .video-link:hover svg, body.release .release-video-link:hover svg { stroke: #ebae51; } .elscrt-ware { /* background-color: #aaa; */ color: #eee; margin: .75em 0; /* padding: 0.75em; */ } .elscrt-ware.elscrt-ware-sold-out { opacity: 0.7; filter: grayscale(85%); } .elscrt-ware.elscrt-ware-sold-out a { cursor:default; } .elscrt-ware:first-child { margin: 0; } .elscrt-ware a { padding: 0.75em; height: 48px; background-color: #83c2b9; display: block; position: relative; border-radius: 3px 3px 0 0; box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16); } .elscrt-ware .elscrt-ware-title { font-weight: 500; opacity: 1; transition: opacity ease-in-out 0.25s; } .elscrt-ware .elscrt-ware-title.blink { opacity: 0.5; } .elscrt-ware .elscrt-ware-title .elscrt-ware-title-inner { display: inline-block; } .elscrt-ware .elscrt-ware-cat-no { position: relative; font-size: .75em; font-weight: 400; display: inline-block; padding-left: 0.5em; height: 24px; top: -0.5px; } .elscrt-ware .elscrt-ware-cat-no::before { content: '('; } .elscrt-ware .elscrt-ware-cat-no::after { content: ')'; } .elscrt-ware .elscrt-ware-price, .elscrt-ware .elscrt-ware-price-tick { position: absolute; width: 48px; top: 13px; text-align: center; right: 13px; color: #555; font-family: 'DM Mono'; font-weight: 400; font-size: 0.8125em; z-index: 40; transition: opacity ease-in-out 0.3s; } .elscrt-ware .elscrt-ware-price-tick { opacity: 0; } body.release .buy .elscrt-ware-title .elscrt-ware-price-tick svg { width: 24px; height: 24px; margin: 0 12px; } .elscrt-ware .elscrt-ware-price.blink { opacity: 0; } .elscrt-ware .elscrt-ware-price-tick.blink { opacity: 1; } .elscrt-ware .elscrt-ware-add-to-cart-invite { position: absolute; width: 84px; top: 13px; text-align: center; right: 74px; color: #555; font-family: 'DM Mono'; font-weight: 500; font-size: 0.75em; z-index: 40; text-transform: uppercase; color: #fefefe; text-decoration: underline; text-decoration-color: #83c2b9; transition: text-decoration ease-in-out 0.2s; } .elscrt-ware .elscrt-ware-title:hover .elscrt-ware-add-to-cart-invite { text-decoration: underline; text-decoration-color: white; } .elscrt-ware .elscrt-ware-product-details { padding: 0.857142857142857em; background-color: #fff; color: #444; font-size: 0.875em; /* line-height: 1.714285714285714em; */ line-height: 1.5em; border-radius: 0 0 3px 3px; } .elscrt-ware .elscrt-ware-product-details .elscrt-ware-release-status { vertical-align: bottom; text-transform: uppercase; display: inline-block; line-height: 20px; letter-spacing: 0.5px; /* padding-top: 1px; */ height: 20px; font-family: 'DM Mono', monospace; font-size: 0.7857142857142857em; font-weight: 500; color: #333; padding-right: 0.3571428571428571em; text-decoration: line-through; text-decoration-thickness: 15px; text-decoration-color: rgb(51 255 0 / 33%); } .elscrt-ware .elscrt-ware-product-details-cont { font-size: 0.8571428571428571em; /* border-top: 1px black dotted; */ margin-top: 1em; padding-top: 0.5em; color: #777; line-height: 1.6666666666667em; } body.release #content { max-width: initial; } body.release #main, body.release #sidebar, body.artist #main, body.artist #sidebar { width: 42%; margin: 0 4%; display: inline-block; } body.artist #main, body.artist #sidebar { width: 100%; margin: 0; } body.artist #sidebar { margin-top: 1.5em; } body.release #sidebar, body.artist #sidebar { float: right; } .sub-title { width: 46%; margin: 1.83333333333333333em 0 0 0; display: inline-block; } .sub-title + .iso-grid { margin-top: 1.5em; } body.release ul.track-listing, .elscrt-ware-promo ul.track-listing { /* font-size: 0.875em; */ line-height: 1.5; margin-top: 1.5em; /* font-weight: 600; */ letter-spacing: 0.0125em; } body.release ul.track-listing li, .elscrt-ware-promo ul.track-listing li { padding: 0 3em 0 2.25em; clear: both; position: relative; } body.release ul.track-listing .track-times, .elscrt-ware-promo ul.track-listing .track-times { font-family: 'DM Mono', monospace; font-size: 0.75em; line-height: 2; color: #ccc; font-weight: 400; padding-left: 0.5em; position: absolute; right: 0; top: 0; line-height: 1.916666666666667em; padding-top: 1px; } body.release ul.track-listing .track-count, .elscrt-ware-promo ul.track-listing .track-count { padding-right: 0.5em; font-family: 'DM Mono', monospace; font-size: 0.75em; line-height: 2; color: #777; position: absolute; left: 0; top: 0; line-height: 1.916666666666667em; padding-top: 1px; } body.release ul.track-listing .total-time, .elscrt-ware-promo ul.track-listing .total-time { font-family: 'DM Mono', monospace; font-size: 0.75em; line-height: 2; color: #ccc; font-weight: 400; float: right; margin-right: -4em; } body.about #content .img-frame:first-child { } body.about #content .img-frame:first-child figure { float: left; width: 100%; max-width: 315px; margin-right: 0; height: auto; } body.about #content .img-frame:first-child figure:first-child { margin-right: 10px; } .main-blurb { width: 100%; max-width: 540px; } .elscrt-checkout #content { /* line-height: 1.5em; max-width: 768px; padding: 0; */ } .elscrt-checkout #content .elscrt-cart { width: 100%; } .elscrt-checkout #content .elscrt-cart tr td { padding-top: 12px; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-product { font-weight: 700; color: #333; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-product span { font-weight: 400; font-size: .875em; line-height: 1.7142857142857142857142857142857; display: inline-block; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-qty-and-price, .elscrt-checkout #content .elscrt-cart .elscrt-cart-postage-title, .elscrt-checkout #content .elscrt-cart .elscrt-cart-totalrow, .elscrt-checkout #content .elscrt-cart .elscrt-cart-remove { text-align: right; font-size: 14px; min-width: 84px; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-postage-title { text-align: left; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-postage-line td { padding-top: 20px; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-qty-and-price .no-line-break { display: inline-block; white-space: nowrap; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-remove input { vertical-align: middle; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-qty-and-price input { font-size:12px !important; font-family: 'DM Mono', monospace; font-weight: 500; background-color: white; border: 1px solid black; padding: 0 3px; text-align: center; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-totalrow { font-size: 18px; font-weight: 700; color: #333; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-subprice { font-size: 10px; } .elscrt-checkout #content .elscrt-cart .elscrt-cart-x { padding-left: .5em; padding-right: .5em; } .elscrt-checkout #content .elscrt-editcart { margin-bottom: 3em; } .elscrt-checkout #content #elscrt-postage-options { margin-top: 3em; } .elscrt-checkout #content #elscrt-postage-options h3 { font-size: 0.8125em; } .elscrt-checkout #content #elscrt-postage-options .elscrt-postage-options-btn { font-size: .875em; display: inline-block; text-align: center; line-height: 1.714285714285714em; padding: 5px 14px; color: #eee; background-color: #999; border-radius: 4px; /* border: white 3px solid; */ margin-right: 6px; cursor: pointer; } .elscrt-checkout #content #elscrt-postage-options .elscrt-postage-options-btn.active { background-color: #416992; } .elscrt-checkout #content #elscrt-postage-options .elscrt-postage-options-btn:hover { background-color: #416992; } .elscrt-checkout #content #elscrt-postage-options .elscrt-postage-options-btn:last-child { margin-right: 0; } .elscrt-checkout #content #elscrt-customerform .Inputfield.InputfieldSubmit { margin-top: 1.5em; } .elscrt-checkout #content #elscrt-customerform .InputfieldError { color: red; font-size: 12px; font-weight: 700; } .elscrt-checkout h1 { margin-bottom: 1em; } .elscrt-checkout h2 { font-size: 21px; font-weight: 700; color: #333; } .elscrt-order.elscrt-checkout h2 { padding-right: 100px; } .elscrt-checkout h2.elscrt-success-heading { margin-bottom: 1.5em; } .elscrt-checkout h3 { font-weight: 700; text-transform: uppercase; margin-bottom: 1.5em; color: #333; /* font-size: 12px; */ /* letter-spacing: .0125em; */ } .elscrt-checkout table.inventory, .elscrt-checkout table.balance { width: 100%; text-align: right; } .elscrt-checkout table.inventory thead { color: #999; font-size: 0.75em; line-height: 2; font-family: 'DM Mono', monospace; font-weight: 500; text-transform: uppercase; } .elscrt-checkout table.inventory tr th, .elscrt-checkout table.inventory tr td { padding-left: 1em; } .elscrt-checkout table.inventory th:first-child, .elscrt-checkout table.inventory tbody tr td:first-child, .elscrt-checkout table.balance tbody tr th:first-child { text-align: left; padding-left: 0; } .elscrt-checkout table.balance { font-weight: 700; margin-bottom: 1.5em; color: #333; } .elscrt-checkout .elscrt-checkout-wrap .meta { width: 100%; margin-bottom: 1.5em; color: inherit; } .elscrt-checkout .elscrt-checkout-wrap .meta .elscrt-checkout-meta-title { float: left; padding-right: .5em; text-transform: uppercase; } /* .checkout .checkout-wrap .meta tr th { */ /* width: 50%; */ /* text-align: right; */ /* } */ /* .checkout .checkout-wrap .meta tr td { */ /* width: 50%; */ /* text-align: left; */ /* } */ /* .checkout table.meta tr:last-child th span { */ /* margin-right: 1em; */ /* } */ .elscrt-checkout .Inputfield.InputfieldRadios.Inputfield_pad_paymentmodule { display: none; } .elscrt-checkout #elscrt-customerform { margin: 3em 0; } .elscrt-checkout .elscrt-cart-add-product input[type=submit], .elscrt-checkout .elscrt-editcart input[type=submit], .elscrt-checkout .elscrt-editcart .elscrt-submit, .elscrt-checkout #elscrt-customerform button { position: absolute; right: 0; top: 12px; width: 72px; height: 48px; line-height: 48px; font-size: 14px !important; font-family: 'Karla', sans-serif !important; text-transform: uppercase; letter-spacing: 1px; background-color: #444; color: #eee; text-align: center; border-radius: 6px; -webkit-appearance: none; /* clears safari style */ } .elscrt-checkout .elscrt-cart-add-product input[type=submit], .elscrt-checkout .elscrt-editcart input[type=submit], .elscrt-checkout .elscrt-editcart .elscrt-submit, .elscrt-checkout #elscrt-customerform button { position: relative; margin: 0; border: none; padding: 0; border-radius: 6px; width: auto; padding: 0 12px; top: 0; cursor: pointer; -webkit-appearance: none; /* clears safari style */ } .elscrt-checkout .elscrt-cart-add-product input[type=submit]:hover, .elscrt-checkout .elscrt-editcart input[type=submit]:hover, .elscrt-checkout #elscrt-customerform button:hover { background-color: #999; } .elscrt-checkout .elscrt-pay-block .FormBuilder, .members .FormBuilder { max-width: 360px; } .members .FormBuilder .alert-success { background: none !important; padding: 0 !important; margin: 0 !important; } .members .FormBuilder a.button, .members a.button { padding: 10px 30px; background: #626262; color: #fff !important; border: none; border-radius: 4px; text-decoration: none !important; line-height: 24px !important; } .elscrt-checkout .elscrt-pay-block { font-family: 'Karla', sans-serif !important; font-weight: 400 !important; } .elscrt-checkout .elscrt-pay-block .FormBuilder, .elscrt-checkout .elscrt-pay-block .FormBuilder input, .elscrt-checkout .elscrt-pay-block .FormBuilder textarea, .elscrt-checkout .elscrt-pay-block .FormBuilder select, .elscrt-checkout .elscrt-pay-block .FormBuilder button, .elscrt-checkout .elscrt-pay-block .FormBuilder .ui-widget { font-family: 'Source Sans Pro', sans-serif !important; font-size: 14px !important; line-height: 1.5em !important; } .elscrt-checkout .elscrt-pay-block .FormBuilder.InputfieldForm .Inputfield .InputfieldHeader, .elscrt-checkout .elscrt-pay-block .FormBuilder.InputfieldForm button, .members .FormBuilder.InputfieldForm .Inputfield .InputfieldHeader, .members .FormBuilder.InputfieldForm button { font-family: 'Karla', sans-serif !important; font-weight: 400 !important; } .elscrt-checkout .elscrt-pay-block button { font-family: 'Karla', sans-serif !important; text-transform: uppercase; position: absolute; right: 0; top: 12px; width: 72px; height: 48px; line-height: 48px; font-size: 1.5em !important; text-transform: uppercase; letter-spacing: 1px; background-color: #444; color: #eee; text-align: center; border-radius: 6px; -webkit-appearance: none; /* clears safari style */ } .elscrt-checkout .elscrt-pay-block button { position: relative !important; background: #4aa34f !important; margin: 0 !important; border: none !important; padding: 0 !important; border-radius: 6px !important; width: auto !important; padding: 0 12px !important; top: 0 !important; cursor: pointer; -webkit-appearance: none !important; /* clears safari style */ } .elscrt-checkout .elscrt-cart-add-product input[type=submit]:hover, .elscrt-checkout .elscrt-editcart input[type=submit]:hover, .elscrt-checkout .elscrt-pay-block button:hover { background-color: #999; } .elscrt-checkout .elscrt-order-heading { position: relative; margin-bottom: 1.5em; } .elscrt-checkout .elscrt-payment-notice { /* margin-top: 1.714285714285714em; */ width: 100%; /* max-width: 384px; */ font-weight: 400; font-size: 0.875em; color:#999; } body.release #content h3.elscrt-order-section-heading { margin-bottom: .125em; } h3.elscrt-order-section-heading { margin-top: 2.666666666666667em; font-family: 'Karla'; text-transform: uppercase; font-weight: 700; font-size: 1.125em; line-height: 1.333333333333em; color: #222; border-bottom: 1.5px solid #555; /* max-width: 480px; */ } .elscrt-checkout h3.print-invoice-heading a { color: #111; text-decoration: none; border-bottom: 1px solid #999; } .elscrt-checkout h3.print-invoice-heading { position: absolute; top: 0; right: 0; font-weight: 400; font-size: 0.875em; line-height: 1.714285714285714; } .elscrt-checkout .order-notes { font-size: 0.875em; line-height: 1.714285714285714; margin-bottom: 1.714285714285714em; } .elscrt-checkout .order-notes h4 { font-weight: 600; /* margin-top: 1.714285714285714em; */ } .elscrt-checkout .order-notes + h3 { margin-top: 2.25em; margin-bottom: 0.75em; } .elscrt-checkout .order-notes .order-note { color: #111; } .downloads-wrap { line-height: 1.5em; margin-top: 1.5em; } #content .downloads-wrap p.dl-preorder-notice { margin-top: 0; font-size: 0.875em; max-width: 340px; } .elscrt-checkout #content h4 + p.release-schedule-footnote { margin-top: 0; } .elscrt-checkout #content h4.release-schedule-title { margin-top: 1.5em; } .downloads-wrap h4 { font-weight: 700; margin-top: 2em; } .downloads-wrap h4:first-child { margin-top: 1.5em; } .downloads-wrap h4 span { font-weight: initial; font-weight: 400; font-size: .875em; line-height: 1.7142857142857142857142857142857; } .downloads-wrap h5 { margin-bottom: 0.375em; margin-top: 1.125em; } .download-set { font-size: 0.875em; line-height: 1.714285714285714; } .elscrt-order .elscrt_order_ref_email { font-weight: 400; } .downloads-wrap .download-set h5 { font-size: 0.9285714285714286em; line-height: 1.461538461538462em; margin-top: 1.846153846153846em; /* font-weight: 700; */ margin-bottom: 0; font-family: 'DM Mono', monospace; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; } .downloads-wrap .download-set .dl-set-intro { max-width: 480px; font-style: italic; /* background-color: #ccc; */ /* padding: 0 0 0.857142857142857em; */ margin: 0 0 0.857142857142857em; /* color: #fff; */ /* display: none; */ } #content .downloads-wrap .download-set .dl-set-intro p { font-size: 0.8571428571428571em; line-height: 1; margin-top: .25em; margin-bottom: .5em; } .downloads-wrap .dl-wrap a { color: #111; text-decoration: underline; text-decoration-color: #82c6be; } .downloads-wrap .dl-wrap { width: 100%; max-width: 480px; position: relative; } .dl-wrap.dl-wrap-images { width: calc(100% + 4px); max-width: 484px; } .dl-wrap.dl-wrap-images .dl-link { width: 33.33333333%; padding-right: 4px; margin-right: 0; float: left; } .dl-wrap.dl-wrap-images .dl-link a img { padding-bottom: 2px; border-bottom: 1.5px solid #83c2b9; } .dl-wrap.dl-wrap-images .dl-link a img:hover { border-bottom: 1.5px solid #ebae51; } .downloads-wrap .dl-link { /* float: left; */ /* position: absolute; */ left: 0; margin-right: 70px; } .downloads-wrap .dl-link a:hover { text-decoration-color: #ebae51; } .downloads-wrap .dl-meta { position: absolute; right: 0; top: 0; } #content .promo-dl-disclaimer { line-height: 1.5; margin-top: 0; font-size: .875em; font-weight: 500; color: rgb(220, 40, 40); } .elscrt-checkout .release-schedule-title { font-size: 0.875em; line-height: 1.714285714285714; font-weight: 600; } .elscrt-checkout .release-schedule-title.margin-bottom { margin-bottom: 1.714285714285714em; } .elscrt-checkout .release-schedule-item { font-size: 0.875em; line-height: 1.714285714285714; /* margin-bottom: 1.714285714285714em; */ } .elscrt-checkout .release-schedule-footnote { font-size: 0.75em; line-height: 1; margin-top: .25em; margin-bottom: 0.75em; font-style: italic; /* margin-top: .5em; */ /* margin-bottom: 1.5em; */ } .fig-wrap.elscrt-ware-sold-out:after { position: absolute; font-size: .75em; content: 'Sold Out'; top: 10px; right: 10px; background: #a93838; color: #eee; padding: .25em .5em; text-transform: uppercase; opacity: .85; border-radius: 2px; letter-spacing: 0.5px; } .flickity-viewport { border-radius: 3px; overflow: hidden; } .showcase-carousel { padding: 0; width: 94%; margin: 0 auto; } .showcase-carousel .flickity-viewport { border-radius: initial; overflow: initial; } .carousel-cell { width: 100%; height: auto; } .carousel-cell { width: 100%; /* half-width */ /* height: 160px; */ margin-right: 10px; background-color: #ccc; } .showcase-carousel .carousel-cell { width: 33.3333%; margin-right: 0; margin-left: 0; } body.home #content .featured-release .featured-release-details h3 { font-size: 1.5vw; margin-top: 1.5vw; } body.home #content .featured-release .featured-release-details h4 { font-size: 0.833333vw; } .home .featured-release .featured-release-details .listen-buy-btn { font-size: .75vw; } .home .featured-release .featured-release-details .featured-release-formats { font-size: .625vw; margin-top: 1.5vw; } .showcase-carousel .carousel-cell figure { box-shadow: initial; margin-left: 1px; box-shadow: 0 4px 4px 0 rgba(66, 66, 66, 0.04), 0 4px 12px 4px rgba(66, 66, 66, 0.08); } .showcase-carousel .carousel-cell { padding: 0 1%; } /* .showcase-carousel .carousel-cell:nth-child(odd) { padding: 0 1% 0 0; } */ .showcase-carousel .carousel-cell { background-color: initial; } .carousel-cell.single { border-radius: 3px; overflow: hidden; } .flickity-viewport .carousel-cell.single { border-radius: initial; overflow: initial; } .carousel-cell figure { opacity: 0.1; transition: opacity ease-in-out 0.5s; } .showcase-carousel .carousel-cell figure { /* border: 0.5vw solid white; */ border-radius: 3px; opacity: initial; transition: initial; } .carousel-cell.is-selected figure { opacity: 1; transition: opacity ease-in-out 0.5s; } .showcase-carousel .carousel-cell.is-selected figure { opacity: initial; transition: initial; } .showcase-carousel .carousel-cell { opacity: 0; transition: opacity ease-in-out .5s; } .showcase-carousel .carousel-cell.is-selected, .showcase-carousel .is-pointer-down .carousel-cell { opacity: 1; } /* .showcase-carousel .carousel-cell:nth-child(odd) { margin-left: 2%; } */ /* .showcase-carousel .carousel-cell.is-selected:nth-child(even) { padding: 0 0 0 1%; } .showcase-carousel .carousel-cell.is-selected:nth-child(odd) { padding: 0 1% 0 0; } */ .flickity-button { transition: ease-in-out background-color 0.3s; } .showcase-carousel .flickity-button { background: initial; } .flickity-button:hover { background-color: #F90; } .showcase-carousel .flickity-button:hover { background-color: initial; } .flickity-prev-next-button { opacity: .6; width: 2vw; height: 2vw; /* border-radius: 5px; */ box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16); } .showcase-carousel .flickity-prev-next-button { opacity: inherit; box-shadow: initial; width: initial; height: initial; transition: ease-in-out opacity 0.3s; } .showcase-carousel .flickity-prev-next-button:disabled { opacity: 0; } .showcase-carousel .flickity-prev-next-button:hover { opacity: 1; } /* icon color */ .flickity-button-icon { fill: black; } .showcase-carousel .flickity-button-icon { fill: #83c2b9; } /* position outside */ .flickity-prev-next-button.previous { left: -3vw; } .flickity-prev-next-button.next { right: -3vw; } /* position dots in carousel */ .flickity-page-dots { /* bottom: 0px; */ text-align: right; line-height: 1.5em; bottom: -2.125em; } /* white circles */ .flickity-page-dots .dot { width: 0.5vw; height: 0.5vw; opacity: 1; /* background: transparent; */ /* border: 2px solid rgb(128, 128, 128); */ margin: 0 .5vw; background: rgb(192, 192, 192); } .flickity-page-dots .dot:last-child { margin-right: 0; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background: rgb(128, 128, 128); } .showcase-carousel .featured-release { margin-bottom: 1.5em; margin-top: 1.5em; padding: 2% 3em 2% 0; margin-bottom: 1.5em; margin-top: 1.5em; border-top: 1px solid #555; border-bottom: 1px solid #555; } .showcase-carousel .carousel-cell { } /* position dots up a bit */ .showcase-carousel .flickity-page-dots { line-height: 1.5em; bottom: -4.5vw; text-align: center; } /* dots are lines */ .showcase-carousel .flickity-page-dots .dot { height: .5em; width: .5em; /* border-radius: 3px; */ background: transparent; border: 2px solid rgb(128, 128, 128); margin: 0 1vw; } /* fill-in selected dot */ .showcase-carousel .flickity-page-dots .dot.is-selected { background: rgb(128, 128, 128); } .showcase-carousel .flickity-prev-next-button { opacity: .6; height: 100%; padding: 1.5em 0; width: 3%; border-radius: 5px; overflow: hidden; } .showcase-carousel .flickity-prev-next-button .flickity-button-icon { position: absolute; right: 0.75vw; margin-right: initial; left: initial; margin-left: initial; top: 50%; margin-top: -50px; height: 100px; width: 100px; } .showcase-carousel .flickity-prev-next-button.previous .flickity-button-icon { margin-left: initial; left: 0.75vw; } .showcase-carousel .flickity-prev-next-button.next { right: -2.75%; } .showcase-carousel .flickity-prev-next-button.previous { left: -2.75%; } /* SUBNAV(cart) DEC 2023 OVERIDES */ #sub-nav { position: absolute; border-bottom: 0; margin-top: 0px; width: 186px; /* margin-left: -104px; */ left: calc(50vw - 104px); background: none; color: #eee; height: 68px; padding: 0; padding-top: 14px; top: 8px; } #sub-nav #go-checkout svg { stroke: #e2e2e2; } #sub-nav a, #sub-nav #checkout-invite a { color: #e2e2e2; } #sub-nav #checkout-invite a { text-decoration: underline; text-decoration-color: #5e9b92; } #sub-nav #go-checkout svg { stroke-width: 1px; } #member-login { padding: 0 2px; } #member-login .member-login-inner { position: relative; } #member-login svg { display: inline-block; position: absolute; left: 13px; top: -6px; stroke: #eee; height: 24px; width: 24px; margin-right: 0.5em; } #member-login .member-login-inner .link-text { display: inline-block; font-size: 12px; line-height: 4; padding: 0 0.5em; color: #eee; } body.members .Inputfield #Inputfield_e_mail { /* border: 1px solid black; background-color: #eee; */ } body.member #member-header { position: relative; padding: 1.5em 0; } body.member #member-header .member-name { font-size: 1.5em; font-weight: 700; } body.member #content { max-width: initial; } body.member #content .statement-wrap { width: 100%; overflow-y: hidden; overflow-x: auto; padding: 0 1.5em; background-color: white; margin-bottom: 1.5em; } body.member #content .statement-wrap > div { margin: 0 auto 2em; } /* the statement's pane shrinks to its (wide) table so the auto margins keep it centered */ body.member.statement #content .statement-wrap > div { /* width: fit-content; */ } body.member #content .statement-wrap h3 { font-weight: 700; margin: 1.5em 0; text-transform: uppercase; color: #333; } body.member #content table { font-size: 0.75em; line-height: 1.428571428571429; width: 100%; } body.member #content table tr { border-bottom: 1px solid #ccc; } /* the totals panel splits gross takings and the reconciling sum into two stacked tables, so the headline doesn't read as part of the sum */ body.member #content .statement-wrap table + table { margin-top: 1.4em; } body.member #content table tr.statement-payout .statement-payout-amount { color: #00bb32; } body.member #content table .align-right { text-align: right; } body.member #content table th { font-size: 0.6428571428571429em; font-weight: 500; padding: 10px 8px 6px; white-space: nowrap; } body.member #content table td { padding: 4px 8px; white-space: nowrap; } body.member #content table th:first-child, body.member #content table td:first-child { padding: 4px 8px 4px 0; } body.member #content table tr th:last-child, body.member #content table tr td:last-child { padding: 4px 0px 4px 8px; } body.member #content table td.statement-number, body.member #content table td.statement-mono { font-size: 0.8571428571428571em; line-height: 1.666666666666667; font-family: 'DM Mono', monospace; text-align: right; } body.member #content table td.statement-mono { font-size: 0.8571428571428571em; line-height: 1.666666666666667; font-family: 'DM Mono', monospace; text-align: left; } body.member #content table td.statement-small { font-size: 0.7857142857142857em; line-height: 1.818181818181818; } body.member #content table td.statement-mono.statement-small { font-size: 0.7142857142857143em; line-height: 2; } /* recoupment (member dashboard bar + statement marker) */ body.member #content .recoup-bar { height: 6px; background-color: #ddd; border-radius: 3px; overflow: hidden; margin: 4px 0; } body.member #content .recoup-bar-fill { height: 100%; background-color: #91c0b9; } body.member #content .recoup-bar-fill.recoup-bar-complete { background-color: #00bb32; } body.member #content .recoup-label, body.member #content .recoup-flag { font-family: 'DM Mono', monospace; font-size: 0.7142857142857143em; color: #666; } /* the flag and the label's "Recouped" prefix read as small caps; the label's figures keep their case ("of" stays lowercase) */ body.member #content .recoup-flag, body.member #content .recoup-label .recoup-word { font-variant: small-caps; text-transform: uppercase; } .no-wrap { white-space: nowrap; } .uppercase { text-transform: uppercase; } body.members .member-wrap { width: 100%; margin: 0 auto; } body.members.statement #member-header { margin: 0 auto; } body.members .member-meat { line-height: 1.5em; } body.members .member-meat .member-profile-label { text-transform: uppercase; font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 0.5px; line-height: 2em; } body.members .member-log-in-out { height: 24px; position: absolute; /* top: 4.375em; */ top: 9.0625em; right: -2px; } body.members .member-log-in-out a { line-height: 24px; float: left; font-size: 12px; } body.members .member-log-in-out svg { width: 24px; height: 24px; stroke: #83c2b9; float: right; margin-left: 4px; } body.member #content .member-links { padding: 0.75em 0; border-top: 1.5px dashed #aaa; border-bottom: 1.5px dashed #aaa; } body.member #content .member-links a { text-transform: uppercase; line-height: 1.5em; margin-left: .5em; border-bottom: 1.5px solid #82c6be; } body.member #content .member-links a:first-child { margin-left: 0; } @media only screen and (min-width: 480px) { .iso-item { width: 46%; margin: 0% 2% 4% 2%; } .releases #content { width: 96%; } .artist-news { width: 49%; } body.artist .iso-grid { margin-left: -2%; margin-right: -2%; } } @media only screen and (min-width: 713px) { #sub-nav.active { height: 100px; padding-top: 29px; /* margin-left: -160px; */ left: calc(50vw - 160px); } } @media only screen and (min-width: 768px) { body.artist #main, body.artist #sidebar { width: 48%; margin: 0; } body.artist #sidebar { margin-top: 3em; } } @media only screen and (min-width: 960px) { .iso-item { width: 23%; margin: 0 1% 2% 1%; } .releases #content { width: 98%; } body.artist #content { width: 96%; } body.artist .iso-grid { margin-left: 0; margin-right: 0; } body.artist .iso-grid { margin-left: -1%; margin-right: -1%; } body.artist #main, body.artist #sidebar { width: 45%; margin: 0 0 0 4%; } body.artist #sidebar { margin-top: 3em; } } @media only screen and (max-width: 1920px) { .showcase-carousel .carousel-cell { width: 50%; } .showcase-carousel .carousel-cell figure { /* border: 0.75vw solid white; */ } body.home #content .featured-release .featured-release-details h3 { font-size: 2.25vw; margin-top: 2vw; } body.home #content .featured-release .featured-release-details h4 { font-size: 1.25vw; } .home .featured-release .featured-release-details .featured-release-formats { font-size: .825vw; margin-top: 2vw; } .home .featured-release .featured-release-details .listen-buy-btn { font-size: 1vw; } .showcase-carousel .flickity-page-dots .dot { height: 8px; width: 8px; margin: 0 1.2vw; } } @media only screen and (max-width: 1200px) { .showcase-carousel .carousel-cell { width: 100%; } .showcase-carousel .carousel-cell figure { /* border: 1.25vw solid white; */ } body.home #content .featured-release .featured-release-details h3 { font-size: 2.25em; margin-top: 2vw; } body.home #content .featured-release .featured-release-details h4 { font-size: 1.25em; } .home .featured-release .featured-release-details .featured-release-formats { font-size: .75em; margin-top: 2vw; } .home .featured-release .featured-release-details .listen-buy-btn { font-size: 1em; } .showcase-carousel .flickity-page-dots .dot { height: 6px; width: 6px; margin: 0 1.25vw; } } @media only screen and (max-width: 1024px) { body.release #content { max-width: 640px; } body.release #main, body.release #sidebar { width: 100%; margin: 0; display: initial; } body.release #sidebar { float: initial; } body.release h1 { margin-top: 1.333333333333333em; } .flickity-prev-next-button { width: 3vw; height: 3vw; } .showcase-carousel .flickity-prev-next-button { height: 100%; width: 3%; } /* position outside */ .flickity-prev-next-button.previous { left: -4.5vw; } .flickity-prev-next-button.next { right: -4.5vw; } /* position dots in carousel */ .flickity-page-dots { /* bottom: 0px; */ text-align: right; line-height: 1.5em; bottom: -2.125em; } /* white circles */ .flickity-page-dots .dot { width: .75vw; height: .75vw; margin: 0 .75vw; } .showcase-carousel .flickity-prev-next-button.next .flickity-button-icon { right: 0.5vw; } .showcase-carousel .flickity-prev-next-button.previous .flickity-button-icon { left: 0.5vw; } body.release .release-videos { width: 100%; margin: 0; margin-top: 2.75em; } body.release .release-videos p { font-size: 0.875em; width: 100%; max-width: 360px; } } @media only screen and (max-width: 768px) { .home .entry, .blog.blog-entry .entry { margin-bottom: 6em; border-bottom: 1.5px solid #c2858d; padding-bottom: 1.5em; } .home .home-entries .entry .img-frame, .blog-entry .entries .entry .img-frame, .home .home-entries .entry .entry-content, .blog-entry .entries .entry .entry-content { width: 100%; } .home .entry .entry-content .entry-meta .tags, .blog-entry .entry .entry-content .entry-meta .tags { position: initial; width: 100%; } .home .entry .entry-content .entry-meta, .blog-entry .entry .entry-content .entry-meta { margin-top: 0.75em; } .home #content .entry .entry-content .entry-body, .blog-entry #content .entry .entry-content .entry-body { margin-top: 1.5em; } body.home #content .entry-content h3, body.blog-entry #content .entry-content h3 { margin-top: 0.75em; } .entry .video-link { position: absolute; top: -12px; } } @media only screen and (max-width: 740px) { .flickity-prev-next-button { width: 3vw; height: 3vw; display: none; } .showcase-carousel .flickity-prev-next-button { height: 100%; width: 3%; display: inherit; } } @media only screen and (max-width: 712px) { body.about #content .img-frame:first-child figure { float: left; width: 100%; max-width: initial; margin-right: initial; height: auto; display: none; } body.about #content .img-frame:first-child figure:first-child { display: initial; } /* white circles */ .flickity-page-dots .dot { width: 1vw; height: 1vw; margin: 0 1vw; } /* HEADER DEC 2023 OVERIDES */ #head-logo { width: 48px; } #head-menu { padding: 10px 0; margin-right: 0.5em; } body.menu-active #head-wrap { /* background-color: initial; */ position: sticky; /* top: 0px; */ height: 76px; /* matches #header when not .active */ } body.menu-active #head-wrap svg.menu-burger { display: none; } body.menu-active #head-wrap svg.menu-close { display: initial; } body.menu-active #header { left: 0; position: absolute; width: 100%; height: 100vh; background-color: rgba(35, 35, 35, 0.89); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #head-menu a { display: none; } body.menu-active #head-menu a { display: block; font-size: 1.5em; margin-right: 3px; text-decoration: underline; text-decoration-color: #5e9b92; text-underline-offset: 3px; } #head-menu a#head-menu-btn, body.menu-active #head-menu a#head-menu-btn { font-size: 0.875em; margin: 0 0.4285714285714286em; display: block; text-decoration: none; } body.menu-active #head-menu a#head-menu-btn { margin-bottom: 2.5em; } body.menu-active #big-splash { /* height: 0vh; */ } } @media only screen and (max-width: 640px) { .showcase-carousel .featured-release { padding: 2% 0; } .showcase-carousel .carousel-cell figure { /* border: 3vw solid white; */ } .showcase-carousel .featured-release figure { width: 100%; margin-left: 0; } body.home #content .featured-release .featured-release-details { width: 100%; float: left; padding: 1.5em 1.5em; text-align: center; } body.home #content .featured-release .featured-release-details h3 { font-size: 1.5em; margin-top: 1vw; } body.home #content .featured-release .featured-release-details h4 { font-size: 0.8333333em; } .home .featured-release .featured-release-details .featured-release-formats { margin-top: 1vw; } .showcase-carousel .flickity-page-dots .dot { margin: 0 2vw; } .showcase-carousel .carousel-cell { width: 100%; } .showcase-carousel .featured-release { border-top: initial; border-bottom: initial; } /* white circles */ .flickity-page-dots .dot { width: 1.5vw; height: 1.5vw; margin: 0 1.5vw; } .showcase-carousel .flickity-page-dots { bottom: initial; top: 98vw; display: none; } .home .showcase-carousel { left: -100px; transition: left ease-in-out 1s; } .home.showcase-carousel-visible .showcase-carousel { left: 0px; } .showcase-carousel .flickity-prev-next-button.next .flickity-button-icon { right: .75vw; top: 49vw; } .showcase-carousel .flickity-prev-next-button.previous .flickity-button-icon { left: .75vw; top: 49vw; } .showcase-carousel .flickity-prev-next-button .flickity-button-icon { display: none; } .showcase-carousel .carousel-cell { opacity: 1; } } @media only screen and (max-width: 480px) { body.release .release-videos p { max-width: initial; } #header { height: 68px; } #head-logo { width: 48px; } #head-menu { padding: 10px 0; margin-right: 0.5em; } body.menu-active #head-wrap { /* background-color: initial; */ position: sticky; /* top: 0px; */ height: 76px; /* matches #header when not .active */ } body.menu-active #head-wrap svg.menu-burger { display: none; } body.menu-active #head-wrap svg.menu-close { display: initial; } body.menu-active #header { left: 0; position: absolute; width: 100%; height: 100vh; background-color: rgba(35, 35, 35, 0.89); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.menu-active #content { /* position: relative; */ } #head-menu a { display: none; } body.menu-active #head-menu a { display: block; font-size: 1.5em; margin-right: 3px; text-decoration: underline; text-decoration-color: #5e9b92; text-underline-offset: 3px; } #head-menu a#head-menu-btn, body.menu-active #head-menu a#head-menu-btn { font-size: 0.875em; margin: 0 0.4285714285714286em; display: block; text-decoration: none; } body.menu-active #head-menu a#head-menu-btn { margin-bottom: 2.5em; } body.menu-active #big-splash { /* height: 0vh; */ } #sub-nav { position: absolute; border-bottom: 0; margin-top: 0px; /* width: 180px; margin-left: -104px; left: 50%; */ left: calc(50vw - 104px); background: none; color: #eee; height: 68px; padding: 0; padding-top: 14px; top: 8px; } #sub-nav #go-checkout svg { stroke: #e2e2e2; } #sub-nav a, #sub-nav #checkout-invite a { color: #e2e2e2; } #sub-nav #checkout-invite a { text-decoration: underline; text-decoration-color: #5e9b92; } #sub-nav #go-checkout svg { stroke-width: 1px; } body.release .release-cat-no, body.release .release-type, body.release .release-date { letter-spacing: -.2px; } } @media only screen and (max-width: 440px) { #sub-nav { width: 120px; /* margin-left: -78px; */ left: calc(50vw - 78px); } #sub-nav #totalAmount { display: none; } } @font-face { font-family: "Eliza"; src: url("../fonts/Eliza-Medium.woff") format('woff'); }