From f6193e8794ddfe12b8dca29b3a641cc187ea39d2 Mon Sep 17 00:00:00 2001 From: hacklab Date: Tue, 7 Apr 2026 12:42:56 +0200 Subject: [PATCH] =?UTF-8?q?Tipograf=C3=ADa=20m=C3=A1s=20grande=20y=20grues?= =?UTF-8?q?a,=20botones=20principales=20m=C3=A1s=20grandes,=20chips=20con?= =?UTF-8?q?=20Recion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- public/index.css | 85 ++++++++++++++++++++++++++++-------------------- 1 file changed, 49 insertions(+), 36 deletions(-) diff --git a/public/index.css b/public/index.css index 27a6eb1..a4d863e 100644 --- a/public/index.css +++ b/public/index.css @@ -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);