Something went wrong. Try again.
A Social Deduction / Deception Game
Something went wrong. Try again.
1.9 kB · 40 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041@import "tailwindcss";
/* Themed faces (loaded in index.html): a noir display for the title, a typewriter for the case * files, and an old-style serif for the detective-agency byline. */@theme { --font-noir: "Bebas Neue", "Arial Narrow", sans-serif; --font-case: "Special Elite", "Courier New", monospace; --font-agency: "EB Garamond", "Times New Roman", Times, serif;}
/* Hovering the *back* case file: it can't just raise its z-index (the front file already covers it), * so it slides out from under (z stays low), then z steps to the front at the halfway point, then it * returns to its original xy — now on top. The resting fan rotation is baked into each keyframe so * the transform stays continuous. `-left` is the back-on-the-left variant (slides out to the left); * `-right` mirrors it. */@keyframes folder-emerge-left { 0% { transform: rotate(-6deg) translateX(0); z-index: 0; } 45% { transform: rotate(-6deg) translateX(-2.75rem); z-index: 0; } 50% { transform: rotate(-6deg) translateX(-2.75rem); z-index: 30; } 100% { transform: rotate(-6deg) translateX(0); z-index: 30; }}@keyframes folder-emerge-right { 0% { transform: rotate(6deg) translateX(0); z-index: 0; } 45% { transform: rotate(6deg) translateX(2.75rem); z-index: 0; } 50% { transform: rotate(6deg) translateX(2.75rem); z-index: 30; } 100% { transform: rotate(6deg) translateX(0); z-index: 30; }}
/* Dealing the next rap sheet off the stack: the new sheet slides in from the side it came from * (right when paging forward, left when paging back), tilting straight as it settles on top. */@keyframes sheet-in-right { 0% { transform: translateX(45%) rotate(5deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; }}@keyframes sheet-in-left { 0% { transform: translateX(-45%) rotate(-5deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; }}