/* * Author: Caleb Bronn * Last Update: 8 Apr 2025 * This page contains styling that applies to the homepage */ :root { /* Animation/Transition speeds */ --ripple-speed: 3s; } /*********************************************** * ADD FADE-IN ANIMATION TO THE HAMBURGER MENU * ***********************************************/ /* We fade-in the hamburger menu on the homepage only, because we want the other pages to have a navigation menu that is immediately usable. */ #hamburger { animation: fadeIn 3s ease-in; } /* Animation to fade in the hamburger menu */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /************* * HERO PAGE * *************/ /* Applies a shadow over the left side of the image to blend it with the blakc background color of the */ .shadow-right { /* Remove img from document flow and position in top left corner, behind everything else */ position: absolute; top: 0; left: 0; z-index: -1; } /* Apply shadow only on wide screens */ @media screen and (orientation: landscape){ .shadow-right::after { content: ''; position: absolute; top: 0; width: 100%; height: 100vmin; box-shadow: inset -100px 0 100px #000; } } /*************************** * RIPPLE ANIMATION EFFECT * ***************************/ #fade-bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100vmin; background-color: black; opacity: 0; /* To make the animation smoother, we actually have to use 2 animations. The first one is a delay that does literally nothing except make the background black for 2.5 seconds. The second animation fades out the background to reveal the picture of Rosa underneath. */ animation: delayFadeOut 2.5s linear 0s, fadeOut var(--ripple-speed) ease-in 2.5s; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* This animation's sole purpose in life is to delay the rosaReveal animation, lol. It literally does nothing except maintain the background color. */ @keyframes delayFadeOut { from { opacity: 1; } to { opacity: 1; } } #ripple-overlay { /* Square overtop the Rosa image */ width: 100vmin; height: 100vmin; background-color: var(--trans-black); position: relative; /* For .circle children with absolute position */ } .circle { /* Remove circles from document flow so they can stack on top of each other */ position: absolute; background-color: var(--ripple-color); opacity: 0; border-radius: 50%; width: 100%; height: 100%; animation: rippleEffect var(--ripple-speed) ease-out; } .circle:nth-child(1) { animation-delay: 0.5s; } .circle:nth-child(2) { animation-delay: 1.5s; } .circle:nth-child(3) { animation-delay: 2.5s; } @keyframes rippleEffect { from { opacity: 0.7; transform: scale(0); } to { opacity: 0; transform: scale(1); } } /************************** * HERO PAGE TEXT STYLING * **************************/ /* Since the title says the same thing, we don't need the logo. It also kinda looks distracting on this specific page ngl */ #logo { display: none; }