/* ============================================================
FOLC HOME COFFEE — CSS BASE
Template: Tienda Nube / Río
Archivo: folc-base.css
Instrucciones: Subir vía FTP a /css/ y linkearlo en el
del layout principal (layout.html o base.html)
con:
============================================================ */
/* ============================================================
01. GOOGLE FONTS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Barlow+Condensed:wght@700;800&family=Inter:wght@300;400;500&display=swap');
/* ============================================================
02. VARIABLES — PALETA FOLC
============================================================ */
:root {
/* Colores principales */
--folc-black: #1c1c1a;
--folc-white: #ffffff;
--folc-cream: #f0ede8;
--folc-cream2: #e8e3dc;
--folc-wine: #7a1c1c;
--folc-green: #1a4d2e;
--folc-blue: #1a6070;
--folc-gray: #888888;
--folc-border: #dedad5;
/* Colores de productos (header de cards) */
--folc-product-black: var(--folc-black);
--folc-product-green: var(--folc-green);
--folc-product-wine: var(--folc-wine);
--folc-product-blue: var(--folc-blue);
/* Tipografías */
--font-display: 'Playfair Display', Georgia, serif;
--font-ui: 'Barlow Condensed', Arial Narrow, sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
/* Espaciado */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 48px;
--space-xl: 72px;
--space-2xl: 96px;
/* Bordes y radios */
--radius-none: 0px; /* FOLC no usa border-radius — todo recto */
/* Transiciones */
--transition: all 0.2s ease;
/* Ancho máximo de contenido */
--max-width: 1440px;
}
/* ============================================================
03. RESET BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
/* Neutralizar border-radius que Río aplica por defecto */
button,
input,
select,
textarea,
.btn,
.js-buy-button,
.js-add-to-cart,
[class*="button"],
[class*="Button"] {
border-radius: var(--radius-none) !important;
}
/* Neutralizar sombras suaves que Río agrega a cards */
.product-item,
.js-product-item,
[class*="product-card"] {
border-radius: 0 !important;
}
/* ============================================================
04. TIPOGRAFÍA GLOBAL
============================================================ */
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
color: var(--folc-black);
background: var(--folc-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Títulos principales — Playfair Display */
h1, h2, h3,
.folc-title,
.folc-display {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--folc-black);
}
h4, h5, h6,
.folc-label,
.folc-eyebrow {
font-family: var(--font-ui);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 10px;
}
/* Barlow Condensed como fuente UI
OJO: "label" y "button" a secas NO van acá — "label" pegaba en los
checkboxes de filtros de categoría (rompía el posicionamiento) y
"button" en botones nativos (modales, cantidad del carrito, etc.)
que no estaban pensados para esta fuente. Los botones que sí
queremos en Barlow Condensed ya están cubiertos por .btn /
.js-add-to-cart / .js-buy-button en la sección 08. */
nav,
.btn,
.folc-ui {
font-family: var(--font-ui);
}
/* Tamaños tipográficos */
.text-display-xl { font-size: clamp(56px, 5.5vw, 88px); }
.text-display-lg { font-size: clamp(36px, 3.5vw, 54px); }
.text-display-md { font-size: clamp(28px, 2.5vw, 40px); }
.text-display-sm { font-size: 28px; }
.text-ui-xl { font-family: var(--font-ui); font-size: 21px; font-weight: 800; }
.text-ui-lg { font-family: var(--font-ui); font-size: 18px; font-weight: 800; }
.text-ui-md { font-family: var(--font-ui); font-size: 14px; font-weight: 700; }
.text-ui-sm { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.text-ui-xs { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.text-ui-2xs { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.text-body-sm { font-family: var(--font-body); font-size: 13px; line-height: 1.9; }
.text-body-xs { font-family: var(--font-body); font-size: 12px; line-height: 1.7; }
/* ============================================================
05. COLORES DE TEXTO — UTILIDADES
============================================================ */
.color-black { color: var(--folc-black) !important; }
.color-white { color: var(--folc-white) !important; }
.color-wine { color: var(--folc-wine) !important; }
.color-green { color: var(--folc-green) !important; }
.color-gray { color: var(--folc-gray) !important; }
.color-muted { color: #555 !important; }
.color-faint { color: #999 !important; }
/* ============================================================
06. BACKGROUNDS — UTILIDADES
============================================================ */
.bg-black { background: var(--folc-black) !important; }
.bg-white { background: var(--folc-white) !important; }
.bg-cream { background: var(--folc-cream) !important; }
.bg-cream2 { background: var(--folc-cream2) !important; }
.bg-wine { background: var(--folc-wine) !important; }
.bg-green { background: var(--folc-green) !important; }
.bg-blue { background: var(--folc-blue) !important; }
/* ============================================================
07. SISTEMA DE BOTONES
============================================================ */
/* Base compartida */
.btn,
.folc-btn {
display: inline-block;
font-family: var(--font-ui);
font-weight: 800;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 14px 32px;
border-radius: 0;
cursor: pointer;
transition: var(--transition);
text-align: center;
text-decoration: none;
border: 2px solid transparent;
line-height: 1;
}
/* Variantes */
.btn-white,
.folc-btn--white {
background: var(--folc-white);
color: var(--folc-black);
border-color: var(--folc-white);
}
.btn-white:hover,
.folc-btn--white:hover {
background: transparent;
color: var(--folc-white);
}
.btn-black,
.folc-btn--black {
background: var(--folc-black);
color: var(--folc-white);
border-color: var(--folc-black);
}
.btn-black:hover,
.folc-btn--black:hover {
background: #333;
border-color: #333;
}
.btn-wine,
.folc-btn--wine {
background: var(--folc-wine);
color: var(--folc-white);
border-color: var(--folc-wine);
}
.btn-wine:hover,
.folc-btn--wine:hover {
background: #6a1818;
border-color: #6a1818;
}
.btn-outline,
.folc-btn--outline {
background: transparent;
color: #666;
border-color: #333;
}
.btn-outline:hover,
.folc-btn--outline:hover {
border-color: #666;
color: #999;
}
/* Botón + (agregar al carrito inline) */
.folc-add-btn {
width: 36px;
height: 36px;
border: 1.5px solid var(--folc-black);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--folc-black);
line-height: 1;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-body);
border-radius: 0;
flex-shrink: 0;
}
.folc-add-btn:hover {
background: var(--folc-black);
color: var(--folc-white);
}
/* ============================================================
08. OVERRIDES AL BOTÓN NATIVO DE TIENDA NUBE
Ajusta los botones de TN (agregar al carrito, comprar ahora)
para que adopten el estilo FOLC.
============================================================ */
/* Botón primario de TN → estilo btn-black
FIX: el selector real es .js-addtocart (sin guión entre "add" y "to"),
confirmado en snipplets/product/product-form.tpl. Los selectores viejos
(.js-add-to-cart, .js-buy-button, [data-store="add-item"], .buy-button,
.add-to-cart) no existen en el DOM — este bloque nunca se aplicaba. */
.js-addtocart {
font-family: var(--font-ui) !important;
font-weight: 800 !important;
font-size: 12px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
border-radius: 0 !important;
padding: 16px 32px !important;
background: var(--folc-black) !important;
color: var(--folc-white) !important;
border: 2px solid var(--folc-black) !important;
transition: var(--transition) !important;
width: 100% !important;
}
.js-addtocart:hover {
background: #333 !important;
border-color: #333 !important;
}
/* Selector de variantes de TN → estilo FOLC
FIX: con settings.bullet_variants activo (default de este theme) el markup
real son botones pill .btn-variant/.btn-variant-content, no un