/* ============================================================================= PUBLICACIONES — UNIVERSIDAD PONTIFICIA COMILLAS Hoja de estilo personalizada · OMP 3.5.0.4 · theme «Default» Variación A (hero en papel) · El amarillo se reserva para CONVERSIÓN ----------------------------------------------------------------------------- Verificado contra el CSS real de https://libros.comillas.edu (EUPCO). Selectores reales del theme Default 3.5.0.4 usados abajo. CÓMO INSTALAR 1. Backend → Configuración → Sitio web → Apariencia → Configuración. 2. Sube este archivo en «Hoja de estilo personalizada» (Custom stylesheet). 3. HERO / banner de Revistas / «Sobre la editorial»: el theme NO los trae. Pega los snippets HTML del final en Apariencia → Configuración → «Contenido adicional de la portada» (campo que el theme imprime como .pkp_page_index .additional_content ). Este CSS los estiliza por sus clases .comillas-*. 4. Novedades y «examinar por colección/serie» viven en la página Catálogo (.page_catalog); este CSS también las reestiliza. 5. FUENTES: Helvetica Neue LT y Futura son de pago (no hay versión Google). Si tienes las licencias, sube los .woff2 y descomenta el bloque @font-face. Si no, la pila de respaldo (Helvetica/Arial + geométrico) mantiene el aire. DECISIONES DE DISEÑO (límites reales del theme) · La cabecera del Default es una BARRA DE COLOR con el menú en blanco. La recoloreamos a TINTA (#1A1B1D) en vez de invertirla a blanco (frágil). ALTERNATIVA sin CSS: Apariencia → fija el color del theme a #1A1B1D. · El AMARILLO se aplica solo a acciones de conversión: botón primario y enlaces de DESCARGA/LECTURA del libro (lo más parecido a “comprar”). · El hero en papel se pinta dentro de la columna de contenido (no a sangre completa del viewport: el theme centra el contenido). ============================================================================= */ /* ----------------------------------------------------------------------------- 1. VARIABLES DE MARCA -------------------------------------------------------------------------------*/ :root { --c-yellow: #FFB81C; /* Pantone 1235C · SOLO conversión */ --c-yellow-dk: #E6A516; /* hover amarillo */ --c-gray: #53565A; /* Cool Gray 11C */ --c-ink: #1A1B1D; /* tinta · cabecera, pie, titulares */ --c-ink-soft: #2B2D30; /* hover tinta */ --c-red: #A4123F; /* ICADE · hover de enlaces */ --c-paper: #FAF8F3; /* fondo cálido del hero */ --c-paper-line: #EFE7D6; /* borde cálido */ --c-rule: #1A1B1D; /* filete editorial grueso */ --c-muted: #6E7176; /* texto atenuado */ --c-chip: #EFF0F1; /* fondo chips */ --font-body: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-disp: "Futura", "Century Gothic", "Trebuchet MS", var(--font-body); } /* ----------------------------------------------------------------------------- 2. FUENTES (descomenta y sube los .woff2 si dispones de las licencias) -------------------------------------------------------------------------------*/ /* @font-face{font-family:"Helvetica Neue LT";font-weight:400;src:url("HelveticaNeueLT-Roman.woff2") format("woff2");font-display:swap} @font-face{font-family:"Helvetica Neue LT";font-weight:700;src:url("HelveticaNeueLT-Bold.woff2") format("woff2");font-display:swap} @font-face{font-family:"Futura";font-weight:700;src:url("Futura-Bold.woff2") format("woff2");font-display:swap} */ /* ----------------------------------------------------------------------------- 3. TIPOGRAFÍA (el theme fija la pila «Noto Sans»; la sobrescribimos) -------------------------------------------------------------------------------*/ html, body, input, button, select, textarea { font-family: var(--font-body) !important; } body { color: var(--c-ink); } .pkp_site_name .is_text, .pkp_structure_main h1, .pkp_structure_main h2, .pkp_structure_main h3, .obj_monograph_summary .title, .obj_monograph_full .title, .pkp_block .title, .cmp_breadcrumbs .current h1 { font-family: var(--font-disp) !important; letter-spacing: -.01em; } a { color: var(--c-ink); } a:hover, a:focus { color: var(--c-red); } /* ----------------------------------------------------------------------------- 4. CABECERA Y NAVEGACIÓN (Variación A: cabecera BLANCA + filete de tinta) ----------------------------------------------------------------------------- El theme Default pinta la cabecera como barra de color con el menú en blanco; aquí la invertimos a blanca con texto en tinta. Si prefirieras la cabecera en TINTA, sustituye este bloque por: .pkp_structure_head{background-color:var(--c-ink)!important;border-bottom:0} .pkp_site_name .is_text,.pkp_navigation_primary>li>a, .pkp_navigation_user>li>a,.pkp_navigation_search_wrapper a{color:#fff} -------------------------------------------------------------------------------*/ .pkp_structure_head { background-color: #fff !important; border-bottom: 2px solid var(--c-ink); } .pkp_site_name .is_text { color: var(--c-ink); } /* menú primario: texto tinta + subrayado AMARILLO en hover/activo */ .pkp_navigation_primary > li > a { color: var(--c-ink); border-bottom: 2px solid transparent; } .pkp_navigation_primary > li > a:hover { color: var(--c-ink); border-color: var(--c-yellow); } .pkp_navigation_primary > li > a:focus { background: var(--c-ink); color: #fff; } /* accesos de usuario (Acceder/Registrarse/idioma) */ .pkp_navigation_user > li > a { color: var(--c-ink); } .pkp_navigation_user > li > a:focus { background: var(--c-ink); color: #fff; } .pkp_navigation_search_wrapper a { color: var(--c-ink); } .pkp_navigation_search_wrapper a:hover { border-color: var(--c-yellow); } /* hamburguesa (móvil) en tinta sobre cabecera blanca */ .pkp_site_nav_toggle > span { border-bottom-color: var(--c-ink); } .pkp_site_nav_toggle > span:before, .pkp_site_nav_toggle > span:after { background: var(--c-ink); } /* panel del menú en móvil: blanco con texto tinta */ .pkp_site_nav_menu { background: #fff; } .pkp_site_nav_menu a { color: var(--c-ink); } .pkp_site_nav_menu a:hover, .pkp_site_nav_menu a:focus { color: var(--c-red); } /* ----------------------------------------------------------------------------- 4b. SUBMENÚS DESPLEGABLES (el Default los cablea en azul #006798 → marca) -------------------------------------------------------------------------------*/ .pkp_nav_list ul { background: #fff; border-radius: 2px; box-shadow: 0 6px 18px rgba(26,27,29,.18); } .pkp_nav_list ul a { color: var(--c-ink); border-left: .357rem solid transparent; } .pkp_nav_list ul a:hover, .pkp_nav_list ul a:focus { background: var(--c-paper); border-left-color: var(--c-yellow); color: var(--c-ink); } .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus { border-color: var(--c-yellow); } /* contador de tareas del menú de usuario */ .pkp_navigation_user > li > a .task_count { background: var(--c-yellow); color: var(--c-ink); } /* ----------------------------------------------------------------------------- 5. BOTONES Conversión (amarillo): botón primario + DESCARGA/LECTURA del libro + .comillas-cta Genéricos (tinta): el resto de .pkp_button / .cmp_button -------------------------------------------------------------------------------*/ /* genéricos PLANOS en tinta (sin biselado ni sombra de texto del theme) */ .pkp_button, .cmp_button, .cmp_form .buttons button, .page_login .buttons button, .page_lost_password .buttons button, .page_search .cmp_search button { background: var(--c-ink); border: 1px solid var(--c-ink); color: #fff; box-shadow: none !important; text-shadow: none !important; border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .pkp_button:hover, .pkp_button:focus, .cmp_button:hover, .cmp_button:focus, .cmp_form .buttons button:hover, .page_login .buttons button:hover, .page_lost_password .buttons button:hover, .page_search .cmp_search button:hover { background: var(--c-ink-soft); border-color: var(--c-ink-soft); color: #fff; } .pkp_button_primary, .cmp_download_link, .obj_monograph_full .files .pub_format_single a, .obj_monograph_full .files .pub_format_remote a, .block_make_submission a, .comillas-cta { background: var(--c-yellow) !important; border-color: var(--c-yellow) !important; color: var(--c-ink) !important; text-shadow: none !important; box-shadow: 0 1px 0 var(--c-yellow-dk) !important; } .pkp_button_primary:hover, .pkp_button_primary:focus, .cmp_download_link:hover, .cmp_download_link:focus, .obj_monograph_full .files .pub_format_single a:hover, .obj_monograph_full .files .pub_format_remote a:hover, .block_make_submission a:hover, .comillas-cta:hover { background: var(--c-yellow-dk) !important; border-color: var(--c-yellow-dk) !important; color: var(--c-ink) !important; } .comillas-cta { display:inline-block; padding:13px 20px; border-radius:2px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; } /* ----------------------------------------------------------------------------- 5b. LIMPIAR AZUL RESIDUAL DEL THEME (#006798 / #008acb / #1e6292) Avisos, “leer más”, lector de archivos, paginación, enlaces sueltos. -------------------------------------------------------------------------------*/ /* notificaciones / avisos: el borde de acento pasa de azul a tinta (success y error conservan su verde/rojo semántico) */ .cmp_notification { border-left-color: var(--c-ink); } /* “leer más” de anuncios */ .obj_announcement_summary .read_more { color: var(--c-ink); } .obj_announcement_summary .read_more:hover, .obj_announcement_summary .read_more:focus { color: var(--c-red); } /* barra del lector de archivos (cabecera azul → tinta) */ .header_viewable_file { background: var(--c-ink); } .header_viewable_file .return, .header_viewable_file .download { color: var(--c-ink); } .header_viewable_file .return:hover, .header_viewable_file .return:focus, .header_viewable_file .download:hover, .header_viewable_file .download:focus { background: var(--c-yellow); color: var(--c-ink); } /* enlaces de “saltar al contenido” en foco */ .cmp_skip_to_content a:focus { color: var(--c-ink); } /* por si quedara algún enlace con el azul por defecto */ a:focus { color: var(--c-red); } /* ----------------------------------------------------------------------------- 6. FICHAS DE LIBRO (.obj_monograph_summary / .cmp_monographs_list) Sombra de «objeto impreso» en la portada + título en display. -------------------------------------------------------------------------------*/ .cmp_monographs_list { border-top-color: var(--c-rule); } .obj_monograph_summary .cover img { box-shadow: 0 14px 26px -14px rgba(26,27,29,.42), 0 3px 9px rgba(26,27,29,.16); } .obj_monograph_summary .title a { color: var(--c-ink); } .obj_monograph_summary .title a:hover { color: var(--c-red); } /* ----------------------------------------------------------------------------- 7. BLOQUES DE BARRA LATERAL (.pkp_block) y EXAMINAR (.block_browse) -------------------------------------------------------------------------------*/ .pkp_block .title { color: var(--c-gray); border-bottom: 2px solid var(--c-rule); padding-bottom: .5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem !important; } .block_browse .current a { border-left-color: var(--c-yellow); color: var(--c-ink); } /* ----------------------------------------------------------------------------- 8. DESTACADOS / CARRUSEL (.highlights + swiper) y CATÁLOGO por serie -------------------------------------------------------------------------------*/ .highlights { background: var(--c-paper); } .swiper { --swiper-theme-color: var(--c-ink); } .page_catalog .pkp_series_nav_menu { border-top-color: var(--c-rule); } /* ----------------------------------------------------------------------------- 9. PIE DE PÁGINA (.pkp_structure_footer_wrapper #ddd → tinta) -------------------------------------------------------------------------------*/ .pkp_structure_footer_wrapper { background: var(--c-ink) !important; } .pkp_footer_content, .pkp_footer_content p { color: rgba(255,255,255,.78); } .pkp_footer_content a { color: rgba(255,255,255,.78); } .pkp_footer_content a:hover { color: #fff; } .pkp_footer_content .pkp_block .title { color: var(--c-yellow); border-bottom-color: rgba(255,255,255,.18); } /* ============================================================================= 10. BLOQUES HTML para «Contenido adicional de la portada» (.additional_content) Clases .comillas-* que estilizan el HTML que pegas en ese campo. ============================================================================= */ .pkp_page_index .additional_content { border-top: 0; } /* quitamos el filete gris por defecto */ /* --- HERO EN PAPEL --- */ .comillas-hero { background: var(--c-paper); border: 1px solid var(--c-paper-line); border-radius: 4px; padding: 2.857rem 2.143rem; } .comillas-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gray); } .comillas-eyebrow::before { content:""; width:26px; height:3px; background: var(--c-yellow); } .comillas-hero h1 { font-family: var(--font-disp); font-weight: 700; font-size: clamp(28px, 4.5vw, 48px); line-height: 1.06; letter-spacing: -.022em; color: var(--c-ink); margin: 14px 0 0; } .comillas-hero p { font-size: 1.1rem; line-height: 1.55; color: var(--c-ink); margin: 14px 0 0; max-width: 36em; } /* contadores opcionales dentro del hero */ .comillas-stats { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; margin-top:1.5rem; } .comillas-stats .num { font-family: var(--font-disp); font-weight:700; font-size:1.6rem; color:var(--c-ink); line-height:1; } .comillas-stats .lbl { font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); margin-top:.35rem; } .comillas-stats .sep { width:1px; align-self:stretch; background: rgba(26,27,29,.18); } /* --- BANNER CRUCE A REVISTAS --- */ .comillas-crosslink { background: var(--c-paper); border:1px solid var(--c-paper-line); border-radius:4px; padding: 2rem; margin-top: 1.5rem; display:flex; gap:1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap; } .comillas-crosslink .comillas-eyebrow::before { background: var(--c-red); } .comillas-crosslink h3 { font-family: var(--font-disp); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; color:var(--c-ink); margin:.6rem 0 0; } .comillas-crosslink p { color: var(--c-gray); margin:.4rem 0 0; max-width: 40em; } /* --- SOBRE LA EDITORIAL --- */ .comillas-about { border-top: 2px solid var(--c-rule); padding-top: 2rem; margin-top: 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; } .comillas-about h2 { font-family: var(--font-disp); font-weight:700; font-size:1.6rem; letter-spacing:-.02em; margin:.6rem 0 0; } .comillas-about p { color:#3F4145; line-height:1.65; margin:0; } @media (max-width: 768px){ .comillas-about { grid-template-columns:1fr; gap:1rem; } } /* ============================================================================= 11. ACERCAR AL BOCETO (mejoras CSS-only sobre el theme Default) · Rejilla de portadas en Catálogo · cabeceras de sección · clúster del hero ============================================================================= */ /* quitamos los filetes verticales tenues de la columna de contenido */ .pkp_structure_main:before, .pkp_structure_main:after { display: none !important; } /* --- 11a. NOVEDADES / CATÁLOGO COMO REJILLA DE PORTADAS --------------------- El Default pinta cada libro como fila (portada izq. + texto). Lo pasamos a rejilla neutralizando float/anchos y usando .row{display:contents}. */ .cmp_monographs_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 2.4rem 1.6rem; border-top: 2px solid var(--c-rule); margin-left: 0; margin-right: 0; } .cmp_monographs_list .row { display: contents; } .cmp_monographs_list .obj_monograph_summary { float: none !important; width: auto !important; border: 0 !important; padding: 1.6rem 0 0 !important; } .cmp_monographs_list .obj_monograph_summary > *, .cmp_monographs_list .obj_monograph_summary .title { display: block; margin-left: 0 !important; } .cmp_monographs_list .obj_monograph_summary .cover { float: none !important; width: auto !important; margin: 0 0 .9rem !important; } .cmp_monographs_list .obj_monograph_summary .cover img { width: 100% !important; max-width: none !important; max-height: none !important; } .cmp_monographs_list .obj_monograph_summary .title { font-size: 1.05rem; line-height: 1.2; } @media (max-width: 480px){ .cmp_monographs_list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* --- 11b. CABECERA DE SECCIÓN (la etiqueta gris flotante → titular real) ----*/ .cmp_monographs_list > .title { position: static; grid-column: 1 / -1; margin: 0; padding: 0 0 .9rem; background: none; font-family: var(--font-disp); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--c-ink); } /* --- 11c. HERO A DOS COLUMNAS + CLÚSTER DE PORTADAS ------------------------*/ .comillas-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.4rem; align-items: center; } @media (max-width: 768px){ .comillas-hero { grid-template-columns: 1fr; } } .comillas-covers { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; } .comillas-spine { width: 33%; max-width: 130px; aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: space-between; padding: .8rem; box-shadow: 0 16px 32px -14px rgba(26,27,29,.42), 0 4px 12px rgba(26,27,29,.18); } .comillas-spine .col { font-size: .5rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .comillas-spine .ttl { font-family: var(--font-disp); font-weight: 700; font-size: .85rem; line-height: 1.15; } .comillas-spine--raise { transform: translateY(-1.4rem); } .comillas-spine--red { background: var(--c-red); color: #fff; } .comillas-spine--ink { background: linear-gradient(150deg,#2B2D30,#1A1B1D); color: #fff; } .comillas-spine--paper { background: #FAF8F3; border: 1px solid #E2E3E5; color: var(--c-ink); } .comillas-spine--red .col { color: rgba(255,255,255,.72); } .comillas-spine--ink .col { color: rgba(255,255,255,.6); } .comillas-spine--paper .col { color: #9A9DA1; } @media (max-width: 768px){ .comillas-covers { display: none; } } /* ============================================================================= 12. MICROINTERACCIONES (hover / click) · sobrias, estilo Comillas Hovers ~150ms · press scale(.98) · sin rebotes ni springs. ============================================================================= */ /* transiciones base */ a, .pkp_button, .cmp_button, .comillas-cta, .pkp_button_primary, .cmp_download_link, .pkp_navigation_primary > li > a, .cmp_monographs_list .obj_monograph_summary .cover img, .comillas-spine, .comillas-crosslink { transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease; } /* press: hundir levemente al hacer click */ .pkp_button:active, .cmp_button:active, .comillas-cta:active, .pkp_button_primary:active, .cmp_download_link:active, .page_search .cmp_search button:active { transform: translateY(1px) scale(.99); } /* conversión (amarillo): leve elevación + halo al pasar el ratón */ .pkp_button_primary:hover, .cmp_download_link:hover, .comillas-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(255,184,28,.55) !important; } /* portadas del catálogo: se elevan al pasar */ .cmp_monographs_list .obj_monograph_summary .cover img { will-change: transform; } .cmp_monographs_list .obj_monograph_summary:hover .cover img { transform: translateY(-4px); box-shadow: 0 20px 34px -16px rgba(26,27,29,.5), 0 6px 14px rgba(26,27,29,.18); } /* lomos del hero: micro-elevación (respetando el que va levantado) */ .comillas-spine:hover { transform: translateY(-4px); box-shadow: 0 22px 38px -16px rgba(26,27,29,.5); } .comillas-spine--raise:hover { transform: translateY(-1.7rem); } /* tarjeta cruce a Revistas: realce sutil */ .comillas-crosslink:hover { box-shadow: 0 10px 26px -16px rgba(26,27,29,.3); } /* accesibilidad: si el usuario pide menos movimiento, lo desactivamos */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after { transition: none !important; } .pkp_button_primary:hover, .cmp_download_link:hover, .comillas-cta:hover, .comillas-spine:hover, .cmp_monographs_list .obj_monograph_summary:hover .cover img { transform: none; } } /* ============================================================================= 13. CONTENIDO DEL PIE DE PÁGINA El campo «Pie de página» (Apariencia → Configuración) se imprime dentro de .pkp_footer_content (fondo tinta por la sección 9). Pega el HTML del final con la clase .comillas-footer y queda maquetado a columnas. ============================================================================= */ .comillas-footer { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; } .comillas-footer h4 { font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-yellow); margin: 0 0 1rem; } .comillas-footer ul { list-style: none; margin: 0; padding: 0; } .comillas-footer li { margin: .5rem 0; } .comillas-footer a { color: rgba(255,255,255,.78); text-decoration: none; } .comillas-footer a:hover { color: #fff; } .comillas-footer .brand { font-family: var(--font-disp); font-weight: 700; color: #fff; font-size: 1.15rem; } .comillas-footer .addr { color: rgba(255,255,255,.7); line-height: 1.6; margin-top: .6rem; max-width: 30em; } .comillas-footer__legal { grid-column: 1 / -1; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.55); font-size: .85rem; } @media (max-width: 768px){ .comillas-footer { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .comillas-footer { grid-template-columns: 1fr; } } /* ============================================================================= SNIPPETS HTML · pega en «Contenido adicional de la portada» (NO los dejes dentro de este .css) -----------------------------------------------------------------------------
Editorial · Universidad Pontificia Comillas

Conocimiento riguroso, en abierto.

Publicamos en acceso abierto monografías, volúmenes colectivos y textos académicos de la Universidad Pontificia Comillas. Lee, descarga y cita libremente.

412
Títulos
9
Colecciones
100%
Acceso abierto
Cátedra de BioéticaJusticia y Bioética
Biblioteca ComillasBlaise Pascal
ManresaOración ignaciana
Revistas Comillas

¿Buscas artículos y revistas académicas?

Consulta el Portal de Revistas Académicas de la Universidad Pontificia Comillas — todas en acceso abierto.

Ir al portal de Revistas ↗
Sobre la editorial

Publicaciones de la Universidad Pontificia Comillas

El Servicio de Publicaciones edita colecciones de monografías propias y en coedición, textos de apoyo a la docencia y publicaciones de divulgación. Este portal reúne nuestro fondo en acceso abierto.

----- PIE DE PÁGINA · pega en «Pie de página» (Apariencia → Configuración) -----
Publicaciones · Universidad Pontificia Comillas
Servicio de Publicaciones. C/ Universidad de Comillas, 3-5 · 28049 Madrid · Tel. +34 91 542 28 00 · publicaciones@comillas.edu

Catálogo

Editorial

Enlaces

© Universidad Pontificia Comillas · Política de privacidad · Aviso legal · Cookies
============================================================================= */