feat: tipografía Quicksand (body) + Host Grotesk (titulares); Arista Pro solo en wordmark de marca

This commit is contained in:
Mauri
2026-06-09 10:48:58 -03:00
parent 46af1316de
commit e0becb9690
5 changed files with 35 additions and 9 deletions
+2 -2
View File
@@ -32,7 +32,7 @@ const legalLinks = [
<div class="md:col-span-4">
<a href={lang === 'en' ? '/en/' : '/'} class="inline-flex items-center gap-2.5 mb-4" aria-label="Hosting del Sur">
<img src="/logo/hds-mark.svg" alt="" width="36" height="36" class="h-9 w-9" aria-hidden="true" style="filter: brightness(0) invert(1);" />
<span class="text-lg font-display tracking-tight">
<span class="text-lg font-brand tracking-tight">
<span style="color: #EE7623;">hosting</span> del <span style="color: #EE7623;">sur</span>
</span>
</a>
@@ -103,7 +103,7 @@ const legalLinks = [
</div>
<div class="mt-12 pt-6 border-t flex flex-col sm:flex-row sm:justify-between gap-3 text-xs" style="border-color: #2A2520; color: #8A8580;">
<p>© {year} Hosting del Sur. {t('footer.copyright')}</p>
<p class="font-brand text-sm">© {year} hosting del sur. <span class="font-sans">{t('footer.copyright')}</span></p>
<p>{locationText}</p>
</div>
</div>
+1 -1
View File
@@ -41,7 +41,7 @@ const isActive = (href: string) => {
class="h-8 w-8"
aria-hidden="true"
/>
<span class="text-base font-display tracking-tight" style="color: var(--hds-fg);">
<span class="text-base font-brand tracking-tight" style="color: var(--hds-fg);">
<span style="color: var(--color-hds-naranja);">hosting</span> del <span style="color: var(--color-hds-naranja);">sur</span>
</span>
</a>
+10 -6
View File
@@ -9,10 +9,12 @@
font-display: swap;
}
@import "@fontsource/mulish/400.css";
@import "@fontsource/mulish/500.css";
@import "@fontsource/mulish/600.css";
@import "@fontsource/mulish/700.css";
@import "@fontsource-variable/host-grotesk";
@import "@fontsource/quicksand/300.css";
@import "@fontsource/quicksand/400.css";
@import "@fontsource/quicksand/500.css";
@import "@fontsource/quicksand/600.css";
@import "@fontsource/quicksand/700.css";
@import "@fontsource/cormorant-garamond/400.css";
@import "@fontsource/cormorant-garamond/500.css";
@@ -25,8 +27,9 @@
--color-hds-durazno: #FFCBA1;
--color-hds-tinta: #1A1612;
--font-display: 'Arista Pro Alternate', 'Mulish', system-ui, sans-serif;
--font-sans: 'Mulish', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-sans: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Host Grotesk', 'Quicksand', system-ui, sans-serif;
--font-brand: 'Arista Pro Alternate', 'Host Grotesk', system-ui, sans-serif;
--font-editorial: 'Cormorant Garamond', Georgia, serif;
--tracking-display: -0.02em;
@@ -89,6 +92,7 @@
@layer components {
.font-display { font-family: var(--font-display); }
.font-editorial { font-family: var(--font-editorial); }
.font-brand { font-family: var(--font-brand); letter-spacing: 0.01em; }
.eyebrow {
display: inline-flex;