diff --git a/assets/css/custom.css b/assets/css/custom.css index 5e5529d..f7efaf4 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,4 +1,3 @@ - /* --- Base & Typography --- */ :root { --font-family: 'Nunito', sans-serif; @@ -375,3 +374,133 @@ header { .petal .p6 { transform: rotate(225deg); } .petal .p7 { transform: rotate(270deg); } .petal .p8 { transform: rotate(315deg); } + +/* --- Fantasy Forest Theme --- */ + +body[data-theme="fantasy"] .cloud, +body[data-theme="fantasy"] .hills { + display: none; +} + +.fantasy-scene { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 5; + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; +} + +body[data-theme="fantasy"] .fantasy-scene { + opacity: 1; +} + +body[data-theme="fantasy"] .sky { + background: linear-gradient(to bottom, #1a0c2e, #3a1a5c); +} + +body[data-theme="fantasy"] .ground { + background: #2a1a3c; +} + +.fantasy-moon { + position: absolute; + top: 15%; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 80px; + border-radius: 50%; + background: #f7f2d7; + box-shadow: 0 0 40px rgba(247, 242, 215, 0.7), + 0 0 80px rgba(247, 242, 215, 0.5), + inset 0 0 10px rgba(255,255,255,0.5); +} + +.fantasy-trees { + position: absolute; + bottom: 10%; + left: 0; + width: 100%; + height: 50%; + z-index: 6; +} + +.fantasy-trees::before, +.fantasy-trees::after { + content: ''; + position: absolute; + bottom: 0; + width: 150px; + height: 200px; + background: #110a1f; + border-radius: 60% 60% 10px 10px; + transform-origin: bottom center; +} + +.fantasy-trees::before { + left: 10%; + transform: scale(0.9); + height: 180px; +} + +.fantasy-trees::after { + right: 8%; + transform: scale(1.1); +} + +.fantasy-mist { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 25%; + background: linear-gradient(to top, rgba(42, 26, 60, 0.8), transparent); + z-index: 7; +} + +.fantasy-mushrooms { + position: absolute; + bottom: 12%; + width: 100%; + height: 10%; + z-index: 8; +} + +.fantasy-mushrooms::before, +.fantasy-mushrooms::after { + content: ''; + position: absolute; + width: 6px; + height: 6px; + border-radius: 50%; + background: #00ffab; + box-shadow: 0 0 5px #00ffab, 0 0 10px #00ffab, 0 0 15px #00ffab; + animation: glowing-mushroom 3s infinite alternate; +} + +.fantasy-mushrooms::before { + bottom: 20px; + left: 20%; + animation-delay: 0.5s; +} + +.fantasy-mushrooms::after { + bottom: 10px; + left: 80%; + animation-delay: 1.5s; +} + +@keyframes glowing-mushroom { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.7; + transform: scale(0.9); + } +} \ No newline at end of file diff --git a/index.php b/index.php index a57cf84..d593d8d 100644 --- a/index.php +++ b/index.php @@ -17,7 +17,7 @@ - +
@@ -40,7 +40,7 @@
- +
@@ -53,6 +53,15 @@
+ + +
+
+
+
+
+
+