{"html":"

\n\n

School of the Wolf

\n\n

\n \n

\n\n

\n Class\n Witcher\n

\n Origin\n Kaer Morhen\n

\n Status\n Active\n

\n","css":".witcher-card-container {\n display: flex;\n justify-content: center;\n align-items: center;\n /* background-color: #0e0e10; */\n min-height: 30em; /* using em instead of vh */\n padding: 2em;\n font-family: serif;\n}\n\n.witcher-card {\n /* Scoped Variables */\n --wc-bg-dark: #121214;\n --wc-bg-light: #1e1e21;\n --wc-silver: #a8a8a8;\n --wc-silver-dark: #4a4a4a;\n --wc-gold: #cba874;\n --wc-eye-glow: #ff2a2a;\n --wc-magic-aura: rgba(205, 179, 128, 0.15);\n\n position: relative;\n width: 16em;\n height: 22em;\n background-color: var(--wc-bg-dark);\n border: 0.2em solid var(--wc-silver-dark);\n font-size: 16px; /* Base scale */\n font-family: \"Cinzel\", serif; /* Fallback safe */\n color: var(--wc-silver);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 1.5em;\n box-sizing: border-box;\n cursor: pointer;\n overflow: hidden;\n transition:\n transform 0.4s ease,\n box-shadow 0.4s ease,\n border-color 0.4s;\n\n /* Leather/Parchment Texture */\n background-image: radial-gradient(\n circle at 50% 30%,\n #2a2a2e,\n var(--wc-bg-dark) 70%\n ),\n repeating-linear-gradient(\n 45deg,\n rgba(0, 0, 0, 0.1) 0,\n rgba(0, 0, 0, 0.1) 2px,\n transparent 2px,\n transparent 4px\n );\n\n box-shadow:\n 0 1em 2em rgba(0, 0, 0, 0.8),\n inset 0 0 2em rgba(0, 0, 0, 0.9);\n}\n\n/* Background Runes (Hidden initially) */\n.witcher-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(\n circle at 50% 40%,\n var(--wc-magic-aura) 0%,\n transparent 60%\n );\n opacity: 0;\n transition: opacity 0.5s ease;\n z-index: 0;\n pointer-events: none;\n}\n\n/* Corner Decorations (CSS Shapes) */\n.witcher-card-corner {\n position: absolute;\n width: 2em;\n height: 2em;\n border: 0.15em solid var(--wc-gold);\n transition: all 0.4s ease;\n opacity: 0.6;\n z-index: 1;\n}\n\n.witcher-card-corner.top-left {\n top: 0.5em;\n left: 0.5em;\n border-right: none;\n border-bottom: none;\n}\n.witcher-card-corner.top-right {\n top: 0.5em;\n right: 0.5em;\n border-left: none;\n border-bottom: none;\n}\n.witcher-card-corner.bottom-left {\n bottom: 0.5em;\n left: 0.5em;\n border-right: none;\n border-top: none;\n}\n.witcher-card-corner.bottom-right {\n bottom: 0.5em;\n right: 0.5em;\n border-left: none;\n border-top: none;\n}\n\n/* Content Wrapper */\n.witcher-card-content {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 1em;\n}\n\n/* Title Styling */\n.witcher-card-title {\n text-transform: uppercase;\n letter-spacing: 0.15em;\n font-size: 0.9em;\n color: var(--wc-gold);\n border-bottom: 1px solid var(--wc-silver-dark);\n padding-bottom: 0.5em;\n width: 100%;\n text-align: center;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);\n}\n\n/* The Wolf Medallion Container */\n.witcher-card-icon {\n width: 8em;\n height: 8em;\n margin-top: 1em;\n filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.8));\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.witcher-card-icon svg {\n width: 100%;\n height: 100%;\n fill: var(--wc-silver);\n transition: fill 0.3s ease;\n}\n\n/* The Eyes (Targeted via class inside SVG) */\n.wolf-eyes {\n fill: #1a1a1a; /* Dark initially */\n transition:\n fill 0.2s ease,\n filter 0.2s ease;\n}\n\n/* Stats/Description Area */\n.witcher-card-details {\n margin-top: auto;\n width: 100%;\n font-size: 0.75em;\n color: #888;\n text-align: center;\n line-height: 1.6;\n}\n\n.witcher-card-stat {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid #333;\n padding: 0.4em 0;\n}\n\n.witcher-card-stat span:last-child {\n color: var(--wc-silver);\n}\n\n/* --- Hover Interaction --- */\n\n.witcher-card:hover {\n transform: translateY(-0.5em);\n box-shadow:\n 0 1.5em 3em rgba(0, 0, 0, 0.9),\n 0 0 1.5em rgba(203, 168, 116, 0.1); /* Subtle gold glow */\n border-color: var(--wc-gold);\n}\n\n.witcher-card:hover::before {\n opacity: 1; /* Show magical aura */\n}\n\n.witcher-card:hover .witcher-card-corner {\n width: 90%;\n height: 90%;\n opacity: 1;\n border-color: rgba(203, 168, 116, 0.3);\n /* This animation expands the corners to form a frame */\n}\n\n/* Medallion Reaction */\n.witcher-card:hover .witcher-card-icon {\n transform: scale(1.1);\n animation: medallionHum 0.1s infinite alternate; /* Vibrate */\n}\n\n.witcher-card:hover .witcher-card-icon svg {\n fill: #dcdcdc; /* Brighten silver */\n}\n\n.witcher-card:hover .wolf-eyes {\n fill: var(--wc-eye-glow);\n filter: drop-shadow(0 0 5px var(--wc-eye-glow));\n}\n\n.witcher-card:hover .witcher-card-title {\n color: #fff;\n text-shadow: 0 0 10px var(--wc-gold);\n}\n\n/* --- Focus State --- */\n.witcher-card:focus-visible {\n outline: 2px solid var(--wc-gold);\n outline-offset: 4px;\n}\n\n/* --- Animations --- */\n@keyframes medallionHum {\n 0% {\n transform: scale(1.1) translate(0, 0);\n }\n 100% {\n transform: scale(1.1) translate(1px, 1px);\n }\n}\n"}

green-starfish-22

👁 实时预览

📝 源代码