style { /* ========================================================== DawnveilNotebook Midnight Fantasy • Cozy Horror ========================================================== */ /* ----------------------------- RESET ----------------------------- */ margin: 0; padding: 0; box-sizing: border-box; } body { background: radial-gradient(circle at top, #25234a 0%, #0b1020 45%, #04050b 100%); color: #ece7ff; font-family: Georgia, serif; overflow-x: hidden; min-height: 100vh; } /* ----------------------------- INTRO SCREEN ----------------------------- */ #intro { position: fixed; display: flex; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle, #18152f, #070910); z-index: 9999; transition: 1s; } .intro-content { animation: fadeIn 2s; } .intro-moon { font-size: 90px; color: white; text-shadow: 0 0 20px white, 0 0 50px #9b92ff; margin-bottom: 25px; } .intro-content h1 { font-size: 60px; letter-spacing: 5px; margin-bottom: 15px; } .intro-text { color: #bcb4d8; font-style: italic; margin-bottom: 35px; } #openNotebook { padding: 16px 40px; border-radius: 15px; border: 1px solid #756ae0; background: #2d2854; color: white; font-size: 18px; cursor: pointer; transition: .35s; } #openNotebook:hover { transform: translateY(-4px); background: #453cb0; box-shadow: 0 0 20px #7b71ff; } /* ----------------------------- MAIN WEBSITE ----------------------------- */ #website { display: none; } /* ----------------------------- MOON ----------------------------- */ .moon { position: fixed; top: 35px; right: 50px; width: 130px; height: 130px; border-radius: 50%; background: #f5f4ff; box-shadow: 0 0 30px white, 0 0 70px #bdb7ff, 0 0 120px rgba(170,160,255,.4); animation: moonGlow 6s ease-in-out infinite; z-index: -2; } /* ----------------------------- STARS ----------------------------- */ .stars { position: fixed; pointer-events: none; z-index: -3; } .stars::before { content: "✦ ✧ ✦ ✦ ✧ ✦ ✧"; position: absolute; top: 40px; left: 0; width: 100%; letter-spacing: 45px; color: white; opacity: .35; animation: twinkle 5s infinite; } /* ----------------------------- FOG ----------------------------- */ .fog { position: fixed; background: radial-gradient(rgba(255,255,255,.05), transparent 70%); opacity: .18; animation: fogMove 35s linear infinite; pointer-events: none; z-index: -1; } /* ----------------------------- NOTEBOOK ----------------------------- */ .notebook { width: 90%; max-width: 900px; margin: 80px auto; padding: 50px; border-radius: 25px; background: linear-gradient( 135deg, #181c37, #0c1020 ); border: 1px solid #56528a; box-shadow: 0 0 35px black, inset 0 0 25px rgba(255,255,255,.03); } /* ----------------------------- HEADINGS ----------------------------- */ .notebook h1 { text-align: center; font-size: 55px; margin-bottom: 20px; color: white; letter-spacing: 4px; } .quote { text-align: center; font-style: italic; color: #c9c2e7; margin-bottom: 45px; } section { margin-bottom: 45px; } h2 { color: #ddd7ff; margin-bottom: 18px; } p { line-height: 1.9; font-size: 17px; } /* ----------------------------- PAGE BUTTONS ----------------------------- */ .page { background: rgba(255,255,255,.05); border: 1px solid #56528a; border-radius: 12px; padding: 18px; margin: 15px 0; transition: .35s; } .page:hover { transform: translateY(-5px); background: rgba(120,110,255,.18); box-shadow: 0 0 20px rgba(130,120,255,.35); } .page a { color: white; text-decoration: none; } /* ----------------------------- FOOTER ----------------------------- */ footer { text-align: center; color: #777; padding-bottom: 40px; } /* ----------------------------- ANIMATIONS ----------------------------- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes moonGlow { 0%,100% { box-shadow: 0 0 30px white, 0 0 70px #bdb7ff, 0 0 120px rgba(170,160,255,.4); } 50% { box-shadow: 0 0 40px white, 0 0 90px #d2ccff, 0 0 150px rgba(170,160,255,.55); } } @keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: .45; } } @keyframes fogMove { from { transform: translateX(-10%);} to { transform: translateX(10%); } } /* ========================================================== PART 2 Candle • Quill • Notebook Decorations ========================================================== */ /* ========================= CANDLE ========================= */ .candle{ position:fixed; bottom:35px; left:40px; font-size:65px; animation:flicker 2.2s infinite; filter:drop-shadow(0 0 15px orange); z-index:50; } .candle::before{ content:""; position:absolute; width:220px; height:220px; left:-70px; top:-80px; border-radius:50%; background: radial-gradient( rgba(255,180,70,.22), transparent 70% ); animation: glow 3s infinite; pointer-events:none; } /* ========================= QUILL ========================= */ .quill{ position:fixed; right:35px; bottom:35px; z-index:100; animation:floatCat 5s ease-in-out infinite; } .quill img{ width:120px; transition:.4s; filter:drop-shadow(0 0 12px rgba(180,170,255,.5)); } .quill:hover img{ transform:scale(1.08); } .quill-message{ position:absolute; bottom:130px; right:0; width:240px; padding:15px; border-radius:18px; background:#171c32; border:1px solid #5d5aa5; color:#ece7ff; opacity:0; transition: .4s; pointer-events:none; box-shadow: 0 0 20px rgba(120,110,255,.35); } .quill:hover .quill-message{ opacity:1; } /* ========================= NOTEBOOK ========================= */ .notebook{ position:relative; overflow:hidden; } /* Gold Corners */ .notebook::before{ content:""; position:absolute; top:12px; left:12px; width:70px; height:70px; border-top:2px solid #bca55b; border-left:2px solid #bca55b; border-radius:12px; } .notebook::after{ content:""; position:absolute; bottom:12px; right:12px; width:70px; height:70px; border-bottom:2px solid #bca55b; border-right:2px solid #bca55b; border-radius:12px; } /* ========================= PAGE LINKS ========================= */ .page{ position:relative; overflow:hidden; } .page::before{ content:""; position:absolute; left:-120%; top:0; width:100%; height:100%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.12), transparent ); transition:1s; } .page:hover::before{ left:120%; } /* ========================= FOOTER ========================= */ footer{ margin-top:40px; line-height:1.8; } /* ========================= ANIMATIONS ========================= */ @keyframes glow{ 0%,100%{ transform:scale(1); opacity:.18; } 50%{ transform:scale(1.08); opacity:.35; } } @keyframes floatCat{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-10px); } 100%{ transform:translateY(0px); } } /*========================================================== PART 3 The Observers ========================================================== */ /* ===================================== OBSERVER CONTAINER ===================================== */ .observer-container{ position:fixed; pointer-events:none; overflow:hidden; z-index:1; } /* ===================================== EYES ===================================== */ .eye{ position:absolute; width:22px; height:10px; opacity:0; animation: appear 8s forwards; } /* left eye */ .eye::before{ content:""; position:absolute; left:0; width:8px; height:8px; border-radius:50%; background:#8b0000; box-shadow: 0 0 8px red, 0 0 20px crimson; } /* right eye */ .eye::after{ content:""; position:absolute; right:0; width:8px; height:8px; border-radius:50%; background:#8b0000; box-shadow: 0 0 8px red, 0 0 20px crimson; } /* ===================================== SHADOW PERSON ===================================== */ .shadow{ position:absolute; width:180px; height:300px; background: radial-gradient( rgba(0,0,0,.6), transparent 70% ); opacity:0; filter:blur(25px); } /* ===================================== ANIMATIONS ===================================== */ @keyframes appear{ 0%{ opacity:0; } 20%{ opacity:.9; } 40%{ opacity:0; } 60%{ opacity:.9; } 100%{ opacity:0; } } @keyframes shadowFade{ 0%{ opacity:0; transform:translateX(-20px); } 30%{ opacity:.18; } 100%{ opacity:0; transform:translateX(30px); } }