/* ── Print mode (server-side Playwright export) ────────────────────────── When `#app.is-print-mode` is on, the editor chrome is gone from the DOM (via v-if), Vue renders a flat .print-container with every slide stacked, and Playwright snaps the result via page.pdf(). The @page rule is injected dynamically from JS in the mounted() hook so it can match model.page dims. */ /* Globally the editor shell locks the document with `html, body { overflow: hidden }` and `#app { min-height: 100vh; display: flex }`. We override both when print mode is on. The is-print-mode class is set imperatively on in created() — using a class avoids `:has()` browser quirks and gives us higher specificity than the editor-shell rules without !important battles. */ html.is-print-mode, html.is-print-mode body { overflow: auto !important; height: auto !important; background: #fff; } html.is-print-mode #app { display: block !important; min-height: 0 !important; flex-wrap: initial !important; width: 100%; background: #fff; } .print-container { background: #fff; } .print-slide { /* dims + background set inline by print_slide_style() */ box-sizing: border-box; overflow: hidden; } .print-slide:last-child { page-break-after: auto; break-after: auto; } @font-face { font-family: "Recoleta Bold"; src: url('fonts/RecoletaBold/font.woff2') format('woff2'), url('webFonts/RecoletaBold/font.woff') format('woff'); } @font-face { font-family: "Recoleta Medium"; src: url('fonts/RecoletaMedium/font.woff2') format('woff2'), url('webFonts/RecoletaMedium/font.woff') format('woff'); } /* Inter is bundled as TTF (not WOFF2) so the same files can be embedded into exported PDFs via pdf-lib — keeps canvas and PDF metrics identical. */ @font-face { font-family: "Inter"; font-weight: 400; font-style: normal; src: url('fonts/Inter/Inter-Regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: "Inter"; font-weight: 700; font-style: normal; src: url('fonts/Inter/Inter-Bold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: "Inter"; font-weight: 400; font-style: italic; src: url('fonts/Inter/Inter-Italic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: "Inter"; font-weight: 700; font-style: italic; src: url('fonts/Inter/Inter-BoldItalic.ttf') format('truetype'); font-display: swap; } :root{ /* interface */ --header-height: 4rem; --sidebar-width: 20rem; --sidebar-right-width: 20rem; --footer-height: 4rem; /* breakpoints */ --breakpoint-small: 40rem; --breakpoint-medium: 50rem; /* Storyraise-aligned palette */ --accent: #16a085; --accent-strong: #14b8a6; --accent-soft: rgba(22, 160, 133, 0.18); --panel: #1c2733; --panel-hi: #243140; --bg-deep: #0f1924; /* colors */ @media (prefers-color-scheme: dark) { --color-bg: var(--bg-deep); --color-fg: #fff; --color-highlight: var(--accent); --color-dim: #41668970; --sand-primary: var(--color-bg); --color-base-300: var(--bg-deep) !important; --color-base-100: var(--panel) !important; } @media (prefers-color-scheme: light) { --color-bg: var(--sand-primary); --color-fg: var(--gray-primary); --color-highlight: var(--accent); --color-dim: #42423820; --color-base-300: var(--sand-primary) !important; --color-base-content: var(--gray-primary) !important; } } *{ box-sizing: border-box; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } body{ padding: 0; margin: 0; } html, body{ font-size: 16px; overflow: hidden; font-family: "Inter", system-ui, sans-serif; font-weight: 400; padding: 0; margin: 0; background: var(--color-base-300); @media screen and (max-width: 50rem){ font-size: 14px; } /* global elments */ h1, h2, h3, h4, h5{ /* color: var(--heading_color) !important; */ /* font-family: Georgia; */ /* font-family: "Recoleta Medium"; */ /* font-weight: 100 !important; */ line-height: 1.1; display: inline-block; } h1{ font-size: 2rem; } h2{ font-size: 1.75rem; } h3{ font-size: 1.5rem; } h4{ font-size: 1.25rem; } h5{ font-size: 1rem; } p, ul, li { /* color: var(--normal_color) !important; */ list-style: disc; } .material-symbols-outlined{ font-weight: 500; } .tabs{ display: flex; padding: 0; gap: 0.5rem; position: relative; border-bottom: 0.25rem solid rgb(255 255 255 / 10%); .tab{ flex-grow: 1; font-weight: 700; padding: 0.85rem 0; /* padding: 0.75rem 0 2rem 0; */ height: auto; border-radius: 0.5rem 0.5rem 0 0; color: #fff !important; transition: all 0.15s; &::before{ width: 100%; left: 0; background: rgb(255 255 255 / 10%); height: 0.15rem !important; display: none; } &:hover{ background: rgb(255 255 255 / 10%); } &.tab-active{ background: rgb(255 255 255 / 10%); color: rgba(255, 255, 255, 0.7) !important; &::before{ border-top: 0.15rem solid; border-color: transparent; background: transparent; display: none; } } } } .card{ .card-title{ font-size: 1rem; font-family: inherit; font-weight: 700 !important; } } } #app{ display: flex; flex-wrap: wrap; min-height: 100vh; header{ /* background-color: rgb(0 0 0 / 25%);*/ /* border-bottom: 0.15rem solid var(--color-dim); */ height: var(--header-height); width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem 0 1.25rem; gap: 1rem; } aside{ strong { position: sticky; top: 0; /* background: var(--panel); */ z-index: 2; padding-bottom: 0.5rem; opacity: 1 !important; color: #adb3ce; padding-left: 0.75rem !important; /* &:before { content: "#"; opacity: 0.5; margin-right: 0.55rem; margin-left: 0.55rem; } */ } } aside.left-sidebar{ padding: 1rem 0 1.25rem 1.25rem; width: var(--sidebar-width); height: calc(100vh - var(--header-height)); float: left; overflow-y: auto; /* border-right: 0.15rem solid var(--color-dim); */ /* .menu{ padding: 0; } */ .menu{ a{ font-weight: 600; } .menu-active{ background: rgb(255 255 255 / 10%); color: rgba(255, 255, 255, 0.7) !important; } } } main{ padding: 4rem 4.5rem 1.25rem; height: calc(100vh - var(--header-height)); overflow-y: auto; width: calc(100% - var(--sidebar-width) * 1); border-radius: 0.25rem 0.25rem 0 0; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.5rem 0.5rem 0 0; /* box-shadow: 0 0.25rem 0.5rem #000, inset 0.25rem 0 0 #ffffff27; box-shadow: inset 0.25rem 0 0 #ffffff27; */ } aside.right-sidebar{ padding: 0rem 1.25rem 1.25rem 3rem; padding: 0rem 0.95rem 1.25rem 0.95rem; width: var(--sidebar-right-width); height: calc(100vh - var(--header-height)); float: left; overflow-y: auto; /* background-color: rgb(0 0 0 / 25%); */ /* border-left: 0.15rem solid var(--color-dim); */ > div{ margin-left: 1rem; > div:not(.sidebar-tabs){ background: var(--panel); } } } } .editorjs-container { width: 100%; min-height: 3rem; border-radius: 0.5rem; padding: 0.25rem 0; } .editorjs-container .ce-block__content { max-width: 100%; } .editorjs-container .ce-toolbar__content { max-width: 100%; } .editorjs-container .codex-editor__redactor { padding-bottom: 0 !important; } .editorjs-title { width: 100%; font-size: 2.5rem !important; font-family: "Recoleta Medium"; } .editorjs-title .ce-block__content { max-width: 100%; } .editorjs-title .ce-toolbar { display: none !important; } .editorjs-title .codex-editor__redactor { padding-bottom: 0 !important; } .editorjs-title .ce-paragraph { padding: 0; line-height: 1.2 !important; text-wrap: balance; } .featured-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; } .featured-media-item { position: relative; border-radius: 0.75rem; overflow: hidden; aspect-ratio: 1; } .featured-media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .featured-media-remove { position: absolute; top: 0.25rem; right: 0.25rem; opacity: 0; transition: opacity 0.15s; } .featured-media-item:hover .featured-media-remove { opacity: 1; } .featured-media-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; aspect-ratio: 1; min-height: 8rem; border: 0.2rem dashed var(--color-dim); background: #191d3260; border-radius: 0.75rem; cursor: pointer; transition: border-color 0.2s; } .featured-media-dropzone:hover, .featured-media-dropzone.drag-over { border-color: oklch(var(--bc) / 0.4); } .featured-media-dropzone.drag-over { background: oklch(var(--bc) / 0.05); } /* Merge tags */ .merge-tag { display: inline-block; background: oklch(0.6 0.2 250 / 0.15); color: oklch(0.75 0.15 250); border: 1px solid oklch(0.6 0.2 250 / 0.3); border-radius: 0.25rem; padding: 0 0.3rem; font-size: 0.82em; font-family: monospace; cursor: default; user-select: none; white-space: nowrap; } .merge-tag-picker { position: fixed; background: var(--fallback-b1, oklch(var(--b1))); border: 1px solid oklch(var(--bc) / 0.15); border-radius: 0.5rem; padding: 0.25rem; z-index: 9999; min-width: 11rem; max-height: 16rem; overflow-y: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.25); } .merge-tag-picker-item { display: block; width: 100%; text-align: left; padding: 0.35rem 0.6rem; font-size: 0.8rem; font-family: monospace; border-radius: 0.25rem; cursor: pointer; background: none; border: none; color: inherit; } .merge-tag-picker-item:hover { background: oklch(var(--bc) / 0.1); } /* Chapter notes */ .drag-handle { font-size: 1.15rem !important; opacity: 0.5 !important; } #chapter-list li > div{ border-radius: 0.5rem 0 0 0.5rem; /* border-radius: 0; */ padding: 0.65rem 0.65rem 0.65rem 0.5rem; } #chapter-list li:has(.menu-active) > div{ background: rgba(255, 255, 255, 0.06); background: #ffffff27; background: rgb(255 255 255 / 10%); } #chapter-list a { font-weight: 600; padding: 0.125rem 0; &.menu-active { background: none; opacity: 0.7; color: inherit; } } .chapter-notes { padding: 0.75rem 0.5rem; border-radius: 0.5rem; border: 1px dashed oklch(var(--bc) / 0.15); resize: none; } .chapter-notes-input { resize: vertical; min-height: 5rem; font-size: 0.8rem; opacity: 0.8; background: transparent; border-color: transparent; padding-left: 0; } .chapter-notes-input:focus { outline: none; border-color: oklch(var(--bc) / 0.2); background: oklch(var(--bc) / 0.03); } /* Brand / Styles tab */ .brand-logo-preview { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.75rem; border: 1px solid oklch(var(--bc) / 0.12); border-radius: 0.5rem; min-height: 4rem; } .brand-colors-list { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .brand-color-chip { position: relative; width: 2rem; height: 2rem; border-radius: 0.375rem; border: 1px solid oklch(var(--bc) / 0.15); cursor: default; } .brand-color-remove { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); border-radius: 0.375rem; border: none; cursor: pointer; color: white; } .brand-color-chip:hover .brand-color-remove { display: flex; } .brand-color-add { position: relative; width: 2rem; height: 2rem; border-radius: 0.375rem; border: 1px dashed oklch(var(--bc) / 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; } .brand-color-add:hover { border-color: oklch(var(--bc) / 0.6); } summary > div{ display: flex; align-items: center; gap: 0.25rem; font-weight: 700 !important; .material-symbols-outlined { font-size: 1rem; margin-right: 0.5rem; font-weight: 700 !important; } } summary{ > .material-symbols-outlined { font-size: 1.8rem !important; background: #344455; padding: 0.75rem; border-radius: 100rem; } } /* Export format list */ .export-format-list { display: flex; flex-direction: column; gap: 0.25rem; } .export-format-item { /* padding: 0 0.6rem; */ border-radius: 0.5rem; border: 1px solid oklch(var(--bc) / 0.1); } .export-format-item summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; cursor: pointer; list-style: none; user-select: none; } .export-format-item summary::-webkit-details-marker { display: none; } .export-format-item .export-body { padding-bottom: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .export-chevron { transition: transform 0.18s ease; opacity: 0.8; font-size: 1rem !important; } .export-format-item[open] .export-chevron { transform: rotate(180deg); } .unsplash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .unsplash-thumb { position: relative; cursor: grab; border-radius: 0.375rem; /* overflow: hidden; */ } .unsplash-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .unsplash-thumb:active { cursor: grabbing; } .unsplash-credit { position: absolute; bottom: 0; left: 0; right: 0; font-size: 0.625rem; padding: 0.25rem 0.375rem; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: white; opacity: 0; transition: opacity 0.2s; } .unsplash-thumb:hover .unsplash-credit { opacity: 1; } .converts li a{ padding: 0.5rem 0.75rem; } .export-instance { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0rem 0.75rem 0rem; border-radius: 0.375rem; border: 1px solid oklch(var(--bc) / 0.07); /* background: #09253e; */ } .export-instance:hover { background: oklch(var(--bc) / 0.04); } .codex-editor{ background: #191d3260; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem; } /* RevoGrid dark overrides */ revo-grid { --revo-grid-cell-font-size: 0.8rem; } revo-grid::part(header-cell) { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; opacity: 0.7; } /* ── Widget shell ─────────────────────────────────────────────────────── */ /* The widget itself fills its grid cell. Body is the only layout child; handle and delete button are absolute overlays so they don't take height. */ .wb-widget { position: relative; height: 100%; } .wb-widget-body { position: absolute; inset: 0; overflow: hidden; } /* Floating pill at top-center INSIDE the widget. */ .wb-widget-controls { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 30; display: inline-flex; gap: 1px; background: rgba(20, 22, 32, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.12s; user-select: none; } .grid-stack-item:hover .wb-widget-controls, .grid-stack-item.selected .wb-widget-controls, .wb-widget-controls:hover { opacity: 1; pointer-events: auto; } .wb-pill-btn { width: 22px; height: 22px; border: none; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .wb-pill-btn .material-symbols-outlined { font-size: 0.95rem; } .wb-pill-btn:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 1); } /* Drag handle is a wide grab bar; height matches the other pill buttons. */ .widget-drag-handle.wb-pill-btn { width: 10rem; cursor: grab; border-radius: 999px; } .widget-drag-handle.wb-pill-btn:active { cursor: grabbing; } .wb-pill-btn--delete:hover { background: rgba(239, 68, 68, 0.85); color: #fff; } /* ── Image widget ─────────────────────────────────────────────────────── */ .wb-image { width: 100%; height: 100%; display: block; object-fit: cover; } .wb-shape { width: 100%; height: 100%; transform-origin: center; } .wb-image-upload-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 0.5rem; cursor: pointer; color: #aaa; font-size: 0.8rem; border: 2px dashed #ccc; border-radius: 4px; background: #fafafa; } .wb-image-upload-prompt:hover { border-color: rgba(22, 160, 133,0.5); color: rgba(22, 160, 133,0.8); } /* ── TipTap / ProseMirror ─────────────────────────────────────────────── */ .wb-widget-body .ProseMirror { outline: none; padding: 10px 12px; color: #111; font-size: 0.9rem; line-height: 1.5; min-height: 100%; box-sizing: border-box; word-wrap: normal; overflow-wrap: normal; /* Match ProseMirror's bundled CSS so canvas (TipTap-mounted) and print mode (static v-html) wrap identically. `pre-wrap` preserves multiple spaces and newlines exactly the way TipTap stores them; `normal` would collapse them and let print mode fit more chars per line. */ white-space: pre-wrap; } .wb-widget-body .ProseMirror p { margin: 0 0 0.4em; } .wb-widget-body .ProseMirror p:last-child { margin-bottom: 0; } .wb-widget-body .ProseMirror h1 { font-size: 1.6em; font-weight: 700; margin: 0 0 0.3em; } .wb-widget-body .ProseMirror h2 { font-size: 1.25em; font-weight: 600; margin: 0 0 0.25em; } .wb-widget-body .ProseMirror h3 { font-size: 1.1em; font-weight: 600; margin: 0 0 0.2em; } .wb-widget-body .ProseMirror ul, .wb-widget-body .ProseMirror ol { padding-left: 1.4em; margin: 0 0 0.4em; } .wb-widget-body .ProseMirror strong { font-weight: 700; } .wb-widget-body .ProseMirror em { font-style: italic; } /* pdf-lib's widthOfTextAtSize is a plain sum of glyph advances — no kerning, no ligatures, no contextual alternates. Disable the browser's defaults so canvas line-wrap matches PDF line-wrap exactly. Descendant wildcard so //etc. inside the editor inherit the suppression even if a UA stylesheet tries to re-enable a feature. */ .wb-widget-body .ProseMirror, .wb-widget-body .ProseMirror * { font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0, "dlig" 0, "hlig" 0; text-rendering: geometricPrecision; } .wb-widget-body .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: #bbb; pointer-events: none; height: 0; } /* ── Style panel ──────────────────────────────────────────────────────── */ .sidebar-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .sidebar-tab { flex: 1; padding: 0.55rem 0; font-size: 0.78rem; font-weight: 600; border-radius: 0.5rem 0.5rem 0 0; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; color: rgba(255,255,255,0.4); transition: color 0.15s, border-bottom-color 0.15s; } .sidebar-tab.active { color: rgba(255,255,255,0.9); border-bottom-color: rgba(22, 160, 133,0.85); background: rgb(255 255 255 / 10%); } .sidebar-tab:disabled { opacity: 0.5; cursor: default; } .insert-panel { display: flex; flex-direction: column; } .insert-hint { font-size: 0.78rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.65rem; } /* 2x2 tile grid — Figma-style tool tray */ .insert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .insert-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; aspect-ratio: 1; padding: 1rem 0.75rem; border: 1px dashed rgba(255,255,255,0.14); border-radius: 8px; background: rgba(255,255,255,0.025); cursor: grab; transition: background 0.12s, border-color 0.12s, transform 0.06s, color 0.12s; user-select: none; color: rgba(255,255,255,0.75); text-align: center; } .insert-card:hover { background: rgba(22, 160, 133,0.08); border-style: solid; border-color: rgba(22, 160, 133,0.6); color: rgba(255,255,255,1); } .insert-card:active { cursor: grabbing; transform: scale(0.97); } .insert-card-icon { font-size: 1.85rem !important; opacity: 0.85; line-height: 1; } .insert-card-label { font-size: 0.78rem; font-weight: 500; line-height: 1; } .style-panel { display: flex; flex-direction: column; gap: 0.4rem; } .style-label { font-size: 0.78rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.4rem; display: block; } .style-section { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.6rem; margin-top: 0.4rem; } .style-section > summary { list-style: none; cursor: pointer; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; padding: 0.2rem 0; user-select: none; display: flex; align-items: center; justify-content: space-between; } .style-section > summary::-webkit-details-marker { display: none; } .style-section > summary::after { content: '+'; opacity: 0.55; font-size: 1rem; line-height: 1; } .style-section[open] > summary::after { content: '–'; } .style-section > summary:hover { opacity: 1; } .style-row { display: flex; gap: 0.5rem; align-items: flex-end; } .style-btn-group { display: flex; gap: 0.2rem; background: rgba(255,255,255,0.04); border-radius: 5px; padding: 0.2rem; } .style-btn { flex: 1; border: none; background: transparent; color: rgba(255,255,255,0.7); font-size: 0.78rem; padding: 0.35rem 0.4rem; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .style-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95); } .style-btn.active { background: rgba(22, 160, 133,0.25); color: rgba(255,255,255,1); } .style-color-input { width: 100%; height: 1.85rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); cursor: pointer; padding: 0; background: transparent; } /* ── Canvas layout ────────────────────────────────────────────────────── */ .canvas-toolbar { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 20; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; background: rgba(20, 22, 32, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); pointer-events: auto; /* Drop the old hint text on small screens — keeps the bar short */ white-space: nowrap; } .canvas-toolbar > span:first-child { display: none; } .canvas-toolbar .canvas-view-mode, .canvas-toolbar .canvas-zoom, .canvas-toolbar .canvas-undo-redo { background: transparent; } .canvas-view-mode, .canvas-undo-redo { display: inline-flex; background: rgba(255,255,255,0.05); border-radius: 5px; padding: 2px; gap: 1px; } .canvas-undo-redo .canvas-view-btn:disabled { opacity: 0.3; cursor: not-allowed; } .canvas-view-btn { background: transparent; border: none; color: rgba(255,255,255,0.55); cursor: pointer; border-radius: 3px; padding: 0.25rem 0.4rem; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .canvas-view-btn .material-symbols-outlined { font-size: 1.05rem; } .canvas-view-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,1); } .canvas-view-btn.active { background: rgba(22, 160, 133,0.25); color: rgba(255,255,255,1); } .canvas-zoom { display: inline-flex; align-items: center; background: rgba(255,255,255,0.05); border-radius: 5px; padding: 2px; gap: 1px; } .canvas-zoom-btn, .canvas-zoom-level { background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer; border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.72rem; font-variant-numeric: tabular-nums; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .canvas-zoom-btn .material-symbols-outlined { font-size: 1rem; } .canvas-zoom-btn:hover:not(:disabled), .canvas-zoom-level:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,1); } .canvas-zoom-btn:disabled { opacity: 0.5; cursor: not-allowed; } .canvas-zoom-level { min-width: 3rem; font-weight: 500; } .canvas-export-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(22, 160, 133, 0.85); border: none; color: #fff; border-radius: 5px; padding: 0.35rem 0.65rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: background 0.12s, opacity 0.12s; } .canvas-export-btn:hover:not(:disabled) { background: rgba(22, 160, 133, 1); } .canvas-export-btn:disabled { opacity: 0.5; cursor: progress; } .canvas-export-btn .material-symbols-outlined { font-size: 1rem; } .canvas-export-label { line-height: 1; } .canvas-outer { flex: 1; overflow: auto; /* Extra bottom padding so the Add Slide button + last slide can scroll above the floating toolbar (which sits at bottom: 1.25rem). */ padding: 2rem 2rem 6rem; /* background: #1a1a1a; */ } .canvas-outer-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; min-width: max-content; margin: 0 auto; } /* .canvas-page is the MEDIA box — full size including bleed. .canvas-page-trim is an absolute overlay (white paper backdrop, shadow) sized to the trim only. The grid-stack is a sibling of .canvas-page-trim and spans the full media box, so widgets can extend into the bleed area. */ .canvas-page { position: relative; width: calc(var(--page-w, 816px) + 2 * var(--bleed, 0px)); height: calc(var(--page-h, 1056px) + 2 * var(--bleed, 0px)); flex-shrink: 0; background: #e2fcff; } .canvas-page-trim { position: absolute; inset: var(--bleed, 0px); background: #fff; /* box-shadow: 0 8px 48px rgba(0,0,0,0.6); */ border-radius: 2px; z-index: 0; pointer-events: none; } /* 8-pixel grid visualization — only visible while user is dragging or resizing a widget. Same hue as crop marks (rgba(0,0,0,…)) but very low opacity so it doesn't dominate the page. */ .canvas-outer.is-snapping .canvas-page-trim { background-image: linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px); background-size: 8px 8px; background-position: 0 0; } .canvas-page > .grid-stack { position: absolute; inset: 0; z-index: 1; } .canvas-page-margin { position: absolute; inset: calc(var(--bleed, 0px) + var(--page-margin, 48px)); border: 1px dashed rgb(34 38 38); pointer-events: none; z-index: 5; border-radius: 1px; } /* Crop marks — 8 thin lines just outside each trim corner. Each mark extends from a small offset INTO the bleed area, ending before the trim line. */ .crop-marks { position: absolute; inset: 0; pointer-events: none; z-index: 6; } .crop-mark { position: absolute; background: rgba(0,0,0,0.85); } /* Horizontal arms (1px tall) — at trim's top/bottom edges, extending into the bleed */ .cm-tl-h, .cm-tr-h, .cm-bl-h, .cm-br-h { height: 1px; width: calc(var(--bleed, 0px) - 4px); } /* Vertical arms (1px wide) */ .cm-tl-v, .cm-tr-v, .cm-bl-v, .cm-br-v { width: 1px; height: calc(var(--bleed, 0px) - 4px); } /* Top-left corner */ .cm-tl-h { top: var(--bleed, 0px); left: 0; } .cm-tl-v { top: 0; left: var(--bleed, 0px); } /* Top-right corner */ .cm-tr-h { top: var(--bleed, 0px); right: 0; } .cm-tr-v { top: 0; right: var(--bleed, 0px); } /* Bottom-left corner */ .cm-bl-h { bottom: var(--bleed, 0px); left: 0; } .cm-bl-v { bottom: 0; left: var(--bleed, 0px); } /* Bottom-right corner */ .cm-br-h { bottom: var(--bleed, 0px); right: 0; } .cm-br-v { bottom: 0; right: var(--bleed, 0px); } /* ── Slide rows (single-page or 2-up spreads) ─────────────────────────── */ .canvas-slide-row { display: flex; justify-content: center; gap: 0; gap: 0.25rem; } .canvas-slide-row.spread .canvas-page-trim { border-radius: 0; } .canvas-slide-row.spread > .canvas-slide-wrap:first-child .canvas-page-trim { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .canvas-slide-row.spread > .canvas-slide-wrap:last-child .canvas-page-trim { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .canvas-slide-row.spread > .canvas-slide-wrap + .canvas-slide-wrap { margin-left: 1px; /* faint spine line between facing pages */ } /* ── GridStack overrides ──────────────────────────────────────────────── */ .canvas-page-trim .grid-stack { background: transparent; min-height: var(--page-h, 1056px); } /* Specificity must beat GridStack's `.grid-stack > .grid-stack-item > .grid-stack-item-content` selector, which sets `overflow-x: hidden; overflow-y: auto` and clips our pill controls. */ .canvas-page .grid-stack > .grid-stack-item > .grid-stack-item-content { background: transparent; border: none; border-radius: 0; overflow: visible; outline: 0 solid transparent; outline-offset: 0; transition: outline-color 0.12s, outline-width 0.12s; } .canvas-page .grid-stack-item:hover .grid-stack-item-content { outline: 1.5px solid rgba(22, 160, 133, 0.55); } .canvas-page .grid-stack-item.selected .grid-stack-item-content { outline: 2px solid rgba(22, 160, 133, 0.95); } /* Shape & Line widgets: their bounding-box wrapper should be invisible — the shape/line itself provides the visual. Use a dashed outline on hover so the user can still see/grab the widget for moving. */ .canvas-page .grid-stack-item-content:has(.wb-widget--shape), .canvas-page .grid-stack-item-content:has(.wb-widget--line) { background: transparent; border: 1px dashed transparent; border-radius: 0; overflow: visible; } .canvas-page .grid-stack-item:hover .grid-stack-item-content:has(.wb-widget--shape), .canvas-page .grid-stack-item:hover .grid-stack-item-content:has(.wb-widget--line) { border-color: rgba(22, 160, 133,0.4); box-shadow: none; } /* Shape filler — picks up clip-path / fill / etc. via apply_widget_style */ .wb-shape { display: block; } .wb-line { display: block; } /* ── Scrolling slide blocks ───────────────────────────────────────────── */ .canvas-slide-wrap { display: flex; flex-direction: column-reverse; gap: 0rem; width: calc(var(--page-w, 816px) + 2 * var(--bleed, 0px)); flex-shrink: 0; } /* Active slide focus ring — drawn just outside the media box. */ .canvas-slide-wrap.is-active .canvas-page { box-shadow: 0 0 0 2px rgba(22, 160, 133, 0.85); border-radius: 2px; } .canvas-slide-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.7); padding: 0.15rem 0rem; user-select: none; /* Numbers don't shift around with proportional digits */ font-variant-numeric: tabular-nums; > span{ font-size: 1.5rem; font-weight: 300; } } .canvas-slide-del-btn { background: rgba(20, 22, 32, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; color: rgba(255, 255, 255, 0.65); padding: 0.18rem 0.32rem; display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 5px; font-size: 0.72rem; font-weight: 500; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s, border-color 0.12s; line-height: 1; } .canvas-slide-wrap:hover .canvas-slide-del-btn, .canvas-slide-wrap.is-active .canvas-slide-del-btn { opacity: 1; } .canvas-slide-del-btn:hover { color: #fff; background: rgba(239, 68, 68, 0.85); border-color: rgba(239, 68, 68, 0.95); } .canvas-slide-del-btn .material-symbols-outlined { font-size: 0.95rem; } .canvas-add-slide-wrap { display: flex; justify-content: center; padding: 0.25rem 0 1.5rem; flex-shrink: 0; } .canvas-add-slide-btn { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 1rem; font-size: 0.78rem; border-radius: 6px; border: 1px dashed rgba(255,255,255,0.2); background: transparent; color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.15s; } .canvas-add-slide-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.4); } .canvas-add-slide-btn .material-symbols-outlined { font-size: 1rem; } /* ── Brand color swatches (under every color picker in the style sidebar) ── */ .brand-swatches { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; } .brand-swatch { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); padding: 0; cursor: pointer; transition: transform 0.08s, border-color 0.12s; } .brand-swatch:hover { transform: scale(1.12); border-color: rgba(255,255,255,0.5); } /* ── Brand font row in the project modal ──────────────────────────────── */ .brand-font-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; background: rgba(255,255,255,0.04); } .brand-font-name { flex: 1; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── TipTap table styling ─────────────────────────────────────────────── */ .wb-widget-body .ProseMirror table.wb-table, .wb-widget-body .ProseMirror table { border-collapse: collapse; margin: 0.4em 0; width: 100%; table-layout: fixed; overflow: hidden; } .wb-widget-body .ProseMirror table th, .wb-widget-body .ProseMirror table td { border: 1px solid rgba(0, 0, 0, 0.18); padding: 6px 8px; vertical-align: top; position: relative; min-width: 32px; } .wb-widget-body .ProseMirror table th { background: rgba(0, 0, 0, 0.05); font-weight: 600; text-align: left; } .wb-widget-body .ProseMirror table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); } .wb-widget-body .ProseMirror .selectedCell { background: rgba(22, 160, 133, 0.12); } .wb-widget-body .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background: rgba(22, 160, 133, 0.4); pointer-events: none; } /* ── Per-side border controls (unlinked mode) ─────────────────────────── */ .border-side-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; } .border-side-label { width: 1rem; text-align: center; font-size: 0.78rem; opacity: 0.6; text-transform: uppercase; flex-shrink: 0; } /* ── Image position preview (drag-to-reframe) ─────────────────────────── */ .image-position-preview { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; position: relative; cursor: grab; user-select: none; touch-action: none; } .image-position-preview:active { cursor: grabbing; } .image-position-img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; } /* ── Layer list (in style sidebar) ────────────────────────────────────── */ .layer-list { list-style: none; margin: 0.6rem 0 0; padding: 0; border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; } .layer-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; font-size: 0.74rem; color: rgba(255,255,255,0.65); cursor: pointer; transition: background 0.1s, color 0.1s; border-top: 1px solid rgba(255,255,255,0.04); } .layer-row:first-child { border-top: none; } .layer-row:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.9); } .layer-row.active { background: rgba(22, 160, 133,0.18); color: #fff; } .layer-row .material-symbols-outlined { font-size: 0.95rem; opacity: 0.7; flex-shrink: 0; } .layer-row.active .material-symbols-outlined { opacity: 1; } .layer-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* ── Storyraise-aligned heading + CTA ─────────────────────────────────── */ .sr-heading, .modal-box > h3, .modal-box > h2, .modal-box > form + h3 { font-family: "Recoleta Medium", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; } .sr-heading::after { content: "."; color: var(--accent); } .btn-cta { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1.1rem; font-weight: 500; font-size: 0.85rem; cursor: pointer; transition: background 0.12s; display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1; } .btn-cta:hover { background: var(--accent-strong); } .btn-cta:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Pre-mount loader (kills the {{ }} flash) ─────────────────────────── */ [v-cloak] { display: none !important; } #app-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .app-loader-spinner { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: var(--accent); animation: app-loader-spin 0.7s linear infinite; } @keyframes app-loader-spin { to { transform: rotate(360deg); } } /* Class set imperatively in Vue's mounted() hook — robust across browsers. */ body.app-ready #app-loader { opacity: 0; visibility: hidden; pointer-events: none; }