/* ========================================================================== themes.css — Dynamic theme CSS variables for charul.space Themes: sorry | love | miss-you | neutral The active theme class is applied to by assets/js/app.js ========================================================================== */ :root { /* Neutral / default palette (soft rose) */ --theme-bg-start: #fff5f7; --theme-bg-end: #ffe4ec; --theme-primary: #e88ba0; --theme-primary-strong: #d46a83; --theme-accent: #ffd6e0; --theme-text: #4a2c33; --theme-text-soft: #7a5560; --theme-card-bg: rgba(255, 255, 255, 0.55); --theme-card-border: rgba(255, 255, 255, 0.65); --theme-particle: #f7a8b8; --theme-glow: rgba(232, 139, 160, 0.45); } body { background: linear-gradient(160deg, var(--theme-bg-start), var(--theme-bg-end) 60%, var(--theme-bg-start)); background-attachment: fixed; color: var(--theme-text); transition: background 0.8s ease, color 0.8s ease; } /* ---------- Theme: Sorry (calming lavender/violet) ---------- */ body.theme-sorry { --theme-bg-start: #f1ecfb; --theme-bg-end: #ded2f7; --theme-primary: #8a6fd1; --theme-primary-strong: #6a4dbd; --theme-accent: #cdb9f5; --theme-text: #362a52; --theme-text-soft: #5f4f85; --theme-card-bg: rgba(255, 255, 255, 0.5); --theme-card-border: rgba(255, 255, 255, 0.6); --theme-particle: #b7a1ef; --theme-glow: rgba(138, 111, 209, 0.45); } /* ---------- Theme: Love (vibrant crimson / rose) ---------- */ body.theme-love { --theme-bg-start: #fff0f2; --theme-bg-end: #ffc4cf; --theme-primary: #e63950; --theme-primary-strong: #c21f38; --theme-accent: #ff8fa3; --theme-text: #4a0e17; --theme-text-soft: #832031; --theme-card-bg: rgba(255, 255, 255, 0.5); --theme-card-border: rgba(255, 255, 255, 0.65); --theme-particle: #ff5c72; --theme-glow: rgba(230, 57, 80, 0.5); } /* ---------- Theme: Miss You (deep midnight blue) ---------- */ body.theme-miss-you { --theme-bg-start: #0d1230; --theme-bg-end: #1c2a5e; --theme-primary: #7fa4ff; --theme-primary-strong: #5a7fe6; --theme-accent: #b6c9ff; --theme-text: #eef1ff; --theme-text-soft: #b7c2ee; --theme-card-bg: rgba(20, 26, 60, 0.55); --theme-card-border: rgba(255, 255, 255, 0.15); --theme-particle: #ffffff; --theme-glow: rgba(127, 164, 255, 0.55); } /* ---------- Theme: Neutral (default soft rose) ---------- */ body.theme-neutral { --theme-bg-start: #fff5f7; --theme-bg-end: #ffe4ec; --theme-primary: #e88ba0; --theme-primary-strong: #d46a83; --theme-accent: #ffd6e0; --theme-text: #4a2c33; --theme-text-soft: #7a5560; --theme-card-bg: rgba(255, 255, 255, 0.55); --theme-card-border: rgba(255, 255, 255, 0.65); --theme-particle: #f7a8b8; --theme-glow: rgba(232, 139, 160, 0.45); } /* Themed text-selection accent */ ::selection { background: var(--theme-primary); color: #fff; } /* Themed floating icon layer (sorry: tears, miss-you: stars, love: hearts) */ .theme-icon-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .theme-icon { position: absolute; top: -10vh; font-size: 1.5rem; opacity: 0.55; animation: float-down linear infinite; color: var(--theme-particle); } body.theme-miss-you .theme-icon { animation-name: twinkle-fall; filter: drop-shadow(0 0 4px var(--theme-glow)); } @keyframes float-down { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } } @keyframes twinkle-fall { 0% { transform: translateY(-10vh) scale(0.6); opacity: 0; } 15% { opacity: 1; } 50% { opacity: 0.4; } 85% { opacity: 1; } 100% { transform: translateY(110vh) scale(1); opacity: 0; } }