/* ========================================================================== THE CHILL CHUMS NETWORK — shared retro-arcade layer CRT scanlines + vignette, neon glow + corner-bracket utilities, and the readability base. Palette-agnostic: relies on the JRPG tokens each page already defines (--void, --gold, --glint). Opt in per page via body class. Loaded AFTER quest.css and BEFORE the page's own stylesheet so page rules can still override. ========================================================================== */ /* ---------- CRT scanlines + soft vignette (add .cc-crt to ) ---------- */ .cc-crt::before { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px); opacity: 0.5; } .cc-crt::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(ellipse 94% 94% at 50% 46%, transparent 60%, rgba(4, 4, 28, 0.5)); } /* ---------- neon glow text utilities ---------- */ .neon-gold { text-shadow: 0 0 7px rgba(248, 204, 80, 0.55), 0 0 16px rgba(248, 204, 80, 0.3), 2px 2px 0 #703808; } .neon-cyan { text-shadow: 0 0 8px rgba(128, 232, 255, 0.5), 0 0 16px rgba(128, 232, 255, 0.28); } .cc-flicker { animation: cc-flicker 7s linear infinite; } @keyframes cc-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.8; } 98.5% { opacity: 0.93; } } /* pulsing "lit sign" glow for small badges/pills — element must set its own color */ .cc-neon-pulse { animation: cc-neon-pulse 2.8s ease-in-out infinite; } @keyframes cc-neon-pulse { 0%, 100% { box-shadow: 0 0 5px currentColor; } 50% { box-shadow: 0 0 15px currentColor; } } /* ---------- arcade corner brackets ---------- */ /* generic utility (add class .cc-brackets), plus a binding to the primary card classes so every card picks it up without per-element edits. */ .cc-brackets, .crew-card, .admin-card { position: relative; } .cc-brackets::before, .crew-card::before, .admin-card::before, .cc-brackets::after, .crew-card::after, .admin-card::after { content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none; border: 2px solid var(--glint); opacity: 0.5; } .cc-brackets::before, .crew-card::before, .admin-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .cc-brackets::after, .crew-card::after, .admin-card::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; } @media (prefers-reduced-motion: reduce) { .cc-flicker, .cc-neon-pulse { animation: none; } .cc-crt::before { opacity: 0.38; } } /* ---------- shared quest-form controls (crews + admin): prize builder ---------- */ .qf-prizes { display: flex; flex-direction: column; gap: 8px; } .qf-rows { display: flex; flex-direction: column; gap: 7px; } .qf-prow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(4, 4, 28, 0.45); border: 2px solid var(--win-line); border-radius: 6px; padding: 8px; } .qf-in { background: rgba(4, 4, 28, 0.85); border: 2px solid var(--win-line); border-radius: 5px; color: var(--ink); font-family: 'DotGothic16', monospace; font-size: 16px; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; padding: 8px 9px; } .qf-in:focus-visible { outline: none; border-color: var(--glint); } .qf-tier { flex: 0 0 auto; cursor: pointer; } .qf-name { flex: 2 1 150px; min-width: 0; } .qf-note { flex: 2 1 130px; min-width: 0; } .qf-imgctl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .qf-thumb { width: 34px; height: 44px; object-fit: cover; border: 2px solid var(--gold-deep); border-radius: 4px; background: #04041c; } .qf-thumb[hidden] { display: none; } .qf-btn { background: rgba(8, 8, 40, 0.85); border: 2px solid var(--win-line); border-radius: 5px; color: var(--ink); font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; line-height: 1.4; padding: 9px 10px; cursor: pointer; } .qf-btn:hover, .qf-btn:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; } .qf-btn.qf-x:hover, .qf-btn.qf-x:focus-visible { color: var(--danger); border-color: var(--danger); } .qf-row-actions { display: flex; gap: 8px; } .qf-msg { font-family: 'DotGothic16', monospace; font-size: 14px; color: var(--dim); min-height: 1.2em; -webkit-font-smoothing: antialiased; } .qf-msg.ok { color: var(--gold); } .qf-msg.err { color: var(--danger); } /* inline YouTube embed (frame-src youtube-nocookie is allowed by the CSP) */ .qv-yt iframe, .quest-yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } /* ---- shared modals (CCModal, assets/js/modal.js) — the only prompts we ever show; browser-native confirm/alert are banned (AESTHETICS.md) ---- */ .cc-modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(2, 2, 14, 0.78); display: flex; align-items: center; justify-content: center; padding: 18px; } .cc-modal { width: min(440px, 100%); max-height: 86vh; overflow-y: auto; background: linear-gradient(180deg, var(--win-top, #3050e0), var(--win-bot, #101070)); border: 3px solid var(--frame, #f8f8f8); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--win-line, #181860), 0 8px 0 rgba(0, 0, 0, 0.5); padding: 16px 18px 18px; } .cc-modal.wide { width: min(640px, 100%); } .cc-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .cc-modal-title { font-size: 11px; color: var(--gold, #f8cc50); line-height: 1.7; } .cc-modal-x { background: none; border: 2px solid var(--win-line, #181860); border-radius: 5px; color: var(--ink, #fff); font-size: 14px; line-height: 1; padding: 6px 8px; cursor: pointer; } .cc-modal-x:hover, .cc-modal-x:focus-visible { border-color: var(--gold, #f8cc50); color: var(--gold, #f8cc50); outline: none; } .cc-modal-text { color: var(--ink, #fff); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: 0.02em; white-space: pre-wrap; } .cc-modal-body .cc-modal-text + .cc-modal-text { margin-top: 8px; } .cc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } .cc-modal-btn { background: rgba(4, 4, 28, 0.55); border: 2px solid var(--frame, #f8f8f8); border-radius: 6px; color: var(--ink, #fff); font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 12px 14px 11px; min-height: 44px; cursor: pointer; } .cc-modal-btn:hover, .cc-modal-btn:focus-visible { border-color: var(--gold, #f8cc50); color: var(--gold, #f8cc50); outline: none; } .cc-modal-btn.gold { border-color: var(--gold, #f8cc50); color: var(--gold, #f8cc50); } .cc-modal-btn.gold:hover, .cc-modal-btn.gold:focus-visible { border-color: var(--glint, #80e8ff); color: var(--glint, #80e8ff); } .cc-modal-btn.danger { border-color: var(--danger, #ff5860); color: var(--danger, #ff5860); } .cc-modal-btn.danger:hover, .cc-modal-btn.danger:focus-visible { filter: brightness(1.25); } /* help-modal furniture: a live demo pen + a caption under it */ .cc-modal-demo { position: relative; margin: 12px 0; border: 2px solid var(--win-line, #181860); border-radius: 6px; background: #04041c; overflow: hidden; min-height: 96px; display: flex; align-items: flex-end; justify-content: center; } .cc-modal-hint { color: var(--dim, #a8b0e8); font-size: 13px; -webkit-font-smoothing: antialiased; letter-spacing: 0.02em; } .cc-modal-actions.stack { flex-direction: column; align-items: stretch; } .cc-modal-actions.stack .cc-modal-btn { text-align: left; } .cc-modal-input { display: block; width: 100%; margin-top: 10px; background: rgba(4, 4, 28, 0.6); border: 2px solid var(--win-line, #181860); border-radius: 5px; color: var(--ink, #fff); font-family: 'DotGothic16', monospace; font-size: 16px; padding: 10px 12px; -webkit-font-smoothing: antialiased; } .cc-modal-input:focus-visible { border-color: var(--gold, #f8cc50); outline: none; }