/*
* idSwift — nombre de producto en la cabecera de cada web de la suite.
* ---------------------------------------------------------------------------
* POR QUE
* Cada web es un producto con nombre propio (ScanHub, NonPaper, Documents...)
* y se rotula con el wordmark de marca, la misma tipografia que la web
* publica. Ademas resuelve un problema de layout: el nombre de producto es
* marca y NO se traduce, asi que la cabecera mide igual en ES y en EN.
*
* FUENTE
* Croogla 4F Bold, auto-hospedada (nada de CDNs). El .woff2 se copia desde
* Idswift_web/assets/media/fonts y viaja en el directorio de assets
* COMPARTIDO, igual que i18n.js y lang-toggle.css.
*
* USO
* idSwift ScanHub
* El lleva el nombre del producto; el prefijo "idSwift" va en peso
* normal para que destaque el producto.
*/
@font-face {
font-family: 'Croogla 4F';
src: url('/assets/fonts/Croogla-4F-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Paleta corporativa, la misma que idswiftsolutions.com. */
:root {
--idswift-forest: #27524e; /* verde oscuro: nombre de producto */
--idswift-forest-deep: #1d3f3c;
--idswift-mint: #91cca9; /* verde claro: "by idSwift" */
--idswift-mint-soft: #d6ecdf;
--idswift-cream: #f5f1e8;
}
/* ---------------------------------------------------------------------------
Lockup de marca de la cabecera. Estructura:
ScanHub <- nombre de producto, verde oscuro
by idSwift <- anclado a la DERECHA del nombre, mas pequeno, mint
Va a la izquierda de la cabecera; el logo del hotel queda centrado.
El nombre de producto es marca y no se traduce, asi que el bloque mide
igual en ES y en EN y la cabecera no se mueve al cambiar de idioma.
--------------------------------------------------------------------------- */
.brand-lockup {
/* Las cabeceras son grid de 3 columnas y la celda centra su contenido:
hay que anclar la marca al borde izquierdo y el logo al centro. */
justify-self: start;
display: inline-flex;
flex-direction: column;
align-items: flex-end; /* ancla "by idSwift" a la derecha del producto */
justify-content: center;
line-height: 1;
white-space: nowrap;
text-decoration: none;
}
.brand-lockup__product {
font-family: 'Croogla 4F', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
font-size: 19px;
letter-spacing: 0.01em;
color: var(--idswift-forest);
}
.brand-lockup__by {
font-family: 'Croogla 4F', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.04em;
color: var(--idswift-mint);
margin-top: 2px;
}
@media (max-width: 720px) {
.brand-lockup__product { font-size: 16px; }
.brand-lockup__by { font-size: 9px; }
}
/* Logo del hotel, centrado en la cabecera. */
.hotel-logo-center {
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.hotel-logo-center img {
max-height: 44px;
max-width: 100%;
object-fit: contain;
}
/* ---------------------------------------------------------------------------
Entornos de prueba: sin logo del hotel.
En develop y feature no se muestra NUNCA el branding del cliente, ni aunque
el hotel este resuelto (UAT nativos de HPR/NOBUPR incluidos). Evita que una
captura o una demo de un entorno de pruebas pase por produccion.
Va con !important a proposito: los modulos ponen logoEl.hidden = false desde
JS en cuanto resuelven el hotel, y esta regla tiene que ganar siempre.
El elemento sigue en el DOM (solo se oculta), asi que quien lea su src
-por ejemplo la generacion del PDF- no se ve afectado.
El entorno lo estampa /assets/js/brand-env.js en el .
--------------------------------------------------------------------------- */
html[data-idswift-env="develop"] .hotel-logo,
html[data-idswift-env="feature"] .hotel-logo,
html[data-idswift-env="develop"] #hotel-logo,
html[data-idswift-env="feature"] #hotel-logo,
html[data-idswift-env="develop"] #hotel-logo-web,
html[data-idswift-env="feature"] #hotel-logo-web,
html[data-idswift-env="develop"] #hotel-logo-pdf,
html[data-idswift-env="feature"] #hotel-logo-pdf,
html[data-idswift-env="develop"] #hotel-wordmark,
html[data-idswift-env="feature"] #hotel-wordmark {
display: none !important;
}
/* ---------------------------------------------------------------------------
OJO - LICENCIA: el fichero servido es "FONTSPRING DEMO - Croogla 4F Bold",
la version de PRUEBA. Las demo de Fontspring sustituyen algunos glifos por
una marca de agua "DEMO"; el guion es uno de ellos, y por eso "Online
Check-in" salia con un ornamento en vez del guion.
Esto NO se arregla del todo con CSS: hay que licenciar la fuente y sustituir
el .woff2. Mientras tanto, los caracteres afectados se pintan con la fuente
de respaldo, que no lleva marca de agua.
--------------------------------------------------------------------------- */
.brand-lockup__product .no-croogla {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
/* Compensa el hueco: el guion de respaldo es mas estrecho que el ornamento. */
padding: 0 0.02em;
}