/* * This CSS is required to make the React app fill the entire viewport. * The default browser styles for and do not stretch to 100% height, * so we must set this explicitly. This allows Tailwind's min-h-screen to work correctly. */ @import "tailwindcss"; @import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"); html, body, #root { height: 100%; width: 100%; margin: 0; padding: 0; } /* * The following styles are for a clean, flat aesthetic. * You can customize the font and background color here. */ body { font-family: var(--font-body), "Inter", "Noto Color Emoji", sans-serif; background-color: var(--color-background, #f7fafc); /* A light gray background color */ color: var(--color-text, #1f2937); } .markdown-content table { display: table; width: auto; /* prevent stretching full screen */ max-width: max-content; } .markdown-content { line-height: 1.7; font-size: 1rem; color: var(--color-text, #000000); } /* Headings */ .markdown-content h1 { font-size: 2.25rem; /* 36px */ font-weight: 800; margin-top: 2.5rem; margin-bottom: 1rem; color: var(--color-text, #000000); } .markdown-content h2 { font-size: 1.75rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: var(--color-text, #000000); } .markdown-content h3 { font-size: 1.5rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.75rem; color: var(--color-text, #000000); } .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text, #000000); } /* Paragraphs */ .markdown-content p { margin-top: 1rem; margin-bottom: 1rem; } /* Blockquotes */ .markdown-content blockquote { border-left: 4px solid var(--color-primary, #3b82f6); padding-left: 1rem; margin: 1.5rem 0; color: var(--color-text-secondary, #9ca3af); font-style: italic; } /* Lists */ .markdown-content ul, .markdown-content ol { margin: 1.25rem 0 1.25rem 1.5rem; padding-left: 1rem; } .markdown-content ul { list-style-type: disc; } .markdown-content ol { list-style-type: decimal; } .markdown-content li { margin: 0.5rem 0; } .markdown-content li>ul, .markdown-content li>ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Horizontal Rule */ .markdown-content hr { border: none; border-top: 1px solid var(--color-border, #4b5563); margin: 2rem 0; } /* Markdown Content Styles - FORCE ATOM ONE DARK */ .markdown-content pre { display: block; overflow-x: auto; padding: 1em; background: #282c34 !important; /* Force Dark Background */ color: #abb2bf !important; /* Force Light Text */ border-radius: 0.5rem; margin-bottom: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; line-height: 1.5; } /* Ensure .hljs class shares the same styles if specific overrides exist */ .markdown-content pre.hljs { background: #282c34 !important; color: #abb2bf !important; } .markdown-content code { /* Inline code styles - adapt to theme */ background-color: rgba(var(--text-color), 0.1); padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; } /* Hard reset for code inside pre to prevent inline styles leaking */ .markdown-content pre code, .markdown-content pre.hljs code { background-color: transparent !important; padding: 0; border-radius: 0; font-size: inherit; color: inherit !important; border: none; box-shadow: none; } /* Hardcoded Syntax Highlighting Colors (Atom One Dark) */ .markdown-content .hljs-comment, .markdown-content .hljs-quote { color: #5c6370 !important; font-style: italic; } .markdown-content .hljs-doctag, .markdown-content .hljs-keyword, .markdown-content .hljs-formula { color: #c678dd !important; } .markdown-content .hljs-section, .markdown-content .hljs-name, .markdown-content .hljs-selector-tag, .markdown-content .hljs-deletion, .markdown-content .hljs-subst { color: #e06c75 !important; } .markdown-content .hljs-literal { color: #56b6c2 !important; } .markdown-content .hljs-string, .markdown-content .hljs-regexp, .markdown-content .hljs-addition, .markdown-content .hljs-attribute, .markdown-content .hljs-meta .hljs-string { color: #98c379 !important; } .markdown-content .hljs-attr, .markdown-content .hljs-variable, .markdown-content .hljs-template-variable, .markdown-content .hljs-type, .markdown-content .hljs-selector-class, .markdown-content .hljs-selector-attr, .markdown-content .hljs-selector-pseudo, .markdown-content .hljs-number { color: #d19a66 !important; } .markdown-content .hljs-symbol, .markdown-content .hljs-bullet, .markdown-content .hljs-link, .markdown-content .hljs-meta, .markdown-content .hljs-selector-id, .markdown-content .hljs-title { color: #61afef !important; } .markdown-content .hljs-emphasis { font-style: italic; } .markdown-content .hljs-strong { font-weight: bold; } .markdown-content .hljs-link { text-decoration: underline; } /* Emphasis */ .markdown-content em { font-style: italic; color: var(--color-text, #000000); } .markdown-content strong { font-weight: 700; color: var(--color-text, #000000); } /* Links */ .markdown-content a { color: var(--color-primary, #3b82f6); text-decoration: underline; } .markdown-content a:hover { color: var(--color-secondary, #60a5fa); } /* Images */ .markdown-content img { display: block; width: 100%; border-radius: 0.5rem; margin-top: 1rem; margin-bottom: 1rem; } /* Tables */ .markdown-content table { border-collapse: collapse; margin: 2rem 0; width: 100%; font-size: 0.95rem; } .markdown-content th, .markdown-content td { padding: 0.75rem 1rem; border: 1px solid var(--color-border, #4b5563); text-align: left; vertical-align: top; } .markdown-content th { background-color: var(--color-surface, #777777); font-weight: 600; color: var(--color-text, #f3f4f6); } /* Strikethrough */ .markdown-content del, .markdown-content s { text-decoration: line-through; color: var(--color-text-secondary, #9ca3af); } .headercontainer { padding-left: 2rem; padding-right: 2rem; } /* Standard HTML elements support */ .markdown-content sub { font-size: 0.8em; vertical-align: sub; } .markdown-content sup { font-size: 0.8em; vertical-align: super; } /* Details/Summary for collapsible content */ .markdown-content details { border: 1px solid var(--color-border, #d1d5db); border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; background-color: var(--color-surface, #f9fafb); } .markdown-content details summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text, #374151); } .markdown-content details[open] { background-color: var(--color-background, #f3f4f6); } .markdown-content details[open] summary { margin-bottom: 1rem; border-bottom: 1px solid var(--color-border, #d1d5db); padding-bottom: 0.5rem; } /* Footnotes */ .markdown-content sup a { font-size: 0.75em; vertical-align: super; color: var(--color-primary, #3b82f6); } .markdown-content .footnotes { font-size: 0.9rem; border-top: 1px solid var(--color-border, #4b5563); margin-top: 2rem; padding-top: 1rem; } .markdown-content .footnotes ol { list-style-type: decimal; margin-left: 1.5rem; } .markdown-content .footnotes li { margin: 0.5rem 0; } /* Standard alert/callout styling using blockquotes with emoji */ .markdown-content blockquote p:first-child:before { /* This will style blockquotes that start with emoji as callouts */ } /* You can use standard blockquotes for callouts: > ℹ️ **Info**: This is an info callout > ⚠️ **Warning**: This is a warning > ❌ **Error**: This is an error */ /* WYSIWYG Editor Styling */ .w-md-editor { background-color: white; } .w-md-editor-text-textarea, .w-md-editor-text { font-size: 14px !important; font-family: ui-monospace, SFMono-Regular, "Cascadia Code", "Roboto Mono", Menlo, Monaco, Consolas, "Noto Color Emoji", "Liberation Mono", "Courier New", monospace !important; } .w-md-editor-preview { background-color: white; } /* Custom toolbar styling */ .w-md-editor-toolbar { border-bottom: 1px solid #e5e7eb; background-color: #f9fafb; } .w-md-editor-toolbar-child button { color: #374151; } .w-md-editor-toolbar-child button:hover { background-color: #e5e7eb; } /* Editor content area */ .w-md-editor-text-container { border: none !important; } /* Preview styling to match our markdown content */ .w-md-editor-preview .wmde-markdown { padding: 16px; color: #374151; line-height: 1.75; } .w-md-editor-preview .wmde-markdown h1, .w-md-editor-preview .wmde-markdown h2, .w-md-editor-preview .wmde-markdown h3, .w-md-editor-preview .wmde-markdown h4, .w-md-editor-preview .wmde-markdown h5, .w-md-editor-preview .wmde-markdown h6 { color: #1f2937; font-weight: 700; } .w-md-editor-preview .wmde-markdown code { background-color: #f3f4f6; padding: 2px 4px; border-radius: 4px; font-size: 0.875em; } .w-md-editor-preview .wmde-markdown pre { background-color: #f3f4f6; border-radius: 8px; padding: 16px; } .w-md-editor-preview .wmde-markdown blockquote { border-left: 4px solid #3b82f6; padding-left: 16px; margin: 16px 0; font-style: italic; color: #6b7280; } .w-md-editor-preview .wmde-markdown table { border-collapse: collapse; width: 100%; margin: 16px 0; } .w-md-editor-preview .wmde-markdown table th, .w-md-editor-preview .wmde-markdown table td { border: 1px solid #d1d5db; padding: 8px 12px; text-align: left; } .w-md-editor-preview .wmde-markdown table th { background-color: #f9fafb; font-weight: 600; } /* Tab styling */ .w-md-editor-tab { background-color: #f3f4f6 !important; color: #6b7280 !important; border: 1px solid #d1d5db !important; } .w-md-editor-tab.active { background-color: white !important; color: #1f2937 !important; border-bottom-color: white !important; } /* Theme-aware utility classes */ .theme-bg { background-color: var(--color-background, #ffffff); } .theme-surface { background-color: var(--color-surface, #ffffff); } .theme-text { color: var(--color-text, #1f2937); } .theme-text-secondary { color: var(--color-text-secondary, #6b7280); } .theme-primary { color: var(--color-primary, #3b82f6); } .theme-bg-primary { background-color: var(--color-primary, #3b82f6); } .theme-secondary { color: var(--color-secondary, #8b5cf6); } .theme-accent { color: var(--color-accent, #10b981); } .theme-border { border-color: var(--color-border, #d1d5db); } /* Button variants */ .btn-theme-primary { background-color: var(--color-primary, #3b82f6); color: white; border: 1px solid var(--color-primary, #3b82f6); } .btn-theme-primary:hover { background-color: var(--color-secondary, #1d4ed8); border-color: var(--color-secondary, #1d4ed8); } .btn-theme-secondary { background-color: var(--color-secondary, #8b5cf6); color: white; border: 1px solid var(--color-secondary, #8b5cf6); } .btn-theme-secondary:hover { opacity: 0.9; } /* --- Image Comparison Styles --- */ .image-comparison-container { width: 100%; margin-top: 2rem; margin-bottom: 2rem; border-radius: 0.5rem; overflow: hidden; } .comparison-wrapper { position: relative; width: 100%; overflow: hidden; /* Aspect ratio is determined by the bottom image (the 'after' image) */ } /* The slider input is invisible but covers the whole area */ .comparison-slider { -webkit-appearance: none; appearance: none; background: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: ew-resize; margin: 0; z-index: 20; /* above overlay */ } .comparison-slider:focus { outline: none; } /* The vertical white line handle */ .slider-handle { pointer-events: none; /* Let clicks pass through to slider */ background-color: white; width: 2px; } /* --- Lightbox Styles --- */ .lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; } .lightbox-content { max-width: 95vw; max-height: 95vh; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); border-radius: 4px; animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 3rem; cursor: pointer; line-height: 1; z-index: 10000; opacity: 0.7; transition: opacity 0.2s; } .lightbox-close:hover { opacity: 1; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Flicker Animation for Scroll Sync */ @keyframes highlight-pulse-animation { 0% { background-color: rgba(59, 130, 246, 0.1); } 50% { background-color: rgba(59, 130, 246, 0.3); } 100% { background-color: transparent; } } .highlight-pulse { animation: highlight-pulse-animation 1.5s ease-out; border-radius: 4px; }