/* Shared theme tokens (Papyrus + Bible App) Keep UI changes fast: edit variables here. */ :root{ --bg:#191919; --surface:#202020; --surface2:#2c2c2c; --text:#d4d4d4; --muted:#9b9b9b; --muted2:#7a7a7a; --border:rgba(255,255,255,0.09); --border2:rgba(255,255,255,0.16); --active:rgba(255,255,255,0.05); --accent:#2eaadc; /* Notion-ish blue */ --accent-light:#32ade6; --accent-dim:rgba(46, 170, 220, 0.15); --radius:12px; --radius-sm:10px; --radius-xs:8px; --transition:.2s ease; --font-ui:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --gold: var(--accent); } /* --- Scripture Sync Ghost UI --- */ .verse-broadcast-trigger, .vp-result-dish { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; opacity: 0.15; cursor: pointer; transition: all 0.2s ease; color: var(--gold); flex-shrink: 0; } .dish-icon { width: 100%; height: 100%; display: block; } .verse-block:hover .verse-broadcast-trigger, .vp-result:hover .vp-result-dish { opacity: 0.6; } .verse-broadcast-trigger:hover, .vp-result-dish:hover { opacity: 1 !important; color: var(--gold) !important; transform: translateY(-2px); /* Instead of scale, a slight "lift" feels very Apple/Notion */ } /* Stage Transition Physics */ #verse-display.transitioning { opacity: 0; transition: opacity 0.1s ease; } #verse-display.verse-visible { opacity: 1; transition: opacity 0.1s ease; } /* Light mode: toggle by adding class="light" on */ body.light{ --bg:#ffffff; --surface:#f9f9f8; --surface2:#f7f6f3; --text:#37352f; --muted:#787774; --muted2:#9b9a97; --border:rgba(55,53,47,0.09); --border2:rgba(55,53,47,0.16); --active:rgba(55,53,47,0.06); --accent:#2383e2; --accent-light:#3391ee; --accent-dim:rgba(35, 131, 226, 0.10); } /* Enable hover triggers for Media Blocks */ .image-block:hover .verse-broadcast-trigger, .embed-block:hover .verse-broadcast-trigger { opacity: 0.5; } /* Specific positioning for floating media icons */ .image-block .verse-broadcast-trigger, .embed-block .verse-broadcast-trigger { position: absolute; /* REQUIRED for floating */ top: 8px; right: 8px; background: rgba(0,0,0,0.4); padding: 4px; border-radius: 4px; z-index: 10; }