/* ============================================================ ALIGNMENT-DOC UI — Phase 2 webapp overlay Progressive enhancement of the static deck. Loaded after brand-tokens.css; inherits Poppins + #E60013 + Omusubi minimal discipline. All UI is hidden unless the .ad-ready class is set on by alignment-doc.js (avoids unstyled-flash). ============================================================ */ :root { --ad-fab-size: 56px; --ad-fab-bg: var(--accent, #E60013); --ad-fab-fg: #fff; --ad-drawer-w: 420px; --ad-drawer-bg: #fff; --ad-overlay-bg: rgba(15, 15, 18, .42); --ad-line: rgba(15, 15, 18, .08); --ad-ink: #0f0f12; --ad-ink-mute: rgba(15, 15, 18, .55); --ad-shadow: 0 18px 48px rgba(0, 0, 0, .14), 0 4px 12px rgba(0, 0, 0, .06); --ad-radius: 10px; --ad-radius-sm: 6px; --ad-pill-curative: #3a7d8b; /* muted teal */ --ad-pill-slick: #d76f24; /* warm orange */ --ad-pill-omusubi: #E60013; /* brand red */ } /* Hide UI until JS has bootstrapped (avoids flash) */ body:not(.ad-ready) .ad-fab, body:not(.ad-ready) .ad-drawer, body:not(.ad-ready) .ad-modal { display: none !important; } /* ============================================================ FAB (floating action button) ============================================================ */ .ad-fab { position: fixed; bottom: 22px; right: 22px; z-index: 2147483640; width: var(--ad-fab-size); height: var(--ad-fab-size); border-radius: 999px; background: var(--ad-fab-bg); color: var(--ad-fab-fg); border: 0; cursor: pointer; box-shadow: var(--ad-shadow); display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease, box-shadow .18s ease; font-family: var(--omusubi-font-body, "Poppins", sans-serif); -webkit-tap-highlight-color: transparent; } .ad-fab:hover { transform: translateY(-2px); box-shadow: 0 22px 56px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.08); } .ad-fab:active { transform: translateY(0); } .ad-fab:focus-visible { outline: 2px solid var(--ad-fab-bg); outline-offset: 4px; } .ad-fab svg { width: 22px; height: 22px; } .ad-fab .ad-fab-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 999px; background: #fff; color: var(--ad-ink); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border: 2px solid var(--ad-fab-bg); box-shadow: 0 2px 6px rgba(0,0,0,.18); } .ad-fab .ad-fab-badge:empty, .ad-fab .ad-fab-badge[data-count="0"] { display: none; } .ad-fab-tip { position: fixed; bottom: 22px; right: calc(22px + var(--ad-fab-size) + 12px); z-index: 2147483639; background: var(--ad-ink); color: #fff; font-size: 12px; letter-spacing: .02em; padding: 8px 12px; border-radius: var(--ad-radius-sm); font-family: var(--omusubi-font-body, "Poppins", sans-serif); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .15s ease, transform .15s ease; white-space: nowrap; } .ad-fab:hover + .ad-fab-tip, .ad-fab:focus-visible + .ad-fab-tip { opacity: 1; transform: translateY(0); } /* ============================================================ Drawer (slides in from right) ============================================================ */ .ad-drawer-overlay { position: fixed; inset: 0; background: var(--ad-overlay-bg); z-index: 2147483641; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .ad-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .ad-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(var(--ad-drawer-w), 100vw); background: var(--ad-drawer-bg); z-index: 2147483642; box-shadow: -18px 0 48px rgba(0,0,0,.14); transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; font-family: var(--omusubi-font-body, "Poppins", sans-serif); color: var(--ad-ink); } .ad-drawer.is-open { transform: translateX(0); } .ad-drawer-header { padding: 18px 22px 16px; border-bottom: 1px solid var(--ad-line); display: flex; align-items: center; gap: 14px; } .ad-drawer-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ad-ink-mute); font-weight: 500; margin: 0 0 2px; } .ad-drawer-title { font-size: 18px; font-weight: 600; letter-spacing: -.005em; margin: 0; line-height: 1.25; } .ad-drawer-meta { font-size: 11.5px; color: var(--ad-ink-mute); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ad-drawer-meta .ad-pill { font-size: 10.5px; padding: 2px 7px; } .ad-drawer-close { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: var(--ad-ink-mute); padding: 8px; border-radius: var(--ad-radius-sm); display: inline-flex; align-items: center; justify-content: center; } .ad-drawer-close:hover { background: rgba(15,15,18,.05); color: var(--ad-ink); } .ad-drawer-close svg { width: 18px; height: 18px; } .ad-session-bar { padding: 12px 22px; border-bottom: 1px solid var(--ad-line); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ad-ink-mute); background: rgba(15,15,18,.02); } .ad-session-bar .ad-pill { font-size: 11px; } .ad-session-bar .ad-spacer { flex: 1; } .ad-session-bar button { background: transparent; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); padding: 4px 10px; font-size: 11.5px; cursor: pointer; color: var(--ad-ink); font-family: inherit; } .ad-session-bar button:hover { background: rgba(15,15,18,.04); } .ad-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; } .ad-empty { text-align: center; padding: 36px 8px; color: var(--ad-ink-mute); font-size: 14px; line-height: 1.55; } .ad-empty strong { color: var(--ad-ink); display: block; margin-bottom: 6px; font-weight: 600; } .ad-comment { border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 12px 14px; background: #fff; } .ad-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ad-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(15,15,18,.04); } .ad-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--ad-ink); } .ad-pill[data-party="curative"]::before { background: var(--ad-pill-curative); } .ad-pill[data-party="slick"]::before { background: var(--ad-pill-slick); } .ad-pill[data-party="omusubi"]::before { background: var(--ad-pill-omusubi); } .ad-comment-time { font-size: 11.5px; color: var(--ad-ink-mute); letter-spacing: .01em; } .ad-comment-body { font-size: 14px; line-height: 1.55; margin: 0; white-space: pre-wrap; word-break: break-word; } .ad-comment[data-resolved="true"] { opacity: .55; background: rgba(15,15,18,.02); } .ad-comment[data-resolved="true"] .ad-comment-body { text-decoration: line-through; text-decoration-color: rgba(15,15,18,.35); } /* Comment-head right-side cluster: push action + badge to the end */ .ad-comment-head { justify-content: flex-start; } .ad-comment-time { margin-right: auto; } .ad-comment-badge { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(30,122,74,.1); color: #1e7a4a; border: 1px solid rgba(30,122,74,.2); } .ad-comment-action { background: transparent; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); padding: 3px 9px; font-size: 11.5px; font-weight: 500; cursor: pointer; color: var(--ad-ink); font-family: inherit; letter-spacing: .005em; } .ad-comment-action:hover { background: rgba(15,15,18,.04); border-color: rgba(15,15,18,.16); } .ad-comment-action:disabled { opacity: .5; cursor: progress; } .ad-comment-action.is-reopen { color: var(--ad-ink-mute); } .ad-comment-action.is-reopen:hover { color: var(--ad-ink); } .ad-drawer-footer { border-top: 1px solid var(--ad-line); padding: 14px 22px 18px; background: rgba(15,15,18,.015); } .ad-compose textarea { width: 100%; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 80px; background: #fff; color: var(--ad-ink); box-sizing: border-box; } .ad-compose textarea:focus { outline: 2px solid var(--ad-fab-bg); outline-offset: 1px; border-color: var(--ad-fab-bg); } .ad-compose-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .ad-compose-actions .ad-spacer { flex: 1; } .ad-compose-hint { font-size: 11.5px; color: var(--ad-ink-mute); } .ad-btn { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em; border: 1px solid var(--ad-line); background: #fff; color: var(--ad-ink); padding: 8px 14px; border-radius: var(--ad-radius-sm); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .ad-btn:hover { background: rgba(15,15,18,.04); } .ad-btn:focus-visible { outline: 2px solid var(--ad-fab-bg); outline-offset: 2px; } .ad-btn:disabled { opacity: .5; cursor: not-allowed; } .ad-btn.is-primary { background: var(--ad-fab-bg); color: #fff; border-color: var(--ad-fab-bg); } .ad-btn.is-primary:hover { background: #b8000f; border-color: #b8000f; } .ad-loginlike { text-align: center; padding: 12px 8px 4px; } .ad-loginlike p { margin: 0 0 12px; font-size: 13.5px; color: var(--ad-ink-mute); } .ad-error { background: rgba(230, 0, 19, .08); border: 1px solid rgba(230, 0, 19, .25); color: #8a0010; padding: 8px 12px; border-radius: var(--ad-radius-sm); font-size: 12.5px; margin: 0 0 12px; } /* ============================================================ Modal (login) ============================================================ */ .ad-modal-overlay { position: fixed; inset: 0; background: var(--ad-overlay-bg); z-index: 2147483643; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .ad-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .ad-modal { background: #fff; border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); width: min(440px, 100%); padding: 28px 28px 24px; font-family: var(--omusubi-font-body, "Poppins", sans-serif); color: var(--ad-ink); } .ad-modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.005em; } .ad-modal .ad-modal-sub { margin: 0 0 22px; font-size: 13.5px; color: var(--ad-ink-mute); line-height: 1.55; } .ad-party-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; } .ad-party-pick { background: #fff; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 12px 8px; cursor: pointer; text-align: center; font-family: inherit; transition: border-color .15s ease, background .15s ease; } .ad-party-pick:hover { background: rgba(15,15,18,.03); } .ad-party-pick.is-selected { border-color: var(--ad-fab-bg); background: rgba(230, 0, 19, .04); } .ad-party-pick .ad-pp-name { font-weight: 600; font-size: 14px; display: block; margin-bottom: 4px; } .ad-party-pick .ad-pp-role { font-size: 11px; color: var(--ad-ink-mute); text-transform: uppercase; letter-spacing: .12em; } .ad-field { margin: 0 0 14px; } .ad-field label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-ink-mute); margin-bottom: 6px; } .ad-field input { width: 100%; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--ad-ink); background: #fff; box-sizing: border-box; } .ad-field input:focus { outline: 2px solid var(--ad-fab-bg); outline-offset: 1px; border-color: var(--ad-fab-bg); } .ad-modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .ad-modal-actions .ad-spacer { flex: 1; } /* ============================================================ Edit mode (Phase 2b Step 1) Affordance: dotted red outline on hover/focus, save-state ticks. Only active when has .ad-edit-mode (editor toggled it on). ============================================================ */ .ad-session-bar .ad-edit-toggle { background: transparent; border: 1px solid var(--ad-fab-bg); color: var(--ad-fab-bg); font-weight: 500; } .ad-session-bar .ad-edit-toggle:hover { background: rgba(230,0,19,.06); } .ad-session-bar .ad-edit-toggle.is-on { background: var(--ad-fab-bg); color: var(--ad-fab-fg); border-color: var(--ad-fab-bg); } .ad-session-bar .ad-edit-toggle.is-on:hover { filter: brightness(.95); } /* Subtle page-level cue that edit mode is active */ .ad-edit-mode { /* hairline accent ribbon at the top of the viewport */ box-shadow: inset 0 3px 0 0 var(--ad-fab-bg); } /* Hover/focus affordance on editable elements */ .ad-editable { outline: 1px dashed transparent; outline-offset: 4px; transition: outline-color .12s ease, background-color .12s ease; border-radius: 2px; cursor: text; position: relative; } .ad-edit-mode .ad-editable:hover { outline-color: rgba(230,0,19,.5); } .ad-edit-mode .ad-editable:focus { outline: 1px solid var(--ad-fab-bg); outline-offset: 4px; background: rgba(230,0,19,.025); } /* Save-state ticks (right edge, non-intrusive) */ .ad-editable[data-ad-saving]::after, .ad-editable[data-ad-saved]::after, .ad-editable[data-ad-error]::after { position: absolute; top: 0; right: -84px; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-family: var(--omusubi-font-body, "Poppins", sans-serif); padding: 2px 6px; border-radius: 3px; pointer-events: none; white-space: nowrap; } .ad-editable[data-ad-saving]::after { content: "saving…"; color: var(--ad-ink-mute); background: rgba(15,15,18,.04); } .ad-editable[data-ad-saved]::after { content: "saved"; color: #1e7a4a; background: rgba(30,122,74,.08); } .ad-editable[data-ad-error]::after { content: "error"; color: var(--ad-fab-bg); background: rgba(230,0,19,.08); } @media (max-width: 1100px) { /* On narrower viewports the right-edge tick collides with content; hide it. The element still saves; only the visible label is dropped. */ .ad-editable[data-ad-saving]::after, .ad-editable[data-ad-saved]::after, .ad-editable[data-ad-error]::after { display: none; } } /* ============================================================ Image swap (Phase 2b Step 2) ============================================================ */ /* Hidden file input — never visible, never interactive via tab. */ .ad-file-input { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Hover affordance on editable images. The brand marks (cover lockup, header + footer logos) carry data-no-edit and are not promoted to .ad-img-editable, so they don't get the swap UI. */ .ad-edit-mode .ad-img-editable { cursor: pointer; transition: outline-color .15s ease, filter .15s ease, transform .15s ease; outline: 2px dashed transparent; outline-offset: 6px; } .ad-edit-mode .ad-img-editable:hover { outline-color: rgba(230,0,19,.55); filter: brightness(.94); } .ad-edit-mode .ad-img-editable[data-ad-img-uploading] { opacity: .55; filter: blur(1px) brightness(.92); outline-color: var(--ad-fab-bg); pointer-events: none; } .ad-edit-mode .ad-img-editable[data-ad-img-saved] { outline-color: #1e7a4a; } /* Toast for upload status (top center, slides in) */ .ad-img-toast { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -120%); background: var(--ad-ink); color: #fff; padding: 10px 16px; border-radius: var(--ad-radius-sm); font-family: var(--omusubi-font-body, "Poppins", sans-serif); font-size: 13px; font-weight: 500; letter-spacing: .01em; box-shadow: var(--ad-shadow); z-index: 2147483647; opacity: 0; transition: transform .22s ease, opacity .22s ease; pointer-events: none; max-width: min(92vw, 520px); } .ad-img-toast.is-on { transform: translate(-50%, 0); opacity: 1; } .ad-img-toast[data-kind="ok"] { background: #1e7a4a; } .ad-img-toast[data-kind="error"] { background: var(--ad-fab-bg); } @media (prefers-reduced-motion: reduce) { .ad-img-toast { transition: opacity .15s linear; } } /* ============================================================ Mobile ============================================================ */ @media (max-width: 640px) { :root { --ad-drawer-w: 100vw; } .ad-fab { bottom: 18px; right: 18px; } .ad-modal { padding: 22px 20px 20px; } } /* Print: hide everything */ @media print { .ad-fab, .ad-fab-tip, .ad-drawer, .ad-drawer-overlay, .ad-modal-overlay { display: none !important; } } /* prefers-reduced-motion: cut transitions */ @media (prefers-reduced-motion: reduce) { .ad-fab, .ad-drawer, .ad-drawer-overlay, .ad-modal-overlay, .ad-btn, .ad-party-pick { transition: none !important; } }