{"id":9396,"date":"2022-10-19T02:51:12","date_gmt":"2022-10-19T02:51:12","guid":{"rendered":"http:\/\/library.usj.edu.mo\/?page_id=9396"},"modified":"2026-10-06T11:38:30","modified_gmt":"2026-10-06T03:38:30","slug":"start-with-your-library","status":"publish","type":"page","link":"https:\/\/library.usj.edu.mo\/zh\/start-with-your-library\/","title":{"rendered":"\u5716 \u66f8 \u9928 \u65b0 \u624b \u6307 \u5357"},"content":{"rendered":"<!-- =========================================================\n     USJ LIBRARY \u2014 START WITH YOUR LIBRARY\n     Modern TL;DR \/ New Student Onboarding Page\n     WordPress Custom HTML Block\n     ========================================================= -->\n\n\n\n\n<!-- =========================================================\n     PAGE CONTENT\n     ========================================================= -->\n\n<div class=\"usj-start\">\n\n\n  <!-- =====================================================\n       HERO\n       ===================================================== -->\n\n  <section class=\"usj-start-hero\">\n\n    <div class=\"usj-start-eyebrow\">\n      USJ LIBRARY\n    <\/div>\n\n    <h1>\n      Start with<br>\n      <span>Your Library.<\/span>\n    <\/h1>\n\n    <p>\n      New to USJ Library? Start here.\n      In about 5 minutes, you&#8217;ll know where to search,\n      study, borrow, get help and access resources\n      wherever you are.\n    <\/p>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       ORIENTATION VIDEO\n       ===================================================== -->\n\n  <section class=\"usj-orientation-card\">\n\n    <div class=\"usj-orientation-content\">\n\n      <div class=\"usj-orientation-label\">\n\n        <span class=\"usj-play-icon\">\n          \u25b6\n        <\/span>\n\n        Library Space\n\n      <\/div>\n\n\n      <h2>\n        \u63a2\u7d22\u8d77\u9ede\n        <span>Start here. <\/span>\n      <\/h2>\n\n\n      <p>\n      Welcome to the University of Saint Joseph (USJ) Library! This quick overview will help you navigate your environment and make the most of the physical spaces and digital resources\n      <\/p>\n\n\n      <div class=\"usj-orientation-meta\">\n\n        <span>\n          \ud83c\udf93 For new USJ members\n        <\/span>\n\n        <span>\n          \u2022\n        <\/span>\n\n        <span>\n          \u25b6 Virtual Tour\n        <\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"usj-orientation-video\">\n\n      <div class=\"usj-video-frame\">\n\n        <!--\n          =====================================================\n          REPLACE VIDEO_ID WITH YOUR ACTUAL YOUTUBE VIDEO ID\n\n          Example:\n          https:\/\/www.youtube.com\/watch?v=AbCdEf12345\n\n          becomes:\n          https:\/\/www.youtube.com\/embed\/AbCdEf12345\n          =====================================================\n        -->\n\n        <iframe src=\"https:\/\/www.youtube.com\/embed\/bRtgu8eRQz8?si=H11agcwO7BAdiHRo\" title=\"USJ Library Orientation\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write;                 encrypted-media; gyroscope; picture-in-picture;                 web-share\" allowfullscreen=\"\">\n        <\/iframe>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       QUICK SUMMARY\n       ===================================================== -->\n\n  <div class=\"usj-start-summary\">\n\n    <div class=\"usj-summary-icon\" aria-hidden=\"true\">\n      i\n    <\/div>\n\n    <div class=\"usj-summary-content\">\n\n      <div class=\"usj-summary-title\">\n        Tips\n      <\/div>\n\n      <div class=\"usj-summary-text\">\n        Search everything with OneSearch \u00b7\n        Borrow from the Library \u00b7\n        Access digital resources off-campus \u00b7\n        Find a study space \u00b7\n        Ask a librarian when you&#8217;re stuck.\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- =====================================================\n       01 \u2014 KNOW THE LIBRARY\n       ===================================================== -->\n\n  <section class=\"usj-start-section\">\n\n    <div class=\"usj-start-heading\">\n\n      <div class=\"usj-start-kicker\">\n        01 \u00b7 Start here\n      <\/div>\n\n      <h2>\n        Four things to know.\n      <\/h2>\n\n      <p>\n        You don&#8217;t need to understand the whole website.\n        Start with these four areas.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"usj-start-map\">\n\n\n      <!-- FIND & BORROW -->\n\n      <a class=\"usj-map-card\" href=\"\/zh\/find-borrow\/\">\n\n        <div class=\"usj-map-number\">\n          01\n        <\/div>\n\n        <div class=\"usj-map-icon\">\n          \ud83d\udd0e\n        <\/div>\n\n        <h3>\n          \u7814\u7a76\u8cc7\u6e90\uff1a\n        <\/h3>\n\n        <p>\n          Search books, journals, databases and\n          digital resources. Then find out how to\n          borrow what you need.\n        <\/p>\n\n        <div class=\"usj-map-arrow\">\n          \u2192\n        <\/div>\n\n      <\/a>\n\n\n      <!-- HELP -->\n\n      <a class=\"usj-map-card\" href=\"\/zh\/get-help-support\/\">\n\n        <div class=\"usj-map-number\">\n          02\n        <\/div>\n\n        <div class=\"usj-map-icon\">\n          \ud83d\udca1\n        <\/div>\n\n        <h3>\n          \u7814\u7a76\u652f\u63f4\n        <\/h3>\n\n        <p>\n          Research help, FAQs, workshops,\n          training and librarian support when\n          you don&#8217;t know where to start.\n        <\/p>\n\n        <div class=\"usj-map-arrow\">\n          \u2192\n        <\/div>\n\n      <\/a>\n\n\n      <!-- SPACES -->\n\n      <a class=\"usj-map-card\" href=\"\/zh\/libraries-spaces\/\">\n\n        <div class=\"usj-map-number\">\n          03\n        <\/div>\n\n        <div class=\"usj-map-icon\">\n          \ud83d\udcda\n        <\/div>\n\n        <h3>\n          \u5716\u66f8\u9928\u7a7a\u9593\n        <\/h3>\n\n        <p>\n          Find our two libraries, opening hours,\n          study rooms, silent zones and other\n          library facilities.\n        <\/p>\n\n        <div class=\"usj-map-arrow\">\n          \u2192\n        <\/div>\n\n      <\/a>\n\n\n      <!-- ABOUT -->\n\n      <a class=\"usj-map-card\" href=\"\/zh\/about-us\/\">\n\n        <div class=\"usj-map-number\">\n          04\n        <\/div>\n\n        <div class=\"usj-map-icon\">\n          \u2139\n        <\/div>\n\n        <h3>\n          \u95dc\u65bc\u6211\u5011\n        <\/h3>\n\n        <p>\n          Explore our spaces and directory, discover our collaborative partnerships, and learn how your generous support shapes our vibrant community.\n        <\/p>\n\n        <div class=\"usj-map-arrow\">\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       02 \u2014 OFF CAMPUS\n       ===================================================== -->\n\n  <section class=\"usj-start-section\">\n\n    <div class=\"usj-start-heading\">\n\n      <div class=\"usj-start-kicker\">\n        02 \u00b7 Access\n      <\/div>\n\n      <h2>\n        Library, wherever you are.\n      <\/h2>\n\n      <p>\n        You don&#8217;t have to be inside the library\n        to use the library.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"usj-offcampus\">\n\n\n      <div class=\"usj-offcampus-main\">\n\n        <div class=\"usj-offcampus-icon\">\n          \ud83c\udf10\n        <\/div>\n\n        <h3>\n          \u6821 \u5916 \u8a2a \u554f\n        <\/h3>\n\n        <p>\n          Access USJ Library digital resources\n          outside campus through the University&#8217;s\n          authentication system. Use the guide when\n          accessing databases, journals or other\n          subscribed resources from home.\n        <\/p>\n\n        <a class=\"usj-primary-button\" href=\"\/zh\/off-campus-access\/\">\n          Open Off-Campus Guide \u2192\n        <\/a>\n\n      <\/div>\n\n\n      <div class=\"usj-24hours\">\n\n        <div class=\"usj-24hours-label\">\n          \u96fb\u5b50\u5716\u66f8\u9928\n        <\/div>\n\n        <h3 style=\"color:white;\">\n          24 \/ 7\n        <\/h3>\n\n        <p>\n          Digital Library resources are available\n          anytime, from anywhere, subject to\n          authentication where required.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       03 \u2014 SEARCH\n       ===================================================== -->\n\n  <section class=\"usj-start-section\">\n\n    <div class=\"usj-start-heading\">\n\n      <div class=\"usj-start-kicker\">\n        03 \u00b7 Search\n      <\/div>\n\n      <h2>\n        Looking for a book, article or thesis?\n      <\/h2>\n\n      <p>\n        Start with the Library Discovery System.\n        One search can connect you with print and\n        online resources.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"usj-search-guide\">\n\n\n      <div class=\"usj-search-intro\">\n\n        <div class=\"usj-search-intro-icon\">\n          \ud83d\udd0d\n        <\/div>\n\n        <h3 style=\"color:white;\">\n          \u300c\u7d71\u4e00\u6aa2\u7d22\u300d\n        <\/h3>\n\n       <p>\n          Search across the Library&#8217;s integrated\n          resources using a title, author, keyword\n          or subject. Use Advanced Search when you\n          need more precise results.\n       <\/p>\n\n        <br>\n\n        <a class=\"usj-primary-button\" >\n          Search the Library \u2192\n        <\/a>\n\n      <\/div>\n\n\n      <div class=\"usj-search-steps\">\n\n\n        <div class=\"usj-search-step\">\n\n          <div class=\"usj-step-number\">\n            01\n          <\/div>\n\n          <h4>\n            Enter your keywords\n          <\/h4>\n\n          <p>\n            Try a title, author, topic or keyword.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"usj-search-step\">\n\n          <div class=\"usj-step-number\">\n            02\n          <\/div>\n\n          <h4>\n            Check the format\n          <\/h4>\n\n          <p>\n            See whether the item is print or available online.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"usj-search-step\">\n\n          <div class=\"usj-step-number\">\n            03\n          <\/div>\n\n          <h4>\n            Find the item\n          <\/h4>\n\n          <p>\n            Check its location, availability and access options.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"usj-search-step\">\n\n          <div class=\"usj-step-number\">\n            04\n          <\/div>\n\n          <h4>\n            Need help?\n          <\/h4>\n\n          <p>\n            Ask a librarian or check a Research Guide.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       04 \u2014 QUICK FAQ\n       ===================================================== -->\n\n  <section class=\"usj-start-section\">\n\n    <div class=\"usj-start-heading\">\n\n      <div class=\"usj-start-kicker\">\n        04 \u00b7 Quick answers\n      <\/div>\n\n      <h2>\n        Before you ask&#8230;\n      <\/h2>\n\n      <p>\n        A few things new USJ Library users ask most often.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"usj-faq-grid\">\n\n\n      <div class=\"usj-faq\">\n\n        <div class=\"usj-faq-question\">\n          How do I borrow a book?\n        <\/div>\n\n        <div class=\"usj-faq-answer\">\n          Check the Borrowing page for readership\n          validation and borrowing information.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"usj-faq\">\n\n        <div class=\"usj-faq-question\">\n          How do I find an article or thesis?\n        <\/div>\n\n        <div class=\"usj-faq-answer\">\n          Start with OneSearch, then use a Research\n          Guide or Research FAQ for more specific help.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"usj-faq\">\n\n        <div class=\"usj-faq-question\">\n          \u5982\u4f55\u53ef\u589e\u8ab0\u6211\u7684\u7814\u7a76\u6280\u80fd\uff1f\n        <\/div>\n\n        <div class=\"usj-faq-answer\">\n          The Library offers regular and ad hoc\n          workshops and training sessions.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"usj-faq\">\n\n        <div class=\"usj-faq-question\">\n          Can I eat or drink in the Library?\n        <\/div>\n\n        <div class=\"usj-faq-answer\">\n          Only spill-proof beverage containers\n          are permitted inside the Library.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"usj-faq\">\n\n        <div class=\"usj-faq-question\">\n          What if I have a question after hours?\n        <\/div>\n\n        <div class=\"usj-faq-answer\">\n          Check the Research FAQ and online guides\n          for resources that may help outside Library\n          office hours.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"usj-faq\">\n\n        <div class=\"usj-faq-question\">\n          Where are the libraries?\n        <\/div>\n\n        <div class=\"usj-faq-answer\">\n          USJ has two library locations. Visit\n          Our Libraries for locations and facilities.\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       05 \u2014 SERVICES\n       ===================================================== -->\n\n  <section class=\"usj-start-section\">\n\n    <div class=\"usj-start-heading\">\n\n      <div class=\"usj-start-kicker\">\n        05 \u00b7 Useful things\n      <\/div>\n\n      <h2>\n        What can the Library do for you?\n      <\/h2>\n\n      <p>\n        Go directly to the service you need.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"usj-service-grid\">\n\n\n      <a class=\"usj-service\" href=\"\/zh\/our-libraries\/\">\n\n        <div class=\"usj-service-icon\">\n          \ud83d\udccd\n        <\/div>\n\n        <h3>\n          \u95dc\u65bc\u6211\u5011\n        <\/h3>\n\n        <p>\n          Locations, facilities and opening information.\n        <\/p>\n\n      <\/a>\n\n\n      <a class=\"usj-service\" href=\"\/zh\/copy-print-scan\/\">\n\n        <div class=\"usj-service-icon\">\n          \ud83d\udda8\n        <\/div>\n\n        <h3>\n          Print &amp; Scan\n        <\/h3>\n\n        <p>\n          Printing, scanning and photocopying services.\n        <\/p>\n\n      <\/a>\n\n\n      <a class=\"usj-service\" href=\"https:\/\/mrbs.usj.edu.mo\/mrbs\/\">\n\n        <div class=\"usj-service-icon\">\n          \ud83e\ude91\n        <\/div>\n\n        <h3>\n          \u81ea\u4fee\u5ba4\n        <\/h3>\n\n        <p>\n          Find a place for focused or collaborative study.\n        <\/p>\n\n      <\/a>\n\n\n      <a class=\"usj-service\" href=\"\/zh\/contact-us\/\">\n\n        <div class=\"usj-service-icon\">\n          \ud83d\udcac\n        <\/div>\n\n        <h3>\n          \u806f\u7d61\u6211\u5011\n        <\/h3>\n\n        <p>\n          Ask a librarian about resources or research.\n        <\/p>\n\n      <\/a>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       FINAL CTA\n       ===================================================== -->\n\n  <section>\n\n    <div class=\"usj-start-final\">\n\n      <div class=\"usj-final-content\">\n\n        <h2 style=\"color:white;\">\n          Still not sure where to start?\n        <\/h2>\n\n        <p>\n          That&#8217;s what librarians are for.\n          Ask us about finding resources, accessing\n          databases, research support or anything else\n          Library-related.\n        <\/p>\n\n      <\/div>\n\n\n      <a class=\"usj-final-button\" href=\"https:\/\/library.usj.edu.mo\/zh\/library-directory\/\">\n        Ask a Librarian \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/section>\n\n\n<\/div>\n<style class=\"advgb-styles-renderer\">\n\n\/* =========================================================\n   ROOT\n   ========================================================= *\/\n\n.usj-start {\n\n  --blue: #1e73be;\n  --navy: #264758;\n  --dark-blue: #144b7c;\n  --mid-blue: #386983;\n  --light-blue: #eef6fb;\n\n  --yellow: #edab50;\n\n  --text: #24343d;\n  --muted: #687983;\n\n  --border: #dce6ec;\n  --soft: #f5f8fa;\n\n  width: 100%;\n  max-width: 1440px;\n\n  margin: 0 auto;\n\n  padding: 0 24px 90px;\n\n  box-sizing: border-box;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n\n  color: var(--text);\n}\n\n.usj-start *,\n.usj-start *::before,\n.usj-start *::after {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.usj-start-hero {\n\n  padding: 70px 0 48px;\n\n  position: relative;\n}\n\n.usj-start-eyebrow {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 9px;\n\n  margin-bottom: 18px;\n\n  color: var(--blue);\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n  letter-spacing: .1em;\n\n  text-transform: uppercase;\n}\n\n.usj-start-eyebrow::before {\n\n  content: \"\";\n\n  width: 30px;\n\n  height: 3px;\n\n  border-radius: 20px;\n\n  background: var(--yellow);\n}\n\n\n.usj-start-hero h1 {\n\n  margin: 0;\n\n  max-width: 820px;\n\n  color: var(--navy);\n\n  font-size: clamp(42px, 6vw, 70px);\n\n  line-height: .98;\n\n  letter-spacing: 0em;\n  padding-bottom:15pt;\n  font-weight: 800;\n  \n}\n\n.usj-start-hero h1 span {\n\n  color: var(--blue);\n}\n\n.usj-start-hero p {\n\n  max-width: 700px;\n\n  margin: 25px 0 0;\n\n  color: var(--muted);\n\n  font-size: 19px;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   ORIENTATION VIDEO CARD\n   ========================================================= *\/\n\n.usj-orientation-card {\n\n  display: grid;\n\n  grid-template-columns:\n    .85fr 1.15fr;\n\n  gap: 30px;\n\n  align-items: center;\n\n  margin-bottom: 35px;\n\n  padding: 28px;\n\n  border-radius: 22px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #f2f7fa 0%,\n      #ffffff 65%\n    );\n\n  border: 1px solid var(--border);\n\n  box-shadow:\n    0 10px 30px rgba(38,71,88,.06);\n\n  overflow: hidden;\n}\n\n\n\/* Left content *\/\n\n.usj-orientation-content {\n\n  padding: 10px 10px 10px 12px;\n}\n\n.usj-orientation-label {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 9px;\n\n  margin-bottom: 16px;\n\n  color: var(--blue);\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: .1em;\n\n  text-transform: uppercase;\n}\n\n\n\/* Play icon *\/\n\n.usj-play-icon {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 28px;\n  height: 28px;\n\n  border-radius: 50%;\n\n  background: var(--yellow);\n\n  color: var(--navy);\n\n  font-size: 10px;\n\n  padding-left: 2px;\n}\n\n\n.usj-orientation-content h2 {\n\n  margin: 0 0 13px;\n\n  color: var(--navy);\n\n  font-size: clamp(27px, 3vw, 38px);\n\n  line-height: 1.08;\n\n  letter-spacing: -.035em;\n}\n\n.usj-orientation-content h2 span {\n\n  color: var(--blue);\n\n  display: block;\n}\n\n\n.usj-orientation-content p {\n\n  max-width: 500px;\n\n  margin: 0;\n\n  color: var(--muted);\n\n  font-size: 14px;\n\n  line-height: 1.65;\n}\n\n\n.usj-orientation-meta {\n\n  display: flex;\n\n  flex-wrap: wrap;\n\n  align-items: center;\n\n  gap: 8px;\n\n  margin-top: 20px;\n\n  color: var(--muted);\n\n  font-size: 11px;\n\n  font-weight: 700;\n}\n\n.usj-orientation-meta span:last-child {\n\n  color: var(--blue);\n}\n\n\n\/* Video *\/\n\n.usj-orientation-video {\n\n  width: 100%;\n}\n\n\n.usj-video-frame {\n\n  position: relative;\n\n  width: 100%;\n\n  aspect-ratio: 16 \/ 9;\n\n  overflow: hidden;\n\n  border-radius: 15px;\n\n  background: var(--navy);\n\n  box-shadow:\n    0 12px 30px rgba(38,71,88,.14);\n}\n\n\n.usj-video-frame iframe {\n\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n}\n\n\n\/* =========================================================\n   QUICK SUMMARY \/ INFORMATION BAR\n   ========================================================= *\/\n\n.usj-start-summary {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 20px;\n\n  padding: 25px 29px;\n\n  margin-bottom: 58px;\n\n  border-radius: 19px;\n\n  background: var(--navy);\n\n  color: white;\n\n  box-shadow:\n    0 12px 35px rgba(38,71,88,.12);\n}\n\n\n\/* Information icon *\/\n\n.usj-summary-icon {\n\n  flex: 0 0 auto;\n\n  width: 40px;\n  height: 40px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background: var(--yellow);\n\n  color: var(--navy);\n\n  font-size: 20px;\n\n  font-weight: 800;\n\n  font-family: Georgia, serif;\n}\n\n.usj-summary-content {\n\n  flex: 1;\n}\n\n.usj-summary-title {\n\n  margin-bottom: 4px;\n\n  font-size: 16px;\n\n  font-weight: 800;\n}\n\n.usj-summary-text {\n\n  color: rgba(255,255,255,.78);\n\n  font-size: 14px;\n\n  line-height: 1.55;\n}\n\n\n\/* =========================================================\n   SECTION\n   ========================================================= *\/\n\n.usj-start-section {\n\n  margin-bottom: 68px;\n}\n\n.usj-start-heading {\n\n  margin-bottom: 25px;\n}\n\n.usj-start-kicker {\n\n  margin-bottom: 8px;\n\n  color: var(--blue);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: .1em;\n\n  text-transform: uppercase;\n}\n\n.usj-start-heading h2 {\n\n  margin: 0;\n\n  color: var(--navy);\n\n  font-size: clamp(29px, 4vw, 40px);\n\n  line-height: 1.1;\n  padding-bottom:10pt;\n  letter-spacing: -.03em;\n}\n\n.usj-start-heading p {\n\n  max-width: 700px;\n\n  margin: 12px 0 0;\n\n  color: var(--muted);\n\n  font-size: 16px;\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   FOUR MAIN LIBRARY AREAS\n   ========================================================= *\/\n\n.usj-start-map {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 15px;\n}\n\n.usj-map-card {\n\n  position: relative;\n\n  min-height: 225px;\n\n  padding: 25px;\n\n  overflow: hidden;\n\n  border: 1px solid var(--border);\n\n  border-radius: 18px;\n\n  background: white;\n\n  text-decoration: none;\n\n  color: inherit;\n\n  transition:\n    transform .22s ease,\n    box-shadow .22s ease,\n    border-color .22s ease;\n}\n\n.usj-map-card:hover {\n\n  transform: translateY(-5px);\n\n  border-color:\n    rgba(30,115,190,.3);\n\n  box-shadow:\n    0 15px 35px rgba(38,71,88,.10);\n}\n\n.usj-map-number {\n\n  position: absolute;\n\n  top: 20px;\n\n  right: 20px;\n\n  color: #dbe7ee;\n\n  font-size: 42px;\n\n  line-height: 1;\n\n  font-weight: 800;\n}\n\n.usj-map-icon {\n\n  width: 45px;\n  height: 45px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: 23px;\n\n  border-radius: 13px;\n\n  background: var(--light-blue);\n\n  color: var(--blue);\n\n  font-size: 21px;\n}\n\n.usj-map-card h3 {\n\n  margin: 0 0 9px;\n\n  color: var(--navy);\n\n  font-size: 18px;\n\n  line-height: 1.25;\n}\n\n.usj-map-card p {\n\n  margin: 0;\n\n  color: var(--muted);\n\n  font-size: 13px;\n\n  line-height: 1.6;\n}\n\n.usj-map-arrow {\n\n  position: absolute;\n\n  bottom: 22px;\n  right: 23px;\n\n  color: var(--blue);\n\n  font-size: 19px;\n\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   OFF-CAMPUS ACCESS\n   ========================================================= *\/\n\n.usj-offcampus {\n\n  display: grid;\n\n  grid-template-columns:\n    1.15fr .85fr;\n\n  gap: 25px;\n\n  align-items: stretch;\n}\n\n.usj-offcampus-main {\n\n  padding: 34px;\n\n  border-radius: 21px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #eef6fb,\n      #f9fbfc\n    );\n\n  border: 1px solid #dbeaf3;\n}\n\n.usj-offcampus-icon {\n\n  width: 48px;\n  height: 48px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: 22px;\n\n  border-radius: 14px;\n\n  background: white;\n\n  color: var(--blue);\n\n  font-size: 22px;\n\n  box-shadow:\n    0 5px 15px rgba(30,115,190,.08);\n}\n\n.usj-offcampus-main h3 {\n\n  margin: 0 0 12px;\n\n  color: var(--navy);\n\n  font-size: 25px;\n\n  letter-spacing: -.02em;\n}\n\n.usj-offcampus-main p {\n\n  margin: 0 0 20px;\n\n  max-width: 600px;\n\n  color: var(--muted);\n\n  font-size: 15px;\n\n  line-height: 1.7;\n}\n\n.usj-primary-button {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 9px;\n\n  padding: 12px 18px;\n\n  border-radius: 9px;\n\n  background: var(--blue);\n\n  color: white;\n\n  text-decoration: none;\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n  transition:\n    transform .2s ease,\n    background .2s ease;\n}\n\n.usj-primary-button:hover {\n\n  background: var(--dark-blue);\n\n  transform: translateY(-2px);\n}\n\n\n.usj-24hours {\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  padding: 32px;\n\n  border-radius: 21px;\n\n  background: var(--navy);\n\n  color: white;\n}\n\n.usj-24hours-label {\n\n  margin-bottom: 10px;\n\n  color: var(--yellow);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: .1em;\n\n  text-transform: uppercase;\n}\n\n.usj-24hours h3 {\n\n  margin: 0 0 9px;\n\n  font-size: 27px;\n\n  letter-spacing: -.025em;\n}\n\n.usj-24hours p {\n\n  margin: 0;\n\n  color: rgba(255,255,255,.75);\n\n  font-size: 14px;\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   SEARCH GUIDE\n   ========================================================= *\/\n\n.usj-search-guide {\n\n  display: grid;\n\n  grid-template-columns:\n    .9fr 1.1fr;\n\n  gap: 25px;\n\n  align-items: stretch;\n}\n\n.usj-search-intro {\n\n  padding: 34px;\n\n  border-radius: 21px;\n\n  background: var(--navy);\n\n  color: white;\n}\n\n.usj-search-intro-icon {\n\n  width: 47px;\n  height: 47px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: 22px;\n\n  border-radius: 13px;\n\n  background: rgba(255,255,255,.1);\n\n  font-size: 21px;\n}\n\n.usj-search-intro h3 {\n\n  margin: 0 0 11px;\n\n  font-size: 27px;\n\n  letter-spacing: -.025em;\n}\n\n.usj-search-intro p {\n\n  margin: 0;\n\n  color: rgba(255,255,255,.75);\n\n  font-size: 14px;\n\n  line-height: 1.65;\n}\n\n.usj-search-intro br {\n\n  display: block;\n\n  content: \"\";\n\n  margin-top: 8px;\n}\n\n\n.usj-search-steps {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 1fr;\n\n  gap: 12px;\n}\n\n.usj-search-step {\n\n  padding: 21px;\n\n  border: 1px solid var(--border);\n\n  border-radius: 15px;\n\n  background: white;\n}\n\n.usj-step-number {\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  width: 29px;\n  height: 29px;\n\n  margin-bottom: 14px;\n\n  border-radius: 50%;\n\n  background: var(--light-blue);\n\n  color: var(--blue);\n\n  font-size: 12px;\n\n  font-weight: 800;\n}\n\n.usj-search-step h4 {\n\n  margin: 0 0 6px;\n\n  color: var(--navy);\n\n  font-size: 15px;\n}\n\n.usj-search-step p {\n\n  margin: 0;\n\n  color: var(--muted);\n\n  font-size: 12px;\n\n  line-height: 1.55;\n}\n\n\n\/* =========================================================\n   FAQ\n   ========================================================= *\/\n\n.usj-faq-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(2, 1fr);\n\n  gap: 13px;\n}\n\n.usj-faq {\n\n  padding: 22px 24px;\n\n  border: 1px solid var(--border);\n\n  border-radius: 15px;\n\n  background: white;\n}\n\n.usj-faq-question {\n\n  display: flex;\n\n  align-items: flex-start;\n\n  gap: 12px;\n\n  color: var(--navy);\n\n  font-size: 15px;\n\n  font-weight: 750;\n\n  line-height: 1.4;\n}\n\n.usj-faq-question::before {\n\n  content: \"?\";\n\n  flex: 0 0 auto;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  width: 25px;\n  height: 25px;\n\n  border-radius: 50%;\n\n  background: var(--light-blue);\n\n  color: var(--blue);\n\n  font-size: 12px;\n\n  font-weight: 800;\n}\n\n.usj-faq-answer {\n\n  margin:\n    11px 0 0\n    37px;\n\n  color: var(--muted);\n\n  font-size: 13px;\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   SERVICES\n   ========================================================= *\/\n\n.usj-service-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 14px;\n}\n\n.usj-service {\n\n  display: flex;\n\n  flex-direction: column;\n\n  min-height: 150px;\n\n  padding: 22px;\n\n  border: 1px solid var(--border);\n\n  border-radius: 16px;\n\n  background: white;\n\n  text-decoration: none;\n\n  color: inherit;\n\n  transition:\n    transform .2s ease,\n    background .2s ease,\n    border-color .2s ease;\n}\n\n.usj-service:hover {\n\n  transform: translateY(-3px);\n\n  background: var(--light-blue);\n\n  border-color:\n    rgba(30,115,190,.25);\n}\n\n.usj-service-icon {\n\n  width: 40px;\n  height: 40px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: 17px;\n\n  border-radius: 11px;\n\n  background: var(--soft);\n\n  color: var(--blue);\n\n  font-size: 18px;\n}\n\n.usj-service h3 {\n\n  margin: 0 0 6px;\n\n  color: var(--navy);\n\n  font-size: 15px;\n}\n\n.usj-service p {\n\n  margin: 0;\n\n  color: var(--muted);\n\n  font-size: 12px;\n\n  line-height: 1.5;\n}\n\n\n\/* =========================================================\n   FINAL CTA\n   ========================================================= *\/\n\n.usj-start-final {\n\n  position: relative;\n\n  overflow: hidden;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 30px;\n\n  padding: 38px 42px;\n\n  border-radius: 22px;\n\n  background:\n    linear-gradient(\n      135deg,\n      var(--blue),\n      var(--dark-blue)\n    );\n\n  color: white;\n\n  box-shadow:\n    0 18px 45px rgba(30,115,190,.18);\n}\n\n.usj-start-final::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  width: 230px;\n  height: 230px;\n\n  right: -75px;\n  top: -110px;\n\n  border-radius: 50%;\n\n  border: 35px solid rgba(255,255,255,.06);\n}\n\n.usj-final-content {\n\n  position: relative;\n\n  z-index: 1;\n}\n\n.usj-final-content h2 {\n\n  margin: 0 0 9px;\n\n  font-size: 28px;\n\n  letter-spacing: -.025em;\n}\n\n.usj-final-content p {\n\n  max-width: 650px;\n\n  margin: 0;\n\n  color: rgba(255,255,255,.8);\n\n  font-size: 14px;\n\n  line-height: 1.6;\n}\n\n.usj-final-button {\n\n  position: relative;\n\n  z-index: 1;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  padding: 14px 22px;\n\n  border-radius: 10px;\n\n  background: white;\n\n  color: var(--dark-blue);\n\n  text-decoration: none;\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n  white-space: nowrap;\n\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease;\n}\n\n.usj-final-button:hover {\n\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 8px 20px rgba(0,0,0,.15);\n}\n\n\n\/* =========================================================\n   WORDPRESS COMPATIBILITY\n   ========================================================= *\/\n\n.usj-start a {\n\n  box-shadow: none !important;\n}\n\n.usj-start a:hover {\n\n  text-decoration: none !important;\n}\n\n.usj-start h1,\n.usj-start h2,\n.usj-start h3,\n.usj-start h4,\n.usj-start p {\n\n  margin-top: 0;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 950px) {\n\n  .usj-start-map {\n\n    grid-template-columns:\n      repeat(2, 1fr);\n  }\n\n  .usj-service-grid {\n\n    grid-template-columns:\n      repeat(2, 1fr);\n  }\n\n  .usj-offcampus {\n\n    grid-template-columns: 1fr;\n  }\n\n  .usj-search-guide {\n\n    grid-template-columns: 1fr;\n  }\n\n}\n\n\n\/* =========================================================\n   ORIENTATION TABLET\n   ========================================================= *\/\n\n@media (max-width: 850px) {\n\n  .usj-orientation-card {\n\n    grid-template-columns: 1fr;\n\n    gap: 22px;\n\n    padding: 25px;\n  }\n\n  .usj-orientation-content {\n\n    padding: 5px;\n  }\n\n  .usj-orientation-content h2 span {\n\n    display: inline;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 620px) {\n\n  .usj-start {\n\n    padding-left: 17px;\n\n    padding-right: 17px;\n\n    padding-bottom: 55px;\n  }\n\n  .usj-start-hero {\n\n    padding-top: 45px;\n\n    padding-bottom: 35px;\n  }\n\n  .usj-start-hero h1 {\n\n    font-size: 43px;\n  }\n\n  .usj-start-hero p {\n\n    font-size: 16px;\n\n    line-height: 1.6;\n  }\n\n\n  \/* Orientation *\/\n\n  .usj-orientation-card {\n\n    gap: 20px;\n\n    padding: 20px;\n\n    margin-bottom: 30px;\n\n    border-radius: 18px;\n  }\n\n  .usj-orientation-content {\n\n    padding: 3px;\n  }\n\n  .usj-orientation-content h2 {\n\n    font-size: 29px;\n  }\n\n  .usj-orientation-content p {\n\n    font-size: 13px;\n  }\n\n  .usj-orientation-meta {\n\n    font-size: 10px;\n  }\n\n  .usj-video-frame {\n\n    border-radius: 12px;\n  }\n\n\n  \/* Summary *\/\n\n  .usj-start-summary {\n\n    align-items: flex-start;\n\n    padding: 22px;\n\n    margin-bottom: 45px;\n  }\n\n  .usj-summary-text {\n\n    font-size: 13px;\n  }\n\n\n  \/* Sections *\/\n\n  .usj-start-section {\n\n    margin-bottom: 50px;\n  }\n\n  .usj-start-heading h2 {\n\n    font-size: 30px;\n  }\n\n\n  \/* Main map *\/\n\n  .usj-start-map {\n\n    grid-template-columns: 1fr;\n  }\n\n  .usj-map-card {\n\n    min-height: 185px;\n  }\n\n\n  \/* Off-campus *\/\n\n  .usj-offcampus-main,\n  .usj-24hours,\n  .usj-search-intro {\n\n    padding: 27px;\n  }\n\n\n  \/* Search *\/\n\n  .usj-search-steps {\n\n    grid-template-columns: 1fr;\n  }\n\n\n  \/* FAQ *\/\n\n  .usj-faq-grid {\n\n    grid-template-columns: 1fr;\n  }\n\n\n  \/* Services *\/\n\n  .usj-service-grid {\n\n    grid-template-columns: 1fr;\n  }\n\n\n  \/* Final CTA *\/\n\n  .usj-start-final {\n\n    align-items: flex-start;\n\n    flex-direction: column;\n\n    padding: 29px 25px;\n  }\n\n  .usj-final-content h2 {\n\n    font-size: 25px;\n  }\n\n  .usj-final-button {\n\n    width: 100%;\n  }\n\n}\n\n<\/style>","protected":false},"excerpt":{"rendered":"<p>USJ LIBRARY Start with Your Library. New to USJ Library? Start here. In about 5 minutes, you&#8217;ll know where to search, study, borrow, get help and access resources wherever you are. \u25b6 Library Space New to the Library? Start here. Welcome to the University of Saint Joseph (USJ) Library! This quick overview will help you [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-9396","page","type-page","status-publish","hentry"],"coauthors":[],"author_meta":{"author_link":"https:\/\/library.usj.edu.mo\/zh\/author\/catarina\/","display_name":"Catarina Lei"},"relative_dates":{"created":"Posted 4 \u5e74 ago","modified":"Updated 21 \u5c0f\u6642 ago"},"absolute_dates":{"created":"Posted on 19 10 \u6708, 2022","modified":"Updated on 6 10 \u6708, 2026"},"absolute_dates_time":{"created":"Posted on 19 10 \u6708, 2022 2:51 \u4e0a\u5348","modified":"Updated on 6 10 \u6708, 2026 11:38 \u4e0a\u5348"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/pages\/9396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/comments?post=9396"}],"version-history":[{"count":107,"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/pages\/9396\/revisions"}],"predecessor-version":[{"id":466253,"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/pages\/9396\/revisions\/466253"}],"wp:attachment":[{"href":"https:\/\/library.usj.edu.mo\/zh\/wp-json\/wp\/v2\/media?parent=9396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}