portada: reticula 1.5px semi-brillo, glow 20px en hover, cuadrante con inset shadow
Semántico sayk'uy
Mana ima sutichaypas t'ikrakurqanchu: qillqalla, yachachiylla utaq willaylla t'ikrakurqan.
1 qillqakuna · +16 −11
diff --git a/crates/apps/gioser-web/styles.css b/crates/apps/gioser-web/styles.css
index 574b827..00bda7d 100644
--- a/crates/apps/gioser-web/styles.css
+++ b/crates/apps/gioser-web/styles.css
@@ -48,7 +48,7 @@ html, body {
}
/* ===================================================
- RETÍCULA — líneas + círculo sutiles, brillan en hover
+ RETÍCULA — 1.5px, semi-brillo base, glow 20px en hover
=================================================== */
.portada::before {
@@ -57,19 +57,19 @@ html, body {
top: 0; left: 0; right: 0; bottom: 0;
z-index: 30;
pointer-events: none;
- transition: all 0.4s ease;
+ transition: all 0.35s ease;
background:
- linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(150,150,150,0.25) calc(50% - 0.5px), rgba(150,150,150,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
- linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(150,150,150,0.25) calc(50% - 0.5px), rgba(150,150,150,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
- radial-gradient(circle at 50% 50%, transparent calc(11px), rgba(150,150,150,0.35) calc(11px), rgba(150,150,150,0.35) calc(13px), transparent calc(13px));
+ linear-gradient(90deg, transparent calc(50% - 0.75px), rgba(160,160,160,0.35) calc(50% - 0.75px), rgba(160,160,160,0.50) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
+ linear-gradient(0deg, transparent calc(50% - 0.75px), rgba(160,160,160,0.35) calc(50% - 0.75px), rgba(160,160,160,0.50) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
+ radial-gradient(circle at 50% 50%, transparent calc(13px), rgba(160,160,160,0.45) calc(13px), rgba(160,160,160,0.45) calc(15px), transparent calc(15px));
}
.portada-hover::before {
background:
- linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(200,200,200,0.5) calc(50% - 0.5px), rgba(200,200,200,0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
- linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(200,200,200,0.5) calc(50% - 0.5px), rgba(200,200,200,0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
- radial-gradient(circle at 50% 50%, transparent calc(11px), rgba(200,200,200,0.7) calc(11px), rgba(200,200,200,0.7) calc(13px), transparent calc(13px)),
- radial-gradient(circle at 50% 50%, rgba(200,200,200,0.08) 30%, transparent 65%);
+ linear-gradient(90deg, transparent calc(50% - 0.75px), rgba(220,220,220,0.65) calc(50% - 0.75px), rgba(220,220,220,0.80) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
+ linear-gradient(0deg, transparent calc(50% - 0.75px), rgba(220,220,220,0.65) calc(50% - 0.75px), rgba(220,220,220,0.80) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
+ radial-gradient(circle at 50% 50%, transparent calc(13px), rgba(220,220,220,0.85) calc(13px), rgba(220,220,220,0.85) calc(15px), transparent calc(15px)),
+ radial-gradient(circle at 50% 50%, rgba(200,200,200,0.12) 0%, rgba(200,200,200,0.06) 20%, transparent 40%);
}
/* ===================================================
@@ -91,7 +91,12 @@ html, body {
}
.cuadrante:hover {
- background: rgba(192, 192, 192, 0.15);
+ background: rgba(192, 192, 192, 0.08);
+}
+
+/* Cuadrante activo con hover más marcado */
+.cuadrante:hover {
+ box-shadow: inset 0 0 0 1px rgba(200,200,200,0.15);
}
/* Borde iluminado en hover */
@@ -104,7 +109,7 @@ html, body {
}
.cuadrante:hover .cuadrante-border {
- border-color: #666;
+ border-color: rgba(200,200,200,0.3);
}
/* Contenido */