/* The evidence-file look: aged manila + gaffer tape + rubber stamps + typewriter ink, with jazz-pink and chaos-green neon pops. */ html { background: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), radial-gradient(ellipse at 18% 12%, rgba(146,120,72,0.13), transparent 34%), radial-gradient(ellipse at 82% 78%, rgba(146,120,72,0.09), transparent 30%), radial-gradient(ellipse at 55% 45%, rgba(120,98,58,0.05), transparent 45%), repeating-linear-gradient(0deg, rgba(28,26,20,0.020) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(28,26,20,0.016) 0 1px, transparent 1px 3px), #EDE2C4; } .mc-card { position: relative; z-index: 0; background: transparent !important; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) drop-shadow(3px 4px 0 rgba(28,26,20,0.20)); transition: filter .15s ease, transform .15s ease; } /* The sheet itself: torn edges, canvas weave, thick-stock lit edge */ .mc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 3px), linear-gradient(0deg, rgba(28,26,20,0.06), rgba(28,26,20,0) 3px), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), repeating-linear-gradient(0deg, rgba(28,26,20,0.028) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(28,26,20,0.022) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 85% 8%, rgba(146,120,72,0.09), transparent 40%), #F8F0DA; clip-path: polygon(0px 6px, 4% 0px, 9% 5px, 15% 1px, 22% 6px, 28% 2px, 35% 7px, 42% 1px, 50% 5px, 57% 0px, 64% 6px, 71% 2px, 78% 7px, 85% 1px, 92% 5px, 97% 2px, 100% 8px, calc(100% - 3px) 20%, 100% 35%, calc(100% - 5px) 52%, calc(100% - 1px) 68%, calc(100% - 6px) 85%, calc(100% - 2px) 94%, calc(100% - 8px) 100%, 93% calc(100% - 5px), 86% calc(100% - 1px), 79% calc(100% - 6px), 71% calc(100% - 2px), 63% calc(100% - 7px), 55% calc(100% - 1px), 47% calc(100% - 5px), 39% calc(100% - 2px), 31% calc(100% - 7px), 23% calc(100% - 2px), 15% calc(100% - 6px), 8% calc(100% - 1px), 3% calc(100% - 5px), 0px calc(100% - 9px), 2px 88%, 6px 72%, 1px 55%, 5px 38%, 2px 22%, 6px 10%); } .mc-card:hover { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) drop-shadow(4px 6px 0 rgba(28,26,20,0.24)) drop-shadow(0 9px 22px rgba(143,232,31,0.38)); } .mc-card:nth-of-type(3n):hover { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) drop-shadow(4px 6px 0 rgba(28,26,20,0.24)) drop-shadow(0 9px 22px rgba(240,67,158,0.42)); } /* Corner caret — every file folds shut */ .mc-foldtab { position: absolute; top: 4px; right: 8px; cursor: pointer; list-style: none; z-index: 3; color: #A3272E; font-size: 16px; font-weight: 700; padding: 6px 10px; user-select: none; } .mc-foldtab::-webkit-details-marker { display: none; } .mc-foldtab::before { content: "▾"; } details.mc-card:not([open]) .mc-foldtab { position: static; display: flex; align-items: baseline; color: #1C1A14; font-size: 13px; padding: 2px 0; } details.mc-card:not([open]) .mc-foldtab::after { content: attr(data-headline); font-weight: 700; order: 1; min-width: 0; } details.mc-card:not([open]) .mc-foldtab::before { content: "▸"; color: #A3272E; order: 2; margin-left: auto; padding-left: 12px; } details.mc-card:not([open]) { padding-top: 12px !important; padding-bottom: 12px !important; min-height: 16px; } /* 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; } /* every third file, the tape is jazz pink — the deck's wink */ .mc-card:nth-of-type(3n)::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(-1deg); margin-left: 6px; } /* Typewriter section bars, neon on approach */ .mc-title { font-family: 'American Typewriter', "Courier New", Courier, monospace !important; font-weight: 700; font-size: 14px !important; padding-top: 4px; transition: color .12s ease; } .mc-title { color: #D81B84 !important; } .mc-title:hover { color: #8FE81F !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(143,232,31,0.30); font-size: 34px !important; } .mc-stat > div:last-child { font-weight: 700; font-size: 13px !important; letter-spacing: 1.5px !important; color: #1C1A14 !important; } /* Rubber stamp utility (login door, badges) */ .mc-stamp { display: inline-block; border: 4px double #A3272E; color: #A3272E; padding: 4px 14px; font-weight: 900; text-shadow: 0.7px 0.5px 0 currentColor; 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,"); } /* A single crimson filing edge — no stripes, no candy */ .mc-sidebar::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #A3272E; } /* 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*="#234436"]:hover { box-shadow: 0 7px 20px -6px rgba(143,232,31,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,232,31,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(143,232,31,0.9); } /* Fold carets pulse green like the Gateway Drug Flowchart */ /* Typewriter is the house voice — even where inline styles said Georgia */ button, input, textarea, select { font-family: 'American Typewriter', 'Courier New', Courier, monospace !important; } @media (max-width: 760px) { .mc-femme { display: none; } } /* The open case file: a manila tab hanging off the folder's top edge */ .mc-casefile { position: relative; margin: 10px 2px 2px; } .mc-casetab { display: inline-block; background: #E2D0A0; border: 2px solid #1C1A14; border-bottom: none; padding: 5px 18px 4px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #3A3320; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%); margin-left: 14px; } .mc-caseedge { display: block; border-top: 2px solid #1C1A14; box-shadow: 0 2px 0 rgba(226,208,160,0.9); } @media (max-width: 560px) { .mc-casetab { font-size: 8px; padding: 4px 8px 3px; letter-spacing: 1px; } } /* Keyboard eyes: everything focusable glows jazz pink */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #F0439E !important; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* The Great Seal — raised from the paper itself, tone on tone */ body::before { content: ""; position: fixed; top: 50%; left: 50%; width: 780px; height: 780px; margin: -390px 0 0 -390px; background: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 400 400'%3E%3Cdefs%3E%3Cpath id%3D'r' d%3D'M 200%2C200 m -158%2C0 a 158%2C158 0 1%2C1 316%2C0 a 158%2C158 0 1%2C1 -316%2C0'%2F%3E%3Cfilter id%3D'paper'%3E%3CfeFlood flood-color%3D'%23EDE2C4'%2F%3E%3CfeComposite in2%3D'SourceAlpha' operator%3D'in'%2F%3E%3C%2Ffilter%3E%3Cfilter id%3D'hi'%3E%3CfeFlood flood-color%3D'rgba(255%2C255%2C255%2C0.75)'%2F%3E%3CfeComposite in2%3D'SourceAlpha' operator%3D'in'%2F%3E%3C%2Ffilter%3E%3Cfilter id%3D'lo'%3E%3CfeFlood flood-color%3D'rgba(28%2C26%2C20%2C0.16)'%2F%3E%3CfeComposite in2%3D'SourceAlpha' operator%3D'in'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg fill%3D'none' stroke%3D'rgba(255%2C255%2C255%2C0.6)' transform%3D'translate(-1.4%2C-1.4)'%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'188' stroke-width%3D'4'%2F%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'179' stroke-width%3D'2'%2F%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'126' stroke-width%3D'2'%2F%3E%3C%2Fg%3E%3Cg fill%3D'none' stroke%3D'rgba(28%2C26%2C20%2C0.10)' transform%3D'translate(1.4%2C1.4)'%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'188' stroke-width%3D'4'%2F%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'179' stroke-width%3D'2'%2F%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'126' stroke-width%3D'2'%2F%3E%3C%2Fg%3E%3Cg fill%3D'none' stroke%3D'%23EDE2C4'%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'188' stroke-width%3D'4'%2F%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'179' stroke-width%3D'2'%2F%3E%3Ccircle cx%3D'200' cy%3D'200' r%3D'126' stroke-width%3D'2'%2F%3E%3C%2Fg%3E%3Cg font-family%3D'American Typewriter%2C Courier New%2C monospace' font-size%3D'19' font-weight%3D'bold' letter-spacing%3D'4'%3E%3Ctext transform%3D'translate(-1%2C-1)' fill%3D'rgba(255%2C255%2C255%2C0.65)'%3E%3CtextPath href%3D'%23r'%3E%E2%98%85 FANCY TALK LLC %E2%98%85 REEFER MADNESS %E2%98%85 OFFICIAL BUSINESS %E2%98%85 EST. 1936 %3C%2FtextPath%3E%3C%2Ftext%3E%3Ctext transform%3D'translate(1%2C1)' fill%3D'rgba(28%2C26%2C20%2C0.09)'%3E%3CtextPath href%3D'%23r'%3E%E2%98%85 FANCY TALK LLC %E2%98%85 REEFER MADNESS %E2%98%85 OFFICIAL BUSINESS %E2%98%85 EST. 1936 %3C%2FtextPath%3E%3C%2Ftext%3E%3Ctext fill%3D'%23EDE2C4'%3E%3CtextPath href%3D'%23r'%3E%E2%98%85 FANCY TALK LLC %E2%98%85 REEFER MADNESS %E2%98%85 OFFICIAL BUSINESS %E2%98%85 EST. 1936 %3C%2FtextPath%3E%3C%2Ftext%3E%3C%2Fg%3E%3Cg font-size%3D'150'%3E%3Ctext x%3D'199' y%3D'247' text-anchor%3D'middle' filter%3D'url(%23hi)'%3E%F0%9F%A6%85%3C%2Ftext%3E%3Ctext x%3D'201' y%3D'249' text-anchor%3D'middle' filter%3D'url(%23lo)'%3E%F0%9F%A6%85%3C%2Ftext%3E%3Ctext x%3D'200' y%3D'248' text-anchor%3D'middle' filter%3D'url(%23paper)'%3E%F0%9F%A6%85%3C%2Ftext%3E%3C%2Fg%3E%3Cg font-family%3D'American Typewriter%2C Courier New%2C monospace' font-size%3D'13' font-weight%3D'bold' letter-spacing%3D'3' text-anchor%3D'middle'%3E%3Ctext x%3D'199' y%3D'299' fill%3D'rgba(255%2C255%2C255%2C0.6)'%3EDULY AUTHORIZED%3C%2Ftext%3E%3Ctext x%3D'201' y%3D'301' fill%3D'rgba(28%2C26%2C20%2C0.09)'%3EDULY AUTHORIZED%3C%2Ftext%3E%3Ctext x%3D'200' y%3D'300' fill%3D'%23EDE2C4'%3EDULY AUTHORIZED%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; pointer-events: none; z-index: -1; user-select: none; } /* Neon green is unreadable as TEXT on paper — ink it (dark surfaces keep green) */ [style*="color: #8FE81F"]:not(.mc-sidebar *):not(.mc-mobilehead *) { color: #1C1A14 !important; } [data-mc-caret] { color: #1C1A14 !important; } [data-mc-caret] { text-shadow: 0 0 6px rgba(143,232,31,0.7); } /* Ask-the-machine wears jazz pink */ .mc-ask { color: #D81B84 !important; border-color: #D81B84 !important; font-weight: 700; } .mc-ask:hover { box-shadow: 0 7px 20px -6px rgba(216,27,132,0.6); } 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: #8FE81F #EDE2C4; }