/* ========================================================= CENTRAL LIBRARY - COLLEGE OF ENGINEERING VADAKARA Koha 26.05 Modern Blue / Teal OPAC Designed to match the supplied reference mockup. ========================================================= */ :root{ --cl-navy:#06275f; --cl-blue:#0b4fc4; --cl-teal:#08a8ad; --cl-teal-dark:#008f99; --cl-cyan:#16c3ca; --cl-ink:#071f55; --cl-soft:#eef6fb; --cl-line:#dce7f1; --cl-white:#fff; --cl-shadow:0 8px 24px rgba(4,35,82,.12); --cl-radius:12px; } *{box-sizing:border-box} body{ margin:0!important; background:#f5f8fc!important; color:var(--cl-ink); font-family:"Poppins","Montserrat","Segoe UI",Arial,sans-serif; } .masthead{display:none!important} /* ---------- GLOBAL BANNER ---------- */ /* * Koha 26.05 global banner. * The JS inserts this element directly under . * !important is intentional: Bootstrap/Koha header rules must not hide it. */ body > #cl-library-banner, #cl-library-banner{ display:block!important; visibility:visible!important; opacity:1!important; position:relative!important; z-index:2147483647!important; width:100%!important; max-width:none!important; height:120px!important; min-height:120px!important; max-height:120px!important; margin:0!important; padding:0!important; overflow:hidden!important; background:#fff!important; line-height:0!important; font-size:0!important; box-sizing:border-box!important; border-radius:12px 12px 0 0!important; border:2px solid #075f9d!important; } #cl-library-banner img, body > #cl-library-banner img{ display:block!important; visibility:visible!important; opacity:1!important; width:100%!important; height:120px!important; min-height:120px!important; max-height:120px!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; object-position:center center!important; box-sizing:border-box!important; border-radius:12px 12px 0 0!important; } /* ---------- GLOBAL NAV ---------- */ #cl-main-menu{ height:48px; background:linear-gradient(90deg,#17467d 0%,#17467d 55%,#17467d 100%); border-bottom:2px solid #0bbbc2; position:relative; z-index:999; } .cl-menu-inner{ height:48px; max-width:1500px; margin:0 auto; display:flex; align-items:stretch; padding:0 12px; } .cl-menu-inner a{ color:#fff!important; text-decoration:none!important; display:flex; align-items:center; padding:0 25px; font-size:15px; font-weight:500; white-space:nowrap; transition:.2s ease; } .cl-menu-inner a:hover, .cl-menu-inner a.active{ background:var(--cl-teal); } .cl-menu-spacer{flex:1} .cl-login{ font-weight:600!important; } /* ---------- HERO ---------- */ #cl-search-hero{ width: 100% !important; max-width: 100% !important; min-height: 200px !important; max-height: 250px !important; height: auto !important; box-sizing: border-box !important; overflow: visible !important; padding: 0px 24px 32px !important; position:relative; background-image: linear-gradient(90deg,rgba(1,31,72,.82),rgba(0,67,105,.58),rgba(0,122,145,.62)), url("/opac-tmpl/bootstrap/en/images/search-hero-background.png"); background-size:cover; background-position:center; display:flex; justify-content:center; text-align:center; margin-top: -0.65em; } .cl-hero-inner{ width:min(900px,94%); padding:10px 20px 24px; color:#fff; } .cl-hero-title{ margin:0 0 2px!important; color:#fff!important; font-size:37px!important; line-height:1.2; font-weight:700!important; letter-spacing:-.5px; } .cl-hero-subtitle{ margin:4px 0 24px!important; font-size:17px; color:#fff; } #cl-search-form{ width:100%; min-height:66px; padding:10px; border-radius:11px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.24); box-shadow:0 10px 30px rgba(0,0,0,.18); display:flex; align-items:center; gap:0; backdrop-filter:blur(5px); } #cl-search-form select{ height:46px; width:126px; padding:0 17px; border:0; border-right:1px solid #d9e2ef; border-radius:7px 0 0 7px; background:#fff; color:var(--cl-ink); font-size:14px; outline:none; } #cl-search-form input{ height:46px; flex:1; min-width:0; padding:0 18px; border:0; background:#fff; color:var(--cl-ink); font-size:15px; outline:none; } #cl-search-form button{ height:46px; min-width:124px; border:0; border-radius:0 7px 7px 0; background:linear-gradient(135deg,#0aaeb3,#0797a4); color:#fff; font-size:15px; font-weight:600; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } #cl-search-form button:hover{background:#007f91} .cl-advanced{ display:inline-block; margin-top:8px; color:#fff!important; font-size:13px; text-decoration:underline!important; } /* ---------- SERVICE CARDS ---------- */ .cl-services{ width:min(1200px,calc(100% - 40px)); margin:-24px auto 12px; position:relative; z-index:5; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .cl-service{ min-height:110px; padding:15px 15px 12px 16px; background:#fff; border-radius:11px; box-shadow:var(--cl-shadow); border:1px solid rgba(220,231,241,.8); display:grid; grid-template-columns:62px 1fr; grid-template-rows:auto 1fr auto; column-gap:12px; text-decoration:none!important; color:var(--cl-ink)!important; } .cl-service:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(4,35,82,.18)} .cl-service-icon{ width:54px;height:54px;border-radius:50%; overflow:hidden; grid-row:1/4; align-self:start; } .cl-service-icon img{width:100%;height:100%;display:block} .cl-service h3{ margin:0!important; font-size:16px!important; color:var(--cl-ink)!important; } .cl-service p{ margin:5px 0 0!important; font-size:12px; line-height:1.5; color:#263c63; } .cl-service span{ color:var(--cl-blue); font-size:12px; font-weight:600; margin-top:6px; } /* ---------- MAIN LAYOUT + NEWS ---------- */ #cl-content-wrap{ width:min(1460px,calc(100% - 36px)); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 315px; gap:18px; } #cl-main-column{min-width:0} #cl-news-sidebar{ align-self:start; position:sticky; top:12px; background:#fff; border:1px solid var(--cl-line); border-radius:12px; box-shadow:var(--cl-shadow); overflow:hidden; } .cl-news-head{ padding:14px 17px; color:#fff; background:rgb(23, 70, 125); font-weight:700; font-size:18px; } .cl-news-head small{ display:block; margin-top:3px; font-weight:400; opacity:.9; font-size:11px; } .cl-news-window{ height:500px; overflow:hidden; position:relative; background:linear-gradient(#fff,#f8fbfe); } .cl-news-track{ padding:6px 14px 20px; animation:clNewsScroll 28s linear infinite; } #cl-news-sidebar:hover .cl-news-track{animation-play-state:paused} .cl-news-item{ padding:14px 4px; border-bottom:1px solid #e5edf5; } .cl-news-date{ color:var(--cl-teal-dark); font-size:11px; font-weight:700; text-transform:uppercase; } .cl-news-item h4{ margin:4px 0!important; color:var(--cl-ink)!important; font-size:14px!important; line-height:1.35; } .cl-news-item p{ margin:0!important; color:#4b5d78; font-size:12px; line-height:1.5; } @keyframes clNewsScroll{ 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} } .cl-news-more{ display:block; margin:12px 15px 16px; padding:9px; text-align:center; border-radius:7px; background:#eaf7f8; color:#007d88!important; text-decoration:none!important; font-size:12px; font-weight:600; } /* ---------- BOOK SECTIONS ---------- */ .cl-section-box{ background:#fff; border:1px solid var(--cl-line); border-radius:11px; box-shadow:0 4px 16px rgba(4,35,82,.08); padding:14px 18px 18px; margin-bottom:12px; } .cl-section-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e7edf5; padding-bottom:9px; margin-bottom:10px; } .cl-section-head h2{ margin:0!important; color:var(--cl-ink)!important; font-size:20px!important; } .cl-section-head h2:after{ content:""; display:block; width:32px;height:3px; margin-top:7px; border-radius:3px; background:var(--cl-teal); } .cl-viewall{ color:var(--cl-teal-dark)!important; text-decoration:none!important; font-size:12px; font-weight:600; } .cl-slider{ position:relative; overflow:hidden; padding:0 24px; } .cl-slides{ display:flex; transition:transform .45s ease; } .cl-slide{ flex:0 0 20%; min-width:20%; padding:0 7px; } .cl-book{ display:block; color:var(--cl-ink)!important; text-decoration:none!important; } .cl-cover{ width:100%; aspect-ratio:90/112; border-radius:4px; overflow:hidden; background:#e8eef4; box-shadow:0 4px 10px rgba(0,0,0,.14); } .cl-cover img{ display:block; width:100%; height:100%; } .cl-book-title{ margin-top:7px; font-size:12px; line-height:1.3; font-weight:700; min-height:31px; } .cl-book-author{ margin-top:3px; color:#536582; font-size:11px; line-height:1.25; } .cl-arrow{ position:absolute; z-index:2; top:43%; transform:translateY(-50%); width:31px;height:31px; border-radius:50%; border:1px solid #dce7f1; background:#fff; color:var(--cl-navy); box-shadow:0 3px 9px rgba(0,0,0,.1); cursor:pointer; font-size:24px; line-height:25px; } .cl-prev{left:0} .cl-next{right:0} .cl-dots{ text-align:center; margin-top:10px; } .cl-dot{ width:7px;height:7px; padding:0; margin:0 3px; border:0; border-radius:50%; background:#c5d1df; } .cl-dot.active{background:var(--cl-teal)} /* ---------- INFORMATION ---------- */ .cl-info-grid{ display:grid; grid-template-columns:1.1fr 1.1fr 1.1fr 1fr; gap:12px; margin-bottom:12px; } .cl-info{ min-height:140px; background:#fff; border:1px solid var(--cl-line); border-radius:10px; padding:14px 16px; box-shadow:0 4px 14px rgba(4,35,82,.06); } .cl-info.primary{ color:#fff; background:linear-gradient(135deg,#0aa7ac,#0b4fc4); } .cl-info h3{ margin:0 0 8px!important; font-size:16px!important; color:var(--cl-ink)!important; } .cl-info.primary h3{color:#fff!important} .cl-info p{ margin:0!important; font-size:11.5px; line-height:1.55; } .cl-info.primary p{color:#fff} .cl-hours{width:100%;font-size:11px} .cl-hours td{padding:3px 0} .cl-account-btn{ display:inline-block; margin-top:10px; padding:9px 14px; border-radius:6px; color:#fff!important; background:#08aeb5; text-decoration:none!important; font-size:12px; font-weight:600; } /* ---------- FOOTER ---------- */ #cl-footer{ margin-top:0; background:#17467d; color:#fff; } .cl-footer-inner{ width:min(1460px,calc(100% - 36px)); margin:auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:25px; padding:24px 0; } #cl-footer h3{color:#fff!important;font-size:15px!important;margin:0 0 8px!important} #cl-footer p{margin:0!important;font-size:11px;line-height:1.7;color:#dceaff} #cl-footer a{color:#dceaff!important;text-decoration:none!important} .cl-copy{ border-top:1px solid rgba(255,255,255,.15); text-align:center; padding:10px; font-size:11px; color:#dceaff; } /* Hide original Koha home blocks after custom homepage is inserted. */ .cl-modern-home #opac-main-search, .cl-modern-home #news, .cl-modern-home #opacmainuserblock, .cl-modern-home #opac-news{display:none!important} /* ---------- RESPONSIVE ---------- */ @media(max-width:1100px){ #cl-content-wrap{grid-template-columns:1fr 280px} .cl-services{grid-template-columns:repeat(2,1fr)} .cl-info-grid{grid-template-columns:repeat(2,1fr)} .cl-slide{flex-basis:25%;min-width:25%} } @media(max-width:800px){ .cl-menu-inner a{padding:0 11px;font-size:12px} #cl-search-hero{min-height:235px} .cl-hero-title{font-size:28px!important} #cl-content-wrap{grid-template-columns:1fr} #cl-news-sidebar{position:relative;top:auto} .cl-news-window{height:240px} .cl-slide{flex-basis:33.333%;min-width:33.333%} } @media(max-width:600px){ #cl-main-menu{height:auto} .cl-menu-inner{height:auto;overflow-x:auto} .cl-menu-inner a{padding:12px 10px;font-size:11px} .cl-menu-spacer{display:none} #cl-search-form{display:grid;grid-template-columns:1fr} #cl-search-form select, #cl-search-form input, #cl-search-form button{ width:100%; border-radius:6px; border:0; } #cl-search-form{gap:6px} .cl-services{width:calc(100% - 20px);grid-template-columns:1fr} .cl-slide{flex-basis:50%;min-width:50%} .cl-info-grid{grid-template-columns:1fr} .cl-footer-inner{grid-template-columns:1fr 1fr} } #cartmenulink,#listsmenulink,#loginlink,#header_user,#members,#user-menu,#login{display:none!important;visibility:hidden!important} #cl-library-banner,#cl-library-banner img{width:100%!important;height:120px!important;min-height:120px!important;max-height:120px!important;box-sizing:border-box!important} #cl-library-banner{overflow:hidden!important;border-radius:12px 12px 0 0!important} #cl-library-banner img{display:block!important;} #cl-search-hero{height:235px!important;min-height:235px!important;padding:0px 20px!important;background-image:linear-gradient(rgba(5,55,80,.48),rgba(0,90,105,.55)),url("/opac-tmpl/bootstrap/en/images/search-hero-background.png")!important;background-size:cover!important;background-position:center!important} .cl-services .cl-service{text-align:center!important} .cl-services .cl-service-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;margin-right:auto!important;float:none!important} .cl-slider{position:relative!important;overflow:hidden!important}.cl-slides{display:flex!important;flex-wrap:nowrap!important;transition:transform .55s ease-in-out!important;will-change:transform!important}.cl-slide{flex:0 0 20%!important;width:20%!important;min-width:20%!important;box-sizing:border-box!important} @media(max-width:1050px){.cl-slide{flex-basis:25%!important;width:25%!important;min-width:25%!important}}@media(max-width:800px){.cl-slide{flex-basis:33.3333%!important;width:33.3333%!important;min-width:33.3333%!important}}@media(max-width:600px){.cl-slide{flex-basis:50%!important;width:50%!important;min-width:50%!important}#cl-search-hero{height:220px!important;min-height:220px!important}} /* V7 RESPONSIVE FIX */ html,body{max-width:100%!important;overflow-x:hidden!important} #cl-library-banner{width:100%!important;max-width:100%!important;height:120px!important;min-height:120px!important;max-height:120px!important;overflow:hidden!important;box-sizing:border-box!important} #cl-library-banner img{width:100%!important;height:120px!important;min-height:120px!important;max-height:120px!important;display:block!important;object-position:center!important} #cl-main-menu{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important} #cl-main-menu .cl-menu-inner{width:100%!important;max-width:1400px!important;margin:0 auto!important;box-sizing:border-box!important} #cl-search-hero{width:100%!important;max-width:100%!important;min-height:250px!important;height:auto!important;box-sizing:border-box!important;overflow:visible!important;padding:0px 24px 32px!important} #cl-search-form{width:100%!important;max-width:1000px!important;min-height:52px!important;height:auto!important;display:flex!important;align-items:stretch!important;box-sizing:border-box!important;margin:18px auto 10px!important} #cl-search-form select{flex:0 0 150px!important;min-width:0!important;box-sizing:border-box!important} #cl-search-form input{flex:1 1 auto!important;min-width:0!important;box-sizing:border-box!important} #cl-search-form button{flex:0 0 125px!important;min-width:0!important;box-sizing:border-box!important} #cl-search-hero .cl-advanced{display:block!important;width:max-content!important;max-width:100%!important;margin:8px auto 0!important;line-height:1.4!important;box-sizing:border-box!important} @media(max-width:900px){ #cl-library-banner,#cl-library-banner img{height:100px!important;min-height:100px!important;max-height:100px!important} #cl-main-menu .cl-menu-inner{justify-content:center!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important} #cl-main-menu .cl-menu-inner::-webkit-scrollbar{display:none!important} #cl-main-menu .cl-menu-inner>a{flex:0 0 auto!important;white-space:nowrap!important} } @media(max-width:600px){ #cl-library-banner,#cl-library-banner img{width:100vw!important;height:90px!important;min-height:90px!important;max-height:90px!important} #cl-main-menu .cl-menu-inner{display:flex!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;padding:0 6px!important} #cl-main-menu .cl-menu-inner>a{padding:12px 11px!important;font-size:13px!important} #cl-search-hero{min-height:200px!important;min-height:380px!important;height:auto!important;padding:0px 12px 24px!important;overflow:visible!important;margin-bottom:10%;margin-top:0.65em;} #cl-search-form{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;gap:8px!important;margin:12px auto 8px!important} #cl-search-form select,#cl-search-form input,#cl-search-form button{width:100%!important;min-width:0!important;max-width:100%!important;height:45px!important;min-height:45px!important;flex:none!important} #cl-search-form button{position:static!important;margin:0!important} #cl-search-hero .cl-advanced{margin:9px auto 0!important;text-align:center!important;font-size:13px!important} } @media(max-width:380px){#cl-library-banner,#cl-library-banner img{height:78px!important;min-height:78px!important;max-height:78px!important}} /* ============================================================ V8 SCROLLBAR FIX Prevent nested OPAC containers from creating a second vertical scrollbar in Chrome/Edge while preserving the single normal page scrollbar. ============================================================ */ html { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; } body { overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; min-height: 100vh !important; } /* Never create a vertical scrolling viewport inside the page */ #page, #container, #main, #content, #opac-main, #opac-main-content, #maincontent, #cl-page, .cl-page, .cl-wrapper, .cl-content, .cl-main { overflow-y: visible !important; max-height: none !important; } /* Horizontal scrolling is only needed for the mobile main menu */ #cl-main-menu { overflow-x: hidden !important; overflow-y: hidden !important; } #cl-main-menu .cl-menu-inner { overflow-y: hidden !important; } /* Mobile menu remains horizontally swipeable without a vertical bar */ @media (max-width: 900px) { #cl-main-menu .cl-menu-inner { overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; scrollbar-width: none !important; } #cl-main-menu .cl-menu-inner::-webkit-scrollbar { height: 0 !important; width: 0 !important; display: none !important; } } /* Slideshow containers must not become vertical scroll areas */ .cl-slider, .cl-slides { overflow-y: hidden !important; max-height: none !important; } /* Prevent Bootstrap/Koha wrappers from producing an extra full-page-height scrolling box */ #maincontent, .container-fluid, .row { max-height: none !important; } /* V9: Remove Koha breadcrumb / Home trail from all OPAC pages */ #breadcrumbs, .breadcrumb, .breadcrumbs, #breadcrumb, #breadcrumbs-container, #opac-breadcrumb, #opacnav, nav[aria-label="breadcrumb"], nav.breadcrumb, #main-breadcrumb, #breadcrumbs-home { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* ============================================================ V10 - TRUE RESPONSIVE BANNER + MAIN MENU ============================================================ */ *, *::before, *::after { box-sizing: border-box !important; } html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } /* ---- Banner ---- */ #cl-library-banner { display: block !important; position: relative !important; width: 100% !important; max-width: 100% !important; height: clamp(78px, 8.333vw, 120px) !important; min-height: 0 !important; max-height: 120px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 12px 12px 0 0 !important; } #cl-library-banner img { display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; } /* ---- Main menu ---- */ #cl-main-menu { display: block !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #cl-main-menu .cl-menu-inner { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 1400px !important; min-width: 0 !important; height: auto !important; min-height: 48px !important; margin: 0 auto !important; padding: 0 8px !important; overflow: hidden !important; box-sizing: border-box !important; } #cl-main-menu .cl-menu-inner > a { flex: 0 1 auto !important; min-width: 0 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } /* Hide decorative spacer if present; it can force the menu wider than viewport. */ #cl-main-menu .cl-menu-spacer { display: none !important; } /* Tablet: let the menu wrap rather than clip. */ @media (max-width: 1050px) { #cl-main-menu .cl-menu-inner { justify-content: center !important; flex-wrap: wrap !important; row-gap: 0 !important; overflow: hidden !important; } #cl-main-menu .cl-menu-inner > a { flex: 0 0 auto !important; overflow: visible !important; text-overflow: clip !important; } } /* Phone: one compact swipeable menu row. */ @media (max-width: 600px) { #cl-library-banner { height: clamp(72px, 24vw, 96px) !important; border-radius: 9px 9px 0 0 !important; } #cl-library-banner img { object-position: center center !important; } #cl-main-menu { overflow: hidden !important; } #cl-main-menu .cl-menu-inner { width: 100% !important; max-width: none !important; min-height: 46px !important; height: 46px !important; display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 0 !important; padding: 0 4px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x !important; } #cl-main-menu .cl-menu-inner::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } #cl-main-menu .cl-menu-inner > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; padding: 0 12px !important; height: 46px !important; font-size: 12px !important; line-height: 46px !important; } } /* Very small phones */ @media (max-width: 380px) { #cl-library-banner { height: 76px !important; } #cl-main-menu .cl-menu-inner { min-height: 43px !important; height: 43px !important; } #cl-main-menu .cl-menu-inner > a { height: 43px !important; line-height: 43px !important; padding: 0 9px !important; font-size: 11px !important; } } /* ============================================================ FINAL MOBILE RESPONSIVE PATCH Banner keeps the supplied 1190:246 aspect ratio up to 120px. Main navigation changes to an accessible hamburger menu. ============================================================ */ #cl-library-banner{ width:100% !important; height:min(120px, 20.672vw) !important; min-height:70px !important; max-height:120px !important; overflow:hidden !important; border-radius:12px 12px 0 0 !important; } #cl-library-banner img{ width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; object-position:center center !important; } #cl-main-menu{ width:100% !important; min-width:0 !important; height:48px !important; overflow:visible !important; } #cl-main-menu .cl-mobile-toggle{ display:none; } #cl-main-menu .cl-menu-inner{ width:100% !important; max-width:1500px !important; height:48px !important; min-height:48px !important; margin:0 auto !important; padding:0 12px !important; display:flex !important; align-items:stretch !important; justify-content:center !important; flex-wrap:nowrap !important; overflow:visible !important; } #cl-main-menu .cl-menu-inner > a{ flex:0 0 auto !important; min-width:auto !important; max-width:none !important; overflow:visible !important; text-overflow:clip !important; white-space:nowrap !important; } /* ---------- Tablet ---------- */ @media (max-width: 1050px){ #cl-main-menu .cl-menu-inner > a{ padding-left:14px !important; padding-right:14px !important; font-size:13px !important; } } /* ---------- Mobile ---------- */ @media (max-width: 768px){ #cl-library-banner{ height:min(120px, 20.672vw) !important; min-height:70px !important; border-radius:9px 9px 0 0 !important; } #cl-main-menu{ height:auto !important; min-height:46px !important; overflow:visible !important; } #cl-main-menu .cl-mobile-toggle{ display:flex !important; width:100% !important; height:46px !important; align-items:center !important; justify-content:space-between !important; padding:0 16px !important; border:0 !important; background:transparent !important; color:#fff !important; font:600 14px/46px "Poppins","Segoe UI",Arial,sans-serif !important; cursor:pointer !important; text-align:left !important; } #cl-main-menu .cl-mobile-toggle .cl-menu-label{ display:inline-flex; align-items:center; gap:8px; } #cl-main-menu .cl-mobile-toggle .cl-menu-icon{ display:inline-block; font-size:22px; line-height:1; transition:transform .2s ease; } #cl-main-menu.menu-open .cl-mobile-toggle .cl-menu-icon{ transform:rotate(90deg); } #cl-main-menu .cl-menu-inner{ display:none !important; width:100% !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; flex-direction:column !important; align-items:stretch !important; justify-content:center !important; flex-wrap:nowrap !important; overflow:visible !important; background:#06275f !important; } #cl-main-menu.menu-open .cl-menu-inner{ display:flex !important; } #cl-main-menu .cl-menu-inner > a{ display:flex !important; width:100% !important; min-height:44px !important; height:44px !important; padding:0 18px !important; align-items:center !important; justify-content:flex-start !important; border-top:1px solid rgba(255,255,255,.12) !important; font-size:13px !important; line-height:44px !important; white-space:nowrap !important; overflow:visible !important; } #cl-main-menu .cl-menu-inner > a:hover, #cl-main-menu .cl-menu-inner > a:focus{ background:var(--cl-teal) !important; } #cl-main-menu .cl-menu-spacer{ display:none !important; } } /* ---------- Very small phones ---------- */ @media (max-width: 380px){ #cl-library-banner{ height:max(70px, 20.672vw) !important; } #cl-main-menu .cl-mobile-toggle{ height:44px !important; line-height:44px !important; padding:0 13px !important; font-size:13px !important; } #cl-main-menu .cl-menu-inner > a{ min-height:42px !important; height:42px !important; padding:0 15px !important; line-height:42px !important; font-size:12px !important; } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce){ #cl-main-menu .cl-mobile-toggle .cl-menu-icon{ transition:none !important; } } /* ============================================================ V11 - Back-to-top button: blue background + white arrow ============================================================ */ #back-to-top, .back-to-top, .backtotop, #scroll-to-top, .scroll-to-top, #to-top, .to-top, a[href="#top"], a[href="#page-top"]{ position:fixed !important; right:22px !important; bottom:22px !important; width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; max-width:46px !important; max-height:46px !important; padding:0 !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; border:0 !important; border-radius:50% !important; background:#0b4fc4 !important; color:#fff !important; text-decoration:none !important; font-size:0 !important; line-height:1 !important; box-shadow:0 4px 12px rgba(0,0,0,.28) !important; z-index:9999 !important; opacity:.96 !important; transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease !important; } #back-to-top::before, .back-to-top::before, .backtotop::before, #scroll-to-top::before, .scroll-to-top::before, #to-top::before, .to-top::before, a[href="#top"]::before, a[href="#page-top"]::before{ content:"↑" !important; display:block !important; color:#fff !important; font-family:Arial, sans-serif !important; font-size:27px !important; font-weight:700 !important; line-height:1 !important; width:auto !important; height:auto !important; } #back-to-top:hover, .back-to-top:hover, .backtotop:hover, #scroll-to-top:hover, .scroll-to-top:hover, #to-top:hover, .to-top:hover, a[href="#top"]:hover, a[href="#page-top"]:hover{ background:#06275f !important; color:#fff !important; opacity:1 !important; transform:translateY(-2px) !important; box-shadow:0 6px 16px rgba(0,0,0,.32) !important; } #back-to-top:focus, .back-to-top:focus, .backtotop:focus, #scroll-to-top:focus, .scroll-to-top:focus, #to-top:focus, .to-top:focus, a[href="#top"]:focus, a[href="#page-top"]:focus{ outline:3px solid rgba(8,168,173,.45) !important; outline-offset:2px !important; color:#fff !important; } @media (max-width:600px){ #back-to-top, .back-to-top, .backtotop, #scroll-to-top, .scroll-to-top, #to-top, .to-top, a[href="#top"], a[href="#page-top"]{ right:14px !important; bottom:14px !important; width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; max-width:42px !important; max-height:42px !important; } #back-to-top::before, .back-to-top::before, .backtotop::before, #scroll-to-top::before, .scroll-to-top::before, #to-top::before, .to-top::before, a[href="#top"]::before, a[href="#page-top"]::before{ font-size:24px !important; } }