/* =====================================================
COFFEE+ LOGO — Estilos del componente
=====================================================
USO:
1. Incluir este archivo en el de la página:
2. Asegurarse de que League Spartan esté cargada
(ya incluida en el global del sitio).
3. Incluir el componente:
4. Controlar el tamaño y colores inline en el elemento padre:
VARIABLES SOBREESCRIBIBLES POR IMPLEMENTACIÓN:
--logo-size → escala global (default: 40px)
--logo-color-text → color de "Coffee" (default: #000)
--logo-color-plus → color del símbolo "+" (default: #000)
--logo-bg → fondo del rectángulo (default: transparent)
--logo-padding → espaciado interno (default: 0)
EJEMPLOS DE ESCALA:
Fijo: style="--logo-size: 60px"
Fluido responsive: style="--logo-size: clamp(24px, 3vw, 60px)"
Relativo viewport: style="--logo-size: 4vw"
NOTA: todas las clases internas están scopeadas bajo
.coffeeplus-logo para evitar colisiones con otros componentes.
===================================================== */
/* =====================================================
Defaults
===================================================== */
:root {
--logo-size: 40px;
--logo-ff-spacing: -0.03em;
--logo-font-weight: 680;
--logo-color-text: #000000;
--logo-color-plus: #000000;
--logo-bg: transparent;
--logo-padding: 0;
}
/* =====================================================
COMPONENTE — Rectángulo del logo
===================================================== */
.coffeeplus-logo {
font-size: var(--logo-size);
display: inline-flex;
align-items: center;
background: var(--logo-bg);
padding: var(--logo-padding);
line-height: 1;
}
/* =====================================================
"Coffee" — texto
1em = --logo-size
===================================================== */
.coffeeplus-logo .logo-coffee {
font-family: 'League Spartan', sans-serif;
font-size: 1em;
font-weight: var(--logo-font-weight);
letter-spacing: var(--logo-ff-spacing);
color: var(--logo-color-text);
line-height: 1;
display: block;
}
/* =====================================================
Contenedor del símbolo "+"
font-size: 1.1em provee el contexto em para el SVG
===================================================== */
.coffeeplus-logo .logo-plus {
font-size: 1.1em;
height: 1.1em;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--logo-color-plus);
}
/* =====================================================
Línea vertical del "+"
===================================================== */
.coffeeplus-logo .plus-vertical {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0.1em;
height: 35%;
background-color: var(--logo-color-plus);
border-radius: 0.005em;
z-index: 1;
}
/* =====================================================
Línea horizontal del "+" — SVG identidad
===================================================== */
.coffeeplus-logo .plus-line-horizontal {
height: 0.675em;
width: auto;
position: relative;
top: 0.03em;
z-index: 2;
display: inline-block;
flex-shrink: 0;
filter: none;
}