hacklab/resetea.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tipografía más grande y gruesa, botones principales más grandes, chips con Recion

Browse source 
- Body: font-size 1.08rem + subpixel-antialiased para Italiana más gruesa
- Hero: padding superior reducido, título más pegado arriba
- Botones nav: Italiana 1.15rem, más altos (0.8rem 1.8rem), hover madera cálida (#ede0cf)
- Network chips: fuente Recion (título) a 1.1rem, padding 0.7rem 1.45rem
- "Selecciona las redes...": Recion 1.5rem centrado
- Sublabels GDPR/manual: Italiana uppercase, centrados
- Grid de chips: justify-content center

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab 2026-04-07 12:42:56 +02:00
parent d64da63bd8
commit f6193e8794
1 changed files with 49 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

85
public/index.css
View file

@ -71,10 +71,13 @@ html { scroll-behavior: smooth; }
body {
font-family: 'Italiana', 'Georgia', serif;
font-size: 1.08rem;
font-weight: 400;
background: var(--bg);
color: var(--text);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* ── Títulos con Recion ── */
@ -594,7 +597,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
HERO LANDING — título + lema + nav buttons
═══════════════════════════════════════════ */
.hero-landing {
padding: 3.5rem 0 2.5rem;
padding: 1.8rem 0 2.2rem;
background: var(--bg);
text-align: center;
}
@ -635,31 +638,37 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
.landing-nav-btn {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.2rem;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.02em;
justify-content: center;
padding: 0.8rem 1.8rem;
border-radius: 12px;
font-family: 'Italiana', 'Georgia', serif;
font-size: 1.15rem;
letter-spacing: 0.04em;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--btn-shadow);
border: 1.5px solid var(--border);
box-shadow: 0 4px 0 0 var(--border-dark), 0 6px 14px rgba(26,23,20,0.08);
text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
transition:
transform 140ms cubic-bezier(.2,.8,.4,1),
box-shadow 140ms ease,
background 140ms ease,
border-color 140ms ease,
color 140ms ease;
user-select: none;
}
.landing-nav-btn:hover {
background: var(--acid-lt);
border-color: var(--acid);
box-shadow: 0 4px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.18);
transform: translateY(-2px);
background: #ede0cf;
border-color: #c4a07a;
box-shadow: 0 6px 0 0 #b8906a, 0 10px 24px rgba(139,94,60,0.18);
transform: translateY(-3px);
text-decoration: none;
color: var(--acid-dark);
color: var(--caoba);
}
.landing-nav-btn:active {
box-shadow: 0 1px 0 0 #9dcc00;
box-shadow: 0 1px 0 0 #b8906a;
transform: translateY(2px);
}
@ -667,14 +676,15 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
background: var(--acid);
color: var(--text);
border-color: #9dcc00;
box-shadow: 0 4px 0 0 #7aaa00, 0 6px 16px rgba(200,255,0,0.25);
box-shadow: 0 4px 0 0 #7aaa00, 0 6px 16px rgba(200,255,0,0.28);
font-weight: 700;
}
.landing-nav-btn--highlight:hover {
background: #d4ff1a;
border-color: var(--acid-dark);
box-shadow: 0 6px 0 0 #6a9800, 0 10px 24px rgba(200,255,0,0.35);
box-shadow: 0 6px 0 0 #6a9800, 0 10px 24px rgba(200,255,0,0.38);
color: var(--text);
transform: translateY(-3px);
}
/* ═══════════════════════════════════════════
@ -696,8 +706,8 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
text-align: center;
margin-bottom: 1.8rem;
}
.form-header h2 { margin-bottom: 0.4rem; }
.form-header p { color: var(--muted); font-size: 0.95rem; }
.form-header h2 { margin-bottom: 0.4rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.form-header p { color: var(--muted); font-size: 1.05rem; }
.email-row {
display: flex;
@ -727,23 +737,25 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
.email-input::placeholder { color: var(--subtle); }
.networks-label {
font-size: 0.9rem;
font-weight: 700;
font-family: 'Recion', 'Georgia', serif;
font-size: 1.5rem;
color: var(--text);
margin-bottom: 0.9rem;
letter-spacing: 0.02em;
margin-bottom: 1.2rem;
letter-spacing: 0.03em;
text-align: center;
}
.networks-section { margin-bottom: 2rem; }
.networks-sublabel {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
font-family: 'Italiana', 'Georgia', serif;
font-size: 0.88rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.55rem;
margin-top: 1.2rem;
margin-bottom: 0.7rem;
margin-top: 1.4rem;
text-align: center;
}
.networks-sublabel:first-child { margin-top: 0; }
.networks-sublabel--manual { color: var(--text); }
@ -751,17 +763,18 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
.networks-grid {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
gap: 0.55rem;
margin-bottom: 0.25rem;
justify-content: center;
}
/* Chip base — estilo botón con Italiana */
/* Chip base — fuente de título, grande */
.net-chip {
font-family: 'Italiana', 'Georgia', serif;
font-size: 1.08rem;
letter-spacing: 0.05em;
padding: 0.6rem 1.2rem;
border-radius: 10px;
font-family: 'Recion', 'Georgia', serif;
font-size: 1.1rem;
letter-spacing: 0.04em;
padding: 0.7rem 1.45rem;
border-radius: 12px;
cursor: pointer;
background: var(--surface);
color: var(--text);