diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..86eff6d
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-14 - Accessible focus rings on glassmorphism cards
+**Learning:** For dark-themed glassmorphism cards with `overflow: hidden` (often used to clip internal gradients), custom focus rings implemented via `box-shadow` are frequently clipped and invisible. High-contrast focus rings (e.g., 2px accent color) are essential for visibility on dark backgrounds.
+**Action:** Switch to `overflow: visible` for interactive cards and use pseudo-elements (like `::after` with `z-index: -1`) to handle internal clipping or background gradients without obscuring the focus indicator.
diff --git a/index.html b/index.html
index 5cf0f32..c7a7598 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,46 @@
-
-
-
-
+
+
+
+
- Interactive Sketches – ISTEC
+ Interactive Sketches – ISTEC
-
-
-
-
-
-
-
-
-
-
Circle Matrix (Image → Particles)
-
- Transform an image into a dynamic field of circles.
- Each pixel becomes an interactive element that reacts to movement.
-
- Concept: Image as a system of autonomous particles.
-
-
-
-
The Weight of Words (Voice → Physics)
-
- Spoken words are converted into letters that move and fall under gravity.
- Language becomes physical and temporary.
-
- Concept: Speech transformed into matter.
-
-
-
Circle Matrix (Image → Particles)
+
+ Transform an image into a dynamic field of circles.
+ Each pixel becomes an interactive element that reacts to movement.
+
+ Concept: Image as a system of autonomous particles.
+
+ Open Sketch
+
+
+
+ The Weight of Words (Voice → Physics)
+
+ Spoken words are converted into letters that move and fall under gravity.
+ Language becomes physical and temporary.
+
+ Concept: Speech transformed into matter.
+
+ Open Sketch
+
+
+
+
+
+
diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html
index c22da09..dcea080 100644
--- a/proyecto1/proyecto1.html
+++ b/proyecto1/proyecto1.html
@@ -1,40 +1,40 @@
-
-
-
-
+
+
+
+
- Circle Matrix Image
+ Circle Matrix Image
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ ⬅ Back
+
+
+
+
+
+
\ No newline at end of file
diff --git a/proyecto1/style.css b/proyecto1/style.css
index b562aca..2ea1f66 100644
--- a/proyecto1/style.css
+++ b/proyecto1/style.css
@@ -108,6 +108,7 @@ input[type="file"] {
-webkit-backdrop-filter: blur(16px);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 100;
+ text-decoration: none;
}
.back-btn:hover {
diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html
index e984f76..31d1479 100644
--- a/proyecto2/proyecto2.html
+++ b/proyecto2/proyecto2.html
@@ -15,9 +15,9 @@
-
+
diff --git a/proyecto2/style.css b/proyecto2/style.css
index fd6dfbb..6c99f2f 100644
--- a/proyecto2/style.css
+++ b/proyecto2/style.css
@@ -143,6 +143,7 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-backdrop-filter: blur(16px);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1000;
+ text-decoration: none;
}
.back-btn:hover {
diff --git a/script.js b/script.js
deleted file mode 100644
index 56bdf15..0000000
--- a/script.js
+++ /dev/null
@@ -1,16 +0,0 @@
-window.onload = function () {
- const routes = {
- "btn-p1": "proyecto1/proyecto1.html",
- "btn-p2": "proyecto2/proyecto2.html"
- };
-
- Object.keys(routes).forEach(id => {
- const element = document.getElementById(id);
-
- if (element) {
- element.onclick = () => {
- window.location.href = routes[id];
- };
- }
- });
-};
diff --git a/style.css b/style.css
index f563ad8..1a6874e 100644
--- a/style.css
+++ b/style.css
@@ -79,10 +79,23 @@ header p {
flex-direction: column;
justify-content: space-between;
position: relative;
- overflow: hidden;
+ overflow: visible;
animation: fadeInUp 0.8s ease-out both;
}
+.card::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 24px;
+ overflow: hidden;
+ z-index: -1;
+ pointer-events: none;
+}
+
.card:nth-child(2) {
animation-delay: 0.2s;
}
@@ -100,10 +113,16 @@ header p {
z-index: 0;
}
-.card:hover {
+.card:hover, .card:focus-visible {
transform: translateY(-8px);
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+ outline: none;
+}
+
+.card:focus-visible {
+ box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 6px var(--accent-color);
+ z-index: 10;
}
.card > * {
@@ -112,6 +131,10 @@ header p {
}
/* TEXT */
+.card {
+ text-decoration: none;
+}
+
.card h2 {
font-family: 'Poppins', sans-serif;
font-size: 1.75rem;
@@ -147,7 +170,7 @@ header p {
border: 1px solid rgba(255, 255, 255, 0.1);
}
-.card:hover .btn {
+.card:hover .btn, .card:focus-visible .btn {
background: var(--accent-gradient);
border-color: transparent;
box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2);