.app > div.page.page-artists { overflow: hidden; } /* main artists list */ .page-artists .artists-heading { text-align: center; font-family: 'Druk Wide', sans-serif; text-transform: uppercase; font-style: italic; font-size: 2.5vh; margin: 1.5vh 0 0vh; cursor: default; user-select: none; } .page-artists .artist-detail-name, .page-artists .artist-big-name { font-family: 'Druk'; font-style: italic; text-transform: uppercase; text-align: center; line-height: 0.9; white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.1s; } .page-artists .artist-big-name { /* font-size: 17.4vh; */ font-size: 15vh; text-shadow: 0 0 10px #FF790D; transition: text-shadow 0.2s; } .page-artists .artist-big-name:hover { text-shadow: 0 0 0px #FF790D; } .page-artists .artist-list { display: flex; justify-content: space-around; flex-direction: column; height: 100%; width: 100%; padding-bottom: 1rem; } /* artist sub-pages */ .page-artists .artist-gallery { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0; pointer-events: none; transition: opacity 0.2s; background: #0f0f0f; } .page-artists .artist-gallery.visible { pointer-events: auto; opacity: 1; } .page-artists .artist-detail { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: #0f0f0f; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .page-artists .artist-detail.visible { pointer-events: auto; opacity: 1; } .page.page-artists .artist-detail.visible a { } .page-artists .artist-detail-name { font-size: 14.5vh; position: absolute; top: 2vh; left: 0; width: 100%; text-shadow: 0 0 5px #FF790D; cursor: pointer; } .page-artists .artist-detail-name a, .page-artists .artist-detail-name a:hover { text-decoration: none; } .page-artists .nav-arrow { transform: translateZ(0); } .page-artists .nav-arrow path { stroke: #FF790D; fill: #FF790D; } .artist-close { position: fixed; top: 0; right: 0; padding: 1rem 1.5rem; cursor: pointer; text-decoration: none; } .artist-close img { width: 2rem; } .page-artists .artist-content { position: absolute; top: 16vh; left: 0; width: 100vw; height: 78vh; overflow-y: auto; } .page-artists .artist-content::-webkit-scrollbar { display: none; } .page-artists .artist-left { padding-top: 2vh; padding-bottom: 4vh; padding-left: 2vw; padding-right: 2vw; width: 50vw; font-size: 1.15vw; text-shadow: 0 0 5px; line-height: 1.4; } .page-artists .artist-left p, .page-artists .artist-right p { margin: 0 0 2vw 0; } .page-artists .artist-right { position: absolute; top: 0; left: 50vw; width: 50vw; height: 100vh; background: #222222; background-size: cover; background-position: center center; } .page-artists .artist-right-inner { position: absolute; top: 0; left: 50vw; width: 50vw; height: 100%; } .page-artists .artist-location { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-family: 'Druk Wide', sans-serif; text-transform: uppercase; font-style: italic; font-size: 2.5vh; text-shadow: 0 0 3px #FF790D; margin: 0 0 1vh; cursor: default; pointer-events: none; }