Quitar header sticky, título en verde clarito, fuente Italiana, chips mejorados
- Eliminar topbar/nav del index (se añadirá cuando haya logo) - Título principal en verde muy clarito (#b8de6a) - Añadir @font-face Italiana y aplicar a body, input y chips de redes - Chips de redes: más grandes, elevación 3D en hover, transición cúbica - Topbar sin position:sticky (limpieza) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab
parent
35a2bd8cf8
commit
5ff8919d5e
2 changed files with 44 additions and 42 deletions
|
|
@ -12,6 +12,14 @@
|
|||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Italiana';
|
||||
src: url('fonts/Italiana-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ── Variables ── */
|
||||
:root {
|
||||
--bg: #f8f7f4; /* blanco cálido */
|
||||
|
|
@ -58,7 +66,7 @@
|
|||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
font-family: 'Italiana', 'Georgia', serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.65;
|
||||
|
|
@ -98,9 +106,6 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
|
|||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.topbar-inner {
|
||||
|
|
@ -600,7 +605,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
|
|||
.main-title {
|
||||
font-family: 'Recion', 'Georgia', serif;
|
||||
font-size: clamp(2.8rem, 7vw, 5rem);
|
||||
color: var(--text);
|
||||
color: #b8de6a;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.6rem;
|
||||
|
|
@ -698,7 +703,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
|
|||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 0.9rem 1.2rem;
|
||||
font-size: 1.05rem;
|
||||
font-size: 1.1rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
|
|
@ -706,7 +711,8 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
|
|||
outline: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
font-family: 'Italiana', 'Georgia', serif;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.email-input:focus {
|
||||
border-color: var(--caoba);
|
||||
|
|
@ -743,64 +749,77 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
|
|||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Chip base */
|
||||
/* Chip base — estilo botón con Italiana */
|
||||
.net-chip {
|
||||
padding: 0.42rem 0.9rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
font-family: 'Italiana', 'Georgia', serif;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.55rem 1.15rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 2px 0 0 var(--border-dark);
|
||||
transition: all 120ms ease;
|
||||
border: 1.5px solid var(--border);
|
||||
box-shadow: 0 3px 0 0 var(--border-dark), 0 4px 10px rgba(26,23,20,0.07);
|
||||
transition:
|
||||
transform 130ms cubic-bezier(.2,.8,.4,1),
|
||||
box-shadow 130ms ease,
|
||||
background 130ms ease,
|
||||
border-color 130ms ease,
|
||||
color 130ms ease;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.net-chip:hover {
|
||||
border-color: var(--caoba);
|
||||
color: var(--caoba);
|
||||
background: var(--caoba-lt);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 0 0 var(--border-dark);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 0 0 var(--border-dark), 0 8px 18px rgba(123,63,46,0.13);
|
||||
}
|
||||
.net-chip:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px 0 0 var(--border-dark), 0 2px 4px rgba(26,23,20,0.08);
|
||||
}
|
||||
.net-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--border-dark); }
|
||||
|
||||
.net-chip.selected {
|
||||
background: var(--caoba);
|
||||
color: #fff;
|
||||
border-color: #5c2d1e;
|
||||
box-shadow: 0 2px 0 0 #5c2d1e;
|
||||
box-shadow: 0 3px 0 0 #5c2d1e, 0 4px 12px rgba(123,63,46,0.25);
|
||||
}
|
||||
.net-chip.selected:hover {
|
||||
background: var(--caoba-mid);
|
||||
color: #fff;
|
||||
border-color: #4a2318;
|
||||
box-shadow: 0 6px 0 0 #4a2318, 0 8px 20px rgba(123,63,46,0.30);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Chips manuales (verde) */
|
||||
/* Chips manuales (verde salvia) */
|
||||
.net-chip--manual {
|
||||
background: var(--sage-lt);
|
||||
color: var(--sage);
|
||||
border-color: #c0d9c8;
|
||||
box-shadow: 0 2px 0 0 #c0d9c8;
|
||||
box-shadow: 0 3px 0 0 #c0d9c8, 0 4px 10px rgba(74,124,89,0.07);
|
||||
}
|
||||
.net-chip--manual:hover {
|
||||
background: #d6edde;
|
||||
background: #d2eeda;
|
||||
border-color: var(--sage);
|
||||
color: var(--sage);
|
||||
box-shadow: 0 6px 0 0 #c0d9c8, 0 8px 18px rgba(74,124,89,0.15);
|
||||
}
|
||||
.net-chip--manual.selected {
|
||||
background: var(--sage);
|
||||
color: #fff;
|
||||
border-color: #3a6347;
|
||||
box-shadow: 0 2px 0 0 #3a6347;
|
||||
box-shadow: 0 3px 0 0 #3a6347, 0 4px 12px rgba(74,124,89,0.25);
|
||||
}
|
||||
.net-chip--manual.selected:hover {
|
||||
background: #3f6e50;
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 0 0 #3a6347, 0 8px 20px rgba(74,124,89,0.30);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Footer del form */
|
||||
|
|
|
|||
|
|
@ -11,23 +11,6 @@
|
|||
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar-inner">
|
||||
<div class="brand">
|
||||
<div class="brand-logo">R</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name">RESETEA<span>.NET</span></div>
|
||||
<div class="brand-tag">Privacidad sin custodios</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav" aria-label="Navegación principal">
|
||||
<a class="nav-btn" href="tipos.html">Tipos de info</a>
|
||||
<a class="nav-btn" href="concienciacion.html">Concienciación</a>
|
||||
<a class="nav-btn" href="egosurfing.html">Egosurfing</a>
|
||||
<a class="nav-btn nav-btn--primary" href="plantillas.html">Plantillas GDPR</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue