Título RESETEA negro, tagline ácido, hover ácido en chips y nav

- h1 cambiado a "RESETEA" en negro, tagline a "Reduce tu huella digital." en --acid (#c8ff00)
- Tagline con text-shadow sutil verde ácido
- Botones de nav: hover con borde y fondo verde ácido
- Botón Plantillas GDPR: fondo ácido con texto negro como CTA diferenciado
- Chips de redes: hover en verde ácido (borde + fondo + texto)
- Chips acceso rápido: texto negro (no verde), mismos hovers ácidos
- Italiana: tamaño mayor + subpixel-antialiased para verla más gruesa

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab 2026-04-07 12:36:00 +02:00
parent 5ff8919d5e
commit d64da63bd8
2 changed files with 57 additions and 50 deletions

View file

@ -42,6 +42,10 @@
--lime: #96c21a; /* verde lima */ --lime: #96c21a; /* verde lima */
--lime-lt: #f4fae0; /* verde lima muy claro */ --lime-lt: #f4fae0; /* verde lima muy claro */
--acid: #c8ff00; /* verde ácido */
--acid-dark: #7aaa00; /* verde ácido oscuro (texto sobre blanco) */
--acid-lt: #f2ffe0; /* verde ácido muy clarito (fondos) */
--shadow-sm: 0 1px 3px rgba(26,23,20,0.08), 0 1px 2px rgba(26,23,20,0.06); --shadow-sm: 0 1px 3px rgba(26,23,20,0.08), 0 1px 2px rgba(26,23,20,0.06);
--shadow-md: 0 4px 12px rgba(26,23,20,0.10), 0 2px 4px rgba(26,23,20,0.06); --shadow-md: 0 4px 12px rgba(26,23,20,0.10), 0 2px 4px rgba(26,23,20,0.06);
--shadow-lg: 0 8px 30px rgba(26,23,20,0.12), 0 4px 8px rgba(26,23,20,0.06); --shadow-lg: 0 8px 30px rgba(26,23,20,0.12), 0 4px 8px rgba(26,23,20,0.06);
@ -604,20 +608,21 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
.main-title { .main-title {
font-family: 'Recion', 'Georgia', serif; font-family: 'Recion', 'Georgia', serif;
font-size: clamp(2.8rem, 7vw, 5rem); font-size: clamp(3.2rem, 9vw, 6.5rem);
color: #b8de6a; color: var(--text);
letter-spacing: 0.02em; letter-spacing: 0.04em;
line-height: 1.1; line-height: 1;
margin-bottom: 0.6rem; margin-bottom: 0.5rem;
} }
.main-tagline { .main-tagline {
font-family: 'Recion', 'Georgia', serif; font-family: 'Recion', 'Georgia', serif;
font-size: clamp(1.05rem, 2.5vw, 1.5rem); font-size: clamp(1.1rem, 2.8vw, 1.7rem);
color: var(--lime); color: var(--acid);
letter-spacing: 0.06em; letter-spacing: 0.06em;
font-weight: normal; font-weight: normal;
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
text-shadow: 0 0 20px rgba(200,255,0,0.25);
} }
.landing-nav { .landing-nav {
@ -645,30 +650,31 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
} }
.landing-nav-btn:hover { .landing-nav-btn:hover {
background: var(--surface2); background: var(--acid-lt);
border-color: var(--border-dark); border-color: var(--acid);
box-shadow: var(--btn-shadow-hover); box-shadow: 0 4px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.18);
transform: translateY(-2px); transform: translateY(-2px);
text-decoration: none; text-decoration: none;
color: var(--text); color: var(--acid-dark);
} }
.landing-nav-btn:active { .landing-nav-btn:active {
box-shadow: var(--btn-shadow-active); box-shadow: 0 1px 0 0 #9dcc00;
transform: translateY(3px); transform: translateY(2px);
} }
.landing-nav-btn--highlight { .landing-nav-btn--highlight {
background: var(--caoba); background: var(--acid);
color: #fff; color: var(--text);
border-color: #5c2d1e; border-color: #9dcc00;
box-shadow: var(--caoba-shadow); box-shadow: 0 4px 0 0 #7aaa00, 0 6px 16px rgba(200,255,0,0.25);
font-weight: 700;
} }
.landing-nav-btn--highlight:hover { .landing-nav-btn--highlight:hover {
background: var(--caoba-mid); background: #d4ff1a;
border-color: #4a2318; border-color: var(--acid-dark);
box-shadow: var(--caoba-shadow-hover); box-shadow: 0 6px 0 0 #6a9800, 0 10px 24px rgba(200,255,0,0.35);
color: #fff; color: var(--text);
} }
/* /*
@ -740,7 +746,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
margin-top: 1.2rem; margin-top: 1.2rem;
} }
.networks-sublabel:first-child { margin-top: 0; } .networks-sublabel:first-child { margin-top: 0; }
.networks-sublabel--manual { color: var(--sage); } .networks-sublabel--manual { color: var(--text); }
.networks-grid { .networks-grid {
display: flex; display: flex;
@ -752,9 +758,9 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
/* Chip base — estilo botón con Italiana */ /* Chip base — estilo botón con Italiana */
.net-chip { .net-chip {
font-family: 'Italiana', 'Georgia', serif; font-family: 'Italiana', 'Georgia', serif;
font-size: 1rem; font-size: 1.08rem;
letter-spacing: 0.04em; letter-spacing: 0.05em;
padding: 0.55rem 1.15rem; padding: 0.6rem 1.2rem;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
background: var(--surface); background: var(--surface);
@ -769,17 +775,18 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
color 130ms ease; color 130ms ease;
user-select: none; user-select: none;
line-height: 1.2; line-height: 1.2;
-webkit-font-smoothing: subpixel-antialiased;
} }
.net-chip:hover { .net-chip:hover {
border-color: var(--caoba); border-color: var(--acid);
color: var(--caoba); color: var(--acid-dark);
background: var(--caoba-lt); background: var(--acid-lt);
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 0 0 var(--border-dark), 0 8px 18px rgba(123,63,46,0.13); box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.20);
} }
.net-chip:active { .net-chip:active {
transform: translateY(1px); transform: translateY(1px);
box-shadow: 0 1px 0 0 var(--border-dark), 0 2px 4px rgba(26,23,20,0.08); box-shadow: 0 1px 0 0 var(--border-dark);
} }
.net-chip.selected { .net-chip.selected {
@ -791,34 +798,34 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
.net-chip.selected:hover { .net-chip.selected:hover {
background: var(--caoba-mid); background: var(--caoba-mid);
color: #fff; color: #fff;
border-color: #4a2318; border-color: var(--acid);
box-shadow: 0 6px 0 0 #4a2318, 0 8px 20px rgba(123,63,46,0.30); box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.25);
transform: translateY(-3px); transform: translateY(-3px);
} }
/* Chips manuales (verde salvia) */ /* Chips manuales — texto negro, hover ácido */
.net-chip--manual { .net-chip--manual {
background: var(--sage-lt); background: var(--surface);
color: var(--sage); color: var(--text);
border-color: #c0d9c8; border-color: var(--border);
box-shadow: 0 3px 0 0 #c0d9c8, 0 4px 10px rgba(74,124,89,0.07); box-shadow: 0 3px 0 0 var(--border-dark), 0 4px 10px rgba(26,23,20,0.06);
} }
.net-chip--manual:hover { .net-chip--manual:hover {
background: #d2eeda; background: var(--acid-lt);
border-color: var(--sage); border-color: var(--acid);
color: var(--sage); color: var(--acid-dark);
box-shadow: 0 6px 0 0 #c0d9c8, 0 8px 18px rgba(74,124,89,0.15); box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.20);
transform: translateY(-3px);
} }
.net-chip--manual.selected { .net-chip--manual.selected {
background: var(--sage); background: var(--text);
color: #fff; color: var(--acid);
border-color: #3a6347; border-color: var(--text);
box-shadow: 0 3px 0 0 #3a6347, 0 4px 12px rgba(74,124,89,0.25); box-shadow: 0 3px 0 0 #000, 0 4px 12px rgba(26,23,20,0.25);
} }
.net-chip--manual.selected:hover { .net-chip--manual.selected:hover {
background: #3f6e50; border-color: var(--acid);
color: #fff; box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.25);
box-shadow: 0 6px 0 0 #3a6347, 0 8px 20px rgba(74,124,89,0.30);
transform: translateY(-3px); transform: translateY(-3px);
} }

View file

@ -19,8 +19,8 @@
════════════════════════════════════════════ --> ════════════════════════════════════════════ -->
<section class="hero-landing"> <section class="hero-landing">
<div class="container hero-landing-inner"> <div class="container hero-landing-inner">
<h1 class="main-title">Reduce tu huella digital.</h1> <h1 class="main-title">RESETEA</h1>
<p class="main-tagline">Privacidad sin custodios.</p> <p class="main-tagline">Reduce tu huella digital.</p>
<div class="landing-nav"> <div class="landing-nav">
<a class="landing-nav-btn" href="tipos.html">Tipos de información</a> <a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<a class="landing-nav-btn" href="concienciacion.html">Concienciación</a> <a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>