/* Content Creator — custom CSS that Tailwind utilities can't cover. Tailwind is loaded via CDN in _base.html; use this file for: - brand-specific component classes - animation / keyframes - overrides for third-party widgets (Tiptap, toast) */ /* Headings stay on IBM Plex Sans Thai (display face) while body text inherits Sarabun from . Applied globally so we don't have to touch every template's

/

. / h1, h2, h3, h4 { font-family: "IBM Plex Sans Thai", "Sarabun", system-ui, sans-serif; } / --- Tiptap editor skin --- / .ProseMirror { outline: none; min-height: 480px; padding: 1.25rem 1.5rem; line-height: 1.75; font-size: 16px; color: #363230; / Body text uses Sarabun — much more readable at paragraph sizes in Thai. / font-family: "Sarabun", "IBM Plex Sans Thai", system-ui, sans-serif; } / Headings keep IBM Plex Sans Thai — stronger silhouette at display size. / .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4 { font-family: "IBM Plex Sans Thai", "Sarabun", system-ui, sans-serif; } .ProseMirror h1 { font-size: 1.75rem; font-weight: 700; margin: 1.25rem 0 .75rem; } .ProseMirror h2 { font-size: 1.35rem; font-weight: 600; margin: 1rem 0 .5rem; } .ProseMirror p { margin: .5rem 0 .75rem; } .ProseMirror a { color: #DF5940; text-decoration: underline; text-underline-offset: 3px; } .ProseMirror .citation { display: inline-block; padding: 0 .35rem; border-radius: 4px; background: #F1D007; color: #363230; font-size: .75rem; font-weight: 600; vertical-align: super; margin: 0 1px; cursor: pointer; } / --- Toast --- / .cc-toast { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } / --- Animations --- / @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse-soft { animation: pulse-soft 1.5s ease-in-out infinite; } @keyframes stream-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .stream-in { animation: stream-in .25s ease-out; } / Shimmer overlay for the research progress bar — visible proof of activity while agents run, independent of the event-driven % updates. / @keyframes cc-shimmer-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .cc-shimmer { background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100% ); animation: cc-shimmer-slide 1.6s linear infinite; } / Blinking caret shown while AI types into title/angle on the research page. / @keyframes cc-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .cc-caret { display: inline-block; margin-left: 1px; font-weight: 400; color: #F1D007; animation: cc-caret-blink 0.9s step-end infinite; } / Highlight flashed on the draft editor when the creator clicks a reviewer comment's quoted selection — helps them find the exact spot to fix. / @keyframes cc-review-hit-flash { 0% { background: #FEF3C7; box-shadow: 0 0 0 4px rgba(241, 208, 7, 0.25); } 100% { background: #FFF8EC; box-shadow: 0 0 0 0 rgba(241, 208, 7, 0); } } mark.cc-review-hit { background: #FEF3C7; color: inherit; padding: 1px 2px; border-radius: 3px; animation: cc-review-hit-flash 2.5s ease-out; } / Global pipeline status bar — pad the body so the fixed bar doesn't cover the last line of content on scroll. The bar itself has variable height (one row per active/ready job), so we slightly over-pad. / body:has(.cc-status-bar > div > div:not(:empty)) { padding-bottom: 72px; } / When the global status bar is visible, lift the feedback widget so the bubble doesn't sit behind the bar. / body:has(.cc-status-bar > div > div:not(:empty)) .cc-feedback-widget { bottom: 80px !important; } / --- Source card credibility borders --- / .cred-high { border-left: 3px solid #16a34a; } / green — credibility >= 80 / .cred-medium { border-left: 3px solid #F1D007; } / yellow — 50-79 / .cred-low { border-left: 3px solid #DF5940; } / red — < 50 */