Spaces:
Running on Zero
Running on Zero
| HEAD = """ | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Caveat:wght@400;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> | |
| """ | |
| JS = """ | |
| () => { | |
| const root = document.querySelector('.gradio-container'); | |
| if (!root) return; | |
| root.dataset.ready = 'true'; | |
| } | |
| """ | |
| CSS = """ | |
| /* ═══════════════════════════════════════════════ | |
| KNOWLEDGEMESH — CHALKBOARD CLASSROOM THEME | |
| Palette: Dark chalkboard green · Frosted glass · Warm chalk yellow · Neon chalk green | |
| Texture: Wood border, vignette board, chalk doodles | |
| ═══════════════════════════════════════════════ */ | |
| /* ══ PAGE BACKGROUND — Dark cozy classroom ══ */ | |
| .gradio-container { | |
| min-height: 100vh !important; | |
| background: radial-gradient(circle at center, #181715 0%, #0a0a09 100%) !important; | |
| color: #f8fafc !important; | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important; | |
| padding: 20px 10px !important; | |
| } | |
| /* ══ NUKE GRADIO STYLING OVERRIDES ══ */ | |
| .gradio-container *, | |
| .gradio-container .block, | |
| .gradio-container .form, | |
| .gradio-container .wrap, | |
| .gradio-container .gap, | |
| .gradio-container .container, | |
| .gradio-container .svelte-1f354aw, | |
| .gradio-container .input-wrap, | |
| .gradio-container .component-wrapper, | |
| .gradio-container [data-testid], | |
| .gradio-container .lg, | |
| .gradio-container .sm, | |
| .gradio-container .stretch { | |
| background-color: transparent !important; | |
| color: inherit; | |
| } | |
| /* ══ CHALKBOARD CONTAINER (FRAME & SURFACE) ══ */ | |
| #kh-shell { | |
| position: relative !important; | |
| max-width: 1200px !important; | |
| margin: 30px auto !important; | |
| padding: 40px 40px 60px 40px !important; | |
| /* Wood Frame border styling */ | |
| border: 14px solid #3d2314 !important; | |
| border-radius: 12px !important; | |
| /* Multi-layered shadows for frame bevel and board depth */ | |
| box-shadow: | |
| 0 15px 35px rgba(0,0,0,0.85), | |
| inset 0 0 20px rgba(0,0,0,0.9), | |
| inset 0 0 0 1px #4f2f1c, | |
| 0 0 0 1px #1d1009 !important; | |
| /* Multiple backgrounds: | |
| 1. Hanging lamp doodle (top right) | |
| 2. Idea lightbulb (top center) | |
| 3. Atom doodle (left) | |
| 4. Neural Network sketch (left, lower) | |
| 5. Mathematical graph (bottom left) | |
| 6. Equations & math doodle (right) | |
| 7. Tiny star/arrow doodle (top left) | |
| 8. Chalkboard green vignette surface | |
| */ | |
| background-image: | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='180' viewBox='0 0 80 180'><path d='M 40,0 L 40,90' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1.5'/><path d='M 25,90 L 55,90 L 60,105 L 20,105 Z' fill='rgba(255,255,255,0.04)' stroke='rgba(255,255,255,0.22)' stroke-width='1.5' stroke-linejoin='round'/><circle cx='40' cy='113' r='8' fill='rgba(255,255,220,0.12)' stroke='rgba(255,255,255,0.25)' stroke-width='1.5'/><path d='M 38,110 L 40,115 L 42,110' fill='none' stroke='rgba(255,255,220,0.5)' stroke-width='1'/><path d='M 20,125 L 10,135 M 30,128 L 25,140 M 50,128 L 55,140 M 60,125 L 70,135' fill='none' stroke='rgba(255,255,220,0.18)' stroke-width='1' stroke-linecap='round'/></svg>"), | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='70' viewBox='0 0 60 70'><path d='M 30,10 C 20,10 15,20 15,30 C 15,40 25,45 25,50 L 35,50 C 35,45 45,40 45,30 C 45,20 40,10 30,10 Z M 25,50 L 35,50 M 27,54 L 33,54 M 29,58 L 31,58' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/><path d='M 10,25 L 5,22 M 12,15 L 7,10 M 30,5 L 30,0 M 48,15 L 53,10 M 50,25 L 55,22' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1' stroke-linecap='round'/></svg>"), | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><ellipse cx='50' cy='50' rx='42' ry='12' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2' transform='rotate(30 50 50)'/><ellipse cx='50' cy='50' rx='42' ry='12' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2' transform='rotate(-30 50 50)'/><ellipse cx='50' cy='50' rx='42' ry='12' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2' transform='rotate(90 50 50)'/><circle cx='50' cy='50' r='5' fill='rgba(255,255,255,0.08)'/></svg>"), | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='120' viewBox='0 0 90 120'><circle cx='20' cy='20' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='20' cy='60' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='20' cy='100' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='70' cy='40' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='70' cy='80' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><line x1='24' y1='20' x2='66' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='20' x2='66' y2='80' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='60' x2='66' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='60' x2='66' y2='80' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='100' x2='66' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='100' x2='66' y2='80' stroke='rgba(255,255,255,0.03)' stroke-width='1'/></svg>"), | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='80' viewBox='0 0 90 80'><path d='M 10,10 L 10,70 L 80,70' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><path d='M 10,60 Q 30,30 50,50 T 80,20' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2' stroke-dasharray='3,3'/><path d='M 10,50 Q 25,20 45,30 T 75,10' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.2'/></svg>"), | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><path d='M 90,20 L 93,27 L 100,27 L 95,31 L 97,38 L 90,34 L 83,38 L 85,31 L 80,27 L 87,27 Z' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.2'/><text x='10' y='70' font-family=''Gochi Hand', cursive' font-size='15' fill='rgba(255,255,255,0.07)' transform='rotate(-5 10 70)'>e^(i.pi) %2B 1 = 0</text><path d='M 20,90 L 50,90 M 50,90 L 45,86 M 50,90 L 45,94' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/><path d='M 20,90 L 40,110 M 40,110 L 35,110 M 40,110 L 40,105' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/><text x='55' y='93' font-family=''Gochi Hand', cursive' font-size='12' fill='rgba(255,255,255,0.06)'>F</text></svg>"), | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M 10,20 Q 25,5 40,20 Q 55,35 40,50 Q 25,65 15,50' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.5' stroke-linecap='round'/></svg>"), | |
| radial-gradient(circle at 50% 30%, #1c3d28 0%, #0d1e13 100%) !important; | |
| background-position: | |
| right 35px top 0px, | |
| center top 20px, | |
| left 20px top 220px, | |
| left 30px top 450px, | |
| left 40px top 650px, | |
| right 30px top 350px, | |
| left 30px top 60px, | |
| center center !important; | |
| background-repeat: no-repeat !important; | |
| background-size: auto, auto, auto, auto, auto, auto, auto, cover !important; | |
| overflow: visible !important; | |
| } | |
| } | |
| /* ══ ROOM TAG ══ */ | |
| .kh-room-tag { | |
| position: absolute; | |
| top: -12px; | |
| left: 35px; | |
| background: #142d1c !important; | |
| border: 1.5px solid rgba(94, 189, 114, 0.45) !important; | |
| color: #5ebd72 !important; | |
| padding: 4px 14px; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.15rem !important; | |
| border-radius: 6px !important; | |
| transform: rotate(-1.5deg) !important; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| /* ══ HEADER & TYPOGRAPHY ══ */ | |
| #kh-title { | |
| padding: 10px 0 15px !important; | |
| border-bottom: 2px dashed rgba(255, 255, 255, 0.12) !important; | |
| background: transparent !important; | |
| text-align: left; | |
| } | |
| #kh-title h1 { | |
| color: #ffffff !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: clamp(2.8rem, 6vw, 4.8rem) !important; | |
| font-weight: 400 !important; | |
| line-height: 1.0; | |
| margin: 0 0 6px !important; | |
| text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0,0,0,0.6) !important; | |
| } | |
| #kh-title p { | |
| color: rgba(255, 255, 255, 0.75) !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.35rem !important; | |
| margin: 0 !important; | |
| letter-spacing: 0.03em !important; | |
| } | |
| /* ══ CODE CHIPS ══ */ | |
| .kh-chip-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin: 14px 0 24px !important; | |
| background: transparent !important; | |
| } | |
| .kh-chip { | |
| border: 1px solid rgba(255, 255, 255, 0.15) !important; | |
| border-radius: 999px !important; | |
| padding: 4px 12px !important; | |
| color: rgba(255, 255, 255, 0.7) !important; | |
| background: rgba(255, 255, 255, 0.03) !important; | |
| font-size: 0.82rem !important; | |
| font-weight: 500 !important; | |
| } | |
| .kh-chip code { | |
| color: #5ebd72 !important; | |
| background: rgba(94, 189, 114, 0.08) !important; | |
| border: 1px solid rgba(94, 189, 114, 0.2) !important; | |
| border-radius: 4px; | |
| padding: 1px 4px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 0.85em; | |
| } | |
| /* ══ CHALKBOARD TABS NAVIGATION ══ */ | |
| .tabs { | |
| margin-top: 10px !important; | |
| border: none !important; | |
| } | |
| .tab-nav { | |
| border-bottom: 2px dashed rgba(255, 255, 255, 0.15) !important; | |
| margin-bottom: 22px !important; | |
| gap: 12px !important; | |
| background: transparent !important; | |
| } | |
| .tab-nav button { | |
| color: rgba(255, 255, 255, 0.55) !important; | |
| background: transparent !important; | |
| border: none !important; | |
| border-radius: 0 !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.45rem !important; | |
| font-weight: normal !important; | |
| padding: 6px 20px !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .tab-nav button:hover { | |
| color: #ffffff !important; | |
| text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important; | |
| } | |
| .tab-nav button.selected { | |
| color: #ffffff !important; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important; | |
| border-bottom: 3px solid #5ebd72 !important; | |
| } | |
| /* ══ FROSTED GLASS CARDS ══ */ | |
| .kh-panel { | |
| background: rgba(255, 255, 255, 0.038) !important; | |
| backdrop-filter: blur(12px) !important; | |
| -webkit-backdrop-filter: blur(12px) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.09) !important; | |
| border-radius: 12px !important; | |
| padding: 24px !important; | |
| box-shadow: | |
| 0 8px 32px 0 rgba(0, 0, 0, 0.28), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; | |
| color: #f8fafc !important; | |
| margin-bottom: 15px !important; | |
| } | |
| .kh-panel h3 { | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.6rem !important; | |
| font-weight: normal !important; | |
| color: #ffffff !important; | |
| margin-top: 0 !important; | |
| margin-bottom: 8px !important; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.4) !important; | |
| } | |
| .kh-subhead { | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.15rem !important; | |
| color: rgba(255, 255, 255, 0.55) !important; | |
| line-height: 1.4 !important; | |
| margin-bottom: 16px !important; | |
| } | |
| /* ══ INPUTS & TEXTAREAS ══ */ | |
| textarea, | |
| input[type="text"], | |
| input[type="number"], | |
| [data-testid="textbox"] input, | |
| [data-testid="textbox"] textarea { | |
| background: rgba(0, 0, 0, 0.28) !important; | |
| color: #f8fafc !important; | |
| border: 1px solid rgba(255, 255, 255, 0.14) !important; | |
| border-radius: 8px !important; | |
| padding: 10px 14px !important; | |
| font-size: 0.94rem !important; | |
| font-family: Inter, ui-sans-serif, sans-serif !important; | |
| box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| textarea:focus, | |
| input[type="text"]:focus, | |
| [data-testid="textbox"] input:focus, | |
| [data-testid="textbox"] textarea:focus { | |
| border-color: rgba(94, 189, 114, 0.5) !important; | |
| box-shadow: | |
| 0 0 8px rgba(94, 189, 114, 0.25), | |
| inset 0 2px 4px rgba(0,0,0,0.5) !important; | |
| outline: none !important; | |
| } | |
| textarea::placeholder, | |
| input::placeholder { | |
| color: rgba(255, 255, 255, 0.38) !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.18rem !important; | |
| } | |
| /* Custom styles for Gradio form labels */ | |
| .kh-panel label span, | |
| .kh-panel .label-wrap span { | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.15rem !important; | |
| font-weight: normal !important; | |
| margin-bottom: 4px !important; | |
| } | |
| /* ══ UPLOAD DRAG/DROP FILE BLOCK ══ */ | |
| .upload-container, | |
| .file-preview, | |
| [data-testid="file"], | |
| .file-upload { | |
| background: rgba(0, 0, 0, 0.2) !important; | |
| border: 2px dashed rgba(255, 255, 255, 0.14) !important; | |
| border-radius: 8px !important; | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| padding: 14px !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.18rem !important; | |
| transition: all 0.2s ease !important; | |
| text-align: center; | |
| } | |
| .upload-container:hover { | |
| border-color: rgba(94, 189, 114, 0.45) !important; | |
| background: rgba(94, 189, 114, 0.04) !important; | |
| } | |
| .upload-container *, .file-preview * { | |
| background: transparent !important; | |
| color: rgba(255, 255, 255, 0.55) !important; | |
| } | |
| /* ══ BUTTONS ══ */ | |
| /* Primary Button — Warm Chalk Yellow, Slight Glow */ | |
| button.primary, | |
| button[variant="primary"], | |
| .primary { | |
| min-height: 42px; | |
| background: #d9b84a !important; | |
| color: #1c1605 !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.38rem !important; | |
| font-weight: bold !important; | |
| padding: 8px 24px !important; | |
| box-shadow: 0 0 15px rgba(217, 184, 74, 0.32) !important; | |
| cursor: pointer !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| button.primary:hover { | |
| background: #e4c45a !important; | |
| box-shadow: 0 0 22px rgba(217, 184, 74, 0.5) !important; | |
| transform: translateY(-1.5px) !important; | |
| } | |
| button.primary:active { | |
| transform: translateY(0.5px) !important; | |
| } | |
| /* Secondary Button — Neon Chalk Green Outline */ | |
| button.secondary, | |
| button[variant="secondary"], | |
| .secondary { | |
| min-height: 42px; | |
| background: transparent !important; | |
| color: #5ebd72 !important; | |
| border: 2px dashed #5ebd72 !important; | |
| border-radius: 8px !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.38rem !important; | |
| font-weight: bold !important; | |
| padding: 6px 22px !important; | |
| cursor: pointer !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| button.secondary:hover { | |
| background: rgba(94, 189, 114, 0.08) !important; | |
| box-shadow: 0 0 12px rgba(94, 189, 114, 0.35) !important; | |
| border-style: solid !important; | |
| } | |
| /* ══ PIPELINE STATUS WATERMARK ══ */ | |
| #kh-status { | |
| min-height: 100px; | |
| color: #ffffff !important; | |
| padding: 10px !important; | |
| } | |
| #kh-status h3 { | |
| color: #d9b84a !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.38rem !important; | |
| margin-top: 0; | |
| } | |
| #kh-status p { | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.25rem !important; | |
| color: rgba(255, 255, 255, 0.85) !important; | |
| line-height: 1.4 !important; | |
| } | |
| #kh-status code { | |
| color: #5ebd72 !important; | |
| background: rgba(94, 189, 114, 0.1) !important; | |
| border: 1px dashed rgba(94, 189, 114, 0.25) !important; | |
| } | |
| /* ══ STAT BOXES (INGEST STATS) ══ */ | |
| .kh-stat { | |
| border: 1px solid rgba(255,255,255,0.08) !important; | |
| border-radius: 8px !important; | |
| padding: 8px 12px !important; | |
| background: rgba(0,0,0,0.18) !important; | |
| } | |
| /* ══ PREVIEW & METADATA SECTIONS ══ */ | |
| #kh-text-preview textarea { | |
| min-height: 400px !important; | |
| font-family: "JetBrains Mono", monospace !important; | |
| font-size: 0.86rem !important; | |
| background: rgba(0,0,0,0.3) !important; | |
| color: #e2e8f0 !important; | |
| } | |
| #kh-search-results, #kh-answer, #kh-reasoning { | |
| min-height: 180px; | |
| background: rgba(0, 0, 0, 0.24) !important; | |
| border: 1px solid rgba(255,255,255,0.08) !important; | |
| border-radius: 8px !important; | |
| padding: 16px !important; | |
| color: #f1f5f9 !important; | |
| } | |
| #kh-search-results h3 { | |
| color: #5ebd72 !important; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.35rem !important; | |
| margin-top: 10px !important; | |
| } | |
| #kh-reasoning { | |
| font-family: "JetBrains Mono", monospace !important; | |
| font-size: 0.85rem !important; | |
| color: #94a3b8 !important; | |
| } | |
| /* ══ PROSE / MARKDOWN INTERNALS ══ */ | |
| .prose, .markdown, | |
| .prose *, .markdown * { | |
| color: rgba(255, 255, 255, 0.85) !important; | |
| background: transparent !important; | |
| } | |
| .prose strong, .markdown strong { | |
| color: #ffffff !important; | |
| } | |
| .prose h3, .markdown h3 { | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; | |
| font-size: 1.38rem !important; | |
| color: #ffffff !important; | |
| } | |
| code { | |
| color: #5ebd72 !important; | |
| background: rgba(94,189,114,0.08) !important; | |
| border: 1px solid rgba(94,189,114,0.2) !important; | |
| border-radius: 4px; | |
| padding: 1px 4px; | |
| font-family: "JetBrains Mono", monospace; | |
| } | |
| /* ══ RETRIEVE COLUMN WATERMARK & INDICATORS ══ */ | |
| .kh-retrieve-status { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 15px; | |
| padding: 0 6px; | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif; | |
| font-size: 1.25rem; | |
| color: rgba(255,255,255,0.55); | |
| } | |
| .kh-online-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .kh-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.2); | |
| display: inline-block; | |
| } | |
| .kh-dot.green { | |
| background: #5ebd72; | |
| box-shadow: 0 0 6px #5ebd72; | |
| } | |
| .kh-brackets { | |
| font-size: 1.6rem; | |
| color: rgba(255, 255, 255, 0.35); | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| /* ══ BOTTOM TRAY & COLORED CHALK PIECES ══ */ | |
| #kh-bottom-container { | |
| margin-top: 15px !important; | |
| background: transparent !important; | |
| } | |
| .kh-bottom-tray { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| padding: 10px 10px 0 10px; | |
| position: relative; | |
| } | |
| /* Wooden Tray Ledge below the board frame */ | |
| .kh-bottom-tray::before { | |
| content: ""; | |
| position: absolute; | |
| bottom: -32px; | |
| left: -40px; | |
| right: -40px; | |
| height: 13px; | |
| background: linear-gradient(to bottom, #6d3f27, #442516); | |
| border-radius: 2px; | |
| box-shadow: | |
| 0 10px 18px rgba(0, 0, 0, 0.65), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.12); | |
| z-index: 5; | |
| } | |
| .kh-chalks { | |
| display: flex; | |
| gap: 10px; | |
| position: absolute; | |
| bottom: -31px; | |
| left: 20px; | |
| z-index: 6; | |
| } | |
| .kh-chalk { | |
| width: 30px; | |
| height: 7px; | |
| border-radius: 2px; | |
| box-shadow: 1px 1px 2px rgba(0,0,0,0.3); | |
| } | |
| .kh-chalk.white { | |
| background: #f1f5f9; | |
| transform: rotate(2deg); | |
| } | |
| .kh-chalk.yellow { | |
| background: #e2c362; | |
| transform: rotate(-3deg); | |
| } | |
| .kh-chalk.purple { | |
| background: #d8b4fe; | |
| transform: rotate(5deg); | |
| } | |
| .kh-watermark { | |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif; | |
| font-size: 1.15rem; | |
| color: rgba(255, 255, 255, 0.35); | |
| margin-bottom: -15px; | |
| z-index: 6; | |
| } | |
| /* ══ SCROLLBARS ══ */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); } | |
| ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } | |
| /* ══ RESPONSIVE ══ */ | |
| @media (max-width: 768px) { | |
| #kh-shell { | |
| padding: 25px 20px 45px 20px !important; | |
| border-width: 10px !important; | |
| margin: 15px auto !important; | |
| } | |
| .kh-bottom-tray::before { | |
| left: -20px; | |
| right: -20px; | |
| } | |
| #kh-title h1 { font-size: 2.3rem !important; } | |
| } | |
| """ | |