/* --------------------------------------------------------------------------- Maple Hollow Neighbors — Facebook-group look + per-act corruption. Act state lives on . --------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f0f2f5; --card: #ffffff; --blue: #1877f2; --text: #050505; --text-2: #65676b; --divider: #e4e6eb; --red: #c0130e; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.35; padding-bottom: 120px; transition: background 2s ease; } /* ------------------------------ header ---------------------------------- */ .group-header { background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin-bottom: 16px; } .cover { height: 140px; background: linear-gradient(120deg, #d95f2b 0%, #e8a33d 45%, #7a9c4e 100%); } .group-info { max-width: 680px; margin: 0 auto; padding: 12px 16px 16px; } .group-info h1 { font-size: 24px; font-weight: 800; } .group-meta { color: var(--text-2); font-size: 14px; margin-top: 2px; } /* ------------------------------ feed ------------------------------------ */ #feed { max-width: 680px; margin: 0 auto; padding: 0 8px; } .post { background: var(--card); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin-bottom: 12px; padding: 12px 16px 6px; animation: cardIn 0.35s ease; overflow: hidden; } @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex: none; user-select: none; } .author { font-weight: 600; font-size: 15px; } .timestamp { color: var(--text-2); font-size: 13px; } .body-text { white-space: pre-line; word-wrap: break-word; padding-bottom: 8px; } /* reaction bar */ .rx-bar { border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; } .rx-btn { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 6px 8px; border-radius: 6px; transition: background 0.12s ease; } .rx-btn:hover:not(:disabled) { background: var(--divider); } .rx-btn:disabled { cursor: default; opacity: 0.45; } .rx-btn.chosen { opacity: 1; color: var(--blue); background: #e7f0fe; } /* comments */ .comments { padding: 4px 0 8px 30px; } .comment { display: flex; gap: 8px; margin-top: 8px; animation: cardIn 0.3s ease; } .comment .avatar { width: 28px; height: 28px; font-size: 11px; } .comment-bubble { background: var(--bg); border-radius: 16px; padding: 8px 12px; max-width: 90%; } .comment-bubble .author { font-size: 13px; display: block; } .comment-bubble .body-text { font-size: 14px; padding-bottom: 0; } .comment-meta { margin-top: 2px; } .comment-meta .rx-bar { border: 0; padding: 0 0 0 12px; } .comment-meta .rx-btn { font-size: 11px; padding: 2px 6px; } /* typing indicator */ .typing { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--card); border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); padding: 8px 16px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; z-index: 40; } .typing.hidden { display: none; } .dots { display: inline-flex; gap: 3px; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: #90949c; animation: bounce 1.2s infinite; } .dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } } /* --------------------------- corruption --------------------------------- */ /* act 3 — subtle wrongness */ .act-3 .timestamp.glitched, .act-4 .timestamp.glitched, .act-5 .timestamp.glitched { color: #a33; } /* act 4 — flickers and jitter */ .avatar.flicker { animation: hueflick 0.45s steps(2) 1; } @keyframes hueflick { 0% { filter: none; } 35% { filter: invert(1) hue-rotate(160deg); } 70% { filter: hue-rotate(-120deg) saturate(4); } 100% { filter: none; } } .post.jitter .body-text { animation: jitter 5s infinite; } @keyframes jitter { 0%, 92%, 100% { letter-spacing: normal; } 94% { letter-spacing: 0.6px; } 96% { letter-spacing: -0.4px; } 98% { letter-spacing: 1.1px; } } /* act 5 — collapse */ #vignette { position: fixed; inset: 0; pointer-events: none; z-index: 30; transition: box-shadow 3s ease; } .act-5 #vignette { box-shadow: inset 0 0 180px 40px rgba(120, 0, 0, 0.55); } .act-5 { background: #dcd6d6; } body.shake { animation: shake 0.4s; } @keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 3px); } } .act-5 .post.caps .body-text { font-weight: 700; } /* the player's own reactions turn on them */ .act-5 .rx-btn.chosen { color: var(--red); background: #fdeaea; animation: hauntPulse 1.6s infinite; } @keyframes hauntPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 19, 14, 0); } 50% { box-shadow: 0 0 0 4px rgba(192, 19, 14, 0.35); } } #groupName.wrong { color: var(--red); font-family: "Courier New", monospace; letter-spacing: 2px; } /* finale post from the group itself */ .post.finale { background: #0b0b0d; color: #e8e6e3; box-shadow: 0 0 24px rgba(120, 0, 0, 0.5); } .post.finale .author { color: #fff; } .post.finale .timestamp { color: #8a8f98; } .post.finale .body-text { font-family: "Courier New", monospace; font-size: 14px; color: #ff6b64; } /* removal animation */ .post.removing, .comment.removing { animation: collapse 0.3s ease forwards; } @keyframes collapse { to { opacity: 0; transform: scale(0.96); max-height: 0; margin: 0; padding: 0; } } /* ------------------------------ ending ---------------------------------- */ .ending { position: fixed; inset: 0; z-index: 100; background: #000; color: #cfcfcf; display: flex; align-items: center; justify-content: center; text-align: center; animation: endFade 2.5s ease; } .ending.hidden { display: none; } @keyframes endFade { from { opacity: 0; } to { opacity: 1; } } .ending-inner { max-width: 520px; padding: 24px; } .ending h2 { font-weight: 400; font-size: 22px; line-height: 1.5; margin-bottom: 28px; } .recap { font-family: "Courier New", monospace; font-size: 13px; color: #8a8f98; text-align: left; } .recap div { margin-bottom: 6px; } .recap .rx-word { color: #ff6b64; } .play-again { margin-top: 36px; padding: 10px 26px; background: none; border: 1px solid #444; border-radius: 6px; color: #cfcfcf; font: inherit; cursor: pointer; animation: endFade 1.5s ease; } .play-again:hover { border-color: #999; } .play-again.hidden { display: none; }