@import url("https://fonts.cdnfonts.com/css/wix-madefor-text"); @import url("https://rsms.me/inter/inter.css"); :root { font-size: 16px; --color: #70a8a9; --color2: #70a8a997; --colorN: #fff; --colorS: #000; --colorSA: #fffffd; --colorSH: #ABBEBD; --bg: url(images/pantam-1505.webp); --white: none; --green: inline; --drum-active-hover-opacity: 0.8; --drum-original-hover-opacity: 0; --filter: url(./#hd-glow); --strokeWidthSA: 1.5px; } body { box-sizing: border-box; margin: 0; font-family: Wix Madefor Display, sans-serif; background: #ffffff; padding: 35px min(47px, 4.3vw); font-size: 120%; padding-bottom: 10px; min-height: 100dvh; /* min-height: calc(100svh - 10px); */ } h1 { color: #000; font-family: Inter; font-size: 40px; font-weight: 300; line-height: 114%; letter-spacing: -.2px; text-transform: uppercase; text-align: center; margin: 0; padding-bottom: 57px; } h2 { color: #000; font-size: 26px; font-weight: 700; line-height: 83%; letter-spacing: -1.3px; text-transform: uppercase; text-align: center; margin: 0; padding-bottom: 14px; } @media screen and (min-width: 850px) { body { font-size: 140%; } .logo { position: absolute; } } @media screen and (max-width: 650px) { body { padding: 20px 10px; font-size: 100%; } } @media screen and (max-width: 600px) { body { display: flex; flex-direction: column; } body:after { content: ''; flex-grow: 0.7; } body:before { /* content: ''; */ position: absolute; height: 100svh; left: 0; top: 0; width: 20px; background: #f908; } .logo { min-height: 50px; } h1 { font-size: 21px; letter-spacing: -.105px; font-weight: 400; padding-bottom: 46px; } h2 { font-size: 18px; letter-spacing: -.9px; padding-bottom: 12px; } } #hdrum-vidget { max-width: 1000px; margin: auto; position: relative; text-align: center; padding-bottom: 30px; } #hdrum-vidget svg { display: block; } dl.hd-notes { display: flex; justify-content: space-between; position: relative; padding-bottom: 30px; margin: 0; flex-grow: 0.5; } .hd-notes > .hd-note { display: flex; justify-content: space-between; flex-direction: column; width: 1.9em; height: 3.7em; border-radius: 3em; padding: 1em 0 1em; transition: 0.9s box-shadow; cursor: pointer; color: #1d1d1d; font-weight: 600; } .hd-notes > div:first-child { /* margin-left: -0.3em; */ } .hd-notes > div:last-child { margin-right: 0em; } .hd-notes div.hover, .hd-notes div.active { box-shadow: 0 0 0 1px var(--color); } .hd-notes div.active { transition: 0.1s; } .hd-notes dd { position: relative; font-family: Inter; margin: 0; height: 1em; } .hd-notes [data-petal='0'] dd { font-weight: normal; /* font-variant: small-caps; */ height: 1.1em; } .hd-notes dt { font-family: Inter; font-size: 0.9em; opacity: 0.5; /* line-height: 1.6; */ } @media screen and (min-width: 1000px) { .hd-notes > div { font-size: 115%; margin: -0.1em 0 -0.2em; height: 3.4em; } } @media screen and (max-width: 850px) { .hd-notes [data-petal='0'] { display: none; position: absolute; right: 0; top: 100%; z-index: 1; border: 1px solid; } .hd-notes [data-petal='0'] dd { color: inherit; font-size: 0.95em; } .hd-notes [data-petal='1'] { margin-left: -0.4em; } } .hd-controls, .hd-player, .hd-controls button, .hd-timeline { display: flex; color: var(--color); justify-content: center; border-radius: 50px; align-items: center; user-select: none; } .hd-main { display: flex; margin: auto; margin-bottom: 2.7rem; align-items: center; max-width: 630px; } .hd-drum { font-size: min(1.1vh, 0.96vw, 4.3px); position: relative; max-width: 100em; /* height: 100em; */ margin: auto; box-shadow: 4.2em 3em 9em -2em var(--colorSH), #fff 4px 1px 0 -2.6px inset, #000a inset -0.4px -0.2px 1px -0.2px, 0 0 3em #0001 inset; background: var(--bg) 100% 85%/100.25% 100.5%; border-radius: 50%; /* overflow: hidden; */ pointer-events: none; perspective: 250em; } @media screen and (max-width: 600px) { .hd-main { justify-content: space-evenly; align-items: flex-start; flex-grow: 0.35; width: 100%; } .hd-drum { margin: 0 -53px 0; box-shadow: 0em 4em 4em -2em var(--colorSH), #fff 4px 1px 0 -2.6px inset, #000a inset -0.4px -0.2px 1px -0.2px, 0 0 3em #0001 inset; } .hd-main > button { margin-top: -15px; } #hdrum-vidget { display: flex; flex-direction: column; justify-content: space-between; /* min-height: 83vh; */ width: 100%; flex-grow: 1.4; } } .hd-drum svg { height: 100%; width: 100%; /* mix-blend-mode: luminosity; */ /* clip-path: circle(46%); */ } svg.hd-drum2 { position: absolute; left: 0; top: 0; mix-blend-mode: normal; /* filter: contrast(0.5); */ } .hd-drum svg > g { transform: matrix(1.16, 0, 0, 1.16, -34, -30); } .hd-drum rect { fill: transparent; touch-action: none; /* cursor: pointer; */ stroke: #0000; stroke-width: 30px; pointer-events: fill; } .hd-drum path { stroke: var(--colorS); stroke-width: 1.5px; } path.hd-white { stroke: #fff; opacity: 0.6; /* transform: translate(0.5px, 0.2px); /* display: none; */ /* stroke-width: 3.1px; */ stroke-width: 1.5px; } .hd-drum2 path { filter: var(--filter); stroke: var(--colorSA); stroke-width: var(--strokeWidthSA); } .hd-drum g[data-petal] { transition: 0.3s opacity; will-change: opacity; /* filter: url(./#hd-dark); */ } .hd-drum g[data-petal].hover { transition-duration: 0.7s; } .hd-drum g[data-petal].active { transition-duration: 0.2s; } .hd-drum2 g[data-petal] { opacity: 0.003; } .hd-drum g.hover, .hd-drum g.active { opacity: var(--drum-original-hover-opacity) } .hd-drum2 g.hover { opacity: var(--drum-active-hover-opacity); } .hd-drum2 g.active { opacity: 1; transition: 0.1s opacity; } .hd-controls button { padding: 0; font: inherit; background: transparent; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent; outline: none; border: 1px solid; } .hd-controls button svg { margin: -1px; } .hd-player, .hd-list, .hd-controls > button { border: 1px solid; transition: 0.5s; /* display: initial; */ } .hd-gamma, .hd-play { border: none !important; } .hd-controls > button:not(.hd-tuk):not(.clicked):hover, .-hd-player:hover, .hd-rec.hd-active, .hd-list:hover, .hd-tuk.hover, .hd-gamma.active { box-shadow: 3px 2px 18px 1px var(--color); } .hd-controls > button:not(.hd-tuk):active, .-hd-player:active, .hd-list:active, .hd-tuk.active { box-shadow: 0 0 0 1px var(--color), 3px 2px 16px -1px var(--color); transition: 0.2s cubic-bezier(0.35, 0.71, 0.11, 1); } .hd-player { overflow: hidden; white-space: nowrap; transition: 0.4s; width: 400px; margin: 0 1em; /* padding-right: 16px; */ } .hd-bottom > *:not(.hd-visible) { width: 0; opacity: 0; margin: 0; } .hd-player .hd-timeline { width: 100%; margin: 0 17px 0 -2px; position: relative; --progress: 0%; --thumb: 12px; align-items: center; /* background: radial-gradient(closest-side, currentColor, currentColor calc(100% - 0.5px), transparent) var(--progress) center / var(--thumb) var(--thumb) no-repeat; */ } .hd-timeline::before, .hd-timeline::after { content: ''; position: absolute; pointer-events: none; border-radius: 10px; } .hd-timeline::before { width: 100%; height: 2px; background: linear-gradient( 90deg, currentColor, currentColor var(--progress), var(--color2) var(--progress), var(--color2) ); } .hd-timeline::after { width: var(--thumb); height: var(--thumb); left: var(--progress); background: currentColor; transform: scale(-1) translateX(var(--progress)); } .hd-player [type='range'] { width: 100%; margin: 0; opacity: 0; } button.hd-tuk { width: 49px; height: 49px; align-items: center; padding-bottom: 4px; font-size: 20px; color: #505050; } .hd-rec-play svg > * { transition: 0.3s; } .hd-rec-play:not(.hd-active) svg > rect { opacity: 0; } .hd-rec-play.hd-active svg > g { opacity: 0; } .hd-rec.hd-active { /* animation: recording .9s alternate infinite ease-in-out; */ color: #f37b7b; } @keyframes recording { 100% { color: #f37b7b; } } .hd-tag { position: absolute; left: 48.7%; top: 42.5%; font-size: 302%; color: #000c; /* opacity: 0.9; */ font-weight: 300; transform: rotate(var(--rot)) translateY(7.6em) rotateX(-15deg) rotate(calc(-1 * var(--rot))); /* filter: url(./#dilate); */ text-shadow: 0 0; } .g { top: 36.7%; left: 48.3%; } .hd-tag-n { position: absolute; left: 49%; top: 48.2%; font-size: 273%; color: var(--colorN); font-weight: 300; transform: rotate(var(--rot)) scaleY(1.1) translateY(13.9em) rotateX(-20deg) rotate(calc(-1 * var(--rot))); /* mix-blend-mode: screen; */ } .hd-n1 { top: 15em; } .hd-n2 { --rot: 0deg; } .hd-n3 { --rot: 30.8deg; } .hd-n4 { --rot: 60.8deg; } .hd-n5 { --rot: 89.9deg; } .hd-n6 { --rot: 117.7deg; } .hd-n7 { --rot: 143deg; } .hd-n8 { --rot: 167deg; } .hd-n9 { --rot: 192deg; } .hd-n10 { --rot: 216deg; } .hd-n11 { --rot: 242deg; } .hd-n12 { --rot: 271deg; } .hd-n13 { --rot: 299deg; } .hd-n14 { --rot: 329deg; } .hd-n15 { top: 11.9em; left: 17.6em; } .green { display: var(--green); } .white { display: var(--white); } .white-drum { display: var(--white); } .drum-config-mobile { display: none; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 43px; } .drum-config-mobile-title { font-family: Inter; font-size: 11px; font-weight: 500; line-height: 20px; text-transform: uppercase; color: #8D8A88; } .drum-config-mobile-inner { display: flex; align-items: center; justify-content: center; gap: 6px; } .drum-config-mobile-inner a { font-size: 14px; font-weight: 500; text-decoration: none; height: 26px; width: 68px; border-radius: 50px; display: flex; align-items: center; justify-content: center; } .drum-config-mobile-inner > .white-drum-link { background-color: transparent; color: #AA96BE; } .drum-config-mobile-inner > .green-drum-link { background-color: transparent; color: #5EB3B4; } .drum-config-mobile-inner > .white-drum-link__active { background-color: #C6AAE2; color: #fff; } .drum-config-mobile-inner > .green-drum-link__active { background-color: #64C4C5; color: #fff; } .drum-config { position: absolute; bottom: -90px; left: 0; width: 250px; height: 95px; } .drum-config-title { text-align: center; font-family: Inter; font-size: 15px; font-weight: 600; line-height: 20px; text-transform: uppercase; color: #8D8A88; margin-bottom: 16px; } .drum-config-inner { display: flex; align-items: center; justify-content: center; gap: 17px; } .drum-config-inner a { font-size: 26px; font-weight: 500; text-decoration: none; height: 50px; width: 109px; border-radius: 50px; display: flex; align-items: center; justify-content: center; border-width: 2px; border-style: solid; } .drum-config-inner > .white-drum-link { background-color: transparent; color: #AA96BE; border-color: transparent; opacity: 0.69; } .drum-config-inner > .green-drum-link { background-color: transparent; color: #5EB3B4; border-color: transparent; opacity: 0.69; } .drum-config-inner > .white-drum-link__active { border-color: #C6AAE2; opacity: 1; } .drum-config-inner > .green-drum-link__active { border-color: #64C4C5; opacity: 1; } @media screen and (max-width: 850px) { .drum-config { bottom: -60px; width: 150px; height: 65px; } .drum-config-title { font-size: 12px; margin-bottom: 8px; } .drum-config-inner { gap: 8px; } .drum-config-inner a { font-size: 16px; height: 30px; width: 67px; } } @media screen and (max-width: 600px) { .drum-config-mobile { display: flex; } .drum-config { display: none; } }