.museum-nav .home-link { position: fixed; top: 0; left: 0; padding: 1rem; color: rgba(255, 121, 13, 1.0); font-family: 'Helvetica', sans-serif; font-size: 1.2rem; cursor: pointer; user-select: none; transition: color 0.1s; } .museum-nav .home-link:hover { color: white; } /* footer */ .footer { position: fixed; bottom: 0; width: 100%; height: 5rem; /*color: black;*/ color: rgba(255, 121, 13, 1.0); } .footer-gradient { position: absolute; bottom: 0rem; width: 100%; height: 5rem; /*background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);*/ background: linear-gradient(180deg, rgba(0,0,0, 0.0), rgba(0,0,0, 1.0) 70%); transform: translateY(2rem); transition: transform 0.15s; } .nav-arrow { position: absolute; bottom: 0; height: 3rem; width: 4rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.15s; transform: translateY(3rem); } .nav-arrow path { fill: transparent; stroke: rgba(255, 121, 13, 1.0); stroke-width: 2px; } .nav-arrow:hover path { stroke: rgba(255, 255, 255, 1.0); } .nav-arrow.arrow-left { left: 0; } .nav-arrow.arrow-right { right: 0; } .footer .artist-desc { position: absolute; bottom: 0; left: 0; width: 100%; white-space: nowrap; text-align: center; padding-bottom: 0.75rem; transition: transform 0.15s; transform: translateY(3rem); } .footer .artist-name { font-family: "Druk Wide"; font-style: italic; text-transform: uppercase; margin-right: 1rem; font-size: 28px; line-height: 28px; cursor: default; user-select: none; } .footer .artist-location { font-family: "Helvetica", sans-serif; font-size: 21px; line-height: 21px; cursor: default; user-select: none; } .footer.with-artist.instant .footer-gradient, .footer.with-artist.instant .nav-arrow, .footer.with-artist.instant .artist-desc { transition: transform 0s; } .footer.with-artist.visible .nav-arrow, .footer.with-artist.visible .artist-desc, .footer.with-artist:hover .nav-arrow, .footer.with-artist:hover .artist-desc { transform: translateY(0); } .footer.with-artist.visible .footer-gradient, .footer.with-artist:hover .footer-gradient { transform: translateY(0); }