/* Gen. time: 0.015596151351929*/ :root { --main-favicon: url('/content/_site_images/favicon.ico'); --main-logo-img: url('/content/_site_images/site_logo.png'); --main-logo-sizing: auto; --background-1: #FFFFFF; --dark-background-1: #000025; --background-2: #FCFCFC; --dark-background-2: #292929; --background-3: #F4F4F4; --dark-background-3: #1E1E1E; --header-1: #678D98; --dark-header-1: #FFFFFF; --header-2: #343479; --dark-header-2: #7171A1; --small-headers: #000000; --dark-small-headers: #FFFFFF; --paragraph: #000000; --dark-paragraph: #FFFFFF; --links: #678D98; --power-color-1-foreground: #FFFFFF; --power-color-1: #343479; --power-color-2-foreground: #ffffff; --power-color-2: #668a38; --power-color-3-foreground: #000000; --power-color-3: #678d98; --power-color-4-foreground: #000000; --power-color-4: #c2ac80; --power-color-5-foreground: #FFFFFF; --power-color-5: #5b4a42; --power-color-6-foreground: #000000; --power-color-6: #658A38; --power-color-7-foreground: #000000; --power-color-7: #678d98; --secondary-architecture: #010852; --dark-secondary-architecture: #A4A9E1; --image-placeholder-color: orange; --primary-header-font: 600 24px/32px 'Rubik', 'Verdana',sans-serif; --primary-header-font-variant: uppercase; --secondary-header-font: 600 20px/26px 'Roboto Slab', 'Arial',sans-serif; --secondary-header-font-variant: uppercase; --small-header-font: 500 15px/17px 'Roboto Slab', 'Arial',sans-serif; --small-header-font-variant: uppercase; --nav-text-font: 300 12px/14px 'Rubik', 'Arial',sans-serif; --paragraph-font: 300 14px/17px 'Rubik', 'Arial',sans-serif; --secondary-button-fonts: 400 13px/15px 'Rubik', 'Verdana',sans-serif; } /*======site-specific css======*/ \n\ta[href*="//"]:not(.skip-offsite):not([href*="standalone.stage.diedrick.com/"]):not([href*="https://catalog.sclsnj.org"]):not([href*="http://catalog.sclsnj.org"]):after {\n\t\tcontent: "";\n\t\twidth: 11px;\n\t\theight: 11px;\n\t\tmargin: 0 0 0 3px;\n\t\tbackground-image: url('/content/_theme_images/icon_offsite_link.svg');\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: cover;\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tz-index: 10;\n\t}\n\t.dark-mode a[href*="//"]:not(.skip-offsite):not([href*="standalone.stage.diedrick.com/"]):after{\n\t\tbackground-image: url('/content/_theme_images/icon_offsite_link_darkmode.svg');\n\t} /*======end site-specific css======*/ /* font-family: 'Aleo', serif; (400;500;600;700) */ /* font-family: 'DM Sans', serif; (300;400;500;600;700) */ /* accordion container */ * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } h1, .h1-like { margin: 0 0 20px 0; color: var(--font-body-color); font-family: 'Aleo', serif; font-weight: 600; font-size: 43px; line-height: 45px; } h2, .h2-like { margin: 40px 0 20px 0; font-family: 'Aleo', serif; font-weight: 500; font-size: 36px; line-height: 39px; } h3, .h3-like { margin: 40px 0 15px 0; font-family: 'Aleo', serif; font-weight: 500; font-size: 24px; line-height: 24px; } h4, h5, h6 { font-family: 'Aleo', serif; } h4, .h4-like { margin: 40px 0 5px 0; margin-bottom: 17px; font-size: 17px; line-height: 20px; } hr { width: 100%; height: 1px; margin: 15px 0; background-color: var(--hr-color); border: none; } .strike-through{ text-decoration: line-through; } .wysiwygs-across { /*margin-top: 70px;*/ margin: 60px 0; display: flex; flex-wrap: wrap; position: relative; width: 100%; } .wysiwygs-across h2 { margin: 0; margin-bottom: 40px; /*font: 600 28px/32px 'Aleo';*/ } .wysiwygs-across .wysiwyg h3 { margin-top: 0; font: 600 23px/25px 'Aleo'; } .wysiwygs-across .wysiwygs { display: flex; /*justify-content: space-between;*/ width: 100%; flex-wrap: wrap; position: relative; } .wysiwygs-across .wysiwygs .wysiwyg { flex: 0 1 auto; overflow: hidden; position: relative; } .wysiwygs-across.call-to-action { margin: 30px 0 40px 0; } .wysiwygs-across.call-to-action .wysiwygs { padding: 30px 30px; background-color: var(--body-bg-color); border: 1px solid rgba(26,70,76,.27); border-radius: 40px; } .wysiwygs-across.call-to-action .wysiwygs .wysiwyg { flex: 1 1 0px !important; } .wysiwygs-across.call-to-action .wysiwygs .wysiwyg:not(:last-child) { border: unset; padding-right: 5px; /*margin: 0 40px 0 -40px;*/ } .wysiwygs-across.call-to-action h3 { margin-top: 0; font: 500 22px/24px 'DM Sans'; } .wysiwygs-across.call-to-action .wysiwygs .divider { width: 1px; background-color: var(--hr-color); } .wysiwygs-across.call-to-action .wysiwygs .divider:last-child { display: none; } .acc-container { margin: 40px 0 15px 0; } .acc-container h2 { font: 600 28px/32px 'Aleo'; } .acc-container > div { margin: 15px 0; width: calc(100% - 50px); position: relative; } body .acc-container label { display: block; position: relative; box-sizing: border-box; padding: 14px 20px; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 5px; /*color: #000000;*/ font: 600 18px/20px 'DM Sans'; z-index: 10; cursor: pointer; transition: opacity .3s ease-out, background-color .3s; opacity: 1; } .acc-container label:hover{ opacity: 1; } .acc-container input:checked + label, .staff .acc-container input:checked + label:hover{ opacity: 1; } /* hide checkboxes */ .acc-container input{ display: none; } /* icon after */ .acc-container label:after, .acc-container input:checked + label:after{ content: ''; position: absolute; /*right: 7px;*/ top: 4px; /*content: '\f106';*/ font-family: 'FontAwesome'; } body .acc-container label:after { content: ""; position: absolute; right: -50px; top: 0; width: 40px; height: 40px; background-color: var(--button-secondary-bg-color); border-radius: 50px; background-image: var(--button-icon); background-size: 9px; background-repeat: no-repeat; background-position: calc(50% + 1.5px) calc(50% - .5px); transform: rotate(90deg); transition: all .5s; } .acc-container input:checked + label:after{ transform: rotate(-90deg); } /* actual article */ body .acc-container article{ overflow: hidden; height: 0; width: 100%; margin: 0; padding: 0; box-sizing: border-box; background-color: transparent; border: 1px solid transparent; position: relative; z-index: 5; border-radius: 5px; } /* article when input checked, open */ .acc-container input:checked ~ article{ height: auto; margin: -10px 0px 0px 0px; padding: 20px 20px 10px 20px; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); } .acc-container .acc-item { width: 100%; margin: 10px 0; position: relative; } .acc-container .acc-item input { display: none; } .acc-container .acc-item article { overflow: hidden; height: 0; width: 100%; } /* alert-block css */ ul li.alert { color: var(--power-color-2); } ul li.accessibility { color: var(--power-color-3); } ul li.hours { color: var(--power-color-5); } .alert-block { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; } .alert-block.hidden { display: none; } .alert-block .alert-block-bkgd { width: 100%; height: 100%; background-color: var(--background-1); opacity: 0.7; } .alert-block .alert-block-content { max-width: 720px; min-width: 720px; padding: 30px; box-sizing: border-box; background-color: var(--background-1); border: 4px solid #063542; box-shadow: 0 0 5px #00000030; position: fixed; top: 10%; left: calc(50% - (720px / 2)); z-index: 1000; } .alert-block .alert-block-content p { margin-bottom: 10px; font: var(--small-header-font); font-weight: 400; } .alert-block .alert-block-content ol { margin-bottom: 10px; padding: 0 0 0 35px; } .alert-block .alert-block-content .close { color: #000000; font-size: 25px; position: absolute; top: 15px; right: 15px; } @media only screen and (max-width: 800px) { .alert-block .alert-block-content { width: calc(100% - 60px); min-width: unset; max-height: calc(100% - 25px); top: 15px; left: 30px; overflow: scroll; } .alert-block .alert-block-content .close { position: fixed; top: 21px; right: 43px; } } @media only screen and (max-width: 450px) { .alert-block .alert-block-content { width: calc(100% - 20px); height: calc(100% - 25px); max-height: none; padding: 35px 20px 15px 15px; top: 15px; left: 10px; overflow: scroll; } .alert-block .alert-block-content .close { top: 15px; right: 17px; } .alert-block .alert-block-content p { font: var(--paragraph-font); } .alert-block .alert-block-content ol li { font: var(--secondary-button-fonts); } } /* end alert-block css */ /* start byte_content types css */ .byte_content_embargo { background-color: #FF8800 !important; box-shadow: 0 0 3px #ccc !important; } .byte_content_postpone { display: none !important; } /* .byte_content_review {} */ img.byte_img_embargo { box-shadow: 5px 5px 1px 2px #FF8800, 5px 5px 3px 2px #ccc !important; } /* img.byte_img_postpone {} */ img.byte_img_review { display: none !important; } /* end byte_content types css */ /*====================================================================================================== BASE STYLES - desktop ======================================================================================================*/ body { margin: 0; padding: 0; /*font: var(--paragraph-font);*/ font-family: 'DM Sans', serif; color: var(--font-body-color); background-color: var(--body-bg-color); overflow-x: hidden; --brand-border-color: rgba(26,70,79,0.4); --brand-alternate-color: #F25A29; --brand-alternate-color-2: #FBB042; --brand-alternate-color-3: #96D4E9; --font-body-color: #000; --font-secondary-color: #626262; --font-link-color: #1A464F; --button-color: #133339; --button-bg-color: #fff; /*--button-secondary-bg-color: rgba(155,185,183,0.27);*/ --button-secondary-bg-color: #E4EBEB; --button-secondary-hover-bg-color: #D2D9D9; /*background: linear-gradient(#F4F4F4, #FFFFFF);*/ --button-icon: url('/content/_theme_images/icon_right_arrow.svg'); --body-bg-color: #fff; --body-offset-bg-color: #fcfcfc; --tag-border-color: #9BB9B7; --font-offset-color: #787878; --header-list-bg-color: #C2DDE7; --body-media-bg-color: #DEE5E5; --body-default-bg: url('/content/_site_images/icon_placeholder-mark.svg') var(--body-media-bg-color) no-repeat center; --slider-arrow: url('/content/_site_images/icon_caret-up.svg') no-repeat center; --blank-book-bg-color: #D8D8D8; --filter-underline-color: #B5B5B5; --hr-color: #CDCDCD; --overflow-gradient: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); --favorited-star-icon: url('/content/_site_images/icon_star.svg') no-repeat center; --personalize-star-icon: url('/content/_site_images/icon_stars.svg') no-repeat center; --personalize-star-color-icon: url('/content/_site_images/icon_color_stars.svg') no-repeat center; --personalize-star-fill: #009ADE; --personalize-checked-star-fill: #FBB042; --personalize-button-gradient: linear-gradient(rgba(244,244,244,1), rgba(255,255,255,1)); --personalize-button-icon: url('/content/_theme_images/icon_expand.svg'); --personalize-explanation-gradient: linear-gradient(to top, rgba(255,255,255,0.75) 0, rgba(255,255,255,0) 100%); --alert-icon: url('/content/_site_images/icon_alert.svg'); --blob-bg-color: #f4f4f4; } button { font: 600 12px/14px 'DM Sans'; } input{ font-family: inherit; } p { margin: 0; margin-bottom: 11px; font-size: 17px; font-weight: 300; line-height: 21px; } p.intro { margin: 0 0 40px 0; font-size: 19px; font-weight: 500; line-height: 24px; } a { transition: color .3s; } a.skip-offsite:after { display: none; } form button.loader { border: none; } button, a.button-like { margin-right: 36px; /*padding: 10px 17px;*/ padding: 11px 17px 10px 17px; background-color: var(--button-bg-color); border: none; border-radius: 18px; color: var(--button-color); font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; display: inline-block; position: relative; transition: background-color .3s, border-radius .5s; cursor: pointer; } button.primary, a.button-like.primary { text-decoration: none; } button.secondary, a.button-like.secondary { margin-right: 0; /*background-color: rgba(155,185,183,0.27);*/ background-color: var(--button-secondary-bg-color); text-decoration: none; } /* button.primary.alt, a.button-like.primary.alt { border: 1px solid var(--brand-border-color); } button.primary.alt:before, a.button-like.primary.alt:before { border: 1px solid var(--brand-border-color); top: -1px; right: -37px; transition: border-left-color .2s; } button.primary.alt:hover:before, a.button-like.primary.alt:hover:before { border-left-color: transparent; transition: border-left-color .3s; } */ button.primary.alt, a.button-like.primary.alt { background-color: var(--blob-bg-color); } button.primary.alt:before, a.button-like.primary.alt:before { background-color: var(--blob-bg-color); } .personalize-option, .apply-favorites { display: flex; position: relative; } .personalize-option a.personalize-button, .apply-favorites a.apply { width: 20px; height: 22px; background: var(--personalize-star-icon); background-size: cover; display: inline-block; cursor: pointer; position: relative; /*background-color: rgba(255,0,0,0.5);*/ } .apply-favorites a.apply { width: 20px; height: 23px; background-image: url('/content/_site_images/icon_checked_checkboxes.svg'); background-size: auto; background-repeat: no-repeat; background-position: center; } /*.apply-favorites a.apply:before {*/ .personalize-option a.personalize-button:before, .apply-favorites a.apply:before { content: ""; width: 100%; height: 100%; background: var(--personalize-star-color-icon); background-size: cover; opacity: 0; display: inline-block; position: absolute; top: 0; left: 0; pointer-events: none; transition: opacity .2s; } .apply-favorites a.apply:before { background: url('/content/_site_images/icon_color_checked_checkboxes.svg'); } .personalize-option:hover a.personalize-button:before, .personalize-option.show-tooltip a.personalize-button:before, .apply-favorites:hover a.apply:before, .apply-favorites.show-tooltip a.apply:before { opacity: 1; transition: opacity .3s; } .personalize-option .tooltip, .apply-favorites .tooltip { opacity: 0; position: absolute; pointer-events: none; font: 400 15px/18px 'DM Sans'; width: 230px; background-color: var(--body-bg-color); border: .4px solid rgba(26,70,79,.37); box-shadow: 0 0 10px 0 rgba(0,0,0,.18); padding: 15px; border-radius: 10px; top: -17px; /*left: 25px;*/ left: 40px; transition: opacity .5s; z-index: 100; } .personalize-option:hover .tooltip, .apply-favorites:hover .tooltip { opacity: 1; pointer-events: all; } .personalize-option .tooltip:before, .apply-favorites .tooltip:before { content: ''; position: absolute; width: 11px; height: 11px; background-color: var(--body-bg-color); border-left: .4px solid rgba(26,70,79,.37); border-top: .4px solid rgba(26,70,79,.37); transform: rotate(-45deg); top: 18px; left: -6px; } .personalize-option .tooltip:after, .apply-favorites .tooltip:after { content: ''; position: absolute; /*width: 30px;*/ height: 100px; width: 20px; height: 100%; top: 0; /*left: -25px;*/ left: -10px; } .personalize-option .tooltip a.button-like, .apply-favorites .tooltip a.button-like { margin: 10px 0 0 0; display: none; } /*a[href*="//"]:not(.skip-offsite):not([href*="http://scls.digitalbranch.org/"]):after {*/ button:before, a.button-like:before { content: ""; display: block; position: absolute; right: -35px; top: 0px; height: 11px; width: 11px; padding: 12px 12px 12px 12px; background-color: var(--button-bg-color); border-radius: 18px; background-image: var(--button-icon); background-size: 8px; background-position: calc(50% + 1.5px) calc(50% - .5px); transition: all .5s; background-repeat: no-repeat; display: inline-block; } @keyframes button-hover { 0% {right: -35px; border-radius: 20px 20px 20px 20px; padding: 12px 12px 12px 12px;} 65% {right: -12px; border-radius: 0px 20px 20px 0px; padding: 12px 13px 12px 6px;} 100% {right: -18px; border-radius: 0px 20px 20px 0px; padding: 12px 12px 12px 12px;} } /*a[href*="//"]:not(.skip-offsite):not([href*="http://scls.digitalbranch.org/"]):hover:after {*/ button:hover:before, a.button-like.primary:hover:before { animation-name: button-hover; animation-duration: .5s; animation-timing-function: ease-in; border-radius: 0px 20px 20px 0px; padding: 12px 12px 12px 12px; right: -18px; } /* secondary button */ button.secondary:before, a.button-like.secondary:before { display: none; } button.secondary:hover, a.button-like.secondary:hover { background-color: var(--button-secondary-hover-bg-color); } /* drop down button */ button.down-arrow, a.button-like.down-arrow { background-color: var(--button-secondary-bg-color); transition: all .5s; cursor: pointer; } @keyframes button-arrow-hover { 0% {right: -35px; padding: 12px 12px 12px 12px;} 65% {right: -10px; padding: 12px 13px 12px 6px;} 100% {right: -18px; padding: 12px 12px 12px 12px;} } button.down-arrow:hover, a.button-like.down-arrow:hover { background-color: var(--button-secondary-hover-bg-color); } button.down-arrow:before, a.button-like.down-arrow:before { background-color: var(--button-secondary-bg-color); transform: rotate(90deg); } .button-dropdown-container { width: 100%; display: flex; align-items: flex-start; gap: 25px; margin-top: 50px; } .button-dropdown-container .button-like, .button-dropdown-container .button-like:before { background-color: var(--button-secondary-bg-color); } .button-dropdown { padding: 11px 17px 10px 17px; margin-right: 36px; background-color: var(--button-secondary-bg-color); border-radius: 18px; color: var(--button-color); font: 700 12px/14px 'DM Sans'; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; display: inline-block; position: relative; transition: border-radius, .5s; cursor: pointer; } .button-dropdown .toggle-area { display: inline-block; position: absolute; width: calc(100% + 35px); height: 100%; top: 0; left: 0; } .button-dropdown:before { content: ''; display: inline-block; position: absolute; right: -35px; top: 0px; height: 11px; width: 11px; padding: 12px 12px 12px 12px; background-color: var(--button-secondary-bg-color); border-radius: 18px; background-image: var(--button-icon); background-size: 8px; background-position: calc(50% + 1.5px) calc(50% - .5px); transition: all .5s; background-repeat: no-repeat; display: inline-block; } .button-dropdown:hover:before { transform: rotate(30deg); } .button-dropdown.toggled:before { transform: rotate(90deg); } .button-dropdown .dropdown-list { display: none; position: absolute; width: calc(100% + 35px); top: 100%; left: 0; background-color: var(--button-secondary-bg-color); border-radius: 18px; margin: 0; padding: 12px 17px; cursor: auto; z-index: 1; } .button-dropdown.toggled .dropdown-list { display: block; } .button-dropdown .dropdown-list li { text-align: left; margin: 0; padding: 0 0 5px 0; } .button-dropdown .dropdown-list li:before { display: none; } .button-dropdown .dropdown-list li a { font: 400 12px/16px 'DM Sans'; color: var(--font-body-color); opacity: .75; text-transform: capitalize; } .button-dropdown .dropdown-list li a:hover { text-decoration: underline; } .button-dropdown .dropdown-list li .share-link { display: flex; gap: 5px; padding-top: 5px; } .button-dropdown .dropdown-list li .share-link input.share-url { position: absolute; opacity: 0; left: -9999px; pointer-events: none; } .button-dropdown .dropdown-list li .share-link .share-url-check { width: 14px; height: 14px; opacity: 0; transition: opacity .25s; } .button-dropdown .dropdown-list li .share-link.active .share-url-check { opacity: 1; } a.down-arrow:hover:before { background-color: var(--button-secondary-hover-bg-color); /*animation-name: button-arrow-hover;*/ /*animation-duration: .5s;*/ /*animation-timing-function: ease-in;*/ /*right: -18px;*/ /*padding: 12px;*/ transform: rotate(90deg); } a.down-arrow:hover:after { /*animation-name: button-hover;*/ /*animation-duration: .5s;*/ /*animation-timing-function: ease-in;*/ /*border-radius: 0px 20px 20px 0px;*/ /*padding: 12px 12px 12px 12px;*/ /*right: -18px;*/ /*background-color: #D0DCDB;*/ } a.down-arrow.active:before { transform: rotate(-90deg); } /* return to top button styles */ .return-to-top-segment { width: 100%; max-width: 205px; display: block; position: fixed; bottom: 40px; z-index: 1; } .return-to-top-segment.clip-to-bottom { position: absolute; /*bottom: -364px;*/ bottom: -80px; } .main-content.staff .page-content .return-to-top-segment.clip-to-bottom { bottom: -790px; } .return-to-top-segment a.button-like.return-to-top-button { width: 100%; max-width: 204px; margin: 0; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 34px; opacity: 0; pointer-events: none; transition: opacity .2s; } .return-to-top-segment.reveal a.button-like.return-to-top-button { opacity: 1; pointer-events: all; transition: opacity .3s; } .return-to-top-segment a.button-like.return-to-top-button:before { display: none; } .page-content h1 { position: relative; overflow-wrap: break-word; } /* general list styles */ ul, ol { margin: 19px 0; font-size: 17px; font-weight: 300; line-height: 21px; } ul li, ol li { margin: 0; margin-bottom: 15px; } ul li:last-of-type, ol li:last-of-type { margin-bottom: 0; } /* unordered list styles */ ul { padding: 0; list-style-type: none; } ul li { padding-left: 19px; position: relative; } ul li:before { content: ""; width: 10px; height: 10px; /*background-color: #F25A29;*/ background-color: var(--font-link-color); border-radius: 50%; position: absolute; top: 5px; left: 0; } ul li ul li:before { opacity: .7; } ul li ul li ul li:before { opacity: .5; } ol { padding: 0 0 0 19px; } ol li::marker { width: 19px; color: var(--font-link-color); font-family: 'Aleo', serif; font-size: 18px; font-weight: 700; line-height: 23px; display: inline-block; } ol li ol { margin: 10px 0 0 0; list-style: lower-alpha; } ol li ol li:last-of-type { margin: 0; } ol li ol li ol { margin: 10px 0 0 0; list-style: lower-roman; } .img_right_25 { float: right; width: 25%; margin: 10px 0 10px 10px; clear: right; } .img_right_50 { float: right; width: 50%; margin: 10px 0 10px 10px; clear: right; } .img_right_native { float: right; max-width: 100%; width: auto; margin: 10px 0 10px 10px; clear: right; } .img_left_25 { float: left; width: 25%; margin: 10px 10px 10px 0; clear: left; } .img_left_50 { float: left; width: 50%; margin: 10px 10px 10px 0; clear: left; } .img_left_native { float: left; max-width: 100%; width: auto; margin: 10px 10px 10px 0; clear: left; } .img_full_styled { width: 100%; float: none; margin: 10px auto 10px; } .img_native_block { max-width: 100%; } img { max-width: 100%; height: auto; } figcaption { text-align: center; margin: 15px 0 20px 0; font-size: 16px; font-weight: 300; } .desktop-small, .tablet, .mobile { display: none; } .desktop { display: block; } #is_desktop_small, #is_tablet, #is_mobile { position: absolute; } .hidden { display: none; } .darkmode { display: none; } .default { background: var(--body-default-bg); } /* background svg elements */ .blob, svg.circle { position: absolute; overflow: visible; } .blob path { fill: var(--body-media-bg-color); } body .blob.b1 { top: -200px; left: -115px; width: 610px; max-width: 100%; } body .home .blob.b1 { top: -280px; left: -140px; } svg.circle { position: absolute; } #new_at_the_library_segment svg.circle.blue { top: -80px; left: 30%; } #new_at_the_library_segment svg.circle.yellow { bottom: -50px; right: 25%; } #events_segment .blob.b1 { top: -250px; left: -240px; z-index: -1; } #events_segment .event-content .blob.b4 { width: 870px; bottom: -150px; left: -140px; } #booklists_segment svg.circle.green { right: 33%; top: -50px; } .large-background-crop { position: absolute; width: 100vw; max-width: 1920px; height: 2100px; bottom: -214px; left: 50%; transform: translateX(-50%); overflow: hidden; z-index: -10; } #for_you_segment .large-background-crop { height: 2731px; bottom: unset; top: -350px; } #booklists_segment .large-background-crop { height: 1943px; top: 250px; } .large-background-blob { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .large-background-blob path { fill: var(--blob-bg-color); /*fill: var(--body-media-bg-color);*/ /*opacity: .4;*/ } header:after { content: ''; max-width: 1920px; width: 100vw; height: 100%; position: absolute; transform: translateX(-50%); left: 50%; top: 0; z-index: -10; } /* home page favorited branches and audiences states */ .favorited:after, .preferred-favorite:after { content: ''; position: absolute; width: 14px; height: 14px; background: var(--favorited-star-icon); background-size: cover; display: block; top: 2px; left: -16px; /*background-color: orange;*/ /*clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);*/ } /* skeleton placeholders */ .skeleton-placeholder .branches-list > * *, .skeleton-placeholder .audience-filter li a, .skeleton-placeholder .branch-information-section .information .info-content .info .info-heading, .skeleton-placeholder .branch-information-section .information .info-content .info p, .skeleton-placeholder .featured-event .event-media, .skeleton-placeholder .details .h3-like, .skeleton-placeholder .details p, .skeleton-placeholder .details a, .skeleton-placeholder .upcoming-events .basic-events .event .h3-like, .skeleton-placeholder .upcoming-events .basic-events .event p, .skeleton-placeholder .upcoming-events .basic-events .event a, #new_at_the_library_segment .segment-heading-row .audience-filter.skeleton-placeholder, #new_at_the_library_segment .segment-content-row .swiper .skeleton-placeholder, .skeleton-placeholder footer .footer-hours .list-heading, .skeleton-placeholder footer .footer-hours .branch-information { background-color: lightgray !important; color: lightgray !important; } .skeleton-placeholder .audience-filter li:before { display: none; } .skeleton-placeholder .details a:before { display: none; } /*====================================================================================================== HEADER STYLES - desktop ======================================================================================================*/ header { width: 100%; /*max-width: 1280px;*/ max-width: 1235px; margin: 0 auto; padding: 0; position: relative; z-index: 30; /* JS - z index of header was overlapping overlays, and this seemed to fix it */ transition: padding .3s ease-out; } header.show-hours, header.show-hours.hide-accessibility, header.show-hours.hide-alerts { padding: 111px 0 0 0; } /* header.show-hours { padding: 0; } */ header.close-notices { padding: 0; } header .header-notices { width: 100%; max-width: 1440px; /*display: none;*/ position: relative; z-index: 5; } @media only screen and (max-width: 1440px) { header .header-notices { left: 0; } } @media only screen and (min-width: 1280px) { body .blob.b1 { left: calc((100vw - 1280px) / 2 - 105px); } } header.open-notices .header-notices { display: block; } header .header-notices .close-icon { top: 20px; right: 50px; display: block; position: absolute; opacity: 0; top: 25px; right: 50px; z-index: 15; pointer-events: none; transition: opacity 0s; } header.open-notices .header-notices .close-icon { opacity: 1; pointer-events: all; transition: opacity .3s .1s; } header .header-notices .close-icon svg g { fill: var(--font-body-color); } header .header-notices .notice-heading { width: 100%; margin: 7px 0 15px 0; letter-spacing: .3px; text-transform: uppercase; font: var(--secondary-header-font); } header .header-notices .notice-section { width: 100%; max-width: 1280px; margin-top: -1px; padding: 22px 50px; background-color: var(--body-bg-color); border: 0.5px solid var(--brand-border-color); border-top-color: transparent; border-radius: 0 0 20px 20px; opacity: 0; pointer-events: none; /*display: none;*/ position: absolute; /*transition: opacity 0s .3s, left 0s .3s;*/ } header .header-notices .notice-section .h3-like { margin-top: 0; } header.show-accessibility .header-notices .notice-accessibility, header.show-hours .header-notices .notice-hour, header.show-alerts .header-notices .notice-alert, header.show-branches .header-notices .notice-branches { opacity: 1; display: block; pointer-events: all; position: relative; left: 0; transition: opacity 0s, left 0s; } header.hide-accessibility .header-notices .notice-accessibility, header.hide-hours .header-notices .notice-hour, header.hide-alerts .header-notices .notice-alert, header.hide-branches .header-notices .notice-branches { opacity: 0; left: -9999px; transition: opacity 0s, left 0s; } header .header-notices .notice-section.notice-hour { padding: 35px 38px; } header .header-notices .notice-accessibility .access-options { width: 100%; display: flex; column-gap: 15px; align-items: flex-start; } header .header-notices .notice-accessibility .access-options .access-section { /*margin: 0 10px 0 0;*/ display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 5px; } header .header-notices .notice-accessibility .access-options .access-section:last-of-type { margin: 0; } header .header-notices .notice-accessibility .access-options .access-section .option-heading { width: 100%; margin: 0; letter-spacing: 0.1px; opacity: 1; text-align: left; font: var(--small-header-font); } header .header-notices .notice-hour .hours-content .list-heading a { color: var(--small-headers); } header .header-notices .notice-accessibility .access-options .access-section .option { /*margin: 0 10px 0 0;*/ text-decoration: none; display: flex; } header .header-notices .notice-accessibility .access-options .access-section .option.mobile { display: none; } header .header-notices .notice-accessibility .access-options .access-section .option:last-of-type { margin: 0; } header .header-notices .notice-accessibility .access-options .access-section .option .icon { width: 17px; height: 17px; margin: 0 5px 0 0; background-color: transparent; color: var(--power-color-3); display: flex; align-items: center; justify-content: center; transition: background-color .3s; border-radius: 50%; border: 1px solid var(--power-color-3); opacity: 1; font: var(--small-header-font); font-size: 14px; } header .header-notices .notice-accessibility .access-options .access-section .option.active .icon { /*background-color: var(--secondary-architecture);*/ background-color: var(--brand-alternate-color); /*color: #fff;*/ } header .header-notices .notice-accessibility .access-options .access-section .option p { margin: 0; opacity: 1; font-size: 12px; font-style: normal; letter-spacing: 0px; -webkit-font-smoothing: antialiased; } header .header-notices .notice-accessibility .access-options .access-section button.option { padding: 7px 15px; } header .header-notices .notice-hour .hour-lists { margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } header .header-notices .notice-hour .hour-list { margin: 0 20px 0 0; padding: 0 15px; box-sizing: border-box; border-left: 2px solid var(--power-color-5); font-size: 14px; position: relative; } header .header-notices .notice-hour .hour-list .list-heading { color: var(--power-color-5); margin-bottom: 5px; } header .header-notices .hours-content .hour-lists .hour-list ul .icon { position: absolute; top: 0; left: 0; } header .header-notices .hours-content .hour-lists .hour-list ul.list .icon.phone { left: -4px; } header .header-notices .hours-content .hour-lists .hour-list ul.list li.icon svg g { stroke: var(--paragraph); } header .header-notices .hours-content .hour-lists .hour-list ul.list li.hour { padding-left: 15px; box-sizing: border-box; position: relative; font-weight: 300; line-height: 20px; } header .header-notices .hours-content .hour-lists .hour-list ul.list li.hour a { color: var(--paragraph); } header .header-notices .hours-content .hour-lists .hour-list ul.list { list-style: none; margin: 0 0 5px 0; padding: 0; width: 100%; font-size: 14px; line-height: 16px; display: flex; flex-direction: column; position: relative; } header .header-notices .notice-hour ul.hour-list li:last-of-type { margin: 0; } header .header-notices .notice-hour ul.hour-list li.days-closed { max-width: 400px; padding: 5px; box-sizing: border-box; border: 2px solid var(--secondary-architecture); font-size: 12px; } header .header-notices .notice-hour ul.hour-list li ul { margin: 0; padding: 0; list-style: none; } header .header-notices .notice-hour ul.hour-list li .day, header .header-notices .notice-hour ul.hour-list li .time, header .header-notices .notice-hour ul.hour-list li .disclaimer { display: block; } header .header-notices .notice-hour ul.hour-list li .day { font-weight: 600; } header .header-notices .notice-hour ul.hour-list li .disclaimer { color: red; font-size: 12px; line-height: 14px; } header .header-notices .notice-hour ul.hour-list li .message { margin: 0 0 0 3px; color: red; font-size: 12px; font-weight: 400; line-height: 14px; display: inline-block; } header .header-notices .notice-alert .alert-svg { position: relative; top: 6px; } header .header-notices .notice-alert .alert-message { color: var(--paragraph); font-weight: 400; } header .header-wrapper { width: 100%; /*background-color: var(--background-1);*/ display: flex; position: relative; z-index: 10; } header .header-wrapper:before { content: ""; width: 100%; height: 1px; background-color: var(--power-color-1); display: block; position: absolute; top: -2px; left: 0; transform: scaleX(0); transform-origin: 50% 50%; transition: transform .3s ease-out; } header.open-notices .header-wrapper:before { transform: scaleX(1); transition: transform .3s .2s ease-out; } header .skip-navigation { opacity: 0; position: absolute; top: 10px; left: 10px; z-index: 35; pointer-events: none; transition: opacity .2s; } header .skip-navigation:focus { opacity: 1; pointer-events: all; } /*LOGO VARs SETUP --current-logo-image is the target that we actually use directly in styles --main-logo-img --main-logo-darkmode-img --main-logo-tablet-img --main-logo-tablet-darkmode-img --main-logo-mobile-img --main-logo-mobile-darkmode-img */ :root{ /*lightmode */ --desktop-light-logo: var( --main-logo-img, "/_theme_images/default_logo.jpg"); --tablet-light-logo: var( --main-logo-tablet-img, var(--desktop-light-logo) ); --mobile-light-logo: var( --main-logo-mobile-img, var(--tablet-light-logo) ); /*darkmode*/ --desktop-dark-logo: var(--main-logo-darkmode-img); --tablet-dark-logo: var( --main-logo-tablet-darkmode-img, var(--desktop-dark-logo) ); --mobile-dark-logo: var( --main-logo-mobile-darkmode-img, var(--tablet-dark-logo) ); /*default to lightmode (eeeeeeewwwwwww) */ --desktop-logo: var( --desktop-light-logo); --tablet-logo: var( --tablet-light-logo, var(--desktop-logo) ); --mobile-logo: var( --mobile-light-logo, var(--tablet-logo) ); --current-logo-image: var(--desktop-logo); --current-logo-width: 252px; --current-logo-height: 160px; --image-placeholder-icon-color: white; --san-serif-font: "DM Sans"; --serif-font: "Aleo"; } body.dark-mode { /*switch to darkmode!*/ --desktop-logo: var( --desktop-dark-logo, var(--desktop-light-logo)); --tablet-logo: var( --tablet-dark-logo, var(--tablet-light-logo, var(--desktop-logo) ) ); --mobile-logo: var( --mobile-dark-logo, var(--mobile-light-logo, var(--tablet-logo) ) ); /*think we need to override since it probably will point to lightmode desktop otherwise*/ --current-logo-image: var(--desktop-logo); --image-placeholder-icon-color: #aaaaaa; .branch-favorites-button .button-like.secondary.down-arrow:before, .slider-container .swiper-button-next:before, .slider-container .swiper-button-prev:before, a[href*="//"]:not(.skip-offsite):not([href*="http://scls.digitalbranch.org/"]):not([href*="https://catalog.sclsnj.org"]):not([href*="http://catalog.sclsnj.org"]):after, input[type="date" i]::-webkit-calendar-picker-indicator { filter: invert(1); } .favorited:after, .book-list .book-list-subheader:before { filter: invert(1) hue-rotate(180deg); } } @media only screen and (max-width: 1023px) { :root{ --current-logo-image: var(--tablet-logo ); --current-logo-width: 252px; --current-logo-height: 160px; } body.dark-mode{ /*TODO: test if we need this*/ --current-logo-image: var(--tablet-logo ); } } @media only screen and (max-width: 767px) { :root{ --current-logo-image: var(--mobile-logo ); --current-logo-width: 252px; --current-logo-height: 160px; } body.dark-mode{ /*TODO: test if we need this*/ --current-logo-image: var(--mobile-logo ); } } /*the thing to use as the initial load/bg of various image locations, that also serves as a fallback/placeholder for cases where there are no images*/ .placeholder-image { /*--image-placeholder-color from theme customization*/ background-color: --image-placeholder-color; } header .site-logo { margin: 32px 0 0 32px; } header .site-logo img { content: var(--main-logo-img); } header .site-logo .logo{ background-repeat: no-repeat; background-image: var(--current-logo-image); /*width: 130px;*/ /*height: 150px;*/ } header .site-navigations { width: 100%; display: flex; flex-direction: column; align-items: flex-end; position: relative; margin-right: 25px; } header .ham-menu { width: 45px; /* margin: 0 10px 0 0; */ flex-direction: column; position: relative; z-index: 100; } header .ham-menu .line { width: 100%; height: 3px; margin-bottom: 8px; border-radius: 15px; background-color: var(--power-color-2); opacity: 1; display: inline-block; transition: background-color .3s ease-out, opacity .2s ease-out, transform .3s ease-out; } header .ham-menu .line:nth-child(2) { background-color: var(--power-color-3); } header .ham-menu .line:nth-child(3) { background-color: var(--power-color-5); } header.open-menu .ham-menu .line, header.open-notices .ham-menu .line { margin-bottom: 0; position: absolute; top: 11px; } header.open-menu .ham-menu .line:first-of-type, header.open-notices .ham-menu .line:first-of-type { transform: rotate(45deg); top: 11px; } header.open-menu .ham-menu .line:nth-of-type(2), header.open-notices .ham-menu .line:nth-of-type(2) { transform: rotate(-45deg); top: 11px; } header.open-menu .ham-menu .line:last-of-type, header.open-notices .ham-menu .line:last-of-type { opacity: 0; } .main-nav { width: calc(100% - 100px); /*padding: 28px 62px 0 0;*/ padding: 18px 0 0 0; position: relative; right: 62px; z-index: 105; } .main-nav ul.nav-list { width: 100%; margin: 0; padding: 0; display: flex; column-gap: 20px; justify-content: flex-end; position: relative; z-index: 20; } header ul.nav-list li { margin: 0; padding: 0; display: flex; align-items: center; position: initial; } header ul.nav-list li:before { display: none; } .main-nav ul.nav-list li:last-of-type { margin: 0; } .main-nav ul.nav-list li a { /*padding: 10px 15px;*/ padding: 10px 5px; /*background-color: #C2DDE7;*/ /*border-radius: 18px;*/ color: var(--font-body-color); text-decoration: none; font-size: 17px; font-family: 'Aleo', serif; font-weight: 500; line-height: 16px; display: block; position: relative; } .main-nav ul.nav-list li a.second-toggle {/* this is the down arrow that's used to open the dropdown on table/mobile menu */ display: none; } .main-nav ul.nav-list li .link-name { display: block; position: relative; z-index: 5; } /* .main-nav ul.nav-list li:last-of-type .link-name { font-style: italic; } */ .main-nav ul.nav-list li .link-backdrop {/* this curved block element poses as the background for the nav item's link; this should only show when the it's respective dropdown is showing */ width: calc(100% + 20px); height: 100%; background-color: var(--header-list-bg-color); border-radius: 18px; opacity: 0; display: block; position: absolute; top: 0; left: -10px; z-index: 1; transform: scaleX(0); transform-origin: 50% 50%; pointer-events: none; transition: opacity .2s, transform .2s; } .main-nav ul.nav-list li:hover .link-backdrop, .main-nav ul.nav-list li:focus-within .link-backdrop, .main-nav ul.nav-list li.active .link-backdrop { opacity: 1; transform: scaleX(1); transition: opacity .3s .1s, transform .3s; } header ul.nav-list li a.list-toggle { width: 9px; height: 18px; padding: 0 17px; background: var(--button-icon) no-repeat center; background-size: 30%; display: none; transform: rotate(90deg); } header ul.nav-list li .list-dropdown-wrapper { /*WIP: this is what allows us to have proper hover behavior*/ padding-top: 25px; } header ul.nav-list li .list-dropdown { width: 100%; padding: 16px 18px; background-color: var(--header-list-bg-color); border-radius: 20px; opacity: 0; position: absolute; top: calc(100% + 25px); /*top: calc(100% + 0px);*/ left: 0; z-index: 99; transition: opacity 0s, box-shadow 0s; pointer-events: none; } .main-nav ul.nav-list li:last-of-type .list-dropdown{ right:0px; } header ul.nav-list li:hover .list-dropdown, header ul.nav-list li:focus-within .list-dropdown { box-shadow: 0 1px 4px #00000025; opacity: 1; pointer-events: all; transition: opacity .2s .1s, box-shadow .3s .6s; } header ul.nav-list li .list-dropdown ul:before, header ul.nav-list li .list-dropdown ul:after { content: ""; width: 100%; display: inline-block; position: absolute; left: 0; z-index: 5; } header ul.nav-list li .list-dropdown ul:before { height: 26px; top: -26px; } header ul.nav-list li .list-dropdown ul:after { height: 8px; background-color: var(--background-1); top: 0; left: 0px; transition: height .3s .2s; } header ul.nav-list li:hover .list-dropdown ul:after, header ul.nav-list li:focus-within .list-dropdown ul:after { height: 100%; } .main-nav ul.nav-list li .list-dropdown ul:after { background-color: var(--power-color-1); } .main-nav ul.nav-list li.dropdown-included .list-dropdown ul li a:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--background-1); z-index: -1; } .main-nav ul.nav-list li.dropdown-included .list-dropdown ul li a:hover:after { opacity: .75; } header ul.nav-list li .list-dropdown ul { margin: 0; padding: 0; list-style-type: none; position: relative; } header ul.nav-list li .list-dropdown ul li { margin: 0; opacity: 0; display: block; position: relative; z-index: 10; transition: opacity 0s; } header ul.nav-list li:hover .list-dropdown ul li, header ul.nav-list li:focus-within .list-dropdown ul li { opacity: 1; /*transition: opacity .3s .25s;*/ } header ul.nav-list li .list-dropdown ul li:before, header ul.nav-list li .list-dropdown ul li:after { display: none; } header ul.nav-list li .list-dropdown ul li a { width: 100%; padding: 8px 19px; box-sizing: border-box; color: var(--paragraph); font: var(--nav-text-font); font-size: 13px; text-transform: none; display: inline-block; white-space: nowrap; transition: background-color .3s; } .utility-nav ul.nav-list li .list-dropdown { top: calc(100% + 22px); /*margin-right: 115px;*/ } .utility-nav ul.nav-list li:last-of-type .list-dropdown { margin-right: 30px; } .utility-nav ul.nav-list li .list-dropdown ul:after { border: .5px solid var(--power-color-3); top: -1px; } .utility-nav ul.nav-list li .list-dropdown ul li a:hover, .utility-nav ul.nav-list li .list-dropdown ul li a:focus, .utility-nav ul.nav-list li .list-dropdown ul li.active a { background-color: var(--background-3); color: var(--paragraph); } .utility-nav { width: 100%; /*padding: 0 15px 0 0;*/ display: flex; column-gap: 25px; align-items: center; justify-content: flex-end; position: relative; z-index: 1003; } .utility-nav.mobile-version { display: none; } .utility-nav .mobile-menu { width: 28px; } .utility-nav .mobile-menu .menu { width: 100%; display: block; position: relative; } .utility-nav .mobile-menu .menu .line { width: 100%; height: 1px; margin: 0 0 8px 0; background-color: var(--font-link-color); border-radius: 15px; display: block; } .utility-nav .mobile-menu .menu .line:last-of-type { margin: 0; } .utility-nav ul.nav-notice { /*margin: -5px 93px 0 0;*/ margin: 0; padding: 0; list-style-type: none; display: flex; column-gap: 20px; align-items: flex-start; /*align-items: center;*/ } .utility-nav ul.nav-notice li { margin: 0; padding: 27px 0 0 0; display: flex; justify-content: center; position: relative; } .utility-nav ul.nav-notice li.disabled { opacity: 0.3; pointer-events: none; } .utility-nav ul.nav-notice li:before { content: ""; width: 0; height: 0; background-color: transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--font-link-color); border-radius: initial; opacity: 0.5; display: block; position: absolute; top: -2px; left: calc(50% - 7px); transition: opacity .3s; } .utility-nav ul.nav-notice li:hover:before { opacity: 1; } header.show-alerts .utility-nav ul.nav-notice li.alert:before, header.show-accessibility .utility-nav ul.nav-notice li.accessibility:before, header.show-hours .utility-nav ul.nav-notice li.hours:before { opacity: 1; } .utility-nav ul.nav-notice li a { min-height: 19px;/* adding this fixed height allows any non-icon list-item to be centered with the rest of the utility nav items */ color: var(--font-link-color); font-size: 13px; font-weight: 400; line-height: 15px; text-decoration: none; display: flex; align-items: center; } .utility-nav ul.nav-notice li a.notice-icon { background-repeat: no-repeat; background-size: cover; } .utility-nav ul.nav-notice li.alert a { width: 20px; height: 17px; background: var(--alert-icon) no-repeat center; background-size: 100%; display: block; } .utility-nav ul.nav-notice li.accessibility a.notice-icon svg g g { fill: var(--font-link-color); } .utility-nav ul.nav-list { /* width: 100%; */ margin: 0; padding: 27px 0 0 0; list-style-type: none; display: flex; column-gap: 35px; justify-content: flex-end; } .utility-nav ul.nav-list li { position: relative; } .utility-nav ul.nav-list li.dropdown-included {/* we increase the padding of list-item(s) with the "dropdown-included" class to make room for the down arrow pesudo element on the right of the text */ padding: 0 11px 0 0; } .utility-nav ul.nav-list li.dropdown-included:after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--font-link-color); position: absolute; top: calc(50% - (5px / 2)); right: 0; } .utility-nav ul.nav-list li a { /*color: var(--power-color-5);*/ color: var(--font-link-color); /*font: var(--small-header-font);*/ font-size: 13px; font-weight: 400; line-height: 15px; text-decoration: none; opacity: 1; display: block; } /*.utility-nav ul.nav-list li a:hover, .utility-nav ul.nav-list li a:focus {*/ /* color: var(--power-color-1);*/ /*}*/ .utility-nav ul.nav-social-list { margin: 0; padding: 27px 0 0 0; display: flex; column-gap: 10px; } .utility-nav ul.nav-social-list li { margin: 0; padding: 0; width: 20px; text-align: center; } .utility-nav ul.nav-social-list li:before { display: none; } .utility-nav ul.nav-social-list li a { opacity: 0.6; color: var(--font-link-color); font-size: 17px; line-height: 17px; display: flex; align-items: center; transition: opacity .3s; } .utility-nav ul.nav-social-list li a:hover { opacity: 1; } .utility-nav ul.nav-social-list li a[href*="//"]:not(.skip-offsite):not([href*="http://scls.digitalbranch.org/"]):not([href*="https://catalog.sclsnj.org/"]):after { /* TODO: update any style targeting "scls.digitalbranch.org" to the live site */ display: none; } .top-search-input .search-toggle { width: 40px; height: 40px; /*padding: 15px;*/ background-color: transparent; border: 0.5px solid transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -52px; right: 0; transition: background-color .2s, border-color .2s; } /* reveal the .search-toggle's background/border color on hover and when it's parent has the "show-search" status */ .top-search-input .search-toggle:hover, .top-search-input.show-search .search-toggle { /*background-color: var(--body-bg-color);*/ background-color: var(--header-list-bg-color); /*border-color: var(--brand-border-color);*/ transition: background-color .3s, border-color .3s; } .top-search-input.show-search .search-toggle .search-icon { display: none; } .top-search-input .search-toggle .close-icon { display: none; } .top-search-input.show-search .search-toggle .close-icon { display: block; } .top-search-input .onsite-search .onsite-search-input:focus { outline: none; } .top-search-input .onsite-search .onsite-search-input { border: .5px solid var(--brand-border-color); transition: opacity .3s, transform .3s; } .top-search-input.show-search .onsite-search .onsite-search-input{ /*opacity: 0.5;*/ border: .5px solid var(--brand-border-color); transform: translateY(0); transition: opacity .3s, transform .3s; pointer-events: all; } .top-search-input.show-search.site-searching .onsite-search .onsite-search-input { opacity: 1; } .top-search-input.show-search .onsite-search .onsite-search-button { opacity: 0.5; transform: translateY(0); transition: background-color .3s, opacity .3s, transform .3s; pointer-events: all; } .top-search-input .onsite-search-button span.light{ font-weight: 100; } .top-search-input.show-search.site-searching .onsite-search .onsite-search-button { opacity: 1; } .top-search-input .onsite-search-results .result-category .title{ margin-bottom: 8px; /*border-bottom: 1px solid var(--dark-background-2);*/ display: flex; gap: 4px; align-items: center; font-size: 15px; font-style: italic; line-height: 17px; font-weight: 500; /*font: var(--small-header-font);*/ } .top-search-input .summary{ font-size: 12px; font-weight: 300; max-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 18px; color: var(--font-body-color); } .top-search-input .onsite-search-results .result-category .result{ margin-bottom: 8px; font: var(--paragraph-font); } .top-search-input .onsite-search-results .result-category .result strong{ font-weight: 600; } .top-search-input .onsite-search-results a{ text-decoration: none; color: var(--font-link-color); /*font: var(--small-header-font);*/ font-size: 14px; } .top-search-input .onsite-search-results a.strike-through{ text-decoration: line-through; } .top-search-input .onsite-search-results .cancelled{ font-size: 1em; margin-right: 3px; } .top-search-input.show-search.active .search-results, .top-search-input.show-search.searching-site .search-results, .top-search-input.show-search.searching-catalog .search-results, .top-search-input.show-search.searching-supplementary .search-results{ display: flex; } .top-search-input .onsite-search-results.active{ display: flex; /*flex-direction: column;*/ } .top-search-input.show-search.searching-site .direct-results.result-category { display: none; } /*copied and modified from ccjpl*/ .top-search-input { width: 100%; margin: 15px 0 0 0; padding: 0; position: relative; z-index: 15; z-index: 101; } .top-search-input form{ pointer-events: none; } .top-search-input.show-search { /*z-index: 100000;*/ } .top-search-input.show-search form{ pointer-events: all; } .top-search-input .onsite-search { width: 100%; max-width: none; margin: 0; display: flex; align-items: center; justify-content: flex-end; position: relative; } .top-search-input .onsite-search:before { content: ""; } .top-search-input .onsite-search .onsite-search-label { width: 0px; height: 0px; text-indent: calc(-100vh + -9999px); } .top-search-input .onsite-search .onsite-search-options { /*box-sizing: border-box;*/ padding: 0 3px 0 0; display: none;/* this toogle feature is disabled for this site */ position: absolute; right: 75px; } .top-search-input .onsite-search .onsite-search-options .option { /* margin: 0 10px 0 0; */ display: flex; align-items: center; position: relative; } .top-search-input .onsite-search .onsite-search-options .option label { /*color: rgba(0,0,0,0.7);*/ /*font-size: 11px;*/ /*line-height: 15px;*/ margin: 0; padding: 5px 12px; box-sizing: border-box; opacity: 0.5; letter-spacing: 0px; text-align: left; font: var(--secondary-button-fonts); } .top-search-input .onsite-search .onsite-search-options .option input[type="radio"] { width: 7px; height: 7px; margin: 0; position: absolute; } .top-search-input .onsite-search .onsite-search-input { width: 100%; /*max-width: 999px;*/ /*max-width: 925px;*/ max-width: 945px; height: 50px; margin: 0; padding: 7px 115px 7px 20px; background-color: var(--body-bg-color); border: none; border-radius: 24px; opacity: 0; color: var(--font-body-color); pointer-events: none; position: relative; z-index: 10; transform: translateY(-15px); transition: opacity .2s, transform .2s; } body.resizing .top-search-input .onsite-search .onsite-search-input { transition: none; } .top-search-input.show-search .onsite-search .onsite-search-input { opacity: 1; pointer-events: all; } .top-search-input.opened-by-default.show-search .onsite-search .onsite-search-input { opacity: 0.5; } .top-search-input.opened-by-default.show-search:hover .onsite-search .onsite-search-input, .top-search-input.opened-by-default.show-search:focus-within .onsite-search .onsite-search-input { opacity: 1; } .top-search-input .onsite-search .onsite-search-button-wrapper{ position: absolute; display: flex; gap: 5px; right: 10px; z-index: 10; /*transform: translateY(-1px);*/ transition: background-color .2s, opacity .2s, transform .2s; } .top-search-input.show-search .onsite-search .onsite-search-button-wrapper{ /*transform: translateY(-15px); */ } .top-search-input .onsite-search .onsite-search-button { margin: 0; padding: 10px 17px; /*color: var(--power-color-2-foreground);*/ color: var(--button-color); border-radius: 18px; opacity: 0; background-color: var(--button-secondary-bg-color); font-size: 12px; font-weight: 700; line-height: 14px; text-transform: uppercase; letter-spacing: 0.5px; /*font: var(--small-header-font);*/ transform: translateY(-15px); transition: background-color .2s, opacity .2s, transform .2s; /*pointer-events: none;*/ } .top-search-input .onsite-search .onsite-search-button:focus{ opacity: 1; } .top-search-input .onsite-search .onsite-search-button:hover { background-color: var(--button-secondary-hover-bg-color); cursor: pointer; } body.resizing .top-search-input .onsite-search .onsite-search-button { transition: none; } .top-search-input .search-results { width: 100%; /*max-width: 999px;*/ max-width: 945px; margin-top: -25px; margin-right: -24px; padding: 34px 10px 10px 10px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-top-color: transparent; border-radius: 0 0 20px 20px; /*font: var(--paragraph-font);*/ display: none; gap: 0px; flex-direction: column; position: absolute; top: 100%; left: auto; right: 24px; z-index: 5; } .top-search-input:not(.search-open) .search-results { display: none; } .top-search-input .search-results .title { /*margin: 10px 0 3px 0;*/ /*padding: 0 10px;*/ box-sizing: border-box; font-size: 14px; line-height: 16px; font-weight: bold; } .top-search-input .search-results .title:first-of-type { /*margin: 0 0 3px 0;*/ } .top-search-input .search-results .onsite-search-catalog-results .title{ /*padding: 0 20px;*/ } /*for tree mode*/ .top-search-input .search-results .onsite-search-catalog-results .category.title{ flex: 0 0 100%; padding: 0 10px; } .search-results .result .cover-img{ max-width: 35px; max-height: 70px; object-fit: cover; /*float: left;*/ flex: 0 0 auto; } .search-results .result .info-wrapper{ flex: 1 1 0; } .search-results .result .title{ font-weight: bold; } .search-results .result .author{ font-style: italic; } .search-results .result .tag{ margin: 0; display: inline-flex; gap: 3px; border-radius: 5px; padding: 0px 5px; align-items: center; border: 1px solid var(--brand-border-color); background-color: var(--brand-alternate-color-3); } .top-search-input .search-results .result .tag{ font-size: .75em; font-weight: 300; opacity: .75; } .top-search-input .search-results .title i { margin: 0 5px 0 0; } .top-search-input .search-results .result { margin: 0 0 5px 0; padding: 0 10px; box-sizing: border-box; font-size: 12px; line-height: 14px; display: block; } .top-search-input .search-results .catalog .result, .top-search-input .search-results .supplementary .result{ display: flex; flex-direction: row; gap: 5px; } .top-search-input .search-results .full-result-link { /*width: calc(100% - 20px);*/ /*margin: 0 auto;*/ /*padding: 2px 5px;*/ /*box-sizing: border-box;*/ /*background-color: var(--footer-credits-bg-color);*/ /*font-size: 14px;*/ /*line-height: 16px;*/ /*display: block;*/ } .top-search-input .search-results .full-result-link:after{ content: none; !important } .top-search-input .search-results .onsite-search-results, .top-search-input .search-results .onsite-search-catalog-results, .top-search-input .search-results .onsite-search-supplementary-results{ position: relative; display: flex; flex-wrap: wrap; } @keyframes search-spinner { 0% {transform: rotate(0deg);} 25% {transform: rotate(90deg);} 50% {transform: rotate(180deg);} 75% {transform: rotate(270deg);} 100% {transform: rotate(360deg);} } .top-search-input .search-results .result-category{ flex-basis: 50%; /*display: grid;*/ /*grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));*/ /*grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));*/ /*grid-template-columns: repeat(auto-fill, minmax(0, max-content));*/ } .top-search-input .search-results .result-category.direct-results{ flex-basis: 100%; } .top-search-input .search-results .result-category.direct-results .result{ margin-top: 0px; padding: 11px 17px 10px 17px; display: inline-block; /*align-items: center;*/ /*justify-content: center;*/ /*column-gap: 8px;*/ } .top-search-input .search-results .result-category.direct-results .result .icon{ width: 18px; height: 18px; margin-right: 8px; display: inline-block; vertical-align: bottom; } .top-search-input .search-results .result-category.direct-results .result .icon svg{ max-width: 100%; max-height: 100%; } .top-search-input .search-results .result-category .title{ /*grid-column: 1/-1;*/ /*margin: 10px 0;*/ } .top-search-input .search-results .result-category .result{ margin: 10px; } .top-search-input .search-results .onsite-search-results:before, .top-search-input .search-results .onsite-search-catalog-results:before , .top-search-input .search-results .onsite-search-supplementary-results:before { content: ""; width: 10px; height: 10px; margin: 0 10px; border: 1px solid var(--hr-color); border-bottom: 1px solid var(--font-link-color); border-radius: 50%; display: none; transform-origin: 50% 50%; animation: search-spinner 1s infinite; } .top-search-input .search-results .onsite-search-results:after, .top-search-input .search-results .onsite-search-catalog-results:after, .top-search-input .search-results .onsite-search-supplementary-results:after{ font-size: 10px; line-height: 12px; display: none; position: absolute; top: 0px; left: 25px; } .top-search-input .search-results .onsite-search-results:after { content: "Searching Site"; } .top-search-input .search-results .onsite-search-catalog-results:after { content: "Searching Online Catalog"; } .top-search-input .search-results .onsite-search-supplementary-results:after { content: "Searching EBSCO"; } .top-search-input.searching-site .search-results .onsite-search-results:before, .top-search-input.searching-catalog .search-results .onsite-search-catalog-results:before, .top-search-input.searching-supplementary .search-results .onsite-search-supplementary-results:before, .top-search-input.searching-site .search-results .onsite-search-results:after, .top-search-input.searching-catalog .search-results .onsite-search-catalog-results:after, .top-search-input.searching-supplementary .search-results .onsite-search-supplementary-results:after { display: inline-flex; } .top-search-input .search-results .onsite-search-results-title { margin: 15px 0 5px 0; padding: 5px 10px; background-color: var(--bucket-section-bg-color); display: flex; justify-content: space-between; } .top-search-input .search-results .no-results { width: calc(100% - 20px); margin: 0 10px; font-size: 14px; line-height: 16px; } .top-search-input .search-results .onsite-search-results-title:first-of-type { margin: 0; } /* search edits */ .top-search-input.search-open.active .search-results, .top-search-input.search-open.searching-site .search-results, .top-search-input.search-open.searching-catalog .search-results { display: inline-block; } .top-search-input.searching-site .search-results .no-results.site, .top-search-input.searching-catalog .search-results .no-results.catalog, .top-search-input.searching-site .onsite-search-results .result-category, .top-search-input.searching-catalog .onsite-search-catalog-results .result-category, .top-search-input.searching-supplementary .onsite-search-supplementary-results .result-category{ display: none; } form { margin-top: 70px; max-width: 813px; } .register-form-two { margin-top: unset; } form fieldset { margin: 0; padding: 0; border: none; } form fieldset[data-name="check_box"], form fieldset[data-name="new_element"] { display: flex; flex-wrap: wrap; gap: 10px 20px; } form .field-row { display: flex; margin-bottom: 20px; } form .field-row .field-container { flex-grow: 1; margin-right: 10px; } form .field-row .field-container label { width: 100%; display: block; } form .field-row .field-container label .txt, form .field-row .field-container fieldset .txt { font: 600 18px/23px 'DM Sans'; margin-bottom: 5px; } form .field-row .field-container label:has( input[type="checkbox"]), form .field-row .field-container label:has( input[type="radio"]) { display: flex; gap: 5px; width: max-content; } input, input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; margin: 5px 0 10px 0; padding: 5px; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 5px; color: var(--font-body-color); display: block; } textarea { font-family: 'DM Sans', serif; } input[type="checkbox"], input[type="radio"] { width: initial; } select { position: relative; padding: 5px; border-radius: 5px; border: 1px solid var(--brand-border-color); background-color: var(--body-bg-color); color: var(--font-body-color); font: 400 14px / 21px 'DM Sans'; /*appearance: none;*/ /*-moz-appearance: none;*/ /*-webkit-appearance: none;*/ } select:before { position: absolute; content: ''; } select.sort-by { margin-left: 8px; width: 150px; } form input[type="submit"] { /*font: var(--small-header-font);*/ font-weight: 400; color: var(--power-color-1-foreground); background-color: var(--power-color-1); border: unset; padding: 6px 20px; border-radius: 20px; text-transform: capitalize; width: fit-content; } /*====================================================================================================== BODY STYLES - desktop ======================================================================================================*/ body { position: relative; } body:before, body:after { content: ""; width: 100%; height: 100%; background: transparent no-repeat top left; background-size: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; transition: opacity .2s; display: none; } body:before {/* lightmode background */ opacity: 1; background-color: var(--body-bg-color); background-image: url('/content/_site_images/placeholder_body-background.png'); } body.dark-mode:before {/* lightmode background (hidden) */ opacity: 0; } body:after {/* darkmode background (hidden) */ opacity: 0; background-image: url('/content/_site_images/placeholder_body-background-dm.png'); } body.dark-mode:after {/* darkmode background */ opacity: 1; } .main-content { max-width: 1920px; width: 100%; margin: 0 auto; /*background-color: var(--background-1);*/ position: relative; z-index: 25; /*overflow-y: initial;*/ /*overflow-x: hidden;*/ } .main-content.home { /*overflow: hidden;*/ } .main-content.secondary.spaces .page-content { left: unset; width: 100%; } .main-content.calendar { margin: auto; /* margin-left: 50px; */ max-width: 1200px; width: calc(100% - 50px); } .main-content.calendar h1 { text-align: center; } .main-content.overlay-active { z-index: 35; } .page-content { width: 100%; max-width: 1280px; margin: 0 auto; /*padding: 20px 45px 100px 45px;*/ padding: 40px 45px 100px 45px; /*box-sizing: border-box;*/ display: flex; flex-wrap: wrap; justify-content: space-between; /*align-content: center;*/ /*align-items: flex-start;*/ position: relative; z-index: 10; /*gap: 50px;*/ gap: initial; } .main-content.home .page-content { max-width: 1280px; /*padding: 20px 0 400px 0;*/ padding: 40px 0 400px 0; flex-wrap: wrap; max-width: none; flex-direction: column; } .main-content.calendar-event .page-content { /* display: block; */ } .main-content.secondary .page-content, .main-content.tertiary .page-content { padding-bottom: 250px; } .main-content.staff .page-content { padding-bottom: 920px; } body:has( header.open-notices) .page-content:after { content: ''; position: absolute; width: 100vw; max-width: 1920px; height: 1000px; top: -1000px; left: 50%; transform: translateX(-50%); background-color: var(--blob-bg-color); z-index: -1; } .page-banner { width: 100%; max-width: 1200px; margin: 0 auto 150px auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 6; } .page-banner h1 { margin: 0 0 20px 0; } .main-content.staff .page-content .page-banner { margin-bottom: 50px; gap: 25px; } .main-content.staff .page-banner h1 { margin: 10px 0 0 0; font-size: 69px; line-height: 72px; } .page-banner p { margin: 0; color: var(--font-body-color); font-size: 19px; line-height: 24px; } .page-banner .banner-content { /*width: 100%;*/ max-width: 336px; position: relative; } .page-banner .banner-content:before { content: ""; width: 504px; height: 504px; background-color: var(--body-media-bg-color); border-radius: 50%; display: none; position: absolute; top: calc(50% - 252px); left: calc(50% - 252px); z-index: 1; pointer-events: none; } .page-banner .banner-content .content { width: 100%; position: relative; z-index: 5; } .page-banner .banner-media { /*width: 100%;*/ max-width: 369px; min-width: 369px; min-height: 369px; max-height: 369px; background: no-repeat center; background-size: contain; /*background-color: #D8D8D8;*/ border: 6px solid var(--brand-alternate-color); border-radius: 50%; } .secondary.staff .page-banner .banner-media { max-width: 521px; /*min-width: 521px;*/ max-height: 521px; /*min-height: 521px;*/ min-width: unset; min-height: unset; aspect-ratio: 1/1; flex: 1 1 0px; } .page-body { position: relative; z-index: 5; } .home-events { width: calc(100% - 30px); margin: 0 0 0 15px; position: relative; transition: opacity .3s; } body.resizing .home-events { opacity: 0.4; } .home-events:before { content: ""; width: 50px; height: 50px; border: 1px solid var(--body-media-bg-color); border-bottom: 1px solid #000; border-radius: 50%; opacity: 0; display: block; transform-origin: 50% 50%; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); z-index: 25; pointer-events: none; animation: search-spinner .75s infinite linear; transition: opacity .3s; } body.resizing .home-events:before { opacity: 1; } .home-events .home-event-content { width: 100%; display: flex; justify-content: center; } .home-events .main-events { position: relative; width: 100%; max-width: 1052px; } .home-events .main-events .events-swiper .swiper-slide { display: flex; /*flex-direction: column;*/ /*align-items: center;*/ justify-content: space-between; pointer-events: none; transition: opacity .3s; overflow: hidden; } .home-events .main-events .events-swiper .swiper-slide.swiper-slide-active { opacity: 1; pointer-events: all; } .home-events .main-events .events-swiper .swiper-slide .slide-media { display: flex; flex-direction: column; align-items: center; } .home-events .main-events .events-swiper .swiper-slide .slide-media img { border-radius: 5px; } .home-events .main-events .events-swiper .swiper-pagination { width: auto; max-width: 724px;/* try and match the slider-media width */ margin: 15px 0 0 0; display: flex; align-items: center; justify-content: center; position: relative; top: auto; bottom: auto; } .home-events .main-events .events-swiper .swiper-pagination-bullet { width: 13px; height: 13px; margin: 0 15px 0 0; background-color: transparent; /*border: 1px solid var(--power-color-2);*/ border: 1px solid var(--font-link-color); opacity: 1; transition: background-color .3s; } .home-events .main-events .events-swiper .swiper-pagination-bullet:last-of-type { margin: 0; } .home-events .main-events .events-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { /*background-color: var(--power-color-2);*/ background-color: var(--font-link-color); opacity: 100%; } .home-events .main-events .events-swiper .swiper-slide .slide-content { width: 100%; max-width: 246px; padding: 0; display: flex; flex-direction: column; align-self: center; } .home-events .main-events .events-swiper .swiper-slide .h1-like { margin-bottom: 8px; font-size: 30px; line-height: 32px; } .home-events .main-events .events-swiper .swiper-slide .event-info p { opacity: 1; margin: 0 0 15px 0; -webkit-font-smoothing: antialiased; /*font: var(--paragraph-font);*/ font-size: 16px; line-height: 19px; letter-spacing: 0.2px; text-align: left; } .home-events .main-events .blob.b2 { width: 700px; top: -35px; right: -290px; } .home-events .main-events .blob.b3 { width: 210px; bottom: -80px; left: -268px; } /* home page > live-chat-section */ .live-chat-section { width: 100%; /*max-width: 273px;*/ max-width: 1062px; margin: 22px auto 0 auto; /*padding: 0 37px 0 0;*/ /*background-color: rgba(0,0,255,0.5);*/ display: flex; justify-content: flex-end; position: relative; z-index: 15; display: none; } .live-chat-section .chat-popup { width: 100%; max-width: 273px; padding: 20px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 10px; box-shadow: 0 0 0 rgba(0,0,0,0.24); opacity: 0; position: absolute; right: 37px; pointer-events: none; transform: translateY(15px); transition: box-shadow .2s, opacity .2s, transform .2s; } .live-chat-section .chat-popup.show-popup { box-shadow: 0 0 15px rgba(0,0,0,0.24); opacity: 1; pointer-events: all; transform: translateY(0); transition: box-shadow .3s .1s, opacity .3s, transform .3s; } .live-chat-section .chat-popup:before {/* this pesudo element is used to cover half of the block which is the :after element *this will make it look at an arrow */ content: ""; width: 20px; height: 18px; background-color: var(--body-bg-color); display: block; position: absolute; bottom: 0; right: 18px; z-index: 5; } .live-chat-section .chat-popup:after {/* this pesudo element is a block at poses as a arrow due to the fact part of it is being covered by the popup's pesudo background (:before)*/ content: ""; width: 11px; height: 11px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); opacity: 0; display: block; position: absolute; bottom: 3px; right: 22px; transform: rotate(45deg); z-index: 1; pointer-events: none; transition: opacity .2s, bottom .2s; } .live-chat-section .chat-popup.show-popup:after { opacity: 1; bottom: -6px; transition: opacity .3s, bottom .3s; } .live-chat-section .chat-popup p.popup-heading { font-size: 19px; font-weight: 700; line-height: 21px; } .live-chat-section .chat-popup p { margin-bottom: 9px; font-size: 15px; font-weight: 400; line-height: 23px; } .live-chat-section .chat-popup p:last-of-type { margin-bottom: 0; } .live-chat-section .chat-popup a.button-like { margin-top: 15px; } .live-chat-section .chat-popup-toggle { width: 70px; height: 70px; margin-left: auto; /*background-color: var(--power-color-2);*/ background-color: var(--font-link-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .libraryh3lp { position: fixed; bottom: 40px; right: 40px; z-index: 30; } .libraryh3lp .live-chat { width: 70px; height: 70px; margin-left: auto; background-color: var(--font-link-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .quicklinks-container { width: 100%; max-width: 894px; margin: 114px auto 35px auto; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; --quicklink-color: var(--font-link-color); } .quicklinks-container h2 { width: 100%; max-width: 204px; margin: 0 0 25px 0; padding: 15px 0 0 0; box-sizing: border-box; border-top: 1px solid #010852; text-align: center; display: none; } .quicklinks-container .quicklinks { width: 100%; display: flex; column-gap: 32px; } .quicklink { max-width: 97px; width: fit-content; display: flex; flex-direction: column; align-items: center; text-decoration: none; } .quicklink-cropper { /*margin: 0 25px;*/ width: 97px; height: 97px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 50%; } .quicklink-cropper:has( svg) { display: flex; } .quicklink-cropper svg { width: 100%; height: auto; max-height: 40px; max-width: 40px; margin: auto; } .quicklink img { max-width: 40px; padding: 11px 13px 15px 13px; } .quicklink .quicklink-cropper .quicklink-letter-title { text-align: center; font: var(--secondary-header-font); font-size: 50px; line-height: 63px; font-weight: 400; } .quicklinks-container .quicklinks .quicklink:last-of-type { margin: 0; } .quicklink .heading { margin: 7px 0 0 0; color: var(--font-link-color); font-size: 15px; line-height: 18px; text-align: center; } .quicklinks-container .quicklinks .quicklink-separator { width: 1px; height: 100%; margin: 0 47px 0 0; background-color: var(--secondary-architecture); opacity: 0.6; display: block; } /* choose your branch section */ .branch-favorites-button { width: 100%; display: flex; justify-content: center; /*margin: 50px 0;*/ margin: 50px 0 91px 0; } .branch-favorites-button .button-like.secondary.down-arrow, .branch-favorites-section .explanation .secondary { display: flex; width: fit-content; height: 35px; gap: 7px; align-items: center; border: .4px solid var(--brand-border-color); background: var(--personalize-button-gradient); } .branch-favorites-button .button-like.secondary.down-arrow:hover img, .branch-favorites-section .explanation .secondary:hover img { content: var(--personalize-star-color-icon); } .branch-favorites-button .button-like.secondary.down-arrow:before, .branch-favorites-button .button-like.secondary.down-arrow:after { content: ''; display: block; position: absolute; box-sizing: border-box; right: -35px; top: 0px; width: 35px; height: 35px; padding: 12px; border-radius: 20px; transition: all .5s; } .branch-favorites-button .button-like.secondary.down-arrow:after { background-image: unset; background: var(--personalize-button-gradient); border: .4px solid var(--brand-border-color); z-index: 0; } .branch-favorites-button .button-like.secondary.down-arrow:before { /*background-image: var(--personalize-button-icon);*/ background-image: url('data:image/svg+xml,Combined Shape'); background-size: 13px; background-position: calc(50%) calc(50%); background-repeat: no-repeat; background-color: transparent; z-index: 1; } .branch-favorites-section { width: 100vw; height: 100vh; opacity: 0; display: flex; flex-direction: column; align-items: center; position: fixed; transform: translate(-50%, -50%); top: 50%; left: 50%; z-index: 1000; pointer-events: none; transition: opacity .2s; } .branch-favorites-section.show-overlay { opacity: 1; pointer-events: all; transition: opacity .3s; } .branch-favorites-section .clickable-background { width: 100%; height: 100%; background-color: var(--body-bg-color); opacity: .75; display: block; position: absolute; top: 0; left: 0; z-index: 1; cursor: initial; } .branch-favorites-section .information { width: 100%; max-width: 1180px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 70px; opacity: 0; padding: 0px 55px; transition: all .2s; pointer-events: none; margin: auto; position: relative; z-index: 5; } .branch-favorites-section.show-overlay .information { opacity: 1; padding: 38px 55px; pointer-events: all; transition: all .3s; } .branch-favorites-section .information .close-icon { display: block; position: absolute; top: 25px; right: 50px; z-index: 15; } .branch-favorites-section .information h3 { margin: 0 0 10px 0; } .branch-favorites-section .information > p { margin: 0 0 40px 0; color: var(--font-offset-color); } .branch-favorites-section .information .check-groups h3 { font-size: 20px; } .branch-favorites-section .information .check-groups { display: flex; } .branch-favorites-section .information .branches { padding-right: 50px; margin-right: 50px; border-right: 1px solid var(--hr-color); flex: 0 0 66%; } .branch-favorites-section .information .age-groups { flex: 0 0 33%; } .branch-favorites-section .information .branches .checklist { column-count: 2; } .branch-favorites-section .information .checklist li { padding: 0; display: flex; gap: 5px; align-items: center; } .branch-favorites-section .information .checklist li:before { display: none; } .branch-favorites-section .information .checklist li label { display: block; position: relative; padding-left: 22px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .branch-favorites-section .information .checklist li label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .branch-favorites-section .information .checklist li label .checkmark { position: absolute; top: 0; left: 0; height: 17px; width: 17px; } .branch-favorites-section .information .checklist li label .checkmark * { transition: all .15s; fill: var(--body-bg-color); stroke: var(--button-color); } .branch-favorites-section .information .checklist li label:hover input ~ .checkmark * { fill: var(--button-secondary-bg-color); stroke: var(--button-color); } .branch-favorites-section .information .checklist li label input:checked ~ .checkmark * { fill: var(--personalize-star-fill); stroke: var(--personalize-star-fill); } .branch-favorites-section .information .age-groups .checklist li label input:checked ~ .checkmark * { fill: var(--personalize-checked-star-fill); stroke: var(--personalize-checked-star-fill); } .branch-favorites-section .information .checklist li label { padding-left: 22px; } .branch-favorites-section .information .explanation { margin-top: 25px; text-align: center; display: flex; flex-direction: column; align-items: center; } .branch-favorites-section .information .explanation p { color: var(--button-color); font-size: 14px; font-style: italic; } .branch-information-section { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1180px; /*margin: 0 auto 91px auto;*/ margin: 50px auto 0 auto; padding: 0 25px; } .branch-information-section a.button-like { margin: 0 0 58px 0; } .branch-information-section .information { width: 100%; padding: 38px 55px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 70px; display: flex; } .branch-information-section .information .info-top { width: 100%; margin: 0 0 50px 0; display: flex; flex-wrap: wrap; row-gap: 10px; align-items: center; } .branch-information-section .information .info-top h3 { margin: 0; } .branch-information-section .information .info-top a.personalize-button { margin-left: 11px; display: flex; cursor: pointer; } .branch-information-section .information .info-date { margin: 0 0 30px 0; font-size: 15px; font-style: italic; line-height: 17px; display: block; } /* general .info element styles */ .branch-information-section .information .info-content {} .branch-information-section .information .info-content .info { margin: 0 0 10px 0; padding: 0 0 17px 0; border-bottom: 1px solid var(--hr-color); } .branch-information-section .information .info-content .info:last-of-type { margin: 0; padding: 0; border-bottom: none; } .branch-information-section .information .info-content .info .info-heading { margin: 0 0 11px 0; padding: 0 0 0 22px; font-family: 'Aleo', serif; font-size: 18px; font-weight: 500; line-height: 20px; display: block; position: relative; } .branch-information-section .information .info-content .info .info-heading:before { content: ""; width: 10px; height: 10px; background-color: var(--font-link-color); border-radius: 50%; display: block; position: absolute; top: 5px; left: 0; } .branch-information-section .information .info-content .info .branches-list > * { display: none; position: relative; } .branch-information-section .information .info-content .info .branches-list .favorited, .branch-information-section .information .info-content .info .branches-list .active { display: block; } .branch-information-section .information .info-content .info .branches-list .favorited:after { top: 3px; left: 0 } .branch-information-section .information .info-content .info .branch-name { margin: 0 0 2px 0; padding: 0 0 0 22px; display: block; } .branch-information-section .information .info-content .info p { margin: 0; padding: 0 0 0 22px; color: var(--font-offset-color); font-size: 16px; font-weight: 400; line-height: 19px; } /* unique .info element styles */ .branch-information-section .information .basic-info { width: 100%; /*max-width: 256px;*/ max-width: 330px; margin: 0 50px 0 0; padding: 0 50px 0 0; border-right: 1px solid var(--hr-color); } .branch-information-section .information .event-info { width: 100%; } .branch-information-section .information .event-info .info-top { margin: 0 0 4px 0; } .branch-information-section .information .event-info .info-top h3 { margin: 0 20px 0 0; } .branch-information-section .information .event-info .info-top a.button-like { margin: 0 0 0 auto; } .branch-information-section .information .event-info .event-days { position: relative; } .branch-information-section .information .event-info .event-day { width: 100%; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; position: absolute; top: 0; } .branch-information-section .information .event-info .event-day.active {/* reveal the .event-day element when it has the "active" state */ opacity: 1; transform: translateY(0); pointer-events: all; transition: opacity .3s .1s, transform .3s; position: relative; } .branch-information-section .information .event-info .event-day .info-content { display: flex; column-gap: 90px; } /* turn the .audience-filter global */ .audience-filter { margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 10px; align-items: center; justify-content: center; } #new_at_the_library_segment .audience-filter { flex-wrap: nowrap; justify-content: flex-start; flex: max-content; width: max-content; min-height: 14px; } .audience-filter li { margin: 0; padding: 0; font-size: 14px; line-height: 14px; } .home .audience-filter li.favorited, .home .audience-filter li.preferred-favorite { padding-left: 16px; } .audience-filter li.favorited:after, .audience-filter li.preferred-favorite:after { top: -1px; left: 0px; } .audience-filter li:before { width: 100%; height: 2px; background-color: var(--filter-underline-color); border-radius: initial; opacity: 0; top: auto; bottom: -2px; left: 0; transform: scaleX(0); transform-origin: 0 50%; transition: opacity .2s, transform .2s } .audience-filter li.active:before, .audience-filter li:hover:before{ opacity: 1; transform: scaleX(1); transition: opacity .3s, transform .3s } .audience-filter li.disabled { opacity: 0.25; pointer-events: none; } .audience-filter li a { color: var(--font-body-color); font-weight: 400; } /* personalization tooltip in tag lists */ .audience-filter li.personalize-option:before { content: none; } .audience-filter li.personalize-option .tooltip { top: unset; bottom: 35px; left: -94px; } .audience-filter li.personalize-option .tooltip:before { top: unset; bottom: -6px; left: 108px; transform: rotate(-135deg); } .audience-filter li.personalize-option .tooltip:after { width: 100%; height: 20px; top: unset; bottom: -15px; left: 0; } /* NEW naming for the .sections 12/23/24 TH*/ .full-segment { width: 100%; max-width: 1180px; margin: 0 auto 125px auto; display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 25px; } #eresources_segment { z-index: 1; } .full-segment .segment-heading-row { width: 100%; margin: 0 0 30px 0; display: flex; flex-wrap: wrap; row-gap: 10px; align-items: center; position: relative; z-index: 20; } .full-segment .segment-heading-row .personalize-button { margin-left: 15px; } .full-segment .segment-heading-row.no-spacing {/* the "no-spacing" removes the margin from the segment's heading; this is done because the segment's content most likely has top margin/padding themselfs */ margin: 0 0 30px 0; } .full-segment .segment-heading-row .h2-like { margin: 0 25px 0 0; font-size: 33px; line-height: 35px; } .full-segment .segment-heading-row a.button-like { margin: 0 0 0 auto; } /* unique styles for when the heading row has the "pillar" class */ .full-segment .segment-heading-row.pillar {/* turn this segment into a column layout; if it has the "pillar" class */ flex-direction: column; } .full-segment .segment-heading-row.pillar .h2-like { margin: 0 0 5px 0; } .full-segment .audience-filter li a {/* unique .audience-filter styles for the full-segment element */ color: var(--font-link-color); } .full-segment .segment-content-row { width: 100%; position: relative; } .full-segment .segment-content-row .content-elem {/* by default, these .content-elem elements are hidden; until they're given the "show" state */ width: 100%; opacity: 0; position: absolute; top: 0; transform: translateY(15px); transition: opacity .3s, transform .3s; pointer-events: none; } .full-segment .segment-content-row .content-elem.show {/* reveal the .content element when it has the "show" state */ opacity: 1; position: relative; transform: translateY(0); transition: opacity .4s .1s, transform .4s; pointer-events: all; } .full-segment .segment-media-column {} .full-segment .segment-media-column .column-media {} .full-segment .segment-content-column {} /* full-segment skeleton styles */ .full-segment.has-skeleton { --skeleton-opacity: 0; --skeleton-transition: opacity .3s; } /* .full-segment.segment-initialized { --skeleton-transition: opacity .3s .5s; } */ .full-segment.skeleton-active { --skeleton-opacity: 1; --skeleton-transition: opacity .3s; } .full-segment.has-skeleton .segment-heading-row:after, .full-segment.has-skeleton .personal-item .item-media:after, .full-segment.has-skeleton .personal-item .item-content .h3-like:after, .full-segment.has-skeleton .personal-item .item-content p:after, .full-segment.has-skeleton .personal-item .item-content a.button-like:after, .full-segment.has-skeleton .personal-item .quicklinks-paths a.path:after, .full-segment.has-skeleton .personal-item .item-content .booklist-books .book:after, .full-segment.has-skeleton .eresource-item .item-media:after, .full-segment.has-skeleton .eresource-item .item-content .h3-like:after, .full-segment.has-skeleton .eresource-item .item-content h4:after, .full-segment.has-skeleton .eresource-item .item-content p:after, .full-segment.has-skeleton .eresource-item .item-content .eresource-buttons:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-media:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .details h4:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-content p:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .event-buttons:after, .full-segment.has-skeleton .upcoming-events .basic-events .event:after, .full-segment.has-skeleton .audience-filter:after { content: ""; width: 100%; height: 100%; background-color: rgba(211,211,211,1); opacity: var(--skeleton-opacity); display: block; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; transition: var(--skeleton-transition); } .full-segment.has-skeleton .audience-filter:after { opacity: 0; } .full-segment.has-skeleton.skeleton-rearranging-filters .audience-filter:after { opacity: 1; } /* make element has relative positioning for the skeleton */ .full-segment.has-skeleton .personal-item .item-media, .full-segment.has-skeleton .personal-item .item-content .h3-like, .full-segment.has-skeleton .personal-item .item-content p, .full-segment.has-skeleton .personal-item .quicklinks-paths a.path, .full-segment.has-skeleton .eresource-item .item-content .h3-like, .full-segment.has-skeleton .eresource-item .item-content h4, .full-segment.has-skeleton .eresource-item .item-content p, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .details h4, .full-segment.has-skeleton .upcoming-events .featured-event .event-content p, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .event-buttons, .full-segment.has-skeleton .upcoming-events .basic-events .event, .full-segment.has-skeleton .audience-filter { position: relative; } /* when the segment has the 'segment-initialized'; always show the filter row(segment-heading-row) */ .full-segment.segment-initialized .segment-heading-row:after { opacity: 0; transition: none; } .full-segment.reveal-segment-content .segment-content-row .content-elem { opacity: 0; animation: reveal-for-you-content .3s ease-out forwards; } @keyframes reveal-for-you-content { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } /* global style for the swiper.js sliders - https://swiperjs.com/ */ .slider-container { /*width: calc(100% + 21px);*/ /*margin-left: -21px;*/ position: relative; } /* unique booklist style of the container - we force the container to the left because of the extra padding needed for this slider */ .slider-container.booklists { /*margin-left: -66px;*/ } .slider-container:before { content: ""; width: 50px; height: 50px; border: 1px solid var(--body-media-bg-color); border-bottom: 1px solid #000; border-radius: 50%; opacity: 0; display: block; transform-origin: 50% 50%; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); z-index: 25; pointer-events: none; animation: search-spinner .75s infinite linear; transition: opacity .3s; } body.resizing .slider-container:before { opacity: 1; } /* @keyframes search-spinner { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } */ .slider-container .swiper { /*width: calc(100% + 21px);*/ /*margin-left: -21px;*/ /*padding: 0 70px;*/ /*padding: 0 21px;*/ width: calc(100% - 162px); margin: 0 auto; padding: 0; opacity: 1; transition: opacity .3s; } .source-container .slider-container .swiper { width: calc(100% - 66px); } body.resizing .slider-container .swiper { opacity: .4; } .swiper-fade .swiper-slide { opacity: 0; pointer-events: none; } .swiper-fade .swiper-slide-active { opacity: 1; pointer-events: all; } /* unique sizing for different types of swipers */ .slider-container.booklists .swiper {/* used in the Book Lists segment (needs extra padding so that the book's box-shadow won't get cut-off) */ /*width: calc(100% + 45px);*/ /*margin-left: -45px;*/ width: calc(100% - 140px); margin: 0 auto; padding: 0; } .slider-container .swiper-wrapper {} .slider-container .swiper-wrapper .swiper-slide { width: auto; min-height: 180px; display: flex; /*align-items: center;*/ align-items: flex-start; justify-content: center; order: 1; } footer .slider-container .swiper-wrapper .swiper-slide { justify-content: flex-start; } .slider-container .swiper-wrapper .swiper-slide.favorited { order: 0; } .slider-container .swiper-wrapper .swiper-slide.favorited:after { left: 0px; } .slider-container .swiper-wrapper .swiper-slide.favorited .list-heading { margin-left: 17px; } .slider-container .swiper-button-prev, .slider-container .swiper-button-next { width: 70px; height: 100%; margin: 0; top: 0; bottom: auto; } .slider-container .swiper-button-prev { left: 0; right: auto; } /* unique positioning for different types of swipers */ .slider-container.booklists .swiper-button-prev { /*left: 45px;*/ /*left: 24px;*/ } .slider-container .swiper-button-next { left: auto; right: 0; } .slider-container .swiper-button-prev:before, .slider-container .swiper-button-next:before { content: ""; width: 70px; height: 100%; display: none; position: absolute; top: 0; left: 0; z-index: 1; } .slider-container .swiper-button-prev:before {} .slider-container .swiper-button-next:before {} .slider-container .swiper-button-prev:after, .slider-container .swiper-button-next:after { content: ""; width: 40px; height: 40px; /*background-color: var(--body-bg-color);*/ background-color: var(--button-secondary-bg-color); /*border: 1px solid var(--tag-border-color);*/ border: 1px solid var(--button-color); display: block; position: absolute; top: calc(50% - 20px); z-index: 5; } .slider-container .swiper-button-prev:after { left: 0; } .slider-container .swiper-button-next:after { right: 0; } .slider-container .swiper-button-prev:before { content: ""; width: 17px; height: 9px; /*background: var(--slider-arrow);*/ background: url('data:image/svg+xml,PathCreated with Sketch.') no-repeat center; background-size: cover; display: block; position: absolute; top: calc(50% - (9px / 2)); left: calc((50% - (17px / 2)) - 15px); z-index: 10; transform: rotate(-90deg); } .slider-container .swiper-button-next:before { content: ""; width: 17px; height: 9px; /*background: var(--slider-arrow);*/ background: url('data:image/svg+xml,PathCreated with Sketch.') no-repeat center; background-size: cover; display: block; position: absolute; top: calc(50% - (9px / 2)); left: calc((50% - (17px / 2)) + 15px); z-index: 10; transform: rotate(90deg); } /* place .discover-filters styles here */ .discover-filters .personalize-option .tooltip, .discover-filters .apply-favorites .tooltip { left: auto; right: -20px; top: calc(100% + 9px); } .discover-filters .personalize-option .tooltip:after, .discover-filters .apply-favorites .tooltip:after { width: 100%; height: 18px; left: 0; top: -9px; } .discover-filters .personalize-option .tooltip:before, .discover-filters .apply-favorites .tooltip:before { transform: rotate(45deg); left: auto; right: 22px; top: -6px; } /* filters container */ .discover-filters { margin: 25px 0 50px 0; position: relative; z-index: 2; } .discover-filters .current-filters { background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 20px; padding: 17px 30px; display: flex; align-items: center; gap: 13px; transition: border-radius .5s; } .page-content .body:has( .discover-filters.expanded) { /*z-index: 20;*/ } .discover-filters.expanded .current-filters { border-radius: 20px 20px 0 0; } .discover-filters .current-filters .h3-like { margin: 0; width: fit-content; cursor: pointer; } .discover-filters .current-filters .tagged-list { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; } .discover-filters .current-filters .tagged-list .tag { padding: 1px 10px; background-color: var(--body-bg-color); border: 1px solid var(--tag-border-color); border-radius: 20px; cursor: pointer; } .discover-filters .current-filters .tagged-list .tag a { position: relative; font: 400 15px/15px 'DM Sans'; padding-left: 17px; text-decoration: none; } .discover-filters .current-filters .tagged-list .tag a:before { content: ''; position: absolute; width: 13px; height: 13px; left: 0px; top: 3px; clip-path: polygon(1.5px 0, 6.5px 5px, 11.5px 0px, 13px 1.5px, 8px 6.5px, 13px 11.5px, 11.5px 13px, 6.5px 8px, 1.5px 13px, 0px 11.5px, 5px 6.5px, 0px 1.5px); background-color: var(--tag-border-color); } .discover-filters .current-filters .tagged-list .tag a.favorited { padding-right: 17px; } .discover-filters .current-filters .tagged-list .tag a.favorited:after { left: auto; right: 0; } .discover-filters .current-filters .expand-filters { display: inline-block; width: 40px; height: 40px; border-radius: 20px; background-color: var(--button-secondary-bg-color); background-image: var(--button-icon); background-repeat: no-repeat; background-position: calc(50% + 1.5px) calc(50% - .5px); background-size: 8px; transform: rotate(90deg); transition: transform .5s; cursor: pointer; } .discover-filters.expanded .current-filters .expand-filters { transform: rotate(-90deg); } .discover-filters .current-filters a.personalize-button .tooltip { top: unset; bottom: 30px; left: -110px; } .discover-filters .current-filters a.personalize-button .tooltip:before { transform: rotate(-135deg); top: unset; bottom: -6px; left: calc(50% - 5.5px); } .discover-filters .current-filters a.personalize-button .tooltip:after { top: unset; bottom: -15px; left: 0; width: 100%; height: 25px; } .discover-filters .expandable-section { position: relative; display: block; z-index: -1; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 0 0 20px 20px; padding: 25px 30px 30px 30px; margin-top: -57px; opacity: 0; max-height: 0; pointer-events: none; transition: margin .5s, opacity .5s, max-height .5s; } .discover-filters.expanded .expandable-section { opacity: 1; margin-top: 0; max-height: 300px; width: 100%; pointer-events: all; } .discover-filters .tags { position: relative; display: flex; z-index: -1; gap: 20px; max-height: 243px; overflow: hidden; } .discover-filters.blogs .tags { /* TODO: JS - come back and set a limit here that doesn't look dumb */ max-height: 184px; } .discover-filters .tags .tag-list { position: relative; flex: 1 1 0px; } .discover-filters.blogs .tags .tag-list.branches { flex: 2 1 0px; } .discover-filters .dates h4 { margin: 0; font: 600 16px/23px 'DM Sans'; } .discover-filters .dates .after-before, .discover-filters .dates .after-before label { display: flex; align-items: center; gap: 10px; } .discover-filters.eresources .tagged-list .tag label:before { content: ''; position: absolute; width: 12px; height: 12px; left: 0px; top: 4px; clip-path: polygon(11.54% 0%, 50% 38.46%, 88.46% 0%, 100% 11.54%, 61.54% 50%, 100% 88.46%, 88.46% 100%, 50% 61.54%, 11.54% 100%, 0% 88.46%, 35.46% 50%, 0% 11.54%); background-color: var(--tag-border-color); } .discover-filters.eresources .tagged-list label { position: relative; cursor: pointer; padding-left: 6px; } .discover-filters.eresources .tagged-list label input { margin: 0; position: absolute; opacity: 0; height: 0; width: 0; } .discover-filters.eresources .tagged-list label .checkmark svg g { fill: transparent; } .discover-filters.eresources .tags .tag-list.subjects { flex: 6 1 0px; } .discover-filters .tags .tag-list:before { content: ''; display: block; position: absolute; width: 100%; height: 10px; bottom: -1px; left: 0; z-index: 1; background: var(--overflow-gradient); } .discover-filters .tags .tag-list .h4-like { font: 600 18px/23px 'DM Sans'; margin: 0; } .discover-filters .tag-scroll { max-height: 221px; /*overflow: scroll;*/ overflow-y: auto; overflow-x: hidden; } .discover-filters.blogs .tag-scroll { padding-bottom: 0px; } .eresources-section .discover-filters .tag-scroll { max-height: 131px; } .discover-filters ul li:last-child { padding-bottom: 5px; } .tag-list .audience-filter { align-items: unset; justify-content: unset; } .discover-filters ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0 0; } .discover-filters ul li { padding: 0; margin: 0; } .discover-filters ul li:before { content: unset; } .discover-filters ul li label { display: flex; gap: 5px; background-color: var(--body-bg-color); border: 1px solid var(--tag-border-color); padding: 4px 10px 4px 28px; border-radius: 20px; font: 400 15px/15px 'DM Sans'; cursor: pointer; } .discover-filters ul.letters-list li label { border-radius: 0; } .discover-filters ul.letters-list li label:has( input:checked) { border-bottom: 2px solid var(--font-body-color); font-weight: 900; } .discover-filters ul li.favorited:after { left: unset; right: 9px; top: 4px; } .discover-filters ul li.favorited label { padding-right: 27px; } .discover-filters ul li.favorited label:after { left: unset; right: 10px; top: 5px; } .discover-filters ul li label input { margin: 0; position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .discover-filters ul li label .checkmark { position: absolute; top: 6px; left: 10px; height: 14px; width: 14px; border: 1px solid var(--tag-border-color); border-radius: 2px; } .discover-filters ul li label input:checked ~ .checkmark { background-color: var(--tag-border-color); } .discover-filters ul li label input:checked ~ .checkmark svg g { fill: #FFFFFF; } .discover-filters ul li label .checkmark svg { margin: 3.5px 2.5px; } .discover-filters ul li label .checkmark svg g { fill: transparent; } /* place .pagination styles here */ .content-pagination { display: flex; gap: 12px; align-items: center; justify-content: center; width: 100%; } .all-books .content-pagination { width: 100%; } .content-pagination.hide { display: none; } .content-pagination > * { font: 400 16px / 23px 'DM Sans'; color: var(--font-body-color); opacity: .5; min-width: 14px; text-align: center; } .content-pagination a.active { opacity: 1; font-weight: 700; } .content-pagination a.link-prev, .content-pagination a.link-next { position: relative; display: block; width: 40px; height: 40px; background-color: var(--body-bg-color); border: 1px solid var(--tag-border-color); margin-right: 16px; opacity: 1; } .content-pagination a.link-next { transform: rotate(180deg); margin: 0 0 0 16px; } .content-pagination a.link-next.disabled, .content-pagination a.link-prev.disabled { opacity: .5; pointer-events: none; } .content-pagination a.link-prev:before, .content-pagination a.link-next:before { content: ''; position: absolute; width: 10px; height: 18px; left: 14px; top: 11px; clip-path: polygon(9px 0px, 10px 1px, 2px 9px, 10px 17px, 9px 18px, 0px 9px); background-color: #9BB9B7; } /* global style for .material-bio element(s) */ .material-bio { width: 100%; max-width: 119px; display: flex; flex-direction: column; align-items: center; } .material-bio .material-media { width: 100%; height: 182px; margin: 0 0 12px 0; display: flex; align-items: center; justify-content: center; } .material-bio .material-media .material-image { max-width: 100%; height: auto; box-shadow: -3px 7px 13px rgba(0,0,0,0.23); } .material-bio .material-media .material-image.default {/* "default" is used as a placeholder if the material item doesn't come with an image */ width: 100%; height: 100%; /*background-color: rgba(155,185,183,0.4);*/ display: block; } .material-bio .material-heading { width: 100%; max-height: 34px; margin: 0 0 5px 0; font-size: 14px; font-weight: 700; line-height: 17px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .material-bio .material-bio { width: 100%; max-height: 34px; font-size: 12px; font-weight: 400; line-height: 17px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--font-body-color); } /* global styles for the .personal-item elements *used mainly in the "For You" segment on the home page */ .personal-items { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; /*justify-content: space-between;*/ column-gap: 29px; row-gap: 29px; } .personal-item { width: calc(30% - 29px); max-width: 374px; /*max-width: 340px;*/ background-color: var(--body-bg-color); border: 0.5px solid var(--brand-border-color); border-radius: 40px; overflow: hidden; } .personal-item.forced-area { width: 100%; } .personal-item.sandbox {/* adding the "sandbox" class to this element should give you free rein to any content without the default styles getting in the way*/ /*width: 100%;*/ max-width: 374px; background-color: transparent; border: none; border-radius: initial; overflow: initial; } .personal-item .item-media { width: 100%; height: 192px; display: block; } .personal-item .item-media.has-image { background: var(--body-media-bg-color) no-repeat center; background-size: 95%; } .personal-item .item-content { width: 100%; padding: 22px 25px; } .personal-item .item-content .h3-like { margin-top: 0; } .personal-item .item-content p { color: var(--font-offset-color); font-size: 16px; line-height: 19px; } .personal-item .item-content p.detail { margin: 0 0 5px 0; display: flex; font-size: 15px; line-height: 18px; column-gap: 8px; align-items: center; } .personal-item .item-content p.detail .detail-icon { width: 15px; display: flex; align-items: center; } .personal-item .item-content a.button-like { margin: 15px 0 0 0; } .personal-item .item-content .item-buttons { position: relative; } .personal-item .item-content .booklist-books { width: 100%; margin: 0 0 25px 0; display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; } .personal-item .item-content .booklist-books .book { width: 100px; height: 157px; position: relative; } .personal-item .item-content .booklist-books .book.has-image { background: transparent no-repeat center; background-size: 100%; } .personal-item .item-content .booklist-books .book.blank { background-color: var(--blank-book-bg-color); opacity: 0.3; pointer-events: none; } .personal-item .quicklinks-paths { width: 100%; display: flex; flex-direction: column; row-gap: 18px; } .personal-item .quicklinks-paths a.path { width: 100%; margin: 0; padding: 25px 23px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 35px; color: var(--font-body-color); font-size: 23px; line-height: 24px; display: flex; align-items: center; justify-content: space-between; overflow: hidden;/* used to hide the edges of any skeleton pesudo elements */ } .personal-item .quicklinks-paths a.path svg { display: block; transform: translateX(0); transition: transform .3s; } .personal-item .quicklinks-paths a.path:hover svg { transform: translateX(5px); } /* global style the .eresource-item element *mainly used in the eresources segment on the home page. */ .eresource-item { width: 100%; } .eresource-item .item-media { width: 100%; /*height: 180px;*/ height: 166px; display: block; position: relative; } .eresource-item .item-media.has-media { background: transparent no-repeat center; /*background-size: 95%;*/ background-size: contain; background-color: var(--body-media-bg-color); } .eresource-item .item-content { width: 100%; padding: 17px 13px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); } .eresource-item .item-content .h3-like, .eresource-item .item-content h4 { margin: 0 0 5px 0; } .eresource-item .item-content p { margin: 0; color: var(--font-offset-color); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .eresource-item .item-content .eresource-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; position: relative; } .eresource-item .item-content a.item-show-more { margin: 4px 0 0 0; opacity: 0.75; color: var(--brand-alternate-color); display: block; transition: opacity .3s; } .eresource-item .item-content a.item-show-more:hover { opacity: 1; } /* global styles for the upcoming events segment; this is manily used on the home page */ .upcoming-events { width: 100%; } .upcoming-events .featured-event { width: 100%; display: flex; align-items: center; } .upcoming-events .featured-event .event-media { width: 100%; max-width: 725px; min-height: 455px; border: 0.4px solid var(--brand-border-color); border-radius: 5px; position: relative; z-index: 5; overflow: hidden; } .upcoming-events .featured-event .event-media.has-image { background: var(--body-media-bg-color) no-repeat center; background-size: 95%; /*background-size: cover;*/ } .upcoming-events .featured-event .event-content { width: calc(100% - 700px); margin: 0 43px 0 102px; position: relative; z-index: 1; } /*.upcoming-events .featured-event .event-content:before {*/ /* content: "";*/ /* width: 530px;*/ /* height: 530px;*/ /* background-color: var(--body-media-bg-color);*/ /* border-radius: 50%;*/ /* display: block;*/ /* position: absolute;*/ /* top: calc(50% - 265px);*/ /* left: calc(50% - 265px);*/ /* z-index: 1;*/ /* pointer-events: none;*/ /*}*/ .upcoming-events .featured-event .event-content p { margin-bottom: 19px; color: var(--font-body-color); } /* .upcoming-events .featured-event .event-content p.detail { margin-bottom: 5px; color: var(--font-offset-color); font-size: 16px; line-height: 19px; } */ .upcoming-events .featured-event .event-content p.detail { margin-bottom: 5px; color: var(--font-offset-color); font-size: 15px; line-height: 18px; display: flex; align-items: center; column-gap: 8px; } .upcoming-events .featured-event .event-content p.detail .detail-icon { width: 15px; display: flex; justify-content: center; } .upcoming-events .featured-event .event-content a.button-like { margin-top: 24px; /*box-shadow: 0 0 9px -6px var(--font-body-color);*/ } /*.upcoming-events .featured-event .event-content a.button-like:before {*/ /* box-shadow: 0 0 9px -6px var(--font-body-color);*/ /*}*/ .upcoming-events .featured-event .event-content .details { position: relative; z-index: 5; } .upcoming-events .featured-event .event-content .details h4 { margin-top: 0; } .upcoming-events .basic-events { width: 100%; margin: 58px 0 0 0; display: flex; column-gap: 30px; align-items: flex-start; position: relative; z-index: 10; } .upcoming-events .basic-events .event { width: 100%; max-width: 374px; padding: 30px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 20px; overflow: hidden; } .upcoming-events .basic-events .event .h3-like { margin: 0 0 11px 0; padding: 0 0 0 22px; font-family: 'Aleo', serif; font-size: 23px; font-weight: 500; line-height: 24px; display: block; position: relative; } .upcoming-events .basic-events .event .h3-like:before { content: ""; width: 12px; height: 12px; background-color: var(--font-link-color); border-radius: 50%; display: block; position: absolute; top: 5px; left: 0; } .upcoming-events .basic-events .event p { margin-bottom: 15px; color: var(--font-offset-color); font-size: 16px; line-height: 19px; } .upcoming-events .basic-events .event p.detail { margin-bottom: 8px; font-size: 15px; line-height: 18px; display: flex; align-items: center; column-gap: 5px; } .upcoming-events .basic-events .event p.detail .detail-icon { width: 15px; display: flex; justify-content: center; } .upcoming-events .basic-events .event a.button-like { margin-top: 10px; } /* global style for a list of books for a specific booklist; mainly used on the home page in the "Book Lists" segment */ .book-list { max-width: 425px; width: 100%; min-width: 175px; } .most-recent .book-list { flex-basis: calc((100% - 60px) / 2); } .book-list .book-list-books { width: 100%; margin: 0 0 20px 0; display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 10px; align-items: flex-start; } .book-list .book-list-books .book { width: 112px; height: 175px; position: relative; z-index: 1; transform: scale(1); transform-origin: 50% 50%; transition: transform .2s; } .book-list .book-list-books .book:hover {/* expand the book on hover */ transform: scale(1.2); z-index: 10; transition: transform .3s; } .book-list .book-list-books .book.blank {/* placeholder book; in case the booklist has less then 6 books showing */ background-color: var(--blank-book-bg-color); opacity: 0.3; pointer-events: none; } .book-list .book-list-books .book .book-link-area { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 10; } .book-list .book-list-books .book .book-link-area:after { opacity: 0; position: absolute; top: 0; right: 0; transform: scale(.75); transition: opacity .0s; } .book-list .book-list-books .book:hover .book-link-area:after { opacity: 1; transition: opacity .3s .1s; } .book-list .book-list-books .book .book-media { width: 100%; height: 100%; /*background-color: #F7F2AF;*/ /*background-color: var(--body-media-bg-color);*/ box-shadow: -3px 7px 13px rgba(0,0,0,0.23); display: block; transition: box-shadow .2s, transform .2s; position: relative; z-index: 1; } .book-list .book-list-books .book .book-media.has-image { background: transparent no-repeat center; background-size: cover; } .book-list .book-list-books .book:hover .book-media { box-shadow: -3px 7px 0 rgba(0,0,0,0); transform: scaleX(-1); transition: box-shadow .3s, transform .3s; } .book-list .book-list-books .book .book-info { width: 100%; height: 100%; padding: 5px; background-color: var(--body-media-bg-color); box-shadow: -3px 7px 0 rgba(0,0,0,0); opacity: 0; display: flex; align-items: center; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: hidden; transform: scaleX(-1); transform-origin: 50% 50%; transition: box-shadow .2s, transform .2s; } .book-list .book-list-books .book:hover .book-info { box-shadow: -3px 7px 23px rgba(0,0,0,0.23); opacity: 1; pointer-events: all; transform: scaleX(1); transition: box-shadow .3s, transform .3s; justify-content: center; } .book-list .book-list-books .book .book-info p { max-height: 156px; margin: 0; opacity: 0; color: var(--font-offset-color); font-size: 11px; line-height: 13px; text-align: center; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; transition: opacity .2s; overflow: hidden; } .book-list .book-list-books .book:hover .book-info p { opacity: 1; transition: opacity .3s .1s; } .book-list .book-list-subheader { margin: 0 0 10px 0; font-size: 15px; line-height: 20px; display: block; position: relative; } .book-list .book-list-subheader:before { content: ""; width: 12px; height: 12px; margin: 0 8px 0 0; background-color: var(--tag-border-color); display: inline-block; position: relative; } .book-list .h3-like { margin-top: 0; } /* global styles for booklists; mainly used on the booklists page */ .featured-filter { display: flex; margin-bottom: 20px; justify-content: space-between; align-items: center; } .featured-filter h2 { margin: 0; } .book-lists { display: none; } .book-lists.featured.active { display: block; } .featured-books, .all-books { display: none; } .featured-books.selected, .all-books.selected { display: block; } .all-books .original-results { display: flex; flex-wrap: wrap; gap: 40px; } .all-books .original-results .book-list { flex-basis: calc((100% - 80px) / 3); } .featured-books > div { display: flex; gap: 60px; flex-wrap: wrap; } .featured-title { margin: 50px 0 25px 0; } .book-lists .featured-list { display: flex; gap: 40px; } .book-lists .featured-list .book-list { flex-basis: calc((100% - 80px) / 3); } .book-list .book-list-books .book { flex-basis: calc((100% - 24px) / 3); aspect-ratio: 128 / 200; height: auto; } .book-list .book-list-books .book .book-info { align-items: initial; overflow: scroll; } .book-list .book-list-books .book .book-info .overflow { display: flex; flex-direction: column; align-items: center; justify-content: center; height: max-content; min-height: 100%; } .book-list .book-list-books .book .book-info p.title { width: 100%; max-height: 34px; margin-bottom: 5px; color: var(--font-body-color); font-size: 14px; font-weight: 700; line-height: 17px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .book-list .book-list-books .book .book-info p.author { width: 100%; max-height: 34px; margin-bottom: 5px; font-size: 12px; line-height: 17px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* global styles for booklist books; mainly used on the booklit books page */ /* booklist/booklist_books page */ .booklist-books .left-sidebar { max-width: 250px; } .booklist-books .body { width: calc(100% - 320px); } .booklist .books-list { display: flex; flex-wrap: wrap; gap: 25px; } .booklist .books-list .intro { width: 100%; } .booklist .books-list .book { position: relative; width: calc((100% - 100px) / 5); aspect-ratio: 2/3; height: auto; z-index: 1; transform: scale(1); transform-origin: 50% 50%; transition: transform .2s; } .booklist .books-list .book:hover { transform: scale(1.2); z-index: 10; transition: transform .3s; } .booklist .books-list .book .book-link-area { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; } .booklist .books-list .book .book-media { display: block; position: relative; width: 100%; height: 100%; background-color: #DEE5E5; box-shadow: -3px 7px 13px rgba(0,0,0,0.23); z-index: 1; transition: box-shadow .2s, transform .2s; } .booklist .books-list .book:hover .book-media { box-shadow: -3px 7px 0 rgba(0,0,0,0); transform: scaleX(-1); transition: box-shadow .3s, transform .3s; } .booklist .books-list .book .book-info { position: absolute; display: flex; width: 100%; height: 100%; padding: 10px; background-color: var(--body-media-bg-color); box-shadow: -3px 7px 0 rgba(0, 0, 0, 0); opacity: 0; top: 0; left: 0; z-index: 1; pointer-events: none; transform: scaleX(-1); transform-origin: 50% 50%; transition: box-shadow .2s, transform .2s; overflow: scroll; } .booklist .books-list .book:hover .book-info { box-shadow: -3px 7px 23px rgba(0,0,0,0.23); opacity: 1; pointer-events: all; transform: scaleX(1); transition: box-shadow .3s, transform .3s; } .booklist .books-list .book .book-info .overflow { display: flex; flex-direction: column; align-items: center; justify-content: center; height: max-content; min-height: 100%; } .booklist .books-list .book .book-info p { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; max-height: 156px; margin: 0; opacity: 0; color: var(--font-offset-color); font-size: 11px; line-height: 13px; text-align: center; transition: opacity .2s; overflow: hidden; } .booklist .books-list .book .book-info p.title { font: 600 15px/18px 'Aleo'; color: var(--font-body-color); margin-bottom: 5px; } .booklist .books-list .book .book-info p.author { margin-bottom: 5px; } .booklist .books-list .book:hover .book-info p { opacity: 1; transition: opacity .3s .1s; } /* filtered booklists */ .book-lists.filtered { flex-wrap: wrap; gap: 40px; } .book-lists.filtered.active { display: flex; } .book-lists.filtered .results { display: flex; flex-wrap: wrap; gap: 40px; } .book-lists.filtered .book-list { display: inline-block; flex-basis: calc((100% - 80px) / 3); flex-direction: column; } .book-lists.filtered .book-list.hide { display: none; } .filtered-results .content-pagination a, .book-lists.filtered .content-pagination a { cursor: pointer; } /* bucket styles */ .promotion-segment { width: 100%; margin: 0 50px 0 0; display: flex; align-items: flex-start; /*justify-content: flex-end;*/ justify-content: center; } .promotion-segment .segment-media-column { width: 100%; max-width: 724px; } .promotion-segment .segment-media-column .media { width: 100%; background-color: var(--body-media-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 5px; display: block; } .promotion-segment .segment-media-column .media.default {/* placeholder style */ min-height: 455px; } .promotion-segment .segment-content-column { width: 100%; max-width: 246px; margin: 70px 0 0 70px; position: relative; } .promotion-segment .segment-content-column:before { content: ""; width: 520px; height: 520px; background-color: var(--body-media-bg-color); border-radius: 50%; display: block; position: absolute; top: calc(50% - 260px); left: calc(50% - 260px); pointer-events: none; } .promotion-segment .segment-content-column .h2-like { margin: 0 0 12px 0; font-size: 30px; line-height: 32px; } .promotion-segment .segment-content-column p { margin: 0; color: var(--font-body-color); } .promotion-segment .segment-content-column a.button-like { margin-top: 15px; } .promotion-segment .segment-content-column .content { width: 100%; position: relative; } .eresources-section { width: 100%; } .eresources-section .filters { background-color: var(--body-bg-color); border-radius: 34px; border: 1px solid var(--brand-border-color); padding: 20px 30px; margin-top: 25px; } .eresources-section .eresource-types { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 15px 25px; margin: 0 0 20px 0; } .eresources-section .eresource-types li { margin: 0; position: relative; padding: 0; } .eresources-section .eresource-types li:before { display: none; } .eresources-section .eresource-types li a { background-color: transparent; color: var(--font-link-color); font-size: 14px; line-height: 14px; font-weight: 400; text-decoration: none; cursor: pointer; padding-left: 20px; position: relative; } .eresources .eresources-section .eresource-types li a { padding-left: 0; } .page-content .body .booklists .column-two { margin-top: 25px; width: unset; } /* global styles for eresources; mainly used on the eresources page */ .eresources-section .eresource-types li a svg { position: absolute; left: 0; top: 0; } .eresources-section .eresource-types li a:hover, .eresources-section .eresource-types li.active a { border-bottom: 2px solid var(--filter-underline-color); } .eresources-section .eresource-types li a:after { display: none; } .eresources-section .eresource-types li.active a { pointer-events: none; } .eresources-section .letters { margin: 25px 0 0 0; } .eresources-section h5 { margin: 0; font: 600 16px/23px 'DM Sans'; } .eresources-section .letters-list { width: 100%; margin: 0; padding: 15px 0 0 0; box-sizing: border-box; display: flex; justify-content: space-between; } .eresources-section .letters-list li { margin: 0; padding: 0; opacity: .25; pointer-events: none; } .eresources-section .letters-list li.active { opacity: 1; pointer-events: all; } .eresources-section .letters-list li:last-of-type { margin: 0; } .eresources-section .letters-list li:before { display: none; } .eresources-section .letters-list li label { background-color: transparent; border: unset; padding: 0; text-transform: uppercase; } .eresources-section .letters-list li label .checkmark { width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } .eresources-section .letters-list li a { font: 500 15px/15px 'DM Sans'; color: var(--font-link-color); opacity: 0.3; pointer-events: none; cursor: pointer; text-decoration: none; } .eresources-section .letters-list li.active a { opacity: 1; pointer-events: all; } .eresources-section .letters-list li a:hover, .eresources-section .letters-list li.toggled a { color: var(--power-color-3); } .eresources-section .letters-list li a:after { display: none; } .eresources-section .eresource-entities { width: 100%; display: none; flex-wrap: wrap; gap: 25px; } .eresources-section .eresource-entities.active { display: flex; } .eresources-section .eresource-entities .eresource { box-sizing: border-box; align-items: flex-start; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); padding: 0; width: calc((100% - 50px) / 3); display: flex; flex-direction: column; } .eresources-section .eresource-entities .eresource.active { display: flex; } .eresources-section .eresource-entities .eresource .eresource-media { width: 100%; border-bottom: 1px solid var(--brand-border-color); margin: 0; /*aspect-ratio: 572/360;*/ aspect-ratio: 30/19.1; height: auto; background-size: contain; background-repeat: no-repeat; background-position: center; } .eresources-section .eresource-entities .eresource .eresource-media.placeholder.default { background-size: auto; } .eresources-section .eresource-entities .eresource .eresource-media.placeholder { display: block; width: 100%; height: auto; } .eresources-section .eresource-entities .eresource .eresource-name { color: var(--font-body-color); text-decoration: none; width: 100%; margin: 16px 0 10px 0; padding: 0 15px; font: 500 23px/24px 'Aleo'; cursor: pointer; } .eresources-section .eresource-entities .eresource .eresource-buttons { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 13px 10px 13px; } /* .body .eresources-section a[href*="//"]:not(.skip-offsite):not([href*="cedarburg.digitalbranch.org/"]):after { background-image: url('/content/_theme_images/icon_offsite_link_black.png'); } */ .eresources-section .eresource-entities .eresource .eresource-description { width: 100%; padding: 0 15px; margin: 0 0 10px 0; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; display: -moz-box; font: 400 16px/19px 'DM Sans'; color: var(--font-offset-color); } .eresources-section .eresource-entities p.no-results { display: none; } .eresources-section .eresource-entities p.no-results.show { display: inline-block; } /* global styles for eresources overlay */ .main-content:has( #eresource_overlay) { z-index: 30; } .main-content .body:has( #eresource_overlay) { z-index: 11; } .eresource-overlay { position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; z-index: 100; } .eresource-overlay .clickable-background { display: block; width: 100%; height: 100%; background-color: var(--background-3); opacity: .75; cursor: pointer; } .eresource-overlay .container { position: absolute; width: 800px; /*height: calc(100vh - 50px);*/ max-width: calc(100vw - 50px); max-height: calc(100vh - 50px); transform: translate(-50%, -50%); left: 50%; top: 50%; background-color: var(--body-offset-bg-color); border: 1px solid rgba(26,70,79,.27); border-radius: 50px; padding: 25px 25px 0px 25px; overflow-y: scroll; overflow-x: hidden; } .eresource-overlay .close { display: block; position: absolute; width: 20px; height: 20px; right: 25px; top: 25px; cursor: pointer; } .eresource-overlay .container .content { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; padding-bottom: 25px; } .eresource-overlay .main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; } .eresource-overlay .container .main .eresource-name { margin-right: 0; padding-right: 45px; } .eresource-overlay .container .main .main-image { width: 300px; border: 1px solid rgba(26,70,79,.27); border-radius: 10px; } .eresource-overlay .container .main .main-image > * { border-radius: 9px; } .eresource-overlay .container .main .primary.visit, .eresource-overlay .container .main .primary.visit:before { background-color: var(--button-secondary-bg-color); } .eresource-overlay img { display: block; } .eresource-overlay .eresource-media { display: block; width: 100%; height: auto; background-size: cover; background-position: center; } .eresource-overlay .eresource-media.default { background-size: auto; aspect-ratio: 572/360; } .eresource-overlay .eresource-name { display: block; width: 100%; font: 500 23px/24px 'Aleo'; margin: 0px 0px 5px 0px; text-decoration: none; } .eresource-overlay .description-button { flex: 1 1 0px; } .eresource-overlay .eresource-description { font: 400 16px/19px 'DM Sans'; margin-bottom: 10px; } .eresource-overlay .related-container { width: calc(100% + 25px); overflow-x: scroll; padding-bottom: 5px; } .eresource-overlay .related-title { font: 500 20px/20px 'Aleo'; color: var(--font-link-color); opacity: .8; margin: 0 0 5px 0; } .eresource-overlay .related-eresources { display: flex; justify-content: flex-start; gap: 15px; } .eresource-overlay .related-eresources .related { flex: unset; width: calc((100% - 30px) / 3); max-width: 275px; min-width: 225px; opacity: .8; } .eresource-overlay .related-eresources .related:last-child { box-sizing: content-box; padding-right: 25px; } .eresource-overlay .related-eresources .related:hover { opacity: 1; } .eresource-overlay .related-eresources .related .image { width: 100%; border: 1px solid rgba(26,70,79,.27); border-radius: 10px; margin-bottom: 5px; } .eresource-overlay .related-eresources .related .image > * { border-radius: 9px; } .eresource-overlay .related-eresources .related .eresource-name { font: 500 16px/17px 'Aleo'; cursor: pointer; } .eresource-overlay .related-eresources .related p { font: 400 14px/17px 'DM Sans'; color: var(--font-offset-color); overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } /* global styles for blogs; mainly used on the blog page */ .blog-post .left-sidebar { max-width: 350px; } .blog-post .body { width: calc(100% - 400px); margin-top: 69px; } .blog-posts { width: 100%; } .blog-posts.landing-page { margin: 0; } .blog-posts .original-results.hide, .blog-posts .filtered-results.hide { display: none; } .blog-posts .post { width: 100%; margin: 0 0 50px 0; display: flex; align-items: flex-start; gap: 35px; } .blog-post-label, .blog-info .date { opacity: 1; letter-spacing: 0.2px; font: var(--paragraph-font); } .blog-post-blurb { letter-spacing: 0.2px; opacity: 1; -webkit-font-smoothing: antialiased; } .blog-posts .post .post-media { width: 50%; /*max-width: 506px;*/ /*max-width: 440px;*/ height: 250px; margin: 0; box-sizing: border-box; background-repeat: no-repeat; background-size: auto; background-position: center; display: block; position: relative; } .blog-posts .post .post-media .media { width: 100%; height: 100%; background-size: cover; background-position: top center; border-radius: 5px; display: block; /*position: absolute;*/ top: 0; left: 0; } .blog-posts .post .post-media.placeholder { background-color: var(--power-color-1); background-image: url(/content/_theme_images/logo_wht.svg); background-position: center; background-size: 40%; width: 50%; border-radius: 5px; } .blog-posts .post .post-content { /*flex: 1;*/ width: 50%; } .blog-posts.recommended-reads .post .post-media { width: calc(50% - 100px); } .blog-posts.recommended-reads .post .post-media .media { background-size: contain; background-repeat: no-repeat; background-position: center; } .blog-posts.recommended-reads .post .post-content { width: calc(50% + 100px); } .blog-posts .post .post-title { max-width: none; margin: 0; display: block; font: 600 27px / 32px 'Aleo'; color: var(--font-body-color); letter-spacing: 0; text-decoration: none; } .blog-posts .post .post-info { margin: 15px 0 0 0; display: flex; flex-direction: column; } .blog-posts .post .post-info span { position: relative; font: 400 16px/19px 'DM Sans'; color: var(--font-offset-color); padding: 0; margin: 0; } .blog-posts .post .post-info span.author:before { background-image: url('/content/_theme_images/icon_pen.svg'); } .blog-posts .post .post-description { margin: 10px 0 15px 0; font: 400 18px/23px 'DM Sans'; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-posts .post .button-like.third-about { width: 100%; } .blog-posts .post .post-about { width: 100%; max-width: 250px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 20px; padding: 30px; float: right; margin: 0 0 35px 35px; } .blog-posts .post .post-about .heading { margin: 0 0 6px 0; /*color: #484848;*/ display: block; font: 600 20px/22px 'Aleo'; } .blog-posts .post .post-about .author, .blog-posts .post .post-about .date { position: relative; padding: 0 0 0 20px; margin-top: 5px; font: 400 16px / 20px 'DM Sans'; color: var(--font-offset-color); } .blog-posts .post .post-about .author svg { position: absolute; left: 0; top: 2px; } .blog-posts .post .post-about .author a { font-weight: 500; } .blog-posts .post .post-about .date:before { background-image: url('/content/_theme_images/icon_calendar.svg'); } .blog-posts .post .post-about .tags { margin: 14px 0 0 0; } .blog-posts .post .post-about .tags .tag-heading { margin: 0 0 10px 0; color: #4C4C4C; font: var(--small-header-font); display: block; } .blog-posts .post .post-about .tags ul.tag-list { width: 100%; display: flex; flex-wrap: wrap; margin: 0; } .blog-posts .post .post-about .tags ul.tag-list li { margin: 0 7px 7px 0; padding: 0; } .blog-posts .post .post-about .tags ul.tag-list li:before { display: none; } .blog-posts .post .post-about .tags ul.tag-list li a.tag { box-sizing: border-box; border-radius: 16px; text-decoration: none; display: inline-block; font: 400 15px/15px 'DM Sans'; color: var(--font-link-color); padding: 5px 10px; background-color: var(--body-bg-color); border: 1px solid var(--tag-border-color); } .blog-posts .post .post-about .tags ul.tag-list li a.tag:after { display: none; } /* - odd edits - */ .blog-posts .post:nth-child(2n+1) .post-media { margin: 0; order: 1; } .blog-posts .post:nth-child(2n+1) .post-content { order: 0; } /* - first of type edits - */ .blog-posts .post.first { margin: 0 0 50px 0; display: block; } .blog-posts .post.first .post-media { max-width: none; height: 350px; width: 100%; margin: 0; } .blog-posts .post.first .post-content { width: 100%; } .blog-posts .post.first .post-title { margin: 14px 0 0 0; font: var(--primary-header-font); color: var(--header-1); } /* - main edits - */ .blog-posts .post.main { display: block; } .blog-posts .post.main .post-media { width: 350px; position: absolute; left: -400px; top: 5px; } .blog-posts .post.main .post-content { margin: 0; display: inline-block; align-items: flex-start; justify-content: space-between; width: 100%; } /* - blogs page - */ .blog-posts .discover-filters .tags .tag-list.subjects { flex: 2 1 0px; } /* - blog filters - */ .blog-posts .post.hide { display: none; } /* - blog tags / blog authors - */ .blog-tag .left-sidebar { max-width: 250px; } .blog-tag .body { width: calc(100% - 320px); } /* - blog post page - */ .blog-post .alignright, .fusion-alignright {/* from previous site - things for the old wordpress import */ display: inline; float: right; margin: 15px 0 15px 15px; } .blog-post .blog-posts .post .post-about .author a, .blog-posts .post .post-about .date a { color: var(--font-offset-color); } .blog-post .blog-posts p.no-results.hide { display: none; } .blog-post .related-posts .posts-list { display: flex; gap: 30px; } .blog-post .related-posts .posts-list .post { margin: 0; padding: 0; flex-direction: column; gap: 0; } .blog-post .related-posts .posts-list .post:before { content: unset; } .blog-post .related-posts .posts-list .post .img { width: 100%; height: 200px; border-radius: 40px 40px 0 0; } .blog-post .related-posts .posts-list .post .text { background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-top: unset; border-radius: 0 0 40px 40px; padding: 20px 20px 30px 20px; } .blog-post .related-posts .posts-list .post .text h3 { font: 500 23px/24px 'Aleo'; margin-bottom: 5px; } .blog-post .related-posts .posts-list .post .text .date { display: flex; gap: 5px; } .blog-post .related-posts .posts-list .post .text p { font: 400 16px/19px 'DM Sans'; color: var(--font-offset-color); margin-bottom: 10px; } /* - global styles for the staff; mainly used for the staff page(s) - */ .staff-segment { width: 100%; } .main-content.staff .staff-segment { position: relative; width: calc(100% - 330px); padding-bottom: 188px; } .main-content.staff .staff-segment .blob.b2 { top: 20px; right: -425px; transform: scaleY(-2) scaleX(2) rotate(-69deg); z-index: -1; } .staff-segment .staff-info { width: 100%; } .staff-segment .staff-info .staff-detail { display: flex; font-size: 18px; line-height: 20px; align-items: center; column-gap: 10px; } .staff-segment .staff-info .staff-detail .detail-icon { width: 18px; display: flex; justify-content: center; } .staff-segment .staff-items { width: 100%; margin: 0 0 35px 0; display: flex; flex-wrap: wrap; column-gap: 25px; row-gap: 25px; } .staff-segment .staff-items .item { width: 100%; max-width: 275px; border: 0.4px solid var(--brand-border-color); border-radius: 40px; background-color: var(--body-bg-color); } .staff-segment .staff-items .item .item-media { width: 100%; height: 180px; border-radius: 40px 40px 0 0; display: block; } .staff-segment .staff-items .item .item-media.has-image { background: var(--body-media-bg-color) no-repeat center; background-size: cover; } .staff-segment .staff-items .item img { max-width: 100%; } .staff-segment .staff-items .item p { margin: 0 0 16px 0; font-size: 16px; line-height: 19px; } .staff-segment .staff-items .item p.item-details { margin: 0 0 5px 0; color: var(--font-offset-color); font-size: 14px; line-height: 16px; display: flex; column-gap: 10px; align-items: center; } .staff-segment .staff-items .item p.item-details .detail-icon { width: 15px; display: flex; align-items: center; justify-content: center; } .staff-segment .staff-items .item .item-content { padding: 25px 25px 35px 25px; } .staff-segment .staff-items .item .item-content .h3-like { margin: 0 0 8px 0; font-size: 23px; line-height: 24px; } .staff-segment .staff-items .item .item-content a.button-like { margin: 15px 0 0 0; } .staff-fav-books { box-sizing: content-box; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--body-media-bg-color); width: 400px; height: 400px; max-width: 400px; aspect-ratio: 1; border-radius: 50%; position: absolute; top: calc(100% - 200px); right: -50px; /*padding: 25px 37px;*/ } .staff-fav-books:before { content: ""; width: 350px; height: 350px; background-color: var(--body-media-bg-color); border-radius: 50%; display: block; position: absolute; top: calc(50% - (350px / 2)); left: calc((50% - (350px / 2))); z-index: 1; } .staff-fav-books h4 { width: 100; margin: 0 0 20px 0; text-align: center; position: relative; z-index: 5; } .staff-fav-books .swiper { z-index: 5; } .staff-book { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 5; } .staff-book .book-media { width: 97px; height: 147px; display: flex; align-items: center; justify-content: center; } .staff-book .book-media .media-image { max-width: 100%; } .staff-book .book-media .media-image.default { width: 100%; height: 100%; background-color: rgba(155,185,183,0.4); border: 0.4px solid var(--brand-border-color); display: block; } .staff-book .h2-like { margin: 20px 0 5px 0; font-size: 24px; line-height: 26px; text-align: center; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .swiper-slide .staff-book { opacity: 0; pointer-events: none; transition: opacity .3s; } .swiper-slide-active .staff-book { opacity: 1; pointer-events: all; } .staff-questions { /*width: calc(100% + 275px);*/ width: calc(100% + 150px); display: flex; justify-content: space-between; position: absolute; top: 100%; left: -150px; } .staff-questions .question { max-width: 300px; height: 325px; color: var(--font-body-color); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .5s, max-width .5s; } .staff-questions .question:first-of-type { max-width: 350px; transform: translate(-20px, 130px); } .staff-questions .question:nth-of-type(2) { max-width: 350px; transform: translate(-100px, 395px); } /*.staff-questions .question:before {*/ /* content: "";*/ /* width: 325px;*/ /* height: 325px;*/ /* background-color: var(--body-offset-bg-color);*/ /* border-radius: 50%;*/ /* display: block;*/ /* position: absolute;*/ /* top: calc(50% - (325px / 2));*/ /* left: calc(50% - (325px / 2));*/ /* z-index: 1;*/ /*}*/ .staff-questions .question h4 { margin-top: 0; margin-bottom: 10px; text-align: center; } .staff-questions .question p { margin: 0 0 5px 0; font: 500 31px/36px 'Aleo'; text-align: center; } .staff-questions .question .question-content { position: relative; z-index: 5; } /* - individual staff member - */ .secondary.staff .page-content .body .staff-info h2 { font: 500 30px/36px 'Aleo'; margin: 0 0 15px 0; } .secondary.staff .page-content .body .staff-info .h3-like { font: 600 17px/20px 'Aleo'; } .secondary.staff .page-content .body .staff-info .h4-like { margin: 0 0 15px 0; font-weight: 700; } .secondary.staff .page-content .body .staff-info p { margin: 0 0 5px 0; } .secondary.staff .page-content .body .large-background-blob { z-index: -2; bottom: -140px; left: calc(50% - 137.5px); } .page-banner .banner-content .blob.b1 { transform: translate(7%, 25%); left: unset; right: 0px; top: unset; bottom: 0px; width: 840px; max-width: unset; z-index: -1; } .page-banner .banner-content .blob.b2 { width: 234px; left: -500px; bottom: -250px; } .secondary.staff .page-banner .banner-content .blob.b1 { right: unset; left: 0; bottom: 0; transform: translate(-52%, 27%); } /* - secondary landing pages, secondary blobs - */ .secondary-background-blobs { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100vw; max-width: 1920px; min-height: calc(100% + 200px); top: -200px; left: 50%; transform: translateX(-50%); overflow: hidden; } .secondary-background-blobs .large-background-blob { position: unset; top: unset; bottom: unset; left: unset; transform: unset; } .secondary-background-blobs .large-background-blob { bottom: unset; top: 0; } .secondary-background-blobs .large-background-blob.g2 { top: 1700px; } .secondary-background-blobs .large-background-blob.g3 { top: unset; bottom: -1250px; } .secondary .body .blob, .tertiary .body .blob { transform: translate(27%, 31%); width: 750px; top: unset; left: unset; bottom: -150px; right: 95%; z-index: -1; } .secondary.staff-list .body .blob.b1 { right: unset; left: 0; bottom: 0; transform: translate(-65%, 45%); } .tertiary .body .blob { transform: translate(20%, 25%); } .tertiary .body .blob.b1 { bottom: 0; right: unset; left: 0; transform: translate(-65%, 46%); } .tertiary.blog-post .body .blob.b1 { transform: translate(-80%, 30%); } .tertiary.blog-post .body .blob.b2 { bottom: -250px; right: calc(100% + 400px); } .tertiary.blog-post .body .blob.b3 { bottom: -150px; } .secondary .body .blob.b2, .tertiary .body .blob.b2 { width: 234px; bottom: -220px; right: calc(100% + 320px); } .secondary .body .blob.b3, .tertiary .body .blob.b3 { width: 450px; bottom: -250px; right: -150px; transform: rotate(20deg); } /* - tertiary pages, tertiary blobs - */ .tertiary .body h1 { position: relative; } .tertiary-background-gradient, .blob-gradient { position: absolute; width: 100vw; max-width: 1920px; height: 1000px; top: -200px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(244, 244, 244, 1) 0%, rgba(255, 255, 255, 1) 100%); } body.dark-mode .tertiary-background-gradient, body.dark-mode .blob-gradient { background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(18, 18, 18, 1) 100%); } .tertiary-background-blobs, .footer-blobs { position: absolute; width: 100vw; max-width: 1920px; height: 500px; bottom: 0; left: 50%; transform: translateX(-50%); } .footer-blobs.staff { height: 851px; } .lib-overlay { width: 100vw; height: 100vh; display: none; position: fixed; top: 0; left: 0; z-index: 1000; } .lib-overlay.active { display: block; min-height: 300px; } .overlay-content .already-registered-note{ border: 1px solid red; padding: 5px; border-radius: 5px; } .overlay-content .already-registered-note i { color: red; } .lib-overlay .overlay-content a.back-button { width: 31px; height: 31px; background-image: url('/content/_theme_images/icon_button_arrow.svg'); background-repeat: no-repeat; background-size: cover; position: absolute; top: 21px; left: 21px; z-index: 20; transform: rotate(180deg); transition: opacity .3s; } .lib-overlay .overlay-content a.back-button:after { display: none; } .lib-overlay .overlay-content.step-one a.back-button { opacity: 0.4; pointer-events: none; } .lib-overlay .overlay-content.step-three a.back-button { opacity: 0; pointer-events: none; } .lib-overlay a.button-like { margin: 10px 0 0 0; } .lib-overlay a.close-icon { display: block; position: absolute; top: 25px; right: 25px; width: 25px; height: 25px; z-index: 20; background-color: transparent; } .lib-overlay a.close-icon:before { position: absolute; content: ''; width: 100%; height: 100%; clip-path: polygon(calc(0%) calc(0% + 1px), calc(0% + 1px) calc(0%), calc(50%) calc(50% - 1px), calc(100% - 1px) calc(0%), calc(100%) calc(0% + 1px), calc(50% + 1px) calc(50%), calc(100%) calc(100% - 1px), calc(100% - 1px) calc(100%), calc(50%) calc(50% + 1px), calc(0% + 1px) calc(100%), calc(0%) calc(100% - 1px), calc(50% - 1px) calc(50%)); background-color: #000000; } .lib-overlay input[type="text"], .lib-overlay input[type="password"], .lib-overlay input[type="email"] { width: 100%; margin: 0 0 10px 0; padding: 5px 13px; box-sizing: border-box; border: 1px solid #CFCFCF; border-radius: 5px; font: var(--paragraph-font); display: block; } .lib-overlay input[type="text"]::placeholder { color: #999999; } .lib-overlay .password-input { width: 100%; position: relative; } .lib-overlay .password-input .show-hide-password { position: absolute; top: 5px; right: 0; } .lib-overlay .password-input.password-shown .show-hide-password { top: 0; } .lib-overlay .password-input .show-hide-password .hide-password, .lib-overlay .password-input.password-shown .show-hide-password .show-password { display: none; } .lib-overlay .password-input.password-shown .show-hide-password .hide-password { display: inline-block; } .lib-overlay .password-input .show-hide-password .hide-password, .lib-overlay .password-input .show-hide-password .show-password { padding: 5px 10px; /* background-color: red; */ border-radius: 5px; color: #999; } .lib-overlay form .success-message { display: none; } .lib-overlay form.form-submitted .success-message { display: block; } .lib-overlay form.form-submitted input, .lib-overlay form.form-submitted label, .lib-overlay form.form-submitted .password-input, .lib-overlay form.form-submitted .custom-radio, .lib-overlay form.form-submitted button, .lib-overlay form.form-submitted a.button-like { display: none; } .lib-overlay .additional-form-fields { width: 100%; margin: 0 0 20px 0; } .lib-overlay .additional-form-fields .add-new-field { font: var(--small-header-font); text-decoration: none; } .lib-overlay .additional-form-fields .add-new-field:before { content: ""; width: 20px; height: 20px; margin: 0 8px 0 0; background-image: url('/content/_theme_images/icon_plus.svg'); background-repeat: no-repeat; background-size: cover; opacity: 0.8; display: inline-block; position: relative; top: 4px; transition: opacity .3s; } .lib-overlay .additional-form-fields .add-new-field:after { display: none; } .lib-overlay .additional-form-fields .add-new-field:hover:before { opacity: 1; } .lib-overlay .overlay-bkgd { width: 100%; height: 100%; background-color: #00000065; opacity: 0.6; position: absolute; top: 0; left: 0; } .lib-overlay .overlay-content { max-width: 863px; width: calc(100vw - 20px); /* JS - changed the height to max and added a percent-based value and top values so it works better in shorter screens */ max-height: 709px; height: calc(100vh - 20px); padding: 50px; box-sizing: border-box; background-color: var(--background-1); border: 0.5px solid var(--secondary-architecture); position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; z-index: 5; /* overflow: scroll; */ flex-direction: column; margin: 0; font: var(--paragraph-font); } .lib-overlay .overlay-content .overlay-step { width: 100%; height: 100%; padding: 38px 38px 51px 38px; padding: clamp(10px, 3.5%, 35px) ; box-sizing: border-box; background-color: var(--background-3); border: 0.5px solid #A3A3A3; display: none; position: relative; z-index: 15; overflow: auto; } .lib-overlay .overlay-content.step-one .overlay-step.one, .lib-overlay .overlay-content.step-two .overlay-step.two, .lib-overlay .overlay-content.step-three .overlay-step.three { display: block; } .lib-overlay .overlay-content .overlay-columns { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 15; } .lib-overlay .overlay-content .column.form { width: 100%; max-width: 363px; display: flex; flex-direction: column; } .lib-overlay .overlay-content .column a.button-like { margin: 15px 0 0 0; } .lib-overlay .overlay-content .column a.button.dropdown, .lib-overlay .overlay-content .column a.button-like.dropdown { margin: 0; } .lib-overlay .overlay-content .column .form-flex { width: 100%; display: flex; justify-content: space-between; } .lib-overlay .overlay-content .column .form-text-fields { display: flex; flex-direction: column; } .lib-overlay .overlay-content .column .form-half-field { width: 48%; display: inline-block; } .lib-overlay .overlay-content .column .form-field-remove { padding: 29px 0 0 5px; box-sizing: border-box; display: inline-block; } .lib-overlay .overlay-content .column .form-radio-option { display: flex; position: relative; } .lib-overlay .overlay-content .column .form-radio-option input { width: 16px; height: 16px; margin: 0 6px 0 0; opacity: 0; } .lib-overlay .overlay-content .column .form-radio-option .custom-radio { width: 16px; height: 16px; background-color: var(--background-1); border: 1px solid var(--font-offset-color); border-radius: 3px; display: block; position: absolute; top: calc(50% - 10px); left: 0; } .lib-overlay .overlay-content .column .form-radio-option .custom-radio:before { content: ""; width: 8px; height: 8px; background-color: var(--background-1); border-radius: 3px; opacity: 0.8; display: block; position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); } .lib-overlay .overlay-content .column .form-radio-option input:checked ~ .custom-radio { background-color: #2196F3; } .lib-overlay .overlay-content .column.sign-in { width: 100%; max-width: 361px; padding: 30px; box-sizing: border-box; background-color: var(--background-1); border-top: 5px solid #2489AF; display: flex; flex-direction: column; } .lib-overlay .overlay-content .column.sign-in.alt { padding: 13px; border-top: 5px solid #2489AF; } .lib-overlay .overlay-content .column.sign-in.hidden { display: none; } .lib-overlay .overlay-content .column.sign-in .sign-in-content { padding: 18px 20px; box-sizing: border-box; } .lib-overlay .overlay-content .column.sign-in h4 { margin: 0 0 15px 0; } .lib-overlay .overlay-content .column.sign-in a.button-like, .lib-overlay .overlay-content .column.sign-in button { margin: 15px 0 12px 0; } .lib-overlay .overlay-content .column.sign-in a.button-like.social { margin: 0; } .lib-overlay .overlay-content .column.form.center { max-width: 417px; margin: 0 auto; align-items: center; } .lib-overlay .overlay-content .column.form.center form { width: 100%; } .lib-overlay .overlay-content .column.form.center form { width: 100%; } .lib-overlay .overlay-content .column.sign-in.center { max-width: 417px; /* margin: 22px 0 0 0; */ margin: 22px auto 0 auto; padding: 16px 21px; } .lib-overlay .overlay-content .column.center { margin: 22px 0 0 0; display: flex; align-items: center; justify-content: center; gap: 5px; } .lib-overlay ul li { font: var(--paragraph-font); } .lib-overlay .disclaimer { margin: 0 0 5px 0; color: #707070; font: var(--paragraph-font); display: block; } /* edits for the bucket version of the lib-overlay */ .lib-overlay.bucket-overlay .overlay-content { max-height: 300px; padding: 40px 30px; background-color: var(--body-offset-bg-color); border: 1px solid var(--brand-border-color); border-radius: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); font: inherit; } .lib-overlay.bucket-overlay .overlay-bkgd { background-color: var(--body-offset-bg-color); } .lib-overlay.bucket-overlay a.close-icon:before { display: none; } .left-sidebar { width: 100%; max-width: 205px; position: relative; z-index: 10; --height-offset: 43px; } .left-sidebar a.return-to { display: inline-block; font: 700 12px/14px 'DM Sans'; letter-spacing: .43px; text-transform: uppercase; color: var(--button-color); background-color: var(--body-bg-color); padding: 10px 17px; border-radius: 20px; margin-left: 35px; } .left-sidebar a.return-to:before { content: ''; display: inline-block; position: absolute; width: 35px; height: 35px; left: 0; top: 0; border-radius: 20px; background-color: var(--body-bg-color); background-image: var(--button-icon); background-size: 8px; background-position: calc(50% + 1.5px) calc(50% - .5px); transform: rotate(180deg); transition: all .5s; background-repeat: no-repeat; } /* return to buttons */ .left-sidebar a.return-to { padding: 11px 17px 10px 17px; transition: left .5s, border-radius .5s; } @keyframes return-button-hover { 0% {left: 0px; border-radius: 20px 20px 20px 20px;} 65% {left: 21px; border-radius: 0px 20px 20px 0px; width: 30px;} 100% {left: 15px; border-radius: 0px 20px 20px 0px;} } .left-sidebar a.return-to:hover:before { animation-name: return-button-hover; animation-duration: .5s; animation-timing-function: ease-in; left: 15px; border-radius: 0 20px 20px 0; } .left-sidebar .context-nav { width: 100%; max-width: 204px; padding: 40px 25px 35px 25px; box-sizing: border-box; border: 1px solid var(--brand-border-color); background-color: var(--body-bg-color); border-radius: 34px; position: relative; z-index: 5; } .left-sidebar .context-nav .nav-heading { position: relative; box-sizing: border-box; font-family: 'Aleo'; font-size: 21px; line-height: 24px; font-weight: 500; color: var(--font-body-color); text-decoration: none; display: block; } .left-sidebar .context-nav .nav-heading.active:before { content: ""; width: 9px; height: 16px; background-color: var(--font-body-color); display: block; position: absolute; left: -25px; top: 3px; } .left-sidebar .context-nav ul.nav-list { margin: 0; } .left-sidebar .context-nav ul.nav-list li { width: 100%; margin: 8px 0 0 0; padding: 10px 0 0 0; box-sizing: border-box; display: none; position: relative; } .left-sidebar .context-nav ul.nav-list li:last-of-type { margin: 0; } .left-sidebar .context-nav ul.nav-list li.show { display: inline-block; } .left-sidebar .context-nav ul.nav-list li:before { content: ""; width: 6px; height: 16px; background-color: var(--font-body-color); display: none; position: absolute; left: -26px; top: 10px; border-radius: 0; background-color: #000000; } .left-sidebar .context-nav ul.nav-list li.active:before { display: block; } .left-sidebar .context-nav ul.nav-list li a { display: block; font-size: 15px; font-weight: 300; line-height: 18px; color: var(--font-body-color); opacity: .75; } .left-sidebar .context-nav ul.nav-list li.active a { font-weight: 500; } .left-sidebar .context-nav ul.nav-list li.dropdown-toggle a { width: 31px; height: 31px; margin: 24px 0 0 0; background-image: url('/content/_theme_images/icon_button_arrow.svg'); background-repeat: no-repeat; background-size: cover; display: inline-block; transform: rotate(90deg); } /* show-all edits */ .left-sidebar .context-nav ul.nav-list.show-all li { display: inline-block; } .left-sidebar .context-nav ul.nav-list.show-all li.dropdown-toggle a { transform: rotate(-90deg); } /* multi edits */ .left-sidebar .context-nav.multi a.nav-heading:first-of-type { padding: 0; font: var(--secondary-header-font); } .left-sidebar .context-nav.multi .nav-heading.active:before { top: 17px; } .left-sidebar .context-nav.multi .nav-heading.active:first-of-type:before { top: -3px; } /* fixed edits */ .left-sidebar .context-nav.fixed { position: fixed; top: 50px; } .left-sidebar .context-nav.absolute-bottom { position: absolute; top: auto; bottom: 0; } .body { width: calc(100% - 275px); } a { /*color: #F25A29;*/ color: var(--font-link-color); font-weight: 600; text-decoration: underline; } .body iframe { max-width: 100%; } .body.no-sidebar{ width: 100%; } .body p.full-width { max-width: none; } .body img { border-radius: 5px; } .main-content.tertiary .body:not(.no-right-sidebar) { /* width: calc(100% - 700px); */ /* width: calc(100% - 610px); */ width: calc(100% - 571px); flex: 1; } .main-content.calendar .body, .main-content.search-page .body { width: 100%; } .body bs_editable { max-width: 587px; } .body bs_editable img { max-width: 100%; height: auto; } .lineage-container { /* width: calc(100% - 240px); */ width: calc(100% - 256px); /* margin: 30px 0 0 -12px; */ margin: 30px 0 0 auto; display: flex; flex-wrap: wrap; /* align-self: flex-end; */ } .lineage-container.full { width: 100%; } .lineage-container .h2-like { width: 100%; margin: 0px; } .lineage-container .lineage-item { width: 100%; /* max-width: 284px; */ max-width: 275px; /* margin: 0 12px 20px 12px; */ /* margin: 0 24px 20px 0; */ } .lineage-container .lineage-item .item-media { margin: 0 0 10px 0; box-sizing: border-box; background-repeat: no-repeat; display: block; } .lineage-container .lineage-item .item-media.placeholder { height: 190px; background-color: var(--power-color-1); background-image: url(/content/_theme_images/logo_wht.svg); background-size: 40%; background-position: center; } .lineage-container .lineage-item .item-media:after { display: none; } .lineage-container .lineage-item .item-media .media { width: 100%; height: 175px; background-repeat: no-repeat; background-size: cover; /*background-color: center;*/ } .lineage-container .lineage-item .item-media .media.placeholder { background-color: var(--power-color-1); background-image: url(/content/_theme_images/logo_wht.svg); background-size: 40%; background-position: center; } .lineage-container .lineage-item .item-content .heading { margin: 0 0 3px 0; color: var(--power-color-3); text-decoration: none; display: block; font: var(--small-header-font); } .lineage-container .lineage-item .item-content .heading:hover { color: var(--small-headers); } .lineage-container .lineage-item .item-content .heading:after { display: none; } .lineage-container .lineage-item .item-content .description { font: var(--paragraph-font); } .lineage-container .lineage-item .item-content .info { margin: 0 0 10px 0; font: var(--paragraph-font); display: flex; flex-direction: column; } .lineage-container .lineage-item .item-content .info span { padding-left: 20px; margin-top: 5px; position: relative; } .lineage-container .lineage-item .item-content .info span:before { content: ""; position: absolute; width: 15px; height: 15px; background-image: url('/content/_theme_images/icon_calendar.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; display: inline-block; position: absolute; left: 0; top: 0; } .lineage-container .lineage-item .item-content .info span.author:before { background-image: url('/content/_theme_images/icon_pen.svg'); } /* .lineage-container .lineage-item .item-content .info .date:after { content: "|"; margin: 0 5px; display: inline-block; } */ .body .lineage-container { width: 100%; justify-content: space-between; gap: 25px; position: relative; z-index: 5; } .body .lineage-container .lineage-item { width: calc(50% - 13px); max-width: none; margin-right: 0; } .body .styled_rounded { box-sizing: border-box; display: inline-block; position: relative; z-index: 5; } .body .styled_rounded img { width: 100%; display: block; position: relative; z-index: 10; } .bucket { width: 100%; margin: 50px 0 0 0; padding: 30px; background-color: var(--body-offset-bg-color); border: 1px solid var(--brand-border-color); border-radius: 40px; display: flex; align-items: flex-start; } .bucket .h2-like { margin: 0 0 8px 0; font-size: 24px; line-height: 26px; } .bucket .subheader { margin-bottom: 12px; padding-left: 20px; font-size: 15px; line-height: 20px; display: block; position: relative; } .bucket .subheader:before { content: ""; width: 12px; height: 12px; background-color: var(--tag-border-color); display: block; position: absolute; top: calc(50% - 6px); left: 0; } .bucket p { margin: 18px 0; color: var(--font-offset-color); font-size: 16px; line-height: 19px; } .bucket p.detail { margin: 0; display: flex; column-gap: 10px; align-items: center; } .bucket p.detail .detail-icon { width: 15px; height: 15px; display: block; } .bucket.has-image .bucket-content { width: calc(100% - 350px); } .bucket .bucket-media { max-width: 350px; margin: 0 15px 0 0; display: none; } .bucket.has-image .bucket-media { display: block; } /* edits action version for the standard bucket */ .bucket.action p { margin-top: 0; } .bucket .blob.b3 { width: 281px; left: -90px; bottom: -70px; } .bucket .bucket-content .blob.b2 { width: 718px; top: -160px; left: -200px; z-index: -1; } /* edits home version for the standard bucket */ .main-content.home .bucket.action { position: relative; max-width: 1180px; width: 100%; margin: auto; padding: 0 25px; background-color: transparent; border: none; border-radius: initial; display: flex; align-items: center; justify-content: center; } .main-content.home .bucket.action .h2-like { margin: 0 0 12px 0; font-size: 30px; line-height: 32px; position: relative; z-index: 10; } .main-content.home .bucket.action p { /*max-height: 42px;*/ display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; position: relative; z-index: 10; overflow: hidden; } .main-content.home .bucket.action .bucket-media { width: 100%; max-width: 700px; height: auto; margin: 0; border: 0.4px solid var(--brand-border-color); border-radius: 5px; display: block; position: relative; z-index: 5; } .main-content.home .bucket.action .bucket-media.default { min-height: 455px; } .main-content.home .bucket.action .bucket-content { width: 100%; max-width: 246px; margin: 0px 0 0 70px; position: relative; z-index: 1; } /*.main-content.home .bucket.action .bucket-content:before {*/ /* content: "";*/ /* width: 520px;*/ /* height: 520px;*/ /* background-color: var(--body-media-bg-color);*/ /* border-radius: 50%;*/ /* display: block;*/ /* position: absolute;*/ /* top: calc(50% - 260px);*/ /* left: calc(50% - 260px);*/ /* pointer-events: none;*/ /*}*/ /* edits for 'event' version for the upcoming events bucket */ .main-content.home .bucket.event { width: calc(100% - 30px); max-width: 1100px; margin: 30px auto 0 auto; } .right-sidebar .bucket { width: 100%; margin: 0 0 21px 0; flex-direction: column; } .right-sidebar .bucket .bucket-content .bucket-heading { margin: 15px 0 5px 0; } /* .right-sidebar .bucket .bucket-media { width: 100%; height: 173px; margin: 0 0 10px 0; } */ .right-sidebar .bucket img { /*width: 100%;*/ /*height: 173px;*/ margin: 0 0 10px 0; } .right-sidebar .bucket .bucket-content { width: 100%; } /* home top-right column(.more-events) edits */ .more-events .bucket { width: 100%; margin: 0 0 18px 0; padding: 25px 25px 15px 25px; box-sizing: border-box; border: 1px solid var(--secondary-architecture); background-color: var(--background-1); display: inline-block; transition: padding .3s; position: relative; } .more-events .bucket:before { content: ""; width: 1px; height: 20px; background-color: var(--secondary-architecture); display: block; position: absolute; top: -21px; left: 50%; z-index: 1; } .more-events .bucket img { margin: 0 0 2px 0; } .more-events .bucket .bucket-media { width: 351px; /*height: 119px;*/ height: 141px; margin: 0 0 5px 0; transition: width .3s, height .3s; } .more-events .bucket .bucket-content { width: 100%; } .more-events .bucket .bucket-content .bucket-heading { margin: 0; font: var(--secondary-header-font); font-weight: 400; letter-spacing: initial; display: block; } .right-sidebar { width: 100%; max-width: 250px; margin-right: 50px; } .right-sidebar .placeholder-item { width: 100%; height: 250px; display: block; } .sidebar-item { width: 100%; box-sizing: border-box; border-top: 1px solid var(--secondary-item); margin-bottom: 50px; } .sidebar-item .h3-like { margin: 20px 0 0 0; font: var(--secondary-header-font); text-transform: var(--secondary-header-font-variant); } .sidebar-item:last-of-type { margin: 0; } .sidebar-item .post { width: 100%; margin: 25px 0; box-sizing: border-box; /* border-bottom: 1px solid #C3C3C3; */ } .sidebar-item .post:last-of-type { margin-bottom: 25px; } .sidebar-item .post:last-of-type { border-bottom: none; } .sidebar-item .post .heading, .sidebar-item .heading { font: var(--small-header-font); margin: 5px 0 5px 0; color: var(--power-color-3); display: block; } .sidebar-item .post .date { font: var(--small-header-font); font-size: 14px; margin: 0; } .upcoming-event-image { height: 120px; width: 100%; background-color: var(--power-color-1); background-size: contain; background-repeat: no-repeat; background-position: center; } .upcoming-event-image.photo { background-color: var(--body-bg-color); background-size: cover; background-repeat: no-repeat; background-position: center; } .sidebar-item .post p { margin: 5px 0 8px 0; font: var(--paragraph-font); } .my-events-bucket .my-events { padding-top: 15px; } /* page elements */ /* pullquote */ .pullquote { box-sizing: border-box; position: relative; margin: 15px auto; padding: 70px; width: 500px; height: 500px; border-radius: 250px; background-color: var(--blob-bg-color); color: var(--font-link-color); font: 400 25px/32px 'Aleo'; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .pullquote:before, .pullquote:after { content: ''; position: absolute; width: 66px; height: 66px; top: 31px; left: -53px; border-radius: 60px; background-color: var(--brand-alternate-color-2); } .pullquote:after { width: 109px; height: 109px; top: 64px; left: unset; right: -99px; background-color: var(--brand-alternate-color); } .pullquote .pullquote-author { font: 600 20px/26px 'DM Sans'; color: var(--font-body-color); margin: 25px 0 2px 0; } .pullquote .pullquote-author:before { content: ''; display: inline-block; width: 15px; height: 2px; margin: 0 5px 6px 0; background-color: var(--font-body-color); } .pullquote .pullquote-author:after { content: ''; position: absolute; width: 66px; height: 66px; bottom: 0; left: 50px; border-radius: 40px; background-color: var(--brand-alternate-color-3); } .pullquote .pullquote-author-title { font: 400 16px/21px 'DM Sans'; color: var(--font-body-color); } /* the table element */ table { display: block; /*max-width: 100%;*/ width: calc(100% + 45px) !important; margin: 30px 0 40px 0; overflow: auto; border: unset; border-spacing: unset; padding-right: 45px; } table thead { border: unset; } table thead tr th { border: unset; border-top: 1px solid var(--brand-border-color); border-left: 1px solid var(--brand-border-color); padding: 13px; text-align: left; background-color: var(--button-secondary-bg-color); } table thead tr th:last-child { border-right: 1px solid var(--brand-border-color); } table thead tr th:first-child { border-radius: 20px 0 0 0; } table thead tr th:last-child { border-radius: 0 20px 0 0; } table td { /*border: 1px solid var(--brand-border-color);*/ padding: 13px; border: unset; border-top: 1px solid var(--brand-border-color); border-left: 1px solid var(--brand-border-color); background-color: var(--body-bg-color); } table tr:last-child td { border-bottom: 1px solid var(--brand-border-color); } table tr td:last-child { border-right: 1px solid var(--brand-border-color); } /* table tr:first-child td:first-child { border-radius: 20px 0 0 0; } table tr:first-child td:last-child { border-radius: 0 20px 0 0; } */ table tr:last-child td:first-child { border-radius: 0 0 0 20px; } table tr:last-child td:last-child { border-radius: 0 0 20px 0; } /* accordion container */ .acc-container input:checked + label:after { content: '' !important; transform: rotate(-90deg); } .acc-container label{ margin: 0; position: relative; display: block; cursor: pointer; font-size: 19px; opacity: .7; } /* actual article */ .acc-container.accordion article{ overflow: hidden; height: 2px; /*border-bottom: 2px solid #888;*/ } .acc-container.accordion input:checked + label, .acc-container.accordion input:checked + label:hover{ opacity: 1; } /* hide checkboxes */ .acc-container.accordion input{ display: none; } /* icon after */ .acc-container.accordion label:after, .acc-container.accordion input:checked + label:after{ content: ''; position: absolute; /*right: 7px;*/ top: 4px; /*content: '\f106';*/ font-family: 'FontAwesome'; } /* selected item */ .acc-container.accordion input:checked + label:after{ content: '\f107'; } /* actual article */ .acc-container article{ overflow: hidden; height: 2px; border-bottom: 2px solid #888; } /* article when input checked, open */ .acc-container.accordion input:checked ~ article{ height: auto; } /* tab element */ .acc-container [role="tablist"] { min-width: 100%; display: flex; align-items: stretch; margin: 0; } [role="tab"][aria-selected="false"] { border-bottom: 1px solid hsl(219deg 1% 72%); } /*[role="tab"] span.focus {}*/ [role="tabpanel"] { padding: 5px; border: 2px solid hsl(219deg 1% 72%); border-radius: 0 5px 5px; min-height: 10em; width: 100%; overflow: auto; } [role="tabpanel"].is-hidden { display: none; } [role="tabpanel"] p { margin: 0; } /* TODO: JS - replace/delete this OG tab css ----- */ .acc-container [role="tabpanel"] { margin: 0; } .acc-container [role="tab"] { border: 1px solid transparent; border-left: 1px solid var(--brand-border-color); border-top: 1px solid var(--brand-border-color); border-bottom: 1px solid var(--brand-border-color); border-radius: 0px; flex: 1 1 0px; padding: 11px 20px; margin: 0; text-align: left; font: 400 18px / 20px 'DM Sans'; color: var(--font-body-color); text-transform: none; letter-spacing: 0; } .acc-container [role="tab"]:before { content: unset; } .acc-container [role="tab"]:first-child { border-radius: 20px 0px 0px 0px; } .acc-container [role="tab"]:last-child { border-radius: 0px 20px 0px 0px; border-right: 1px solid rgba(27, 70, 79, .27); } .acc-container [role="tab"][aria-selected="true"] { border-bottom: transparent; font-weight: 600; } .acc-container [role="tabpanel"] { border: 1px solid var(--brand-border-color); border-top: transparent; background-color: var(--body-bg-color); border-radius: 0px 0px 20px 20px; width: 100%; padding: 20px; } .acc-container [role="tabpanel"] article { height: auto; } /* gallery/galleries */ .image-container { position: relative; } .photo-container { float: left; position: relative; overflow: hidden; } .image-thumb { position: relative; background-color: #eee; } .gallery-wrapper { position: relative; margin-top: 100px; } .gallery-wrapper h3 { font: 600 28px/32px 'Aleo'; } .gallery-wrapper .gallery-slider-container { margin: 20px auto 0px auto; top: 0px; left: 0px; height: 500px; visibility: visible; margin-bottom: 15px; position: relative; overflow-x: hidden; overflow-y: visible; } .gallery-slider-window { position: absolute; left: 0; height:100%; transition: transform 1s ease-in-out; } .gallery-wrapper .gallery-slide { background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; background-position: center center; height: 100%; position: relative; cursor: pointer; z-index: 10; } .gallery-wrapper .gallery-arrow { position: absolute; top: calc(50% - 20px); left: 25px; bottom: 0px; cursor: pointer; height: 40px; padding: 0px 5px; z-index: 11; font-size: 40px; width: 40px; display: flex; color: inherit; align-items: center; margin: 0px; border-radius: 0; /*border: 1px solid var(--tag-border-color);*/ border: 1px solid var(--button-color); background-color: var(--button-secondary-bg-color); } .gallery-wrapper .gallery-arrow.right { left: unset; right: 25px; } .gallery-wrapper .gallery-arrow:before, button.swiper-slide:before, .gallery-wrapper .thumbnail-arrow:before { content: unset; } .gallery-wrapper .swiper-button-next:after, .gallery-wrapper .swiper-button-prev:after { font-size: 20px; /*color: var(--tag-border-color);*/ color: var(--button-color); font-weight: 100; } .gallery-arrow i { position: relative; margin-top: -20px; } .gallery-nav-left { left: 0; } .gallery-nav-right { right: 0; } .slide_before { left: -100%; } .slide_after { left: 100%; } .slider-preview-line { height: 130px; width: 100%; max-width: 940px; padding: 15px 60px; position: relative; box-sizing: border-box; overflow: hidden; margin-bottom: 25px; display: flex; } .gallery-wrapper .gallery-thumbnail { background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; opacity: .75; background-color: unset; border-radius: 5px; width: 100px; height: 100px; transition: all .25s ease-in-out; outline: unset; border: unset; } .gallery-thumbnail:hover, .gallery-thumbnail.active { opacity: 1; transform: scale(1.15); } .gallery-thumb-left { left: 0; } .gallery-thumb-right { right: 0; } .gallery-wrapper .thumbnail-arrow { position: absolute; cursor: pointer; height: 40px; padding: 0px 5px; z-index: 8; font-size: 25px; display: flex; justify-content: center; align-items: center; margin: 0px; top: 50%; bottom: 0px; width: 40px; color: inherit; background-color: rgb(253, 252, 248, .5); border-radius: 0; border: 1px solid var(--tag-border-color); left: 0; } .gallery-wrapper .thumbnail-arrow.right { left: unset; right: 0; } .thumbnail-arrow i { position: relative; margin-top: 0px; } .slider-preview-container { height:100%; display: flex; } .gallery-slider-view-window { width: 100%; } .gallery-grid { --cell-size: 350px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .gallery-grid .gallery-grid-image { display: inline-flex; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; padding-top: 75%;/*4:3 ratio*/ border-radius: 5px; } .slider-caption { position: absolute; bottom: 0; height: auto; width: 100%; padding: 5px 10px; display: block; } .gallery-overlay-bg { position: absolute; display: flex; z-index: 100; left: 0px; top: 0px; bottom: 0px; right: 0px; background-color: rgba(244, 244, 244, .8); } .gallery-overlay { position: fixed; height: 100vh; width: 100vw; top: 0px; left: 0px; z-index: 10000; cursor: pointer; display: none; padding: 22px; box-sizing: border-box; justify-content: center; } .gallery-overlay.open { display: flex; } .gallery-overlay figure { position: relative; z-index: 100; margin: 0; width: 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 25px; } .gallery-overlay figure figcaption { background-color: white; border-radius: 5px; padding: 5px; font-size: 20px; width: 100%; text-align: center; margin-top: 10px; } .gallery-overlay figure figcaption span { font-size: 16px; } .gallery-overlay img { display: inline-flex; vertical-align: middle; max-width: 100%; max-height: calc(100% - 50px); box-sizing: border-box; } .gallery-overlay .close-button { position: absolute; right: 25px; top: 25px; z-index: 100000; background-image: url(/content/_theme_images/icon_button_close.svg); background-size: 50%; background-repeat: no-repeat; background-position: center; border: .4px solid rgba(26, 70, 79, .37); border-radius: 20px; width: 35px; height: 35px; } .gallery-overlay .close-button:before { content: unset; } .gallery-overlay .close-button i { display: none; } .image-container > .picrow > .photo-container > figure > a > img { margin: 0!important; } .gallery-overlay > .photo-caption > .caption, .gallery-overlay figcaption { display: block; font-size: 16px; } .gallery-overlay > .photo-caption > .credit { display: block; font-size: 16px; } .gallery-overlay > .photo-caption { position: absolute; padding: 5px; text-align: left; } /* events embed page element */ .upcoming-events-embed { width: 100%; margin: 50px 0; } .upcoming-events-embed .day-section { width: 100%; margin: 0 0 30px 0; padding: 0; display: flex; align-items: flex-start; justify-content: space-between; position: relative; } .upcoming-events-embed .day-section .section-date { width: 75px; height: 75px; border-radius: 50%; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); font: 600 20px / 22px 'DM Sans'; display: flex; flex-direction: column; align-items: center; justify-content: center; } .upcoming-events-embed .day-section .section-events { width: calc(100% - 100px); display: flex; flex-wrap: wrap; /*align-items: flex-start;*/ column-gap: 15px; row-gap: 15px; } .upcoming-events-embed .day-section .section-events .event { width: calc(50% - 15px); padding: 20px 25px; background-color: var(--body-bg-color); border-radius: 40px; border: 1px solid var(--brand-border-color); display: block; position: relative; } .upcoming-events-embed .day-section .section-events .event .h3-like { margin: 0 0 5px 0; font-size: 20px; line-height: 22px; } .upcoming-events-embed .day-section .section-events .event .event-info { margin: 5px 0 10px 0; font: 400 16px / 18px 'DM Sans'; color: var(--font-offset-color); } .upcoming-events-embed .day-section .section-events .event .event-info .date:after { content: " | "; } .upcoming-events-embed .day-section .section-events .event .event-info .location { margin: 5px 0 0 0; display: flex; column-gap: 5px; align-items: center; } /* booklists embed page element */ .booklists-embed { width: 100%; margin-top: 40px; } .booklists-embed .embed-top-panel { width: 100%; margin: 0 0 25px 0; padding: 17px 30px; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); border-radius: 20px; } .booklists-embed .embed-top-panel ul { margin: 0; display: flex; flex-wrap: wrap; column-gap: 15px; row-gap: 15px; } .booklists-embed .embed-top-panel ul li { margin: 0; padding: 0 0 3px 0; } .booklists-embed .embed-top-panel ul li:before { /*display: none;*/ width: 100%; height: 3px; background-color: var(--brand-border-color); border-radius: initial; opacity: 0; top: auto; bottom: 0; transform: scaleX(0); transform-origin: 0 50%; transition: opacity .2s, transform .2s; } .booklists-embed .embed-top-panel ul li:hover:before, .booklists-embed .embed-top-panel ul li.active:before { opacity: 1; transform: scaleX(1); transition: opacity .3s, transform .3s; } .booklists-embed .embed-content { width: 100%; position: relative; } .booklists-embed .embed-content .embed-item { opacity: 0; position: absolute; top: -100vh; transform: translateY(-15px); pointer-events: none; transition: opacity 0s; } .booklists-embed .embed-content .embed-item.active { opacity: 1; position: relative; top: 0; transform: translateY(0); pointer-events: all; transition: opacity .3s, transform .3s; } .booklists-embed .book-list .book-list-books .book { height: 175px; flex-basis: initial; aspect-ratio: initial; } /* eresource embed page element */ .eresources-embed { width: 100%; margin: 50px 0; } .eresources-embed .eresource-entities { width: 100%; display: flex; flex-wrap: wrap; column-gap: 15px; row-gap: 15px; } .eresources-embed .eresource-entities .eresource-item { /*max-width: 275px;*/ max-width: 215px; align-items: initial; } .eresources-embed .eresource-entities .eresource-item h4 { margin: 0 0 5px 0; } .eresources-embed .eresource-entities .eresource-item p { font-size: 15px; line-height: 17px; } .eresources-embed .eresource-entities .eresource-item .item-content { padding: 13px; } .eresources-embed .eresource-entities .eresource-item .item-content .eresource-buttons { gap: 5px; } /* blog posts embed page element */ .blog-posts-embed { width: 100%; margin: 50px 0; } .blog-posts-embed .personal-items { align-items: initial; column-gap: 15px; row-gap: 15px; } .blog-posts-embed .personal-items .personal-item { width: 100%; /*max-width: 215px;*/ max-width: 440px; } .blog-posts-embed .personal-items .personal-item h4 { margin: 0 0 5px 0; } .blog-posts-embed .personal-items .personal-item .item-media { height: 275px; } .blog-posts-embed .personal-items .personal-item .item-media.has-image { background-size: cover; } .blog-posts-embed .personal-items .personal-item .item-content { padding: 13px; } .blog-posts-embed .personal-items .personal-item .item-content p { font-size: 15px; line-height: 17px; } .blog-posts-embed .personal-items .personal-item .item-content .date { color: var(--font-offset-color); font: 400 15px / 17px "DM Sans"; display: flex; column-gap: 5px; align-items: center; } /* pathfinder styles */ .source-container { --source-skeleton-opacity: 1; } .source-container.sources-hydrated { --source-skeleton-opacity: 0; } .source-container .swiper-slide { margin-right: 35px; } .source-container .h3-like:before, .source-container h4:before, .source-container p:before, .source-container .item-media:before, .source-container .date:before, .source-container .source-event .event-info:before, .source-container .personal-item .item-content .booklist-books .book:before, .source-container .personal-item .item-content .item-buttons:before, .source-container .source-event .event-buttons:before, .source-container .eresource-item .item-content .eresource-buttons:before { content: ""; width: 100%; height: 100%; background-color: rgba(211,211,211,1); opacity: var(--source-skeleton-opacity); display: block; position: absolute; top: 0; left: 0; z-index: 15; pointer-events: none; transition: opacity .3s; } .source-container h3, .source-container h4 { position: relative; } .source-container p { position: relative; } .source-container .eresource-item { max-width: 300px; } .source-container .blog-source { width: 100%; /*max-width: 440px;*/ max-width: 370px; background-color: var(--body-bg-color); border: 0.5px solid var(--brand-border-color); border-radius: 40px; overflow: hidden; } .source-container .blog-source h4 { margin: 0 0 5px 0; } .source-container .blog-source p { color: var(--font-offset-color); font-size: 15px; line-height: 17px; } .source-container .blog-source a.button-like { margin: 15px 0 0 0; } .source-container .blog-source .item-media { width: 100%; display: block; height: 275px; position: relative; } .source-container .blog-source .item-media.has-image { background-size: cover; } .source-container .blog-source .item-content { padding: 13px; } .source-container .blog-source .item-content .date { margin: 0 0 8px 0; color: var(--font-offset-color); font: 400 15px / 17px "DM Sans"; display: flex; column-gap: 5px; align-items: center; position: relative; } .source-container .skeleton { min-height: 20px; background-color: #000; } .source-container .error-message { margin: 20px 0; padding: 5px 25px; background-color: var(--body-offset-bg-color); border-radius: 15px; display: inline-block; text-align: center; } .source-container .error-message.warning { background-color: rgba(141,99,165,0.25); border: 1px solid #8D63A5; font-weight: 600; } .source-container .source-event { width: 100%; padding: 20px 25px; background-color: var(--body-bg-color); border-radius: 40px; border: 1px solid var(--brand-border-color); display: flex; column-gap: 0.5em; position: relative; } .source-container .source-event .event-date { width: 75px; height: 75px; border-radius: 50%; background-color: var(--body-bg-color); border: 1px solid var(--brand-border-color); font: 600 20px / 22px 'DM Sans'; display: flex; flex-direction: column; align-items: center; justify-content: center; } .source-container .source-event .event-content { width: calc(100% - (75px + 0.5em)); } .source-container .source-event .h3-like { margin: 0 0 5px 0; font-size: 20px; line-height: 22px; position: relative; } .source-container .source-event p {} .source-container .source-event .event-info { margin: 5px 0 10px 0; font: 400 16px / 18px 'DM Sans'; color: var(--font-offset-color); position: relative; } .source-container .source-event .event-info .date::after { content: " | "; } .source-container .source-event .event-buttons { position: relative; } .upcoming-events-embed .section-events .event-buttons a:nth-child(2) { display: none; } /*////////////////////////////////////*/ /* masonry test */ .masonry-wrapper { position: relative; transition: opacity .25s ease-in-out; opacity: 0; display: none; } .masonry-wrapper.obscure { opacity: 0; } .masonry-wrapper.loaded { opacity: 1; } .masonry { position: relative; display: grid; } .masonry-item { position: relative; display: block; width: 33.3333333333%; opacity: 1; transition: opacity .25s ease-in-out; } .masonry-item:hover { opacity: .75; } .masonry-item img { display: flex; max-width: 100%; max-height: 100%; width: 100%; } .gallery-loader { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 10px; } .gallery-loader div { margin-top: 17px; } #l-path { transform-origin: CENTER; animation: l 1s cubic-bezier(0.2, 0.8, 0.6,0.6) infinite; fill: #675F83; } @keyframes l { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media screen and (max-width: 63.9375em) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .top-search-input .onsite-search{ /*flex-wrap: wrap;*/ flex-direction: column; background-color: var(--body-offset-bg-color); border: .5px solid var(--brand-border-color); border-radius: 24px; padding-bottom: 8px; /*gap: 10px;*/ } .top-search-input .onsite-search .onsite-search-button-wrapper{ bottom: 0px; top: 0px; position: relative; display: flex; flex-wrap: wrap; gap: 7px; left: -3px; /*transform: translateY(100%);*/ } .top-search-input .onsite-search .onsite-search-button{ padding: 9px 8px; } .top-search-input.show-search .onsite-search .onsite-search-button{ opacity: 1; } .top-search-input.show-search .onsite-search .onsite-search-input{ /*border: none;*/ /*background-color: inherit;*/ } .top-search-input .onsite-search .onsite-search-button .light{ display: none; } .top-search-input .onsite-search .onsite-search-input{ margin-bottom: 10px; } } /* search page */ .search-page-search .search-page-form .top-search { width: calc(100% - 200px); max-width: 354px; margin: 0; padding: 4px 5px; box-sizing: border-box; background-color: var(--background-2); border: 1px solid #979797; border-radius: 4px; color: #00000070; font: var(--paragraph-font); } .search-page-search .search-page-form .search { border: none; margin: 0; padding: 5px 18px; box-sizing: border-box; border-radius: 20px; background-color: var(--power-color-1); color: var(--power-color-1-foreground); font: var(--small-header-font); font-weight: 400; text-decoration: none; } .search-page-search .search-page-form .search-results-count { font: var(--paragraph-font); } .search-page .body .blob.b1 { right: 75%; } .search-page .body .blob.b2 { right: calc(100% + 60px); bottom: -450px; } .alternating-image-plus-text-block { display: flex; flex-flow: row-reverse; margin-top: 60px; } .alternating-image-plus-text-block:first-of-type { margin-top: 30px; } .alternating-image-plus-text-block.left-alignment { flex-flow: row; } .alternating-image-plus-text-block>div { /*width: 50%;*/ width: 55%; margin-left: 40px; align-self: center; } .alternating-image-plus-text-block>img { /*width: 50%;*/ width: 45%; align-self: center; } .alternating-image-plus-text-block.right-alignment>div { margin-right: 40px; margin-left: 0px; } .alternating-image-plus-text-block>div h3 { margin-top: 0; } @media screen and (max-width: 39.9375em) { .alternating-image-plus-text-block { display: block; } .alternating-image-plus-text-block>img { width: 100%; } .alternating-image-plus-text-block>div { width: 100%; margin: 15px 0 0 0; } } /*====================================================================================================== FOOTER STYLES - desktop ======================================================================================================*/ footer { width: calc(100% - 100px); max-width: 1180px; margin: 0px auto 0px auto; /*margin: 0 auto;*/ padding-bottom: 50px; border-radius: 80px; position: relative; z-index: 25; } footer:after { content: ''; max-width: 1920px; width: 100vw; height: 100%; background: linear-gradient(180deg, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 75%); /*background: linear-gradient(180deg, rgba(222,229,229,.4) 0%, rgba(255,255,255,1) 75%);*/ display: block; position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%); } body.dark-mode footer:after { background: linear-gradient(180deg, rgba(51,51,51,1) 0%, rgba(18,18,18,1) 100%); } footer .floating { border: .5px solid rgba(26, 70, 79, .37); border-radius: 80px; background-color: var(--body-bg-color); } footer .footer-wrapper { box-sizing: border-box; display: flex; bottom: -53px; flex-direction: column; margin: 60px 50px 30px 50px; align-items: center; } footer .footer-info { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; order: 1; padding: 0px; max-width: 267px; position: absolute; top: -90px; left: 50px; } footer .site-logo-element { margin: 0; flex-direction: column; position: relative; } footer .site-logo-element img { width: 133px; /*content: url('/content/_site_images/logo_footer.svg');*/ content: url('data:image/svg+xml,Group 10'); } .hour-heading { font: 600 19px/25px 'DM Sans'; display: flex; column-gap: 10px; } .hour-heading .button-like.secondary { margin-left: 25px; } .hours ul.hour-list li .message { width: 100%; color: #FF8B31; display: block; } ul.social-links { margin: 0; padding: 0; list-style-type: none; display: flex; gap: 5px; } ul.social-links li { margin: 0 10px 0 0; } ul.social-links li:last-of-type { margin: 0; } ul.social-links li a { opacity: 0.9; transition: opacity .3s; } ul.social-links li a:hover { opacity: 1; } .disclaimer { margin: 0; color: #010852; font-size: 12px; line-height: 16px; } footer .footer-nav { box-sizing: border-box; background-size: 100% 100%; background-position: 7px 11px; display: flex; width: 100%; flex-direction: column; justify-content: space-between; gap: 50px 100px; margin-bottom: 50px; } footer .footer-nav ul { margin: 0; padding: 0; list-style-type: none; } footer .footer-nav .footer-main li.footer-border .list-dropdown { opacity: 0; max-height: 0px; overflow: hidden; transition: all 1s; } footer .footer-nav .footer-main.show-sitemap li.footer-border .list-dropdown { opacity: 1; max-height: 2000px; } footer .footer-nav .footer-main li.footer-border .list-dropdown .dropdown-group { margin-top: 18px; } footer .footer-nav .footer-main li.footer-border .list-dropdown .dropdown-group:first-of-type { margin-top: 9px; } footer .footer-nav .footer-main li.footer-border .list-dropdown .dropdown-group .group-heading { /*margin: 0 0 6px 0;*/ opacity: 0.4; color: var(--font-link-color); font-size: 12px; font-weight: 500; font-style: italic; line-height: 16px; text-transform: uppercase; display: block; } footer .footer-nav ul.footer-right-side { min-width: 160px; display: flex; order: 2; flex-direction: row; gap: 28px; padding: 0px; margin-left: 320px; justify-content: space-between; } footer .footer-nav ul li { /*max-width: unset;*/ /*flex: 0 0 16.8%;*/ padding: 0; margin: 0; } footer .footer-nav ul li:before { display: none; } footer .footer-nav ul.footer-right-side li a { color: var(--font-link-color); letter-spacing: 0.1px; text-align: left; font-size: 13px; font-weight: 600; } footer .footer-nav ul.footer-right-side li a.social-icon { padding: 5px 0 0 0; display: flex; align-items: center; } footer .footer-nav ul.footer-right-side .list-dropdown li a { padding: 5px 0 0 0; opacity: 0.8; font-size: 12px; font-weight: 400; line-height: 14px; transition: opacity .3s; } footer .footer-nav ul.footer-right-side .list-dropdown li a:hover { opacity: 1; } footer .footer-nav ul.footer-right-side li a[href*="//"]:not(.skip-offsite):not([href*="http://scls.digitalbranch.org/"]):after { display: none; } footer .footer-nav .footer-main li.footer-border { box-sizing: border-box; padding: 0; flex: 0 0 14.5%; } footer .footer-nav ul li a { color: var(--font-link-color); font-size: 12px; font-weight: 400; /*opacity: 0.8;*/ display: inline-block; text-decoration: none; transition: opacity .3s; } a { text-decoration: none; } footer .footer-nav ul li a:hover { opacity: 1; } footer .footer-nav ul li ul.list-dropdown { padding: 0 0 20px 0; flex-direction: column; } footer .footer-nav ul li ul.list-dropdown li { line-height: 14px; } footer .footer-nav .footer-main { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; order: 3; /*background-color: unset;*/ gap: 28px; /*max-width: unset;*/ padding: 0; } footer .footer-nav .footer-main li { /*min-width: 181px;*/ flex: 1 0 31%; list-style-type: none; line-height: 14px; padding-top: 5px; } .footer-title { letter-spacing: 0.1px; display: block; width: 100%; font: 600 13px/14px 'DM Sans'; /*text-transform: capitalize;*/ color: var(--font-link-color); border-bottom: .5px solid var(--brand-border-color); padding-bottom: 5px; opacity: .8; } .footer-title a { color: var(--font-link-color); font: 600 13px/14px 'DM Sans'; /*text-transform: capitalize;*/ position: relative; } .footer-title a:before { display: block; content: ''; position: absolute; width: 11px; height: 9px; background-image: url('/content/_theme_images/icon_footer_arrow.svg'); top: 2px; right: -11px; opacity: 0; transition: all .5s; } .footer-title:hover a:before { opacity: 1; right: -16px; } footer .footer-hours { background-color: var(--body-offset-bg-color); padding: 35px 50px 12px 50px; display: flex; justify-content: center; flex-direction: column; gap: 16px; } footer .footer-hours .list-heading { opacity: 1; /*font: 500 15px/17px 'DM Sans';*/ font: 500 13px/15px 'DM Sans'; /*margin-bottom: 15px;*/ margin-bottom: 10px; display: flex; align-items: center; column-gap: 5px; } footer .footer-hours .list-heading .location-icon { opacity: 0; display: block; transition: opacity .3s; } footer .footer-hours .highlighted .list-heading .location-icon, footer .footer-hours .highlight-hover .list-heading .location-icon { opacity: 1; } footer .footer-hours .list-heading .location-icon svg path { fill: var(--brand-alternate-color); } footer .footer-hours .branch-information, footer .footer-hours .hours-content .hour-lists .hour-list ul.list li.hour .time { /*font: 400 14px/18px 'DM Sans';*/ font: 400 12px/16px 'DM Sans'; color: #797979; margin-bottom: 5px; } footer .footer-hours .hours-content { display: flex; gap: 30px; justify-content: space-between; /*align-items: flex-start;*/ align-items: center; } footer .footer-hours .branches-map { width: 100%; max-width: 285px; height: auto; background-color: transparent; position: relative; } footer .footer-hours .branches-map .map-location { /*width: 16px;*/ /*height: 19px;*/ width: 24px; height: 24px; /*margin: -10px 0 0 -10px;*/ /*margin-left: -10px;*/ margin: -15px 0 0 0; /*background-color: rgba(255,0,0,.5);*/ /*border-radius: 50%;*/ display: flex; align-items: center; justify-content: center; position: absolute; z-index: 5; transform-origin: 50% 100%; transition: transform .2s; } footer .footer-hours .branches-map .map-location:hover { transform: scale(1.1); transition: transform .3s; } footer .footer-hours .branches-map .map-location svg { /*opacity: 0;*/ /*transform: translateY(-10px);*/ width: 24px; height: auto; } footer .footer-hours .branches-map .map-location svg path { fill: #1A464F; transition: fill .3s; } footer .footer-hours .branches-map .map-location.highlighted svg path, footer .footer-hours .branches-map .map-location.highlight-hover svg path { fill: var(--brand-alternate-color); } footer .footer-hours .branches-map .map-image { max-width: 100%; height: auto; display: block; position: relative; z-index: 1; } footer .footer-hours .hours-content .hour-lists { width: calc(100% - 285px); margin: 0; display: flex; /*flex: 1;*/ /*flex-wrap: wrap;*/ /*gap: 30px;*/ } footer .footer-hours .hours-content .hour-lists .swiper { width: calc(100% - 115px); } footer .footer-hours .hours-content .hour-lists .hour-list { padding: 0; /*flex: 0 0 30.7%;*/ flex: initial; position: relative; } footer .footer-hours .hours-content .hour-lists .hour-list ul.list { list-style-type: none; padding: 0; margin: 0; } footer .footer-hours .hours-content .hour-lists .hour-list ul.list li.hour { padding: 0; margin-bottom: 2px; line-height: 0; } footer .footer-hours .hours-content .hour-lists .hour-list ul.list li.hour:before { display: none; } footer .footer-hours .hours-content .hour-lists .hour-list ul.list li.hour .day { /*font: 500 14px/18px 'DM Sans';*/ font: 500 12px/16px 'DM Sans'; color: #797979; } footer .footer-sunset { display: block; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; max-height: 100%; max-width: 100%; padding-bottom: 32px; } footer .footer-credits { width: 100%; line-height: 14px; box-sizing: border-box; background-size: 100%; display: flex; align-items: center; justify-content: space-between; height: 33px; background-color: var(--body-offset-bg-color); padding: 50px; border-radius: 0 0 80px 80px; } footer .footer-credits p, footer .footer-credits a { margin: 0; font-size: 12px; font-weight: 500; color: var(--font-link-color); } footer .footer-credits a { text-decoration: none; } footer .footer-credits a:hover { text-decoration: underline; } footer .footer-credits .credit-nav {} footer .footer-credits .credit-nav ul.nav-list { margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: space-between; gap: 25px; } footer .footer-credits .credit-nav ul { list-style-type: none; display: flex; gap: 25px; margin: 0; } footer .footer-credits .credit-nav ul li { padding: 0; margin: 0; } footer .footer-credits .credit-nav ul li:before { display: none; } /*====================================================================================================== ACCESSIBILITY STYLES ======================================================================================================*/ /* bigger-text styles */ body.bigger-text p.intro { /* font-size: 18px; */ font-size: 22px; line-height: 24px; } body.bigger-text p, body.bigger-text header .header-notices .notice-accessibility .access-options .access-section .option-heading, body.bigger-text .main-nav ul.nav-list li a, body.bigger-text header ul.nav-list li .list-dropdown ul li a, body.bigger-text .home-events .main-events .events-swiper .swiper-slide .event-link, body.bigger-text .home-events .more-events .highlighted-event p, body.bigger-text .upcoming-events .event .event-title, body.bigger-text .section .column-two .column-item .item-info, body.bigger-text .section .column-two .column-item.reserve .reserve-media .content .stat, body.bigger-text .section .column-two .column-item.booklist-filter .filter-bottom .filter-booklists li a, body.bigger-text .section .column-two .column-item.booklist .title, body.bigger-text .eresources-section .eresource-types li a, body.bigger-text .staff .staff-content .staff-email, body.bigger-text .staff .staff-content .staff-info, body.bigger-text .blog-posts .post .post-info, body.bigger-text .lib-overlay label, body.bigger-text .lib-overlay .additional-form-fields .add-new-field, body.bigger-text .left-sidebar a.return-to, body.bigger-text .left-sidebar .context-nav ul.nav-list li a, body.bigger-text .info, body.bigger-text .hours .hour-heading { /* font-size: 16px; */ font-size: 20px; line-height: 22px; } body.bigger-text button.social, body.bigger-text a.button-like.social, body.bigger-text form .field-row .field-container input[type="text"], body.bigger-text form .field-row .field-container input[type="email"], body.bigger-text form .field-row .field-container textarea, body.bigger-text .section ul.filters li a, body.bigger-text .section .column-two .column-item.booklist-filter .filter-top .filter-list a.list-toggle, body.bigger-text .blog-posts .post .post-about .tags .tag-heading, body.bigger-text .sidebar-item .post .heading, body.bigger-text .sidebar-item .heading, body.bigger-text .home-events .main-events .events-swiper .swiper-slide .event-info p, body.bigger-text .branch-information-section .information .info-content .info p { /* font-size: 15px; */ font-size: 19px; line-height: 21px; } body.bigger-text button, body.bigger-text a.button-like, body.bigger-text .button-dropdown, body.bigger-text header .header-notices .notice-accessibility .access-options .access-section .option p, body.bigger-text header .header-notices .notice-hour ul.hour-list li, body.bigger-text .utility-nav ul.nav-notice li a, body.bigger-text .utility-nav ul.nav-list li a, body.bigger-text .upcoming-events .event .event-info, body.bigger-text .quicklink .heading, body.bigger-text .section .column-item.booklists-options ul, body.bigger-text .section .column-two .column-item .item-heading, body.bigger-text .section .column-two .column-item ul.quicklinks li a, body.bigger-text .section .column-two .column-item.blog .content .blog-info, body.bigger-text .section .section-content .content-columns .column .podcast-sections .item .item-content .item-title, body.bigger-text .section .column-two .column-item.booklist .author, body.bigger-text .body .section .column-two .column-item .item-info, body.bigger-text .eresources-section .eresource-entities .eresource .eresource-name, body.bigger-text .eresources-section .eresource-entities .eresource .eresource-description, body.bigger-text .books-slider .swiper-slide .book .book-content .title, body.bigger-text .blog-posts .post .post-about .author, body.bigger-text .blog-posts .post .post-about .date, body.bigger-text .blog-posts .post .post-about .tags ul.tag-list li a.tag, body.bigger-text .lib-overlay input[type="text"], body.bigger-text .lib-overlay input[type="password"], body.bigger-text .lib-overlay input[type="email"], body.bigger-text .lib-overlay input[type="text"]::placeholder, body.bigger-text .lib-overlay ul li, body.bigger-text .lib-overlay .disclaimer, body.bigger-text .lineage-container .lineage-item .item-content .description, body.bigger-text .lineage-container .lineage-item .item-content .info { /* font-size: 14px; */ font-size: 18px; line-height: 20px; } body.bigger-text button.dropdown, body.bigger-text a.button-like.dropdown, body.bigger-text .top-search-input .onsite-search .onsite-search-button, body.bigger-text .section .column-two .column-item.blog .content .blog-tags .tag, body.bigger-text .section .column-two .column-item.form input[type="text"], body.bigger-text .section .column-two .column-item.form input[type="password"], body.bigger-text .section .column-two .column-item.form input[type="email"], body.bigger-text .section .column-two .column-item.booklist-filter .filter-top .filter-list .filter-dropdown li a, body.bigger-text .section .column-two .column-item.booklist-filter .filter-top .filter-list .filter-dropdown li label, body.bigger-text .section .column-two .column-item.booklist-filter .filter-top .filter-tag, body.bigger-text .books-slider .swiper-slide .book .book-content .author, body.bigger-text .search-page-search .search-page-form .search, body.bigger-text footer .footer-credits p, body.bigger-text footer .footer-credits a, body.bigger-text .full-segment .audience-filter li a { /* font-size: 13px; */ font-size: 17px; line-height: 19px; } body.bigger-text header .header-notices .notice-hour ul.hour-list li.days-closed, body.bigger-text header .header-notices .notice-hour ul.hour-list li .disclaimer, body.bigger-text header .header-notices .notice-hour ul.hour-list li .message, body.bigger-text .upcoming-events .event .event-date, body.bigger-text .section .section-content .content-columns .column .podcast-sections .item .item-content .item-info, body.bigger-text .section .column-two .column-item.reserve a.read-more, body.bigger-text .section .column-two .book-sliders a.read-more, body.bigger-text .section .column-two .column-item.booklist .item-booklist .content p, body.bigger-text .books-slider .swiper-slide .book .book-media p, body.bigger-text .books-slider .swiper-slide .book .book-content .description, body.bigger-text .books-slider .swiper-slide .book .book-content .link, body.bigger-text .sidebar-item .post p, body.bigger-text .hours ul.hour-list li, body.bigger-text .disclaimer, body.bigger-text footer .footer-nav ul li a { /* font-size: 12px; */ font-size: 16px; line-height: 18px; } body.bigger-text .top-search-input .onsite-search .onsite-search-options .option label, body.bigger-text .top-search-input .onsite-search .onsite-search-input, body.bigger-text .search-page-search .search-page-form .top-search { /* font-size: 11px; */ font-size: 15px; line-height: 17px; } /* high-contrast styles */ /* body.high-contrast p.intro, body.high-contrast p, body.high-contrast header .header-notices .notice-accessibility .access-options .access-section .option-heading, body.high-contrast .main-nav ul.nav-list li a, body.high-contrast header ul.nav-list li .list-dropdown ul li a, body.high-contrast .home-events .main-events .events-swiper .swiper-slide .event-link, body.high-contrast .home-events .more-events .highlighted-event p, body.high-contrast .upcoming-events .event .event-title, body.high-contrast .section .column-two .column-item .item-info, body.high-contrast .section .column-two .column-item.reserve .reserve-media .content .stat, body.high-contrast .section .column-two .column-item.booklist-filter .filter-bottom .filter-booklists li a, body.high-contrast .section .column-two .column-item.booklist .title, body.high-contrast .eresources-section .eresource-types li a, body.high-contrast .staff .staff-content .staff-email, body.high-contrast .staff .staff-content .staff-info, body.high-contrast .blog-posts .post .post-info, body.high-contrast .lib-overlay label, body.high-contrast .lib-overlay .additional-form-fields .add-new-field, body.high-contrast .left-sidebar a.return-to, body.high-contrast .left-sidebar .context-nav ul.nav-list li a, body.high-contrast .info, body.high-contrast .hours .hour-heading, body.high-contrast button.social, body.high-contrast a.button-like.social, body.high-contrast form .field-row .field-container input[type="text"], body.high-contrast form .field-row .field-container input[type="email"], body.high-contrast form .field-row .field-container textarea, body.high-contrast .section ul.filters li a, body.high-contrast .section .column-two .column-item.booklist-filter .filter-top .filter-list a.list-toggle, body.high-contrast .blog-posts .post .post-about .tags .tag-heading, body.high-contrast .sidebar-item .post .heading, body.high-contrast .sidebar-item .heading, body.high-contrast button, body.high-contrast a.button-like, body.high-contrast .button-dropdown, body.high-contrast header .header-notices .notice-accessibility .access-options .access-section .option p, body.high-contrast header .header-notices .notice-hour ul.hour-list li, body.high-contrast .utility-nav ul.nav-notice li a, body.high-contrast .utility-nav ul.nav-list li a, body.high-contrast .upcoming-events .event .event-info, body.high-contrast .quicklink .heading, body.high-contrast .section .column-item.booklists-options ul, body.high-contrast .section .column-two .column-item .item-heading, body.high-contrast .section .column-two .column-item ul.quicklinks li a, body.high-contrast .section .column-two .column-item.blog .content .blog-info, body.high-contrast .section .section-content .content-columns .column .podcast-sections .item .item-content .item-title, body.high-contrast .section .column-two .column-item.booklist .author, body.high-contrast .body .section .column-two .column-item .item-info, body.high-contrast .eresources-section .eresource-entities .eresource .eresource-name, body.high-contrast .eresources-section .eresource-entities .eresource .eresource-description, body.high-contrast .books-slider .swiper-slide .book .book-content .title, body.high-contrast .blog-posts .post .post-about .author, body.high-contrast .blog-posts .post .post-about .date, body.high-contrast .blog-posts .post .post-about .tags ul.tag-list li a.tag, body.high-contrast .lib-overlay input[type="text"], body.high-contrast .lib-overlay input[type="password"], body.high-contrast .lib-overlay input[type="email"], body.high-contrast .lib-overlay input[type="text"]::placeholder, body.high-contrast .lib-overlay ul li, body.high-contrast .lib-overlay .disclaimer, body.high-contrast .lineage-container .lineage-item .item-content .description, body.high-contrast .lineage-container .lineage-item .item-content .info, body.high-contrast button.dropdown, body.high-contrast a.button-like.dropdown, body.high-contrast .section .column-two .column-item.blog .content .blog-tags .tag, body.high-contrast .section .column-two .column-item.form input[type="text"], body.high-contrast .section .column-two .column-item.form input[type="password"], body.high-contrast .section .column-two .column-item.form input[type="email"], body.high-contrast .section .column-two .column-item.booklist-filter .filter-top .filter-list .filter-dropdown li a, body.high-contrast .section .column-two .column-item.booklist-filter .filter-top .filter-list .filter-dropdown li label, body.high-contrast .section .column-two .column-item.booklist-filter .filter-top .filter-tag, body.high-contrast .books-slider .swiper-slide .book .book-content .author, body.high-contrast footer .footer-credits p, body.high-contrast footer .footer-credits a, body.high-contrast header .header-notices .notice-hour ul.hour-list li.days-closed, body.high-contrast header .header-notices .notice-hour ul.hour-list li .disclaimer, body.high-contrast header .header-notices .notice-hour ul.hour-list li .message, body.high-contrast .upcoming-events .event .event-date, body.high-contrast .section .section-content .content-columns .column .podcast-sections .item .item-content .item-info, body.high-contrast .section .column-two .column-item.reserve a.read-more, body.high-contrast .section .column-two .book-sliders a.read-more, body.high-contrast .section .column-two .column-item.booklist .item-booklist .content p, body.high-contrast .books-slider .swiper-slide .book .book-media p, body.high-contrast .books-slider .swiper-slide .book .book-content .description, body.high-contrast .books-slider .swiper-slide .book .book-content .link, body.high-contrast .sidebar-item .post p, body.high-contrast .hours ul.hour-list li, body.high-contrast .disclaimer, body.high-contrast footer .footer-nav ul li a, body.high-contrast .top-search-input .onsite-search .onsite-search-options .option label, body.high-contrast .top-search-input .onsite-search .onsite-search-input, body.high-contrast .search-page-search .search-page-form .top-search, body.high-contrast .top-search-input .onsite-search .onsite-search-button, body.high-contrast .search-page-search .search-page-form .search { color: #000000; font-weight: 700; } */ body.high-contrast h1, body.high-contrast .h1-like, body.high-contrast h2, body.high-contrast .h2-like, body.high-contrast h3, body.high-contrast .h3-like, body.high-contrast h4, body.high-contrast .h4-like { font-weight: 700 !important; color: var(--font-body-color) !important; } body.high-contrast p, body.high-contrast a, body.high-contrast ul li, body.high-contrast ol li, body.high-contrast div, body.high-contrast span { font-weight: 600 !important; color: var(--font-body-color) !important; } body.high-contrast img, body.high-contrast .books-slider .swiper-slide .book .book-media, body.high-contrast .section .column-two .column-item.blog.slim .blog-media, body.high-contrast .section .section-content .content-columns .column.newsletter .newletter-media, body.high-contrast .section .column-two .column-item .booklists .book .book-media .media-front, body.high-contrast .section .column-two .column-item.reserve .reserve-media, body.high-contrast .section .column-two .column-item.booklist .item-booklist .media, body.high-contrast .bucket .bucket-media, body.high-contrast .upcoming-event-image { opacity: 0.7; } /* desaturate styles */ body.desaturate img, body.desaturate .books-slider .swiper-slide .book .book-media, body.desaturate .section .column-two .column-item.blog.slim .blog-media, body.desaturate .section .section-content .content-columns .column.newsletter .newletter-media, body.desaturate .section .column-two .column-item .booklists .book .book-media .media-front, body.desaturate .section .column-two .column-item.reserve .reserve-media, body.desaturate .section .column-two .column-item.booklist .item-booklist .media, body.desaturate .bucket .bucket-media, body.desaturate .upcoming-event-image { filter: grayscale(1); } body.desaturate { filter: grayscale(1); } /* darkmode styles */ body.dark-mode { --brand-border-color: rgba(81,170,194,0.4); --brand-alternate-color: #BB380C; --brand-alternate-color-2: #865203; --brand-alternate-color-3: #0F3E4D; --main-logo-img: url('/content/_site_images/site_logo-dm.png'); --font-body-color: #fff; --font-secondary-color: #949494; --font-link-color: #51AAC2; --button-color: #8BD0DA; --button-bg-color: #121212; --button-secondary-bg-color: #3B4E4E; --button-secondary-hover-bg-color: #304040; --button-icon: url('/content/_theme_images/icon_right_arrow-dm.svg'); --body-bg-color: #121212; --body-offset-bg-color: #171717; --tag-border-color: #395150; /*--font-offset-color: #858585;*/ --font-offset-color: #A1A1A1; --header-list-bg-color: #0F3E4D; --body-media-bg-color: #365959; --body-default-bg: url('/content/_site_images/icon_placeholder-mark-dm.svg') var(--body-media-bg-color) no-repeat center; --slider-arrow: url('/content/_site_images/icon_caret-up-dm.svg') no-repeat center; --blank-book-bg-color: #575757; --filter-underline-color: #616161; --hr-color: #404040; --overflow-gradient: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 100%); --favorited-star-icon: url('/content/_site_images/icon_star-dm.svg') no-repeat center; --personalize-star-icon: url('/content/_site_images/icon_stars-dm.svg') no-repeat center; --personalize-star-color-icon: url('/content/_site_images/icon_color_stars-dm.svg') no-repeat center; --personalize-star-fill: #006B99; --personalize-button-gradient: linear-gradient(rgba(29,29,29,1), rgba(18,18,18,1)); --personalize-checked-star-fill: #865203; --personalize-button-icon: url('/content/_theme_images/icon_expand-dm.svg'); --personalize-explanation-gradient: linear-gradient(to top, rgba(0,0,0,0.75) 0, rgba(0,0,0,0) 100%); --alert-icon: url('/content/_site_images/icon_alert-dm.svg'); --blob-bg-color: #333; } /* highlight-links styles */ body.highlight-links a.h4-like, body.highlight-links a, body.highlight-links .utility-nav ul.nav-notice li a, body.highlight-links .utility-nav ul.nav-list li a, body.highlight-links .main-nav ul.nav-list li a, body.highlight-links .sidebar-item .post a.heading, body.highlight-links .sidebar-item a.heading, body.highlight-links .upcoming-events .event .event-title, body.highlight-links .home-events .main-events .events-swiper .swiper-slide .event-link, body.highlight-links .quicklink .heading, body.highlight-links .section .column-two .column-item.reserve a.read-more, body.highlight-links .section .column-two .book-sliders a.read-more, body.highlight-links .section .section-content .content-columns .column .podcast-sections .item .item-content .item-title, body.highlight-links ul.nav-list li .list-dropdown ul li a, body.highlight-links .top-search-input .onsite-search .onsite-search-button, body.highlight-links .search-page-search .search-page-form .search, body.highlight-links .left-sidebar .context-nav a.nav-heading, body.highlight-links .left-sidebar .context-nav ul.nav-list li a, body.highlight-links .eresources-section .eresource-entities .eresource .eresource-name, body.highlight-links footer .footer-nav ul li a, body.highlight-links footer .footer-credits a { background-color: #F0DF00; color: #121212; } body.highlight-links { --font-link-color: #121212; --button-color: #121212; --button-bg-color: #F0DF00; --button-secondary-bg-color: #F0DF00; --button-secondary-hover-bg-color: #FCEC00; } body.highlight-links ul.nav-list li .link-backdrop, body.highlight-links .utility-nav ul.nav-list li .link-backdrop { display: none; } /* TODO: polish these styles with their counter-parts */ header .header-wrapper:before { /* TODO: remove this style from main */ display: none; } header ul.nav-list li .list-dropdown { display: flex; column-gap: 12px; } header ul.nav-list li .list-dropdown .dropdown-media { width: 100%; max-width: 210px; background-color: var(--body-media-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 15px; display: block; } header ul.nav-list li .list-dropdown .dropdown-media.default { height: 210px; } header ul.nav-list li .list-dropdown .dropdown-group { width: 100%; padding: 15px; background: var(--body-bg-color); border-radius: 15px; } header ul.nav-list li .list-dropdown .dropdown-group .h3-like { margin: 0 0 10px 0; font-size: 15px; line-height: 16px; display: block; } header ul.nav-list li .list-dropdown .dropdown-group ul { padding: 0; } header ul.nav-list li .list-dropdown .dropdown-group ul li a { width: auto; padding: 2px 0; /*opacity: 0.8;*/ opacity: 0.9; color: var(--font-secondary-color); font: inherit; font-size: 14px; line-height: 16px; white-space: wrap; transition: opacity .3s; } header ul.nav-list li .list-dropdown .dropdown-group ul li a:hover, header ul.nav-list li .list-dropdown .dropdown-group ul li.active a { opacity: 1; } .main-nav ul.nav-list li.dropdown-included .list-dropdown ul li a:after { display: none; } header ul.nav-list li .list-dropdown:before { content: ""; width: 100%; height: 41px; display: block; position: absolute; top: -25px; left: 0; } header ul.nav-list li .list-dropdown ul:before { /* TODO: remove this style from main */ display: none; } .main-nav ul.nav-list li .list-dropdown ul:after { /* TODO: remove this style from main */ display: none; } .utility-nav ul.nav-notice li:after { content: ""; width: 0; height: 0; background-color: transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--body-bg-color); border-radius: initial; display: none; position: absolute; top: -3px; left: calc(50% - 7px); } header.show-alerts .utility-nav ul.nav-notice li.alert:after, header.show-accessibility .utility-nav ul.nav-notice li.accessibility:after, header.show-hours .utility-nav ul.nav-notice li.hours:after { display: block; } header.show-hours, header.show-hours.hide-accessibility, header.show-hours.hide-alerts { /* TODO: remove this style from main */ padding: 0; } header .header-notices .notice-section.notice-alert { overflow: hidden; padding: 15px 0 10px 0; } header .header-notices .notice-section .panel-top { width: 100%; margin: 0 0 37px 0; display: flex; column-gap: 15px; align-items: center; } header .header-notices .notice-section .panel-top .h3-like { margin: 0; } header .header-notices .notice-section .panel-top a { display: block; } header.show-alerts .header-notices .close-icon { top: 9px; } header .header-notices .notice-section .alert-messages { width: 100%; display: flex; justify-content: center; overflow: visible; padding: 0 30px; } header .header-notices .notice-section .alert-messages .swiper-slide { display: flex; justify-content: center; overflow: visible; } header .header-notices .notice-alert .alert-message { color: var(--font-body-color); font-size: 14px; line-height: 15px; position: relative; } header .header-notices .notice-alert .alert-message:before { content: ""; width: 10px; height: 10px; background-color: var(--body-media-bg-color); border-radius: 50%; display: block; position: absolute; top: calc(50% - 5px); left: -15px; } header .header-notices .notice-alert .alert-message:after { content: ""; display: block; position: absolute; width: calc(100vw - 1px); max-width: 1235px; height: 7px; transform: translateX(-50%); top: -15px; left: 50%; } header .header-notices .notice-alert .alert-message.closing:after { background-color: #8D63A5; } header .header-notices .notice-alert .alert-message.emergency:after { background-color: var(--brand-alternate-color); } header .header-notices .notice-alert .alert-message.announcement:after { background-color: #F0DF00; } header .header-notices .notice-alert .alert-message.closing:before { background-color: #8D63A5; } header .header-notices .notice-alert .alert-message.emergency:before { background-color: var(--brand-alternate-color); } header .header-notices .notice-alert .alert-message.announcement:before { background-color: #F0DF00; } header .header-notices .notice-alert .alert-message a { text-decoration: underline; } header .header-notices .notice-accessibility .access-options .access-section .h3-like { width: 100%; margin: 0 0 5px 0; font-size: 16px; line-height: 17px; } header .header-notices .notice-accessibility .access-options .access-section .option { align-items: center; } header .header-notices .notice-accessibility .access-options .access-section .option .icon { width: 22px; height: 22px; background-color: var(--button-secondary-bg-color); border: none; border-radius: initial; color: var(--font-body-color); font-family: 'Aleo', serif; font-size: 14px; font-weight: 600; line-height: 14px; /*display: flex;*/ } header .header-notices .notice-accessibility .access-options .access-section .option p { margin: 0; color: var(--font-body-color); font-size: 14px; line-height: 16px; } header .header-notices .notice-hour .hour-lists { flex-wrap: initial; } header .header-notices .notice-hour .hour-list { margin: 0; padding: 0; border: none; } header .header-notices .notice-hour .branch-item { /*width: 100%;*/ display: block; order: 1; } header .header-notices .notice-hour .branch-item.favorited { order: 0; } header .header-notices .notice-hour .branch-item.favorited:after { left: 0px; top: 0px; } header .header-notices .notice-hour .branch-item .h3-like { margin: 0 0 10px 0; font-size: 16px; line-height: 17px; } header .header-notices .notice-hour .branch-item.favorited .h3-like { margin-left: 16px; } header .header-notices .notice-hour .branch-item .branch-media .media { margin: 0 0 15px 0; border-radius: 5px; display: block; max-width: 300px; width: 100%; height: auto; } header .header-notices .notice-hour .branch-item .branch-media .media.default { width: 100%; height: 142px; background-color: var(--body-media-bg-color); border: 0.4px solid var(--brand-border-color); } header .header-notices .notice-hour .branch-item .branch-information { margin: 0 0 5px 0; color: var(--font-offset-color); font-size: 14px; line-height: 18px; } header .header-notices .notice-hour .branch-item p { margin: 0; color: var(--font-offset-color); font-size: 14px; line-height: 18px; } header .header-notices .notice-hour .branch-item p a { color: var(--font-offset-color); } header .header-notices .notice-hour .branch-item p .day { font-weight: 500; } header .header-notices .notice-hour .branch-item .change-week { display: flex; justify-content: space-between; margin-top: 5px; opacity: 0; transition: opacity .25s; } header .header-notices .notice-hour .branch-item:hover .change-week, header .header-notices .notice-hour .branch-item .change-week.active { opacity: 1; } header .header-notices .notice-hour .branch-item .change-week * { font: 600 14px/19px 'DM Sans'; text-transform: uppercase; flex: 1 1 0px; } header .header-notices .notice-hour .branch-item .change-week .progress { flex: unset; width: max-content; text-align: center; } header .header-notices .notice-hour .branch-item .change-week .next { text-align: right; } .utility-nav ul.nav-list li .list-dropdown { width: 250px; left: calc(50% - 125px); } header ul.nav-list li .list-dropdown ul { width: 100%; padding: 15px; background-color: var(--body-bg-color); border-radius: 15px; } .utility-nav ul.nav-list li .list-dropdown ul:after { /* TODO: remove this style from main */ display: none; } .utility-nav ul.nav-list li.dropdown-included:after { z-index: 5; } .utility-nav ul.nav-list li .link-name { display: block; position: relative; z-index: 5; } .utility-nav ul.nav-list li .link-backdrop { width: calc(100% + 30px); height: calc(100% + 20px); background-color: var(--header-list-bg-color); border-radius: 18px; opacity: 0; display: block; position: absolute; top: -10px; left: -15px; z-index: 1; transform: scaleX(0); transform-origin: 50% 50%; pointer-events: none; transition: opacity .2s, transform .2s; } .utility-nav ul.nav-list li:hover .link-backdrop, .utility-nav ul.nav-list li:focus-within .link-backdrop, .utility-nav ul.nav-list li.active .link-backdrop { opacity: 1; transform: scaleX(1); transition: opacity .3s .1s, transform .3s; } .utility-nav ul.nav-list li .list-dropdown ul li a:hover, .utility-nav ul.nav-list li .list-dropdown ul li a:focus, .utility-nav ul.nav-list li .list-dropdown ul li.active a { /* remove styles related to this state in main */ background-color: transparent; color: var(--font-secondary-color); } header ul.nav-list li .list-dropdown ul li a { width: auto; padding: 2px 0; color: var(--font-secondary-color); font: inherit; font-size: 14px; line-height: 16px; } .body { /*width: 100%;*/ position: relative; z-index: 5; } .left-sidebar .context-nav .nav-heading { margin: 0 0 17px 0; } .left-sidebar .context-nav .nav-group { width: 100%; margin: 0 0 19px 0; } .left-sidebar .context-nav .nav-group:last-of-type { margin: 0; } .left-sidebar .context-nav .nav-group .group-heading { width: 100%; margin: 0 0 8px 0; opacity: 0.6; color: var(--font-link-color); font-size: 14px; font-style: italic; text-transform: uppercase; line-height: 18px; display: block; } .left-sidebar .context-nav .nav-group ul { margin: 0; font-size: 15px; line-height: 18px; } .left-sidebar .context-nav .nav-group ul li { margin: 0; padding: 0; } .left-sidebar .context-nav .nav-group ul li:before { width: 9px; height: 100%; background-color: var(--font-body-color); border-radius: initial; display: none; top: 0; left: -25px; } .left-sidebar .context-nav .nav-group ul li.active:before { display: block; } .left-sidebar .context-nav .nav-group ul li a { padding: 4px 0; color: var(--font-body-color); font-weight: 300; display: block; } .body .lineage-container { margin: 50px 0 0 0; display: flex; justify-content: initial; row-gap: 50px; } .lineage-container .lineage-group { width: 100%; display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 40px; align-items: flex-start; } .lineage-container .lineage-group .group-media { width: 100%; max-width: 392px; background-color: var(--body-media-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 40px; } .lineage-container .lineage-group .group-media.default { height: 489px; } .lineage-container .lineage-group .group-items { width: calc(100% - (392px + 40px));/* 392px - is the group's media | 40px - is the space we want between both columns */ } .lineage-container .lineage-group .group-items .item { width: 100%; margin: 0 0 20px 0; padding: 30px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-radius: 40px; } .lineage-container .lineage-group .group-items .item:last-of-type { margin: 0; } .lineage-container .lineage-group .group-items .item .h3-like { margin-top: 0; } .lineage-container .lineage-group .group-items .item p { margin: 0 0 11px 0; color: var(--font-offset-color); } /* these are styles for mainly mac users (allows pixel amounts to go as low as 0.5px)*/ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .utility-nav ul.nav-notice li:before { top: -1px; } .utility-nav ul.nav-notice li:after { top: -1.5px; } } @media only screen and (max-width: 1242px) { .utility-nav { padding-top: 0; } .slider-container { /*width: calc(100% - 27px);*/ } } @media only screen and (max-width: 1200px) { .staff-questions .question:first-of-type { transform: translate(-60px, 130px); } .staff-questions .question:nth-of-type(2) { transform: translate(-60px, 395px); /*max-width: 400px;*/ } } /* this media query works as a middle-point between desktop -> tablet/mobile */ @media only screen and (max-width: 1150px) { .main-nav ul.nav-list { column-gap: 10px; } .staff-questions .question:first-of-type { transform: translate(-100px, 130px); } .staff-questions .question:nth-of-type(2) { transform: translate(-30px, 395px); } } @media only screen and (max-width: 1023px) { .desktop { display: none; } .tablet { display: block; } .default { background-size: 45px; } .wysiwygs-across.call-to-action h3 { font: 500 20px/22px 'DM Sans'; } .wysiwygs-across.call-to-action .wysiwygs { padding: 30px 20px; } .acc-container.tabs { margin: 0 0 25px 0; } .acc-container [role="tablist"] { width: 100%; flex-wrap: wrap; border: 1px solid rgba(26, 70, 79, .27); border-bottom: none; border-radius: 20px 20px 0 0; overflow: hidden; } .acc-container [role="tab"] { width: 100%; padding: 15px; border: none; border-bottom: 1px solid var(--brand-border-color); flex: initial; transition: background-color .3s; } .acc-container [role="tab"]:first-child { border-left: none; border-radius: initial; } .acc-container [role="tab"]:last-child { border-right: none; border-radius: initial; } .acc-container [role="tab"][aria-selected="true"] { background-color: var(--body-media-bg-color); transition: background-color .3s; } header { /*padding: 15px;*/ background-color: transparent; position: fixed; top: 0; left: 0; z-index: 35; transition: background-color .3s; } body.page-scrolled header { /*background-color: var(--body-offset-bg-color);*/ background-color: var(--blob-bg-color); } header.show-mobile-menu { background-color: var(--blob-bg-color); } header .header-notices .notice-section { padding: 22px 15px; } header .header-notices .notice-accessibility .access-options { column-gap: 25px; } header .header-notices .notice-hour .branch-item .change-week { opacity: .25; max-width: 300px; } header .header-notices .notice-hour .branch-item .change-week * { flex: unset; } header .header-wrapper { padding: 15px; align-items: center; } header .header-wrapper:before, header .header-wrapper:after { content: ""; width: 100%; opacity: 0; display: block; position: absolute; left: 0; } header .header-wrapper:before { height: 25px; /*background-color: var(--body-offset-bg-color);*/ background-color: var(--blob-bg-color); transform: none; top: calc(100% - 25px); z-index: 10; transition: opacity .3s; } body.page-scrolled header .header-wrapper:before { opacity: 1; transition: opacity .3s; } body header.show-mobile-menu .header-wrapper:before { opacity: 1; transition: opacity .3s; } header .header-wrapper:after { height: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.25); top: calc(100% - 10px); z-index: 5; transition: opacity .2s; } body.page-scrolled header .header-wrapper:after { opacity: 1; transition: opacity .2s .2s; } body header.show-mobile-menu .header-wrapper:after { opacity: 0; transition: opacity .2s; } header .site-logo { margin: 0; position: relative; z-index: 15; } header .site-logo img { max-height: 57px; width: auto; } header .site-navigations { width: calc(100% + 30px); /*width: 100%;*/ /*max-height: calc(100vh - 77px);*/ height: calc(100vh - 77px); padding: 0 30px 30px 30px; /*background-color: var(--body-offset-bg-color);*/ background-color: var(--blob-bg-color); opacity: 0; align-items: flex-start; position: absolute; top: 100%; left: -15px; overflow-x: hidden; overflow-y: scroll; transform: translateY(-15px); pointer-events: none; transition: opacity .3s, transform .3s; } body.resizing header .site-navigations { transition: none; } header.show-mobile-menu .site-navigations { opacity: 1; transform: translateY(0); pointer-events: all; transition: opacity .3s, transform .3s; } header ul.nav-list li { } header ul.nav-list li .list-dropdown:before { display: none; } header ul.nav-list li .list-dropdown ul li { opacity: 1; } header .header-notices .notice-accessibility .access-options .access-section { flex-direction: column; row-gap: 5px; } header .header-notices .notice-accessibility .access-options .access-section .option { margin: 0; } header .header-notices .notice-accessibility .access-options .access-section button.option { display: none; } /* .utility-nav, .main-nav, .top-search-input { opacity: 0; transform: translateY(-15px); pointer-events: none; transition: opacity .3s, transform .3s; position: absolute; } */ .utility-nav { padding: 0 15px; flex-direction: column; align-items: center; justify-content: center; order: 3; } .utility-nav ul.nav-notice { display: none; } .utility-nav ul.nav-notice li { padding: 12px 0 0 0; padding: 0; } .utility-nav ul.nav-notice li:before { /*top: -16px;*/ top: -35px; } .utility-nav ul.nav-notice li.mobile-menu:before { display: none; } .utility-nav ul.nav-notice li:after { top: -35.5px; } .utility-nav ul.nav-list { width: 100%; padding: 0; flex-direction: column; column-gap: initial; } .utility-nav ul.nav-list li { width: 100%; padding: 5px 0; /*border-bottom: 0.4px solid var(--brand-border-color);*/ /*flex-direction: column;*/ flex-wrap: wrap; justify-content: space-between; } .utility-nav ul.nav-list li.dropdown-included { padding: 15px 0; } .utility-nav ul.nav-list li.dropdown-included:after { display: none; } .utility-nav ul.nav-list li.dropdown-included .link-backdrop { display: none; } .utility-nav ul.nav-list li .list-dropdown, .utility-nav ul.nav-list li:hover .list-dropdown, .utility-nav ul.nav-list li:focus-within .list-dropdown { width: 100%; margin-top: 0; opacity: 0; position: absolute; top: -9999px; left: auto; transition: none; pointer-events: none; } .utility-nav ul.nav-list li.show-dropdown .list-dropdown { margin-top: 15px; opacity: 1; position: relative; top: auto; transition: margin .3s, opacity .3s; pointer-events: all; } .utility-nav ul.nav-list li a { padding: 0 17px; font-size: 16px; line-height: 18px; } .utility-nav ul.nav-social-list { /*flex-direction: column;*/ } body .home .blob.b1 { top: -160px; left: -70px; } .page-banner .banner-content .blob.b1 { transform: translate(33%, 36%); bottom: 50%; right: 55%; max-width: 115vw; } .main-nav { width: 100%; padding: 0 15px; order: 2; right: auto; } .main-nav ul.nav-list { padding: 0; flex-direction: column; } .main-nav ul.nav-list li { padding: 15px 0; border-bottom: 0.4px var(--brand-border-color); flex-wrap: wrap; justify-content: space-between; position: relative; } .main-nav ul.nav-list li a { padding: 0 15px; } .main-nav ul.nav-list li .link-backdrop { display: none; } header ul.nav-list li a.list-toggle { display: block; } header ul.nav-list li.show-dropdown a.list-toggle { transform: rotate(90deg) scaleX(-1); } header ul.nav-list li .list-dropdown, header ul.nav-list li:hover .list-dropdown, header ul.nav-list li:focus-within .list-dropdown{ margin-top: 0; box-shadow: none; opacity: 0; flex-direction: column; row-gap: 18px; position: absolute; top: -9999px; left: auto; pointer-events: none; transition: margin 0s, opacity 0s; } header ul.nav-list li.show-dropdown .list-dropdown { margin-top: 15px; opacity: 1; position: relative; top: auto; pointer-events: all; transition: margin .3s, opacity .3s; } header ul.nav-list li .list-dropdown .dropdown-group, header ul.nav-list li .list-dropdown ul { padding: 15px 20px; } header ul.nav-list li .list-dropdown .dropdown-media { display: none; } header ul.nav-list li .list-dropdown .dropdown-group ul li { padding: 5px 0; border: none; } /* - home page - */ .large-background-crop { height: 1536px; left: -15px; transform: unset; } #new_at_the_library_segment .large-background-crop { height: 3000px; bottom: -10px; } #for_you_segment .large-background-crop { height: 2019px; top: -66px; } #booklists_segment .large-background-crop { height: 2295px; } .top-search-input { margin-bottom: 20px; order: 1; } .top-search-input .search-toggle { display: none; } .top-search-input .onsite-search .onsite-search-input, .top-search-input .onsite-search .onsite-search-button { opacity: 1; transform: none; pointer-events: none; } header.show-mobile-menu .top-search-input .onsite-search .onsite-search-input, header.show-mobile-menu .top-search-input .onsite-search .onsite-search-button { pointer-events: all; } .top-search-input .onsite-search .onsite-search-input { max-width: none; background-color: var(--body-bg-color); } .utility-nav.mobile-version { padding: 0; opacity: 1; display: flex; align-items: flex-end; position: relative; transform: none; order: 0; pointer-events: all; z-index: 105; } .utility-nav.mobile-version ul.nav-notice { display: flex; } .utility-nav .mobile-menu .menu { min-height: 19px; position: relative; } .utility-nav .mobile-menu .menu .line { transition: opacity .2s, transform .2s; } header.show-mobile-menu .utility-nav .mobile-menu .menu .line { margin: 0; position: absolute; top: 9px; transition: opacity 0s, transform .3s; } header.show-mobile-menu .utility-nav .mobile-menu .menu .line:first-of-type { transform: rotate(45deg); } header.show-mobile-menu .utility-nav .mobile-menu .menu .line:nth-of-type(2) { transform: rotate(-45deg); } header.show-mobile-menu .utility-nav .mobile-menu .menu .line:nth-of-type(3) { opacity: 0; } header .circle-background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } header .circle-background .circle { border-radius: 50%; display: block; position: absolute; top: 0; } header .circle-background .circle:first-of-type { width: 56px; height: 56px; /*background-color: #F3A78F;*/ /*background-color: rgba(243,167,147,0.4);*/ background-color: var(--brand-alternate-color); opacity: 0.4; right: -9px; transform: translateY(5vh); } header .circle-background .circle:nth-of-type(2) { width: 66px; height: 66px; /*background-color: #F0DF00;*/ background-color: var(--brand-alternate-color-2); opacity: 0.3; left: -15px; transform: translateY(15vh); } header .circle-background .circle:nth-of-type(3) { width: 38px; height: 38px; /*background-color: #9562A9;*/ background-color: var(--brand-alternate-color-3); opacity: 0.3; left: -10px; transform: translateY(70vh); } header .circle-background .circle:nth-of-type(4) { width: 81px; height: 81px; /*background-color: #019ADE;*/ background-color: rgba(1,154,222,0.19); right: -20px; transform: translateY(75vh); } .tertiary .body .blob { transform: translate(-50%, 40%); right: unset; left: 0px; bottom: 0px; } .main-content { padding-top: 122px; overflow-x: hidden; } .main-content.home { overflow: hidden; } .page-content { padding: 50px 15px 0 15px; } .page-banner { margin-bottom: 75px; flex-direction: column; row-gap: 25px; } .page-banner h1 { text-align: center; } .page-banner p { text-align: center; } .page-banner .banner-content { max-width: none; } .home-events .main-events .events-swiper .swiper-slide { flex-direction: column; align-items: center; } .home-events .main-events .events-swiper .swiper-slide .slide-content { max-width: 724px; padding: 25px 0 0 0; } .home-events .main-events .events-swiper .swiper-pagination { max-width: unset; } .branch-favorites-section .information { width: calc(100% - 30px); height: 100vh; padding: 0 35px 0 35px; overflow-x: hidden; overflow-y: scroll; } .branch-favorites-section.show-overlay .information { padding: 35px 35px 120px 35px; } .branch-favorites-section .information .close-icon { position: fixed; right: 60px; } .branch-favorites-section .information .check-groups { flex-direction: column; } .branch-favorites-section .information .branches { width: 100%; margin: 0 0 25px 0; padding: 0 0 25px 0; border: none; border-bottom: 1px solid var(--hr-color); flex: initial; } .branch-favorites-section .information .explanation { /*width: calc(100% - (30px + 110px));*/ width: calc(100% - 30px); padding: 15px; background-color: var(--body-bg-color); border: 0.4px solid var(--brand-border-color); border-top: none; border-radius: 0 0 70px 70px; position: fixed; bottom: 0; left: 15px; } .branch-favorites-section .information .explanation:before { content: ""; width: 100%; height: 25px; background-image: var(--personalize-explanation-gradient); display: block; position: absolute; top: -25px; left: 0; z-index: 1; pointer-events: none; } .branch-favorites-section .information .explanation p, .branch-favorites-section .information .explanation a.button-like { position: relative; z-index: 5; } .discover-filters .expandable-section { position: absolute; max-height: unset; margin-top: 0; padding: 25px 15px; } .discover-filters.expanded .expandable-section { max-height: unset; max-width: 100%; } .discover-filters .tags { flex-direction: column; opacity: 0; transition: all .5s; } .discover-filters.expanded .tags { opacity: 1; max-height: unset; } .discover-filters.blogs .tags .tag-list.audience, .discover-filters.blogs .tags .tag-list.genres { /*width: unset;*/ /*flex: 1 1 0px;*/ } .discover-filters.blogs .tag-scroll { padding-bottom: 0; } .discover-filters .dates { margin-top: 10px; } .live-chat-section { max-width: none; margin: 22px 0; padding: 0 37px 0 0; } .quicklinks-container { width: calc(100% - 30px); max-width: none; margin: 75px 0 35px 15px; align-items: center; } .quicklinks-container .quicklinks { max-width: 875px; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; justify-content: center; } .branch-information-section { max-width: calc(100% - 30px); /*margin: 0 0 91px 15px;*/ margin: 0 0 0 15px; padding: 0; } .branch-information-section .information .event-info .event-day .info-content { column-gap: 0; /*row-gap: 17px;*/ flex-direction: column; } /*.branch-information-section .information .event-info .event-day .info-content .info-block {*/ /* border-top: 1px solid var(--hr-color);*/ /*}*/ /*.branch-information-section .information .event-info .event-day .info-content .info-block:first-of-type {*/ /* border-top: none;*/ /*}*/ .branch-information-section .information .event-info .event-day .info-content .info-block .info { border-bottom: unset; border-top: 1px solid var(--hr-color); padding: 17px 0 10px 0; margin: 5px 0 0 0; } /*.branch-information-section .information .event-info .event-day .info-content .info-block:first-of-type .info {*/ /* padding: 0 0 17px 0;*/ /*}*/ /*.branch-information-section .information .event-info .event-day .info-content .info-block .info:last-of-type {*/ /* padding: 0;*/ /*}*/ .branch-information-section .information .event-info .event-day .info-content .info-block:first-of-type .info:first-of-type { border-top: unset; padding: 0 0 10px 0; margin: 0; } .slider-container { width: 100%; margin-left: 0; } .slider-container.booklists { margin-left: 0; } .slider-container .swiper { width: 100%; margin-left: 0; } .slider-container.materials .swiper { padding: 0 21px; } .slider-container.booklists .swiper { width: calc(100% - 140px); margin: 0 auto; padding: 0; } .slider-container.booklists .swiper-button-prev { left: 0; } .slider-container.branches .swiper-button-prev, .slider-container.branches .swiper-button-next { height: 50%; top: 50%; transform: translateY(-50%); } .full-segment { max-width: calc(100% - 30px); margin: 0 0 125px 15px; padding: 0; } .upcoming-events .featured-event { flex-direction: column; align-items: unset; } .upcoming-events .featured-event .event-content { width: 100%; max-width: 725px; margin: 25px 0 0 0; } .upcoming-events .featured-event .event-content a.button-like { background-color: var(--button-secondary-bg-color); } .upcoming-events .featured-event .event-content a.button-like:before { background-color: var(--button-secondary-bg-color); } .promotion-segment { max-width: calc(100% - 30px); margin: 0 0 50px 15px; flex-direction: column; align-items: center; } .promotion-segment .segment-media-column { position: relative; z-index: 5; } .promotion-segment .segment-content-column { max-width: none; margin: 25px 0 0 0; z-index: 1; } .promotion-segment .segment-content-column:before { display: none; } .book-lists.filtered .book-list { flex-basis: calc((100% - 40px) / 2); } .eresources-section .eresource-entities .eresource { width: calc((100% - 25px) / 2); } .eresource-overlay .container { top: calc(50% + 60px); max-height: calc(100vh - 200px); } .personal-item { width: 100%; max-width: 311px; } .personal-item.forced-area { } .personal-item .item-content .booklist-books .book { width: 80px; height: 137px; } .blog-posts .post { flex-direction: column; gap: initial; row-gap: 15px; } .blog-posts .post .post-media { order: 0; } .blog-posts .post:nth-child(2n+1) .post-media { order: 0; } .blog-posts .post .post-content { width: 100%; order: 1; } .blog-posts.landing-page .post .post-content { /*max-width: 440px;*/ } .blog-posts .post:nth-child(2n+1) .post-content { order: 1; } .blog-posts .post.main .post-media { width: auto; max-width: none; /*height: auto;*/ margin: 0 0 10px 0; position: relative; top: auto; left: auto; } .blog-posts .post .post-about { max-width: none; margin: 0 0 15px 0; float: none; } .blog-post .left-sidebar { max-width: 250px; order: 0; } .blog-post .body { margin-top: 0; width: calc(100% - 275px); order: 1; } .blog-post .related-posts .posts-list { flex-wrap: wrap; gap: initial; column-gap: 15px; row-gap: 15px; } .blog-post .related-posts .posts-list .post { max-width: 350px; } .lineage-container .lineage-group { flex-direction: column; row-gap: 25px; } .lineage-container .lineage-group .group-media.default { height: 250px; } .lineage-container .lineage-group .group-items { width: 100%; display: flex; flex-wrap: wrap; column-gap: 15px; align-items: flex-start; } .lineage-container .lineage-group .group-items .item { max-width: 316px; margin: 0 0 15px 0; } .bucket { flex-direction: column; row-gap: 15px; } .bucket .bucket-media { max-width: 100%; margin: 0; } .bucket.has-image .bucket-content { width: 100%; } .main-content.home .bucket.action { width: calc(100% - 30px); margin: 30px 0 0 15px; padding: 0; } .main-content.home .bucket.action .bucket-content { max-width: 700px; margin: 0; } /*.main-content.home .bucket.action .bucket-content:before {*/ /* display: none;*/ /*}*/ .main-content.home .bucket.event { margin: 30px 0 0 15px; } /* - individual staff page - */ .main-content.staff { overflow: hidden; } .main-content.staff .page-content { padding-bottom: 700px; } .main-content.staff .page-body { display: flex; flex-direction: column; } .main-content.staff .page-content { padding-bottom: 600px; } .secondary.staff .page-banner .banner-media { max-width: calc(100vw - 50px); min-width: unset; max-height: unset; min-height: unset; width: 521px; aspect-ratio: 1/1; height: auto; } .large-background-blob { left: 0px; transform: unset; } .secondary.staff .page-banner .banner-content .blob.b1 { transform: translate(30%, 36%); left: unset; right: 50%; bottom: 50%; max-width: 115vw; transition: right .5s, bottom .5s; } .secondary.staff .page-content .body { display: flex; flex-direction: column; } .main-content.staff .staff-segment { width: calc(100% - 5px); padding-bottom: 50px; } .main-content.staff .staff-questions { position: relative; top: unset; left: unset; width: calc(100% - 5px); flex-direction: column; align-items: center; gap: 80px; margin-top: 100px; /*margin-bottom: -350px;*/ order: 2; } .main-content.staff .staff-questions .question { height: unset; transform: translate(0,0); } .main-content.staff .staff-fav-books { position: relative; height: 330px; width: auto; top: unset; right: unset; margin: auto; order: 1; } .secondary.staff .page-content .body .large-background-blob { transform: translateX(0); left: -290px; bottom: -400px; } /* - blog posts page - */ .blog-posts .post .post-media { width: 100%; } /* individual blog post */ .blog-post .blog-posts .post.main .post-media { aspect-ratio: 3/2; height: auto; } /* recommended-reads page */ .blog-posts.recommended-reads .post .post-media { width: 100%; } .blog-posts.recommended-reads .post .post-media.default { width: 50%; } .blog-posts.recommended-reads .post .post-media .media { background-position: left center; } .blog-posts.recommended-reads .post .post-content { width: 100%; } /* - secondary landing pages, secondary blobs - */ .secondary-background-blobs { max-height: 100%; flex-direction: row; flex-wrap: wrap; align-content: space-between; overflow: hidden; } .secondary-background-blobs .large-background-blob { width: 100%; } .secondary-background-blobs .large-background-blob.g2 { top: 2400px; } .secondary-background-blobs .large-background-blob.g3 { top: unset; bottom: -1600px; } .main-content.secondary .page-content, .main-content.tertiary .page-content { padding-bottom: 300px; } footer { width: calc(100% - 30px); margin: 0px 0 0 15px; padding-bottom: 15px; } footer .footer-wrapper { /*margin-top: 0;*/ margin: 0 30px 30px 30px; } footer .footer-hours { padding: 35px 30px 12px 30px; } footer .footer-info { max-width: none; margin-top: -30px; display: flex; flex-wrap: nowrap; justify-content: center; position: relative; top: auto; left: auto; } footer .footer-nav ul.footer-right-side { margin: 0; } } /* end 1023px */ @media only screen and (max-width: 936px) { #events_segment .large-background-blob { top: -50px; } #booklists_segment .large-background-blob { top: 500px; } .featured-filter { flex-direction: column; align-items: flex-start; } .upcoming-events-embed .day-section .section-events .event { width: 100%; } } @media only screen and (max-width: 750px) { .img_right_25, .img_right_50, .img_right_native, .img_left_25, .img_left_50, .img_left_native, .img_full_styled { float: none; width: auto; max-width: 100%; margin: 10px 0; } .img_native_block { max-width: 100%; } img { max-width: 100%; } .pullquote { width: 95vw; height: 95vw; max-width: 500px; max-height: 500px; } header .header-notices .close-icon { right: 15px; } header .header-notices .notice-section.notice-alert { /*padding: 15px 25px 10px 25px;*/ padding: 15px 0px 10px 0px; } header .header-notices .notice-section .alert-messages .swiper-slide { padding: 0 30px; } header .header-notices .notice-accessibility .access-options { flex-direction: column; row-gap: 15px; } header .header-notices .notice-accessibility .access-options .access-section { flex-direction: row; column-gap: 15px; } header .header-notices .notice-accessibility .access-options .access-section .h3-like { margin: 0; } header .header-notices .notice-accessibility .access-options .access-section .option .icon { display: none; } header .header-notices .notice-accessibility .access-options .access-section .option p { display: none; } header .header-notices .notice-accessibility .access-options .access-section .option.mobile { display: inline-block; } #events_segment .large-background-blob { top: -50px; } #booklists_segment .large-background-blob { top: 200px; } .page-content { flex-direction: column; /*row-gap: 50px;*/ } .left-sidebar { /*margin-top: 50px;*/ order: 1; } .left-sidebar .context-nav { margin-top: 50px; } .return-to-top-segment, .return-to-top-segment.clip-to-bottom { position: relative; bottom: -80px; } .return-to-top-segment a.button-like.return-to-top-button { opacity: 1; pointer-events: all; } .body { width: 100%; order: 0; } .booklist-books .body { order: 2; width: 100%; margin-top: 25px; } .booklist .books-list .book { width: calc((100% - 75px) / 4); } .blog-tag .body { width: 100%; } .page-content .body:has( .discover-filters.expanded) { z-index: 20; } .page-banner .banner-media { width: 95vw; height: 95vw; min-width: initial; min-height: initial; } table { max-width: unset; width: 100vw !important; padding: 0 15px; margin: 30px 0 40px -15px; overflow-x: scroll; } .personalize-option:hover a.personalize-button:before, .apply-favorites:hover a.apply:before { opacity: 0; } .personalize-option.show-tooltip a.personalize-button:before, .apply-favorites.show-tooltip a.apply:before { opacity: 1; } .personalize-option .tooltip, .apply-favorites .tooltip { width: 190px; top: 30px; left: auto; right: -35px; } .personalize-option:hover .tooltip, .apply-favorites:hover .tooltip { opacity: 0; pointer-events: none; } .personalize-option.show-tooltip .tooltip, .apply-favorites.show-tooltip .tooltip { opacity: 1; pointer-events: all; } .personalize-option .tooltip:before, .apply-favorites .tooltip:before { transform: rotate(45deg); top: -6px; left: auto; right: 35px; } .personalize-option .tooltip:after, .apply-favorites .tooltip:after { display: none; } .personalize-option .tooltip a.button-like, .apply-favorites .tooltip a.button-like { display: block; } .discover-filters .expandable-section { padding: 25px 0px; overflow: hidden; } .discover-filters .tags { max-height: unset; overflow: unset; } .discover-filters .tags .tag-list .h4-like { padding: 0 15px; } .discover-filters .tag-scroll { max-height: unset; overflow: unset; max-width: calc(100% + 15px); width: calc(100% + 15px); overflow-x: scroll; overflow-y: auto; } .discover-filters .tag-scroll ul { width: max-content; max-width: 300vw; padding: 0 15px; margin-right: 15px; } .discover-filters .letters { padding: 0 15px; } .discover-filters .current-filters { flex-wrap: wrap; } .discover-filters .current-filters .h3-like { flex: 1; } .discover-filters .current-filters .tagged-list { order: 4; width: 100%; flex: unset; } .discover-filters .dates { padding: 0 15px; } .branch-favorites-section .information .branches .checklist { column-count: 1; } .branch-information-section .information { padding: 35px 30px; flex-direction: column; border-radius: 40px; } .branch-information-section .information .info-top { margin: 0 0 15px 0; } .branch-information-section .information .basic-info { max-width: none; margin: 0 0 30px 0; padding: 0 0 30px 0; border: none; /*border-bottom: 1px solid var(--hr-color);*/ } .full-segment .segment-heading-row { align-items: center; justify-content: center; } .full-segment .segment-heading-row .h2-like { width: 100%; margin: 0 0 5px 0; text-align: center; } .full-segment .segment-heading-row a.button-like { margin: 10px auto 0 auto; } .audience-filter { width: 100%; } #new_at_the_library_segment .audience-filter { justify-content: center; flex-wrap: wrap; } .branch-information-section .audience-filter { justify-content: flex-start; } .upcoming-events .featured-event .event-media.default { min-height: 300px; } .upcoming-events .basic-events { margin: 30px 0 0 0; column-gap: initial; row-gap: 15px; flex-direction: column; align-items: center; } .upcoming-events .basic-events .event { max-width: none; } .promotion-segment .segment-media-column .media.default { min-height: 250px; } .blog-post .body { width: 100%; } .blog-posts .post.main .post-media { height: 300px; } .tertiary.blog-post h1 { margin-top: 25px; } .lineage-container .lineage-group .group-media { max-width: 100%; } .lineage-container .lineage-group .group-items { flex-direction: column; } .lineage-container .lineage-group .group-items .item { max-width: 100%; } /* - individual staff - */ .main-content.staff .page-content { padding-bottom: 200px; } .main-content.staff .staff-questions { margin-bottom: unset; } /* - tertiary page - */ .tertiary .body .blob.b1, .secondary.staff-list .body .blob.b1 { width: 500px; transform: translate(-23%, 45%); } .tertiary.blog-post .body .blob.b1 { transform: translate(-23%, 25%); } footer .footer-wrapper .down-arrow { display: none; } footer .footer-nav { gap: initial; } footer .footer-nav { gap: initial; } footer .footer-nav ul li { flex: initial; } footer .footer-nav ul li a { opacity: 1; } .footer-title { padding-bottom: 0; border: none; text-align: center; } footer .footer-nav ul.footer-right-side { gap: initial; flex-direction: column; row-gap: 20px; justify-content: center; align-items: center; order: 5; } footer .footer-nav ul.footer-right-side li.social-item {} footer .footer-nav ul.footer-right-side li.social-item .footer-title { display: none; } footer .footer-nav ul.social-links { column-gap: 5px; } footer .footer-nav ul.social-links li a { font-size: 17px; } footer .footer-nav ul li ul.list-dropdown { display: none; } footer .footer-nav .footer-main { margin: 24px 0 20px 0; gap: initial; /*column-gap: 28px;*/ row-gap: 20px; flex-direction: column; align-items: center; justify-content: center; order: 2; } footer .footer-nav .footer-main li.footer-border { flex: initial; } footer .footer-hours { padding: 18px; } footer .footer-hours .hour-heading { justify-content: center; } footer .footer-hours .hours-content { width: 100%; flex-direction: column; gap: initial; row-gap: 25px; } footer .footer-hours .hours-content .hour-lists { width: calc(100% - 90px); } footer .footer-hours .hours-content .hour-lists .swiper { width: 100%; } footer .footer-hours .hours-content .hour-lists .swiper-button-prev { left: -55px; } footer .footer-hours .hours-content .hour-lists .swiper-button-next { right: -55px; } footer .footer-credits { height: auto; padding: 15px 0 25px 0; flex-direction: column; } footer .footer-credits .credit-nav { margin: 10px 0; } footer .footer-credits .credit-nav ul { gap: initial; row-gap: 10px; flex-direction: column; } } @media only screen and (max-width: 670px) { .utility-nav ul.nav-notice li:before { top: -34px; } .utility-nav ul.nav-notice li:after { top: -34.5px; } } @media only screen and (max-width: 650px) { .branch-information-section .information .event-info .info-top { margin: 0 0 6px 0; } .branch-information-section .information .info-top a.personalize-button { margin: 0 11px; } .branch-information-section .information .event-info .info-top a.button-like { margin: 0; } .full-segment .segment-heading-row { justify-content: center; } .eresource-overlay .main { flex-direction: column; } .eresource-overlay .container .main .main-image { margin-bottom: 5px; } .eresources-section .letters-list li { width: calc((100% - 130px) / 13); } } @media only screen and (max-width: 550px) { .left-sidebar { max-width: none; } .left-sidebar .context-nav { max-width: none; } .wysiwygs-across.call-to-action .wysiwygs .wysiwyg { flex: initial !important; } .wysiwygs-across.call-to-action .wysiwygs .divider { width: 100%; height: 1px; } .eresource-overlay .container .main .main-image { max-width: 100%; } .personal-item .item-content .booklist-books .book { width: calc(33% - 6px); height: 31vw; } .featured-books > div, .book-lists .featured-list { flex-direction: column; } .book-lists.filtered { gap: 20px; } .staff-segment .staff-items .item { max-width: none; } .staff-segment .staff-items .item .item-media { height: 200px; } .upcoming-events-embed .day-section { flex-direction: column; row-gap: 15px; } .upcoming-events-embed .day-section .section-events { width: 100%; } .lineage-container .lineage-group .group-items .item { max-width: none; } } @media only screen and (max-width: 456px) { .utility-nav ul.nav-notice li:before { top: -33px; } .utility-nav ul.nav-notice li:after { top: -33.5px; } .booklist .books-list .book { width: calc((100% - 50px) / 3); } }