/*----------------------------------------------- ---------------- EXTERNAL TYPES ----------------- -------------------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap'); /*------------------------------------------- ---------------- RESET + BASE --------------- -------------------------------------------*/ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Afacad Flux', sans-serif; scroll-behavior: smooth; } html, body { width: 100%; height: 100%; background-color: #FFF; font-size: 16px; } img { max-width: 100%; display: block; } /*------------------------------------------- -------------- GENERAL WRAPPER -------------- -------------------------------------------*/ #wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; background-color: #FFF; } #wrapper .main { margin-top: 300px; } #wrapper .container-fluid:nth-child(5) { display: none; } /*------------------------------------------- -------------- HEADER REGION ---------------- -------------------------------------------*/ #wrapper #header-region { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 10; background-color: #f4f4f4; } #wrapper #header-region .container-fluid { display: flex; flex-direction: column; position: absolute; top: 0; width: 100%; padding: 0; } #wrapper #header-region .container-fluid .banner-title-container { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; } #wrapper #header-region .container-fluid .banner-title-container .orgao { font-size: 5vmin; font-weight: bold; color: #333; } /*------------------------------------- ------------- TOP NAVBAR -------------- -------------------------------------*/ .navbar { display: none; } .top-options { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; padding: 1rem; background-color: #EEE; gap: 0.5rem; } .top-options .top-link-item { font-size: 1rem; color: #333; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; background-color: #ddd; transition: background-color 0.3s ease; } .top-options .top-link-item:hover { background-color: #ccc; } /*----------------------------------- ----------- SEARCH BAR -------------- -----------------------------------*/ #wrapper > .container-fluid { position: absolute; top: 42vh; width: 75%; padding: 0; z-index: 5; } .container-fluid #opac-main-search { background-color: #FFF; height: 6vmin; opacity: 0.9; display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } #searchform { width: 100%; display: flex; align-items: center; gap: 0.5rem; } #select_library, .form-row #masthead_search { background-color: #5F2996; color: #fff; border: none; border-radius: 4px; padding: 0.5rem; font-family: 'Afacad Flux', sans-serif; } #masthead_search { width: 150px; } #translControl1 { font-family: 'Sometype Mono', monospace; font-size: 1.2rem; padding-left: 1rem; border: none; } .btn-primary { background-color: #fff; color: #9E3BFF; border: 2px solid #9E3BFF; border-radius: 4px; padding: 0.5rem 1rem; transition: background-color 0.3s ease, color 0.3s ease; } .btn-primary:hover { background-color: #9E3BFF; color: #fff; } /*------------------------------------------ ----------- ADVANCED SEARCH BAR ------------ ------------------------------------------*/ #wrapper .container-fluid .row:nth-child(2) { display: none; } /*------------------------------------------- ---------------- MEDIA QUERIES -------------- -------------------------------------------*/ @media screen and (max-width: 1920px) and (min-width: 1380px) { #wrapper .container-fluid { top: -10vh; width: 100%; } #opac-main-search { position: absolute; top: 0; left: 0; width: 100%; } } @media screen and (max-width: 1380px) and (min-width: 1050px) { #wrapper #header-region .container-fluid .banner-title-container .orgao { font-size: 4vmin; } .container-fluid #opac-main-search { height: 5vmin; } #wrapper .container-fluid { top: 40vh; width: 75%; } } @media screen and (max-width: 1050px) and (min-width: 992px) { .top-options { justify-content: center; width: 90%; } .top-options .top-link-item { font-size: 3vmin; } #wrapper .container-fluid { top: 40vh; width: 70%; } #wrapper #header-region .container-fluid .banner-title-container .orgao { font-size: 5vmin; } } @media (max-width: 992px) and (min-width: 360px) { #wrapper #header-region .container-fluid .banner-title-container { font-size: 5vmin; display: flex; flex-direction: column; align-items: center; } .container-fluid #opac-main-search { top: -5vh; } #wrapper > .container-fluid { position: absolute; width: 80%; top: -30vh; } #opac-main-search #searchform .form-row > div #masthead_search { width: 100%; } #opac-main-search #searchform .form-row div:nth-child(2) { order: 1; } .container-fluid:has("#opac-main-search") { height: 20%; } } @media (min-width: 360px) { #opac-main-search { position: absolute; width: 100%; margin: 0 auto; height: 100%; } .top-options { width: 90%; } .top-options .top-link-item { font-size: 3vmin; } }