feat: V3 landing page
This commit is contained in:
@@ -313,6 +313,21 @@ const avoids = [
|
||||
Slaksis puede participar en los componentes que normalmente quedan dispersos entre varios actores. Eso reduce
|
||||
pérdida de contexto y mejora la continuidad técnica.
|
||||
</p>
|
||||
|
||||
<article class="backup-note">
|
||||
<img
|
||||
class="backup-note__icon"
|
||||
src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/cloudflare.png"
|
||||
alt="Cloudflare"
|
||||
loading="lazy"
|
||||
width="40"
|
||||
height="40"
|
||||
/>
|
||||
<div>
|
||||
<strong>Respaldos con Cloudflare R2</strong>
|
||||
<p>Se pueden implementar backups sobre Cloudflare R2 para reforzar continuidad, resguardo y recuperación.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<ul class="coverage__list">
|
||||
|
||||
@@ -73,14 +73,14 @@ img {
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: max(20px, env(safe-area-inset-top)) 0 4rem;
|
||||
padding: max(18px, env(safe-area-inset-top)) 0 3rem;
|
||||
color: var(--text-inverse);
|
||||
border-bottom: 1px solid var(--line-inverse);
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
min-height: calc(100svh - 4rem);
|
||||
min-height: calc(100dvh - 4rem);
|
||||
min-height: calc(100svh - 3rem);
|
||||
min-height: calc(100dvh - 3rem);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
@@ -90,7 +90,7 @@ img {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0.15rem 0 1.5rem;
|
||||
padding: 0.1rem 0 1rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -159,9 +159,9 @@ img {
|
||||
.hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
|
||||
gap: clamp(2rem, 4vw, 4rem);
|
||||
gap: clamp(1.5rem, 3.6vw, 3rem);
|
||||
align-items: end;
|
||||
padding: clamp(3rem, 9vh, 6rem) 0 0;
|
||||
padding: clamp(2rem, 7vh, 4rem) 0 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@@ -188,10 +188,10 @@ img {
|
||||
|
||||
.hero__lead {
|
||||
max-width: 60ch;
|
||||
margin-top: 1.35rem;
|
||||
margin-top: 1rem;
|
||||
color: rgba(233, 240, 245, 0.8);
|
||||
font-size: clamp(1rem, 1.15vw, 1.1rem);
|
||||
line-height: 1.82;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.hero__actions,
|
||||
@@ -202,15 +202,15 @@ img {
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
margin-top: 1.8rem;
|
||||
margin-top: 1.35rem;
|
||||
}
|
||||
|
||||
.hero__microcopy {
|
||||
max-width: 58ch;
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
color: rgba(233, 240, 245, 0.68);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.72;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -259,7 +259,7 @@ img {
|
||||
}
|
||||
|
||||
.hero__aside {
|
||||
padding: 1.75rem 0 0 2rem;
|
||||
padding: 1.2rem 0 0 1.6rem;
|
||||
border-left: 1px solid rgba(233, 240, 245, 0.16);
|
||||
}
|
||||
|
||||
@@ -281,22 +281,22 @@ img {
|
||||
}
|
||||
|
||||
.aside__body {
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
color: rgba(233, 240, 245, 0.76);
|
||||
line-height: 1.8;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.aside__details {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
margin-top: 1.6rem;
|
||||
margin-top: 1.15rem;
|
||||
border-top: 1px solid rgba(233, 240, 245, 0.12);
|
||||
}
|
||||
|
||||
.aside__details div {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
padding: 1rem 0;
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid rgba(233, 240, 245, 0.12);
|
||||
}
|
||||
|
||||
@@ -315,7 +315,7 @@ img {
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: clamp(4.5rem, 9vw, 7rem) 0;
|
||||
padding: clamp(3.3rem, 6.5vw, 5rem) 0;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
@@ -338,7 +338,7 @@ img {
|
||||
|
||||
.section-intro {
|
||||
max-width: 780px;
|
||||
margin-bottom: 2.8rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-intro h2,
|
||||
@@ -355,9 +355,9 @@ img {
|
||||
.coverage__content p:last-child,
|
||||
.institutional__block p:last-child,
|
||||
.cta p {
|
||||
margin-top: 1.1rem;
|
||||
margin-top: 0.85rem;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.8;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.section-intro p:last-child,
|
||||
@@ -383,7 +383,7 @@ img {
|
||||
.institutional,
|
||||
.simple-grid {
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
gap: 0.95rem;
|
||||
}
|
||||
|
||||
.value-grid,
|
||||
@@ -415,11 +415,11 @@ img {
|
||||
|
||||
.info-card,
|
||||
.service-card {
|
||||
padding: 1.45rem;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.simple-card {
|
||||
padding: 1.15rem 1.2rem;
|
||||
padding: 1rem 1.05rem;
|
||||
}
|
||||
|
||||
.simple-card--strong {
|
||||
@@ -429,7 +429,7 @@ img {
|
||||
.info-card h3,
|
||||
.service-card h3,
|
||||
.process-card h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 0.55rem;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -446,7 +446,7 @@ img {
|
||||
.site-footer__copy,
|
||||
.site-footer__meta span {
|
||||
color: var(--text-soft);
|
||||
line-height: 1.75;
|
||||
line-height: 1.66;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
@@ -454,7 +454,7 @@ img {
|
||||
}
|
||||
|
||||
.project-item {
|
||||
padding: 1.15rem 1.2rem;
|
||||
padding: 0.95rem 1rem;
|
||||
}
|
||||
|
||||
.simple-card p,
|
||||
@@ -467,14 +467,14 @@ img {
|
||||
.process-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1.2rem;
|
||||
gap: 0.95rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.process-card {
|
||||
padding: 1.4rem;
|
||||
padding: 1.15rem;
|
||||
}
|
||||
|
||||
.process-card__step {
|
||||
@@ -489,7 +489,7 @@ img {
|
||||
.coverage {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
gap: 1.5rem;
|
||||
gap: 1.1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@@ -501,11 +501,43 @@ img {
|
||||
max-width: 58ch;
|
||||
}
|
||||
|
||||
.backup-note {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.85rem;
|
||||
align-items: start;
|
||||
margin-top: 1rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.backup-note__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.backup-note strong {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.backup-note p {
|
||||
margin-top: 0.3rem;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.coverage__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 88px;
|
||||
padding: 1rem 1.15rem;
|
||||
min-height: 76px;
|
||||
padding: 0.9rem 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -514,7 +546,7 @@ img {
|
||||
}
|
||||
|
||||
.institutional__block {
|
||||
padding: 1.8rem;
|
||||
padding: 1.45rem;
|
||||
}
|
||||
|
||||
.institutional__block--accent {
|
||||
@@ -530,7 +562,7 @@ img {
|
||||
.cta {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.82fr);
|
||||
gap: 1.5rem;
|
||||
gap: 1.1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@@ -545,7 +577,7 @@ img {
|
||||
}
|
||||
|
||||
.cta__panel {
|
||||
padding: 1.6rem;
|
||||
padding: 1.3rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(233, 240, 245, 0.14);
|
||||
box-shadow: none;
|
||||
@@ -560,15 +592,15 @@ img {
|
||||
}
|
||||
|
||||
.cta__panel p {
|
||||
margin-top: 0.95rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.cta__actions {
|
||||
margin-top: 1.4rem;
|
||||
margin-top: 1.05rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 1.5rem 0 2rem;
|
||||
padding: 1.15rem 0 1.5rem;
|
||||
background: #f2f6f9;
|
||||
border-top: 1px solid rgba(19, 35, 52, 0.08);
|
||||
}
|
||||
@@ -638,11 +670,11 @@ img {
|
||||
}
|
||||
|
||||
.hero__grid {
|
||||
padding-top: 2.5rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.hero__aside {
|
||||
padding: 1.5rem 0 0;
|
||||
padding: 1.2rem 0 0;
|
||||
border-left: 0;
|
||||
border-top: 1px solid rgba(233, 240, 245, 0.16);
|
||||
}
|
||||
@@ -663,12 +695,12 @@ img {
|
||||
|
||||
@media (min-width: 981px) and (max-height: 920px) {
|
||||
.hero {
|
||||
padding-bottom: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
min-height: calc(100svh - 2.5rem);
|
||||
min-height: calc(100dvh - 2.5rem);
|
||||
min-height: calc(100svh - 2rem);
|
||||
min-height: calc(100dvh - 2rem);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
@@ -676,7 +708,7 @@ img {
|
||||
}
|
||||
|
||||
.hero__grid {
|
||||
padding-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@@ -709,7 +741,7 @@ img {
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 2.5rem;
|
||||
padding-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
@@ -718,7 +750,7 @@ img {
|
||||
|
||||
.hero__grid {
|
||||
gap: 1.75rem;
|
||||
padding-top: 2rem;
|
||||
padding-top: 1.35rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
@@ -728,7 +760,7 @@ img {
|
||||
|
||||
.section-intro,
|
||||
.coverage__content {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.value-grid,
|
||||
|
||||
Reference in New Issue
Block a user