1 line
16 KiB
Plaintext
1 line
16 KiB
Plaintext
{"version":3,"sources":["src/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"main.612a6b84.css","sourceRoot":"..","sourcesContent":[":root {\n --color-bg: #ffffff;\n --color-card: #f8f9fa;\n --color-primary: #0066cc;\n --color-primary-hover: #0052a3;\n --color-danger: #dc3545;\n --color-warning: #856404;\n --color-warning-bg: #fff3cd;\n --color-content-bg: #f1f3f4;\n --color-border: #dee2e6;\n --color-text: #212529;\n --color-text-muted: #6c757d;\n --color-code-bg: #f8f9fa;\n --color-code-text: #0066cc;\n --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n --radius: 8px;\n --focus-outline: 2px solid #0066cc;\n --focus-outline-danger: 2px solid #dc3545;\n --focus-offset: 2px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n background: var(--color-bg);\n color: var(--color-text);\n min-height: 100vh;\n}\n\n.hero {\n text-align: center;\n margin-bottom: 4rem;\n padding: 3rem;\n background: var(--color-card);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--color-border);\n}\n\n.hero:focus-within {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\n.hero h1 {\n font-size: clamp(2rem, 5vw, 3.5rem);\n margin-bottom: 1.5rem;\n color: var(--color-primary);\n font-weight: 700;\n letter-spacing: -0.02em;\n}\n\n.hero .subtitle {\n font-size: 1.125rem;\n color: var(--color-text-muted);\n max-width: 700px;\n margin: 0 auto;\n line-height: 1.5;\n}\n\n.comparison-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin: 2rem 0;\n}\n\n.section {\n margin: 4rem 0;\n}\n\n.section-title {\n font-size: 2rem;\n margin-bottom: 2rem;\n padding: 1.5rem 0;\n text-align: center;\n color: var(--color-primary);\n position: relative;\n font-weight: 600;\n}\n\n.section-title::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 2px;\n background: var(--color-primary);\n}\n\n.column {\n background: var(--color-card);\n padding: 2rem;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--color-border);\n transition: box-shadow 0.2s ease;\n position: relative;\n}\n\n.column:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.column:focus-within {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\n.column.bad:focus-within {\n outline: var(--focus-outline-danger);\n}\n\n.column h3 {\n color: var(--color-text);\n border-bottom: 1px solid var(--color-border);\n padding-bottom: 1rem;\n margin-bottom: 2rem;\n font-size: 1.25rem;\n font-weight: 600;\n}\n\n.bad {\n border-left: 3px solid var(--color-danger);\n}\n\n.bad h3::before {\n content: '⚠️ ';\n}\n\n.bad button {\n background: var(--color-danger);\n}\n\n.bad button:hover {\n background: var(--color-danger);\n}\n\n.bad button:focus {\n outline: var(--focus-outline-danger);\n outline-offset: var(--focus-offset);\n}\n\n.good {\n border-left: 3px solid var(--color-primary);\n}\n\n.good h3::before {\n content: '✅ ';\n}\n\n.accessibility-note {\n background: var(--color-warning-bg);\n border: 1px solid #ffc107;\n color: var(--color-warning);\n padding: 1rem;\n border-radius: var(--radius);\n margin: 1.5rem 0;\n font-size: 0.875rem;\n}\n\n.code-block {\n /*display: none;*/\n background: var(--color-code-bg);\n color: var(--color-code-text);\n padding: 2rem 1.5rem 1rem;\n border-radius: var(--radius);\n overflow-x: auto;\n font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n font-size: 0.875rem;\n margin: 1.5rem 0;\n border: 1px solid var(--color-border);\n position: relative;\n}\n\n.code-block:focus {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\n.code-block::before {\n content: 'CODE';\n position: absolute;\n top: -6px;\n right: 15px;\n background: var(--color-primary);\n color: white;\n padding: 10px 8px 0;\n font-size: 0.7rem;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.pros-cons {\n margin: 1.5rem 0;\n}\n\n.pros-cons h4 {\n margin-bottom: 1rem;\n color: var(--color-text);\n font-size: 1rem;\n font-weight: 600;\n}\n\n.pros-cons ul {\n list-style: none;\n padding-left: 0;\n}\n\n.pros-cons li {\n padding: 0.5rem 0;\n padding-left: 1.5rem;\n position: relative;\n}\n\n.pros li::before {\n content: '✓';\n position: absolute;\n left: 0;\n color: var(--color-primary);\n font-weight: bold;\n}\n\n.cons li::before {\n content: '✗';\n position: absolute;\n left: 0;\n color: var(--color-danger);\n font-weight: bold;\n}\n\n/* Interactive Elements */\n.js-collapsible {\n color: white;\n cursor: pointer;\n padding: 12px 16px;\n border: none;\n text-align: left;\n outline: none;\n font-size: 1rem;\n border-radius: var(--radius);\n margin-bottom: 1rem;\n width: 100%;\n font-family: inherit;\n font-weight: 500;\n}\n\n.js-wrapper {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.js-content {\n display: none;\n background: var(--color-content-bg);\n border: 1px solid var(--color-border);\n border-radius: 0 0 var(--radius) var(--radius);\n margin-bottom: 1rem;\n}\n\n.js-content.active {\n display: block;\n padding: 0.5rem;\n}\n\n.js-content.active + .js-collapsible {\n border-radius: var(--radius) var(--radius) 0 0;\n margin-bottom: 0;\n}\n\ndetails {\n background: var(--color-card);\n border: 1px solid var(--color-border);\n border-radius: var(--radius);\n margin-bottom: 1rem;\n overflow: hidden;\n}\n\ndetails:focus-within {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\nsummary {\n background: var(--color-primary);\n color: white;\n padding: 12px 16px;\n cursor: pointer;\n font-size: 1rem;\n list-style: none;\n font-weight: 500;\n transition: all 0.2s ease;\n}\n\nsummary:hover {\n background: var(--color-primary-hover);\n}\n\nsummary:focus {\n outline: var(--focus-outline);\n outline-offset: -2px;\n}\n\nsummary::-webkit-details-marker {\n display: none;\n}\n\nsummary::before {\n content: '▶';\n margin-right: 8px;\n transition: transform 0.2s ease;\n display: inline-block;\n}\n\ndetails[open] summary::before {\n transform: rotate(90deg);\n}\n\ndetails > div {\n padding: 16px;\n background: var(--color-content-bg);\n}\n\n/* Modal Styles */\n.js-modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n z-index: 1000;\n}\n\n.js-modal-overlay.active {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.js-modal-content {\n margin: auto;\n background: var(--color-bg);\n padding: 2rem;\n border-radius: var(--radius);\n max-width: 500px;\n width: 90%;\n border: 1px solid var(--color-border);\n box-shadow: var(--shadow);\n}\n\n.js-modal-content:focus {\n outline: var(--focus-outline-danger);\n outline-offset: var(--focus-offset);\n}\n\ndialog {\n margin: auto;\n border: 1px solid var(--color-border);\n border-radius: var(--radius);\n padding: 2rem;\n background: var(--color-bg);\n color: var(--color-text);\n box-shadow: var(--shadow);\n max-width: 500px;\n width: 90vw;\n}\n\ndialog:focus {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\ndialog::backdrop {\n background: rgba(0, 0, 0, 0.6);\n}\n\n/* Form Styles */\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n color: var(--color-text);\n}\n\n.form-group input, .form-group textarea, .form-group select {\n width: 100%;\n padding: 10px 12px;\n border: 2px solid var(--color-border);\n border-radius: var(--radius);\n font-size: 1rem;\n background: var(--color-bg);\n color: var(--color-text);\n transition: all 0.2s ease;\n font-family: inherit;\n}\n\n.form-group input:focus, .form-group textarea:focus, .form-group select:focus {\n outline: var(--focus-outline);\n outline-offset: 2px;\n border-color: var(--color-border);\n}\n\n.form-group input:invalid {\n border-color: var(--color-danger);\n}\n\n.form-group input:valid {\n border-color: var(--color-primary);\n}\n\n.js-error {\n color: var(--color-danger);\n font-size: 0.875rem;\n margin-top: 0.5rem;\n display: none;\n}\n\n.js-error.active {\n display: block;\n}\n\n/* Progress Styles */\n.js-progress-container {\n width: 100%;\n background: var(--color-border);\n border-radius: 4px;\n height: 20px;\n margin: 1.5rem 0;\n overflow: hidden;\n}\n\n.js-progress-bar {\n height: 100%;\n background: var(--color-danger);\n width: 0;\n transition: width 0.3s ease;\n border-radius: 4px;\n}\n\nprogress {\n width: 100%;\n height: 20px;\n margin: 1.5rem 0;\n border-radius: 4px;\n border: none;\n background: var(--color-border);\n}\n\nprogress:focus {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\nprogress::-webkit-progress-bar {\n background-color: var(--color-border);\n border-radius: 4px;\n}\n\nprogress::-webkit-progress-value {\n background: var(--color-primary);\n border-radius: 4px;\n}\n\nprogress::-moz-progress-bar {\n background: var(--color-primary);\n border-radius: 4px;\n}\n\n/* Button Styles */\nbutton {\n background: var(--color-primary);\n color: white;\n border: none;\n padding: 10px 16px;\n border-radius: var(--radius);\n cursor: pointer;\n font-size: 1rem;\n margin: 0.5rem 0.5rem 0.5rem 0;\n font-weight: 500;\n transition: all 0.2s ease;\n font-family: inherit;\n}\n\nbutton:hover {\n background: var(--color-primary-hover);\n transform: translateY(-1px);\n}\n\nbutton:focus {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\nbutton:disabled {\n background: var(--color-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n/* Component Styles */\n.datalist-container {\n position: relative;\n}\n\ninput[list] {\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n background-position: right 12px center;\n background-repeat: no-repeat;\n background-size: 16px;\n padding-right: 36px;\n}\n\n.slider-container {\n margin: 2rem 0;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n border-radius: 3px;\n background: var(--color-border);\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]:focus {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--color-primary);\n cursor: pointer;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--color-primary);\n cursor: pointer;\n border: none;\n}\n\n.color-input {\n width: 50px;\n height: 32px;\n border: 1px solid var(--color-border);\n border-radius: var(--radius);\n cursor: pointer;\n}\n\n.color-input:focus {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\n.summary-box {\n margin-top: 4rem;\n padding: 2rem;\n background: var(--color-card);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--color-border);\n text-align: center;\n}\n\n.summary-box h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n color: var(--color-primary);\n font-weight: 600;\n}\n\n.zen-quote {\n font-style: italic;\n color: var(--color-text-muted);\n font-size: 1rem;\n margin-top: 1.5rem;\n border-left: 3px solid var(--color-primary);\n padding-left: 1rem;\n}\n\n@media (max-width: 768px) {\n .comparison-grid {\n grid-template-columns: 1fr;\n }\n\n body {\n padding: 1rem;\n }\n\n .hero {\n padding: 2rem;\n }\n\n .section-title {\n font-size: 1.75rem;\n }\n}\n\n/* Performance indicators */\n.perf-indicator {\n display: inline-block;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 0.75rem;\n font-weight: 600;\n margin-left: 8px;\n}\n\n.perf-fast {\n background: rgba(0, 102, 204, 0.1);\n color: var(--color-primary);\n}\n\n.perf-slow {\n background: rgba(220, 53, 69, 0.1);\n color: var(--color-danger);\n}\n"]} |