Update landing page: dynamic hero, live badge, and improved styles
This commit is contained in:
@ -1,103 +1,171 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="minimal-landing">
|
<div class="landing">
|
||||||
<!-- Clean Navbar -->
|
|
||||||
<nav class="nav-minimal" :class="{ 'scrolled': scrolled }">
|
<!-- ── Navbar ── -->
|
||||||
<div class="nav-inner">
|
<nav class="nav" :class="{ 'nav--solid': scrolled }">
|
||||||
<div class="brand">
|
<div class="nav__inner">
|
||||||
<img src="/titulosib.png" alt="SIB Logo" class="brand-logo-img" />
|
<img src="/titulosib.png" alt="SIB" class="nav__logo" />
|
||||||
</div>
|
<div class="nav__right">
|
||||||
<div class="nav-links">
|
<button class="nav__link" @click="scrollToInstall">{{ t('landing.hero.howToInstall') }}</button>
|
||||||
<button class="nav-btn" @click="scrollToInstall">{{ t('landing.hero.howToInstall') }}</button>
|
<button class="cta-pill cta-pill--sm" @click="launchApp">
|
||||||
<button class="btn-yellow-sm" @click="launchApp">{{ t('landing.hero.launchApp') }}</button>
|
{{ t('landing.hero.launchApp') }} <span>↗</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Minimalist Hero -->
|
<!-- ── Hero ── -->
|
||||||
<header class="hero-minimal">
|
<header class="hero">
|
||||||
<div class="hero-overlay"></div>
|
<!-- Background photo -->
|
||||||
|
<div class="hero__photo">
|
||||||
<div class="hero-content">
|
<img src="/landing-bg-bus.png" alt="" />
|
||||||
<h1 class="hero-title" data-aos="fade-up">
|
<div class="hero__photo-scrim"></div>
|
||||||
{{ t('landing.hero.title') }}
|
</div>
|
||||||
|
|
||||||
|
<!-- Diagonal accent slash -->
|
||||||
|
<div class="hero__slash"></div>
|
||||||
|
|
||||||
|
<!-- Live badge -->
|
||||||
|
<div class="hero__badge" data-aos="fade-right">
|
||||||
|
<span class="hero__badge-dot"></span>
|
||||||
|
<span>{{ t('landing.hero.live') || 'EN VIVO' }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main copy — left-aligned, huge -->
|
||||||
|
<div class="hero__copy">
|
||||||
|
<h1 class="hero__h1" data-aos="fade-up">
|
||||||
|
<span class="hero__h1-outline">{{ t('landing.hero.titleLine1') || 'SABÉS' }}</span>
|
||||||
|
<span class="hero__h1-solid">{{ t('landing.hero.titleLine2') || 'DÓNDE' }}</span>
|
||||||
|
<span class="hero__h1-outline">{{ t('landing.hero.titleLine3') || 'ESTÁ' }}</span>
|
||||||
|
<span class="hero__h1-accent">{{ t('landing.hero.titleLine4') || 'TU BUS.' }}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
|
<p class="hero__tagline" data-aos="fade-up" data-aos-delay="150">
|
||||||
{{ t('landing.hero.tagline') }}
|
{{ t('landing.hero.tagline') || 'GPS en tiempo real · Ofertas locales · Sin descarga' }}
|
||||||
</p>
|
</p>
|
||||||
<div class="hero-cta" data-aos="fade-up" data-aos-delay="200">
|
<div class="hero__actions" data-aos="fade-up" data-aos-delay="280">
|
||||||
<button class="btn-yellow-lg" @click="launchApp">
|
<button class="cta-pill cta-pill--lg" @click="launchApp">
|
||||||
{{ t('landing.hero.launchApp') }}
|
{{ t('landing.hero.launchApp') }} <span class="cta-pill__arrow">↗</span>
|
||||||
<span class="material-icons">arrow_forward</span>
|
</button>
|
||||||
|
<button class="ghost-btn" @click="scrollToInstall">
|
||||||
|
{{ t('landing.hero.howToInstall') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Vertical route indicator — decorative -->
|
||||||
|
<div class="hero__route" aria-hidden="true">
|
||||||
|
<div class="hero__route-dot hero__route-dot--top"></div>
|
||||||
|
<div class="hero__route-line"></div>
|
||||||
|
<div class="hero__route-dot hero__route-dot--bottom"></div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Refined Features Grid (No Cards) -->
|
<!-- ── Ticker ── -->
|
||||||
<section class="features-minimal">
|
<div class="ticker" aria-hidden="true">
|
||||||
<div class="features-grid">
|
<div class="ticker__track">
|
||||||
<div class="feature-item" data-aos="fade-up">
|
<span v-for="i in 8" :key="i" class="ticker__item">
|
||||||
<span class="material-icons feature-icon">explore</span>
|
GPS EN VIVO <em>·</em> SIN DESCARGA <em>·</em> OFERTAS LOCALES <em>·</em>
|
||||||
<h3>{{ t('landing.features.realtime') }}</h3>
|
</span>
|
||||||
<p>{{ t('landing.features.realtimeDesc') }}</p>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── Features ── -->
|
||||||
|
<section class="feats">
|
||||||
|
<div class="feats__inner">
|
||||||
|
|
||||||
|
<!-- Label col -->
|
||||||
|
<div class="feats__label" data-aos="fade-right">
|
||||||
|
<span class="tag">{{ t('landing.features.sectionTag') || 'FUNCIONALIDADES' }}</span>
|
||||||
|
<h2 class="feats__h2">
|
||||||
|
{{ t('landing.features.heading1') || 'Todo lo' }}<br>
|
||||||
|
<em>{{ t('landing.features.heading2') || 'que necesitás' }}</em>
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item" data-aos="fade-up" data-aos-delay="100">
|
|
||||||
<span class="material-icons feature-icon">local_offer</span>
|
<!-- Items col -->
|
||||||
<h3>{{ t('landing.features.localOffers') }}</h3>
|
<div class="feats__list">
|
||||||
<p>{{ t('landing.features.localOffersDesc') }}</p>
|
<div class="feat" data-aos="fade-up" data-aos-delay="0">
|
||||||
|
<div class="feat__num">01</div>
|
||||||
|
<div class="feat__body">
|
||||||
|
<h3>{{ t('landing.features.realtime') || 'Tiempo real' }}</h3>
|
||||||
|
<p>{{ t('landing.features.realtimeDesc') || 'GPS de cada bus, actualizado al segundo.' }}</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-icons feat__icon">explore</span>
|
||||||
|
</div>
|
||||||
|
<div class="feat" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
<div class="feat__num">02</div>
|
||||||
|
<div class="feat__body">
|
||||||
|
<h3>{{ t('landing.features.localOffers') || 'Ofertas locales' }}</h3>
|
||||||
|
<p>{{ t('landing.features.localOffersDesc') || 'Descuentos de negocios cerca de tu parada.' }}</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-icons feat__icon">local_offer</span>
|
||||||
|
</div>
|
||||||
|
<div class="feat" data-aos="fade-up" data-aos-delay="160">
|
||||||
|
<div class="feat__num">03</div>
|
||||||
|
<div class="feat__body">
|
||||||
|
<h3>{{ t('landing.features.noDownload') || 'Sin Play Store' }}</h3>
|
||||||
|
<p>{{ t('landing.features.noDownloadDesc') || 'Instalás como PWA directo desde el navegador.' }}</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-icons feat__icon">phonelink_setup</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item" data-aos="fade-up" data-aos-delay="200">
|
|
||||||
<span class="material-icons feature-icon">phonelink_setup</span>
|
</div>
|
||||||
<h3>{{ t('landing.features.noDownload') }}</h3>
|
</section>
|
||||||
<p>{{ t('landing.features.noDownloadDesc') }}</p>
|
|
||||||
|
<!-- ── Install ── -->
|
||||||
|
<section id="install-guide" class="install">
|
||||||
|
<div class="install__bg">
|
||||||
|
<img src="/landing-install-bg.png" alt="" />
|
||||||
|
<div class="install__bg-scrim"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="install__inner">
|
||||||
|
<div class="install__header" data-aos="fade-up">
|
||||||
|
<span class="tag tag--yellow">{{ t('landing.install.sectionTag') || 'INSTALACIÓN' }}</span>
|
||||||
|
<h2 class="install__h2">
|
||||||
|
{{ t('landing.install.heading1') || 'En menos de' }}<br>
|
||||||
|
<em>{{ t('landing.install.heading2') || '30 segundos' }}</em>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="install__cols">
|
||||||
|
<div class="install-card" data-aos="fade-up" data-aos-delay="0">
|
||||||
|
<div class="install-card__platform">
|
||||||
|
<span class="material-icons">apple</span> iOS · Safari
|
||||||
|
</div>
|
||||||
|
<ol class="steps">
|
||||||
|
<li>{{ t('landing.install.iosStep1') || 'Abrí esta página en Safari' }}</li>
|
||||||
|
<li>{{ t('landing.install.iosStep2') || 'Tocá el botón Compartir ↑' }}</li>
|
||||||
|
<li>{{ t('landing.install.iosStep3') || 'Elegí "Agregar a inicio"' }}</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="install-card" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<div class="install-card__platform">
|
||||||
|
<span class="material-icons">android</span> Android · Chrome
|
||||||
|
</div>
|
||||||
|
<ol class="steps">
|
||||||
|
<li>{{ t('landing.install.androidStep1') || 'Abrí esta página en Chrome' }}</li>
|
||||||
|
<li>{{ t('landing.install.androidStep2') || 'Tocá el menú ⋮ arriba' }}</li>
|
||||||
|
<li>{{ t('landing.install.androidStep3') || 'Elegí "Instalar aplicación"' }}</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="install__cta" data-aos="fade-up" data-aos-delay="180">
|
||||||
|
<button class="cta-pill cta-pill--lg" @click="launchApp">
|
||||||
|
{{ t('landing.hero.launchApp') }} <span class="cta-pill__arrow">↗</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Simple Installation Guide -->
|
<!-- ── Footer ── -->
|
||||||
<section id="install-guide" class="install-section">
|
<footer class="footer">
|
||||||
<div class="install-container">
|
<img src="/titulosib.png" alt="SIB" class="footer__logo" />
|
||||||
<h2 class="install-title">{{ t('landing.install.title') }}</h2>
|
<p class="footer__copy">{{ t('landing.footer.rights') || '© 2025 SIB · Todos los derechos reservados' }}</p>
|
||||||
|
|
||||||
<div class="install-grid">
|
|
||||||
<!-- iOS -->
|
|
||||||
<div class="install-col">
|
|
||||||
<div class="platform-header">
|
|
||||||
<span class="material-icons">apple</span>
|
|
||||||
<h3>iOS (Safari)</h3>
|
|
||||||
</div>
|
|
||||||
<ol class="step-list-minimal">
|
|
||||||
<li>{{ t('landing.install.iosStep1') }}</li>
|
|
||||||
<li>{{ t('landing.install.iosStep2') }}</li>
|
|
||||||
<li>{{ t('landing.install.iosStep3') }}</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Android -->
|
|
||||||
<div class="install-col">
|
|
||||||
<div class="platform-header">
|
|
||||||
<span class="material-icons">android</span>
|
|
||||||
<h3>Android (Chrome)</h3>
|
|
||||||
</div>
|
|
||||||
<ol class="step-list-minimal">
|
|
||||||
<li>{{ t('landing.install.androidStep1') }}</li>
|
|
||||||
<li>{{ t('landing.install.androidStep2') }}</li>
|
|
||||||
<li>{{ t('landing.install.androidStep3') }}</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Minimal Footer -->
|
|
||||||
<footer class="footer-minimal">
|
|
||||||
<div class="footer-inner">
|
|
||||||
<div class="footer-logo">
|
|
||||||
<img src="/titulosib.png" alt="SIB" class="footer-logo-img" />
|
|
||||||
</div>
|
|
||||||
<p class="footer-rights">{{ t('landing.footer.rights') }}</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -110,331 +178,460 @@ const router = useRouter()
|
|||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const scrolled = ref(false)
|
const scrolled = ref(false)
|
||||||
|
|
||||||
const handleScroll = () => {
|
const handleScroll = () => { scrolled.value = window.scrollY > 50 }
|
||||||
scrolled.value = window.scrollY > 50
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('scroll', handleScroll)
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
const isStandalone = window.matchMedia('(display-mode: standalone)').matches
|
||||||
// PWA Detection
|
|| (window.navigator as any).standalone === true
|
||||||
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true;
|
if (isStandalone) router.replace('/splash')
|
||||||
if (isStandalone) {
|
|
||||||
router.replace('/splash')
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
onUnmounted(() => window.removeEventListener('scroll', handleScroll))
|
||||||
|
|
||||||
onUnmounted(() => {
|
const launchApp = () => router.push('/splash')
|
||||||
window.removeEventListener('scroll', handleScroll)
|
const scrollToInstall = () => document.getElementById('install-guide')?.scrollIntoView({ behavior: 'smooth' })
|
||||||
})
|
|
||||||
|
|
||||||
const launchApp = () => {
|
|
||||||
router.push('/splash')
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollToInstall = () => {
|
|
||||||
document.getElementById('install-guide')?.scrollIntoView({ behavior: 'smooth' })
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.minimal-landing {
|
/* ══ TOKENS ══════════════════════════════════════════════ */
|
||||||
background-color: #000000;
|
.landing {
|
||||||
color: #ffffff;
|
--y: #fee715;
|
||||||
font-family: 'Space Grotesk', sans-serif;
|
--y10: rgba(254,231,21,.10);
|
||||||
|
--y20: rgba(254,231,21,.20);
|
||||||
|
--ink: #060606;
|
||||||
|
--off: #0e0e0e;
|
||||||
|
--dim: rgba(255,255,255,.40);
|
||||||
|
--hr: rgba(255,255,255,.07);
|
||||||
|
|
||||||
|
background: var(--ink);
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar */
|
/* ══ NAV ═════════════════════════════════════════════════ */
|
||||||
.nav-minimal {
|
.nav {
|
||||||
position: fixed;
|
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
|
||||||
top: 0;
|
height: 72px; display: flex; align-items: center; padding: 0 32px;
|
||||||
left: 0;
|
transition: background .25s, border-color .25s;
|
||||||
right: 0;
|
|
||||||
height: 140px;
|
|
||||||
z-index: 1000;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
|
|
||||||
}
|
}
|
||||||
|
.nav--solid {
|
||||||
.nav-minimal.scrolled {
|
background: rgba(6,6,6,.90);
|
||||||
background: rgba(0, 0, 0, 0.85);
|
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
|
||||||
backdrop-filter: blur(25px);
|
border-bottom: 1px solid var(--hr);
|
||||||
-webkit-backdrop-filter: blur(25px);
|
|
||||||
height: 100px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
||||||
}
|
}
|
||||||
|
.nav__inner {
|
||||||
.nav-inner {
|
max-width: 1280px; margin: 0 auto; width: 100%;
|
||||||
max-width: 1200px;
|
display: flex; justify-content: space-between; align-items: center;
|
||||||
margin: 0 auto;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
}
|
||||||
|
.nav__logo { height: 40px; width: auto; object-fit: contain; }
|
||||||
.brand-logo-img {
|
.nav--solid .nav__logo { height: 32px; }
|
||||||
height: 100px; /* Doble del tamaño anterior */
|
.nav__right { display: flex; align-items: center; gap: 24px; }
|
||||||
width: auto;
|
.nav__link {
|
||||||
object-fit: contain;
|
background: none; border: none; color: var(--dim);
|
||||||
transition: height 0.3s ease;
|
font-family: inherit; font-size: 1rem; font-weight: 600;
|
||||||
|
letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
|
||||||
|
transition: color .2s;
|
||||||
}
|
}
|
||||||
|
.nav__link:hover { color: #fff; }
|
||||||
|
|
||||||
.nav-minimal.scrolled .brand-logo-img {
|
/* ══ CTA PILL ════════════════════════════════════════════ */
|
||||||
height: 70px;
|
.cta-pill {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
background: var(--y); color: #000;
|
||||||
|
font-family: inherit; font-weight: 800; text-transform: uppercase;
|
||||||
|
letter-spacing: .06em; border: none; cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
|
||||||
}
|
}
|
||||||
|
.cta-pill--sm { font-size: .85rem; padding: 9px 20px; }
|
||||||
|
.cta-pill--lg { font-size: 1.15rem; padding: 18px 42px; }
|
||||||
|
.cta-pill__arrow { display: inline-block; transition: transform .2s; }
|
||||||
|
.cta-pill:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(254,231,21,.28); }
|
||||||
|
.cta-pill:hover .cta-pill__arrow { transform: translate(3px,-3px); }
|
||||||
|
|
||||||
.nav-links {
|
.ghost-btn {
|
||||||
display: flex;
|
background: none;
|
||||||
align-items: center;
|
border: 1.5px solid var(--hr);
|
||||||
gap: 32px;
|
color: var(--dim);
|
||||||
|
font-family: inherit; font-size: 1rem; font-weight: 600;
|
||||||
|
text-transform: uppercase; letter-spacing: .06em;
|
||||||
|
padding: 17px 36px; border-radius: 4px; cursor: pointer;
|
||||||
|
transition: border-color .2s, color .2s;
|
||||||
}
|
}
|
||||||
|
.ghost-btn:hover { border-color: rgba(255,255,255,.3); color: #fff; }
|
||||||
|
|
||||||
.nav-btn {
|
/* ══ HERO ════════════════════════════════════════════════ */
|
||||||
background: transparent;
|
.hero {
|
||||||
border: none;
|
position: relative; min-height: 100vh;
|
||||||
color: rgba(255, 255, 255, 0.6);
|
display: flex; align-items: flex-end;
|
||||||
font-weight: 600;
|
padding: 0 6vw 100px;
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-yellow-sm {
|
|
||||||
background: #fee715;
|
|
||||||
color: #000000;
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: 100px;
|
|
||||||
font-weight: 700;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-yellow-sm:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero */
|
|
||||||
.hero-minimal {
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 24px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-image: url('/landing-bg-bus.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-overlay {
|
/* Photo bg */
|
||||||
position: absolute;
|
.hero__photo { position: absolute; inset: 0; }
|
||||||
inset: 0;
|
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(.5); }
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
|
.hero__photo-scrim {
|
||||||
z-index: -1;
|
position: absolute; inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(to right, rgba(6,6,6,.92) 40%, rgba(6,6,6,.35) 100%),
|
||||||
|
linear-gradient(to top, rgba(6,6,6,.9) 0%, transparent 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content {
|
/* Diagonal slash accent */
|
||||||
position: relative;
|
.hero__slash {
|
||||||
z-index: 1;
|
position: absolute; bottom: -2px; right: -2px;
|
||||||
padding-top: 200px; /* Bajar el texto aún más para el logo gigante */
|
width: 55vw; height: 45vh;
|
||||||
|
background: var(--y);
|
||||||
|
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||||
|
opacity: .06;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
/* Live badge */
|
||||||
font-size: clamp(3.5rem, 12vw, 8rem);
|
.hero__badge {
|
||||||
|
position: absolute; top: 110px; left: 6vw; z-index: 2;
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
border: 1px solid var(--y20);
|
||||||
|
background: var(--y10);
|
||||||
|
color: var(--y);
|
||||||
|
font-size: .72rem; font-weight: 700; letter-spacing: .16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 7px 16px; border-radius: 2px;
|
||||||
|
}
|
||||||
|
.hero__badge-dot {
|
||||||
|
width: 6px; height: 6px; border-radius: 50%;
|
||||||
|
background: var(--y);
|
||||||
|
animation: blink 1.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes blink {
|
||||||
|
0%,100% { opacity:1; } 50% { opacity:.25; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Copy */
|
||||||
|
.hero__copy { position: relative; z-index: 2; max-width: 860px; }
|
||||||
|
|
||||||
|
.hero__h1 {
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
font-size: clamp(5rem, 14vw, 13rem);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 0.95;
|
line-height: .88;
|
||||||
letter-spacing: -0.06em;
|
letter-spacing: -.02em;
|
||||||
margin-bottom: 24px;
|
text-transform: uppercase;
|
||||||
}
|
|
||||||
|
|
||||||
.hero-subtitle {
|
|
||||||
font-size: clamp(1.2rem, 3vw, 1.8rem);
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto 56px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-yellow-lg {
|
|
||||||
background: #fee715;
|
|
||||||
color: #000000;
|
|
||||||
padding: 24px 64px;
|
|
||||||
border-radius: 100px;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 800;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-yellow-lg:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 20px 40px rgba(254, 231, 21, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Features */
|
|
||||||
.features-minimal {
|
|
||||||
padding: 120px 24px;
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
font-size: 40px;
|
|
||||||
color: #fee715;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item h3 {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item p {
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
font-size: 1.15rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Install Guide */
|
|
||||||
.install-section {
|
|
||||||
padding: 160px 24px;
|
|
||||||
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('/landing-install-bg.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-container {
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-title {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 80px;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
.hero__h1-outline {
|
||||||
.platform-header .material-icons {
|
-webkit-text-stroke: 2px rgba(255,255,255,.25);
|
||||||
font-size: 32px;
|
color: transparent;
|
||||||
color: #fee715;
|
}
|
||||||
|
.hero__h1-solid { color: #fff; }
|
||||||
|
.hero__h1-accent {
|
||||||
|
color: var(--y);
|
||||||
|
-webkit-text-stroke: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-header h3 {
|
.hero__tagline {
|
||||||
font-size: 1.5rem;
|
font-size: clamp(.85rem, 1.8vw, 1.1rem);
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
|
color: var(--dim);
|
||||||
|
letter-spacing: .12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-list-minimal {
|
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
/* Route indicator (decorative) */
|
||||||
counter-reset: step-counter;
|
.hero__route {
|
||||||
|
position: absolute; right: 8vw; bottom: 90px; z-index: 2;
|
||||||
|
display: flex; flex-direction: column; align-items: center; gap: 0;
|
||||||
|
}
|
||||||
|
.hero__route-dot {
|
||||||
|
width: 12px; height: 12px; border-radius: 50%;
|
||||||
|
background: var(--y); border: 2px solid var(--ink);
|
||||||
|
}
|
||||||
|
.hero__route-line {
|
||||||
|
width: 2px; height: 80px;
|
||||||
|
background: linear-gradient(to bottom, var(--y), rgba(254,231,21,.1));
|
||||||
|
}
|
||||||
|
.hero__route-dot--bottom { background: rgba(254,231,21,.25); }
|
||||||
|
|
||||||
|
/* ══ TICKER ══════════════════════════════════════════════ */
|
||||||
|
.ticker {
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--y);
|
||||||
|
color: #000;
|
||||||
|
padding: 14px 0;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
.ticker__track {
|
||||||
|
display: flex; gap: 0;
|
||||||
|
animation: ticker 22s linear infinite;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ticker__item {
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
font-size: 1rem; font-weight: 700;
|
||||||
|
letter-spacing: .1em; text-transform: uppercase;
|
||||||
|
padding: 0 40px; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.ticker__item em { font-style: normal; opacity: .5; }
|
||||||
|
@keyframes ticker {
|
||||||
|
from { transform: translateX(0); }
|
||||||
|
to { transform: translateX(-50%); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-list-minimal li {
|
/* ══ FEATURES ════════════════════════════════════════════ */
|
||||||
counter-increment: step-counter;
|
.feats { padding: 120px 6vw; }
|
||||||
position: relative;
|
.feats__inner {
|
||||||
padding-left: 48px;
|
max-width: 1280px; margin: 0 auto;
|
||||||
margin-bottom: 24px;
|
display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start;
|
||||||
color: rgba(255, 255, 255, 0.6);
|
}
|
||||||
font-size: 1.2rem;
|
.feats__label { position: sticky; top: 120px; }
|
||||||
line-height: 1.4;
|
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .7rem; font-weight: 700; letter-spacing: .18em;
|
||||||
|
text-transform: uppercase; color: var(--dim);
|
||||||
|
border: 1px solid var(--hr); padding: 5px 12px; border-radius: 2px;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.tag--yellow { color: var(--y); border-color: var(--y20); }
|
||||||
|
|
||||||
|
.feats__h2 {
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
font-size: clamp(2.8rem, 5vw, 4.5rem);
|
||||||
|
font-weight: 800; line-height: .95;
|
||||||
|
letter-spacing: -.02em; text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.feats__h2 em { font-style: normal; color: var(--y); }
|
||||||
|
|
||||||
|
.feats__list { display: flex; flex-direction: column; gap: 0; }
|
||||||
|
|
||||||
|
.feat {
|
||||||
|
display: grid; grid-template-columns: 72px 1fr 48px;
|
||||||
|
align-items: center; gap: 28px;
|
||||||
|
padding: 40px 0;
|
||||||
|
border-bottom: 1px solid var(--hr);
|
||||||
|
transition: background .2s;
|
||||||
|
}
|
||||||
|
.feat:first-child { border-top: 1px solid var(--hr); }
|
||||||
|
.feat:hover { background: rgba(255,255,255,.02); }
|
||||||
|
|
||||||
|
.feat__num {
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
font-size: 2.6rem; font-weight: 800;
|
||||||
|
color: rgba(255,255,255,.08); letter-spacing: -.03em;
|
||||||
|
}
|
||||||
|
.feat__body h3 {
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
font-size: 1.6rem; font-weight: 700;
|
||||||
|
letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.feat__body p { font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--dim); line-height: 1.6; }
|
||||||
|
.feat__icon { font-size: 28px; color: var(--y); opacity: .5; }
|
||||||
|
.feat:hover .feat__icon { opacity: 1; }
|
||||||
|
|
||||||
|
/* ══ INSTALL ═════════════════════════════════════════════ */
|
||||||
|
.install {
|
||||||
|
position: relative; padding: 130px 6vw; overflow: hidden;
|
||||||
|
}
|
||||||
|
.install__bg { position: absolute; inset: 0; }
|
||||||
|
.install__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.2) brightness(.25); }
|
||||||
|
.install__bg-scrim {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
background: linear-gradient(to bottom, rgba(6,6,6,.65), rgba(6,6,6,.95));
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-list-minimal li::before {
|
.install__inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
|
||||||
content: counter(step-counter);
|
.install__header { margin-bottom: 64px; }
|
||||||
position: absolute;
|
.install__h2 {
|
||||||
left: 0;
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
top: 0;
|
font-size: clamp(2.8rem, 5vw, 4.5rem);
|
||||||
width: 32px;
|
font-weight: 800; line-height: .95; letter-spacing: -.02em; text-transform: uppercase;
|
||||||
height: 32px;
|
}
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
.install__h2 em { font-style: normal; color: var(--y); }
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
.install__cols {
|
||||||
align-items: center;
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
justify-content: center;
|
gap: 24px; margin-bottom: 64px;
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fee715;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
.install-card {
|
||||||
.footer-minimal {
|
background: rgba(255,255,255,.04);
|
||||||
padding: 80px 24px;
|
border: 1px solid var(--hr); border-radius: 6px; padding: 44px 40px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
transition: border-color .3s;
|
||||||
|
}
|
||||||
|
.install-card:hover { border-color: var(--y20); }
|
||||||
|
|
||||||
|
.install-card__platform {
|
||||||
|
display: flex; align-items: center; gap: 12px;
|
||||||
|
font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
||||||
|
color: var(--y); margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.install-card__platform .material-icons { font-size: 24px; }
|
||||||
|
|
||||||
|
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
|
||||||
|
.steps li {
|
||||||
|
counter-increment: s;
|
||||||
|
position: relative; padding-left: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-family: 'DM Sans', sans-serif;
|
||||||
|
font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.55;
|
||||||
|
}
|
||||||
|
.steps li::before {
|
||||||
|
content: counter(s);
|
||||||
|
position: absolute; left: 0; top: 0;
|
||||||
|
width: 30px; height: 30px; border-radius: 50%;
|
||||||
|
background: var(--y10); border: 1px solid var(--y20);
|
||||||
|
color: var(--y); font-size: .8rem; font-weight: 800;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.steps li:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
.install__cta { text-align: center; }
|
||||||
|
|
||||||
|
/* ══ FOOTER ══════════════════════════════════════════════ */
|
||||||
|
.footer {
|
||||||
|
display: flex; justify-content: space-between; align-items: center;
|
||||||
|
padding: 48px 6vw;
|
||||||
|
border-top: 1px solid var(--hr);
|
||||||
|
flex-wrap: wrap; gap: 20px;
|
||||||
|
}
|
||||||
|
.footer__logo { height: 28px; opacity: .4; transition: opacity .3s; }
|
||||||
|
.footer__logo:hover { opacity: 1; }
|
||||||
|
.footer__copy { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: rgba(255,255,255,.2); }
|
||||||
|
|
||||||
|
/* ══ RESPONSIVE — MOBILE FIRST ═══════════════════════════ */
|
||||||
|
|
||||||
|
/* ── Tablet ─────────────────────────────────────── 768px+ */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
/* Nav */
|
||||||
|
.nav { padding: 0 32px; }
|
||||||
|
.nav__logo { height: 40px; }
|
||||||
|
.nav__link { display: block; }
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero { padding: 0 6vw 100px; align-items: flex-end; }
|
||||||
|
.hero__badge { top: 110px; left: 6vw; }
|
||||||
|
.hero__copy { max-width: 700px; }
|
||||||
|
.hero__h1 { font-size: clamp(5rem, 11vw, 10rem); }
|
||||||
|
.hero__tagline { font-size: 1rem; }
|
||||||
|
.hero__actions { flex-direction: row; flex-wrap: wrap; }
|
||||||
|
.hero__route { display: flex; }
|
||||||
|
|
||||||
|
/* Features */
|
||||||
|
.feats { padding: 120px 6vw; }
|
||||||
|
.feats__inner { grid-template-columns: 1fr 2fr; gap: 80px; }
|
||||||
|
.feats__label { position: sticky; top: 120px; }
|
||||||
|
.feat { grid-template-columns: 72px 1fr 48px; gap: 28px; }
|
||||||
|
.feat__icon { display: block; }
|
||||||
|
|
||||||
|
/* Install */
|
||||||
|
.install { padding: 130px 6vw; }
|
||||||
|
.install__cols { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.install-card { padding: 44px 40px; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer { flex-direction: row; text-align: left; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-inner {
|
/* ── Desktop ────────────────────────────────────── 1024px+ */
|
||||||
max-width: 1200px;
|
@media (min-width: 1024px) {
|
||||||
margin: 0 auto;
|
.hero__h1 { font-size: clamp(7rem, 13vw, 13rem); }
|
||||||
display: flex;
|
.feats__h2 { font-size: 4.5rem; }
|
||||||
justify-content: space-between;
|
.install__h2 { font-size: 4.5rem; }
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-logo-img {
|
/* ── Base mobile styles (aplican a todos) ──────── < 768px */
|
||||||
height: 35px;
|
@media (max-width: 767px) {
|
||||||
width: auto;
|
/* Nav */
|
||||||
filter: brightness(0.7);
|
.nav { padding: 0 18px; height: 62px; }
|
||||||
transition: filter 0.3s ease;
|
.nav__logo { height: 32px; }
|
||||||
}
|
.nav--solid .nav__logo { height: 28px; }
|
||||||
|
.nav__link { display: none; }
|
||||||
|
.nav__right { gap: 12px; }
|
||||||
|
.cta-pill--sm { font-size: .8rem; padding: 8px 16px; }
|
||||||
|
|
||||||
.footer-logo-img:hover {
|
/* Hero */
|
||||||
filter: brightness(1);
|
.hero {
|
||||||
}
|
padding: 80px 18px 72px;
|
||||||
|
align-items: flex-start;
|
||||||
|
min-height: 100svh; /* usa svh en mobile para respetar la barra del browser */
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.hero__badge {
|
||||||
|
top: 80px; left: 18px;
|
||||||
|
font-size: .68rem; padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.hero__copy { max-width: 100%; width: 100%; }
|
||||||
|
.hero__h1 {
|
||||||
|
font-size: clamp(3.4rem, 17vw, 5.5rem);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: .9;
|
||||||
|
}
|
||||||
|
.hero__h1-outline { -webkit-text-stroke: 1.5px rgba(255,255,255,.22); }
|
||||||
|
.hero__tagline {
|
||||||
|
font-size: .75rem; letter-spacing: .1em;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.hero__actions { flex-direction: column; gap: 12px; width: 100%; }
|
||||||
|
.cta-pill--lg { width: 100%; justify-content: center; font-size: 1rem; padding: 16px 24px; }
|
||||||
|
.ghost-btn { width: 100%; text-align: center; font-size: .9rem; padding: 14px 24px; }
|
||||||
|
.hero__route { display: none; }
|
||||||
|
.hero__slash { width: 70vw; height: 30vh; }
|
||||||
|
|
||||||
.footer-rights {
|
/* Ticker */
|
||||||
color: rgba(255, 255, 255, 0.3);
|
.ticker { padding: 11px 0; }
|
||||||
font-size: 0.9rem;
|
.ticker__item { font-size: .85rem; padding: 0 28px; }
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
/* Features */
|
||||||
.hero-title { font-size: 4rem; }
|
.feats { padding: 64px 18px; }
|
||||||
.features-grid { gap: 48px; }
|
.feats__inner {
|
||||||
.install-grid { gap: 64px; }
|
grid-template-columns: 1fr;
|
||||||
.btn-yellow-lg { width: 100%; justify-content: center; padding: 20px; }
|
gap: 36px;
|
||||||
.footer-inner { flex-direction: column; gap: 24px; text-align: center; }
|
}
|
||||||
|
.feats__label { position: static; }
|
||||||
|
.feats__h2 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
|
||||||
|
.feats__list { gap: 0; }
|
||||||
|
.feat {
|
||||||
|
grid-template-columns: 44px 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 28px 0;
|
||||||
|
}
|
||||||
|
.feat__num { font-size: 2rem; }
|
||||||
|
.feat__body h3 { font-size: 1.3rem; }
|
||||||
|
.feat__body p { font-size: .9rem; }
|
||||||
|
.feat__icon { display: none; }
|
||||||
|
|
||||||
|
/* Install */
|
||||||
|
.install { padding: 64px 18px; }
|
||||||
|
.install__header { margin-bottom: 44px; }
|
||||||
|
.install__h2 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
|
||||||
|
.install__cols {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 44px;
|
||||||
|
}
|
||||||
|
.install-card { padding: 28px 22px; }
|
||||||
|
.install-card__platform { font-size: 1rem; margin-bottom: 24px; }
|
||||||
|
.steps li { font-size: .92rem; padding-left: 42px; margin-bottom: 16px; }
|
||||||
|
.steps li::before { width: 26px; height: 26px; font-size: .75rem; }
|
||||||
|
.install__cta .cta-pill--lg { width: 100%; justify-content: center; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
padding: 36px 18px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.footer__logo { height: 26px; }
|
||||||
|
.footer__copy { font-size: .78rem; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user