diff --git a/submissions/examples/magnetic-pull-accordion-minimalist-33140/README.md b/submissions/examples/magnetic-pull-accordion-minimalist-33140/README.md new file mode 100644 index 0000000000..0ca0e854b7 --- /dev/null +++ b/submissions/examples/magnetic-pull-accordion-minimalist-33140/README.md @@ -0,0 +1,8 @@ +# Magnetic Pull Accordion — Minimalist Tech + +A highly lightweight, dependency-free CSS accordion featuring a micro-interaction pull layout model designed for minimalist developer layouts. + +## Implementation Details +- **Kinetic Pull Displacement**: Utilizes coordinated transform baselines to transition inner text blocks up from an offset scale value. +- **Pure-CSS State Engine**: Toggles expand states using standard radio input groupings. +- **Performance Optimized**: Computes transforms directly on the compositing layer to bypass render paint pipelines. \ No newline at end of file diff --git a/submissions/examples/magnetic-pull-accordion-minimalist-33140/demo.html b/submissions/examples/magnetic-pull-accordion-minimalist-33140/demo.html new file mode 100644 index 0000000000..4d9c39d937 --- /dev/null +++ b/submissions/examples/magnetic-pull-accordion-minimalist-33140/demo.html @@ -0,0 +1,52 @@ + + + + + + Magnetic Pull Accordion - Minimalist Tech + + + + + +
+
+ SPEC_REVISION // AX-33140 +

CORE MODULE ENVIRONMENT

+
+ +
+ +
+ + +
+
+

Deploying end-to-end encryption schemas across edge infrastructure nodes. Direct traffic channels map safely into runtime secure zones without persistent socket caching dependencies.

+
+
+
+ + +
+ + +
+
+

Dynamic block sizing arrays active across isolated volume paths. Over-provisioning bounds hold stable underneath high IOPS read-write performance metrics.

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/submissions/examples/magnetic-pull-accordion-minimalist-33140/style.css b/submissions/examples/magnetic-pull-accordion-minimalist-33140/style.css new file mode 100644 index 0000000000..cf104e0006 --- /dev/null +++ b/submissions/examples/magnetic-pull-accordion-minimalist-33140/style.css @@ -0,0 +1,117 @@ +body { + background: #0d0e12; + color: #e3e6ed; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + padding: 60px 20px; + margin: 0; +} + +.tech-layout { + max-width: 580px; + margin: 0 auto; +} + +.tech-header { + margin-bottom: 28px; +} + +.tech-serial { + color: #00fa9a; + font-family: monospace; + font-size: 12px; + letter-spacing: 1px; +} + +h2 { + margin: 4px 0 0 0; + font-size: 22px; + font-weight: 700; + letter-spacing: -0.5px; +} + +.magnetic-accordion { + border-top: 1px solid #1f2330; +} + +.accordion-row { + border-bottom: 1px solid #1f2330; +} + +.accordion-row input[type="radio"] { + display: none; +} + +.row-trigger { + display: flex; + align-items: center; + padding: 22px 8px; + cursor: pointer; + user-select: none; + transition: background 0.2s ease; +} + +.row-trigger:hover { + background: #14161f; +} + +.row-num { + font-family: monospace; + color: #616982; + margin-right: 16px; + font-size: 14px; +} + +.row-label { + flex-grow: 1; + font-size: 14px; + font-weight: 600; + letter-spacing: 0.5px; + transition: color 0.25s ease; +} + +.row-arrow { + width: 6px; + height: 6px; + border-right: 2px solid #4d546a; + border-bottom: 2px solid #4d546a; + transform: rotate(-45deg); + transition: transform 0.3s cubic-bezier(0.25, 1.4, 0.45, 1), border-color 0.25s ease; +} + +.row-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1); +} + +.pull-inner-container { + padding: 4px 8px 24px 40px; + opacity: 0; + transform: translateY(30px) scale(0.97); + transition: transform 0.45s cubic-bezier(0.25, 1.4, 0.45, 1), opacity 0.3s ease; +} + +.pull-inner-container p { + margin: 0; + font-size: 13px; + line-height: 1.6; + color: #8a92a6; +} + +input[type="radio"]:checked ~ .row-content { + max-height: 140px; +} + +input[type="radio"]:checked ~ .row-content .pull-inner-container { + opacity: 1; + transform: translateY(0) scale(1); +} + +input[type="radio"]:checked ~ .row-trigger .row-label { + color: #00fa9a; +} + +input[type="radio"]:checked ~ .row-trigger .row-arrow { + transform: rotate(45deg); + border-color: #00fa9a; +} \ No newline at end of file