From ab42d8b1bdda9836a4bfe5e81dbcc83b0cff53eb Mon Sep 17 00:00:00 2001 From: dvorakmortonxd Date: Thu, 14 May 2026 11:54:31 +0200 Subject: [PATCH] personal --- src/app/darecek/darecek.css | 710 ------------------------------------ 1 file changed, 710 deletions(-) delete mode 100644 src/app/darecek/darecek.css diff --git a/src/app/darecek/darecek.css b/src/app/darecek/darecek.css deleted file mode 100644 index 3a0750f..0000000 --- a/src/app/darecek/darecek.css +++ /dev/null @@ -1,710 +0,0 @@ -/* Valentine's Page for Kiki */ - -.kiki-container { - min-height: 100vh; - width: 100%; - background: linear-gradient( - 135deg, - #1a1a2e 0%, - #16213e 25%, - #1a1a2e 50%, - #2d132c 75%, - #1a1a2e 100% - ); - background-size: 400% 400%; - animation: gradientBG 15s ease infinite; - position: relative; - overflow: hidden; - font-family: "Inter", "Segoe UI", system-ui, sans-serif; -} - -@keyframes gradientBG { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } -} - -/* Floating Hearts */ -.hearts-container { - position: fixed; - inset: 0; - pointer-events: none; - overflow: hidden; - z-index: 1; -} - -.floating-heart { - position: absolute; - bottom: -50px; - animation: floatUp linear infinite; - opacity: 0.7; - filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.5)); -} - -@keyframes floatUp { - 0% { - transform: translateY(0) rotate(0deg) scale(1); - opacity: 0; - } - 10% { - opacity: 0.7; - } - 90% { - opacity: 0.7; - } - 100% { - transform: translateY(-110vh) rotate(720deg) scale(0.5); - opacity: 0; - } -} - -/* Sparkles */ -.sparkles { - position: fixed; - inset: 0; - pointer-events: none; - z-index: 2; -} - -.sparkle { - position: absolute; - width: 6px; - height: 6px; - background: white; - border-radius: 50%; - animation: sparkle 3s ease-in-out infinite; -} - -@keyframes sparkle { - 0%, 100% { - opacity: 0; - transform: scale(0); - } - 50% { - opacity: 1; - transform: scale(1); - box-shadow: - 0 0 10px #fff, - 0 0 20px #ff69b4, - 0 0 30px #ff69b4; - } -} - -/* Rose Petals */ -.petals-container { - position: fixed; - inset: 0; - pointer-events: none; - overflow: hidden; - z-index: 3; -} - -.petal { - position: absolute; - top: -50px; - font-size: 24px; - animation: fallPetal linear infinite; - filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.5)); -} - -@keyframes fallPetal { - 0% { - transform: translateY(0) rotate(0deg) translateX(0); - opacity: 0; - } - 10% { - opacity: 0.8; - } - 90% { - opacity: 0.8; - } - 100% { - transform: translateY(110vh) rotate(360deg) translateX(100px); - opacity: 0; - } -} - -/* Main Content */ -.kiki-main { - position: relative; - z-index: 10; - display: flex; - flex-direction: column; - align-items: center; - padding: 60px 20px; - min-height: 100vh; -} - -/* Title */ -.kiki-title { - font-size: clamp(2.5rem, 8vw, 5rem); - font-weight: 900; - text-align: center; - background: linear-gradient( - 135deg, - #ff6b9d 0%, - #ff8fab 20%, - #ffc3d8 40%, - #ff8fab 60%, - #ff6b9d 80%, - #e84a8a 100% - ); - background-size: 300% 300%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: titleGradient 5s ease-in-out infinite; - margin-bottom: 0.5rem; - opacity: 0; - transform: translateY(30px); - transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1); - filter: drop-shadow(0 0 30px rgba(255, 107, 157, 0.5)); -} - -.kiki-title.show { - opacity: 1; - transform: translateY(0); -} - -@keyframes titleGradient { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } -} - -.kiki-subtitle { - font-size: clamp(2rem, 6vw, 4rem); - font-weight: 800; - color: #ffc3d8; - text-align: center; - margin-bottom: 3rem; - opacity: 0; - transform: translateY(30px); - transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; - text-shadow: - 0 0 20px rgba(255, 195, 216, 0.6), - 0 0 40px rgba(255, 107, 157, 0.4), - 0 0 60px rgba(255, 107, 157, 0.2); - animation: subtitlePulse 2s ease-in-out infinite; -} - -.kiki-subtitle.show { - opacity: 1; - transform: translateY(0); -} - -@keyframes subtitlePulse { - 0%, 100% { - text-shadow: - 0 0 20px rgba(255, 195, 216, 0.6), - 0 0 40px rgba(255, 107, 157, 0.4), - 0 0 60px rgba(255, 107, 157, 0.2); - } - 50% { - text-shadow: - 0 0 30px rgba(255, 195, 216, 0.8), - 0 0 60px rgba(255, 107, 157, 0.6), - 0 0 90px rgba(255, 107, 157, 0.4); - } -} - -/* Photo Frame */ -.photo-frame { - width: 100%; - max-width: 400px; - margin: 0 auto 3rem; - opacity: 0; - transform: scale(0.8) rotateY(-10deg); - transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s; - perspective: 1000px; -} - -.photo-frame.show { - opacity: 1; - transform: scale(1) rotateY(0deg); -} - -.photo-inner { - background: linear-gradient(145deg, #ff6b9d, #ff8fab, #ffc3d8); - padding: 12px; - border-radius: 24px; - box-shadow: - 0 25px 80px rgba(255, 107, 157, 0.4), - 0 10px 30px rgba(0, 0, 0, 0.3), - inset 0 2px 0 rgba(255, 255, 255, 0.3); - overflow: hidden; - position: relative; -} - -.photo-inner::before { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 50% - ); - pointer-events: none; - border-radius: 24px; -} - -.photo-slider { - display: flex; - transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); -} - -.photo-slide { - min-width: 100%; -} - -.photo { - width: 100%; - height: 350px; - object-fit: cover; - border-radius: 16px; - display: block; -} - -.photo-dots { - display: flex; - justify-content: center; - gap: 10px; - margin-top: 16px; -} - -.photo-dot { - width: 12px; - height: 12px; - border-radius: 50%; - border: none; - background: rgba(255, 107, 157, 0.3); - cursor: pointer; - transition: all 0.3s ease; -} - -.photo-dot:hover { - background: rgba(255, 107, 157, 0.6); - transform: scale(1.2); -} - -.photo-dot.active { - background: #ff6b9d; - box-shadow: 0 0 15px rgba(255, 107, 157, 0.8); - transform: scale(1.3); -} - -/* Love Letter */ -.love-letter { - width: 100%; - max-width: 600px; - margin: 0 auto 3rem; - opacity: 0; - transform: translateY(50px) rotateX(-10deg); - transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s; -} - -.love-letter.show { - opacity: 1; - transform: translateY(0) rotateX(0deg); -} - -.letter-content { - background: linear-gradient( - 145deg, - rgba(255, 255, 255, 0.08), - rgba(255, 255, 255, 0.03) - ); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 107, 157, 0.3); - border-radius: 24px; - padding: 2.5rem; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 0 40px rgba(255, 107, 157, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - position: relative; - overflow: hidden; -} - -.letter-content::before { - content: "💌"; - position: absolute; - top: -10px; - right: -10px; - font-size: 80px; - opacity: 0.1; - transform: rotate(15deg); -} - -.letter-greeting { - font-size: 1.5rem; - font-weight: 700; - color: #ff8fab; - margin-bottom: 1.5rem; - font-style: italic; -} - -.letter-text { - color: #fff; - font-size: 1.1rem; - line-height: 1.8; - margin-bottom: 1.2rem; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -} - -.letter-signature { - color: #ffc3d8; - font-size: 1.2rem; - text-align: right; - margin-top: 2rem; - font-style: italic; - line-height: 1.6; -} - -.signature-name { - font-weight: 700; - font-size: 1.4rem; - background: linear-gradient(135deg, #ff6b9d, #ffc3d8); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -/* Big Heart */ -.big-heart { - margin: 2rem 0; - opacity: 0; - transform: scale(0); - transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; -} - -.big-heart.show { - opacity: 1; - transform: scale(1); -} - -.heart-pulse { - font-size: 100px; - animation: heartBeat 1.5s ease-in-out infinite; - filter: drop-shadow(0 0 30px rgba(255, 107, 157, 0.6)); -} - -@keyframes heartBeat { - 0%, 100% { - transform: scale(1); - } - 10% { - transform: scale(1.15); - } - 20% { - transform: scale(1); - } - 30% { - transform: scale(1.15); - } - 40% { - transform: scale(1); - } -} - -/* Cute Messages */ -.cute-messages { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 1rem; - margin-top: 2rem; - opacity: 0; - transform: translateY(30px); - transition: all 1s ease 1s; -} - -.cute-messages.show { - opacity: 1; - transform: translateY(0); -} - -.cute-msg { - background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(255, 143, 171, 0.2)); - backdrop-filter: blur(10px); - padding: 12px 24px; - border-radius: 999px; - color: #ffc3d8; - font-weight: 600; - font-size: 0.95rem; - border: 1px solid rgba(255, 107, 157, 0.3); - animation: floatMsg 3s ease-in-out infinite; - box-shadow: 0 5px 20px rgba(255, 107, 157, 0.2); -} - -.cute-msg:nth-child(1) { animation-delay: 0s; } -.cute-msg:nth-child(2) { animation-delay: 0.5s; } -.cute-msg:nth-child(3) { animation-delay: 1s; } - -@keyframes floatMsg { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-10px); } -} - -/* Responsive */ -@media (max-width: 600px) { - .kiki-main { - padding: 40px 16px; - } - - .photo { - height: 280px; - } - - .letter-content { - padding: 1.5rem; - } - - .letter-text { - font-size: 1rem; - } - - .heart-pulse { - font-size: 70px; - } - - .cute-messages { - flex-direction: column; - align-items: center; - } -} - -/* Extra glow effect overlay */ -.kiki-container::before { - content: ""; - position: fixed; - top: 30%; - left: 50%; - transform: translateX(-50%); - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(255, 107, 157, 0.15) 0%, transparent 70%); - pointer-events: none; - z-index: 0; - animation: glowPulse 4s ease-in-out infinite; -} - -@keyframes glowPulse { - 0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); } - 50% { opacity: 1; transform: translateX(-50%) scale(1.2); } -} - -/* Question Screen */ -.question-screen { - position: relative; - z-index: 10; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; - padding: 40px 20px; - text-align: center; -} - -.question-heart { - font-size: 75px; - animation: heartBounce 2s ease infinite; - filter: drop-shadow(0 0 40px rgba(255, 107, 157, 0.6)); - margin-bottom: 1rem; -} - -@keyframes heartBounce { - 0%, 100% { transform: scale(1) rotate(-5deg); } - 25% { transform: scale(1.1) rotate(5deg); } - 50% { transform: scale(1) rotate(-5deg); } - 75% { transform: scale(1.15) rotate(5deg); } -} - -.question-title { - font-size: clamp(2rem, 6vw, 3.5rem); - font-weight: 800; - color: #ffc3d8; - margin-bottom: 1rem; - text-shadow: - 0 0 20px rgba(255, 195, 216, 0.6), - 0 0 40px rgba(255, 107, 157, 0.4); - animation: fadeInDown 1s ease; -} - -@keyframes fadeInDown { - from { - opacity: 0; - transform: translateY(-30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.question-text { - font-size: clamp(1.8rem, 5vw, 3rem); - font-weight: 900; - background: linear-gradient( - 135deg, - #ff6b9d 0%, - #ff8fab 25%, - #ffc3d8 50%, - #ff8fab 75%, - #ff6b9d 100% - ); - background-size: 300% 300%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: titleGradient 4s ease-in-out infinite, fadeInUp 1s ease 0.3s both; - margin-bottom: 3rem; - filter: drop-shadow(0 0 30px rgba(255, 107, 157, 0.5)); -} - -.question-buttons { - display: flex; - gap: 2rem; - align-items: center; - justify-content: center; - flex-wrap: wrap; - position: relative; - min-height: 80px; - width: 100%; - max-width: 500px; -} - -.yes-button { - padding: 20px 50px; - font-size: 1.5rem; - font-weight: 700; - color: white; - background: linear-gradient(135deg, #ff6b9d, #ff8fab, #ff6b9d); - background-size: 200% 200%; - border: none; - border-radius: 999px; - cursor: pointer; - transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); - box-shadow: - 0 10px 40px rgba(255, 107, 157, 0.5), - 0 5px 15px rgba(0, 0, 0, 0.2), - inset 0 2px 0 rgba(255, 255, 255, 0.3); - animation: yesButtonPulse 2s ease-in-out infinite, fadeInUp 1s ease 0.5s both; - z-index: 10; -} - -@keyframes yesButtonPulse { - 0%, 100% { - transform: scale(1); - box-shadow: - 0 10px 40px rgba(255, 107, 157, 0.5), - 0 5px 15px rgba(0, 0, 0, 0.2), - inset 0 2px 0 rgba(255, 255, 255, 0.3); - } - 50% { - transform: scale(1.05); - box-shadow: - 0 15px 50px rgba(255, 107, 157, 0.7), - 0 8px 25px rgba(0, 0, 0, 0.3), - inset 0 2px 0 rgba(255, 255, 255, 0.3); - } -} - -.yes-button:hover { - transform: scale(1.15) !important; - background-position: 100% 0; - box-shadow: - 0 20px 60px rgba(255, 107, 157, 0.7), - 0 10px 30px rgba(0, 0, 0, 0.3), - inset 0 2px 0 rgba(255, 255, 255, 0.4); -} - -.no-button { - padding: 15px 35px; - font-size: 1.1rem; - font-weight: 600; - color: #ff8fab; - background: rgba(30, 20, 40, 0.95); - border: 2px solid rgba(255, 107, 157, 0.5); - border-radius: 999px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - backdrop-filter: blur(10px); - animation: fadeInUp 1s ease 0.6s both; - z-index: 5; - white-space: nowrap; -} - -.no-button:hover { - background: rgba(50, 30, 60, 0.95); - border-color: rgba(255, 107, 157, 0.7); -} - -.no-button.runaway { - z-index: 99999 !important; - animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); - box-shadow: - 0 10px 40px rgba(255, 107, 157, 0.5), - 0 0 20px rgba(255, 107, 157, 0.3), - 0 0 60px rgba(255, 107, 157, 0.2); - background: rgba(30, 20, 40, 0.98); - border: 2px solid rgba(255, 107, 157, 0.8); - pointer-events: auto; -} - -@keyframes popIn { - 0% { - transform: scale(0.3) rotate(-10deg); - opacity: 0; - } - 60% { - transform: scale(1.15) rotate(3deg); - } - 100% { - transform: scale(1) rotate(0deg); - opacity: 1; - } -} - -.hint-text { - margin-top: 2rem; - color: #ffc3d8; - font-size: 1.1rem; - font-style: italic; - animation: fadeIn 0.5s ease; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -} - -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -/* Make the Yes button grow bigger over time as No keeps running away */ -.yes-button:active { - transform: scale(0.95) !important; -} - -/* Responsive adjustments for question screen */ -@media (max-width: 600px) { - .question-heart { - font-size: 70px; - } - - .question-buttons { - flex-direction: column; - gap: 1.5rem; - } - - .yes-button { - padding: 18px 45px; - font-size: 1.3rem; - } - - .no-button { - padding: 12px 30px; - font-size: 1rem; - } -} -