{"html":"

\n Inspection Point\n\n

\n\n

\n LITH-09\n Monolithic.Slate.Slab.Active\n

\n\n

\n","css":"/* body {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n overflow: hidden;\n font-family: 'Inter', sans-serif;\n} */\n\n/* Credit : Mughal.Dev */\n.tectonic-trigger {\n position: relative;\n cursor: crosshair;\n padding: 12px 24px;\n background: #0f1115;\n border: 1px solid var(--slate-edge);\n color: #64748b;\n font-size: 0.75rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n transition: all 0.3s ease;\n z-index: 10;\n}\n\n.tectonic-trigger:hover {\n border-color: #fff;\n color: #fff;\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);\n}\n\n.slab-tooltip {\n position: absolute;\n bottom: 150%;\n left: 50%;\n transform: translateX(-50%) translateY(10px);\n pointer-events: none;\n opacity: 0;\n visibility: hidden;\n transition:\n transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),\n opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n white-space: nowrap;\n}\n\n.slab-stack {\n position: relative;\n filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.8));\n}\n\n.slab-layer {\n position: absolute;\n inset: 0;\n background: #0f1115;\n border: 1px solid #333a45;\n transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.layer-bottom {\n transform: translate(8px, 8px);\n background: #080808;\n z-index: 1;\n}\n\n.layer-mid {\n transform: translate(4px, 4px);\n background: #141414;\n z-index: 2;\n}\n\n.layer-top {\n position: relative;\n z-index: 3;\n background: #1e2228;\n padding: 10px 18px;\n border: 1px solid var(--slate-edge);\n display: flex;\n align-items: center;\n gap: 12px;\n overflow: hidden;\n}\n\n.layer-top::before {\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0.03;\n pointer-events: none;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='://www.w3.org/2000/svg'%3ExternalIcon%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n}\n\n.layer-top::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent\n );\n}\n\n.mono-tag {\n font-family: \"JetBrains Mono\", monospace;\n font-size: 0.65rem;\n color: #64748b;\n background: rgba(0, 0, 0, 0.3);\n padding: 2px 6px;\n border-left: 2px solid #64748b;\n}\n\n.slab-text {\n color: #e2e8f0;\n font-size: 0.85rem;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.tectonic-trigger:hover .slab-tooltip {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n}\n\n.tectonic-trigger:hover .layer-bottom {\n transform: translate(12px, 12px);\n}\n\n.tectonic-trigger:hover .layer-mid {\n transform: translate(6px, 6px);\n}\n\n.slab-arrow {\n position: absolute;\n bottom: -6px;\n left: 50%;\n width: 12px;\n height: 12px;\n background: #0f1115;\n border-right: 1px solid var(--slate-edge);\n border-bottom: 1px solid var(--slate-edge);\n transform: translateX(-50%) rotate(45deg);\n z-index: 0;\n}\n"}

new-mouse-58

👁 实时预览

📝 源代码