stay hidden for live visitors; preview mode reveals them so the team can compare existing sections to carousel variants without breaking the production view. Remove the .pv-only wrapper once the carousel pool is meant to replace the existing section. */ body.preview-mode .pv-only[hidden] { display: block; } /* ---------- Preview mode ---------- */ body.preview-mode { /* leave room for the bottom-docked thumb strip in preview mode */ padding-bottom: 220px; } body.preview-mode [data-section-pool] { position: relative; outline: 2px dashed transparent; transition: outline-color 0.25s; } body.preview-mode [data-section-pool]:hover { outline-color: oklch(65% 0.14 55 / 0.4); } body.preview-mode [data-section-pool].pv-locked { outline-color: oklch(65% 0.6 145 / 0.5); } /* ---------- Floating section label (top-right of each pool) ---------- */ .pv-section-tag { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 50; background: oklch(14.7% 0.009 70 / 0.9); color: var(--parchment); border: 1px solid oklch(93% 0.02 85 / 0.15); padding: 0.4rem 0.75rem; border-radius: 999px; font-family: var(--font-display, "Marcellus", serif); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 0.5rem; pointer-events: none; backdrop-filter: blur(6px); } .pv-section-tag .pv-tag-name { color: var(--copper, #d97757); } [data-section-pool].pv-locked .pv-section-tag .pv-tag-name { color: oklch(65% 0.18 145); } /* ---------- Bottom docked carousel bar ---------- */ .pv-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: oklch(8% 0.005 70 / 0.96); border-top: 1px solid oklch(93% 0.02 85 / 0.1); backdrop-filter: blur(12px); padding: 0.85rem 1.25rem; display: none; /* shown only when a section is "armed" */ flex-direction: column; gap: 0.6rem; } body.preview-mode .pv-bar.is-active { display: flex; } .pv-bar-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dust, #94a3b8); } .pv-bar-meta .pv-bar-section { color: var(--parchment, #e6edf3); font-weight: 500; } .pv-bar-meta .pv-bar-variant { color: var(--copper, #d97757); } .pv-bar.is-locked .pv-bar-meta .pv-bar-variant { color: oklch(65% 0.18 145); } /* ---------- Controls row (mirror ark-ui pattern) ---------- */ .pv-ctrls { display: flex; align-items: center; gap: 0.6rem; } .pv-btn { flex-shrink: 0; width: 40px; height: 40px; background: oklch(20% 0.01 70); border: 1px solid oklch(93% 0.02 85 / 0.12); border-radius: 10px; color: var(--parchment, #e6edf3); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .pv-btn:hover { background: oklch(28% 0.012 70); border-color: oklch(93% 0.02 85 / 0.25); } .pv-btn:active { transform: scale(0.95); } .pv-btn.pv-check { background: var(--copper, #d97757); color: oklch(14.7% 0.009 70); border-color: var(--copper, #d97757); } .pv-btn.pv-check:hover { filter: brightness(1.08); } .pv-bar.is-locked .pv-btn.pv-check { background: oklch(65% 0.18 145); border-color: oklch(65% 0.18 145); } .pv-btn svg { width: 18px; height: 18px; } /* ---------- Thumbnail strip ---------- */ .pv-thumbs { flex: 1; display: flex; gap: 0.5rem; overflow-x: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: oklch(40% 0.01 70) transparent; } .pv-thumbs::-webkit-scrollbar { height: 6px; } .pv-thumbs::-webkit-scrollbar-thumb { background: oklch(40% 0.01 70); border-radius: 3px; } .pv-thumbs::-webkit-scrollbar-track { background: transparent; } .pv-thumb { flex-shrink: 0; position: relative; width: 132px; height: 84px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: oklch(14.7% 0.009 70); transition: border-color 0.18s; } .pv-thumb:hover { border-color: oklch(93% 0.02 85 / 0.3); } .pv-thumb.is-current { border-color: var(--copper, #d97757); } .pv-thumb.is-locked { border-color: oklch(65% 0.18 145); } .pv-thumb.is-current.is-locked { border-color: oklch(65% 0.18 145); box-shadow: 0 0 0 2px oklch(65% 0.18 145 / 0.18); } .pv-thumb-num { position: absolute; top: 4px; left: 6px; z-index: 2; font-size: 10px; font-weight: 600; color: var(--parchment, #e6edf3); background: oklch(0% 0 0 / 0.55); padding: 1px 6px; border-radius: 4px; pointer-events: none; } /* The scaled-down preview rendered inside each thumb */ .pv-thumb-inner { width: 880px; height: 560px; transform: scale(0.15); transform-origin: top left; pointer-events: none; background: oklch(14.7% 0.009 70); } /* ---------- Top status banner (role + slug + submit) ---------- */ .pv-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: oklch(8% 0.005 70 / 0.96); border-bottom: 1px solid oklch(93% 0.02 85 / 0.1); backdrop-filter: blur(12px); padding: 0.6rem 1.25rem; display: none; align-items: center; gap: 1rem; font-size: 13px; color: var(--parchment, #e6edf3); } body.preview-mode .pv-banner { display: flex; } .pv-banner .pv-pill { padding: 2px 10px; border-radius: 999px; background: oklch(20% 0.01 70); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper, #d97757); } .pv-banner .pv-pill.pv-role-internal { color: oklch(70% 0.15 250); } .pv-banner .pv-pill.pv-role-client { color: oklch(70% 0.15 35); } .pv-banner .pv-spacer { flex: 1; } .pv-banner .pv-progress { font-size: 12px; color: var(--dust, #94a3b8); } .pv-banner .pv-submit { background: var(--copper, #d97757); color: oklch(14.7% 0.009 70); border: none; border-radius: 8px; padding: 0.45rem 1rem; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter 0.15s, opacity 0.15s; } .pv-banner .pv-submit:hover:not(:disabled) { filter: brightness(1.08); } .pv-banner .pv-submit:disabled { opacity: 0.4; cursor: not-allowed; } body.preview-mode { padding-top: 56px; } /* ---------- Toast for save confirmations / errors ---------- */ .pv-toast { position: fixed; bottom: 240px; left: 50%; transform: translateX(-50%); z-index: 300; background: oklch(20% 0.01 70); color: var(--parchment, #e6edf3); padding: 0.6rem 1.1rem; border-radius: 8px; border: 1px solid oklch(93% 0.02 85 / 0.15); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; } .pv-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(-6px); } .pv-toast.is-error { border-color: oklch(65% 0.2 25); color: oklch(80% 0.15 25); } @media (max-width: 600px) { .pv-thumb { width: 96px; height: 64px; } .pv-thumb-inner { transform: scale(0.11); } body.preview-mode { padding-bottom: 240px; } }