/* Studio chrome. Everything here is inert until gets .st-on, so the published site is unaffected by this file. */ .st-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; z-index: 60; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); overflow-y: auto; background: rgba(16, 15, 12, 0.94); backdrop-filter: var(--blur-veil); -webkit-backdrop-filter: var(--blur-veil); border-right: 1px solid var(--border-subtle); font-family: var(--font-text); color: var(--text-body); } .st-panel[hidden] { display: none; } body.st-on { padding-left: 320px; } @media (max-width: 900px) { .st-panel { width: 100%; border-right: 0; } body.st-on { padding-left: 0; } } .st-head { display: flex; justify-content: space-between; align-items: baseline; } .st-title { font-family: var(--font-display); font-size: var(--text-subhead); color: var(--text-primary); } .st-status { font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); } .st-hint { font-size: var(--text-caption); font-style: italic; color: var(--text-muted); margin: 0; line-height: 1.5; } .st-actions, .st-saves { display: flex; flex-direction: column; gap: var(--space-2); } .st-saves { padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); } .st-panel button { font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: var(--space-3) var(--space-4); background: none; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); cursor: pointer; text-align: left; transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); } .st-panel button:hover { color: var(--text-primary); border-color: var(--border-strong); } .st-panel button:active { opacity: var(--press-opacity); } .st-panel .st-sub { color: var(--text-muted); border-color: var(--border-hairline); } .st-panel .st-primary { color: var(--paper); background: var(--accent); border-color: var(--accent); } .st-panel .st-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink-900); } .st-panel .st-danger { color: var(--rose-500); border-color: transparent; } .st-panel .st-danger:hover { color: var(--rose-500); border-color: var(--rose-500); } .st-panel .st-mini { padding: 2px var(--space-3); font-size: 10px; } /* inspector */ .st-inspector { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); } .st-inspector-head { display: flex; justify-content: space-between; align-items: center; } .st-inspector-head span { font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); } .st-field { display: flex; flex-direction: column; gap: var(--space-2); } .st-field > span { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .st-field input, .st-field textarea, .st-field select { font-family: var(--font-text); font-size: var(--text-small); color: var(--text-primary); background: var(--surface-inset); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: var(--space-3); width: 100%; resize: vertical; line-height: 1.5; } .st-field textarea { min-height: 72px; } .st-field input:focus, .st-field textarea:focus, .st-field select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; } /* in-page affordances */ body.st-on .st-drop { outline: 1px dashed var(--border-subtle); outline-offset: 4px; } body.st-on .st-drop.st-over { outline: 1px solid var(--accent); outline-offset: 4px; } body.st-on .st-over .box { background: var(--accent-soft); } body.st-on .st-item { position: relative; } body.st-on .st-item.st-dragging { opacity: 0.4; } body.st-on .st-item.st-target { box-shadow: inset 0 2px 0 0 var(--accent); } .st-tools { position: absolute; top: 0; right: 0; z-index: 5; display: none; align-items: center; gap: var(--space-2); padding: 2px; background: rgba(16, 15, 12, 0.85); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); } body.st-on .st-item:hover .st-tools, body.st-on .st-item:focus-within .st-tools { display: flex; } .st-handle { cursor: grab; color: var(--text-muted); padding: 0 var(--space-2); user-select: none; } .st-tools .st-mini { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); background: none; border: 0; cursor: pointer; padding: 2px var(--space-2); } .st-tools .st-mini:hover { color: var(--accent-hover); } body.st-on [data-dropzone] { min-height: 120px; } /* ---------- body editor: toolbar, preview, in-place block editing ---------- */ .st-toolbar { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: var(--space-2); } .st-mark { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); background: var(--surface-raised, rgba(255,255,255,0.04)); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 4px 7px; cursor: pointer; line-height: 1; } .st-mark:hover { color: var(--accent-hover); border-color: var(--accent); } .st-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .st-bodyfield .st-body { font-size: 12px; line-height: 1.55; } .st-previewwrap { margin-top: var(--space-3); } .st-previewlabel { display: block; margin-bottom: var(--space-2); font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* The preview reuses the article's own styles so what you see is what the page renders. It is scaled down because the panel is narrow. */ .st-preview { max-height: 340px; overflow-y: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: var(--space-4); background: rgba(16, 15, 12, 0.6); } .st-preview .entry__prose { padding: var(--space-4); margin-bottom: var(--space-4); font-size: 12px; max-width: none; backdrop-filter: none; } .st-preview .entry__prose:first-of-type > p:first-of-type::first-letter { font-size: 2.4em; padding: 3px 6px 0 0; } .st-preview .entry__h2 { font-size: 17px; margin: var(--space-4) 0 var(--space-2); max-width: none; } .st-preview .entry__h3 { font-size: 14px; margin: var(--space-3) 0 var(--space-2); max-width: none; } .st-preview .entry__pull { font-size: 15px; margin: var(--space-4) 0; max-width: none; } .st-preview .entry__note { font-size: 11px; padding: var(--space-3); margin: 0 0 var(--space-3); max-width: none; } .st-preview .entry__photo { margin: var(--space-4) 0; } .st-preview .entry__photo figcaption { font-size: 10px; } /* In-place editing on the article page */ body.st-on .article .st-block { cursor: text; border-radius: 3px; } body.st-on .article .st-block:hover { box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 6px rgba(169, 123, 98, 0.10); } .st-blockedit { max-width: var(--measure-prose); margin: var(--space-5) auto; background: rgba(16, 15, 12, 0.96); border: 1px solid var(--accent); border-radius: var(--radius-xs); padding: var(--space-4); } .st-blockedit textarea { width: 100%; box-sizing: border-box; font-family: var(--font-text); font-size: 15px; line-height: 1.6; color: var(--text-primary); background: transparent; border: 0; resize: vertical; outline: none; } .st-blockbar { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); } .st-blockhint { flex: 1; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-muted); letter-spacing: 0.02em; } .st-blockbar .st-mini { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); background: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 4px 9px; cursor: pointer; } .st-blockbar .st-mini:hover { color: var(--accent-hover); border-color: var(--accent); } /* Photo block: named fields instead of raw markup */ .st-blockedit--photo { max-width: min(760px, 92vw); } .st-photorow { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-5); align-items: start; } .st-photothumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border-hairline); } .st-photofields { display: flex; flex-direction: column; gap: var(--space-4); } .st-photofield { display: flex; flex-direction: column; gap: 4px; } .st-photofield > span { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .st-photofield input { font-family: var(--font-text); font-size: 14px; color: var(--text-primary); background: rgba(255,255,255,0.04); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 7px 9px; outline: none; } .st-photofield input:focus { border-color: var(--accent); } .st-photofield em { font-size: 11px; font-style: italic; color: var(--text-muted); } .st-photofields .st-mini { align-self: flex-start; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); background: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 5px 10px; cursor: pointer; } .st-photofields .st-mini:hover { color: var(--accent-hover); border-color: var(--accent); } /* the in-place editor's own toolbar */ .st-blockedit .st-toolbar { margin-bottom: var(--space-3); } @media (max-width: 640px) { .st-photorow { grid-template-columns: 1fr; } .st-photothumb { max-width: 180px; } }