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:
parent
5ff8919d5e
commit
d64da63bd8
2 changed files with 57 additions and 50 deletions
103
public/index.css
103
public/index.css
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue