diff --git a/submissions/examples/ease-text-glitch-effect/README.md b/submissions/examples/ease-text-glitch-effect/README.md new file mode 100644 index 00000000..3074064b --- /dev/null +++ b/submissions/examples/ease-text-glitch-effect/README.md @@ -0,0 +1,66 @@ +# Modern CSS Text Glitch Effect Component + +A high-performance, lightweight digital glitch and chromatic aberration effect built entirely with pure HTML and CSS. It supports three distinct variants: a periodic display headline, an interactive hover-triggered button, and a continuous micro-vibrating terminal status bar. + +--- + +## 1. What does this do? +This component simulates digital screen interference, signal failure, and chromatic aberration (cyan/magenta color displacement). It features: +- **Zero JavaScript**: Animates clip-paths, translations, and colors using pure CSS keyframes. +- **Burst-Style Loop (Dormant Periods)**: Unlike common glitches that flicker non-stop, the main display text remains static and 100% readable for 85% of the loop cycle. It glitch-flickers only in brief, high-impact bursts, maintaining readability. +- **Hover Trigger Mode**: Triggers a rapid visual distortion and offset aberration only when the cursor hovers over buttons or links, providing interactive tactile feedback. +- **Low-Intensity Micro-Glitch**: A continuous, low-amplitude glitch suitable for dashboard indicators, monospaced logs, and HUD overlays. +- **Adaptive Theme Support**: Automatically adapts to light and dark themes using built-in CSS variables. + +--- + +## 2. How is it used? + +### Layout A: Periodic Burst Glitch Headline +Place the target word inside an element with `.ease-glitch-title` and duplicate it in the `data-text` attribute. This attribute is read by the CSS pseudo-elements (`::before` and `::after`) to align the cyan and magenta layers: + +```html +

+ NEO-TOKYO 2088 +

