Something went wrong. Try again.
timconspicuous.neocities.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272/* Lume's design system */@import "https://unpkg.com/@lumeland/ds@0.5.2/ds.css";
@import "./styles/linktree.css";@import "./styles/readingProgress.css";
* { box-sizing: border-box;}
body { margin: 0; padding: 0; min-height: 100vh; font: var(--font-body); overflow-x: hidden; background: #151021;}
#tarot-app { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; /* Prevent horizontal scroll during transitions */}
/* Background system */#background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.card-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; opacity: 0;}
.card-background.active { opacity: 1;}
/* Main tarot layout */.tarot-layout { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; min-height: 100vh; overflow: hidden;}
.card-container { position: absolute; left: 50%; top: 50%; transform: translate(-100px, -50%); z-index: 1;}
.tarot-card { width: 365px; height: 565px; perspective: 1000px;}
.card-image { filter: grayscale(50%); width: auto; height: 100%; max-width: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; transition: opacity 0.3s ease-in-out; position: relative; z-index: 2;}
.content-container { position: absolute; right: 50%; top: 50%; transform: translate(100px, -50%); width: 365px; max-width: 90vw; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;}
.content-title { color: #e0e0e0; font-size: 1.5rem; font-weight: bold; margin-bottom: 10px; text-align: left; width: 100%;}
.content-wrapper { background: rgba(20, 20, 20, 0.75); border: 1px solid rgba(75, 57, 118, 0.3); border-radius: 16px; padding: 1rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #e0e0e0; width: 100%;}
/* Card content styling */.card-content { display: none;}
.card-content.active { display: block;}
.card-content h2 { margin-top: 0; color: #664ea0; font-size: 1.5rem;}
.card-content em { color: #664ea0; font-style: italic;}
/* Navigation */.tarot-navigation { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2rem; z-index: 10;}
.nav-button { background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(75, 57, 118, 0.4); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #664ea0; cursor: pointer; transition: all 0.3s ease; font-size: 1.2rem;}
.nav-button:hover { background: rgba(48, 37, 75, 0.2); border-color: rgba(75, 57, 118, 0.6); transform: scale(1.1);}
.nav-button:active { transform: scale(0.95);}
.nav-button:disabled { opacity: 0.5; cursor: not-allowed;}
.card-indicator { background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(75, 57, 118, 0.4); border-radius: 20px; padding: 0.5rem 1rem; color: #664ea0; font-weight: bold; min-width: 60px; text-align: center; cursor: pointer; transition: all 0.3s ease; user-select: none;}
.card-indicator:hover { background: rgba(48, 37, 75, 0.2); border-color: rgba(75, 57, 118, 0.6); transform: scale(1.05);}
.card-indicator:active { transform: scale(0.95);}
/* Responsive design */@media (max-width: 768px) { .tarot-layout { padding: 1rem; }
.card-container { transform: translate(-75px, -50%) scale(0.75); transform-origin: center; }
.content-container { transform: translate(75px, -50%) scale(0.75); transform-origin: center; width: calc(365px * 0.75); height: auto; display: flex; flex-direction: column; justify-content: center; }
.tarot-card { width: calc(365px * 0.75); height: calc(565px * 0.75); }
.content-wrapper { height: auto; max-height: calc(565px * 0.75); overflow-y: auto; }
.content-title { font-size: 1.25rem; margin-bottom: 8px; }
.tarot-navigation { bottom: 1rem; gap: 1.5rem; }
.nav-button { width: 40px; height: 40px; font-size: 1rem; }
.card-indicator { padding: 0.4rem 0.8rem; min-width: 50px; }}