/* ============================================================================ inline-editor.css — Phase 1 (admin inline editing) ---------------------------------------------------------------------------- IMPORTANT: Every visual rule here is namespaced under `.bbe-edit-mode`, a class added to ONLY while an admin has edit mode switched on. When edit mode is off (the default for every visitor), none of these rules apply, so the live site renders exactly as it always has — no borders, no overlays, no layout shift. The only thing that ever renders outside edit mode is the floating toggle button, and that is injected by JS only for "admins". ============================================================================ */ /* Accent colours reuse the brand palette when present, with safe fallbacks. */ :root{ --bbe-edit-accent: var(--teal, #0f766e); --bbe-edit-accent-2: var(--gold, #d4a017); --bbe-edit-danger: var(--coral, #e0564f); } /* ── Floating edit-mode toggle (only injected for admins) ─────────────────── */ .bbe-edit-toggle{ position:fixed; right:20px; bottom:20px; z-index:2147483000; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:none; border-radius:100px; font:600 14px/1 system-ui, -apple-system, "Hanken Grotesk", sans-serif; color:#fff; background:var(--bbe-edit-accent); box-shadow:0 6px 20px rgba(0,0,0,.22); cursor:pointer; transition:transform .15s ease, background .15s ease; } .bbe-edit-toggle:hover{ transform:translateY(-2px); } .bbe-edit-toggle .bbe-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); } .bbe-edit-mode .bbe-edit-toggle{ background:var(--bbe-edit-danger); } .bbe-edit-mode .bbe-edit-toggle .bbe-dot{ background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35); } /* ── Status / save banner ─────────────────────────────────────────────────── */ .bbe-edit-status{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:2147483000; padding:10px 16px; border-radius:10px; font:600 13px/1.3 system-ui, sans-serif; color:#fff; background:#1f2937; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:80vw; } .bbe-edit-status.bbe-show{ opacity:1; transform:translateX(-50%) translateY(0); } .bbe-edit-status.bbe-ok{ background:var(--bbe-edit-accent); } .bbe-edit-status.bbe-warn{ background:var(--bbe-edit-danger); } /* ── Editable affordances — ONLY inside edit mode ─────────────────────────── */ /* Hover: signal "you can edit this". */ .bbe-edit-mode [data-bbe-editable]{ outline:1.5px dashed transparent; outline-offset:3px; border-radius:4px; transition:outline-color .12s ease, background .12s ease; cursor:text; } .bbe-edit-mode [data-bbe-editable]:hover{ outline-color:color-mix(in srgb, var(--bbe-edit-accent) 70%, transparent); background:color-mix(in srgb, var(--bbe-edit-accent) 6%, transparent); } .bbe-edit-mode [data-bbe-editable="link"]:hover, .bbe-edit-mode [data-bbe-editable="image"]:hover{ cursor:pointer; } /* Focus / actively editing: a clear solid focus ring. */ .bbe-edit-mode [data-bbe-editable].bbe-active, .bbe-edit-mode [data-bbe-editable]:focus{ outline:2px solid var(--bbe-edit-accent); outline-offset:3px; background:color-mix(in srgb, var(--bbe-edit-accent) 8%, transparent); } .bbe-edit-mode [data-bbe-editable][contenteditable="true"]{ cursor:text; } /* Unsaved-changes marker. */ .bbe-edit-mode [data-bbe-dirty]{ outline-color:var(--bbe-edit-accent-2) !important; } /* ── Contextual mini-toolbar (formatting / link / alt-text) ───────────────── */ .bbe-toolbar{ position:absolute; z-index:2147483600; display:none; align-items:center; gap:4px; padding:6px; background:#1f2937; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.3); font:600 13px/1 system-ui, sans-serif; } .bbe-toolbar.bbe-show{ display:inline-flex; } .bbe-toolbar button{ appearance:none; border:none; background:transparent; color:#e5e7eb; width:30px; height:30px; border-radius:7px; cursor:pointer; font-size:14px; } .bbe-toolbar button:hover{ background:rgba(255,255,255,.14); color:#fff; } .bbe-toolbar .bbe-sep{ width:1px; height:20px; background:rgba(255,255,255,.18); margin:0 2px; } /* ── List item controls ───────────────────────────────────────────────────── */ .bbe-edit-mode [data-bbe-list]{ position:relative; } .bbe-li-del{ position:absolute; left:-26px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:none; border-radius:50%; background:var(--bbe-edit-danger); color:#fff; font-size:12px; line-height:1; cursor:pointer; display:none; place-items:center; padding:0; } .bbe-edit-mode [data-bbe-editable="listitem"]{ position:relative; } .bbe-edit-mode [data-bbe-editable="listitem"]:hover .bbe-li-del{ display:grid; } .bbe-li-add{ display:none; margin-top:8px; padding:6px 12px; border:1.5px dashed var(--bbe-edit-accent); background:color-mix(in srgb, var(--bbe-edit-accent) 8%, transparent); color:var(--bbe-edit-accent); border-radius:8px; font:600 13px/1 system-ui, sans-serif; cursor:pointer; } .bbe-edit-mode .bbe-li-add{ display:inline-block; } /* ── Modal (image swap / link URL) ────────────────────────────────────────── */ .bbe-modal-backdrop{ position:fixed; inset:0; z-index:2147483600; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; padding:20px; } .bbe-modal-backdrop.bbe-show{ display:flex; } .bbe-modal{ background:#fff; border-radius:16px; padding:24px; width:min(440px,100%); box-shadow:0 24px 60px rgba(0,0,0,.3); font-family:system-ui, -apple-system, "Hanken Grotesk", sans-serif; color:#111827; } .bbe-modal h3{ margin:0 0 16px; font-size:18px; } .bbe-modal label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; color:#374151; } .bbe-modal input[type=text], .bbe-modal input[type=url]{ width:100%; box-sizing:border-box; padding:10px 12px; border:1.5px solid #d1d5db; border-radius:9px; font-size:14px; } .bbe-modal input:focus{ outline:2px solid var(--bbe-edit-accent); border-color:transparent; } .bbe-modal .bbe-preview{ margin-top:14px; max-height:160px; border-radius:9px; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center; } .bbe-modal .bbe-preview img{ max-width:100%; max-height:160px; object-fit:contain; } .bbe-modal .bbe-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:22px; } .bbe-modal .bbe-btn{ padding:10px 18px; border-radius:9px; border:none; font-size:14px; font-weight:600; cursor:pointer; } .bbe-modal .bbe-btn-primary{ background:var(--bbe-edit-accent); color:#fff; } .bbe-modal .bbe-btn-ghost{ background:#f3f4f6; color:#374151; } .bbe-modal .bbe-hint{ font-size:12px; color:#6b7280; margin-top:6px; } /* Hide the editor's own injected UI from being treated as editable. */ .bbe-edit-toggle, .bbe-toolbar, .bbe-modal-backdrop, .bbe-edit-status{ }