+``` + +### Layout B: Interactive Glitch Button (Hover Triggered) +To create a button that glitches on hover, apply the `.ease-glitch-btn` class and mirror the text in `data-text`: + +```html + +``` + +### Layout C: Continuous Monospace Tag +To apply a low-intensity, persistent terminal glitch, use the `.ease-glitch-terminal-text` class: + +```html +
+ + SYS_SECURE_CORE: ACTIVE + +
+``` + +--- + +## Class Catalog + +| Class Name | Type | Description | +| :--- | :--- | :--- | +| `.ease-glitch-title` | Element | Main display title with a periodic looping burst glitch (6s cycle). | +| `.ease-glitch-btn` | Button | Interactive button that glitches and vibrates on cursor hover. | +| `.ease-glitch-terminal-text` | Element | Monospaced text running a continuous, low-intensity micro-glitch. | +| `.terminal-bg` | Container | Card container with scanline filters simulating a glowing retro monitor. | + +--- + +## 3. Why is it useful? +1. **Perfect Text Readability**: Confining the primary loop glitch to brief 0.2-second bursts ensures the text remains crisp and readable. This makes it suitable for headlines and body tags. +2. **High-Performance rendering**: The CSS overlays use `clip-path: inset(100% 0 0 0)` and `opacity: 0` during quiet phases. This prevents the browser from rendering or blending overlapping text except during active glitch moments, keeping repaint cycles at a minimum. +3. **No Image Assets**: Chromatic aberrations are drawn on the fly by offsetting text layers in CSS, meaning no heavy image loaders or asset requests are needed. +4. **Universal Background Compatibility**: Since the pseudo-elements use clip-paths rather than background masks, the glitch effects overlay cleanly on top of transparent cards, rich image hero banners, and background videos. +5. **Reduced Motion Compliant**: The stylesheet honors browser preferences by checking `@media (prefers-reduced-motion: reduce)`, immediately turning off all flashing, translations, and clipping to accommodate motion-sensitive users. diff --git a/submissions/examples/ease-text-glitch-effect/demo.html b/submissions/examples/ease-text-glitch-effect/demo.html new file mode 100644 index 00000000..6144882d --- /dev/null +++ b/submissions/examples/ease-text-glitch-effect/demo.html @@ -0,0 +1,98 @@ + + + + + + Text Glitch Effect - EaseMotion CSS + + + + + + + + + + + +
+ + +
+

Text Glitch Effect

+

A CSS-only, high-performance digital glitch and chromatic aberration effect. Features realistic periodic bursts, interactive hover glitches, and scanlines without JavaScript.

+
+ + +
+
+ Theme +
+ + +
+
+
+ + +
+ + +
+
+ Hero Headline +

Periodic Burst Glitch

+
+
+ +

NEO-TOKYO 2088

+
+
+

Ideal for game titles and landing headers. Remains clean and 100% readable for 85% of the loop, then twitches in sudden high-impact digital interference slices.

+
+
+ + +
+
+ Interactive UI +

Hover Glitch Trigger

+
+
+ +
+
+

Triggers chromatic aberration, digital offset, and vibration animations only on cursor hover. Provides high-end interactive feedback for gaming sites.

+
+
+ + +
+
+ Console Status +

Continuous Micro-Glitch

+
+
+
+ SYS_SECURE_CORE: CRITICAL + _ +
+
+
+

A continuous, low-amplitude vibration and horizontal slicing effect. Ideal for background HUDs, security indicators, and tech interfaces.

+
+
+ +
+ + + + +
+ + + diff --git a/submissions/examples/ease-text-glitch-effect/style.css b/submissions/examples/ease-text-glitch-effect/style.css new file mode 100644 index 00000000..f7c40e08 --- /dev/null +++ b/submissions/examples/ease-text-glitch-effect/style.css @@ -0,0 +1,720 @@ +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Share+Tech+Mono&display=swap'); + +/* ========================================================================== + EASEMOTION CSS - TEXT GLITCH EFFECT COMPONENT + ========================================================================== */ + +/* -------------------------------------------------------------------------- + 1. Design System & CSS Variables + -------------------------------------------------------------------------- */ + +:root { + /* Common UI Tokens */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.05); + + /* Light Theme Colors */ + --bg-primary: #f8fafc; + --bg-card: #ffffff; + --border-color: #e2e8f0; + --text-primary: #0f172a; + --text-secondary: #64748b; + + --glitch-cyan: #00f3ff; + --glitch-magenta: #ff007f; + + --control-bg: #f1f5f9; + --control-border: #cbd5e1; + --control-text: #64748b; + --control-active-bg: #ffffff; + --control-active-text: #0f172a; + + --display-card-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + --terminal-card-bg: #111827; + --terminal-border: #1f2937; + --terminal-text-color: #10b981; +} + +/* Dark Theme Variables via CSS :has() selector */ +body:has(#theme-dark:checked) { + /* Dark Theme Colors */ + --bg-primary: #070a13; + --bg-card: #0e1326; + --border-color: #1e2640; + --text-primary: #f8fafc; + --text-secondary: #94a3b8; + + --control-bg: #131930; + --control-border: #1e2640; + --control-text: #94a3b8; + --control-active-bg: #1e2640; + --control-active-text: #ffffff; + + --display-card-bg: linear-gradient(135deg, #111827 0%, #030712 100%); + --terminal-card-bg: #090d16; + --terminal-border: #1e2640; + --terminal-text-color: #00ffaa; + + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.3); +} + +/* -------------------------------------------------------------------------- + 2. Core Framework Glitch Classes + -------------------------------------------------------------------------- */ + +/* --- A. Periodic Burst Glitch Headline --- */ + +.ease-glitch-title { + position: relative; + font-family: 'Outfit', sans-serif; + font-size: clamp(24px, 5.5vw, 42px); + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--text-primary); + display: inline-block; + margin: 0; + /* Shakes the main text slightly during glitches for unified motion */ + animation: ease-glitch-shake 6s infinite steps(1, end); + transition: color 0.4s ease; +} + +.ease-glitch-title::before, +.ease-glitch-title::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0; +} + +/* Cyan glitch layer */ +.ease-glitch-title::before { + color: var(--glitch-cyan); + z-index: -1; + animation: ease-glitch-loop-1 6s infinite steps(1, end); +} + +/* Magenta glitch layer */ +.ease-glitch-title::after { + color: var(--glitch-magenta); + z-index: -2; + animation: ease-glitch-loop-2 6s infinite steps(1, end); +} + +/* --- B. Interactive Glitch CTA Button (Hover Triggered) --- */ + +.ease-glitch-btn { + position: relative; + font-family: 'Outfit', sans-serif; + font-size: 14px; + font-weight: 800; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #ffffff; + background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); + border: none; + padding: 18px 36px; + border-radius: 8px; + cursor: pointer; + box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + overflow: visible; + outline: none; +} + +.ease-glitch-btn:hover { + background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); + box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5); + transform: translateY(-2px); +} + +.ease-glitch-btn:active { + transform: translateY(0); +} + +.ease-glitch-btn:focus-visible { + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4); +} + +.ease-glitch-btn::before, +.ease-glitch-btn::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + opacity: 0; + pointer-events: none; +} + +/* Activate hover aberration */ +.ease-glitch-btn:hover::before { + opacity: 0.8; + color: var(--glitch-cyan); + z-index: -1; + animation: ease-glitch-hover-1 0.4s infinite linear; +} + +.ease-glitch-btn:hover::after { + opacity: 0.8; + color: var(--glitch-magenta); + z-index: -2; + animation: ease-glitch-hover-2 0.4s infinite linear; +} + +/* --- C. Continuous Monospace Terminal Tag --- */ + +.ease-glitch-terminal-text { + position: relative; + font-family: 'Share Tech Mono', monospace; + font-size: clamp(15px, 2.5vw, 20px); + color: var(--terminal-text-color); + letter-spacing: 0.06em; + display: inline-block; + transition: color 0.4s ease; +} + +.ease-glitch-terminal-text::before, +.ease-glitch-terminal-text::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +/* Continuous Cyan low-amplitude vibration */ +.ease-glitch-terminal-text::before { + color: rgba(0, 243, 255, 0.45); + z-index: -1; + animation: ease-glitch-micro-1 2s infinite steps(1, end); +} + +/* Continuous Magenta/Red low-amplitude vibration */ +.ease-glitch-terminal-text::after { + color: rgba(255, 0, 127, 0.45); + z-index: -2; + animation: ease-glitch-micro-2 2.5s infinite steps(1, end); +} + +/* -------------------------------------------------------------------------- + 3. Glitch Animation Keyframes + -------------------------------------------------------------------------- */ + +/* --- Main Shake Keyframes (Loops every 6s) --- */ +@keyframes ease-glitch-shake { + 0%, 80%, 100% { transform: translate(0); } + 81% { transform: translate(2px, -1px); } + 82% { transform: translate(-2px, 2px); } + 83% { transform: translate(1px, -2px); } + 84%, 90% { transform: translate(0); } + 91% { transform: translate(-2px, -1px); } + 92% { transform: translate(2px, 1px); } + 93% { transform: translate(0); } +} + +/* --- Cyan Layer Burst Keyframes --- */ +@keyframes ease-glitch-loop-1 { + 0%, 80%, 100% { + clip-path: inset(100% 0 0 0); /* Hides the element */ + opacity: 0; + } + 81% { + clip-path: inset(12% 0 80% 0); + transform: translate(-4px, -2px); + opacity: 0.9; + } + 82% { + clip-path: inset(75% 0 5% 0); + transform: translate(3px, 2px); + opacity: 0.9; + } + 83% { + clip-path: inset(45% 0 45% 0); + transform: translate(-2px, -3px); + opacity: 0.9; + } + 84%, 90% { + clip-path: inset(100% 0 0 0); + opacity: 0; + } + 91% { + clip-path: inset(62% 0 18% 0); + transform: translate(3px, 1px); + opacity: 0.9; + } + 92% { + clip-path: inset(5% 0 90% 0); + transform: translate(-3px, -1px); + opacity: 0.9; + } + 93% { + clip-path: inset(100% 0 0 0); + opacity: 0; + } +} + +/* --- Magenta Layer Burst Keyframes --- */ +@keyframes ease-glitch-loop-2 { + 0%, 80%, 100% { + clip-path: inset(100% 0 0 0); + opacity: 0; + } + 81% { + clip-path: inset(78% 0 10% 0); + transform: translate(4px, 2px); + opacity: 0.9; + } + 82% { + clip-path: inset(15% 0 70% 0); + transform: translate(-3px, -2px); + opacity: 0.9; + } + 83% { + clip-path: inset(50% 0 35% 0); + transform: translate(3px, 1px); + opacity: 0.9; + } + 84%, 90% { + clip-path: inset(100% 0 0 0); + opacity: 0; + } + 91% { + clip-path: inset(10% 0 80% 0); + transform: translate(-4px, -2px); + opacity: 0.9; + } + 92% { + clip-path: inset(70% 0 20% 0); + transform: translate(2px, 3px); + opacity: 0.9; + } + 93% { + clip-path: inset(100% 0 0 0); + opacity: 0; + } +} + +/* --- Hover CTA Button Glitch Keyframes --- */ +@keyframes ease-glitch-hover-1 { + 0% { clip-path: inset(35% 0 55% 0); transform: translate(-3px, -2px); } + 20% { clip-path: inset(90% 0 1% 0); transform: translate(2px, 3px); } + 40% { clip-path: inset(5% 0 85% 0); transform: translate(-1px, 2px); } + 60% { clip-path: inset(70% 0 15% 0); transform: translate(3px, -2px); } + 80% { clip-path: inset(25% 0 60% 0); transform: translate(-2px, 1px); } + 100% { clip-path: inset(35% 0 55% 0); transform: translate(-3px, -2px); } +} + +@keyframes ease-glitch-hover-2 { + 0% { clip-path: inset(12% 0 78% 0); transform: translate(3px, 2px); } + 20% { clip-path: inset(50% 0 38% 0); transform: translate(-2px, -3px); } + 40% { clip-path: inset(80% 0 8% 0); transform: translate(1px, -2px); } + 60% { clip-path: inset(32% 0 58% 0); transform: translate(-3px, 2px); } + 80% { clip-path: inset(60% 0 25% 0); transform: translate(2px, -1px); } + 100% { clip-path: inset(12% 0 78% 0); transform: translate(3px, 2px); } +} + +/* --- Continuous Micro Glitch Keyframes --- */ +@keyframes ease-glitch-micro-1 { + 0%, 100% { clip-path: inset(80% 0 10% 0); transform: translate(-1px, 0); } + 20% { clip-path: inset(10% 0 85% 0); transform: translate(1px, 0); } + 40% { clip-path: inset(50% 0 40% 0); transform: translate(-1px, 1px); } + 60% { clip-path: inset(65% 0 30% 0); transform: translate(1px, -1px); } + 80% { clip-path: inset(20% 0 70% 0); transform: translate(-1px, 0); } +} + +@keyframes ease-glitch-micro-2 { + 0%, 100% { clip-path: inset(15% 0 75% 0); transform: translate(1.5px, 0.5px); } + 25% { clip-path: inset(70% 0 20% 0); transform: translate(-1px, -0.5px); } + 50% { clip-path: inset(35% 0 55% 0); transform: translate(1px, -1px); } + 75% { clip-path: inset(85% 0 10% 0); transform: translate(-1.5px, 1px); } +} + +/* -------------------------------------------------------------------------- + 4. Demo Page & Shell Layout + -------------------------------------------------------------------------- */ + +body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 20px; + box-sizing: border-box; + font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + background-color: #f1f5f9; + transition: background-color 0.4s ease; +} + +/* Dark mode background transition */ +body:has(#theme-dark:checked) { + background-color: #060913; +} + +.demo-wrapper { + background-color: var(--bg-primary); + width: 100%; + max-width: 1100px; + border-radius: 24px; + padding: 48px; + border: 1px solid var(--border-color); + box-shadow: var(--shadow-lg); + transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; + display: flex; + flex-direction: column; + gap: 40px; + box-sizing: border-box; +} + +.demo-header { + text-align: center; +} + +.demo-header h1 { + font-size: 38px; + font-weight: 700; + color: var(--text-primary); + margin: 0 0 12px 0; + letter-spacing: -0.03em; + background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.demo-header p { + font-size: 16px; + color: var(--text-secondary); + max-width: 650px; + margin: 0 auto; + line-height: 1.6; +} + +/* Segmented Theme Switcher */ +.controls-container { + display: flex; + justify-content: center; + border-bottom: 1px solid var(--border-color); + padding-bottom: 32px; + transition: border-color 0.4s ease; +} + +.control-group { + display: flex; + align-items: center; + gap: 14px; +} + +.control-label { + font-size: 13px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-secondary); +} + +.segmented-control { + position: relative; + display: inline-flex; + background-color: var(--control-bg); + padding: 3px; + border-radius: 10px; + border: 1px solid var(--border-color); + transition: background-color 0.4s ease, border-color 0.4s ease; + z-index: 1; +} + +.segmented-control label { + position: relative; + z-index: 2; + display: inline-flex; + align-items: center; + justify-content: center; + height: 30px; + padding: 0 18px; + font-size: 13px; + font-weight: 600; + color: var(--control-text); + cursor: pointer; + transition: color 0.25s ease; +} + +.segmented-control::before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + height: calc(100% - 6px); + width: calc(50% - 3px); + background-color: var(--control-active-bg); + border-radius: 7px; + box-shadow: var(--shadow-sm); + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; + z-index: 1; +} + +/* Slide Selection slider active state */ +body:has(#theme-dark:checked) .theme-selector::before { + transform: translateX(100%); +} + +body:has(#theme-light:checked) label[for="theme-light"], +body:has(#theme-dark:checked) label[for="theme-dark"] { + color: var(--control-active-text); +} + +/* Grid layout for showcase cards */ +.glitch-showcase-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px; + width: 100%; +} + +.card-showcase { + background-color: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 16px; + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: column; + overflow: hidden; + transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; + box-sizing: border-box; +} + +.card-showcase:hover { + box-shadow: var(--shadow-md); +} + +.card-header { + padding: 24px 24px 0 24px; +} + +.card-badge { + display: inline-block; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + background-color: rgba(99, 102, 241, 0.1); + color: #6366f1; + padding: 4px 10px; + border-radius: 9999px; + margin-bottom: 12px; +} + +.badge-blue { + background-color: rgba(59, 130, 246, 0.1); + color: #3b82f6; +} + +.badge-purple { + background-color: rgba(168, 85, 247, 0.1); + color: #a855f7; +} + +body:has(#theme-dark:checked) .card-badge { + background-color: rgba(99, 102, 241, 0.2); + color: #818cf8; +} + +body:has(#theme-dark:checked) .badge-blue { + background-color: rgba(59, 130, 246, 0.2); + color: #60a5fa; +} + +body:has(#theme-dark:checked) .badge-purple { + background-color: rgba(168, 85, 247, 0.2); + color: #c084fc; +} + +.card-header h3 { + font-size: 18px; + font-weight: 700; + color: var(--text-primary); + margin: 0; + transition: color 0.4s ease; +} + +.card-body { + padding: 24px; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + min-height: 188px; + box-sizing: border-box; +} + +.glitch-bg-display { + background: var(--display-card-bg); + border-radius: 12px; + margin: 0 24px; + padding: 24px 12px; + transition: background 0.4s ease; + width: calc(100% - 48px); +} + +/* Terminal Display Card */ +.terminal-bg { + background-color: var(--terminal-card-bg); + border: 1px solid var(--terminal-border); + border-radius: 12px; + margin: 0 24px; + padding: 24px 16px; + position: relative; + overflow: hidden; + transition: background-color 0.4s ease, border-color 0.4s ease; + width: calc(100% - 48px); +} + +/* scanlines filter effect overlay */ +.terminal-bg::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + rgba(18, 16, 16, 0) 50%, + rgba(0, 0, 0, 0.2) 50% + ); + background-size: 100% 4px; + pointer-events: none; + z-index: 2; +} + +.terminal-container { + display: flex; + align-items: center; + gap: 4px; +} + +.terminal-cursor { + font-family: 'Share Tech Mono', monospace; + font-size: 18px; + color: var(--terminal-text-color); + animation: ease-glitch-cursor-blink 1s infinite step-start; + transition: color 0.4s ease; +} + +@keyframes ease-glitch-cursor-blink { + 50% { opacity: 0; } +} + +.card-footer { + padding: 0 24px 24px 24px; + border-top: 1px solid var(--border-color); + margin-top: 16px; + transition: border-color 0.4s ease; +} + +.card-footer p { + font-size: 13px; + line-height: 1.6; + color: var(--text-secondary); + margin: 16px 0 0 0; + transition: color 0.4s ease; +} + +/* Footer Section */ +.demo-footer { + text-align: center; + font-size: 13px; + color: var(--text-secondary); + border-top: 1px solid var(--border-color); + padding-top: 24px; + margin-top: 12px; + transition: border-color 0.4s ease, color 0.4s ease; +} + +.demo-footer strong { + color: var(--text-primary); + transition: color 0.4s ease; +} + +/* Accessibility / Reduced Motion considerations */ +@media (prefers-reduced-motion: reduce) { + .ease-glitch-title, + .ease-glitch-title::before, + .ease-glitch-title::after, + .ease-glitch-btn:hover::before, + .ease-glitch-btn:hover::after, + .ease-glitch-terminal-text::before, + .ease-glitch-terminal-text::after, + .terminal-cursor { + animation: none !important; + opacity: 0 !important; + transform: none !important; + clip-path: none !important; + } + + .terminal-cursor { + opacity: 1 !important; + } +} + +/* -------------------------------------------------------------------------- + 5. Responsive Layout Media Queries + -------------------------------------------------------------------------- */ + +@media (max-width: 992px) { + .glitch-showcase-grid { + grid-template-columns: repeat(2, 1fr); + gap: 24px; + } + + #card-tag-glitch { + grid-column: span 2; + } +} + +@media (max-width: 768px) { + .demo-wrapper { + padding: 32px; + } + .glitch-showcase-grid { + grid-template-columns: 1fr; + gap: 24px; + } + #card-tag-glitch { + grid-column: span 1; + } +} + +@media (max-width: 520px) { + body { + padding: 20px 12px; + } + .demo-wrapper { + padding: 24px 16px; + border-radius: 16px; + gap: 28px; + } + .demo-header h1 { + font-size: 28px; + } + .demo-header p { + font-size: 14px; + } + .card-body { + padding: 16px; + } + .glitch-bg-display, .terminal-bg { + margin: 0 16px; + width: calc(100% - 32px); + } +}