/* * DAY MODE — "beach" variant of the site. * Toggled by adding .day-mode to (navbar sun/moon button, persisted in * localStorage). Two parts: * 1. a sunny palette: the theme's CSS variables are redefined, so every * button/badge/heading flips automatically; * 2. an animated beach scene (sky, sea, sand, palm tree) that replaces the * campfire in the home hero circle. * TO REMOVE THE FEATURE: delete this file's in header.php, the toggle * button, and its script in footer.php. */ /* --- 1. Day palette ------------------------------------------------------- */ body.day-mode { --kk-cream: #eaf5f9; /* pale sky */ --kk-cream-deep: #d9edf4; --kk-ink: #14324a; /* deep sea navy */ --kk-text: #2c4a5e; --kk-mustard: #ffd166; /* sunny yellow buttons */ --kk-terracotta: #0d93c7; /* sea blue accents */ } /* --- 2. Scene switching ----------------------------------------------------- */ .hero-scene .beach-scene { display: none; } body.day-mode .hero-scene .beach-scene { display: block; } body.day-mode .hero-scene .night-scene, body.day-mode .hero-scene .switch-wrap { display: none; } /* --- 3. Beach scene (adapted into the 400x400 hero circle) ----------------- */ .hero-scene .beach-scene { background-color: #82ccef; box-shadow: 0 0 50px 5px rgba(13, 147, 199, .25); } .hero-scene .beach-scene div { position: absolute; } .hero-scene .beach-scene .sky { height: 40%; width: 100%; background: linear-gradient(to bottom, #037ccb 0%, #82ccef 100%); } .hero-scene .beach-scene .sea { height: 30%; width: 200%; left: -50%; top: 40%; border-radius: 0 0 50% 50%; background: linear-gradient(to bottom, rgba(8, 122, 193, 1) 0%, rgba(18, 156, 192, 1) 25%, rgba(42, 212, 229, 1) 50%, rgba(150, 233, 239, 1) 75%, rgba(222, 236, 211, 1) 100%); animation: kk-wave ease-in-out 10s infinite; transform-origin: 50% 0%; overflow: hidden; } .hero-scene .beach-scene .seafoam { width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 0%, transparent 90%, white 100%); animation: kk-seafoam ease-in-out 10s infinite; } .hero-scene .beach-scene .sand { height: 35%; width: 100%; background: #fdf1d7; top: 65%; } .hero-scene .beach-scene .sand-front { height: 10%; width: 100%; background: #fdf1d7; top: 90%; } .hero-scene .beach-scene .wet-sand { height: 37.5%; width: 200%; left: -50%; top: 40%; border-radius: 0 0 50% 50%; background: #ecc075; box-shadow: 0 10px 10px 0 #ecc075; animation: kk-wetsand ease-in-out 10s infinite; } /* Palm tree, scaled to the circle (slimmer + taller than the original) */ .hero-scene .beach-scene .palm-tree { left: -8%; top: 10%; width: 58%; height: 70%; } .hero-scene .beach-scene .leaves { width: 100%; height: 100%; } .hero-scene .beach-scene .trunk { width: 70%; height: 200%; left: 25%; top: -8%; border-radius: 50%; border-bottom: 24px solid transparent; border-right: 22px solid #aa8366; } .hero-scene .beach-scene .leaves-1 { width: 46%; height: 64%; left: 52%; top: -22%; transform: rotate(-20deg); border-radius: 50%; border-top: 52px solid #394d00; } .hero-scene .beach-scene .leaves-2 { width: 46%; height: 82%; left: 42%; top: -27%; transform: rotate(10deg); border-radius: 50%; border-top: 52px solid #5c7301; } .hero-scene .beach-scene .leaves-3 { width: 46%; height: 82%; left: 66%; top: -27%; transform: rotate(-15deg); border-radius: 50%; border-top: 52px solid #465a05; } /* The logo floats in the sky on the day scene */ .hero-scene .beach-scene .scene-logo { position: absolute; z-index: 30; top: 30%; left: 58%; width: 105px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 12px rgba(255, 255, 255, .8)); } @keyframes kk-wave { 0% { transform: scaleY(1.00); } 35% { transform: scaleY(1.3); } 69% { transform: scaleY(1.00); } 100% { transform: scaleY(1.00); } } @keyframes kk-wetsand { 0% { opacity: 0.2; } 34% { opacity: 0.2; } 35% { opacity: 0.7; } 100% { opacity: 0.2; } } @keyframes kk-seafoam { 0% { opacity: 0; } 30% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }