/* post-list-magic.css */ .post-list-magic-stacked a, .post-list-magic-list a, .post-list-magic-grid a, .post-list-magic-two-across a{ text-decoration: none; } .post-list-magic-wrapper h3 { font-size: 1em; margin-top: 0; } /*-------------------------------------------------------------- # Background Colors --------------------------------------------------------------*/.post-list-magic-wrapper.has-background { padding: 1.1em 1.1em 0 1.1em; margin-bottom: .5em; } .post-list-magic-widget.has-background { padding-bottom: 0.5em; padding-top: 0.1em; } /*-------------------------------------------------------------- # List View --------------------------------------------------------------*/ body ul.post-list-magic-list, #main ul.post-list-magic-list, .entry .post-list-magic-list li, .post-list-magic-list li{ list-style: none; margin-left: 0; padding-left: 0; list-style-type: none; } ul.post-list-magic-list li { line-height: 1.8em; padding-bottom: 1em; } .theme-discovery ul.post-list-magic-list li { padding-bottom: .7em; } /* Default grid view + square thumbnails. Theme specific styles below.*/ .post-list-magic-grid { display: flex; flex-wrap: wrap; gap: 3.5%; } .post-list-magic-grid p.clear { width: 100%; } .post-list-magic-grid-post { width: 150px; height: auto; text-align: center; line-height: 1.4em; margin-bottom: 3%; } .post-list-magic-grid-post .thumbnail-container { height: 150px; width: 150px; overflow: hidden; margin-bottom: .5em; } /*-------------------------------------------------------------- # Discovery Grid --------------------------------------------------------------*/ .theme-discovery .post-list-magic-grid-post { height: auto; width: 31%; } .theme-discovery .post-list-magic-grid-post .thumbnail-container { width: 100%; } .theme-discovery .post-list-magic-grid-post .thumbnail-container { height: auto; } /*.theme-discovery .post-list-magic-grid-post a, .theme-discovery .post-list-magic-grid-post a:link, .theme-discovery .post-list-magic-grid-post a:visited { color: #000; }*/ /*-------------------------------------------------------------- # Two Across --------------------------------------------------------------*/ .post-list-magic-two-across { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; } .post-list-magic-two-across-post { width: calc(50% - 25px); margin-bottom: 35px; text-align: center; } .post-list-magic-two-across-post .thumbnail-container { width: 100%; height: auto; background-color: #ececec; overflow: hidden; padding: 0; margin: 0; position: relative; padding-top: 44%; margin-bottom: 1.5em; } .post-list-magic-two-across-post .thumbnail-container img{ width: 100%; height: auto; margin: auto; position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; } .acf-block-preview .post-list-magic-two-across-post a.entry-title::before, .post-list-magic-two-across-post a.entry-title::before { content: ""; border-top: 1px solid #ececec; width: 50%; display: block; margin: 0 auto; padding-bottom: 15px; } .acf-block-preview .post-list-magic-two-across-post a.entry-title::after, .post-list-magic-two-across-post a.entry-title::after { content: ""; border-bottom: 1px solid #ececec; width: 50%; display: block; margin: 0 auto; padding-bottom: 15px; } .acf-block-preview .post-list-magic-two-across-post .thumbnail-container a::before, .acf-block-preview .post-list-magic-two-across-post .thumbnail-container a::after { content: none; } .post-list-magic-two-across-post a.entry-title { font-size: 24px; margin-top: 35px; } @media screen and (max-width: 700px) { .post-list-magic-two-across-post { width: 100%; } } /*-------------------------------------------------------------- # Circles --------------------------------------------------------------*/ .post-list-magic-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; margin-top: 60px; margin-bottom: 60px; } .post-list-magic-circles .post-list-magic-circles-post { max-width: 220px; text-align: center; } .post-list-magic-circles .post-list-magic-circles-post .thumbnail-container { overflow: hidden; width: 220px; height: 220px; } .post-list-magic-circles .post-list-magic-circles-post .thumbnail-container img { border-radius: 50%; width:100%; height:100%; object-fit: cover; } .post-list-magic-circles .post-list-magic-circles-post .thumbnail-container img::after { border-style: solid; border-width: 10px; border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1; } #content .post-list-magic-circles .post-list-magic-circles-post a { font-family: "Red Hat Display", "Red Hat Text", sans-serif; font-size: 1em; font-weight: 100; } .post-list-magic-circles .post-list-magic-circles-post a.entry-title::before { content: ""; border-top: 1px solid #ececec; width: 50%; display: block; margin: 0 auto; padding-bottom: 15px; margin-top: 35px; } .post-list-magic-circles .post-list-magic-circles-post a.entry-title::after { content: ""; border-bottom: 1px solid #ececec; width: 50%; display: block; margin: 0 auto; padding-top: 15px; } /*-------------------------------------------------------------- # Multisize --------------------------------------------------------------*/ .post-list-magic-multisize { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 8px; grid-template-areas: "one one two three" "one one two four" } .post-list-magic-multisize p.clear { width: 100%; } .post-list-magic-multisize-post { overflow: hidden; position: relative; } .post-list-magic-multisize-post img { max-width: none; width: auto; } .post-list-magic-multisize-post:nth-of-type(1) { height: 500px; grid-area: one; } .post-list-magic-multisize-post:nth-of-type(2) { height: 500px; grid-area: two; } .post-list-magic-multisize-post:nth-of-type(3) { height: 245px; grid-area: three; } .post-list-magic-multisize-post:nth-of-type(4) { height: 245px; grid-area: four; } .post-list-magic-multisize-post:nth-of-type(n + 5) { height: 245px; width: 1fr; } .post-list-magic-multisize-post:nth-of-type(3) .thumbnail-container, .post-list-magic-multisize-post:nth-of-type(4) .thumbnail-container { height: 245px; } .post-list-magic-multisize-post .thumbnail-container { height: 500px; } .post-list-magic-multisize-post .thumbnail-container{ display: flex; flex-direction: column; } .post-list-magic-multisize-post img{ height: 100%; min-width: 100%; } .post-list-magic-multisize-post .entry-title{ height: 100% } .post-list-magic-multisize-post .multisize-title { position: absolute; bottom: 0; width: 100%; background-color: rgb(0 0 0 / 50%); padding: 5px; } /*.post-list-magic-multisize-post p { position: absolute; margin-top: -5%; color: white; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding: 10px; width: 100%; }*/ .post-list-magic-multisize-post a, .post-list-magic-multisize-post a:link, .post-list-magic-multisize-post a:visited { color: white; } /*-------------------------------------------------------------- # Stacked View --------------------------------------------------------------*/ .post-list-magic-stacked-post { margin-top: 40px; display: flex; } .post-list-magic-stacked > div:first-of-type, .post-list-magic-list > li:first-of-type { margin-top: 0px; } .post-list-magic-stacked-post .post-list-magic-title { font-size: 1.5em; margin-bottom: 10px; padding-bottom: 5px; margin-top: 10px; } .post-list-magic-stacked-post .thumbnail-container { max-width: 21%; } .post-list-magic-stacked-post .excerpt-content-thumbnail { width: 77%; padding-left: 2%; } .post-list-magic-stacked-post .thumbnail-container p, .post-list-magic-stacked-post .excerpt-content-thumbnail p { margin-bottom: .4em; } /*-------------------------------------------------------------- # Separated Style --------------------------------------------------------------*/ .post-list-magic-wrapper.separated { background-color: #f7f8fb; border-top: 10px solid #c5050c; padding: 15px; margin-bottom: 15px; } .post-list-magic-circles.separated { padding-top: 30px; } .post-list-magic-widget.separated { padding-left: 25px; } .post-list-magic-widget.separated .post-list-magic-widget-post, .post-list-magic-widget.separated p { margin-bottom: 5px; } .post-list-magic-widget.separated p:first-of-type { margin-top: 10px; } .post-list-magic-list.separated { padding-top: 10px; } .post-list-magic-list.separated li { margin-left: 20px; } /*-------------------------------------------------------------- # Widget View --------------------------------------------------------------*/ div.post-list-magic-widget { text-align: left; } .post-list-magic-widget-post { line-height: 1.5em; margin-bottom: 15px; display: flex; } .post-list-magic-widget a { font-size: 1em; line-height: 1.5em; } .post-list-magic-widget .thumbnail-container:has(img) { max-height: 30.25px; width: 50px; overflow-y: clip; } .theme-kayak .post-list-magic-widget .thumbnail-container:has(img) { max-height: 50px; padding-right: 5px; } .post-list-magic-widget img { min-width: 50px; width: 50px; padding-right: 8px; padding-top: 4px; margin-bottom: 10px; } .post-list-magic-widget-post p { margin-bottom: 0; } /*-------------------------------------------------------------- # Tall Cards View --------------------------------------------------------------*/ .post-list-magic-wrapper.post-list-magic-tall-cards { display: flex; flex-flow: wrap; gap: 25px; padding-top: 20px; justify-content: center; } .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: calc(33% - 15px); margin-bottom: 0; background-color: #f7f8fb; padding: 25px 25px 50px 25px; text-align: center; display: flex; flex-direction: column; box-shadow: 2px 2px 8px rgb(0 0 0 / 10%); } .theme-discovery.page-template-default .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .theme-discovery.page-template-template-blank-slate .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: calc(25% - 20px); } .theme-kayak .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: calc(33% - 68px); } .theme-kayak.page-template-full-page .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: calc(25% - 69px); } .post-list-magic-wrapper.post-list-magic-tall-cards a.entry-title, .post-list-magic-wrapper.post-list-magic-tall-cards .continue-reading-button a{ text-decoration:none; } .post-list-magic-wrapper.post-list-magic-tall-cards .wisc-logo-background { margin: -25px; border-bottom: 4px solid #c5050c; } .post-list-magic-wrapper.post-list-magic-tall-cards .wisc-logo-background img { vertical-align: bottom; } .post-list-magic-wrapper.post-list-magic-tall-cards .thumbnail-container { width: 120px; margin: 0 auto; margin-top: -40px; height: 120px; border: 4px solid #f7f8fb; background-color: #e5e5e5; } .theme-kayak .post-list-magic-wrapper.post-list-magic-tall-cards .thumbnail-container { margin-bottom: 10px; } .post-list-magic-wrapper.post-list-magic-tall-cards .thumbnail-container img { width: 100%; height: 100%; object-fit: cover; } .post-list-magic-wrapper.post-list-magic-tall-cards .entry-header { margin-top: -20px; } .post-list-magic-wrapper.post-list-magic-tall-cards .entry-title { margin-bottom: 0; } .theme-kayak .post-list-magic-wrapper.post-list-magic-tall-cards .entry-title { font-size: 1.3em; } .post-list-magic-wrapper.post-list-magic-tall-cards .entry-title::before, .post-list-magic-wrapper.post-list-magic-tall-cards .entry-title::after { display: none; } .post-list-magic-wrapper.post-list-magic-tall-cards .tall-cards-excerpt{ flex-grow: 1; margin-bottom: 1em; word-wrap: break-word; } .post-list-magic-wrapper.post-list-magic-tall-cards .continue-reading-button a { color: white; background-color: #0479a8; padding: 7px 20px 7px 20px; font-size: .8em; } .post-list-magic-wrapper.post-list-magic-tall-cards .continue-reading-button a:hover { background-color: #1b97c9; } /*-------------------------------------------------------------- # Sticky Posts - General --------------------------------------------------------------*/ .stickies { width: 100%; } .stickies .sticky { display: block; } .post-list-magic-wrapper .stickies .featured-notice { text-transform: uppercase; font-weight: bold; color: #c29408; font-size: 18px; margin: 10px 0; } /*-------------------------------------------------------------- # Sticky Posts - Minimal --------------------------------------------------------------*/ .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-minimal div { padding-bottom: .7em; } /*-------------------------------------------------------------- # Sticky Posts - Grid --------------------------------------------------------------*/ .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid { display: flex; flex-wrap: wrap; gap: 3%; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid .grid-thumbnail { width: 100%; height: auto; background-color: #ececec; overflow: hidden; padding: 0; margin: 0; width: 100%; padding-top: 61%; overflow: hidden; position: relative; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid .grid-thumbnail img { width: 100%; height: auto; margin: auto; position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid .sticky-header-container { display: flex; width: 100%; flex-flow: wrap; justify-content: space-between; margin-bottom: 25px; margin-top: 25px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .featured-notice { padding: 0 20px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article { width: calc(50% - 1.5%); border-top: 3px solid #c5050c; border-bottom: 3px solid #c5050c; border-left: none; box-shadow: 0px 2px 11.7px 1.3px rgba(55, 55, 55, 0.06); margin-bottom: 25px; padding: 0; margin-right: 0; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article a { color: #0479a8; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .entry-title { margin-top: 0; margin-bottom: 0; text-align: left; line-height: 1em; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .entry-title::after, .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .entry-title::before { display: none; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .sticky-text { padding-bottom: 5px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .entry-header, .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .entry-excerpt { padding: 0 20px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article .entry-title a { font-size: 28px; color: #3c3c3c; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid.sticky-mod-odd article:first-of-type { margin-bottom: 20px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid.sticky-mod-odd article:first-of-type { width: 100%; display: flex; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid.sticky-mod-odd article:first-of-type img { height: 100%; object-fit: cover; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid.sticky-mod-odd article:first-of-type .grid-thumbnail { width: 50%; padding-top: 0; min-height: 400px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid.sticky-mod-odd article:first-of-type .sticky-text { width: 50%; } /*-------------------------------------------------------------- # Sticky Posts - Circle Thumbnail --------------------------------------------------------------*/ .post-list-magic-wrapper .ext-adv-post-list-sticky-circle { justify-content: center; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle { min-height: 200px; margin-top: 30px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle::after { content: ""; width: 80%; border-bottom: 1px solid #ececec; margin: 0 auto; margin-bottom: 15px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article { border-top: 3px solid #ebebeb; border-bottom: none; border-left: none; background-color: #f7f8fb; margin-top: 36px; margin-bottom: 75px; padding: 0; box-shadow: 2px 2px 8px #c3cbdf5e; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .sticky-text-content { display:flex; justify-content: space-between; align-items: center; padding: 20px 50px 20px 50px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .sticky-text-content > * { width: calc(50% - 10px); text-align: left; padding: 20px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-title a { font-size: .9em; color: #3c3c3c; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-title { text-align: right; margin-top: -67px; line-height: 1.2em; padding-top: 30px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-title::after { border-bottom: none; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle .sticky-header-container { background-image: url(../img/bw-swirls-thin.jpg); height: 40px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle .thumbnail-container { width: 150px; height: 150px; margin: -100px auto; border-radius: 100%; margin-bottom: -20px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article img { width: 100%; height: 100%; object-fit: cover; border-radius: 100%; border: 3px solid #ebebeb; background-color: white; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle hr { background-color: #e5e5e5; width: 50% } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-excerpt + p { display: none; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-excerpt .continue-reading-button { padding-bottom: 25px; } .post-list-magic-wrapper .stickies article .continue-reading-button a { color: white; background-color: #0479a8; padding: 7px 20px 7px 20px; font-size: .8em; } .post-list-magic-wrapper .stickies article .continue-reading-button a:hover { background-color: #1b97c9; } /*-------------------------------------------------------------- # Media Queries --------------------------------------------------------------*/ @media screen and (max-width: 1150px) { .theme-discovery.page-template-default .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .theme-discovery.page-template-template-blank-slate .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: calc(50% - 20px); } .theme-kayak .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .theme-kayak.page-template-full-page .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: calc(50% - 70px); } } @media screen and (max-width: 1000px) { .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .sticky-text-content { flex-direction: column; padding: 15px; margin-top: 70px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .sticky-text-content > * { width: 100%; text-align: left; padding-bottom: 0; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article h1 { margin-bottom: 0; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article h1, .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-title, .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-excerpt { text-align: left; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-circle article .entry-excerpt .continue-reading-button { padding-bottom: 30px; text-align: center; } } @media screen and (max-width: 900px) { .post-list-magic-wrapper .stickies.sticky-mod-odd article:first-of-type { width: 100%; display: flex; flex-direction: column; min-height: 250px; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid { height: 100%; } .post-list-magic-wrapper .stickies.sticky-mod-odd article:first-of-type .grid-thumbnail, .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid.sticky-mod-odd article:first-of-type .grid-thumbnail { width: 100%; padding-top: 0; min-height: 0; } .post-list-magic-wrapper .stickies.sticky-mod-odd article:first-of-type .sticky-text { width: 100%; } .post-list-magic-wrapper .stickies.sticky-mod-odd article:first-of-type img { object-fit: unset; position: relative; top: auto; right: auto; left: auto; bottom: auto; } .post-list-magic-wrapper .stickies.ext-adv-post-list-sticky-grid article { width: 100%; } } @media only screen and (max-width: 870px) { .theme-discovery .post-list-magic-grid-post { width: 48%; } } @media only screen and (max-width: 800px) { .post-list-magic-stacked-post .thumbnail-container { display: none; } .post-list-magic-stacked-post .excerpt-content-thumbnail { width: 100%; } } @media only screen and (max-width: 725px) { .theme-kayak .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: 100%; } } @media screen and (max-width: 600px) { .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .theme-kayak.page-template-full-page .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .theme-discovery.page-template-default .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post, .theme-discovery.page-template-template-blank-slate .post-list-magic-wrapper.post-list-magic-tall-cards .post-list-magic-tall-cards-post { width: 100%; } } @media screen and (max-width: 500px) { .post-list-magic-wrapper .stickies article .entry-title { width: 100%; text-align: center; } } @media only screen and (max-width: 570px) { .theme-discovery .post-list-magic-grid { justify-content: center; } .theme-discovery .post-list-magic-grid-post { width: 100%; } } /*-------------------------------------------------------------- # Print --------------------------------------------------------------*/ @media print { cets-post-list-magic-no-results-message-wrapper { display: none; } }