@layer reset { /* 1. Use a more-intuitive box-sizing model. */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering */ body { line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 5. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 6. Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* 7. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 8. Create a root stacking context */ #root, #__next { isolation: isolate; } ul { margin: 0; padding: 0; } li { list-style-type: none; } button { background: rgba(240,240,240,0.3); } } /* BBB */ @layer reset { *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } } /* E BBB */ @layer global { /****************************************************************** QQ GTCR Variables ******************************************************************/ :root { --white: #FAFAFA; --white: #ffffff; --black: #000000; --gray: #727272; --bg-color: var(--black); --fg-color: var(--white); --mg-color: var(--gray); /* --link-color: #727272; */ --link-color: var(--fg-color); --marker-color: #efff61; --main-color: #6969dd; --pad: 1rem; --header-height: 2rem; --max-width: 1000px; } @media (max-width: 1441px) and (max-height: 968px) { :root { --max-width: 1000px; } } :root { --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; } /****************************************************************** Site Name: GTCR Project Author: waastedbandwidth.com Stylesheet: Typography ******************************************************************/ /********************* FONT FACE (IN YOUR FACE) *********************/ @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProThin.woff2') format('woff2'), url('fonts/Liebling/LieblingProThin.woff') format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProLight.woff2') format('woff2'), url('fonts/Liebling/LieblingProLight.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProRegular.woff2') format('woff2'), url('fonts/Liebling/LieblingProRegular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProMedium.woff2') format('woff2'), url('fonts/Liebling/LieblingProMedium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProBold.woff2') format('woff2'), url('fonts/Liebling/LieblingProBold.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProHeavy.woff2') format('woff2'), url('fonts/Liebling/LieblingProHeavy.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'LieblingPro'; src: url('fonts/Liebling/LieblingProBlack.woff2') format('woff2'), url('fonts/Liebling/LieblingProBlack.woff') format('woff'); font-weight: 800; font-style: normal; } /* /* /* latin-ext */ /* // @font-face { // font-family: 'Bebas Neue'; // font-style: normal; // font-weight: 400; // font-display: swap; // src: url('https://fonts.gstatic.com/s/bebasneue/v8/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2') format('woff2'); // unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; // } // /* arabic *//* // @font-face { // font-family: 'Lalezar'; // font-style: normal; // font-weight: 400; // font-display: swap; // src: url(https://fonts.gstatic.com/s/lalezar/v12/zrfl0HLVx-HwTP82YaL4IxL0.woff2) format('woff2'); // unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; // } */ /* font stacks */ :root { --sans-serif: "LieblingPro", Helvetica, Arial, sans-serif; --serif: "Georgia", Cambria, Times New Roman, Times, serif; } /* brekaing , lines , ligatures */ p { word-break: break-word; word-wrap: break-word; -webkit-hyphens: unset; hyphens: unset; /* sets a minimum number of characters before and after the break */ -webkit-hyphenate-before: 2; -webkit-hyphenate-after: 3; hyphenate-lines: 3; /* enabling fancy ligatures when available */ -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; } /* @layer reset, base, components, tools, overrides; */ ::-moz-placeholder { color: var(--highlight-color,currentColor); } ::placeholder { color: var(--highlight-color,currentColor); } ::-moz-selection { background-color: var(--marker-color, #ff0); color: var(--bg-color); } ::selection, .u-select { background-color: var(--marker-color, #ff0); color: var(--bg-color); } [display="none"] { display: none; } html { /* scrollbar-width: none; */ } h1, h2, h3, h4, h5, h6, button { text-transform: uppercase; font-size: 1rem; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } h1 { font-size: 1.563rem; line-height: 1; } h2 { font-size: 1.375rem; } ul ul { padding-inline-start: 1.5rem; } a, a:visited { color: var(--link-color); text-decoration: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; text-decoration-color: currentColor; } /* // transition: 0.3s ease-in all; */ a:hover, a:visited:hover { color: var(--link-color-hover); text-decoration: underline; } body:has(.firstimer) { overflow: hidden; } body > #container { display: grid; position: relative; } /* min-height: 100dvh; */ @media (min-width: 1200px) { body > #container { padding-inline: 6rem } } @media (min-width: 768px) { body > #container { padding-inline: 3rem } } .main-header { background-color: var(--bg-color); } .main-header:after { content: " "; display: block; height: 0; border-top: 1px solid var(--gray); width: 100%; position: absolute; pointer-events: none; } @media (max-width: 768px) { .main-header:after { /* width: calc( 100% - 2 * var(--pad, 1rem) ); */ /* margin-inline: var(--pad, 1rem); */ } } main div:not([class]):empty { display: none; } main > header:after, main > section:after { /*TODO: WHAT IS */ /* content: " "; */ display: block; border-bottom: 1px solid var(--gray); /* margin-inline: var(--pad, 1rem); */ } main > header:first-child, main > section:first-child { border-top: 1px solid var(--gray); } main > section { max-width: 100%; } /* padding-block: calc(var(--pad, 1rem) / 1); */ @media (min-width: 768px) { main > section:first-of-type { padding-block-start: 0; } } main > section:last-of-type { /* padding-block-end: 0; */ } .mobile .main-footer { --fg-color: var(--white); --bg-color: var(--black); --link-color: var(--white); } .main-footer { color: var(--fg-color); background-color: var(--bg-color); padding-block: var(--pad, 1rem); position: relative; align-self: flex-end; } .main-footer:before { content: " "; display: block; height: 1rem; border-top: 1px solid var(--gray); /* margin-inline: var(--pad, 1rem); */ width: 100%; position: absolute; top: 0; left: 0; } @media (max-width: 768px) { .main-footer { justify-content: center } .main-footer:before { /* width: calc( 100% - 2 * var(--pad, 1rem) ); */ width: calc( 100% ); /* left: calc(var(--pad, 1rem) * -1); */ } } @media (max-width: 400px) { .main-footer { flex-flow: column nowrap; gap: var(--pad, 1rem) } .main-footer > * { max-width: unset; width: auto; } } @media only screen and (min-width: 800px) { .home:not(.mobile) #main { display: block; } .menu-main-link-home a { width: 6em; height: 1.2em; } .nav li { position: relative; } .nav li ul.sub-menu, .nav li ul.children { top: 100%; left: 0; position: absolute; visibility: hidden; z-index: 8999; background-color: #61caff; transition: 0.6s all; border: 0; box-shadow: 0 0; height: 0; opacity: 0; } .nav li:hover > ul { visibility: visible; height: 100%; opacity: 1; } } .modal, .popup { max-height: calc(100vh - 25px); max-width: calc(100vw - 25px); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-color); color: var(--fg-color); padding: 0 2.2em 1.4em; margin: 0 auto; text-transform: none; /* font-size: 1.2rem; */ line-height: 1.4; min-width: 60vw; display: flex; flex-flow: column nowrap; overflow: auto; z-index: 90000; } .modal-close { color: currentColor; font-size: 1.4em; position: fixed; top: 0; z-index: 200; right: 1rem; inset-inline-start: 1rem; border: 0; background: transparent; } .modal-close:after { content: "×"; font-size: 2rem; color: var(--black); cursor: pointer; } .poster .slick-slide img { -o-object-fit: cover; object-fit: cover; height: calc(100vh); width: 100%; position: relative; } .poster .slideshow a { cursor: col-resize; } .poster .slick-slide .img-desc { position: absolute; padding: 0.2rem 1rem; bottom: 2rem; font-size: 1.2rem; transform: translateX(calc(48vw + 1rem + 1px)); background: var(--grey-light); } area, area:-webkit-any-link { cursor: pointer; } .gtr-carousel { width: 100%; height: calc(80vh); /* display: flex; */ flex-flow: row nowrap; align-items: baseline; justify-content: space-around; background: var(--black); } .gtr-carousel .slick-list { /* padding:0 0 0 10% !important; */ padding: 0; } .gtr-carousel .item { background-color: var(--black); opacity: 0.7; } .gtr-carousel .item picture { height: 100%; display: block; } @media (min-width: 800px) and (min-aspect-ratio: 3/2) { .gtr-carousel .slick-slide { max-width: calc(calc(100vw / 2) - calc(100% / 16)); } } @media (min-width: 1340px) and (min-aspect-ratio: 3/2) { .gtr-carousel .slick-slide { max-width: calc(calc(100vw / 3) ); } } @media (min-aspect-ratio: 1572/865) and (min-width: 1200px) { .gtr-carousel .slick-slide { max-width: calc(20vw); } } @media (max-width: 800px) and (orientation: portrait) { .gtr-carousel .slick-slide { max-width: calc((100vw)); } .gtr-carousel .slick-slide img { margin: unset; width: 100%; -o-object-position: bottom; object-position: bottom; } } @media (min-aspect-ratio: 2/3) { .gtr-carousel .slick-slide { max-width: calc((100vw)); } } @media (max-width: 1200px) and (orientation: portrait) { .gtr-carousel .slick-slide { /* max-width: calc(calc(100vw / 2) - calc(100% / 32)); */ } } @media (max-width: 800px) and (max-aspect-ratio: 3/2) { .gtr-carousel .slick-slide img { -o-object-position: center; object-position: center; -o-object-fit: cover; object-fit: cover; min-width: 350px; } } .products.grid li img { width: 100%; height: auto; aspect-ratio: 1/1; } .artists-list a:not(:first-child):before { content: "/"; display: inline-block; display: table-cell; padding-inline: 0.4em; } .info-pop { background: var(--white); border: 2px solid var(--black); padding: 0; } .info-pop .content { min-height: 80vh; min-width: 80vw; padding: 4rem 1.8rem 0.8rem; font-size: 1.2rem; } .info-pop .content > * { display: block; margin: 0.8rem 0; } .info-pop p { margin: .8rem 0; } .info-pop ul li{ display: list-item; list-style: disc; margin-right: 1.6rem; margin-bottom: 0.3rem; } [hidden] { visibility: hidden; height: 0; display: none !important; } .u-flex { display: flex; } .t1-modal { border: 2px solid black; padding: 0; } .t1-modal .content{ display: grid; grid-template-rows: 3fr 1fr; height: 95vh; width: 95vw; } .t1-modal .content > * { overflow: hidden; } .t1-modal .content .rashut-gallery { height: 100%; width: 100%; padding: 2.4rem; /* display: flex; */ flex-flow: row nowrap; align-items: center; } .t1-modal .content .rashut-gallery .slick-controls { /* position: absolute; */ /* top: 0; */ /* width: 100%; */ height: 0; display: flex; } .t1-modal .content .rashut-gallery .slick-controls li { width: 0; } .t1-modal .content .rashut-gallery ul, .t1-modal .content .rashut-gallery li, .t1-modal .content .rashut-gallery slick-slide, .t1-modal .content .rashut-gallery slick-track, .t1-modal .content .rashut-gallery div, .t1-modal .content .rashut-gallery article, .t1-modal .content .rashut-gallery iframe, .t1-modal .content .rashut-gallery object, .t1-modal .content .rashut-gallery img { max-height: 100%; height: 100%; } .t1-modal .content .rashut-gallery .caption { display: block; text-align: center; width: 100%; } .t1-modal .content .rashut-gallery .slick-track { display: flex; align-items: center; } .t1-modal .content .rashut-gallery .slick-next { right: -1.4rem; } .t1-modal .content .rashut-gallery .slick-prev { left: -1.4rem; } .t1-modal .content .rashut-gallery iframe { min-height: 150px; width: 100%; } .t1-modal .content .rashut-gallery .slick-slide{ /* margin: auto 1rem; */ } .t1-modal .content .rashut-gallery .slick-center { margin: auto 1rem; } .t1-modal .content .rashut-gallery .slick-list li{ width: 100%; height: 100%; display: flex !important; flex-flow: column nowrap; } .t1-modal .content .rashut-gallery img { -o-object-fit: contain; object-fit: contain; } .t1-modal .content .details { display: grid; grid-template-columns: 1fr 1fr; font-family: 'LieblingProMedium'; } .t1-modal .content .details > * { border-top: 2px solid black; overflow-y: auto; } .t1-modal .rashut-deets { display: grid; grid-template-columns: minmax(6rem,1fr) 3fr; grid-template-rows: 1fr; border-left: 2px solid var(--black); /* text-align: center; */ } .t1-modal .rashut-deets > *:first-child{ display: flex; flex-flow: column nowrap; justify-content: flex-end; grid-template-rows: minmax(2rem,4fr) 1fr; } #container section *[class^=latest] { padding-block-end: 1em; } #container section *[class^=latest][data-view=grid] { gap: var(--pad, 1rem); } .griddy { /* user setting */ --min-column-size: 300px; --column-count: 2; --gap: var(--pad, 1rem); /* calculations */ } @media (min-width: 768px) { .griddy { --min-column-size: 200px; --column-count: 3; } } .griddy { --breakpoint: calc(var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1)) ); --column-size: calc((100% / var(--column-count)) - var(--gap)); display: grid; gap: 0; grid-template-columns: repeat( auto-fit, minmax( min(max(var(--column-size), (100% - var(--breakpoint)) * -999 ), 100%), 1fr) ); } .g-row { display: flex; font-size: 2rem; position: sticky; top: 0; } .g-row > *:first-child { padding: 0 1.2rem 0 2rem; background: var(--grey-light); } .artist-name { font-family: 'LieblingPro'; font-weight: 400; flex-grow: 3; white-space: nowrap; display: flex; align-items: center; } .artist-name__content { padding: 0 1rem; font-size: 2rem; } .rashut-p, .artist-p { padding: 1em; font-size: 0.9rem; display: block; align-items: flex-start; overflow-y: auto; } .artist-p { height: 80%; } .artist-images img { width: 100%; height: auto; } .full-panel { max-height: calc(100vh - 4.6rem); height: 100%; width: 100%; border-left: 2px solid var(--black); cursor: pointer; } .full-panel > *, .full-panel article :is(a, picture) { height: 80vh; } .full-panel img, .full-panel .soon { -o-object-fit: cover; object-fit: cover; /* object-fit: contain; */ -o-object-position: bottom; object-position: bottom; max-height: calc(100vh - 4.4rem); height: 100vh; /* width: 100%; */ /* min-width: 300px; */ } .full-panel:hover { opacity: 0.75; } .iframe-container { overflow: hidden; /* 16:9 aspect ratio */ padding-top: 56.25%; position: relative; } .iframe-container iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .qq_post_thumbs.column-qq_post_thumbs img { height: 100px; width: auto; } /* single product page // */ .single-product .product-text > * { padding-block: var(--pad, 1rem); } .single-product .product-text > *:first-child { padding-top: 0; } .related.products .swiper-wrapper { display: flex; flex-direction: row; gap: var(--pad, 1rem); width: 100%; } .price { font-weight: 200; } nav a { transition: 0.3s ease-in-out all; line-height: 1; color: var(--link-color, #727272); } nav a:hover { color: var(--fg-color, salmon); } nav button { color: var(--mg-color); background: transparent; cursor: pointer; padding-inline: 0; } nav button.transparent { text-decoration: underline; } [id="bio"] a { text-decoration: underline; } html { scroll-behavior: smooth; /* font-size: 67.5%; */ } body { font-family: var(--sans-serif, sans-serif); font-size: 16px; line-height: 1; color: var(--fg-color); background-color: var(--bg-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main :where(li, p) { line-height: 1.4; } #container > section:not(:first-of-type) { /* who is this for? */ /* margin-top: 3em; */ /* border-top: 1px solid var(--mg-color); */ } .woocommerce-notices-wrapper { padding: 1rem; } select { padding: 0.5rem; border: 1px solid var(--mg-color); background: var(--bg-color); border-radius: 1.2rem; color: var(--fg-color, white); } select, select option{ transition: all 0 steps(1,end); } select:active { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } button { border-width: 0; cursor: pointer; position: relative; } button:active { top: 1px; left: 1px; } button.menu-item, button.transparent { background: transparent; } main button, main .button { border-radius: 1.265rem; padding: 0.5em 0.8em; background: var(--fg-color); transition: all 0.3s ease-in-out; color: var(--bg-color); border: none; } /* border: 1px solid var(--fg-color); */ main button:hover, main .button:hover { background: var(--lead-color, var(--main-color, lime)); color: var(--bg-color); } button.btn-inline { background-color: transparent; padding: unset; display: inline; color: var(--mg-color); } button.btn-inline:hover { /* text-decoration: underline; */ color: var(--fg-color); background-color: transparent; } .nav-toggler:before, .nav-toggler:after, .nav-toggler { visibility: visible; width: 2.5rem; height: 2.5rem; /* min-height: 100%; */ /* background: url("../images/collapse.svg"); */ mix-blend-mode: difference; background-size: 100% 100%; content: "MENU"; flex-grow: 0; display: block; /* align-self: center; */ /* margin: 0px auto; */ cursor: pointer; transition: opacity 0.3s ease-in-out; } nav.mobile-menu { opacity: 0; transition: all 0.3s ease-in-out; } nav.mobile-menu:not(.expanded) { pointer-events: none; } nav.mobile-menu.expanded { opacity: 1; } body:has(nav.desktop-menu) main:before, body:has(nav.mobile-menu) main:before, body:has(nav.mobile-menu) #content:before { content: " "; position: fixed; top: 0; left: calc(var(--pad, 1rem) * -1 - 4px); width: calc(100vw + var(--pad, 1rem) + 4px); height: 100%; background-color: rgba(0,0,0,0.8); z-index: 5; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out; } body:has(nav.desktop-menu) main:before { background-color: rgba(0,0,0,0.9); } body:has(nav.desktop-menu.expanded) main:before, body:has(nav.mobile-menu.expanded) main:before, body:has(nav.mobile-menu.expanded) #content:before { z-index: 42; opacity: 1; pointer-events: auto; } @media (min-width: 756px) { body.shopi { --fg-color: var(--black); --bg-color: var(--white); --link-color: var(--fg-color) } } body.shopi:has(nav.desktop-menu) main:before { background-color: rgba(255,255,255,0.9); } /* toggler / menu button */ /* two cersion */ .close-button-container, .menu-button-container { display: flex; height: 2rem; width: 2rem; padding: 1rem; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; } #search-toggle, #menu-toggle-mobile, #menu-toggle-desktop { display: none; } .close-button, .close-button:before, .close-button:after, .menu-button, .menu-button:before, .menu-button:after { display: block; background-color: transparent; position: absolute; height: 0px; width: 2rem; transition: transform 0.3s steps(25, end); border-radius: 0; border-bottom: 1px solid var(--fg-color,white); } .menu-button { transition: all 0.3s ease-in; /* transition-delay: 0.015s; */ } .close-button:before, .menu-button:before { content: ''; transform: translateY(-8px); /* padding-bottom: 8px; */ border-bottom-width: 0; border-top: 1px solid var(--fg-color,white); } .close-button:after, .menu-button:after { content: ''; transform: translateY(8px); } .close-button, #menu-toggle-mobile:checked + .menu-button-container .menu-button, #menu-toggle-desktop:checked + .menu-button-container .menu-button { background: transparent; border-color: transparent; border-width: 0; transition-duration: 0.2s; /* padding-block: 12rem; */ /* opacity: 0; */ } .close-button:before, #menu-toggle-mobile:checked + .menu-button-container .menu-button:before, #menu-toggle-desktop:checked + .menu-button-container .menu-button:before { opacity: 1; padding-top: 0px; transform: rotate(45deg); margin-top: 0; } .close-button::after, #menu-toggle-mobile:checked + .menu-button-container .menu-button::after, #menu-toggle-desktop:checked + .menu-button-container .menu-button::after { margin-top: 0px; padding-top: 0; transform: rotate(-45deg); opacity: 1; } .nav-toggler:before { content: "OPEN MENU"; text-indent: -10000px; background-image: url("../images/collapse.svg"); } .nav-toggler:after { content: "CLOSE MENU"; text-indent: -10000px; background-image: url("../images/expand.svg"); position: absolute; top: 0; left: 0; } .nav-toggler.collapsed:before { opacity: 1; } .nav-toggler.collapsed:after { opacity: 0; } .nav-toggler.expanded:before { opacity: 0; } .nav-toggler.expanded:after { opacity: 1; } /* .menu-mobile.expanded { */ /* .nav-toggler { */ /* display: none; */ /* } */ /* .hidden { */ /* display: unset; */ /* } */ /* } */ /* ul.social { */ /* line-height: 1; */ /* } */ /* MOBILE MENU */ nav.mobile-menu { --fg-color: var(--white); --bg-color: var(--black); --link-color: var(--fg-color); --list-item-height: calc(3rem + 0px); --list-item-height-mobile: 3.4rem; top: calc(var(--header-height) + 0px + var(--wp-admin--admin-bar--height,0px)); background-color: var(--bg-color); max-height: 100vh; } /* transition-duration: 1s; */ nav.mobile-menu ul { align-items: center; } nav.mobile-menu .menu-item { /* position: relative; */ width: 100%; transition-duration: 0.6s; } nav.mobile-menu .menu-item:after { content: " "; position: absolute; width: 100%; height: 1px; display: block; background: black; left: 0; /* border-bottom: 1px solid var(--bg-color, #000); */ } nav.mobile-menu .menu-item:last-of-type:after { content: none; } nav.mobile-menu .menu-item a { font-size: 1rem; font-weight: 500; display: flex; align-items: center; height: 3.5rem; height: var(--list-item-height, 3.4rem); /* padding-block: calc(var(--pad, 1rem) / 0.5 ); */ width: 100%; justify-content: flex-start; padding-inline-start: var(--pad, 1rem); /* transform: translateX(50vw); */ /* position: relative; */ /* left: 50%; */ /* &:has(.search-input:focus) .menu-item:not(.menu-item--search) { */ /* opacity: 0; */ /* height: 0.000001px; */ /* padding: 0; */ /* margin: 0; */ /* overflow: hidden; */ /* } */ } nav.mobile-menu .menu-item { margin-bottom: var(--pad, 1rem); } nav.mobile-menu .menu-item:first-of-type { border-top: 1px solid var(--mg-color); } nav.mobile-menu .menu-item:last-of-type { border-bottom: 1px solid var(--mg-color); margin-bottom: 0; } /* search button stuff */ nav.mobile-menu .menu-item:has(~ .menu-item--search) { display: inline-block; height: 3.5rem; height: var(--list-item-height, 3.4rem); padding: 0px; margin: 0; transition-property: height, padding, margin, color; transition-duration: 0.6s; transition-delay: 0s, 0s, 0s, 0.4s; } nav.mobile-menu .menu-item:has(~ .menu-item--search), nav.mobile-menu .menu-item:has(~ .menu-item--search) a { transition-property: all, color; transition-duration: 0.6s; transition-delay: 0s, 0.4s; color: var(--fg-color); } nav.mobile-menu .menu-item:has(~ .menu-item--search):after { transition-delay: 0.4s; transition-duration: 0.6s; background-color: var(--mg-color); height: 1px; } nav.mobile-menu .menu-item:has(~ .menu-item--search a.active) { transition: all 0.6s ease-in-out; height: 0px; display: unset; overflow: hidden; padding: 0; margin-bottom: 0; transition-property: height, padding, margin, color; transition-duration: 0.6s; transition-delay: 0.2s, 0.2s, 0.2s, 0s; } nav.mobile-menu .menu-item:has(~ .menu-item--search a.active), nav.mobile-menu .menu-item:has(~ .menu-item--search a.active) a { color: transparent !important; } nav.mobile-menu .menu-item:has(~ .menu-item--search a.active):after { transition-delay: 0s; background-color: transparent; height: 0px; } nav.mobile-menu .menu-item--search.active .menu-searcher { width: 70%; right: 1rem; position: relative; } nav.mobile-menu .menu-item:has(.menu-searcher) { transition: all 0.2s ease-in-out; height: 0px; /* display: unset; */ overflow: hidden; padding: 0; margin: 0; } nav.mobile-menu .menu-item:has(.menu-searcher):not(.hidden){ height: var(--list-item-height, 3.4rem); } .search-input { background-color: transparent; border: 1px solid transparent; outline: 1px solid transparent; color: var(--fg-color,white); border-bottom: var(--fg-color,white) 1px solid; padding-block: 0; line-height: 1; } .search-results { height: 100%; overflow: auto; /* &:not(:empty) { */ /* border-top: solid 1px var(--bg-color); */ /* padding-top: var(--pad, 1rem); */ /* gap: var(--pad, 1rem); */ /* display: flex; */ /* flex-flow: column nowrap; */ /* } */ } .search-results article { margin-bottom: var(--pad, 1rem); } .search-results article h2 { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .search-results article a { display: inline-block; line-height: 1.2 } .search-results article:after { content: " "; position: absolute; width: 100%; height: 1px; display: block; background: black; left: 0; margin-top: var(--pad, 1rem); /* border-bottom: 1px solid var(--bg-color, #000); */ } /* article[data-type=post] { */ /* --return-type: "news!"; */ /* } */ /* article[data-type=page] { */ /* --return-type: ""; */ /* } */ /* article[data-type=release] { */ /* --return-type: "release"; */ /* --bg-color: #ff0; */ /* --fg-color: #000; */ /* } */ /* article[data-type=video] { */ /* --return-type: "video"; */ /* --bg-color: #f39; */ /* --fg-color: #000; */ /* } */ /* article[data-type=artist] { */ /* --return-type: "artist"; */ /* } */ /* article[data-type=product] { */ /* --return-type: "merch"; */ /* --bg-color: #fff; */ /* --fg-color: #000; */ /* } */ .search-results article { position: relative; } /* --return-type: attr(data-type); */ .search-results article header:after { /* such a nice solve! */ /* content: var(--return-type,'wtf'); */ position: absolute; top: 0; right: 0.5rem; display: flex; align-items: center; height: 1rem; font-weight: 600; font-size: 0.875rem; color: var(--fg-color); background-color: var(--bg-color); padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .input-cohesive { background-color: transparent; border: 0px solid var(--mg-color); color: var(--fg-color); border-bottom: var(--fg-color) 1px solid; padding-block: 0; line-height: 1; outline: 0; } .input-cohesive:focus { border-color: var(--fg-color); } .menu-item--search a:before { content: ""; padding-right: 0; display: inline-block; width: 0; transition: all 0.3s ease-out; /* overflow: hidden; */ } .menu-item--search a.active:before { content: "←"; padding-right: 0.5rem; width: 1rem; } .menu-item--search:has(a.active) { width: 100%; display: flex; flex-flow: row nowrap; align-items: baseline; gap: calc(var(--pad, 1rem) / 2); padding-inline: calc(var(--pad, 1rem) / 2 ); transition: all 1.6s ease-in-out; } .menu-item--search:has(a.active) a { width: 100%; display: flex; flex-flow: row nowrap; align-items: center; font-weight: 600; /* margin-right: 50%; */ } .menu-item--search:has(a.active) .menu-searcher { width: 50%; } .menu-searcher { width: 0px; overflow: hidden; transition: all 0.6s ease-in-out 0.3s; } .menu-searcher.hidden { /* display: inline-block; */ /* width: 0px; */ overflow: hidden; transition-delay: 0s; transition-duration: 0.03s; } .separator { content: ""; display: block; height: calc(var(--list-item-height) - 2 * var(--pad, 1rem)); transition-delay: 0.4s; transition-duration: 0.6s; background-color: var(--mg-color); width: 1px; } /* DESKTOP MENU */ nav.desktop-menu { --fg-color: var(--white); --bg-color: var(--black); --link-color: var(--fg-color); --list-item-height: calc(3.41rem + 1px); --list-item-height: calc(3.4rem); --list-item-height-mobile: 3.4rem; position: absolute; top: calc(var(--header-height) - 0px); background-color: var(--bg-color); max-height: var(--list-item-height); transition: all 0.3s ease-in-out; opacity: 0; } nav.desktop-menu.expanded { opacity: 1; } nav.desktop-menu:not(.expanded) { pointer-events: none; } nav.desktop-menu #menu-main-desktop { height: var(--list-item-height); } nav.desktop-menu .menu-item { position: relative; transition: all 0.66s ease-in-out; width: 100%; transition-delay: 0s; transition-duration: 0.2s; padding-inline: 2px; } nav.desktop-menu .menu-item:first-child { padding-left: 0; } nav.desktop-menu .menu-item a { width: 100%; line-height: 1; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; height: 100%; padding-block: var(--pad, 1rem); padding-block-start: calc( var(--pad, 1rem) + 2px); transition: all 0.6s ease-in-out; transition-delay: 0s; transition-duration: 0.2s; text-decoration: none !important; } /* &:not(:last-child):after { */ nav.desktop-menu .menu-item .separator { content: ""; display: block; position: absolute; top: var(--pad, 1rem); height: calc(var(--list-item-height) - 2 * var(--pad, 1rem)); right: 0; transition-delay: 0.4s; transition-duration: 0.6s; background-color: var(--mg-color); width: 1px; } nav.desktop-menu .menu-item:hover { transition-delay: 0s; transition-duration: 0.2s; } nav.desktop-menu .menu-item:hover a { transition-delay: 0s; transition-duration: 0.1s; color: var(--bg-color); background-color: var(--fg-color); } nav.desktop-menu .menu-item:hover a:active { color: var(--fg-color); background-color: var(--bg-color); } nav.desktop-menu .menu-item:hover.blinking:hover a { color: unset; background-color: unset; } nav.desktop-menu .menu-item.active a { color: var(--fg-color); background-color: var(--bg-color); } nav.desktop-menu .menu-item.active:hover a { color: var(--bg-color); background-color: var(--fg-color); } nav.desktop-menu .menu-item.current-menu-item a { text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 0.25rem; } nav.desktop-menu .menu-item:has(~ .menu-item--search ) { transition: all 0.66s ease-in-out; transition-property: width, padding, margin, color, background-color; transition-delay: 0.2s, 0.2s, 0.2s, 0s, 0s; display: unset; } nav.desktop-menu .menu-item:has(~ .menu-item--search ).animating-in { width: 1px; } nav.desktop-menu .menu-item:has(~ .menu-item--search ):after { transition-delay: 0s; } nav.desktop-menu .menu-item:has(~ .menu-item--search a.active) { transition: all 0.66s ease-in-out; transition-property: width, padding, margin, color; transition-delay: 0s, 0.2s, 0.2s, 0.4s; width: 0px; display: unset; overflow: hidden; padding: 0; margin: 0; } nav.desktop-menu .menu-item:has(~ .menu-item--search a.active), nav.desktop-menu .menu-item:has(~ .menu-item--search a.active) a { color: transparent !important; } nav.desktop-menu .menu-item:has(~ .menu-item--search a.active):after { transition-delay: 0s; background-color: transparent; width: 0px; } nav.desktop-menu:has(.menu-item--search a.active) .separator { background-color: transparent; width: 0px; } nav.desktop-menu .menu-item--search { justify-content: flex-start; } nav.desktop-menu .menu-item--search, nav.desktop-menu .menu-item--search a { transition-delay: 0.4s; } nav.desktop-menu .menu-item--search.animating, nav.desktop-menu .menu-item--search a.animating { justify-content: flex-start; } nav.desktop-menu .menu-item--search .menu-searcher { transition-delay: 0.6s; display: unset; opacity: 1; } nav.desktop-menu .menu-item--search .menu-searcher.hidden, nav.desktop-menu .menu-item--search .menu-searcher.hidden * { opacity: 0; transition-delay: 0s; display: unset; width: 0px !important; overflow: hidden; } nav.desktop-menu .menu-item--search a.active { justify-content: flex-start; transition-delay: 0s; } .shopi .desktop-menu, .shopi .mobile-menu { --fg-color: var(--black); --bg-color: var(--white); --link-color: var(--fg-color); } .htmx-indicator.htmx-request { display: flex; justify-content: center; align-items: center; } .htmx-indicator:not(.htmx-request) { height: 0; opacity: 0; } .cart-drawer { background-image: url("../images/shopping-bag.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1000; width: 2rem; height: 2rem; } .cart-drawer .cart-item-count { position: relative; bottom: -4px; } .banner-image { height: 100vh; width: 100%; opacity: 1; overflow: hidden; perspective: 200px; perspective-origin: center center; transform-style: preserve-3d; /* transition: height 1.8s; */ transition: opacity 1.8s; cursor: pointer; } .banner-image * { max-width: 100%; } body.scrolled .banner-image, .welcome.welcome-back { height: 0 !important; opacity: 0 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; /* display: none; */ pointer-events: none !important; } .banner-image figure, .banner-image video { height: 100%; margin-bottom: -67px; background-position: 50% 23%; } .welcome-btn { height: 4rem; width: 8rem; font-size: 200%; display: block; } .welcome-mat { line-height: 2.4; height: 67px; margin: 0 auto; padding: 0 0.2em; /* border-top: #000 2px solid; */ height: 100vh; width: 100%; max-width: var(--max-width); /* position: absolute; */ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-color: var(--grey-light-mod); transition: all 0.6s ease-in-out; } .welcome-mat > * { max-width: 50vw; max-height: 40vh; } @media (max-width: 800px) { .welcome-mat > * { max-width: 80vw; max-height: 70vh; } } .welcome-mat a, .welcome-mat a:visited { color: #000; } .welcome-mat .welcome-notice a{ /* color: var(--grey-light); */ transition: all 0.3s ease-in-out; color: var(--orange); } .mobile .welcome-btn { height: 100vh; width: 100vw; bottom: 0; } html:not(*:has(.welcome-mat.firstimer)) { overflow-y: auto; } /* TODO: are we using w1 ? or the other thing */ .w1 { height: 100vh; width: 100vw; opacity: 1; overflow: hidden; /* perspective: 200px; */ /* perspective-origin: center center; */ /* transform-style: preserve-3d; */ /* transition: height 1.8s; */ transition: all 1.8s; cursor: pointer; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } .w1 a { display: flex; line-height: 1; flex-flow: row nowrap; justify-content: center; align-items: center; aspect-ratio: 1/1; padding: var(--pad, 1rem); transform: scale(2.4); transform-origin: center center; border-radius: 100%; border: 1px solid var(--fg-color); } *:has(> .w1) > :not(.w1) { opacity: 0; pointer-events: none; } .w1.welcome-back { height: auto; width: auto; display: flex; } .w1.welcome-back a { display: revert; transform: scale(1); padding: 0px; border-width: 0px; aspect-ratio: unset; } *:has(> .w1.welcome-back) > :not(.w1) { opacity: 1; pointer-events: auto; } #loader { background: url("../images/logo.svg"); background-repeat: no-repeat; width: 128px; height: 128px; margin: 0 auto; text-align: center; position: fixed; left: 50%; transform: translateX(-50%) translateY(-50%); top: 35%; } .firstimer #content { min-height: 0vh; overflow: hidden; height: 0; } main { /* display: flex; */ /* min-height: calc(100vh - var(--header-height, 8rem) - var(--footer-height, 142px)); */ min-height: 60vh; flex-flow: column nowrap; container-type: inline-size; container-name: main; font-weight: 300; padding-inline: 0; } main > *:not(.breakout) { /* margin-inline: var(--pad, 1rem); */ } @media (min-width: 756px) { main { min-height: calc(100vh - var(--header-height, 8rem) - var(--footer-height, 142px)) /* max-width: calc(100dvw - 10px); */ /* width: 100dvw; */ } main > *:not(.breakout) { /* padding-inline: revert; */ } } article#artist-main-content:before { content: " "; border-top: 1px solid var(--mg-color); display: inline-block; margin: 0; width: 100%; height: var(--pad, 1rem); } article section[id] :not(nav) li:after { content: " "; border-bottom: 1px solid var(--mg-color); display: inline-block; margin: 0; width: 100%; height: 1px; } article section[id]:last-of-type :not(nav) li:last-of-type:after { content: none; } article picture img { height: 100%; } main:has(.top-header) { position: relative; } .mobile .top-header { /* --bg-color: var(--black,black); */ /* --fg-color: var(--white,white); */ /* --link-color: var(--fg-color); */ background-color: var(--bg-color); color: var(--fg-color); position: sticky; top: var(--header-height); z-index: 10; } /* // TODO: set or forgot */ /* a[href]:is(a):is(a) { */ /* text-decoration: underline !important; */ /* } */ @media screen and (max-width: 1500px) and (min-width: 768px) { body { /* zoom: 0.9; */ font-size: 14px; } } .error404 #content, Z.search-results #content { height: calc(100vh - var(--header-height, 3rem) - var(--footer-height, 2px)); } input { outline: 1px solid var(--mg-color, hsl(203, 30%, 26%)) ; outline-offset: -1px ; border-width: 1px; } input:not(:-moz-placeholder):valid { border-bottom-width: 2px; border-bottom-color: var(--clr-success); } input:not(:placeholder-shown):valid { border-bottom-width: 2px; border-bottom-color: var(--clr-success); } input:not(:-moz-placeholder):invalid { border-bottom-width: 2px; border-bottom-color: var(--clr-error); } input:not(:placeholder-shown):invalid { border-bottom-width: 2px; border-bottom-color: var(--clr-error); } /* select:focus-visible, */ input:focus:invalid { border-bottom-width: 2px; border-bottom-color: var(--clr-warning) } :root { --clr-success: hsl(143, 100%, 26%); --clr-warning: hsl(43, 100%, 66%); --clr-error: hsl(348, 55%, 49%); } /** * Swiper 11.1.8 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: July 26, 2024 */ @font-face { font-family: swiper-icons; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal } :root { --swiper-theme-color: #007aff } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1 } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; /* padding: 0; */ z-index: 1; display: block } .swiper-vertical>.swiper-wrapper { flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial); box-sizing: content-box } .swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper { transform: translate3d(0px,0,0) } .swiper-horizontal { touch-action: pan-y } .swiper-vertical { touch-action: pan-x } .swiper-initialized .swiper-slide { flex-shrink: 0; /* width: 100%; */ height: 100%; position: relative; transition-property: transform; display: block } .swiper-slide-invisible-blank { visibility: hidden } .swiper-autoheight,.swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform,height } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d { perspective: 1200px } .swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide { transform-style: preserve-3d } .swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start } .swiper-css-mode.swiper-horizontal>.swiper-wrapper { scroll-snap-type: x mandatory } .swiper-css-mode.swiper-vertical>.swiper-wrapper { scroll-snap-type: y mandatory } .swiper-css-mode.swiper-free-mode>.swiper-wrapper { scroll-snap-type: none } .swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: none } .swiper-css-mode.swiper-centered>.swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999 } .swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center; scroll-snap-stop:always} .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start:var(--swiper-centered-offset-before)} .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper > :before { height:100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start:var(--swiper-centered-offset-before)} .swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper > :before { width:100%; min-width: 1px; height: var(--swiper-centered-offset-after) } .swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: rgba(0,0,0,.15) } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color,var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff } .swiper-lazy-preloader-black { --swiper-preloader-color: #000 } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } } @layer componentsz { .bt { border-top: 1px solid var(--mg-color); } .bb { border-bottom: 1px solid var(--mg-color); } a.button { padding: 1rem; line-height:1.2; background: var(--color-selected, var(--fg-color)); color: var(--bg-color); border-color: var(--bg-color); border-radius: 1.7rem; font-weight: bold; display: inline-block; } a.button:hover { background: var(--main-color); color: var(--bg-color); } .entry-title, .artists article header a:focus { view-transition-name: artist-name; } .product_title { view-transition-name: product-name; } .top-header { padding-block: var(--pad, 1rem); line-height: 1; } .swiper-nav { /* position: absolute; */ /* left: 0; */ /* width: 100%; */ /* height: var(--item-height, 2.4rem); */ z-index: 10; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: var(--pad, 1rem); } .swiper-nav .swiper-button-prev, .swiper-nav .swiper-button-next { color: var(--fg-color); background-color: transparent; padding: 0; margin: 0; height: unset; } .swiper-nav .swiper-button-prev.swiper-button-disabled, .swiper-nav .swiper-button-next.swiper-button-disabled { opacity: 0.04; } /* single artist page */ .prev-link a:before { content: '←'; font-weight: 300; padding-inline-end: 0.5rem; } .next-link a:after { content: '→'; font-weight: 300; padding-inline-start: 0.5rem; } .artists-nav *, .artist-header * { transition: all 0.2s ease-in-out; } .artists-nav .prev-link a, .artists-nav .next-link a, .artist-header .prev-link a, .artist-header .next-link a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; overflow: hidden; transition: 0.2s all ease-in-out; } .artists-nav .prev-link a:after, .artists-nav .prev-link a:before, .artists-nav .next-link a:after, .artists-nav .next-link a:before, .artist-header .prev-link a:after, .artist-header .prev-link a:before, .artist-header .next-link a:after, .artist-header .next-link a:before { display: none; content: ''; /* visibility: visible; */ /* opacity: 1; */ } .artists-nav .prev-link a span, .artists-nav .next-link a span, .artist-header .prev-link a span, .artist-header .next-link a span { visibility: hidden; opacity: 0; } .artists-nav .prev-link:hover a span, .artists-nav .next-link:hover a span, .artist-header .prev-link:hover a span, .artist-header .next-link:hover a span { opacity: 1; visibility: visible; text-decoration: underline; } .artists-nav .prev-link:hover a:after, .artists-nav .prev-link:hover a:before, .artists-nav .next-link:hover a:after, .artists-nav .next-link:hover a:before, .artist-header .prev-link:hover a:after, .artist-header .prev-link:hover a:before, .artist-header .next-link:hover a:after, .artist-header .next-link:hover a:before { text-decoration: none; } .artists-nav.artists-footer-nav a span, .artist-header.artists-footer-nav a span { opacity: 1; visibility: visible; } .artists-nav .prev-link a:before, .artist-header .prev-link a:before { display: inline-block; content: '←'; font-weight: 300; padding-inline-end: 0.5rem; } .artists-nav .prev-link a:after, .artist-header .prev-link a:after { content: ''; display: inline-block; padding-inline-end: 2rem; } .artists-nav .next-link, .artist-header .next-link { justify-content: end; } .artists-nav .next-link a:after, .artist-header .next-link a:after { display: inline-block; content: '→'; font-weight: 300; padding-inline-start: 0.5rem; } .artists-nav .next-link a:before, .artist-header .next-link a:before { content: ''; display: inline-block; padding-inline-start: 2rem; } @media (max-width: 768px) { .artists-nav { display: flex; flex-flow: column nowrap; } .artists-nav .prev-link, .artists-nav .next-link { display: flex; } .artists-nav .prev-link a, .artists-nav .next-link a { visibility: visible; opacity: 1; } .artists-nav .prev-link:last-child, .artists-nav .next-link:last-child { border-top: 1px solid var(--mg-color); } } .inner-nav { z-index: 10; position: relative; } .inner-nav li { transition: 0.1s all ease-in-out; font-weight: 400; border-color: transparent; cursor: pointer; } .inner-nav li:has(a[href*=by-artist]):hover, .inner-nav li:has(a[href*=shop]):hover { color: var(--bg-color, #000); background-color: var(--fg-color, #fff); } .inner-nav li:has(a[href*=by-artist]):hover a, .inner-nav li:has(a[href*=shop]):hover a { color: var(--bg-color); } .inner-nav li:not(.active) a{ color: var(--mg-color); } .inner-nav li.active { font-weight: 500; } .inner-nav li:hover, .inner-nav li.active { border-color: var(--fg-color); border-bottom-width: 1px; } .inner-nav li:hover a, .inner-nav li.active a { color: var(--fg-color); text-decoration: none !important; } .inner-nav li { padding: calc(var(--pad, 1rem) / 1); line-height: 1; } @media (min-width: 768px) { .inner-nav li { /* padding-top: 0; */ } } #artist-main-content section li header { margin-block: calc(var(--pad, 1rem) / 1); } #artist-main-content section li header:last-child { /* margin-block-end: 0; */ } #artist-main-content section li header a:first-child { font-weight: 600; display: block; text-transform: uppercase; } @media (min-width: 768px) { #artist-main-content { height: calc(100% - 4rem) } } .artist-bio > * { padding-inline: var(--pad, 1rem); } .artist-bio section{ padding-block: var(--pad, 1rem); } .artist-bio section:first-child { padding-block-start:0; } .artist-bio section h3:first-child { line-height: 1; padding-block: 0 var(--pad, 1rem); } .bang-header, .artist-header { padding: calc(var(--pad) / 1 ); } @media (min-width: 768px) { .bang-header, .artist-header { padding-inline: 0 } } .bang-header, .bang-header *, .artist-header, .artist-header * { line-height: 1; transition: all 0.2s ease-out; } .bang-header h1, .artist-header h1 { font-size: 1rem; font-weight: 600; } .main-title, .artist-title { font-size: 1rem; font-weight: 600; } .main-title .releasing-artist, .artist-title .releasing-artist { font-weight: 300; } .list-title { color: var(--fg-color); } .scrolled header:has(.artist-header) { /* padding-bottom: 1rem; */ } /* todo: sorder is actually ordering */ .sorter button { background: transparent; color: var(--mg-color); cursor: pointer; padding: 0; text-transform: initial; } .sorter button:hover, .sorter button.active, .sorter button.current { color: var(--fg-color); background: transparent; } .sorting-btn-alg { font-weight: 300; } .sorting-btn-alg:hover { text-decoration: underline; } /* lazy images , used for artist thumbnails mostly data-view=thumbs */ .lazy-image { background-size: cover; background-position: center; position: relative; /* filter: blur(10px); */ image-rendering: pixelated; } .lazy-image img { opacity: 0; transition: opacity 0.3s ease-in-out; } .lazy-image:before { content: ""; position: absolute; inset: 0; opacity: 0; animation: pulse 1.9s infinite ease-in-out; background-color: white; } .lazy-image.loaded::before, .slick-track:not(:has(.slick-slide):not(.slick-cloned) .lazy-image.loaded) .slick-cloned .lazy-image::before { animation: none; content: none; } .lazy-image.loaded, .slick-track:not(:has(.slick-slide):not(.slick-cloned) .lazy-image.loaded) .slick-cloned .lazy-image { filter: blur(0px); background: transparent !important; opacity: 1; } .lazy-image.loaded img, .slick-track:not(:has(.slick-slide):not(.slick-cloned) .lazy-image.loaded) .slick-cloned img { opacity: 1; } @keyframes pulse { 0% { opacity: 0; } 50% { opacity: 0.2; } 100% { opacity: 0; } } @media screen and (max-width: 768px) { .artists.sorted[data-view=thumbs] { display: flex !important; } } .sorted:not(.artists)[data-view=thumbs] .article-title { font-weight: 600; } @media (max-width: 768px) { .sorted:not(.artists)[data-view=thumbs] article { border-bottom: 1px solid var(--mg-color); } } .sorted[data-view=list] { display: flex !important; flex-flow: column nowrap; gap: 0 !important; padding-top: 0 !important; padding-inline: 0 !important; } .sorted[data-view=list] article { width: 100%; aspect-ratio: unset; border-bottom: 1px solid var(--mg-color); flex-flow: row nowrap; /* gap: 1rem; */ cursor: pointer; padding: calc(var(--pad, 1rem) / 1); } .sorted[data-view=list] article:last-child { border-bottom: 0px solid var(--mg-color); } .sorted[data-view=list] article header { text-align: left; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: calc(var(--pad, 1rem) / 2); width: 100%; } .sorted[data-view=list] article header :nth-child(n+2) { text-align: right; } .sorted[data-view=list] article header a { width: 100%; } .sorted[data-view=list] article picture { display: none; height: 4rem; margin-left: auto; } .sorted[data-view=list] article .yt-lazyload { display: none; } .sorted[data-view=list] article:hover { /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */ /* background: linear-gradient(45deg, #D422B1, #FFCE00, #22A9D4);*/ /* background-size: 400% 400%; */ /* animation: gradient 11s ease infinite; */ /* animation: gradient2 10s ease infinite;*/ } .sorted[data-view=list] article:active, .sorted[data-view=list] article:has(*:focus-visible), .sorted[data-view=list] article:has(*:active) { animation: blink 0.26s steps(1, end) 2; animation-iteration-count: 3; animation-timing-function: step-end; } .sorted[data-view=list].latest-videos { flex-flow: row wrap; } .sorted[data-view=list].latest-videos article { width: 100%; display: flex; flex-flow: row nowrap; /* margin-top: 1rem;*/ padding-block: 1rem; } .sorted[data-view=list].latest-videos article:nth-child(1) { border-top: none; } .sorted[data-view=list].latest-videos article:nth-child(2) { /* border-top: 1px solid var(--mg-color); */ } .sorted[data-view=list].latest-videos article a.yt-lazyload { width: 25%; } /* single video page */ .video-article { min-width: clamp(200px, 100%, 80vw); } .merch-item, .merch-item img { /* aspect-ratio: 1/1;*/ max-height: 100%; height: auto; } .single-product .product-deets { grid-template-areas: "gallery header text"; /* grid-area: "gallery / header / text" */ gap: 1rem; min-height: 40rem; } .single-product .product-deets .gallery { grid-area: gallery; } .single-product .product-deets header { grid-area: header; } .single-product .product-deets .product-text { grid-area: text; } @container main (min-width: 768px) { .single-product .product-deets { grid-template-areas: "gallery text header " } .single-product .product-deets header .entry-title { display: none; } } @media (max-width: 800px) and (min-width: 768px) { .single-product .product-deets header .entry-title { display: none; } } .single-product .product-deets .product-gallery { display: flex; flex-flow: row wrap; gap: 0; } @media (min-width: 768px) { } .single-product .product-deets form { display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; gap: calc(var(--pad, 1rem) / 2); } .single-product .product-deets form table .w-full * { width: 100%; } .single-product .product-deets .quantity { display: none; } .single-product .product-deets .single_add_to_cart_button { width: 100%; min-width: 12rem; font-size: 1.2rem; font-weight: bold; } .single-product .add-to-cart { background-color: var(--selected-color, var(--fg-color)); } .single-product .add-to-cart:hover { background-color: var(--fg-color, var(--fg-color)); color: var(--selected-color, var(--bg-color)); } .woocommerce-message a, .woocommerce-message a:hover{ border: none; background: transparent; color: var(--fg-color); text-decoration: underline; text-shadow: 1px 1px 1px var(--bg-color) 2px 2px 1px var(--fg-color); padding: 0; } :has(>.onsale) { position: relative; } :has(>.onsale) .onsale { position: absolute; top: 3px; left: 3px; z-index: 10; font-size: 1.1rem; background-color: var(--fg-color); color: var(--bg-color); padding: calc(0.5 * var(--pad)) calc(0.25 * var(--pad)); } :has(>.onsale):hover .onsale { background-color: var(--bg-color); color: var(--fg-color); } .back-to { position: relative; } .back-to:before { content: "←\00a0\00a0 Back to"; display: inline-block; padding-inline-end: 0.25rem; } /* main page fan */ /* elevator page */ .news-items { /* --item-height is later multiplies by 10 */ --item-height: 3rem; } @media (max-width: 1441px) { .news-items { /* --item-height: 1.8rem */ } } .release-news { --timing: 0.4s; --timing-delay: 0.4s; --transition-out-delay: 0.2s; } /* --pad: 4rem; */ .release-news li, .release-news picture, .release-news img, .release-news header { transition: all var(--timing) ease-out; will-change: opacity, height, margin, padding; transition-property: opacity, height, margin, padding; transition-delay: calc(var(--timing) + var(--transition-out-delay)), var(--transition-out-delay), var(--transition-out-delay), var(--transition-out-delay); } .release-news li { background-size: cover; background-position: center center; background-repeat: no-repeat; /* transition: all 0.3s ease-in !important; */ height: var(--item-height, 2.4rem); cursor: pointer; overflow: hidden; } .release-news li header { padding-inline: 0; padding-block: calc(var(--pad, 1rem) / 1 ); font-weight: 900; line-height: 1; } .release-news li .article-header { position: relative; top: 0; margin-block-start: 0; margin-block-end: 0; background-color: inherit; width: calc(100% - var(--pad, 1rem) * 2); left: calc(var(--pad, 1rem) / 1); /* margin-block-start: auto; */ /* margin-block-end: -1.4rem; */ } .release-news li .news-btn { position: absolute; top: 1rem; right: 1rem ; opacity: 0; font-weight: 400; pointer-events: none; transition: 0.05s; transition-delay: 0.05s; } .release-news li .news-btn:active { left: unset; top: calc(1rem + 1px); right: calc(1rem - 1px) } .release-news + .swiper-nav { display: none; } /* TODO: */ /* add .elevator-running to body when setup_news_elevator(); */ /* but use it? */ .elevator-running li:not(.selected) { /* transition-delay: 0s; */ transition-property: opacity, height, margin, padding; transition-delay: 0s, var(--transition-out-delay), var(--transition-out-delay), var(--transition-out-delay); } .elevator-running li:not(.selected), .elevator-running li:not(.selected) picture, .elevator-running li:not(.selected) img { transition-delay: 0s, var(--transition-out-delay), var(--transition-out-delay), var(--transition-out-delay); } .elevator-running li:not(.selected) img, .elevator-running li:not(.selected) source { opacity: 0; } .elevator-running .selected { position: relative; background-size: 100%; /* background-position: 0% 0%; */ /* height: calc(100vw - 2.4rem); */ /* height: calc(100vw - 2.4rem); */ height: calc(100vw + 3rem); } /* height: calc(100vw - 1rem); */ /* background-image: attr(data-img); */ .elevator-running .selected:hover .news-btn { opacity: 0.8; transition-delay: 0.001s; pointer-events: all; } .elevator-running .selected:hover .news-btn:hover { opacity: 1; transition-delay: 0s; } .elevator-running .selected picture, .elevator-running .selected img { opacity: 1; aspect-ratio: 1/1; height: max(20rem, 100vw - 1.4rem - var(--pad, 1rem)); height: max(20rem, 100vw); height: 100vw; width: 100%; /* transition-delay: 0s !important; */ /* transition-delay: 6s, 0s, 0s, 0s, 0s, 0s, 0s; */ } .elevator-running .selected picture { /* margin-block-end: -3rem; */ } @media (min-width: 920px) { .elevator-running .selected, .elevator-running .selected img, .elevator-running .selected picture { /* height: calc(50vw - 2.4rem - var(--pad, 1rem) * 2); */ } } .elevator-running .selected .article-header { position: relative; /* top: -2.4rem; */ /* margin-block-start: auto; */ /* margin-block-end: -1.4rem; */ } .elevator-running .animating picture, .elevator-running .animating img { opacity: 0; /* transition-property: opacity, height, margin, padding; */ transition-delay: 0s, var(--transition-out-delay), var(--transition-out-delay), var(--transition-out-delay); /* // transition-duration: var(--timing), var(--timing), var(--timing); */ transition-duration: 0.3s, var(--timing), var(--timing), var(--timing); } .elevator-running .fade-it-out { opacity: 0; } /* DESKTOP Elevator becomes a monitor, or train, or billboard or whatever */ @media (min-width: 756px) { .release-news { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; --item-height-tall-desk: calc(2.2rem); /* almost --item-height == 2.2 */ min-height: calc(var(--item-height-tall-desk, 3rem) * 10); } .release-news li { display: grid !important; grid-template-columns: 1fr 2fr; /* display: flex !important; */ /* flex-flow: row nowrap; */ justify-content: center; align-items: center; text-align: start; height: 200px; /* height: var(--item-height, 2.4rem); */ height: 100%; cursor: unset; } .release-news li picture { aspect-ratio: 1/1; height: 100%; height: calc(var(--item-height-tall-desk, 3rem) * 10); width: calc(var(--item-height-tall-desk, 3rem) * 10); /* max-width: calc(50vw - 2 * var(--pad, 1rem)); */ /* min-width: 400px; */ /* flex-shrink: 2; */ opacity: 1; -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; /* width: auto; */ /* width: 100%; */ } .release-news li img { aspect-ratio: 1/1; opacity: 1; -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; height: 100%; min-height: calc(var(--item-height-tall-desk, 3rem) * 10); min-width: calc(var(--item-height-tall-desk, 3rem) * 10); /* display: flex !important; */ } .release-news li.selected, .release-news li.selected :is(picture, img) { height: 100%; opacity: 1; } .release-news li .article-header { /* flex-grow: 6; */ width: 100%; min-height: calc(var(--item-height-tall-desk, 3rem) * 10); display: flex; flex-flow: column nowrap; padding: calc(var(--pad, 1rem) * 4); justify-content: flex-start; align-items: flex-start; position: relative; overflow: hidden; left: unset; } .release-news li header { display: grid; flex-flow: column nowrap; gap: calc(var(--pad, 1rem) / 2); } .release-news li header .title { /* margin-top: -2rem; */ font-size: 2.7rem; line-height: 1; } .release-news li .more-header { display: unset; opacity: 1; font-weight: 500; margin-top: -2rem; font-size: calc(1rem + 0.5rem); font-style: italic; line-height: 1; position: absolute; bottom: 4rem; padding-inline-end: 4rem; } .release-news li .news-btn { display: block; opacity: 0; position: absolute; /* top: unset; */ /* right: unset; */ /* bottom: calc(var(--pad, 1rem) * 4); */ /* bottom: 0; */ top: 1rem; right: 1rem; font-weight: 700; left: calc(100% - var(--pad, 1rem) * 8); pointer-events: all; transition: all 0.3s ease-in-out 0s; } /* TODO : Do we need .selected to be different on desktop? */ .release-news li.selected .article-header { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: var(--pad, 1rem); padding: calc( 4 * var(--pad, 1rem)); overflow: hidden; } .release-news li.selected picture { margin-block-end: 0; } .release-news li:hover .news-btn { opacity: 1; background-color: var(--fg-color); color: var(--bg-color); } .release-news li:hover .news-btn:hover { background-color: var(--bg-color); color: var(--fg-color); } .release-news + .slick-nav { position: absolute; bottom: calc(var(--pad, 1rem) * 3.3); left: 0; width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; pointer-events: none; z-index: 10; height: calc(var(--pad, 1rem) * 4); } .release-news + .slick-nav button { z-index: 10; pointer-events: all; color: var(--bg-color); background-color: transparent; padding: calc(var(--pad, 1rem) / 2) calc(var(--pad, 1rem) * 1); font-size: 3rem; font-weight: 500; line-height: 1; opacity: 0.5; } /* height: calc(var(--pad, 1rem) * 4); */ .release-news + .slick-nav button:hover { opacity: 0.8; } .release-news + .slick-nav .slick-button-next { margin-left: auto; } .release-news ~ .slick-pagination { padding-block: var(--pad, 1rem); } /* end .release-news */ } @media (min-width: 1024px) { .release-news-monitor { display: flex; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat } } .colorfan > li[data-pid], .colorfan > *:has(li[data-pid]), .colorfan .slick-track > li[data-pid], .colorfan .slick-track > *:has(li[data-pid]) { background-color: #433B9A; } .colorfan > li[data-pid]:nth-child(1n+1), .colorfan > *:has(li[data-pid]):nth-child(1n+1), .colorfan .slick-track > li[data-pid]:nth-child(1n+1), .colorfan .slick-track > *:has(li[data-pid]):nth-child(1n+1) { background-color: #E4CB3E; } .colorfan > li[data-pid]:nth-child(2n+2), .colorfan > *:has(li[data-pid]):nth-child(2n+2), .colorfan .slick-track > li[data-pid]:nth-child(2n+2), .colorfan .slick-track > *:has(li[data-pid]):nth-child(2n+2) { background-color: #B33023; } .colorfan > li[data-pid]:nth-child(3n+3), .colorfan > *:has(li[data-pid]):nth-child(3n+3), .colorfan .slick-track > li[data-pid]:nth-child(3n+3), .colorfan .slick-track > *:has(li[data-pid]):nth-child(3n+3) { background-color: #C55F00; } .colorfan > li[data-pid]:nth-child(4n+4), .colorfan > *:has(li[data-pid]):nth-child(4n+4), .colorfan .slick-track > li[data-pid]:nth-child(4n+4), .colorfan .slick-track > *:has(li[data-pid]):nth-child(4n+4) { background-color: #DA3434; } .colorfan > li[data-pid]:nth-child(5n+5), .colorfan > *:has(li[data-pid]):nth-child(5n+5), .colorfan .slick-track > li[data-pid]:nth-child(5n+5), .colorfan .slick-track > *:has(li[data-pid]):nth-child(5n+5) { background-color: #77AB5C; } .colorfan > li[data-pid]:nth-child(6n+6), .colorfan > *:has(li[data-pid]):nth-child(6n+6), .colorfan .slick-track > li[data-pid]:nth-child(6n+6), .colorfan .slick-track > *:has(li[data-pid]):nth-child(6n+6) { background-color: #157AC2; } .colorfan > li[data-pid]:nth-child(7n+7), .colorfan > *:has(li[data-pid]):nth-child(7n+7), .colorfan .slick-track > li[data-pid]:nth-child(7n+7), .colorfan .slick-track > *:has(li[data-pid]):nth-child(7n+7) { background-color: #C93529; } .colorfan > li[data-pid]:nth-child(8n+8), .colorfan > *:has(li[data-pid]):nth-child(8n+8), .colorfan .slick-track > li[data-pid]:nth-child(8n+8), .colorfan .slick-track > *:has(li[data-pid]):nth-child(8n+8) { background-color: #433B9A; } .colorfan li[data-pid]:nth-child(9n+9), .colorfan > :has(li[data-pid]):nth-child(9n+9), .colorfan .slick-track li[data-pid]:nth-child(9n+9), .colorfan .slick-track > :has(li[data-pid]):nth-child(9n+9) { background-color: #C55F00; } [id^="artist-section"] li picture, [id^="artist-section"] li img { transition: all 0.3s ease-in-out 0s, 0.3s filter linear; filter: brightness(1); filter: blur(0px); opacity: 1; } [id^="artist-section"] li:hover, [id^="artist-section"] li > a:hover { /* filter: sepia(800%); */ transition: all 0.3s ease-in-out 0s, 0.3s filter linear; } [id^="artist-section"] li:hover header >a, [id^="artist-section"] li > a:hover header >a { text-decoration: underline; } [id^="artist-section"] li:hover picture, [id^="artist-section"] li:hover img, [id^="artist-section"] li > a:hover picture, [id^="artist-section"] li > a:hover img { filter: brightness(1.3); /* opacity: 0.8; */ } [id^="artist-section"] li:hover .yt-lazyload-playbtn,[id^="artist-section"] li > a:hover .yt-lazyload-playbtn{ background-size: calc(35px + 20%) auto; } @media (min-width: 768px) { [class^="explore"][class*="videos"] article:nth-child(n+4) { display: none; } } @media (max-width: 768px) { [class^="explore"] article { /* max-width: calc((100vw / 3) - var(--gap) * (3 - 1) / ( 3 * 2 )); */ /* max-width: 28vw; */ } } /* transition: all 1s ease-in-out 0s, 1s filter linear, 1s -webkit-filter linear; */ [class^="explore"] article picture { transition: all 1s ease-in-out 0s, 1s filter linear; filter: brightness(1); opacity: 1; } [class^="explore"] article:hover, [class^="explore"] article > a:hover { /* filter: sepia(800%); */ transition: all 1s ease-in-out 0s, 1s filter linear; } [class^="explore"] article:hover header >a, [class^="explore"] article > a:hover header >a { /* text-decoration: underline; */ } [class^="explore"] article:hover picture, [class^="explore"] article:hover .yt-lazyload-content, [class^="explore"] article > a:hover picture, [class^="explore"] article > a:hover .yt-lazyload-content { filter: brightness(1.3); /* opacity: 0.8; */ } [class^="explore"] article:hover .yt-lazyload-playbtn, [class^="explore"] article > a:hover .yt-lazyload-playbtn { background-size: calc(35px + 20%) auto; } [class*="-explorer"] header div:has(.arrow-link:hover) a:not(.arrow-link) { text-decoration: underline; } [class*="-explorer"] .arrow-link { text-decoration: none !important; } @media (max-width: 768px) { [class*="-explorer"] { --column-count: 5; --gap: 1rem; position: relative; display: flex; flex-flow: column nowrap } [class*="-explorer"] .swiper-wrapper, [class*="-explorer"] .slick-track { display: flex; flex-flow: row nowrap; gap: var(--gap); position: relative; } [class*="-explorer"]::before, [class*="-explorer"]::after { content: ""; position: absolute; top: 0; height: 100%; width: var(--pad, 1rem); background-color: var(--bg-color); opacity: 0.4; z-index: 400; } [class*="-explorer"]::before { left: 0; } [class*="-explorer"]::after { right: 0; } [class*="-explorer"] .arrow-right:hover { text-decoration: none; } } [class*="-explorer"] article { /* width: calc((100% / var(--column-count)) - var(--gap) * (var(--column-count) ) / ( var(--column-count) * 2 )); */ } /* Marquee styles */ /* https://ryanmulligan.dev/blog/css-marquee/ */ .marquee2 { --gap: 1rem; position: relative; display: flex; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; gap: var(--gap); } .marquee2 .marquee__content { flex-shrink: 0; display: flex; justify-content: flex-start; /* justify-content: space-around; */ gap: var(--gap); min-width: 100%; } span.more-header { /* display: none; */ /* visibility: hidden; */ opacity: 0; transition: opacity var(--timing, 0.3s) ease-in-out; /* width: 0px; */ /* overflow: hidden; */ } :has(> .marquee__content):hover .marquee2 span.more-header, li:hover .marquee2 span.more-header, .selected .marquee2 span.more-header { /* display: unset; */ /* visibility: visible; */ opacity: 1; /* width: 100%; */ } :has(> .marquee__content):hover .marquee__content, li:hover .marquee__content, .selected .marquee__content{ animation: scroll 10s linear infinite; animation-play-state: running; animation-delay: 0.3s; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } /* Pause animation when reduced-motion is set */ @media (prefers-reduced-motion: reduce) { .marquee__content { animation-play-state: paused !important; } } /* Enable animation */ .enable-animation .marquee__content { animation: scroll 10s linear infinite; } /* Pause on hover */ .marquee--hover-pause:hover .marquee__content { animation-play-state: paused; } /* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */ .marquee--fit-content { max-width: -moz-fit-content; max-width: fit-content; } /* single release page */ .gtr-release, .release-one { --min-height: 400px; min-height: var(--min-height); } /* like our spotify iframe */ .gtr-release .post-deets, .release-one .post-deets { gap: var(--pad, 1rem); display: flex; flex-flow: column nowrap; } @media (min-width: 768px) { .gtr-release .post-deets, .release-one .post-deets { gap: var(--pad, 1rem); min-height: var(--min-height) /* like our spotify iframe */ } .gtr-release .post-deets .gtr-release-cta-buy-button, .release-one .post-deets .gtr-release-cta-buy-button { display: none; } .gtr-release .post-deets > header .gtr-release-cta-buy-button, .release-one .post-deets > header .gtr-release-cta-buy-button { display: unset; width: 100%; } } /* archives pages */ article header.deets { display: flex; flex-flow: column nowrap; gap: calc(var(--pad, 1rem) / 2); } article header.deets * { line-height: 1; } @media (max-width: 768px) { .archive main .sorted :is(article) { /* border-bottom: 1px solid var(--mg-color); */ padding-bottom: calc(1rem - 1px); } .archive main .sorted .products li { border-bottom: 1px solid var(--mg-color); } .archive .artists { gap: var(--pad, 1rem); } .archive .artists article { width: calc(50% - var(--pad, 1rem) / 2); padding-bottom: var(--pad, 1rem); } .archive .artists.sorted[data-view="list"] article { width: calc(100%); gap: 0; } } /* archive artists */ @media (min-width: 768px) { .archive .artists { --items-per-row: 5; --gap: 2rem; padding-top: var(--gap); } .archive .artists article { width: calc((100% / var(--items-per-row)) - var(--gap) * (var(--items-per-row) - 1) / ( var(--items-per-row) * 2 )); } } /*archive releases */ .latest-releases { padding-block-end: var(--pad, 1rem); } .latest-releases:not([data-view="list"]) { padding-top: var(--pad, 1rem); } .latest-releases:not([data-view="list"]) header { padding-top: var(--pad, 1rem); } .post-type-archive-video article:hover, .post-type-archive-video article > a:hover { transition: all 1s ease-in-out 0s, 1s filter linear; } .post-type-archive-video article:hover picture, .post-type-archive-video article:hover .yt-lazyload-content, .post-type-archive-video article > a:hover picture, .post-type-archive-video article > a:hover .yt-lazyload-content { filter: brightness(1.3); /* opacity: 0.8; */ } .post-type-archive-video article:hover .yt-lazyload-playbtn, .post-type-archive-video article > a:hover .yt-lazyload-playbtn { background-size: calc(35px + 20%) auto; } .post-type-archive-release article:hover, .post-type-archive-release article > a:hover { transition: all 1s ease-in-out 0s, 1s filter linear; } .post-type-archive-release article:hover picture, .post-type-archive-release article:hover .yt-lazyload-content, .post-type-archive-release article > a:hover picture, .post-type-archive-release article > a:hover .yt-lazyload-content { filter: brightness(1.3); } .video-article:hover { transition: all 1s ease-in-out 0s, 1s filter linear; } .video-article:hover .yt-lazyload-content { filter: brightness(1.3); } .shopi { --fg-color: var(--black, black); --bg-color: var(--white, white); --link-color: var(--fg-color, black); } .shopi #menu-toggle-desktop { display: none; } /* .mini-cart */ .shopi .cart-drawer { filter: invert(1); } .shopi .product_title { /* white-space: pre; */ overflow: hidden; text-overflow: ellipsis; } .shopi.mobile .main-header { /* --fg-color: var(--white); */ /* --bg-color: var(--black); */ /* --link-color: var(--white); */ /* .cart-drawer { */ /* filter: invert(0); */ /* } */ } .mini-cart.closed { height: 0px; /* min-height: 0px; */ font-size: 0; padding: 0; /* top: var(--header-height); */ pointer-events: none; position: absolute; } .mini-cart { position: absolute; top: 0; z-index: 1000; width: 100%; height: 100dvh; overflow: hidden; background: var(--bg-color); transition: height 0.3s ease-out; } .mini-cart nav { border-bottom: 1px solid var(--mg-color); height: var(--header-height, 5rem); } .mini-cart nav a { color: var(--mg-color); } .cart .product-thumbnail { display: flex; justify-content: flex-start; } .cart .product-thumbnail img { -o-object-fit: contain; object-fit: contain; height: 100%; width: 100%; } .cart tbody tr { /* padding: 0 clamp(0.05rem, 0.5rem, 1vw); */ padding: 0; border-top: 1px solid var(--mg-color); } .cart tbody tr:last-of-type { border-bottom: 1px solid var(--mg-color); } .cart th { text-align: start; text-transform: uppercase; font-weight: 200; } .cart th:last-of-type { text-align: end; } .cart td { text-align: start; } .cart td:last-of-type { text-align: end; } .cart td.product-quantity { text-align: center; display: flex; justify-content: center; } .cart-coupon { font-size: 1rem; /* height: 1rem; */ margin-block: calc(var(--pad) ); } .cart-coupon .coupon { height: 2rem; display: flex; gap: calc(var(--pad) / 2); } .cart-coupon button[type="submit"] { font-size: 0.75rem; } .checkout-button { width: 100%; text-align: center; } /* Slick JS styling */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; touch-action: auto; -webkit-tap-highlight-color: transparent; } .slick-controls { font-size: 1.2rem; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ""; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-track .slick-slide { cursor: grab; } .slick-track .slick-slide:active { cursor: grabbing; } .slick-slide { /* display: none; */ /* outline: none; */ float: left; /* text-align: center; */ max-height: calc(100vh); min-height: 1px; } .slideshow .slick-slide:hover { cursor: col-resize; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img, .slick-slide iframe { display: block; margin: 0 auto; max-width: 100%; height: 100%; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-slide.project-featured, .single .slick-initialized .slick-slide, .mobile .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .panel { position: relative; z-index: 5; overflow: hidden; } .mobile .panel { /* height: 100vh; */ transition: 0s none; } .panel-fixed { z-index: 1; } .panel > * { width: 100%; } .slick-slider { max-height: 100%; } .slick-slider ul { height: 100%; max-height: 100%; } .slick-slider ul li { /* width: 100%; */ /* height: 100%; */ display: flex !important; flex-flow: column nowrap; } body:not(.home) .slick-slider, body:not(.home) .slick-list, body:not(.home) .slick-slide, body:not(.home) .slick-slide video, body:not(.home) .slick-slide img, body:not(.home) .slick-slide iframe { /* max-height: calc(100vh - 10em - 90px); */ } body:not(.home) .fullscreen .slick-slider, body:not(.home) .fullscreen .slick-list, body:not(.home) .fullscreen .slick-slide, body:not(.home) .fullscreen .slick-slide video, body:not(.home) .fullscreen .slick-slide img, body:not(.home) .fullscreen .slick-slide iframe { /* max-height: calc(100vh - 5em - 20px); */ } .slick-arrow { height: 100%; display: inline; vertical-align: middle; z-index: 10; background: transparent; font-size: 2.2em; /* outline: 0; */ border: 0; mix-blend-mode: difference; color: yellow; } .slick-next { /* content: "〉"; */ /* position:absolute; */ /* right: 0.6rem; */ /* top: 0; */ } .slick-prev{ /* content: "〈"; */ /* position:absolute; */ /* left: 0.6rem; */ /* top: 0; */ } .slick-nav { position: relative; padding: 0; } .slick-nav .slick-dots { /* padding: 0 0 0 1rem; */ padding: calc(var(--pad, 1rem) / 2); } .link-fullscreen { background-image: url("../images/fullscreen.svg"); background-repeat: no-repeat; height: 1rem; width: 1rem; margin: 0.5em; display: inline-block; float: right; content: " ♐ "; } .slick-dots { justify-content: center; display: flex; padding: 0.4rem 0rem; } .slick-dots li { display: inline-block; margin: 0; } .slick-dots button { /* background-color: var(--bg-color); */ opacity: 0.9; } .slick-dots button:hover, .slick-dots button:focus, .slick-dots .slick-active button { /* background-color: var(--bg-color); */ opacity: 1; } .slick-dots { /* position: absolute; */ /* bottom: -25px; */ /* display: block; */ /* width: 100%; */ margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 0.4em; padding: 0; cursor: pointer; } .slick-dots li button { /* font-size: 0; */ line-height: 0; display: block; padding: 0; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { /* position: absolute; */ top: 0; left: 0; display: block; width: 1em; height: .5em; /* margin-inline: 3em; */ transition: all 0.5s ease-in-out; content: ' '; text-align: center; /* background: url("../images/line.svg") no-repeat; */ /* background-size: 100% 3rem; */ /* background-position: top; */ background-color: var(--fg-color); opacity: .25; color: var(--fg-color); border-radius: 0.15rem; border: 2px solid var(--fg-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: var(--fg-color); height: .5rem; width: 5em; /* margin-inline: 1.4em; */ } .woocommerce-Price-currencySymbol::before { content: " "; width: 0.5em; } .woocommerce-Price-currencySymbol { text-transform: capitalize; } .single-product header input { width: 100%; } .woocommerce-notices-wrapper { transition: 0.4s all ease-out; } .woocommerce-notices-wrapper:empty { opacity: 0; padding: 0; margin: 0; height: 0; } .woocommerce-loop-product__title { font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .woocommerce-loop-product__title .by { font-weight: 200; } .post-type-archive-product .woocommerce-loop-product__title, .single-product .woocommerce-loop-product__title { font-weight: 600; } .post-type-archive-product .woocommerce-loop-product__title .by, .single-product .woocommerce-loop-product__title .by { font-weight: 200; } .single-product input[name=quantity] { display: none; } /* shop page // */ .shopi .products-grid { --gap: 1rem; --line-offset: calc(var(--gap) / 1); --line-thickness: 1px; --line-color: var(--mg-color); --line-color: salmon; display: grid; gap: calc(var(--gap) ) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--gap); grid-template-rows: auto; line-height: 1; } @media (min-width: 1024px) { .shopi .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } } .shopi .products-grid .product img:first-of-type { width: 100%; } .shopi .products-grid header { line-height: 1.2; } .shopi .featured-products .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .select2-container--default .select2-selection--single { border-radius: 2px !important; } .woocommerce form[name=checkout] { display: flex; flex-flow: column nowrap; max-width: 40rem; margin: 0 auto; margin-bottom: var(--pad, 1rem); } .woocommerce .woocommerce-checkoutf .col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper, .woocommerce .woocommerce-checkout .col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper, .woocommerce .woocommerce-checkout .wcf-col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper, .woocommerce .woocommerce-checkout .wcf-col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper, .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; justify-items: flex-start; } .woocommerce .woocommerce-checkoutf .col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper > *:nth-of-type(odd), .woocommerce .woocommerce-checkout .col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper > *:nth-of-type(odd), .woocommerce .woocommerce-checkout .wcf-col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper > *:nth-of-type(odd), .woocommerce .woocommerce-checkout .wcf-col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper > *:nth-of-type(odd), .woocommerce-billing-fields__field-wrapper > *:nth-of-type(odd) { margin-inline-start: auto; } .woocommerce .woocommerce form.woocommerce-form-login .form-row label, .woocommerce .woocommerce-checkout .form-row label { color: var(--mg-color); font-size: 13px; line-height: 1; letter-spacing: 0.3px; font-family: inherit; font-weight: inherit; /* text-transform: capitalize; */ margin-bottom: 1rem; } .woocommerce #customer_details .form-row:not( .wcf-anim-hidden-label ) label:not( .woocommerce-form__label-for-checkbox, .checkbox, .input-radio ) { -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; position: absolute; /* left: 0.5rem; */ color: var(--mg-color, #737373); transition: all 0.2s ease-out; font-size: 11px; margin-top: 0.35em; padding: 0 1.1em; line-height: 1.625; } .form-row { position: relative; } /* .woocommerce-input-wrapper , */ .woocommerce-input-wrapper :is(input,select) { padding: 1rem 0.5rem 0rem; margin-block-end: 1rem; height: 2.6rem; border-radius: 0px; /* border-width: 1px;; */ width: 100%; } .woocommerce-input-wrapper select, .woocommerce-input-wrapper .select2-container, .woocommerce-input-wrapper .select2-selection, .woocommerce-input-wrapper .select2-selection__rendered, .woocommerce-input-wrapper .select2, { padding: 0.5rem 0.5rem; min-width: 12rem !important; } .shop_table, .shop_table > :is(tbody, tfoot, thead, tr, th, td), .woocommerce-checkout-review-order-table, .woocommerce-checkout-review-order-table > :is(tbody, tfoot, thead, tr, th, td) { width: 100%; } .shop_table tr, .woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: center; } .woocommerce-checkout .product-thumbnail { max-width: 100px; max-height: 100px; display: inline-table; } form.checkout { padding-inline: var(--pad,1rem); } .col2-set .woocommerce-billing-fields__field-wrapper, .col2-set .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; display: flex; flex-flow: column nowrap; align-items: center; } /* padding-inline: var(--pad,1rem); */ .col2-set .woocommerce-billing-fields__field-wrapper > *:nth-of-type(n), .col2-set .woocommerce-shipping-fields__field-wrapper > *:nth-of-type(n) { width: 100%; margin-inline-start: unset; /* padding-inline: calc(var(--pad, 1rem) / 2); */ } .col2-set .woocommerce-billing-fields__field-wrapper input, .col2-set .woocommerce-shipping-fields__field-wrapper input { width: 100%; } lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; /* max-width: 720px; */ } /* gradient */ lite-youtube::before { content: attr(data-title); display: block; position: absolute; top: 0; /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */ /* background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%); */ height: 99px; width: 100%; font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif; color: hsl(0deg 0% 93.33%); text-shadow: 0 0 2px rgba(0,0,0,.5); font-size: 18px; padding: 25px 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } lite-youtube:hover::before { color: white; /* scale: 1.1; */ } /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { content: ""; display: block; padding-bottom: calc(100% / (16 / 9)); } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; } /* play button */ lite-youtube > .lty-playbtn { display: block; /* Make the button element cover the whole area for a large hover/click target… */ width: 100%; height: 100%; /* …but visually it's still the same size */ background: no-repeat center/5rem 5rem; /* YT's actual play button svg */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E"); position: absolute; cursor: pointer; z-index: 1; filter: grayscale(100%); transition: all 0.3s ease-in-out; border: 0; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: none; scale: 1.3; } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } .lyt-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /*! * Youtube LazyLoad * v4.0.1 * https://github.com/the-muda-organization/youtube-lazyload * MIT License */ .yt-lazyload { width: 100%; position: relative !important; overflow: hidden; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .yt-lazyload::before { content: ''; width: 100%; display: block; position: relative; padding-top: 56.25%; background-color: #000 } .yt-lazyload-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: inherit } .yt-lazyload-content { width: 100%; height: 100%; position: relative; background-color: #000; background-image: var(--yt-lazyload-img-override, var(--yt-lazyload-img)); background-size: cover; background-position: 50%; background-repeat: no-repeat; z-index: 1; } .yt-lazyload-playbtn { /* display: none; */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E"); background-position: 50%; background-size: calc(35px + 10%) auto; background-repeat: no-repeat; transition: all 0.4s ease-out; } .yt-lazyload-playbtn:hover { /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='red' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") ; */ background-size: calc(35px + 20%) auto; } .yt-lazyload-logo { display: block; width: 30%; min-width: 95px; min-height: 22px; max-width: 215px; padding-top: 6.8%; position: absolute; right: 4%; bottom: 4%; z-index: 2; background-position: 50%; background-size: contain; background-repeat: no-repeat; opacity: .75; transition: opacity .3s } .yt-lazyload[data-logo="1"] .yt-lazyload-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 492 110'%3E%3Cpath d='m154.3 17.5c-1.8-6.7-7.1-12-13.8-13.8-12.1-3.3-60.8-3.3-60.8-3.3s-48.7 0.1-60.8 3.4c-6.7 1.8-12 7.1-13.8 13.8-3.2 12.1-3.2 37.4-3.2 37.4s0 25.3 3.3 37.5c1.8 6.7 7.1 12 13.8 13.8 12.1 3.3 60.8 3.3 60.8 3.3s48.7 0 60.8-3.3c6.7-1.8 12-7.1 13.8-13.8 3.3-12.1 3.3-37.5 3.3-37.5s-0.1-25.3-3.4-37.5z'/%3E%3Cpolygon fill='%23fff' points='64.2 78.4 104.6 55 64.2 31.6'/%3E%3Cpath d='m227.9 99.7c-3.1-2.1-5.3-5.3-6.6-9.7s-1.9-10.2-1.9-17.5v-9.9c0-7.3 0.7-13.3 2.2-17.7 1.5-4.5 3.8-7.7 7-9.7s7.3-3.1 12.4-3.1c5 0 9.1 1 12.1 3.1s5.3 5.3 6.7 9.7 2.1 10.3 2.1 17.6v9.9c0 7.3-0.7 13.1-2.1 17.5s-3.6 7.6-6.7 9.7c-3.1 2-7.3 3.1-12.5 3.1-5.4 0.1-9.6-1-12.7-3zm17.3-10.7c0.9-2.2 1.3-5.9 1.3-10.9v-21.3c0-4.9-0.4-8.5-1.3-10.7-0.9-2.3-2.4-3.4-4.5-3.4s-3.5 1.1-4.4 3.4-1.3 5.8-1.3 10.7v21.3c0 5 0.4 8.7 1.2 10.9s2.3 3.3 4.5 3.3c2.1 0 3.6-1.1 4.5-3.3z'/%3E%3Cpath d='m464.4 72.7v3.5c0 4.4 0.1 7.7 0.4 9.9s0.8 3.8 1.6 4.8 2.1 1.5 3.8 1.5c2.3 0 3.9-0.9 4.7-2.7 0.9-1.8 1.3-4.8 1.4-8.9l13.3 0.8c0.1 0.6 0.1 1.4 0.1 2.4 0 6.3-1.7 11-5.2 14.1s-8.3 4.7-14.6 4.7c-7.6 0-12.9-2.4-15.9-7.1s-4.6-12.1-4.6-22v-12.1c0-10.2 1.6-17.7 4.7-22.4 3.2-4.7 8.6-7.1 16.2-7.1 5.3 0 9.3 1 12.1 2.9s4.8 4.9 6 9 1.7 9.7 1.7 16.9v11.7h-25.7zm2-28.8c-0.8 1-1.3 2.5-1.6 4.7s-0.4 5.5-0.4 10v4.9h11.2v-4.9c0-4.4-0.1-7.7-0.4-10s-0.8-3.9-1.6-4.8-2-1.4-3.6-1.4c-1.7 0.1-2.9 0.6-3.6 1.5z'/%3E%3Cpath d='m190.5 71.4-17.5-63.2h15.3l6.1 28.6c1.6 7.1 2.7 13.1 3.5 18h0.4c0.5-3.6 1.7-9.5 3.5-17.9l6.3-28.7h15.3l-17.7 63.1v30.3h-15.1v-30.2z'/%3E%3Cpath d='m311.5 33.4v68.3h-12l-1.3-8.4h-0.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 0.3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-0.4 3.8-1.2s2.1-1.9 2.7-3.1v-54.2h15.3z'/%3E%3Cpath d='m390.4 33.4v68.3h-12l-1.3-8.4h-0.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 0.3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-0.4 3.8-1.2s2.1-1.9 2.7-3.1v-54.2h15.3z'/%3E%3Cpath d='M353.3,20.6H338v81.1h-15V20.6h-15.3V8.2h45.5V20.6z'/%3E%3Cpath d='m441.2 44.3c-0.9-4.3-2.4-7.4-4.5-9.4-2.1-1.9-4.9-2.9-8.6-2.9-2.8 0-5.5 0.8-7.9 2.4-2.5 1.6-4.3 3.7-5.7 6.3h-0.1v-36h-14.8v96.9h12.7l1.6-6.5h0.3c1.2 2.3 3 4.1 5.3 5.5 2.4 1.3 5 2 7.9 2 5.2 0 9-2.4 11.5-7.2 2.4-4.8 3.7-12.3 3.7-22.4v-10.8c0-7.6-0.5-13.6-1.4-17.9zm-14.1 27.9c0 5-0.2 8.9-0.6 11.7s-1.1 4.8-2.1 6-2.3 1.8-3.9 1.8c-1.3 0-2.4-0.3-3.5-0.9s-1.9-1.5-2.6-2.7v-38.8c0.5-1.9 1.4-3.4 2.7-4.6s2.6-1.8 4.1-1.8c1.6 0 2.8 0.6 3.6 1.8 0.9 1.2 1.4 3.3 1.8 6.2 0.3 2.9 0.5 7 0.5 12.4v8.9z'/%3E%3C/svg%3E") } .yt-lazyload[data-logo="2"] .yt-lazyload-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282828' viewBox='0 0 492 110'%3E%3Cpath fill='red' d='m154.3 17.5c-1.8-6.7-7.1-12-13.8-13.8-12.1-3.3-60.8-3.3-60.8-3.3s-48.7 0.1-60.8 3.4c-6.7 1.8-12 7.1-13.8 13.8-3.2 12.1-3.2 37.4-3.2 37.4s0 25.3 3.3 37.5c1.8 6.7 7.1 12 13.8 13.8 12.1 3.3 60.8 3.3 60.8 3.3s48.7 0 60.8-3.3c6.7-1.8 12-7.1 13.8-13.8 3.3-12.1 3.3-37.5 3.3-37.5s-0.1-25.3-3.4-37.5z'/%3E%3Cpolygon fill='%23fff' points='64.2 78.4 104.6 55 64.2 31.6'/%3E%3Cpath d='m227.9 99.7c-3.1-2.1-5.3-5.3-6.6-9.7s-1.9-10.2-1.9-17.5v-9.9c0-7.3 0.7-13.3 2.2-17.7 1.5-4.5 3.8-7.7 7-9.7s7.3-3.1 12.4-3.1c5 0 9.1 1 12.1 3.1s5.3 5.3 6.7 9.7 2.1 10.3 2.1 17.6v9.9c0 7.3-0.7 13.1-2.1 17.5s-3.6 7.6-6.7 9.7c-3.1 2-7.3 3.1-12.5 3.1-5.4 0.1-9.6-1-12.7-3zm17.3-10.7c0.9-2.2 1.3-5.9 1.3-10.9v-21.3c0-4.9-0.4-8.5-1.3-10.7-0.9-2.3-2.4-3.4-4.5-3.4s-3.5 1.1-4.4 3.4-1.3 5.8-1.3 10.7v21.3c0 5 0.4 8.7 1.2 10.9s2.3 3.3 4.5 3.3c2.1 0 3.6-1.1 4.5-3.3z'/%3E%3Cpath d='m464.4 72.7v3.5c0 4.4 0.1 7.7 0.4 9.9s0.8 3.8 1.6 4.8 2.1 1.5 3.8 1.5c2.3 0 3.9-0.9 4.7-2.7 0.9-1.8 1.3-4.8 1.4-8.9l13.3 0.8c0.1 0.6 0.1 1.4 0.1 2.4 0 6.3-1.7 11-5.2 14.1s-8.3 4.7-14.6 4.7c-7.6 0-12.9-2.4-15.9-7.1s-4.6-12.1-4.6-22v-12.1c0-10.2 1.6-17.7 4.7-22.4 3.2-4.7 8.6-7.1 16.2-7.1 5.3 0 9.3 1 12.1 2.9s4.8 4.9 6 9 1.7 9.7 1.7 16.9v11.7h-25.7zm2-28.8c-0.8 1-1.3 2.5-1.6 4.7s-0.4 5.5-0.4 10v4.9h11.2v-4.9c0-4.4-0.1-7.7-0.4-10s-0.8-3.9-1.6-4.8-2-1.4-3.6-1.4c-1.7 0.1-2.9 0.6-3.6 1.5z'/%3E%3Cpath d='m190.5 71.4-17.5-63.2h15.3l6.1 28.6c1.6 7.1 2.7 13.1 3.5 18h0.4c0.5-3.6 1.7-9.5 3.5-17.9l6.3-28.7h15.3l-17.7 63.1v30.3h-15.1v-30.2z'/%3E%3Cpath d='m311.5 33.4v68.3h-12l-1.3-8.4h-0.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 0.3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-0.4 3.8-1.2s2.1-1.9 2.7-3.1v-54.2h15.3z'/%3E%3Cpath d='m390.4 33.4v68.3h-12l-1.3-8.4h-0.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 0.3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-0.4 3.8-1.2s2.1-1.9 2.7-3.1v-54.2h15.3z'/%3E%3Cpath d='M353.3,20.6H338v81.1h-15V20.6h-15.3V8.2h45.5V20.6z'/%3E%3Cpath d='m441.2 44.3c-0.9-4.3-2.4-7.4-4.5-9.4-2.1-1.9-4.9-2.9-8.6-2.9-2.8 0-5.5 0.8-7.9 2.4-2.5 1.6-4.3 3.7-5.7 6.3h-0.1v-36h-14.8v96.9h12.7l1.6-6.5h0.3c1.2 2.3 3 4.1 5.3 5.5 2.4 1.3 5 2 7.9 2 5.2 0 9-2.4 11.5-7.2 2.4-4.8 3.7-12.3 3.7-22.4v-10.8c0-7.6-0.5-13.6-1.4-17.9zm-14.1 27.9c0 5-0.2 8.9-0.6 11.7s-1.1 4.8-2.1 6-2.3 1.8-3.9 1.8c-1.3 0-2.4-0.3-3.5-0.9s-1.9-1.5-2.6-2.7v-38.8c0.5-1.9 1.4-3.4 2.7-4.6s2.6-1.8 4.1-1.8c1.6 0 2.8 0.6 3.6 1.8 0.9 1.2 1.4 3.3 1.8 6.2 0.3 2.9 0.5 7 0.5 12.4v8.9z'/%3E%3C/svg%3E") } .yt-lazyload[data-logo="3"] .yt-lazyload-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 580 130'%3E%3Cpath d='M181.7 20.7c-2.1-7.9-8.4-14.2-16.3-16.3C151.1.5 93.6.5 93.6.5s-57.6.1-71.9 4C13.8 6.6 7.5 12.9 5.4 20.8 1.6 35.1 1.6 65 1.6 65s0 29.9 3.9 44.3c2.1 7.9 8.4 14.2 16.3 16.3 14.3 3.9 71.8 3.9 71.8 3.9s57.5 0 71.8-3.9c7.9-2.1 14.2-8.4 16.3-16.3 3.9-14.3 3.9-44.3 3.9-44.3s0-29.9-3.9-44.3zM75.2 92.6V37.4L123 65 75.2 92.6z'/%3E%3Cpath d='m268.6 117.8c-3.7-2.5-6.3-6.3-7.8-11.5s-2.2-12-2.2-20.7v-11.6c0-8.6 0.8-15.7 2.6-20.9 1.8-5.3 4.5-9.1 8.3-11.5s8.6-3.7 14.6-3.7c5.9 0 10.8 1.2 14.3 3.7s6.3 6.3 7.9 11.5 2.5 12.2 2.5 20.8v11.7c0 8.6-0.8 15.5-2.5 20.7s-4.3 9-7.9 11.5c-3.7 2.4-8.6 3.7-14.8 3.7-6.4 0-11.3-1.3-15-3.7zm20.5-12.6c1.1-2.6 1.5-7 1.5-12.9v-25.2c0-5.8-0.5-10-1.5-12.6-1.1-2.7-2.8-4-5.3-4s-4.1 1.3-5.2 4-1.5 6.9-1.5 12.6v25.2c0 5.9 0.5 10.3 1.4 12.9s2.7 3.9 5.3 3.9c2.4 0 4.2-1.3 5.3-3.9zm258.9-19.3v4.1c0 5.2 0.1 9.1 0.5 11.7s0.9 4.5 1.9 5.7c0.9 1.2 2.5 1.8 4.5 1.8 2.7 0 4.6-1.1 5.6-3.2 1.1-2.1 1.5-5.7 1.7-10.5l15.7 0.9c0.1 0.7 0.1 1.7 0.1 2.8 0 7.4-2 13-6.1 16.7s-9.8 5.6-17.2 5.6c-9 0-15.2-2.8-18.8-8.4-3.5-5.6-5.4-14.3-5.4-26v-14.3c0-12 1.9-20.9 5.6-26.5 3.8-5.6 10.2-8.4 19.1-8.4 6.3 0 11 1.2 14.3 3.4s5.7 5.8 7.1 10.6 2 11.5 2 20v13.8h-30.6v0.2zm2.4-34c-0.9 1.2-1.5 3-1.9 5.6s-0.5 6.5-0.5 11.8v5.7h13.2v-5.8c0-5.2-0.1-9.1-0.5-11.8s-0.9-4.6-1.9-5.7c-0.9-1.1-2.4-1.7-4.3-1.7-1.9 0.2-3.3 0.8-4.1 1.9zm-326 32.5-20.6-74.7h18.1l7.2 33.8c1.9 8.4 3.2 15.5 4.1 21.3h0.5c0.6-4.3 2-11.2 4.1-21.1l7.4-33.9h18.1l-20.9 74.5v35.7h-17.8v-35.6h-0.2zm143-44.9v80.7h-14.2l-1.5-9.9h-0.4c-3.9 7.4-9.7 11.2-17.4 11.2-5.3 0-9.3-1.8-11.8-5.3-2.6-3.5-3.8-9-3.8-16.4v-60.3h18.2v59.2c0 3.5 0.4 6.1 1.2 7.7 0.8 1.5 2.1 2.2 3.9 2.2 1.5 0 3.1-0.5 4.5-1.4s2.5-2.2 3.2-3.7v-64h18.1zm93.2 0v80.7h-14.2l-1.5-9.9h-0.4c-3.9 7.4-9.7 11.2-17.4 11.2-5.3 0-9.3-1.8-11.8-5.3-2.6-3.5-3.8-9-3.8-16.4v-60.3h18.2v59.2c0 3.5 0.4 6.1 1.2 7.7 0.8 1.5 2.1 2.2 3.9 2.2 1.5 0 3.1-0.5 4.5-1.4s2.5-2.2 3.2-3.7v-64h18.1z'/%3E%3Cpath d='m416.8 24.4h-18.1v95.8h-17.7v-95.8h-18.1v-14.7h53.8v14.6h0.1zm103.8 28c-1.1-5.1-2.8-8.7-5.3-11.1-2.5-2.2-5.8-3.4-10.2-3.4-3.3 0-6.5 0.9-9.3 2.8-3 1.9-5.1 4.4-6.7 7.4h-0.1v-42.5h-17.5v114.4h15l1.9-7.7h0.4c1.4 2.7 3.5 4.8 6.3 6.5 2.8 1.5 5.9 2.4 9.3 2.4 6.1 0 10.6-2.8 13.6-8.5 2.8-5.7 4.4-14.5 4.4-26.5v-12.7c-0.2-9-0.7-16.1-1.8-21.1zm-16.7 32.9c0 5.9-0.2 10.5-0.7 13.8s-1.3 5.7-2.5 7.1-2.7 2.1-4.6 2.1c-1.5 0-2.8-0.4-4.1-1.1s-2.2-1.8-3.1-3.2v-45.7c0.6-2.2 1.7-4 3.2-5.4s3.1-2.1 4.8-2.1c1.9 0 3.3 0.7 4.3 2.1 1.1 1.4 1.7 3.9 2.1 7.3s0.6 8.3 0.6 14.6v10.5z'/%3E%3C/svg%3E") } .yt-lazyload[data-logo="4"] .yt-lazyload-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 492 110'%3E%3Cpath fill='red' d='m154.3 17.5c-1.8-6.7-7.1-12-13.8-13.8-12.1-3.3-60.8-3.3-60.8-3.3s-48.7 0.1-60.8 3.4c-6.7 1.8-12 7.1-13.8 13.8-3.2 12.1-3.2 37.4-3.2 37.4s0 25.3 3.3 37.5c1.8 6.7 7.1 12 13.8 13.8 12.1 3.3 60.8 3.3 60.8 3.3s48.7 0 60.8-3.3c6.7-1.8 12-7.1 13.8-13.8 3.3-12.1 3.3-37.5 3.3-37.5s-0.1-25.3-3.4-37.5z'/%3E%3Cpolygon fill='%23fff' points='64.2 78.4 104.6 55 64.2 31.6'/%3E%3Cpath d='m227.9 99.7c-3.1-2.1-5.3-5.3-6.6-9.7s-1.9-10.2-1.9-17.5v-9.9c0-7.3 0.7-13.3 2.2-17.7 1.5-4.5 3.8-7.7 7-9.7s7.3-3.1 12.4-3.1c5 0 9.1 1 12.1 3.1s5.3 5.3 6.7 9.7 2.1 10.3 2.1 17.6v9.9c0 7.3-0.7 13.1-2.1 17.5s-3.6 7.6-6.7 9.7c-3.1 2-7.3 3.1-12.5 3.1-5.4 0.1-9.6-1-12.7-3zm17.3-10.7c0.9-2.2 1.3-5.9 1.3-10.9v-21.3c0-4.9-0.4-8.5-1.3-10.7-0.9-2.3-2.4-3.4-4.5-3.4s-3.5 1.1-4.4 3.4-1.3 5.8-1.3 10.7v21.3c0 5 0.4 8.7 1.2 10.9s2.3 3.3 4.5 3.3c2.1 0 3.6-1.1 4.5-3.3z'/%3E%3Cpath d='m464.4 72.7v3.5c0 4.4 0.1 7.7 0.4 9.9s0.8 3.8 1.6 4.8 2.1 1.5 3.8 1.5c2.3 0 3.9-0.9 4.7-2.7 0.9-1.8 1.3-4.8 1.4-8.9l13.3 0.8c0.1 0.6 0.1 1.4 0.1 2.4 0 6.3-1.7 11-5.2 14.1s-8.3 4.7-14.6 4.7c-7.6 0-12.9-2.4-15.9-7.1s-4.6-12.1-4.6-22v-12.1c0-10.2 1.6-17.7 4.7-22.4 3.2-4.7 8.6-7.1 16.2-7.1 5.3 0 9.3 1 12.1 2.9s4.8 4.9 6 9 1.7 9.7 1.7 16.9v11.7h-25.7zm2-28.8c-0.8 1-1.3 2.5-1.6 4.7s-0.4 5.5-0.4 10v4.9h11.2v-4.9c0-4.4-0.1-7.7-0.4-10s-0.8-3.9-1.6-4.8-2-1.4-3.6-1.4c-1.7 0.1-2.9 0.6-3.6 1.5z'/%3E%3Cpath d='m190.5 71.4-17.5-63.2h15.3l6.1 28.6c1.6 7.1 2.7 13.1 3.5 18h0.4c0.5-3.6 1.7-9.5 3.5-17.9l6.3-28.7h15.3l-17.7 63.1v30.3h-15.1v-30.2z'/%3E%3Cpath d='m311.5 33.4v68.3h-12l-1.3-8.4h-0.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 0.3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-0.4 3.8-1.2s2.1-1.9 2.7-3.1v-54.2h15.3z'/%3E%3Cpath d='m390.4 33.4v68.3h-12l-1.3-8.4h-0.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 0.3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-0.4 3.8-1.2s2.1-1.9 2.7-3.1v-54.2h15.3z'/%3E%3Cpath d='M353.3,20.6H338v81.1h-15V20.6h-15.3V8.2h45.5V20.6z'/%3E%3Cpath d='m441.2 44.3c-0.9-4.3-2.4-7.4-4.5-9.4-2.1-1.9-4.9-2.9-8.6-2.9-2.8 0-5.5 0.8-7.9 2.4-2.5 1.6-4.3 3.7-5.7 6.3h-0.1v-36h-14.8v96.9h12.7l1.6-6.5h0.3c1.2 2.3 3 4.1 5.3 5.5 2.4 1.3 5 2 7.9 2 5.2 0 9-2.4 11.5-7.2 2.4-4.8 3.7-12.3 3.7-22.4v-10.8c0-7.6-0.5-13.6-1.4-17.9zm-14.1 27.9c0 5-0.2 8.9-0.6 11.7s-1.1 4.8-2.1 6-2.3 1.8-3.9 1.8c-1.3 0-2.4-0.3-3.5-0.9s-1.9-1.5-2.6-2.7v-38.8c0.5-1.9 1.4-3.4 2.7-4.6s2.6-1.8 4.1-1.8c1.6 0 2.8 0.6 3.6 1.8 0.9 1.2 1.4 3.3 1.8 6.2 0.3 2.9 0.5 7 0.5 12.4v8.9z'/%3E%3C/svg%3E") } .yt-lazyload-logo:hover { opacity: 1; transition: opacity .3s } .yt-lazyload iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; z-index: 3; border: 0 } } @layer tools { .marquee { /* background-color: #022756; */ color: var(--white); width: 100%; margin: 0 auto; overflow: hidden; white-space: nowrap; display: flex; flex-flow: row nowrap; direction: rtl; } .marquee a{ color: var(--white); line-height: 1; } .marquee .btn_container { /* padding: 0.8rem; */ position: absolute; z-index: 5000; display: flex; aspect-ratio: 1; width: 4.5rem; height: 4.5rem; background-color: var(--fg-color); left: 0; } .marquee .playpause { width: 4em; height: 4rem; left: 0; transform: translateX(-0.5rem) translateY(0.5rem); color: var(--blue-dark); border-color: transparent transparent transparent var(--blue-dark); border-width: 1.8rem 0 1.8rem 2.8rem; z-index: 1000; aspect-ratio: 1; width: 100%; position: relative; left: 0.6em; height: 81.3%; transform: translateX(-0.2rem) translateY(0.4rem); color: var(--gray); background: transparent; border-color: transparent transparent transparent var(--gray); transition: 100ms all ease; will-change: border-width; cursor: pointer; border-style: solid; border-width: 1.8rem 0 1.8rem 2.9rem; border-radius: 0px; } .marquee .playpause button { position: relative; left: 0.3em; } .marquee .playpause.paused { border-style: double; border-width: 0 0 0 2.8rem; } .marquee .inner { position: relative; /* width: 100%; */ display: flex; color: white; font-size: 4em; direction: ltr; } .marquee .inner > * { white-space: nowrap; padding: 0 var(--pad, 1rem) ; line-height: 1; } .marquee .inner > *:first-child { /* padding-inline-start: 8rem; */ } .marquee .inner > *:last-child { /* padding-inline-end: 0; */ } .marquee .padding-fix { /* padding-inline-start: 5rem; */ } .marquee .inner { /* display: inline; */ position: relative; transform-origin: left; } .marquee .inner img { width: 100%; height: auto; min-width: 100px; min-height: 100px; } .marquee:hover span { animation-play-state: paused; } .marquee > *:nth-child(1) { /* transform: translateX( -100%); */ /* animation: marquee 30s linear infinite; */ /* animation-delay: 0s; */ } .marquee > *:nth-child(2) { /* transform: translateX( -122%); */ /* animation: marquee2 30s linear infinite; */ animation-delay: 30s; } @keyframes marquee { 0% { transform: translateX( -100vw) } 100% { transform: translateX( 0vw ) } } @keyframes marquee2 { 0% { transform: translateX( calc( -100vw + 20% )) } 100% { transform: translateX( calc( 200% + -100vw )) } } .u-sticky { position: fixed !important; top: 0; margin: 0 auto 1em !important; width: calc(100%); } .u-fullscreen { top: 0; position: fixed; padding: 0; background: rgba(0, 0, 0, 0.8); max-height: 100vh; max-width: 100vw; height: 100%; width: 100%; } .u-2cols { display: flex; align-items: center; flex-flow: row nowrap; } .u-2cols > * + * { margin: 0 1em; } .hiding { opacity: 0.5; } .rtl, .u-rtl, [dir="rtl"] { direction: rtl; } .half { padding: 1em; margin: 1.5em auto 1.5em; text-align: left; } .fixed-half { position: fixed; top: 100vh; } /* */ /* SCROLLBAR */ /* */ html { scrollbar-color: #6969dd transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; cursor: grab; } ::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.001); background-color: #1e1e1e00; } ::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgb(237 237 237 / 52%); border-radius: 10px; cursor: help; -webkit-transition: all 0.1s linear; transition: all 0.1s linear; } ::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 6px rgb(237 237 237 / 100%); border-radius: 10px; cursor: pointer; } ::-webkit-scrollbar-thumb:active { box-shadow: inset 0 0 6px rgb(2 237 237 / 50%); cursor: grabbing; } .u-logo { width: 250px; min-height: 250px; height: auto; position: relative; display: block; margin: 0 auto; } .u-logo svg { position: absolute; top: 0; left: 0; } .u-logo--bg { animation: rotatezed 12s infinite; } @keyframes rotatezed { 0% { transform: rotatez(0deg); } 100% { transform: rotatez(360deg); } } .acid_text { color: 000000; -webkit-transition: color 0.1s linear; -webkit-animation-name: bounce_text; -webkit-animation-duration: 0.3s; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-transition: color 0.1s linear; -moz-animation-name: bounce_text; -moz-animation-duration: 0.3s; -moz-animation-direction: alternate; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; transition: color 0.1s linear; animation-name: bounce_text; animation-duration: 0.3s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .acid *, .acid { color: 000000; -webkit-transition: color 0.1s linear; -webkit-animation-name: bounce; -webkit-animation-duration: 0.3s; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-transition: color 0.1s linear; -moz-animation-name: bounce; -moz-animation-duration: 0.3s; -moz-animation-direction: alternate; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; transition: color 0.1s linear; animation-name: bounce; animation-duration: 0.3s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes bounce { 0% { color: #ffffff; background-color: #ffffff; } 36% { color: #ffdf53; background-color: #ffdf53; } 76% { color: #ff6161; background-color: #ff6161; } 100% { color: #ffffe1; background-color: #fff; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .cursor-grab { margin: 0 1.4rem; cursor: grab; } .cursor-grab:has(:active), .cursor-grab *:has(:active) { cursor: grabbing !important; } .embed-yt img { width: 100%; } .embed-yt img:before { content: "Play"; position: relative; top: -100%; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 4rem; } .embed-yt .play-button { position: relative; top: -100%; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 4rem; } .embed-yt .play-button span { background: var(--bg-color); color: var(--fg-color); } .screen-reader-text { text-indent: -9999px; position: absolute; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } *:focus { /* outline: 3px dashed var(--white); */ } .no-focus-outline a:focus, .no-focus-outline button:focus { outline: none; } :target::before { /* content: ''; */ display: block; height: 2em; /* height: calc( 10 * var(--header-height)); */ } .hover\:prepend-arrow:hover:before { content: '→'; width: 1rem; margin-inline-end: 0.5rem; } .blink-mk2 article.active a, .blink-mk2 article.blinking a, .blink-mk2 article:active a, .blink-mk2 article:has(*:focus-visible) a, .blink-mk2 article:has(*:active) a, .blink-mk2 li.active a, .blink-mk2 li.blinking a, .blink-mk2 li:active a, .blink-mk2 li:has(*:focus-visible) a, .blink-mk2 li:has(*:active) a, .blink-mk2 li.menu-item.active a, .blink-mk2 li.menu-item.blinking a, .blink-mk2 li.menu-item:active a, .blink-mk2 li.menu-item:has(*:focus-visible) a, .blink-mk2 li.menu-item:has(*:active) a { /* color: var(--bg-color); */ animation: blink 0.16s steps(1, end) 2; animation-iteration-count: 4 ; animation-timing-function: step-end; } .blink-mk2 article.active .no-blink a, .blink-mk2 article.active .no-blink, .blink-mk2 article.blinking .no-blink a, .blink-mk2 article.blinking .no-blink, .blink-mk2 article:active .no-blink a, .blink-mk2 article:active .no-blink, .blink-mk2 article:has(*:focus-visible) .no-blink a, .blink-mk2 article:has(*:focus-visible) .no-blink, .blink-mk2 article:has(*:active) .no-blink a, .blink-mk2 article:has(*:active) .no-blink, .blink-mk2 li.active .no-blink a, .blink-mk2 li.active .no-blink, .blink-mk2 li.blinking .no-blink a, .blink-mk2 li.blinking .no-blink, .blink-mk2 li:active .no-blink a, .blink-mk2 li:active .no-blink, .blink-mk2 li:has(*:focus-visible) .no-blink a, .blink-mk2 li:has(*:focus-visible) .no-blink, .blink-mk2 li:has(*:active) .no-blink a, .blink-mk2 li:has(*:active) .no-blink, .blink-mk2 li.menu-item.active .no-blink a, .blink-mk2 li.menu-item.active .no-blink, .blink-mk2 li.menu-item.blinking .no-blink a, .blink-mk2 li.menu-item.blinking .no-blink, .blink-mk2 li.menu-item:active .no-blink a, .blink-mk2 li.menu-item:active .no-blink, .blink-mk2 li.menu-item:has(*:focus-visible) .no-blink a, .blink-mk2 li.menu-item:has(*:focus-visible) .no-blink, .blink-mk2 li.menu-item:has(*:active) .no-blink a, .blink-mk2 li.menu-item:has(*:active) .no-blink { animation: none !important; } @keyframes blink { 100% { background-color: var(--bg-color); color: var(--fg-color); } 50% { background-color: var(--fg-color) ; color: var(--bg-color); } } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38ch; } @media (max-width: 768px) { .ellipsis { /* max-width: 9ch; */ } } @supports (display: -webkit-box) { .ellipsis { display: -webkit-box; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } } } @layer global { .container { width: 100%; } @media (min-width: 480px) { .container { max-width: 480px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-2 { inset: 0.5rem; } .inset-3 { inset: 0.75rem; } .-top-\[1px\] { top: -1px; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } .left-\[-4rem\] { left: -4rem; } .right-0 { right: 0px; } .top-0 { top: 0px; } .top-\[-10px\] { top: -10px; } .top-\[60vh\] { top: 60vh; } .top-\[var\(--header-height\)\] { top: var(--header-height); } .isolate { isolation: isolate; } .z-10 { z-index: 10; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[10000\] { z-index: 10000; } .col-span-full { grid-column: 1 / -1; } .row-span-1 { grid-row: span 1 / span 1; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-4 { margin-bottom: 1rem; } .ml-2 { margin-left: 0.5rem; } .mr-4 { margin-right: 1rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-\[-0\.75rem\] { margin-top: -0.75rem; } .mt-auto { margin-top: auto; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .aspect-auto { aspect-ratio: auto; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; } .h-0 { height: 0px; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; } .h-32 { height: 8rem; } .h-\[100dvh\] { height: 100dvh; } .h-\[66dvw\] { height: 66dvw; } .h-\[70dvh\] { height: 70dvh; } .h-auto { height: auto; } .h-full { height: 100%; } .max-h-\[66dvw\] { max-height: 66dvw; } .min-h-16 { min-height: 4rem; } .min-h-\[52dvw\] { min-height: 52dvw; } .w-1\/2 { width: 50%; } .w-1\/4 { width: 25%; } .w-2 { width: 0.5rem; } .w-8 { width: 2rem; } .w-\[24ch\] { width: 24ch; } .w-\[49dvw\] { width: 49dvw; } .w-\[66dvw\] { width: 66dvw; } .w-\[90dvw\] { width: 90dvw; } .w-full { width: 100%; } .min-w-\[300px\] { min-width: 300px; } .min-w-\[52dvh\] { min-width: 52dvh; } .min-w-\[52dvw\] { min-width: 52dvw; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[48dvw\] { max-width: 48dvw; } .max-w-\[var\(--max-width\)\] { max-width: var(--max-width); } .max-w-full { max-width: 100%; } .flex-shrink { flex-shrink: 1; } .flex-grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-grab { cursor: grab; } .cursor-pointer { cursor: pointer; } .resize { resize: both; } .list-disc { list-style-type: disc; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-\[1fr_2fr_1fr\] { grid-template-columns: 1fr 2fr 1fr; } .grid-cols-\[1fr_3fr_1fr_1fr\] { grid-template-columns: 1fr 3fr 1fr 1fr; } .grid-cols-\[2fr_3fr_3fr\] { grid-template-columns: 2fr 3fr 3fr; } .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-evenly { justify-content: space-evenly; } .justify-items-center { justify-items: center; } .gap-0 { gap: 0px; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-\[1px\] { gap: 1px; } .gap-y-8 { row-gap: 2rem; } .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .justify-self-center { justify-self: center; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rounded { border-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-x-0 { border-left-width: 0px; border-right-width: 0px; } .border-b { border-bottom-width: 1px; } .border-b-0 { border-bottom-width: 0px; } .border-t { border-top-width: 1px; } .border-solid { border-style: solid; } .border-none { border-style: none; } .border-\[var\(--border-color\)\] { border-color: var(--border-color); } .border-gray { border-color: #727272; } .border-white { border-color: #fafafa; } .bg-\[var\(--bg-color\)\] { background-color: var(--bg-color); } .bg-black { background-color: #000000; } .bg-gray { background-color: #727272; } .bg-transparent { background-color: transparent; } .bg-white { background-color: #fafafa; } .object-contain { -o-object-fit: contain; object-fit: contain; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-fill { -o-object-fit: fill; object-fit: fill; } .object-center { -o-object-position: center; object-position: center; } .object-top { -o-object-position: top; object-position: top; } .p-0 { padding: 0px; } .p-1 { padding: 0.25rem; } .p-4 { padding: 1rem; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pb-4 { padding-bottom: 1rem; } .pb-8 { padding-bottom: 2rem; } .pr-0 { padding-right: 0px; } .pt-16 { padding-top: 4rem; } .pt-4 { padding-top: 1rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-end { text-align: end; } .text-2xl { font-size: 1.563rem; } .text-base { font-size: 1rem; } .text-sm { font-size: 0.8rem; } .text-xl { font-size: 1.25rem; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .italic { font-style: italic; } .text-\[var\(--fg-color\)\] { color: var(--fg-color); } .text-\[var\(--mg-color\)\] { color: var(--mg-color); } .text-gray { color: #727272; } .text-white { color: #fafafa; } .underline { text-decoration-line: underline; } .decoration-\[var\(--mg-color\)\] { text-decoration-color: var(--mg-color); } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-\[0\.02\] { opacity: 0.02; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline { outline-style: solid; } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .sepia { --tw-sepia: sepia(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .\!filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } } html { scroll-behavior: smooth; /* overflow-y: auto; */ } html:has(body.admin-bar) { position: relative; top: var(--wp-admin--admin-bar--height); } html:has(body.admin-bar) #wpadminbar { position: fixed !important; } .first\:ms-0:first-child { margin-inline-start: 0px; } .hover\:left-0:hover { left: 0px; } .hover\:border-b:hover { border-bottom-width: 1px; } .hover\:text-white:hover { color: #fafafa; } .hover\:no-underline:hover { text-decoration-line: none; } @media (min-width: 480px) { .sm\:mx-4 { margin-left: 1rem; margin-right: 1rem; } .sm\:grid { display: grid; } .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:gap-x-0 { -moz-column-gap: 0px; column-gap: 0px; } .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 768px) { .md\:static { position: static; } .md\:col-span-full { grid-column: 1 / -1; } .md\:mx-0 { margin-left: 0px; margin-right: 0px; } .md\:mt-4 { margin-top: 1rem; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:inline-grid { display: inline-grid; } .md\:hidden { display: none; } .md\:h-\[80dvh\] { height: 80dvh; } .md\:min-w-\[24ch\] { min-width: 24ch; } .md\:max-w-\[226px\] { max-width: 226px; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:flex-col { flex-direction: column; } .md\:justify-between { justify-content: space-between; } .md\:gap-4 { gap: 1rem; } .md\:gap-y-8 { row-gap: 2rem; } .md\:p-0 { padding: 0px; } .md\:px-0 { padding-left: 0px; padding-right: 0px; } .md\:px-4 { padding-left: 1rem; padding-right: 1rem; } .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } .md\:pb-4 { padding-bottom: 1rem; } .md\:pl-0 { padding-left: 0px; } .md\:pr-0 { padding-right: 0px; } .md\:pt-0 { padding-top: 0px; } .md\:pt-4 { padding-top: 1rem; } .md\:text-left { text-align: left; } .md\:hover\:grayscale-\[10\%\]:hover { --tw-grayscale: grayscale(10%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } } @media (min-width: 1024px) { .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:gap-4 { gap: 1rem; } } /*# sourceMappingURL=theme.css.map */