:root { --background: #050505; --text: #f5f1e8; --muted-text: rgba(245, 241, 232, 0.72); --button-border: rgba(245, 241, 232, 0.35); --button-bg: rgba(245, 241, 232, 0.06); --button-bg-hover: rgba(245, 241, 232, 0.14); } * { box-sizing: border-box; } html { min-height: 100%; background: var(--background); } body { min-height: 100vh; margin: 0; overflow: hidden; background: var(--background); color: var(--text); font-family: Georgia, "Times New Roman", serif; } /* Background layers. The JavaScript adds classes to the element: bg-mist, bg-glow, bg-dust, bg-liquid, bg-pulse, bg-shimmer */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } .page { position: relative; z-index: 5; min-height: 100vh; display: grid; place-items: center; padding: 2rem; } .quote { max-width: 1100px; text-align: center; line-height: 1.05; letter-spacing: -0.05em; text-wrap: balance; } .quote p { margin: 0; font-size: clamp(3rem, 9vw, 9.5rem); font-weight: 400; } .quote p + p { margin-top: 0.35em; } /* ------------------------------------------------------- SMALL TOP-RIGHT STYLE BUTTON ------------------------------------------------------- */ .style-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 20; width: 34px; height: 34px; border: 1px solid var(--button-border); border-radius: 3px; background: var(--button-bg); color: var(--muted-text); font-size: 0.75rem; line-height: 1; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; } .style-toggle:hover { background: var(--button-bg-hover); border-color: rgba(245, 241, 232, 0.65); color: var(--text); transform: scale(1.05); } .style-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } /* ------------------------------------------------------- STYLE 1: DRIFTING MIST ------------------------------------------------------- */ html.bg-mist body { background: #050505; } html.bg-mist body::before { z-index: 1; background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 30%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05), transparent 35%), linear-gradient(120deg, #050505, #111111, #030303); animation: slowMist 28s ease-in-out infinite alternate; } html.bg-mist body::after { z-index: 2; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1px); background-size: 70px 70px; opacity: 0.05; } @keyframes slowMist { 0% { transform: scale(1) translate(0, 0); filter: blur(0); } 100% { transform: scale(1.08) translate(-2%, 2%); filter: blur(2px); } } /* ------------------------------------------------------- STYLE 2: BREATHING RADIAL GLOW ------------------------------------------------------- */ html.bg-glow body { background: #050505; } html.bg-glow body::before { z-index: 1; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.14), transparent 35%), #050505; animation: breathe 9s ease-in-out infinite; } html.bg-glow body::after { z-index: 2; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03), transparent 60%); } @keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.95); } 50% { opacity: 0.8; transform: scale(1.15); } } /* ------------------------------------------------------- STYLE 3: DRIFTING DUST / STARS ------------------------------------------------------- */ html.bg-dust body { background: #050505; } html.bg-dust body::before { z-index: 2; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1px); background-size: 80px 80px; opacity: 0.12; animation: driftDust 60s linear infinite; } html.bg-dust body::after { z-index: 1; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 40%), #050505; } @keyframes driftDust { from { background-position: 0 0; } to { background-position: 240px 160px; } } /* ------------------------------------------------------- STYLE 4: LIQUID THOUGHT GRADIENT ------------------------------------------------------- */ html.bg-liquid body { background: linear-gradient( 120deg, #050505, #111111, #1a120f, #050505 ); background-size: 300% 300%; animation: liquidThought 24s ease infinite; } html.bg-liquid body::before { z-index: 1; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.04), transparent 35%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05), transparent 35%); } html.bg-liquid body::after { z-index: 2; background-image: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 80px 80px; opacity: 0.3; } @keyframes liquidThought { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ------------------------------------------------------- STYLE 5: THOUGHT PULSE ------------------------------------------------------- */ html.bg-pulse body { background: #050505; } html.bg-pulse body::before { z-index: 1; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 42%), #050505; animation: thoughtPulse 8s ease-in-out infinite; } html.bg-pulse body::after { z-index: 2; background: radial-gradient(circle at center, rgba(245, 241, 232, 0.05), transparent 55%); } html.bg-pulse .quote { text-shadow: 0 0 20px rgba(245, 241, 232, 0.08), 0 0 60px rgba(245, 241, 232, 0.06); } @keyframes thoughtPulse { 0%, 100% { opacity: 0.28; transform: scale(0.9); } 50% { opacity: 0.75; transform: scale(1.08); } } /* ------------------------------------------------------- STYLE 6: OCCASIONAL SHIMMER ------------------------------------------------------- */ html.bg-shimmer body { background: #050505; } html.bg-shimmer body::before { z-index: 2; inset: -50%; background: linear-gradient( 120deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60% ); transform: translateX(-100%); animation: shimmer 18s ease-in-out infinite; } html.bg-shimmer body::after { z-index: 1; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.07), transparent 42%), linear-gradient(180deg, #050505, #090909); } @keyframes shimmer { 0%, 75% { transform: translateX(-100%); opacity: 0; } 82% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } /* ------------------------------------------------------- ACCESSIBILITY: REDUCED MOTION ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body, body::before, body::after { animation: none !important; } .style-toggle { transition: none; } } /* ------------------------------------------------------- SMALL SCREENS ------------------------------------------------------- */ @media (max-width: 700px) { .quote p { font-size: clamp(2.8rem, 14vw, 5.5rem); } .style-toggle { width: 32px; height: 32px; top: 0.85rem; right: 0.85rem; } }