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
|
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érdida de contexto y mejora la continuidad técnica.
|
||||||
</p>
|
</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>
|
</div>
|
||||||
|
|
||||||
<ul class="coverage__list">
|
<ul class="coverage__list">
|
||||||
|
|||||||
@@ -73,14 +73,14 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.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);
|
color: var(--text-inverse);
|
||||||
border-bottom: 1px solid var(--line-inverse);
|
border-bottom: 1px solid var(--line-inverse);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__inner {
|
.hero__inner {
|
||||||
min-height: calc(100svh - 4rem);
|
min-height: calc(100svh - 3rem);
|
||||||
min-height: calc(100dvh - 4rem);
|
min-height: calc(100dvh - 3rem);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
}
|
}
|
||||||
@@ -90,7 +90,7 @@ img {
|
|||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
padding: 0.15rem 0 1.5rem;
|
padding: 0.1rem 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
@@ -159,9 +159,9 @@ img {
|
|||||||
.hero__grid {
|
.hero__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
|
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;
|
align-items: end;
|
||||||
padding: clamp(3rem, 9vh, 6rem) 0 0;
|
padding: clamp(2rem, 7vh, 4rem) 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
@@ -188,10 +188,10 @@ img {
|
|||||||
|
|
||||||
.hero__lead {
|
.hero__lead {
|
||||||
max-width: 60ch;
|
max-width: 60ch;
|
||||||
margin-top: 1.35rem;
|
margin-top: 1rem;
|
||||||
color: rgba(233, 240, 245, 0.8);
|
color: rgba(233, 240, 245, 0.8);
|
||||||
font-size: clamp(1rem, 1.15vw, 1.1rem);
|
font-size: clamp(1rem, 1.15vw, 1.1rem);
|
||||||
line-height: 1.82;
|
line-height: 1.72;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__actions,
|
.hero__actions,
|
||||||
@@ -202,15 +202,15 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero__actions {
|
.hero__actions {
|
||||||
margin-top: 1.8rem;
|
margin-top: 1.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__microcopy {
|
.hero__microcopy {
|
||||||
max-width: 58ch;
|
max-width: 58ch;
|
||||||
margin-top: 1rem;
|
margin-top: 0.75rem;
|
||||||
color: rgba(233, 240, 245, 0.68);
|
color: rgba(233, 240, 245, 0.68);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1.72;
|
line-height: 1.62;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
@@ -259,7 +259,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero__aside {
|
.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);
|
border-left: 1px solid rgba(233, 240, 245, 0.16);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -281,22 +281,22 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.aside__body {
|
.aside__body {
|
||||||
margin-top: 1rem;
|
margin-top: 0.75rem;
|
||||||
color: rgba(233, 240, 245, 0.76);
|
color: rgba(233, 240, 245, 0.76);
|
||||||
line-height: 1.8;
|
line-height: 1.68;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside__details {
|
.aside__details {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
margin-top: 1.6rem;
|
margin-top: 1.15rem;
|
||||||
border-top: 1px solid rgba(233, 240, 245, 0.12);
|
border-top: 1px solid rgba(233, 240, 245, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside__details div {
|
.aside__details div {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.35rem;
|
gap: 0.35rem;
|
||||||
padding: 1rem 0;
|
padding: 0.8rem 0;
|
||||||
border-bottom: 1px solid rgba(233, 240, 245, 0.12);
|
border-bottom: 1px solid rgba(233, 240, 245, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -315,7 +315,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
padding: clamp(4.5rem, 9vw, 7rem) 0;
|
padding: clamp(3.3rem, 6.5vw, 5rem) 0;
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: rgba(255, 255, 255, 0.98);
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
@@ -338,7 +338,7 @@ img {
|
|||||||
|
|
||||||
.section-intro {
|
.section-intro {
|
||||||
max-width: 780px;
|
max-width: 780px;
|
||||||
margin-bottom: 2.8rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-intro h2,
|
.section-intro h2,
|
||||||
@@ -355,9 +355,9 @@ img {
|
|||||||
.coverage__content p:last-child,
|
.coverage__content p:last-child,
|
||||||
.institutional__block p:last-child,
|
.institutional__block p:last-child,
|
||||||
.cta p {
|
.cta p {
|
||||||
margin-top: 1.1rem;
|
margin-top: 0.85rem;
|
||||||
color: var(--text-soft);
|
color: var(--text-soft);
|
||||||
line-height: 1.8;
|
line-height: 1.72;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-intro p:last-child,
|
.section-intro p:last-child,
|
||||||
@@ -383,7 +383,7 @@ img {
|
|||||||
.institutional,
|
.institutional,
|
||||||
.simple-grid {
|
.simple-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.2rem;
|
gap: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value-grid,
|
.value-grid,
|
||||||
@@ -415,11 +415,11 @@ img {
|
|||||||
|
|
||||||
.info-card,
|
.info-card,
|
||||||
.service-card {
|
.service-card {
|
||||||
padding: 1.45rem;
|
padding: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-card {
|
.simple-card {
|
||||||
padding: 1.15rem 1.2rem;
|
padding: 1rem 1.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-card--strong {
|
.simple-card--strong {
|
||||||
@@ -429,7 +429,7 @@ img {
|
|||||||
.info-card h3,
|
.info-card h3,
|
||||||
.service-card h3,
|
.service-card h3,
|
||||||
.process-card h3 {
|
.process-card h3 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.55rem;
|
||||||
font-size: 1.08rem;
|
font-size: 1.08rem;
|
||||||
font-weight: 750;
|
font-weight: 750;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
@@ -446,7 +446,7 @@ img {
|
|||||||
.site-footer__copy,
|
.site-footer__copy,
|
||||||
.site-footer__meta span {
|
.site-footer__meta span {
|
||||||
color: var(--text-soft);
|
color: var(--text-soft);
|
||||||
line-height: 1.75;
|
line-height: 1.66;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-grid {
|
.service-grid {
|
||||||
@@ -454,7 +454,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.project-item {
|
.project-item {
|
||||||
padding: 1.15rem 1.2rem;
|
padding: 0.95rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-card p,
|
.simple-card p,
|
||||||
@@ -467,14 +467,14 @@ img {
|
|||||||
.process-grid {
|
.process-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
gap: 1.2rem;
|
gap: 0.95rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-card {
|
.process-card {
|
||||||
padding: 1.4rem;
|
padding: 1.15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-card__step {
|
.process-card__step {
|
||||||
@@ -489,7 +489,7 @@ img {
|
|||||||
.coverage {
|
.coverage {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||||
gap: 1.5rem;
|
gap: 1.1rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -501,11 +501,43 @@ img {
|
|||||||
max-width: 58ch;
|
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 {
|
.coverage__item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 88px;
|
min-height: 76px;
|
||||||
padding: 1rem 1.15rem;
|
padding: 0.9rem 1rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -514,7 +546,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.institutional__block {
|
.institutional__block {
|
||||||
padding: 1.8rem;
|
padding: 1.45rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.institutional__block--accent {
|
.institutional__block--accent {
|
||||||
@@ -530,7 +562,7 @@ img {
|
|||||||
.cta {
|
.cta {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.82fr);
|
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.82fr);
|
||||||
gap: 1.5rem;
|
gap: 1.1rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -545,7 +577,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cta__panel {
|
.cta__panel {
|
||||||
padding: 1.6rem;
|
padding: 1.3rem;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
border-color: rgba(233, 240, 245, 0.14);
|
border-color: rgba(233, 240, 245, 0.14);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -560,15 +592,15 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cta__panel p {
|
.cta__panel p {
|
||||||
margin-top: 0.95rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta__actions {
|
.cta__actions {
|
||||||
margin-top: 1.4rem;
|
margin-top: 1.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
padding: 1.5rem 0 2rem;
|
padding: 1.15rem 0 1.5rem;
|
||||||
background: #f2f6f9;
|
background: #f2f6f9;
|
||||||
border-top: 1px solid rgba(19, 35, 52, 0.08);
|
border-top: 1px solid rgba(19, 35, 52, 0.08);
|
||||||
}
|
}
|
||||||
@@ -638,11 +670,11 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero__grid {
|
.hero__grid {
|
||||||
padding-top: 2.5rem;
|
padding-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__aside {
|
.hero__aside {
|
||||||
padding: 1.5rem 0 0;
|
padding: 1.2rem 0 0;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-top: 1px solid rgba(233, 240, 245, 0.16);
|
border-top: 1px solid rgba(233, 240, 245, 0.16);
|
||||||
}
|
}
|
||||||
@@ -663,12 +695,12 @@ img {
|
|||||||
|
|
||||||
@media (min-width: 981px) and (max-height: 920px) {
|
@media (min-width: 981px) and (max-height: 920px) {
|
||||||
.hero {
|
.hero {
|
||||||
padding-bottom: 2.5rem;
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__inner {
|
.hero__inner {
|
||||||
min-height: calc(100svh - 2.5rem);
|
min-height: calc(100svh - 2rem);
|
||||||
min-height: calc(100dvh - 2.5rem);
|
min-height: calc(100dvh - 2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
@@ -676,7 +708,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero__grid {
|
.hero__grid {
|
||||||
padding-top: 2rem;
|
padding-top: 1.5rem;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -709,7 +741,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
padding-bottom: 2.5rem;
|
padding-bottom: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__inner {
|
.hero__inner {
|
||||||
@@ -718,7 +750,7 @@ img {
|
|||||||
|
|
||||||
.hero__grid {
|
.hero__grid {
|
||||||
gap: 1.75rem;
|
gap: 1.75rem;
|
||||||
padding-top: 2rem;
|
padding-top: 1.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
@@ -728,7 +760,7 @@ img {
|
|||||||
|
|
||||||
.section-intro,
|
.section-intro,
|
||||||
.coverage__content {
|
.coverage__content {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value-grid,
|
.value-grid,
|
||||||
|
|||||||
Reference in New Issue
Block a user