/* ========================================================= MUT_JERANXPERIENCE — custom.css (re-skin del proyecto) ========================================================= index.php carga esta hoja solo si existe, y siempre DESPUÉS de Bootstrap y de styles.css. Es el único sitio donde vive la identidad de Jeran Xperience: styles.css se queda idéntico a mutador_basic para poder diffear la base y traer mejoras. Reglas heredadas: prefijo tb- en clases nuevas, estados .is-*, sumario por bloque, background-color en propiedad larga si transiciona. La versión anterior de este archivo (el re-skin de Maria Ona / Tacones y Taladros, que venía heredado al clonar el theme) está en css/_custom-mariona-heredado.css.bak. Los .bak no suben por FTP: están en EXCLUDE_PATTERNS de deploy.config. ───────────────────────────────────────────────────────── ÍNDICE ───────────────────────────────────────────────────────── §J1 Tipografía: por qué no hay @font-face §J2 Re-skin de tokens (:root) §J3 Tipografía del sitio §J4 Puente con Bootstrap (variables --bs-*) §J5 Piezas de interfaz del proyecto §J6 Responsive (<=768) ========================================================= */ /* ---------- §J1 · Tipografía ---------- */ /* NO hay @font-face aquí, y es a propósito. El theme se clonó de mut_mariona y arrastraba tres woff2 en fonts/ (Univers LT Pro y Franklin Gothic Condensed) sacados de OTF de escritorio de Monotype. Esa licencia no cubre uso webfont y, además, son las tipografías de OTRA marca. Los archivos siguen en fonts/ por si hay que diffear contra la base, pero este sitio no los referencia. Mientras no haya una tipografía comprada para Jeran, el sitio va con la pila del sistema: un serif para los titulares (el registro editorial que pide el brief) y un sans para el cuerpo. Cero peticiones de red, cero riesgo de licencia, y el salto a la tipografía definitiva es cambiar --display y --body aquí abajo. */ /* ---------- §J2 · Re-skin de tokens ---------- */ /* Único bloque que hay que tocar para cambiar la piel del sitio. Crema cálido y tinta casi negra para Jeran Xperience; el mismo casi negro, más cerrado, y platino para Jeran Club. Sin oro: el brief lo descarta explícitamente. */ :root { --paper: #f6f3ee; /* crema cálido, fondo por defecto */ --ink: #141210; /* tinta: negro cálido, no #000 */ --mute: #6e665d; /* texto secundario */ --rule: rgba(20, 18, 16, 0.14); /* separadores */ --accent: #8a7862; /* taupe: eyebrows y detalles */ /* Secciones oscuras: hero, global service, Jeran Jets, Jeran Club */ --dark-paper: #0e0d0c; --dark-ink: #edebe7; --dark-mute: #8e8b86; /* el platino del brief */ --dark-rule: rgba(237, 235, 231, 0.16); --display: Georgia, "Times New Roman", Times, serif; --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: var(--body); /* el nav de este sitio no es mono */ --fs-base: 16px; --nav-font: var(--body); --nav-fs: 12px; --nav-tracking: 0.18em; --container: 1280px; --gutter: 24px; --topbar-h: 64px; --radius: 0; /* nada redondeado en este diseño */ } /* ---------- §J3 · Tipografía del sitio ---------- */ body { font-family: var(--body); font-size: var(--fs-base); color: var(--ink); background-color: var(--paper); } /* Los titulares son serif en todo el sitio. Bootstrap deja --bs-heading-font-family sin valor, así que los h* heredan del body: si no se dice aquí, salen en sans. */ h1, h2, h3, h4, h5, h6, .tb-display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; } /* Registro de interfaz: versalitas con tracking ancho. Es lo que llevan los eyebrow ("THE SERVICE UNIVERSE"), los botones y las etiquetas. */ .tb-caps { font-family: var(--body); text-transform: uppercase; letter-spacing: var(--nav-tracking); font-size: 0.72rem; line-height: 1.5; } /* ---------- §J4 · Puente con Bootstrap ---------- */ /* El contenido lo maqueta M3 Design con Bootstrap 5.3, así que las utilidades de Bootstrap (btn-dark, bg-body, border, text-muted…) tienen que salir en la paleta de Jeran y no en la de Bootstrap. Se hace con sus propias variables, sin sobrescribir reglas. */ :root { --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-body-font-family: var(--body); --bs-secondary-color: var(--mute); --bs-border-color: var(--rule); --bs-border-radius: var(--radius); --bs-link-color: var(--ink); --bs-link-hover-color: var(--accent); } /* Botones: cuadrados y en versalitas, se escriba btn-dark o btn-light. El markup del maquetador ya trae rounded-0; esto cubre el resto. */ .btn { --bs-btn-border-radius: 0; font-family: var(--body); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; } .btn-dark { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); } /* Bootstrap no hereda el color en enlaces dentro de una sección con bsl-ink (color heredado del componente): aquí sí. */ .bsl-ink a:not(.btn) { color: inherit; } /* ---------- §J5 · Piezas de interfaz del proyecto ---------- */ /* Tarjeta editorial del "Service Universe": borde fino, sin sombra, sin radio. La imagen no crece con el hover; lo único que se mueve es la línea del enlace. */ .tb-card { border: 1px solid var(--rule); background-color: #fdfcfa; } /* Enlace de texto con subrayado fino, el que usa el sitio en vez de botones secundarios ("EXPLORE WHAT JERAN CAN DO"). */ .tb-underline { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid currentColor; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.74rem; transition: opacity var(--t-ui); } .tb-underline:hover { opacity: 0.6; } /* ---------- §J6 · Responsive ---------- */ /* El breakpoint del theme es 768 (regla heredada). Bootstrap trabaja a 768 (md) y 992 (lg): coinciden en md, que es lo que importa. */ @media (max-width: 768px) { :root { --fs-base: 15px; --gutter: 16px; } }