/* The evidence-file look: aged manila + gaffer tape + rubber stamps + typewriter ink, with jazz-pink and chaos-green neon pops. */ body { background: radial-gradient(ellipse at 30% -10%, rgba(201,160,122,0.14), transparent 60%), radial-gradient(ellipse at 90% 110%, rgba(28,26,20,0.10), transparent 55%), radial-gradient(ellipse at 70% 40%, rgba(176,141,62,0.06), transparent 50%), repeating-linear-gradient(0deg, rgba(28,26,20,0.014) 0 1px, transparent 1px 3px), #F0E6CC; } .mc-card { position: relative; background: radial-gradient(ellipse at 85% 8%, rgba(176,141,62,0.10), transparent 40%), #FBF4E0 !important; box-shadow: 3px 4px 0 rgba(28,26,20,0.18); transition: box-shadow .15s ease, transform .15s ease; } .mc-card:hover { box-shadow: 5px 7px 0 rgba(28,26,20,0.22); } /* Gaffer tape across the top of each card, alternating tilt */ .mc-card::before { content: ""; position: absolute; top: -9px; left: 50%; width: 92px; height: 18px; margin-left: -46px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 5px), rgba(24,23,19,0.88); transform: rotate(-2.5deg); pointer-events: none; } .mc-card:nth-of-type(2n)::before { transform: rotate(2deg); margin-left: -80px; } .mc-card:nth-of-type(3n)::before { transform: rotate(-1deg); margin-left: 6px; } /* every few files, the tape is jazz pink — the deck's wink */ .mc-card:nth-of-type(4n)::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 5px), rgba(240,67,158,0.85); transform: rotate(1.5deg); } /* Typewriter section bars, neon on approach */ .mc-title { font-family: "Courier New", Courier, monospace !important; font-weight: 700; font-size: 14px !important; padding-top: 4px; transition: color .12s ease; } .mc-title:hover { color: #F0439E !important; } .mc-title [data-mc-caret] { color: #8FD127 !important; } .mc-stat { box-shadow: 3px 4px 0 rgba(28,26,20,0.18); transition: transform .12s ease, box-shadow .12s ease; } a:has(.mc-stat):hover .mc-stat { transform: translateY(-2px) rotate(-0.4deg); box-shadow: 4px 7px 0 rgba(240,67,158,0.30); } .mc-stat > div:first-child { font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 rgba(176,141,62,0.28); } .mc-stat > div:last-child { font-family: "Courier New", Courier, monospace; font-weight: 700; } /* Rubber stamp utility (login door, badges) */ .mc-stamp { display: inline-block; border: 3px solid #B3202C; color: #B3202C; padding: 3px 12px; font-family: "Courier New", Courier, monospace; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; transform: rotate(-4deg); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Red case-file slashes down the sidebar's shoulder */ .mc-sidebar::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(-45deg, #B3202C 0 12px, #1C1A14 12px 20px, transparent 20px 34px); opacity: .85; } /* Neon underglow — buttons float on jazz-pink light when approached */ button { transition: transform .12s ease, filter .12s ease, box-shadow .15s ease; } button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 7px 20px -6px rgba(240,67,158,0.65), 0 3px 0 rgba(28,26,20,0.2); } button:active { transform: translateY(1px); box-shadow: 0 2px 8px -2px rgba(240,67,158,0.5); } button[style*="78, 90, 65"]:hover { box-shadow: 0 7px 20px -6px rgba(143,209,39,0.75), 0 3px 0 rgba(28,26,20,0.2); } /* Big link-buttons (Take-me-there, Gmail, etc.) get the same treatment */ a[style*="text-transform: uppercase"]:hover, a[style*="text-transform:uppercase"]:hover { box-shadow: 0 7px 20px -6px rgba(240,67,158,0.6); transform: translateY(-1px); } a { transition: filter .1s ease, box-shadow .15s ease, transform .12s ease; } a:hover { filter: brightness(1.06); } /* Sidebar: active room hums chaos-green; hovered rooms warm up */ .mc-sidebar a:hover { background: rgba(240,67,158,0.16) !important; } .mc-sidebar a[style*="border-left: 4px solid"]:not([style*="transparent"]) { box-shadow: inset 4px 0 12px -4px rgba(143,209,39,0.8), 0 0 14px -2px rgba(240,67,158,0.35); } /* Section bars: neon ink bleeds along the rule on approach */ .mc-title:hover { box-shadow: 0 2px 0 -0.5px rgba(240,67,158,0.85); } /* Fold carets pulse green like the Gateway Drug Flowchart */ [data-mc-caret] { text-shadow: 0 0 6px rgba(143,209,39,0.7); } input, textarea, select { transition: box-shadow .12s ease; } input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(240,67,158,0.30), 0 0 16px -2px rgba(240,67,158,0.5); } ::selection { background: #F0439E; color: #FBF4E0; } html { scrollbar-color: #B08D3E #F0E6CC; }