{"html":"

\n 01\n Select Strategy\n

\n\n

\n \n \n \n \n \n The Form\n \n\n \n \n \n \n \n The Function\n \n\n \n \n \n \n \n The Unity\n \n

\n\n

\n","css":".bauhaus-container {\n --ui-bg: #f2f0e9;\n --ui-text: #1a1a1a;\n --ui-accent: #e63946;\n --ui-border: #1a1a1a;\n\n background: var(--ui-bg);\n padding: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 250px;\n font-family: \"Inter\", \"Helvetica\", sans-serif;\n color: var(--ui-text);\n}\n\n.bauhaus-group {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n border-left: 8px solid var(--ui-border);\n padding-left: 24px;\n}\n\n.bauhaus-header {\n display: flex;\n align-items: baseline;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.bauhaus-header .num {\n font-size: 1.2rem;\n font-weight: 900;\n text-decoration: underline;\n text-underline-offset: 4px;\n}\n\n.bauhaus-header .title {\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n font-weight: 700;\n}\n\n.radio-options {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.radio-item {\n display: flex;\n align-items: center;\n cursor: pointer;\n position: relative;\n transition: transform 0.2s ease;\n}\n\n.radio-item:hover {\n transform: translateX(8px);\n}\n\n.radio-item input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.selector-box {\n width: 32px;\n height: 32px;\n border: 3px solid var(--ui-border);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n position: relative;\n background: transparent;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.shape {\n width: 0;\n height: 0;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n opacity: 0;\n}\n\n.shape-circle {\n border-radius: 50%;\n background: var(--ui-accent);\n}\n\n.shape-square {\n background: var(--bauhaus-blue);\n}\n\n.shape-triangle {\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 20px solid var(--bauhaus-yellow);\n background: transparent !important;\n}\n\n/* Checked States */\n.radio-item input:checked + .selector-box {\n background: var(--ui-border);\n}\n\n.radio-item input:checked + .selector-box .shape {\n opacity: 1;\n width: 18px;\n height: 18px;\n}\n\n.radio-item input:checked + .selector-box .shape-triangle {\n width: 0;\n height: 0;\n transform: translateY(-2px);\n}\n\n.label-text {\n font-size: 1.4rem;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: -0.02em;\n transition: color 0.3s ease;\n}\n\n.radio-item input:checked ~ .label-text {\n color: var(--ui-accent);\n}\n\n/* Bauhaus Decorative Elements */\n.bauhaus-decoration {\n position: absolute;\n top: -20px;\n right: -60px;\n width: 40px;\n height: 40px;\n pointer-events: none;\n}\n\n.line-v {\n position: absolute;\n width: 3px;\n height: 100px;\n background: var(--bauhaus-yellow);\n top: 0;\n right: 10px;\n}\n\n.line-h {\n position: absolute;\n width: 60px;\n height: 12px;\n background: var(--bauhaus-blue);\n bottom: -40px;\n right: -20px;\n z-index: -1;\n}\n"}

nasty-firefox-97

👁 实时预览

📝 源代码