/** * In-place WYSIWYG admin editing UI. * Scoped under `.ka-admin` / `.ka-editing` (on ) or `.ka-*` component * classes so visitors are never affected. Palette follows the site navy. */ :root { --ka-navy: var(--navy, #0d1b2a); --ka-border: var(--border, #e5e3df); --ka-muted: var(--text-muted, #8a8680); --ka-danger: #c0392b; --ka-accent: #2563eb; --ka-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* admin sees gated content directly (router re-shows the lock on every nav, so this must win via CSS, not a one-time JS unhide) */ .ka-admin #artistsLock, .ka-admin #projectsLock { display: none !important; } .ka-admin .artists-gate-content.blurred { filter: none !important; opacity: 1 !important; user-select: auto !important; pointer-events: auto !important; } /* ── toolbar ── */ .ka-toolbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 16px; background: var(--ka-navy); color: #fff; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,0.32); font-size: 12px; letter-spacing: 0.03em; } .ka-editing .ka-toolbar { display: none; } /* edit bar takes over */ .ka-toolbar-dot { width: 8px; height: 8px; border-radius: 999px; background: #4ade80; animation: kaPulse 2.2s infinite; } @keyframes kaPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } .ka-toolbar-exit { margin-left: 4px; } /* ── shared buttons ── */ .ka-btn { font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; padding: 10px 18px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: opacity 160ms, background 160ms, border-color 160ms; } .ka-btn:disabled { opacity: 0.5; cursor: default; } .ka-btn-primary { background: var(--ka-navy); color: #fff; } .ka-btn-primary:hover:not(:disabled) { opacity: 0.88; } .ka-btn-ghost { background: transparent; color: var(--ka-navy); border-color: var(--ka-border); } .ka-btn-ghost:hover { background: rgba(13,27,42,0.05); } .ka-toolbar .ka-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); } .ka-toolbar .ka-btn-ghost:hover { background: rgba(255,255,255,0.12); } .ka-btn-danger { background: transparent; color: var(--ka-danger); border-color: rgba(192,57,43,0.4); } .ka-btn-danger:hover { background: rgba(192,57,43,0.07); border-color: var(--ka-danger); } /* ── "+ New" + detail Edit affordances ── */ .ka-add-btn { display: inline-flex; align-items: center; margin: 0 0 22px; padding: 10px 18px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ka-navy); background: transparent; border: 1px dashed rgba(13,27,42,0.45); border-radius: 2px; cursor: pointer; transition: background 160ms, border-color 160ms; } .ka-add-btn:hover { background: rgba(13,27,42,0.05); border-color: var(--ka-navy); } .ka-detail-edit { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--ka-navy); border: none; border-radius: 2px; cursor: pointer; transition: opacity 160ms; } .ka-detail-edit:hover { opacity: 0.85; } /* ── inline contenteditable fields ── */ .ka-editing .ka-ce { outline: none; border-radius: 3px; transition: box-shadow 140ms, background 140ms; cursor: text; } .ka-editing .ka-ce:hover { box-shadow: 0 0 0 1px var(--ka-border); } .ka-editing .ka-ce:focus { box-shadow: 0 0 0 2px var(--ka-accent); background: rgba(37,99,235,0.03); } /* placeholder for empty editables */ .ka-editing .ka-ce:empty::before, .ka-editing [data-ka-placeholder]:empty::before { content: attr(data-ka-placeholder); color: var(--ka-muted); opacity: 0.6; pointer-events: none; } .ka-editing .detail-title.ka-ce, .ka-editing .detail-meta.ka-ce, .ka-editing .detail-label.ka-ce { padding: 2px 6px; margin-left: -6px; } .ka-editing .ka-body-edit { padding: 8px; margin: -8px; margin-bottom: 90px; min-height: 200px; } /* body image blocks (drag to reorder, hover to delete) */ .ka-editing .ka-img-block { position: relative; cursor: grab; outline: 1px dashed transparent; transition: outline-color 140ms; } .ka-editing .ka-img-block:hover { outline-color: var(--ka-accent); } .ka-editing .ka-img-block.ka-dragging { opacity: 0.4; cursor: grabbing; } .ka-editing .ka-img-del { position: absolute; top: 8px; right: 8px; z-index: 3; width: 28px; height: 28px; border: none; border-radius: 999px; background: rgba(13,27,42,0.85); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 140ms; } .ka-editing .ka-img-block:hover .ka-img-del { opacity: 1; } .ka-editing .ka-body-edit.ka-drop-active { outline: 2px dashed var(--ka-accent); outline-offset: 6px; background: rgba(37,99,235,0.03); } .ka-img-uploading { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; background: rgba(13,27,42,0.05); border: 1px dashed var(--ka-border); margin: 40px 0 8px; } .ka-img-spin { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ka-muted); } /* ── banner / hero editing ── */ .ka-editing .ka-hero-edit { position: relative; } .ka-editing .ka-hero-empty { width: 100%; aspect-ratio: 16/7; background: rgba(13,27,42,0.06); border: 1px dashed var(--ka-border); margin-top: 32px; display: flex; align-items: center; justify-content: center; } .ka-editing .ka-hero-loading::after { content: 'Uploading…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13,27,42,0.45); color: #fff; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .ka-hero-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 4; } .ka-hero-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ka-navy); background: rgba(255,255,255,0.92); border: none; border-radius: 2px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.25); transition: background 140ms; } .ka-hero-btn:hover { background: #fff; } .ka-hero-remove { color: var(--ka-danger); } /* ── floating edit bar ── */ .ka-editbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--ka-navy); color: #fff; box-shadow: 0 -8px 30px rgba(0,0,0,0.3); transform: translateY(100%); transition: transform 240ms var(--ka-ease); } .ka-editbar.open { transform: translateY(0); } .ka-editbar-fmts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ka-fmt { min-width: 34px; height: 34px; padding: 0 9px; font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 140ms; } .ka-fmt:hover { background: rgba(255,255,255,0.2); } .ka-editbar-actions { display: flex; gap: 10px; } .ka-editbar-actions .ka-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); } .ka-editbar-actions .ka-btn-ghost:hover { background: rgba(255,255,255,0.12); } .ka-editbar-actions .ka-btn-danger { color: #ff9b8f; border-color: rgba(255,155,143,0.4); } .ka-editbar-actions .ka-btn-danger:hover { background: rgba(255,155,143,0.12); } /* ── login modal ── */ .ka-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(13,27,42,0.55); opacity: 0; transition: opacity 200ms var(--ka-ease); } .ka-modal-backdrop.open { opacity: 1; } .ka-login-card { width: 340px; max-width: 100%; background: #fff; padding: 40px 34px; text-align: center; border-radius: 3px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transform: translateY(8px); transition: transform 220ms var(--ka-ease); } .ka-modal-backdrop.open .ka-login-card { transform: translateY(0); } .ka-login-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ka-muted); margin-bottom: 10px; } .ka-login-title { font-size: 23px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 26px; } .ka-login-input { width: 100%; font-family: inherit; font-size: 14px; padding: 12px 14px; border: 1px solid var(--ka-border); border-radius: 2px; outline: none; margin-bottom: 12px; transition: border-color 160ms; } .ka-login-input:focus { border-color: var(--ka-navy); } .ka-login-error { min-height: 16px; font-size: 12px; color: var(--ka-danger); margin-bottom: 12px; } .ka-login-actions { display: flex; gap: 10px; } .ka-login-actions .ka-btn { flex: 1; } /* ── toast ── */ .ka-toast { position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(10px); z-index: 11000; padding: 11px 20px; background: var(--ka-navy); color: #fff; font-size: 13px; letter-spacing: 0.02em; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ka-ease), transform 200ms var(--ka-ease); } .ka-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .ka-toast.is-error { background: var(--ka-danger); } .ka-editing .ka-toast { bottom: 86px; } @media (max-width: 600px) { .ka-toolbar { bottom: 14px; font-size: 11px; padding: 8px 10px 8px 14px; } .ka-editbar { flex-direction: column; gap: 10px; align-items: stretch; padding: 10px 14px; } .ka-editbar-actions { justify-content: flex-end; } .ka-hero-controls { right: 10px; bottom: 10px; } .ka-hero-btn span { display: none; } } @media (prefers-reduced-motion: reduce) { .ka-modal-backdrop, .ka-login-card, .ka-editbar, .ka-toast { transition: none !important; } .ka-toolbar-dot { animation: none !important; } }