/* * cover-studio.css — the cover studio, override tier. * * Ship step 2 and the public cover tool render the same partial * (templates/tools/cover-studio.php); this file lays it out. It is the union * of what ship-author-cover.css, ship-cover-step.css, ship-write-align.css, * ship-wizard-forms.css and ship-narrow-fix.css said about the studio, with * `body.et-ship-mode … #etShipWizStep2` re-keyed to #etCoverStudio at the same * id count (these files won on specificity, and still must), and the * container queries measuring the wrapper instead of .et-ship-main. Section * comments are the originals; their measurements were taken on * write.php?tab=ship&step=2 and still hold there. * * Rule of thumb, from ship-author-cover.css §8: styling a box is ours, * deciding whether the box exists is the tool's — never override [hidden]. */ /* The frame around the grid is the container the studio's queries measure — a container query cannot see the element that declares the container, so the grid itself cannot be it. It stands where .et-ship-main stood. */ .et-cover-studio-frame { container-type: inline-size; container-name: et-cover-studio; } /* ═══════════════════════════════════════════════════════════════════════════ from write-studio/ship-narrow-fix.css ═══════════════════════════════════════════════════════════════════════════ */ /* 4. "Edit layout" rendered as "Edi layo", then as three stacked letters. Root cause, not a squeeze: writing-tools.css:2918 makes .et-bcc-expand-btn a 2.35rem icon-only square at this width, but the companion rule that hides its text (writing-tools.css:2494) is scoped body:not(.et-ship-mode). In Ship mode the label is therefore kept while the box it lives in is fixed at 37.6px. Ship keeps the label — so let this one button size to its text; the neighbouring quick buttons stay square icons. */ @media (max-width: 575.98px) { .et-bcc-preview-toolbar, .et-bcc-preview-quick { flex-wrap: wrap; row-gap: 0.5rem; } } @media (max-width: 575.98px) { .et-bcc-templates-section { height: 288px; max-height: 288px; overscroll-behavior: contain; scrollbar-width: thin; } } @media (max-width: 575.98px) { .et-bcc-templates-section::-webkit-scrollbar { width: 6px; } } /* 5. The genre-template picker is a 400px fixed-height scroll region. On an 844px-tall phone that is 47% of the viewport, and because the last row is always sliced mid-card it reads as a rendering fault rather than as "scroll for more". Shorten it and show a thin scrollbar so the cut edge is legible as an affordance. */ @media (max-width: 575.98px) { .et-bcc-templates-section::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, 0.22); } } /* ═══════════════════════════════════════════════════════════════════════════ from write-studio/ship-author-cover.css ═══════════════════════════════════════════════════════════════════════════ */ /* * Ship step 2 — "Author & cover", rebuilt. * * The problem this file solves is not styling, it is sequence. Step 2 embeds * the standalone book-cover tool inside the Ship wizard, and the tool's own * source order — written for a full-page tool with its own chrome — produced a * step that asked for things in an order nobody would choose: * * Author name → Start over → [empty cover preview] → Genre → * cover art description → quick-add chips → upload → "Artwork ready" → * book title → optional details → copyright → save status → * GENERATE ARTWORK → orphaned "Optional" badge → 900px of nothing * * So the preview sat above the fields that produce it; the Generate button sat * at the bottom, a full screen away from the description it acts on; a strip * announcing "Artwork ready" sat directly beneath a placeholder reading * "Describe the scene, then generate"; and there were two competing upload * paths. The fix is to state the flow explicitly. * * How it works * ------------ * Every wrapper between .et-ship-step2-body and the real content blocks is * collapsed with `display: contents`, which makes those blocks direct items of * one grid. Sequence is then a single ordered list (section 2) rather than an * accident of which template included which partial. Order values are spaced by * ten so a block can be inserted without renumbering. * * Type and colour follow the Write page, sampled from write.php?tab=write: * .et-form-label 12px/600/+0.12px/#d4d4d8 group label 12px/700 sentence * step heading 16px/700/-0.32px/#fafafa sub-head 14px/600 * input 13px (16px on phones: iOS zooms the viewport below that) * primary button 13px/700 teal #2dd4bf on #06110f, square * radius 0 everywhere * * Specificity: the values being replaced come from * `body.et-page-write.et-studio-drafting.et-ship-mode.et-gdocs-mode` chains * with !important across studio-flat.css, dashboard-typography.css and * write-studio-panels.bundle.css. Several are comma-lists whose matching branch * is more specific than its head reads, so the id is doubled — the same * escalation dashboard-typography.css uses when it repeats a class three times. */ /* ── 1. Flatten the wrapper chain ────────────────────────────────────────── */ /* Nine nested wrappers sit between the step body and the blocks that matter. Collapsing them makes every block an item of one grid, which is what lets section 2 order them and section 3 place them in columns. */ #etCoverStudio .et-ship-step2-block--studio, #etCoverStudio .et-ship-step2-block__body--studio, #etCoverStudio .et-ship-cover-studio, #etCoverStudio .et-bcc-ship-host, #etCoverStudio .et-bcc--ship, #etCoverStudio .et-bcc-workspace--ship, #etCoverStudio .et-bcc-workspace__controls, /* .et-bcc-card--text is deliberately NOT in this list. workshop-ship.css gates the whole typography group with `.et-bcc:not(.et-bcc--has-art) .et-bcc-card--text { display: none } `, so flattening it overrode the gate and offered the author type controls for a cover that does not exist yet. It is ordered as a group instead. */ #etCoverStudio .et-bcc-card--art, #etCoverStudio .et-bcc-art-compose, #etCoverStudio .et-ship-step2-block--author-meta, #etCoverStudio .et-ship-step2-block--author-meta > .et-ship-step2-block__body, #etCoverStudio .et-bcc-field-stack--ship-grouped { display: contents !important; } /* ── 2. The flow ─────────────────────────────────────────────────────────── */ /* Read this list top to bottom: it is the order the author meets the step in. 1. who the book is by 2. what the cover says (title, author) 3. what the artwork should show 4. make it (or bring your own) 5. how that type looks 6. the optional paperwork The one-line orders in section 10 are the ones that win. */ #etCoverStudio#etCoverStudio .et-ship-section-head--step2 { order: 0 !important; } #etCoverStudio#etCoverStudio .et-ship-step2-block--pen { order: 10 !important; } #etCoverStudio#etCoverStudio .et-bcc-art-side { order: 22 !important; } /* Genre */ #etCoverStudio#etCoverStudio .et-bcc-art-grid { order: 30 !important; } /* description + chips */ #etCoverStudio#etCoverStudio .et-bcc-sticky-cta { order: 34 !important; } /* Generate artwork */ /* Directly under Generate, which is where it was asked for and where it reads: it changes what that button produces. Without an order of its own it is not unordered, it is order 0 -- the same trap the preview column fell into below -- and it landed above the pen name, three screens from the button it modifies. Measured on a 390px phone: docY 258 against Generate at 1114. */ #etCoverStudio#etCoverStudio .et-bcc-ai-text { order: 35 !important; } /* AI type treatment */ #etCoverStudio#etCoverStudio .et-bcc-status { order: 36 !important; } #etCoverStudio#etCoverStudio .et-bcc-actions { order: 38 !important; } /* or upload your own */ #etCoverStudio#etCoverStudio .et-bcc-upload-hint { order: 39 !important; } #etCoverStudio#etCoverStudio .et-bcc-art-replace { order: 44 !important; } /* Start over — first control in the studio, not a footer afterthought */ #etCoverStudio#etCoverStudio .et-bcc-inspector__chrome { order: 16 !important; } /* Start over */ #etCoverStudio#etCoverStudio .et-bcc-step2-wait { order: 50 !important; } #etCoverStudio#etCoverStudio .et-bcc-field-group--ship-cover { order: 18 !important; } /* title + author on cover */ #etCoverStudio#etCoverStudio .et-bcc-card--text { order: 70 !important; } /* typography + layout, gated on artwork */ #etCoverStudio#etCoverStudio .et-bcc-optional-fields--ship { order: 80 !important; } #etCoverStudio#etCoverStudio .et-ship-collapsible--step2 { order: 82 !important; } #etCoverStudio#etCoverStudio .et-book-details-autosave { order: 90 !important; } #etCoverStudio#etCoverStudio #etShipStep2Validation { order: 95 !important; } /* The preview sits between "make it" and "what it says" on a phone, so the result appears exactly where the author just pressed Generate. On desktop section 3 lifts it out into its own sticky column. */ /* `display: block` matters as much as the order here: the column ships as `display: contents`, which makes it not a flex item at all, so its order was ignored and its child panel took position 0 — the empty preview landed above the fields that fill it. */ #etCoverStudio#etCoverStudio .et-bcc-preview-col { display: block !important; order: 42 !important; } /* ── 3. Shell ────────────────────────────────────────────────────────────── */ #etCoverStudio { display: flex; flex-direction: column; gap: 1.25rem; align-items: stretch; } /* Nothing may size to its content: a stacked flex parent gave the tablet view blocks at 744px and 479px side by side. */ #etCoverStudio > *, #etCoverStudio .et-bcc-art-side, #etCoverStudio .et-bcc-art-grid, #etCoverStudio .et-bcc-actions, #etCoverStudio .et-bcc-art-replace, #etCoverStudio .et-bcc-preview-col, #etCoverStudio .et-bcc-studio-tabs { width: auto; max-width: 100%; min-width: 0; } @media (min-width: 992px) { #etCoverStudio#etCoverStudio { display: grid; /* The preview needs enough width to read a cover and no more. It was two fixed 638px columns, which gave the preview as much room as every control combined and capped the step at 1304px. */ /* Width chosen so the aspect-locked cover (1600x2560) plus the toolbar fits inside the panel's max-height without the panel scrolling inside itself: at 1440 that is a 336px column -> 538px of cover -> 612px panel against a 620px cap. A wider column made the preview a nested scroll area. The floor and the percentage were raised for artifact mode, where the content area is narrower (1148px at 1280 rather than 1304px at 1440) and a 24% column came out at 240-276px — too tight for the preview toolbar, which then wrapped and spilled under the cover. The 21rem ceiling is what keeps 1440 from scrolling inside itself: stopping the toolbar being squeezed (section 9) gave it back its true 76px, so the ceiling came down from 21rem to 20rem to pay for it — 320px of column, 512px of cover, a 612px panel against the 620px cap. */ grid-template-columns: minmax(0, 1fr) clamp(17rem, 28%, 20rem); column-gap: 2.5rem; /* row-gap MUST stay 0. The preview spans many rows (below), which forces the grid to create that many implicit rows; empty implicit rows have no height but a row-gap still applies between every pair of them. With 1.25rem that added ~1980px of pure gap and the 1024px page measured 3441px tall against 1425px at 1440. Spacing is per-block margin instead. */ row-gap: 0; align-items: start; } } @media (min-width: 992px) { /* Column 1 is the work. Listed rather than matched with `>` because after section 1 these are flattened descendants, not DOM children. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-ship-step2-block--pen, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-side, #etCoverStudio#etCoverStudio .et-bcc-art-grid, #etCoverStudio#etCoverStudio .et-bcc-sticky-cta, #etCoverStudio#etCoverStudio .et-bcc-status, #etCoverStudio#etCoverStudio .et-bcc-actions, #etCoverStudio#etCoverStudio .et-bcc-upload-hint, #etCoverStudio#etCoverStudio .et-bcc-art-replace, #etCoverStudio#etCoverStudio .et-bcc-inspector__chrome, #etCoverStudio#etCoverStudio .et-bcc-step2-wait, #etCoverStudio#etCoverStudio .et-bcc-field-group--ship-cover, #etCoverStudio#etCoverStudio .et-bcc-studio-tabs, #etCoverStudio#etCoverStudio .et-bcc-card--text, #etCoverStudio#etCoverStudio .et-bcc-optional-fields--ship, #etCoverStudio#etCoverStudio .et-ship-collapsible--step2, #etCoverStudio#etCoverStudio .et-book-details-autosave, #etCoverStudio#etCoverStudio #etShipStep2Validation { grid-column: 1 !important; margin-bottom: 1.25rem !important; } } @media (min-width: 992px) { #etCoverStudio#etCoverStudio .et-ship-section-head--step2 { grid-column: 1 / -1 !important; } } @media (min-width: 992px) { /* Column 2 is the preview, following the author down the page. `span 99` rather than `-1`: these row lines are implicit, and -1 resolves against the explicit grid only. */ #etCoverStudio#etCoverStudio .et-bcc-preview-col { grid-column: 2 !important; /* `span 99`, and !important: at >=1200 another rule sets `grid-row: 2 / -1`, and -1 resolves against the EXPLICIT grid — there are no explicit rows here, so the span collapsed to a single 279px row and sticky had no travel. It worked at 1280 and failed at 1440 for exactly that reason. */ grid-row: 2 / span 99 !important; /* `align-items: start` on the grid means items size to their content, so this column was 279px tall around a 742px panel — and a sticky child can only travel inside its containing block, so the preview scrolled away instead of following the author down the page. Stretch it over the rows it spans and sticky has somewhere to go. */ align-self: stretch; } } @media (min-width: 992px) { #etCoverStudio#etCoverStudio .et-bcc-preview-panel { position: sticky; top: 1rem; /* Sized to the room it actually has, not to the whole viewport: the panel's natural top is ~202px (under the step heading) and the docked wizard nav occupies the bottom 62px, so the space is viewport - 202 - 62 - a little air. Unsized it measured 742px in a 900px window and ran to y=944, which is why the bottom of the cover sat behind the Continue bar. */ max-height: calc(100vh - 17.5rem); overflow-y: auto; scrollbar-width: thin; } } /* ── 4. Type ─────────────────────────────────────────────────────────────── */ /* Field, label and section-title styling has moved to ship-wizard-forms.css, which applies one contract to every Ship step and matches the Story Wizard. This step had been aligned to the Write page instead (12px labels, 13px fields, a 16px heading), which is what made it the odd one out among the Ship steps. What stays here is the step-2-only text: ledes, hints, counts, group labels and the sentence-case fix. */ /* The tool shouted its group labels in caps — "THRILLER BESTSELLERS", "FONTS & COLORS", "OVERLAY DESIGN", "LIVE COLORS", "ALL CHANGES SAVED". The Write page sets the same rank in sentence case ("Quick bundles"). */ #etCoverStudio#etCoverStudio [class*="-label"], #etCoverStudio#etCoverStudio [class*="__label"], #etCoverStudio#etCoverStudio [class*="__summary"], #etCoverStudio#etCoverStudio .et-bcc-templates-head, #etCoverStudio#etCoverStudio .et-book-details-autosave { text-transform: none !important; letter-spacing: 0.01em !important; } #etCoverStudio#etCoverStudio .et-bcc-template-group-label, #etCoverStudio#etCoverStudio .et-bcc-prompt-chips-label, #etCoverStudio#etCoverStudio .et-bcc-field-group__label { font-size: 0.75rem !important; font-weight: 700 !important; color: #9ca3af !important; } #etCoverStudio#etCoverStudio h4, #etCoverStudio#etCoverStudio h5, #etCoverStudio#etCoverStudio .et-bcc-preview-heading { font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-panel-lede, #etCoverStudio#etCoverStudio .et-bcc-genre-hint, #etCoverStudio#etCoverStudio .et-ship-field-hint, #etCoverStudio#etCoverStudio .et-bcc-char-count, #etCoverStudio#etCoverStudio .et-bcc-upload-hint, #etCoverStudio#etCoverStudio .et-bcc-advanced__note, #etCoverStudio#etCoverStudio .et-book-details-autosave { font-size: 0.75rem !important; font-weight: 400 !important; color: var(--et-text-muted, #a3a3b0) !important; } /* Inputs run 13px like the Write page, but stay 16px on phones: iOS Safari zooms the viewport on focus for anything smaller. */ /* Selects clipped their value mid-word ("Template defaul") — the chevron sat on top of the text rather than beside it. */ #etCoverStudio#etCoverStudio select.et-form-control { padding-right: 2rem !important; text-overflow: ellipsis; } /* ── 5. Components ───────────────────────────────────────────────────────── */ #etCoverStudio { --sac-line: var(--et-ui-line, rgba(255, 255, 255, 0.12)); --sac-fill: rgba(255, 255, 255, 0.03); /* Sections read as grouped by their surface, not by an outline — outlines on every group turned the step into a stack of boxes. This is the same fill the AI credits card uses in the tools sidebar (.et-tools-sidebar__credit), so the step's panels match the rest of the studio's furniture. Translucent rather than a flat hex, so it sits correctly on whatever is behind it. */ --sac-panel: rgba(250, 250, 250, 0.06); } /* "Your cover" read as broken because the heading bar was a full-width dark strip while the image below it was inset and narrower — two boxes that did not agree on an edge. Make the panel one card: header rule, image flush. */ #etCoverStudio#etCoverStudio .et-bcc-preview-panel { border: 0 !important; background: var(--sac-panel) !important; border-radius: 0 !important; /* The inset lives here, not on the children. The cover frame has an aspect-driven width, so a margin on it did not shrink it — it just pushed it past the panel's right edge (1384 against a panel ending at 1372). */ padding: 0.75rem !important; gap: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-preview-toolbar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; width: auto !important; margin: 0 !important; padding: 0 0 0.625rem !important; border-bottom: 0 !important; background: transparent; } #etCoverStudio#etCoverStudio .et-bcc-preview-wrap { margin: 0 !important; padding: 0.75rem !important; } /* The expand control was cropped to "Edi layo": writing-tools.css makes it a 2.35rem icon-only square below 768px, but the rule that hides its text is scoped `body:not(.et-ship-mode)`, so Ship kept the label in a 37.6px box. This was written as 575.98px against a square that starts at 767.98px, so 576-767px kept the fault: measured at 600px the button's box ended at x=576 and its "Edit layout" label ran to x=614 — 14px past the viewport, with the page's horizontal scrollbar to match. */ @media (max-width: 767.98px) { #etCoverStudio#etCoverStudio .et-bcc-preview-toolbar { align-items: flex-start; } #etCoverStudio#etCoverStudio .et-bcc-preview-quick { flex-wrap: wrap; justify-content: flex-start; } /* The square at writing-tools.css clips "Edit layout" and "3D" down to a bare icon, and on the public page the label is display:none below 576. Both are real actions — keep the words, and let the row wrap. */ #etCoverStudio#etCoverStudio .et-bcc-expand-btn { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 2.35rem !important; padding: 0.35rem 0.65rem !important; white-space: nowrap; } #etCoverStudio#etCoverStudio .et-bcc-expand-btn__label { display: inline !important; } } /* Grouped strips, the way the Write page groups "Quick bundles". !important because studio-flat.css and the panels bundle zero these borders. */ #etCoverStudio#etCoverStudio .et-ship-step2-block--pen, #etCoverStudio#etCoverStudio .et-bcc-art-side, #etCoverStudio#etCoverStudio .et-bcc-art-grid, #etCoverStudio#etCoverStudio .et-bcc-art-replace, #etCoverStudio#etCoverStudio .et-bcc-field-group--ship-cover { display: flex !important; flex-direction: column; gap: 0.75rem; margin: 0 !important; padding: 0.875rem !important; border: 0 !important; background: var(--sac-panel) !important; } #etCoverStudio#etCoverStudio .et-bcc-art-replace { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; } /* Templates: was a fixed-height box that sliced its last row mid-card and whose cards clipped their own titles ("Military Thri"). */ #etCoverStudio#etCoverStudio .et-bcc-templates-section { height: auto !important; max-height: min(52vh, 26rem) !important; scrollbar-width: thin; padding: 0.75rem !important; border: 0 !important; background: var(--sac-panel) !important; } #etCoverStudio#etCoverStudio .et-bcc-template-card { height: auto !important; min-height: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-template-card * { overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; } /* Each template card hides its radio with `position: absolute`. An absolutely positioned descendant is only clipped by an ancestor's overflow if that ancestor is its containing block, and these scrollers had no `position` — so the radios of the ~40 cards scrolled out of view escaped the clip and stretched the phone document by roughly 1500px of blank space. */ #etCoverStudio#etCoverStudio .et-bcc-templates-section, #etCoverStudio#etCoverStudio .et-bcc-overlay-design, #etCoverStudio#etCoverStudio .et-bcc-studio-tabs { position: relative; } /* Generate artwork is the step's primary action and now sits directly under the description it acts on. */ #etCoverStudio#etCoverStudio .et-bcc-sticky-cta { margin: 0 !important; padding: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-sticky-cta__btn { width: 100%; font-size: 0.8125rem !important; font-weight: 700 !important; padding: 0.75rem 1.5rem !important; } /* Start over sits at the top of the studio on both surfaces. Destructive, but it has to be findable — the previous quiet footer was missed. */ #etCoverStudio#etCoverStudio .et-bcc-inspector__chrome { min-height: 2.5rem !important; margin: 0 0 0.75rem !important; padding: 0.35rem 0 !important; justify-content: space-between; align-items: center; gap: 0.75rem; } #etCoverStudio#etCoverStudio .et-bcc-inspector__chrome .btn { font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--et-acc-teal, #2dd4bf) !important; padding: 0.4rem 0.85rem !important; } /* ── 6. Floating chrome ──────────────────────────────────────────────────── */ /* Four fixed widgets shared the bottom-right corner on a phone: the wizard nav, the support launcher, the tools FAB and a "jump to preview" thumb. The preview is sticky beside the controls above 992 and in the flow below it, and the FAB duplicates "Book tools" in the bottom tab bar. */ #etCoverStudio .et-bcc-float-preview { display: none !important; } /* The preview still read as a box inside a box: .et-bcc-preview-wrap is the aspect-locked cover frame (264x422 for 1600x2560 inside a 366px panel) and carried its own darker fill plus its own padding, so the panel's surface showed as a mismatched border around it. Let the panel be the surface and the cover sit directly on it. */ #etCoverStudio#etCoverStudio .et-bcc-preview-wrap { margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* The toolbar is inset 12px but the cover ran flush to the panel edges (x=1059..1372 against a panel of exactly 1059..1372) while carrying 14px above and below — so the header looked indented and the artwork looked like it had burst its box. Same inset on all four sides. */ #etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-wrap { margin: 0 auto !important; /* * This said `max-width: 100%`, which was about the inset above — but it also * beat the cover-shaped cap the bundle sets (`min(100%, 24rem)`), and the * frame stopped being cover-shaped at all. The wrap is `width: 100%` with * `max-height` from the height budget, so with no width cap it grew with the * column while the cover inside stayed letterboxed to the budget: measured * across this breakpoint the frame went 312x448 at 360px wide, 552x448 at * 600, and 912x448 at 960 — a 2:1 landscape box holding a 280px portrait * cover, with the rest black. Cap it at the width that height allows. */ max-width: min(100%, calc(var(--et-bcc-preview-budget, 28rem) * 1600 / 2560)) !important; } #etCoverStudio#etCoverStudio .et-bcc-placeholder { background: rgba(255, 255, 255, 0.02) !important; border: 1px dashed var(--sac-line) !important; } /* ── 8. Do not out-shout the tool's own state ────────────────────────────── */ /* * Regression from this file, found while checking why "Artwork ready" showed * above a preview reading "Describe the scene, then generate". * * updateButtons() sets `placeholder.hidden = hasArt` and * `artReplace.hidden = !hasArt` in the same pass, so those two can never * genuinely disagree. What disagreed was CSS: section 5 gives * .et-bcc-art-replace `display: flex !important` to draw it as a grouped * strip, and that beats the `hidden` attribute. The strip was therefore * painted in a state the tool had explicitly switched off. * * The same trap applies to the flattening in section 1: writing-tools.css:3904 * collapses .et-bcc-art-compose with * `.et-bcc--has-art:not(.et-bcc--art-open) .et-bcc-art-compose { display: none }` * — that is what the "Change artwork" button toggles — and * `display: contents !important` overrode it, so the whole description form * stayed open with no way to close it. * * Rule of thumb for anything added to this file: styling a box is ours, * deciding whether the box exists is the tool's. */ #etCoverStudio#etCoverStudio [hidden] { display: none !important; } #etCoverStudio#etCoverStudio .et-bcc--has-art:not(.et-bcc--art-open) .et-bcc-art-compose { display: none !important; } /* The "this is a finished cover" notice is absolutely positioned over the lower third of the artwork with a transparent background, so its text and its two buttons were painted straight onto the picture — the bunching in the preview column. Keep it where the tool puts it, but give it something to sit on. */ #etCoverStudio#etCoverStudio .et-bcc-baked-notice { padding: 2rem 0.875rem 0.875rem !important; background: linear-gradient( to bottom, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.86) 22%, rgba(10, 10, 12, 0.96) 100% ) !important; } #etCoverStudio#etCoverStudio .et-bcc-baked-notice__actions { display: flex; flex-direction: column; gap: 0.5rem; } /* Short desktop windows. The cap above assumes there is room for a 1600x2560 cover between the step heading and the docked nav; in a 720px-tall window there is not, and the panel turned into a nested scroll area that hid its own "Upload artwork" button. Below 820px of viewport, let the preview be its natural height and scroll with the page — sticky simply has nothing to do until its bottom is reached, and nothing is hidden. The threshold is 820 and not 780 because 1024x800 fell in the gap: capped at 520px against 541px of content, which hid the same button again. */ @media (min-width: 992px) and (max-height: 819.98px) { #etCoverStudio#etCoverStudio .et-bcc-preview-panel { max-height: none !important; overflow: visible !important; } } /* ── 9. Preview column at laptop / large-tablet widths ───────────────────── */ /* * The preview panel is a flex column, and a flex item shrinks below its content * by default. The toolbar measured 49px tall against a 65px scrollHeight, so * its second row — the snap/grid/ruler icons and "Edit layout" — was pushed out * of the toolbar's box and painted underneath the cover, which is what sliced * those controls in half at 1280. */ #etCoverStudio#etCoverStudio .et-bcc-preview-toolbar { flex: 0 0 auto !important; } /* ...and .et-bcc-preview-quick kept its intrinsic 231px against a 216px toolbar, so it also overflowed sideways. */ #etCoverStudio#etCoverStudio .et-bcc-preview-quick { flex-wrap: wrap; min-width: 0; max-width: 100%; } /* The "this is a finished cover" notice is anchored by a percentage top, so in a narrow column it grew to cover 67% of the artwork at 1280 and 88% at 1024 — the cover was almost entirely behind its own caption. Pin it to the bottom and cap it, so at least 45% of the artwork is always visible. */ #etCoverStudio#etCoverStudio .et-bcc-baked-notice { top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; max-height: 64% !important; padding: 1.25rem 0.75rem 0.75rem !important; } /* Capping the notice is only safe if its content actually fits the cap — the first attempt gave it `overflow-y: auto` instead, and in a 272px column that scrolled its own "Upload artwork" button out of sight. Compact type and buttons, sized so the whole notice fits inside the 60% without scrolling. */ #etCoverStudio#etCoverStudio .et-bcc-baked-notice > * { margin-bottom: 0.4rem !important; } #etCoverStudio#etCoverStudio .et-bcc-baked-notice p, #etCoverStudio#etCoverStudio .et-bcc-baked-notice__note { font-size: 0.75rem !important; line-height: 1.35 !important; } #etCoverStudio#etCoverStudio .et-bcc-baked-notice strong, #etCoverStudio#etCoverStudio .et-bcc-baked-notice__title { font-size: 0.8125rem !important; } #etCoverStudio#etCoverStudio .et-bcc-baked-notice__actions { gap: 0.375rem !important; margin-bottom: 0 !important; } /* These compute `display: block`, so the icon and the label sat on the text baseline inside a taller box — the label read as sitting high in the button and the icon out of line with it. A button is a centred box, not a line of text. */ #etCoverStudio#etCoverStudio .et-bcc-baked-notice__actions .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.75rem !important; line-height: 1.2 !important; padding: 0.5rem 0.75rem !important; min-height: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-baked-notice__actions .btn i { line-height: 1 !important; } /* The column wrapper carries a solid black fill and spans the whole grid — 1814px of it at 1280 — while the panel inside is about 520px. That painted a black band down the right of the page under the preview. The panel supplies its own surface; the column behind it should not. */ #etCoverStudio#etCoverStudio .et-bcc-preview-col { background: transparent !important; } /* ── 10. Retire the 1400px-era fixed rows ──────────────────────────────────── workshop-ship.css (min-width: 1400px) still pins the pen block to grid-row 2 and the CTA to row 5 from the layout this file replaced. Sections 2–3 place everything by order in one auto-flowing column, so those pins made the typography card (order 70, auto-placed) share row 2 with the author field — the tab strip and live-colour swatches rendered on top of the input at ≥1400px while 1280px looked fine. Auto rows give order back its authority. */ @media (min-width: 1400px) { #etCoverStudio#etCoverStudio .et-ship-section-head--step2, #etCoverStudio#etCoverStudio .et-ship-step2-block--pen, #etCoverStudio#etCoverStudio .et-ship-step2-block--author, #etCoverStudio#etCoverStudio .et-ship-step2-block--author-meta, #etCoverStudio#etCoverStudio .et-bcc-sticky-cta { grid-row: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ from write-studio/ship-cover-step.css ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Templates box ─────────────────────────────────────────────────────── */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates-section { background: var(--et-studio-card, #000) !important; /* This one keeps its hairline box: --et-border is transparent here, so without it the templates panel has no edge at all. It is a closed box with a top and a bottom, which reads as a card. What it must not do is repeat — see the accordions below. */ border: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.1)) !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates-head { margin: 0 !important; padding: 0.7rem 0.75rem 0.15rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-group-label--genre { margin: 0 !important; padding: 0.35rem 0.75rem 0.55rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates-scroller { max-height: min(52vh, 26rem); overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin; padding: 0.75rem 0.75rem 0.75rem; border-top: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.1)); } /* * Shorter on a phone — the rule at the top of this file meant to do this and * could not. * * That one caps `.et-bcc-templates-section` at 288px with class-only * specificity. The element that actually scrolls is the `.et-bcc-templates- * scroller` inside it, capped here at four ids, so the phone intent has been * dead: measured 416px at 390px wide, which on a 780px-tall handset is 53% of * the screen given over to a picker, with a card always sliced through the * middle of its description. * * Same numbers the original intended — 18rem is the old 288px — expressed on * the element that owns the scroll and at a specificity that survives. */ @media (max-width: 575.98px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates-scroller { max-height: min(38vh, 18rem); } } /* Nothing in the scroller is pinned — the label above it is what stays put. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-templates .et-bcc-template-group-label { position: static !important; background: transparent !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates-scroller > .et-bcc-template-group-label { margin: 1rem 0 0.5rem !important; padding: 0 !important; } /* Two card columns need about 30rem; in a 413px card (Kestrel and the progress column open at 1600) each card was ~195px and its blurb wrapped to five lines. Let the panel measure itself and go to one column when narrow. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-onepanel { container-type: inline-size; container-name: et-bcc-onepanel; } @container et-bcc-onepanel (max-width: 30rem) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates--genre, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-templates--universal { grid-template-columns: minmax(0, 1fr) !important; } } @container et-bcc-onepanel (max-width: 30rem) { /* Three selects across 413px truncated to "Cormorant…" and "Flat (no sh…". */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* The "this font lacks letters for your name" note read as a 90px-wide column beside the other selects; it is a sentence, so it takes the whole row. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-advanced-grid > .et-bcc-field:has(> .et-bcc-font-coverage:not([hidden])) { grid-column: 1 / -1; } /* ── 2. Accordions ────────────────────────────────────────────────────────── */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc { display: block; margin: 0.75rem 0 0 !important; padding: 0 !important; /* A rule above, never sides. Stacked square boxes all one width drew their left and right edges at the same two x positions down the whole step: measured on Ship step 2, three segments 510px, 343px and 625px tall with gaps between them at x=452 and x=1052, in rgba(255,255,255,.1) against the column seams' .12, and 38px from Kestrel's real seam at 413.5. Broken vertical lines beside the real ones read as column edges gone wrong. A full-height grey line means an edge you can drag; nothing else may imitate one, so these separate horizontally and leave the sides to the seams. */ border: 0 !important; border-top: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.1)) !important; border-radius: 0 !important; background: transparent !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc[open] { padding-bottom: 0.75rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc > summary { list-style: none; display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 !important; padding: 0.6rem 0.75rem !important; font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif); font-size: 0.8125rem !important; font-weight: 700 !important; line-height: 1.3; letter-spacing: 0 !important; text-transform: none !important; color: #fafafa !important; cursor: pointer; user-select: none; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc > summary::-webkit-details-marker { display: none; } /* A chevron drawn from two borders — no glyph, no font. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc > summary::after { content: '' !important; float: none !important; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; margin: 0 0.15rem 0.2rem 0; border: 0; border-right: 1.5px solid #9ca3af; border-bottom: 1.5px solid #9ca3af; transform: rotate(45deg); transition: transform 0.15s ease, border-color 0.15s ease; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc[open] > summary::after { transform: rotate(-135deg); margin-bottom: -0.2rem; border-color: var(--et-acc-teal, #2dd4bf); } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc[open] > summary { border-bottom: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.1)); margin-bottom: 0.5rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc > :not(summary) { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc__note { margin-top: 0 !important; margin-bottom: 0.6rem !important; font-size: 0.75rem !important; line-height: 1.45 !important; color: #9ca3af !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-onepanel > .et-bcc-panel-lede { margin: 0.35rem 0 0.6rem !important; } /* The public tool's "+ / −" summary marker and its top rule do not apply here. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-advanced.et-bcc-acc { border-top-width: 1px !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc .et-bcc-color-actions { margin-bottom: 0.6rem; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc .et-bcc-element-controls { margin-top: 0 !important; } /* ── 3. Crisper type in the card ──────────────────────────────────────────── */ /* Labels were 11–12px grey caps with tracking; body text sat at 70% grey. The card now uses the site's sizes, no tracking, and lighter greys on black. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-form-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-layout-tool, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-el-control__head .et-bcc-element-toggle { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #e5e7eb !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-template-group-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-templates-label { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #e5e7eb !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-genre-hint, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-panel-lede, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-advanced__note { font-size: 0.8125rem !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: #b8b8c4 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-template-card__inner strong { font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.3 !important; color: #fff !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-template-card__inner small { font-size: 0.75rem !important; line-height: 1.4 !important; color: #b8b8c4 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-slider-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-element-toggle--stroke { font-size: 0.75rem !important; letter-spacing: 0 !important; color: #d4d4d8 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-slider-label output { color: #fff; font-variant-numeric: tabular-nums; } @container et-cover-studio (min-width: 681px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col { grid-column: 2 !important; grid-row: 2 / span 99 !important; align-self: stretch !important; position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; } } @container et-cover-studio (min-width: 681px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel { position: sticky !important; top: 0.5rem !important; max-height: none !important; height: auto !important; overflow: visible !important; } } /* Beside the controls: a sticky column, like Kestrel and the progress column, sized so the cover, the add-text row and the download all sit on screen. Cover height = width / 0.625. The 26rem is the sticky offset plus what stands under the picture: toolbar, add-text, download, and the collapsed "resize cover text" row. The open slider list scrolls with the page; it must not be in this budget or the download falls below the fold. */ @container et-cover-studio (min-width: 681px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-wrap { width: min(100%, calc((100dvh - 26rem) * 0.625)) !important; max-width: 100% !important; } } /* The panel used to clip its overflow; now that it does not, the one-line "Click anything on the cover…" hint (670px of nowrap text in a 319px panel) has to wrap like everything else. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > * { max-width: 100%; min-width: 0; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-hint, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-hint > * { white-space: normal !important; flex-wrap: wrap; min-width: 0; } /* …except the dismiss ×, which is not text and has nothing to wrap. The rule above is what let the long tip line wrap; applied to the button it squeezed it to 9px wide, the one tap target on this step under the 24px floor. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-hint > .et-bcc-preview-hint__dismiss { min-width: 2rem; flex: 0 0 auto; } @container et-cover-studio (max-width: 680px) { /* The typography card is pinned to grid row 2 by an older sheet, and auto- placed items flow after it whatever their order — so the strip takes row 2 itself and the card moves down one. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text { grid-row: 3 !important; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col { order: 69 !important; grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; position: sticky !important; top: 0.5rem !important; z-index: 6 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 0 1rem !important; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel { position: static !important; display: grid !important; /* * The cover track was `auto`, so the strip's own width decided it and a * percentage cap on the item resolved against itself. Size the track * instead — a percentage here resolves against the panel, which is what * "half the row" was always meant to mean. */ grid-template-columns: minmax(9.5rem, 40%) minmax(0, 1fr) !important; grid-auto-flow: row !important; column-gap: 0.875rem !important; row-gap: 0.35rem !important; align-items: start !important; max-height: none !important; height: auto !important; overflow: visible !important; padding: 0.625rem !important; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > * { grid-column: 2 !important; min-width: 0; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-wrap { grid-column: 1 !important; grid-row: 1 / span 8 !important; /* * The strip was a flat 9.5rem. That is 152px of cover on a 1440px * screen — 11% of the window, and smaller than the same page gives at * 1100px (248px) or at 1600px (295px), so the preview shrank as the * screen grew. The panel beside it is 508-674px wide here, so there is * room; take what the height budget allows, up to half the panel. */ width: 100% !important; max-width: none !important; margin: 0 !important; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-toolbar { margin: 0 !important; } } @container et-cover-studio (max-width: 680px) { /* The strip stays on screen the whole way down, so it keeps only what you act on: the cover, its toolbar, add text / separator and the save state. The "click anything on the cover…" tip is still shown beside the full column. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-hint { display: none !important; } } /* Stacked (columns open, step under 680px): the preview goes above the typography card as a sticky strip — small cover left, its toolbar and the add-text row right — so the controls scroll under a cover you can see. */ @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-saved, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-autosave { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 6. One type scale with Write, and real sliders (7 Sep 2026) ═══════════════════════════════════════════════════════════════════════════ Measured on write.php?tab=ship&step=2 against the Write page's own scale (label 12px/600 #d4d4d8, hint 12px/400 #9ca3af, panel heading 18px/700): - the pen-name label rendered 15px/500 pure white, the step heading 18px/600, "Optional cover details" 15px/700, and its intro 13px at weight 600 — a hint set in a label's weight; - inside the card the labels were 13px/600 #e5e7eb and the notes 13px #b8b8c4, a second scale a few pixels off the first; - every Size / Letter spacing / Outline width control was a bare `input[type=range]`: the browser's own widget, 16px tall with a fat thumb, tinted by accent-color and matching nothing around it. Everything below pins the step to Write's numbers and draws the sliders. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 6a. Field labels ─────────────────────────────────────────────────────── */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-form-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-form-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-template-group-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-templates-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-layout-tool, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-el-control__head .et-bcc-element-toggle, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-slider-label, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-element-toggle--stroke { font-size: 0.75rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0.12px !important; text-transform: none !important; color: #d4d4d8 !important; } /* ── 6b. Hints and notes — one voice, one weight ──────────────────────────── */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-panel-lede, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-genre-hint, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc__note, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-advanced__note, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__hint, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-ship-field-hint, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-ship-collapsible__intro { font-size: 0.75rem !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: #9ca3af !important; } /* ── 6c. Headings ─────────────────────────────────────────────────────────── */ /* 600, not 700: steps 1, 3 and 4 render this same class at 600, and a later rule in this file (#etCoverStudio x2, using Ship's own --swf-header) already asked for 600 — it was simply outranked by the four ids here. The 700 was drift, not the cover studio's identity. Found by a peer audit 25 Sep 2026. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-ship-section-head__title { font-size: 1.125rem !important; font-weight: 600 !important; letter-spacing: -0.36px !important; color: #fafafa !important; } /* The accordions' own headers are set by `.et-bcc-acc > summary` in §2, which carries one class more than a `.et-bcc-acc__summary` selector and so wins whatever is written here. These two sit outside that rule. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-ship-collapsible__summary, /* 14px/600. At 0.8125rem this heading was 13px against 15px body text — a heading smaller than the paragraphs under it, and bold to compensate. The x2 rule earlier in this file already said 0.875rem/600 and was outranked. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-heading { font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #fafafa !important; } /* The toggle rows are a label wrapping a checkbox, a bold line and a hint; the wrapper's own 15px was inherited by anything unstyled inside it. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__toggle, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card { font-size: 0.75rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__label { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #fafafa !important; } /* ── 6d. Sliders ──────────────────────────────────────────────────────────── */ /* A 3px track, a small hard thumb, and the filled portion drawn from --et-range-fill (set in writing-tools-book-cover-creator.js, because WebKit gives a styled range no progress of its own). */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"] { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 0.875rem !important; margin: 0.15rem 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; cursor: pointer; accent-color: auto; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; border: 0; background: linear-gradient(to right, #2dd4bf 0, #2dd4bf var(--et-range-fill, 50%), rgba(255, 255, 255, 0.14) var(--et-range-fill, 50%), rgba(255, 255, 255, 0.14) 100%); } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; /* (track 3px - thumb 12px) / 2 */ margin-top: -4.5px; border: 0; border-radius: 50%; background: #fafafa; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]:active::-webkit-slider-thumb { background: #2dd4bf; transform: scale(1.15); } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]:focus { outline: none; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(45, 212, 191, 0.35); } /* Firefox draws its own progress, so no gradient is needed there. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]::-moz-range-track { height: 3px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]::-moz-range-progress { height: 3px; border-radius: 999px; background: #2dd4bf; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fafafa; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text input[type="range"]:disabled { opacity: 0.45; cursor: default; } /* The value sits hard right of its label and must not jump as digits change. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-slider-label output { color: #fafafa !important; font-weight: 600; font-variant-numeric: tabular-nums; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text .et-bcc-slider-field { gap: 0.1rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ from write-studio/ship-wizard-forms.css ═══════════════════════════════════════════════════════════════════════════ */ #etCoverStudio#etCoverStudio { --swf-field-bg: #09090b; --swf-accent: var(--et-dash-accent-teal, #2dd4bf); --swf-header: #ffffff; --swf-subtext: var(--et-text-muted, #a3a3b0); } #etCoverStudio#etCoverStudio .et-form-control, #etCoverStudio#etCoverStudio .form-control, #etCoverStudio#etCoverStudio .form-select { font-size: 1rem !important; font-weight: 400 !important; color: var(--et-text-primary, #fafafa) !important; background-color: var(--swf-field-bg) !important; border-radius: 0 !important; padding: 0.55rem 0.75rem !important; } @media (min-width: 576px) { #etCoverStudio#etCoverStudio .et-form-control, #etCoverStudio#etCoverStudio .form-control, #etCoverStudio#etCoverStudio .form-select { font-size: 0.875rem !important; } } #etCoverStudio#etCoverStudio input.et-form-control, #etCoverStudio#etCoverStudio textarea, #etCoverStudio#etCoverStudio input.form-control { border: 1px solid var(--swf-accent) !important; } #etCoverStudio#etCoverStudio select { border: 0 !important; border-bottom: 1px solid var(--swf-accent) !important; } #etCoverStudio#etCoverStudio .et-form-control:focus, #etCoverStudio#etCoverStudio select:focus { /* One 1px teal border is the focus state for every field (16 Sep 2026): the ring that was here sat outside the field's own edge and read as a second border. */ border: 1px solid var(--et-acc-teal, #2dd4bf) !important; outline: none !important; box-shadow: none !important; } #etCoverStudio#etCoverStudio .et-form-label { font-size: 0.9375rem !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--swf-header) !important; } #etCoverStudio#etCoverStudio .et-ship-section-head__title { font-size: 1.125rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--swf-header) !important; } #etCoverStudio#etCoverStudio h2, #etCoverStudio#etCoverStudio h3, #etCoverStudio#etCoverStudio h4 { color: var(--swf-header) !important; } #etCoverStudio#etCoverStudio .et-form-label .text-muted-et, #etCoverStudio#etCoverStudio .et-form-label small, #etCoverStudio#etCoverStudio .et-ship-field-hint, #etCoverStudio#etCoverStudio .et-bcc-panel-lede { font-weight: 400 !important; color: var(--swf-subtext) !important; } #etCoverStudio#etCoverStudio .form-link { color: #4fc7ff !important; } /* ═══════════════════════════════════════════════════════════════════════════ from write-studio/ship-write-align.css ═══════════════════════════════════════════════════════════════════════════ */ #etCoverStudio#etCoverStudio .et-form-control:focus, #etCoverStudio#etCoverStudio textarea:focus { /* One 1px teal border is the focus state for every field (16 Sep 2026): the ring that was here sat outside the field's own edge and read as a second border. */ border: 1px solid var(--et-acc-teal, #2dd4bf) !important; box-shadow: none !important; outline: none !important; } /* ── Second pass (6 Sep 2026) ───────────────────────────────────────────── Generate artwork, soft-disabled until a description exists, dimmed to 45% on desktop only (workshop-ship.css keeps that rule inside a media query); at 768 it was a full-width bright teal bar that looked ready to press. */ #et-bcc-sticky-cta .et-bcc-sticky-cta__btn.is-disabled, #et-bcc-sticky-cta .et-bcc-sticky-cta__btn[aria-disabled="true"], #et-bcc-sticky-cta .et-bcc-sticky-cta__btn:disabled { opacity: 0.45 !important; filter: grayscale(0.4); box-shadow: none !important; } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col { grid-column: 1 !important; grid-row: auto !important; align-self: start; margin-bottom: 1.25rem; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel { position: static; max-height: none; } } @media (min-width: 992px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-ship-section-head--step2 { order: -1 !important; } } /* The "Generate artwork first, then style the type" notice sat above the step's own heading, so the page opened on a note about a locked tool. The heading leads; the note follows it. */ @media (min-width: 992px) { /* writing-tools.css pins the notice to grid row 1; auto-placed, it takes the row after the heading. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-step2-wait { grid-row: auto !important; order: 0 !important; } } @media (min-width: 1200px) { #etCoverStudio#etCoverStudio#etCoverStudio { grid-template-columns: minmax(0, 1fr) minmax(17rem, 42%); } } @media (min-width: 1200px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel { width: 100%; max-width: none; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel { width: 100%; max-width: none; } } @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col { height: auto !important; min-height: 0 !important; max-height: none !important; align-self: start !important; display: block !important; margin-bottom: 1.25rem !important; } } /* Stacked cover grid: the preview column kept a 20px height from the two-column layout (where it stretches across the rows it spans), so its 753px panel hung out of a 20px box and the Optional cover details and Copyright rows drew over the cover. In one column it sizes to the panel. */ @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel { position: static !important; top: auto !important; max-height: none !important; } } /* ── Author & cover's blocks are black, like every other step's (6 Sep 2026) ── Description and Export set their section on #000 inside the #0c0c0e card. Author & cover's blocks — pen name, genre, cover description, the preview panel, the title/author fields — were a 6% white tint, a lighter grey than anything around them. Measured and matched: the blocks are #000; the tinted rows inside them (the "generate first" note, the dashed preview placeholder, the quick-add chips) keep their tint, which on black reads as the same darker grey the Export tiles use. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-ship-step2-block, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-genre-bar, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-grid--ship, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-field-group--ship-cover, #etCoverStudio#etCoverStudio#etCoverStudio .et-ship-form-block { background: var(--et-studio-block, #000) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-step2-wait { background: rgba(255, 255, 255, 0.06) !important; border-color: transparent !important; } /* ═══════════════════════════════════════════════════════════════════════════ Template families and the rules list (7 Sep 2026) ═══════════════════════════════════════════════════════════════════════════ */ /* The genre grid is shelved by family (see groupTemplateCards); each label is a grid row of its own. The first one names the chosen genre. */ #etCoverStudio#etCoverStudio .et-bcc-templates--genre .et-bcc-template-family { grid-column: 1 / -1; margin: 0.85rem 0 0.1rem !important; padding: 0 !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: #9ca3af !important; background: transparent !important; position: static !important; } #etCoverStudio#etCoverStudio .et-bcc-templates--genre .et-bcc-template-family:first-child { margin-top: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-templates--genre .et-bcc-template-family--match { color: var(--et-acc-teal, #2dd4bf) !important; } /* Every rule on the cover, named, with its own Remove. */ #etCoverStudio#etCoverStudio .et-bcc-rules { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.1)); } #etCoverStudio#etCoverStudio .et-bcc-rules__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; } #etCoverStudio#etCoverStudio .et-bcc-rules__label { margin: 0 !important; } #etCoverStudio#etCoverStudio .et-bcc-rules__clear { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; color: var(--et-text-muted, #a3a3b0) !important; } #etCoverStudio#etCoverStudio .et-bcc-rules__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } #etCoverStudio#etCoverStudio .et-bcc-rules__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; background: rgba(255, 255, 255, 0.04); } #etCoverStudio#etCoverStudio .et-bcc-rules__swatch { flex: 0 0 auto; width: 1.5rem; height: 3px; border-radius: 999px; } #etCoverStudio#etCoverStudio .et-bcc-rules__name { flex: 1 1 auto; min-width: 0; font-size: 0.75rem; color: #e5e7eb; } #etCoverStudio#etCoverStudio .et-bcc-rules__name small { color: #9ca3af; font-size: 0.6875rem; } #etCoverStudio#etCoverStudio .et-bcc-rules__remove { flex: 0 0 auto; font-size: 0.75rem !important; padding: 0.2rem 0.55rem !important; } #etCoverStudio#etCoverStudio .et-bcc-rules__empty { margin: 0 !important; } /* ── 6b-bis. The AI / separator options, as one grouped control ────────────── * * Three consequential switches sat as three loose blocks, each with its own * paragraph, and together they ran 219px and 103 words before an author had * chosen anything. The Write page never presents choices that way: it groups * them into one bordered control with hairline dividers, and lets the label * carry the weight while the explanation sits quieter underneath. * * The copy was cut in the panel (keeping that it spends a generation, and that * misspellings are caught when the words can be read). What is left here is * density: the rows share one divider rhythm instead of only the middle one * having a rule, and the padding matches the Write page's control rows rather * than a card of its own. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text { gap: 0 !important; padding: 0.15rem 0.7rem !important; margin: 0.15rem 0 0.35rem !important; } /* Every option is a row in the same list, so every row gets the same rule — previously only `--art` had one, which read as a divider in the wrong place. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__opt { gap: 0.35rem !important; padding-top: 0 !important; border-top: 0 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text > .et-bcc-ai-text__toggle, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__opt { padding: 0.4rem 0 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__opt + .et-bcc-ai-text__opt, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text > .et-bcc-ai-text__toggle + .et-bcc-ai-text__opt, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__row + .et-bcc-ai-text__opt { border-top: 1px solid var(--et-border) !important; } /* The hint is the quiet half of the pair; it does not need the label's leading. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__hint { line-height: 1.4 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-ai-text__copy { gap: 0.1rem !important; } /* ── 6b-ter. The empty preview does not sit under the step heading ────────── * * In the one-column layout the preview column is pinned with `grid-row: 2`, so * it sits immediately under "Author & cover" and stays there while the controls * scroll past. That is right once there is a cover to look at. Before there is * one it reserves a full cover's height — measured 390px, with the step * heading ending at y=162 and the first field (Author name) starting at 636 — * for a placeholder reading "your cover appears here". Reported as too much of * a gap between the header and the content, and it is: 474px of it. * * So until artwork exists the preview leaves the pin and flows with everything * else at its own order (69), which puts it after Generate — where the thing it * is waiting for actually happens. The moment `.et-bcc--has-art` lands it goes * back to being the sticky row-2 preview, unchanged. */ @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc:not(.et-bcc--has-art) .et-bcc-preview-col { grid-row: auto !important; position: static !important; top: auto !important; z-index: auto !important; } /* The typography card's `grid-row: 3` was placed to sit under the pinned strip; with nothing pinned it must flow by order too, or it lands back in row 3 above the fields it belongs beneath. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc:not(.et-bcc--has-art) .et-bcc-card--text { grid-row: auto !important; } } /* ── 6b-quater. The "write something first" ring, where it can be seen ────── * * Clicking AI assist under the character gate does three things: it swaps the * hint for a red line, it focuses the cover-art description, and it adds * .et-bcc-field-callout to that field for 2.2s. On this surface the third did * nothing at all, because focusing the field is exactly what triggers * `.et-form-control:focus { outline: none !important; box-shadow: … !important }` * above — and an !important declaration beats an animation, so the callout's * keyframes were overridden by the ordinary focus ring. With the hint's error * colour also being outranked (it shares the element with `text-muted-et`, * which app.css pins), the whole refusal came down to some small grey wording * changing, which reads as a dead button. Reported as "AI assist isn't * working"; the request was never sent, and nothing said why. * * A static ring for the life of the class, rather than an animation: the class * is added and removed by the script, so the timing is already handled, and a * plain declaration is what wins against the !important focus rule. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-field-callout, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-field-callout:focus { outline: 2px solid rgba(79, 199, 255, 0.95) !important; outline-offset: 2px !important; } /* ── 6b-quinquies. The artwork bar: status quiet, actions equal ───────────── * * "Artwork ready · Change artwork · Regenerate · Upload" had a status label * shouting in --et-dash-accent-info blue — a colour used nowhere else in the * studio — beside three actions in bold 12px grey, on a panel with no border to * group them. The label read as the loudest thing in the bar despite being the * one part you cannot click. * * So: the status steps back to muted text with a teal marker, the actions come * forward at one weight, and a hairline holds the group together. The teal is * the studio's own accent, which is the point — this bar belongs to the cover * studio, not to the dashboard's info palette. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace { gap: 0.4rem 0.75rem !important; padding: 0.55rem 0.75rem !important; border: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.1)) !important; background: rgba(255, 255, 255, 0.03) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace__label { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #9ca3af !important; margin-right: 0.15rem !important; } /* A small teal dot carries "ready" without a second colour word. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace__label::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--et-acc-teal, #2dd4bf); flex: 0 0 auto; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace .btn { font-size: 0.75rem !important; font-weight: 600 !important; color: #e5e5ea !important; padding: 0.3rem 0.55rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace .btn i { opacity: 0.75; margin-right: 0.3rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace .btn:hover:not(:disabled) { color: var(--et-acc-teal, #2dd4bf) !important; background: rgba(45, 212, 191, 0.08) !important; } /* Disabled means "not yet", and the title says why — so it reads as waiting rather than broken. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-replace .btn:disabled { color: #6b7280 !important; opacity: 1 !important; cursor: not-allowed !important; } /* ── 10. After the artwork: one order, and it does not change ───────────────── * * Reported 11 Sep 2026: "after a cover is generated the description area * disappears" and "the organization of the page after a cover has been * generated is not user friendly". Both were true, and measured on Ship at * 1440 they were one problem: * * - the art description folded away the moment artwork existed (the script * no longer folds it; see syncArtComposeUi); * - the typography card jumped from the bottom of the step to directly under * the step heading — docY 162, above Author name (1299), Genre (1410) and * Generate (1520) — because writing-tools.css pins `.et-bcc-card--text` to * `grid-row: 2` at >=992px and the one-column container rules re-pinned it * to row 3. A row-pinned grid item is placed before every auto-placed one, * whatever its `order`, so section 2's list meant nothing once it showed; * - the cover's own wording (title, author, subtitle, series) ended up split * around that card, with the optional lines after it, 1,100px from the * title field they belong with. * * So: nothing in the studio is row-pinned except the heading and the preview, * the list below is the whole order on every surface and in both states, and * three quiet labels say which job each run of controls belongs to. * * 16 Start over * 17 Cover text title and author (18) · optional lines (20) · genre (22) * 24 Quota then the Artwork label (26) · description · Generate · * the AI options that change what Generate does (35) · * upload · versions (40) · the preview on a phone (42) * 64 Painted lines, under the cover they belong to * 69 Typography "generate first" note / the type card (70) * then Ship's paperwork (82-95). */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text { grid-row: auto !important; } #etCoverStudio#etCoverStudio .et-bcc-section-label--art { order: 26 !important; } #etCoverStudio#etCoverStudio .et-bcc-card--art > .et-bcc-card__head { order: 24 !important; } #etCoverStudio#etCoverStudio .et-bcc-art-replace { order: 40 !important; } #etCoverStudio#etCoverStudio .et-bcc-section-label--text { order: 17 !important; } #etCoverStudio#etCoverStudio .et-bcc-optional-fields--ship { order: 20 !important; } /* The other-lines painter sits inside the artwork options again, directly under "Paint the title artwork with AI" (owner, 23 Sep 2026). As a child of that card it is no longer a grid item here, so the order/grid-column that placed it under the cover-text fields would never apply — it is retired rather than left to read as if it still governs the position. The reason it was moved out (an empty state that said "add a subtitle above" while the fields were below) was fixed in the wording, not the placement. */ #etCoverStudio#etCoverStudio .et-bcc-preview-toolbar { scroll-margin-top: 5.25rem; } #etCoverStudio#etCoverStudio .et-bcc-section-label--type { order: 69 !important; } #etCoverStudio#etCoverStudio .et-bcc-inspector__chrome { order: 16 !important; } /* Three ids: the >=992 rule that lifted the note under the step heading has three. It belongs where the type controls it is waiting for will appear. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-step2-wait { order: 70 !important; grid-row: auto !important; } /* The preview in the one-column container. Its old order (69) was "just after Generate" when Generate was near the end of the list; now it would land between the Typography label and the note under it. Before artwork it flows where Generate was pressed (42, as on the public page); with artwork it is the sticky strip, and sits just above the Typography label (68) so the label heads the controls it names. In the grid case the strip is also pinned to row 2, and order does not apply to it there. */ @container et-cover-studio (max-width: 680px) { #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col { order: 68 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc:not(.et-bcc--has-art) .et-bcc-preview-col { order: 42 !important; } } /* The labels. Write's companion columns set their section labels in teal 12px/650 sentence case; these are the same rank, with a hairline running out to the column edge so each reads as the start of a group, not a field label. `display` is ours here only because the element has no `hidden` state of its own. */ #etCoverStudio#etCoverStudio .et-bcc-section-label { display: flex !important; align-items: center; gap: 0.5rem; grid-column: 1 !important; margin: 0.75rem 0 -0.5rem !important; padding: 0 !important; font-size: 0.75rem !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; color: var(--et-acc-teal, #2dd4bf) !important; background: transparent !important; } /* Three ids and !important: studio-flat paints every icon in the step white at its own size, with a :not() chain that outweighs two ids. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-section-label > i { font-size: 0.8125rem !important; line-height: 1 !important; width: auto !important; height: auto !important; color: inherit !important; opacity: 0.9; } #etCoverStudio#etCoverStudio .et-bcc-section-label::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--et-ui-line, rgba(255, 255, 255, 0.1)); } @media (min-width: 992px) { #etCoverStudio#etCoverStudio .et-bcc-section-label { margin: 0.5rem 0 0.75rem !important; } } /* Before artwork the Typography label heads the "generate artwork first" note. Wherever that note is not shown, the label would head nothing at all — so it goes with it. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc:not(.et-bcc--has-art) .et-bcc-section-label--type:has(+ .et-bcc-step2-wait[hidden]) { display: none !important; } /* The first label follows the pen name on Ship and opens the column on the public page; either way it needs no extra air above it. */ #etCoverStudio#etCoverStudio .et-bcc-section-label--art { margin-top: 0 !important; } /* What Regenerate will use. Muted by default; amber once the box has been edited since the artwork on screen was made — a pending change, not an error. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-note { margin: 0.35rem 0 0 !important; font-size: 0.75rem !important; line-height: 1.45 !important; color: var(--et-text-muted, #a3a3b0) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-note.is-changed { color: #fcd34d !important; } /* Artwork versions: the old "Artwork ready" strip, holding thumbnails. Only styled while shown — section 8's point about `hidden` stands. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-versions:not([hidden]) { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 0.5rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-versions__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version { position: relative; display: block; width: 2.75rem; height: 4.4rem; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 0 !important; background: #000 !important; cursor: pointer; overflow: hidden; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version img { display: block; width: 100%; height: 100%; object-fit: cover; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version:hover:not(:disabled):not(.is-current) { border-color: var(--et-acc-teal, #2dd4bf) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version.is-current { border-color: var(--et-acc-teal, #2dd4bf) !important; box-shadow: 0 0 0 1px var(--et-acc-teal, #2dd4bf) !important; cursor: default; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version:focus-visible { outline: 2px solid var(--et-acc-teal, #2dd4bf) !important; outline-offset: 2px !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version:disabled { opacity: 0.5; cursor: not-allowed; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-version__now { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; font-size: 0.5625rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; text-align: center; color: var(--et-acc-teal, #2dd4bf); background: rgba(0, 0, 0, 0.78); } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-versions__hint { margin: 0 !important; font-size: 0.6875rem !important; color: var(--et-text-muted, #a3a3b0) !important; } /* The description field took the textarea's default width (381px of a 639px block on Ship at 1440) because the block is a flex column and writing-tools.css gives Ship's compact studio `align-items: start` at >=768px — so the field sized to its content, and AI assist sat mid-row. Every field in the block spans it. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-grid { align-items: stretch !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-grid > .et-bcc-field, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-art-grid #et-bcc-prompt { width: 100% !important; max-width: 100% !important; } /* "Ask Kestrel about this cover" — Ship only (ship-kestrel.js adds it under the preview). A full-width quiet button with her face, like the dock's own openers, so it reads as a way to her rather than another cover control. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-kestrel-look:not([hidden]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; width: 100% !important; min-height: 2.25rem !important; margin: 0.5rem 0 0 !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: #e5e5ea !important; border: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.12)) !important; background: transparent !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-kestrel-look:hover:not(:disabled) { color: var(--et-acc-teal, #2dd4bf) !important; border-color: color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 45%, transparent) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-kestrel-look__face { width: 1.25rem; height: 1.25rem; border-radius: 50% !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 40%, transparent); flex: 0 0 auto; } /* "Download complete cover" / "Save to media library", enabled and disabled, is painted in §14 with Generate artwork. */ /* "JPEG, PNG, or WebP · max 5 MB" describes the upload button, and sat a full block gap (20px) below it, closer to nothing in particular. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-upload-hint { margin-top: -0.85rem !important; } /* Start over, first and findable: a toolbar at the top of the studio, not a muted link after Paperback. Four ids so this beats the quiet footer rules that used to hide it, and so Ship's "drop the Cover studio kicker" sheet cannot take the button with it. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__chrome { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; order: 16 !important; margin: 0 0 0.85rem !important; padding: 0.45rem 0 !important; border: 0 !important; border-bottom: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.08)) !important; background: transparent !important; min-height: 2.75rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__brand { display: block !important; font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: var(--et-text-muted, #a3a3b0) !important; font-family: inherit !important; } /* Start over is a quiet header action, the site's ghost: no box, muted ink, a faint fill on hover (owner, 26 Sep 2026: "make the start over button fit the site design better"). The teal outline made clearing everything the loudest control on the step. It still asks before it clears. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__reset { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; min-height: 2rem !important; padding: 0.25rem 0.6rem !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--et-text-muted, #a3a3b0) !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__reset > i { color: inherit !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__reset:hover { color: var(--et-text-primary, #fafafa) !important; background: rgba(255, 255, 255, 0.06) !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__reset:focus-visible { outline: 2px solid var(--et-acc-teal, #2dd4bf); outline-offset: 2px; } /* ── 11. Templates and pickers: one look on both surfaces ───────────────────── * * Reported 11 Sep 2026: on /tools/ai-book-cover-generator the genre overlay * templates "don't fit the design" — asked to look like Ship step 2. Measured * side by side, the markup is identical; what differs is which page-wide * sheets reach it. Ship's look comes from studio-flat.css, write-flow.css and * the Write bundle, none of which the public page loads, so there the shared * defaults showed through: a full-width sky-blue caps chip on every card, the * separator picker in white-bordered monospace caps, the separator colour as * a 660px bar, and "Match accent" drawn although it is `hidden`. * * The values below are Ship's computed styles, copied as literals so neither * surface depends on the other's page sheets. Three ids + !important because * the public page's own sheets and the shared base both carry !important. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card__inner { color: #d4d4d8 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card__genre { display: inline-block !important; justify-self: start !important; align-self: flex-start !important; width: auto !important; max-width: 100% !important; padding: 3px 8px !important; border: 0 !important; border-radius: 0 !important; background: rgba(250, 250, 250, 0.07) !important; color: #fafafa !important; font-size: 12px !important; font-weight: 600 !important; line-height: 18px !important; letter-spacing: normal !important; text-transform: none !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card--recommended .et-bcc-template-card__genre { background: rgba(45, 212, 191, 0.16) !important; color: #5eead4 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card__inner strong { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 16.9px !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card__inner small { color: #b8b8c4 !important; font-size: 12px !important; line-height: 16.8px !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card__thumb { background-image: repeating-linear-gradient(-45deg, rgba(250, 250, 250, 0.07) 0, rgba(250, 250, 250, 0.07) 6px, #000 6px, #000 12px) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-template-card input:checked + .et-bcc-template-card__inner { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-left: 2px solid var(--et-acc-teal, #2dd4bf) !important; color: #fafafa !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-sep-picker__btn { border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.028) !important; color: #d4d4d8 !important; box-shadow: none !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-sep-picker__btn:hover:not(.is-active) { border-color: rgba(45, 212, 191, 0.4) !important; color: #fafafa !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-sep-picker__btn.is-active { border-color: rgba(61, 215, 196, 0.6) !important; background: rgba(45, 212, 191, 0.12) !important; color: #fafafa !important; box-shadow: inset 0 -2px 0 var(--et-acc-teal, #2dd4bf) !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-sep-picker__name { font-family: "DM Sans", system-ui, -apple-system, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 14.4px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: inherit !important; } /* The colour control is a 30px swatch (Pickr's button), not a bar. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-sep-color .pcr-button, #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-advanced-grid .pcr-button { flex: 0 0 auto !important; width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 7.5px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-sep-color__reset[hidden] { display: none !important; } /* The preview panel is a flex column (a grid in the one-column layout), and cover-studio-base.css orders only three of its children below 1400px — toolbar 3, cover 4, tips and "Saved" 5. Everything else is order 0, which sorts ABOVE the toolbar: at 1200-1399 on Ship the Add text row, the editing tip, the export-package link and "Ask Kestrel about this cover" all sat over "Your cover". The whole sequence, in DOM order, at every width. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-toolbar { order: 1 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-wrap { order: 2 !important; } /* After the download, not between the picture and it. Open, the slider list is taller than the cover; in front of the download it pushed Save off every laptop screen. */ #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-cover-layers { order: 16 !important; width: 100%; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-cover-layers__fold { width: 100%; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-cover-layers__fold > summary { display: flex !important; align-items: baseline; cursor: pointer; list-style: none; margin-bottom: 0 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-cover-layers__fold > summary::-webkit-details-marker { display: none; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-cover-layers__fold > summary::after { content: ''; flex: 0 0 auto; align-self: center; margin-left: auto; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-0.1rem); opacity: 0.65; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-cover-layers__fold[open] > summary { margin-bottom: 0.55rem !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-cover-layers__fold[open] > summary::after { transform: rotate(225deg) translateY(-0.1rem); } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-overlay-menu { order: 4 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-overlay-add { order: 5 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-kestrel-look { order: 6 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-hint { order: 7 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-tips { order: 8 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-download-hint { order: 9 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-saved { order: 10 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-ship-cover-thumb { order: 11 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-autosave { order: 12 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-download-actions { order: 13 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-download-package { order: 14 !important; } #etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > #et-bcc-download { order: 15 !important; } /* ── 14. Action buttons: one size, the icon centred on the words ───────────── * * Reported 11 Sep 2026: "Generate / Regenerate artwork" and "Save to media * library" had different text and icon sizes, and the text did not sit on the * icon's centre. Measured: Generate was 13px text beside a 17px icon whose * middle sat 4px above the text's on Ship (1.5px on the public page); the * save button was 16.8px (btn-lg) with a 16.8px icon. Four rules sized them — * none laid the icon out with flex, so the glyph rode the text baseline with * Bootstrap Icons' -0.125em offset. * * Primary actions (Generate / Regenerate, and the public page's Save to media * library / Download complete cover): 15px bold text, an 18px icon in an * 18px box, centred in a flex row. Secondary download buttons: 13px and 15px. * The spinner that replaces the magic wand while generating turns in the same * box, so it no longer wobbles off-centre. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-baked-notice__actions > #et-bcc-baked-regenerate, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-generate, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-download-actions > #et-bcc-download { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.55rem !important; width: 100% !important; min-height: 2.75rem !important; padding: 0 1.25rem !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.01em !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-baked-notice__actions > #et-bcc-baked-regenerate > i, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-generate > i, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-download-actions > #et-bcc-download > i { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; font-size: 18px !important; line-height: 1 !important; transform-origin: 50% 50%; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-generate > span, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-download-actions > #et-bcc-download > span { display: inline-block !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1 !important; } /* The secondary downloads: the same construction, one step smaller. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-art, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-copy, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-package { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap; gap: 0.25rem 0.45rem !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* display:flex !important above beats the hidden attribute, so these three stayed on screen before any artwork existed. The attribute has to win. */ #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-art[hidden], #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-copy[hidden], #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-package[hidden] { display: none !important; } #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-art > i, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-copy > i, #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio #et-bcc-download-package > i { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 15px !important; width: 15px !important; height: 15px !important; margin: 0 !important; font-size: 15px !important; line-height: 1 !important; } /* The upload row under Generate: "Upload image" (a