/* Theme Name: GVPL Theme URI: https://olliewp.com Description: A child theme for Ollie. Author: Affinity Bridge Author URI: https://affinitybridge.com Template: ollie Version: 1.0.5 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks Text Domain: gvpl */ :root { --wp--preset--font-size--normal: 18px; --wp--preset--font-size--huge: 42px; --wp--preset--color--gvpl-error: #be0000; } * { box-sizing: border-box; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; font-feature-settings: auto; font-kerning: auto; text-underline-offset: .25em; text-decoration-thickness: .05rem !important; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } html { font-family: sans-serif; font-size: 18px; -webkit-text-size-adjust: 100%; height: 100%; scroll-behavior: smooth; /* `clip` (not `hidden`) so the root does not become a scroll container. `overflow-x: hidden` forces the computed `overflow-y` to `auto`, which makes the scroller and breaks native #anchor jump links on the first click (needs a second click; seen in Edge). `clip` still clips horizontal overflow without establishing a scroll container. */ overflow-x: clip; } /* The Ollie Menu Designer plugin sets `overflow-x: hidden` on whenever a full-width mega menu is present (to contain the full-bleed menu). That forces the computed `overflow-y` to `auto`, making a second scroll container nested inside the scroller — two nested smooth scrollers fight over #anchor targets, so jump links overshoot and bounce back up. `clip` contains the menu horizontally without establishing a scroll container. The extra `html` in the selector raises specificity above the plugin rule regardless of stylesheet load order. */ html body:has(.wp-block-ollie-mega-menu__menu-container.menu-width-full) { overflow-x: clip; } address { display: block; font-style: normal; font-style: initial; unicode-bidi: isolate; } img { max-width: 100%; height: auto; border-style: none; } figure { overflow:hidden; } b, strong { font-weight: 700; } a { -webkit-text-decoration: underline color-mix(in srgb, currentColor 50%, transparent) 1px; text-decoration: underline color-mix(in srgb, currentColor 50%, transparent) 1px; } a:hover, a:focus { text-decoration-color: currentColor; } a.active { text-decoration-color: currentColor; } h1, h2, h3, h4, h5, h6, .wp-block-post-title { text-decoration: none; margin: 0; margin: initial; text-wrap: pretty; word-break: normal; word-break: auto-phrase; /* Handle URLs/long words */ overflow-wrap: normal; } /* Handle URLs/long words */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .wp-block-post-title a { color: inherit; text-decoration: none; } h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus, h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus, .wp-block-post-title a:hover, .wp-block-post-title a:focus { -webkit-text-decoration: underline currentColor 1px; text-decoration: underline currentColor 1px; } .wp-block-button__link { word-break: normal; word-break: auto-phrase; } /* Standardize form styling --------------------------------------------- */ input, button, textarea, select { font: inherit; } input[type="button"], input[type="email"], input[type="search"], input[type="submit"], input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; color: var(--wp--preset--color--gvpl-black, #000000); border-radius: 4px; border: solid 1px var(--wp--preset--color--gvpl-black-400, #c0c6cb); font-size: var(--wp--preset--font-size--small, 0.88rem); margin: 0; padding: 0.5rem 1rem; width: 100%; } select { color: var(--wp--preset--color--gvpl-black, #000000); border-radius: 4px; border: solid 1px var(--wp--preset--color--gvpl-black-400, #c0c6cb); font-size: var(--wp--preset--font-size--small, 0.88rem); margin: 0; padding: 0.5rem 1rem; width: 100%; } button[type="submit"], input[type="submit"], .search-filter-input-button { background: var(--wp--preset--color--gvpl-magenta-900, #c01c6e); border: none; color: var(--wp--preset--color--gvpl-white, #ffffff); cursor: pointer; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 0.75em 1rem; border-radius: 4px; width: auto; width: initial; } .is-style-section-blue button[type="submit"], .is-style-section-blue input[type="submit"], .is-style-section-blue .search-filter-input-button { background: var(--wp--preset--color--gvpl-white, #ffffff); color: var(--wp--preset--color--gvpl-sky-900, #0876b0); } button[type="submit"]:hover, button[type="submit"]:focus, button[type="submit"]:hover:not(.is-disabled):not(.search-filter-input-button--is-selected), input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:hover:not(.is-disabled):not(.search-filter-input-button--is-selected), .search-filter-input-button:hover, .search-filter-input-button:focus, .search-filter-input-button:hover:not(.is-disabled):not(.search-filter-input-button--is-selected) { background: var(--wp--preset--color--gvpl-magenta-500, #ec048a); color: var(--wp--preset--color--gvpl-white, #ffffff); text-decoration: none; } .is-style-section-blue button[type="submit"]:hover, .is-style-section-blue button[type="submit"]:focus, .is-style-section-blue button[type="submit"]:hover:not(.is-disabled):not(.search-filter-input-button--is-selected), .is-style-section-blue input[type="submit"]:hover, .is-style-section-blue input[type="submit"]:focus, .is-style-section-blue input[type="submit"]:hover:not(.is-disabled):not(.search-filter-input-button--is-selected), .is-style-section-blue .search-filter-input-button:hover, .is-style-section-blue .search-filter-input-button:focus, .is-style-section-blue .search-filter-input-button:hover:not(.is-disabled):not(.search-filter-input-button--is-selected) { background: var(--wp--preset--color--gvpl-magenta-500, #ec048a); color: var(--wp--preset--color--gvpl-white, #ffffff); } button[type="submit"].gvpl-search-block__submit, input[type="submit"].gvpl-search-block__submit, .search-filter-input-button.gvpl-search-block__submit { padding: 0.45em 1rem; font-size: 19px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--wp--preset--color--gvpl-sky-500, #00aeef); outline-offset: 2px; } input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; } label { width: 100%; display: block; font-size: var(--wp--preset--font-size--small, 0.88rem); font-weight: 600; line-height: 1.6; } .form-actions { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } ::-moz-placeholder { color: var(--wp--preset--color--gvpl-black-400, #c0c6cb); font-size: var(--wp--preset--font-size--small, 0.88rem); opacity: 0.75; } ::placeholder { color: var(--wp--preset--color--gvpl-black-400, #c0c6cb); font-size: var(--wp--preset--font-size--small, 0.88rem); opacity: 0.75; } .nf-error-msg { background: var(--wp--preset--color--gvpl-error); border: 1px solid var(--wp--preset--color--gvpl-error); color: var(--wp--preset--color--gvpl-white, #ffffff); padding: 0.5rem; margin: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)) 0 0; border-radius: 4px; } :root :where(.wp-block-query-pagination a:where(:not(.wp-element-button))) { background: var(--wp--preset--color--gvpl-magenta-900, #c01c6e); border: none; color: var(--wp--preset--color--gvpl-white, #ffffff); cursor: pointer; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 0.75em 1rem; border-radius: 4px; width: auto; width: initial; } :root :where(.wp-block-query-pagination a:where(:not(.wp-element-button))):hover, :root :where(.wp-block-query-pagination a:where(:not(.wp-element-button))):focus { background: var(--wp--preset--color--gvpl-magenta-500, #ec048a); color: var(--wp--preset--color--gvpl-white, #ffffff); text-decoration: none; } .search-filter-input-text { display: flex; flex-direction: row; align-items: center; justify-content: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; overflow: visible; width: 100%; max-width: 100%; gap: var(--search-filter-input-gap, 0); color: inherit; border-radius:0; border: 0; font-size: inherit; margin: 0; padding: 0; } .search-filter-input-text input[type=text].search-filter-input-text__input, .search-filter-input-text input[type=text].search-filter-input-text__input:active, .search-filter-input-text input[type=text].search-filter-input-text__input:focus, .search-filter-input-text input[type=text].search-filter-input-text__input:hover, .search-filter-input-text input[type=number].search-filter-input-text__input, .search-filter-input-text input[type=number].search-filter-input-text__input:active, .search-filter-input-text input[type=number].search-filter-input-text__input:focus, .search-filter-input-text input[type=number].search-filter-input-text__input:hover { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; color: var(--wp--preset--color--gvpl-black, #000000); border-radius: 4px; border: solid 1px var(--wp--preset--color--gvpl-black-400, #c0c6cb); font-size: var(--wp--preset--font-size--small, 0.88rem); margin: 0; padding: 0.75rem 1rem; width: 100%; line-height: inherit; } .search-filter-input-text input[type=text].search-filter-input-text__input:focus-visible, .search-filter-input-text input[type=text].search-filter-input-text__input:active:focus-visible, .search-filter-input-text input[type=text].search-filter-input-text__input:focus:focus-visible, .search-filter-input-text input[type=text].search-filter-input-text__input:hover:focus-visible, .search-filter-input-text input[type=number].search-filter-input-text__input:focus-visible, .search-filter-input-text input[type=number].search-filter-input-text__input:active:focus-visible, .search-filter-input-text input[type=number].search-filter-input-text__input:focus:focus-visible, .search-filter-input-text input[type=number].search-filter-input-text__input:hover:focus-visible { outline: 2px solid var(--wp--preset--color--gvpl-sky-500, #00aeef); outline-offset: 2px; } .search-filter-input-checkbox__count { white-space: nowrap; } .wp-block-search-filter-choice-checkbox .search-filter-label { align-items: center; background-color: var(--wp--preset--color--gvpl-sky-900, #0876b0); border-radius: 4px; box-sizing: border-box; color: var(--wp--preset--color--gvpl-white, #ffffff); cursor: pointer; padding: .375em 1em; } .wp-block-search-filter-choice-checkbox .search-filter-input-group { border-bottom: 1px solid var(--wp--preset--color--gvpl-black-400, #c0c6cb); padding: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)) var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)) var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)); margin-bottom: var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)); } .search-filter-label__toggle-icon .search-filter-icon__svg { fill: var(--wp--preset--color--gvpl-white, #ffffff); color: var(--wp--preset--color--gvpl-white, #ffffff); } .search-filter-style--search-text.search-filter-field--width-100 { width: 100%; } .gvpl-search-block__select, .gvpl-search-block__input { background: var(--wp--preset--color--gvpl-white, #ffffff); color: var(--wp--preset--color--gvpl-black, #000000); border: none; } .gvpl-search-block__select:focus, .gvpl-search-block__select:focus-visible, .gvpl-search-block__input:focus, .gvpl-search-block__input:focus-visible { outline: 2px solid var(--wp--preset--color--gvpl-sky-500, #00aeef); outline-offset: 2px; } .gvpl-search-block__select { padding-right: 2.25rem; font-weight: 600; color: var(--wp--preset--color--gvpl-sky-900, #0876b0); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 140px; width: 100%; } .gvpl-search-block__select .gvpl-search-block__dropdown:after { border: 5px solid transparent; border-top: 5px solid var(--wp--preset--color--gvpl-sky-900, #0876b0); content: ""; pointer-events: none; position: absolute; right: .75rem; top: 58%; transform: translateY(-50%); } .input-group { display: flex; flex-direction: column; flex: 1; gap: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } .gvpl-search-block__input-group { display: flex; flex: 1; min-width: 200px; flex-wrap: nowrap; gap: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } .breadcrumbs { padding: 5px 0; } .wp-block-button.is-style-fill .wp-block-button__link { background-color: var(--wp--preset--color--gvpl-magenta-900, #c01c6e); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; color: var(--wp--preset--color--gvpl-white, #ffffff); font-size: 16px; font-style: normal; font-weight: 700; padding-top: 0.75em; padding-right: 0.75em; padding-bottom: 0.75em; padding-left: 0.75em; text-decoration: none; } .wp-block-button.is-style-fill .wp-block-button__link:hover { background-color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); color: var(--wp--preset--color--gvpl-white, #ffffff); text-decoration: none; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent none; background-color: var(--wp--preset--color--gvpl-white, #ffffff); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-color: currentColor; border-width: 0px; border-style: solid; color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); font-size: 16px; font-style: normal; font-weight: 700; outline-color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); outline-offset: -2px; outline-style: solid; outline-width: 2px; padding-top: 0.75em; padding-right: 0.75em; padding-bottom: 0.75em; padding-left: 0.75em; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--gvpl-magenta-900, #c01c6e); color: var(--wp--preset--color--gvpl-white, #ffffff); text-decoration: none; outline-color: transparent; } /* Focus styles */ :where(.wp-site-blocks *:focus-visible) { outline-width: 2px; outline-offset: 2px; outline-style: solid; outline-color: var(--wp--preset--color--gvpl-sky-500, #00aeef); } .has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog { margin-top: 0; } .wp-block-navigation__responsive-container-close { position: absolute; right: 20px; top: 20px; z-index: 2; } .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--wp--preset--color--gvpl-sky-900, #0876b0) !important; color: var(--wp--preset--color--gvpl-white, #ffffff) !important; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { background-color: var(--wp--preset--color--gvpl-sky-900, #0876b0); padding-top: calc(1rem + 24px) !important; } .wp-block-navigation .has-child.open-always>.wp-block-navigation__submenu-container { display: flex; /*padding-left: 0; padding-right: 0;*/ } .mega-menu-columns ul, .mega-menu-columns .wp-block-navigation__container{ display: flex; flex-flow: wrap column; -moz-column-gap: 3rem; column-gap: 3rem; max-height: 15rem; width: 100%; } .mega-menu-columns .wp-block-navigation-item { max-width: calc(50% - 1.5rem); } .mega-menu-columns .wp-block-navigation-item__content { white-space: normal; overflow-wrap: break-word; word-break: break-word; } .wp-block-navigation__mobile-menu-content .wp-block-accordion-heading { background-color: transparent; padding-left: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); padding-right: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } .wp-block-navigation__mobile-menu-content .wp-block-accordion-panel { color: var(--wp--preset--color--gvpl-white, #ffffff); } /* Footer Menu Columns - Multi-column responsive layout using Flexbox */ .footer-menu-columns > ul, .footer-menu-columns > .wp-block-navigation__container { --footer-menu-height: 600px; --footer-menu-columns: 5; --footer-menu-gap: 1.5rem; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 0 var(--footer-menu-gap); max-height: var(--footer-menu-height); width: 100%; max-width: 1340px; margin: 0 auto; } /* Each top-level item width based on column count */ .footer-menu-columns > ul > li, .footer-menu-columns > .wp-block-navigation__container > li { width: calc((100% - (var(--footer-menu-gap) * (var(--footer-menu-columns) - 1))) / var(--footer-menu-columns)); margin-bottom: 1rem; flex-shrink: 0; } /* Prevent width shifts on hover/focus by ensuring consistent sizing */ .footer-menu-columns a { display: inline-block; font-weight: inherit; max-width: 100%; text-wrap: pretty; word-break: normal; word-break: auto-phrase; /* Handle URLs/long words */ overflow-wrap: normal; /* Handle URLs/long words */ } .footer-menu-columns a:hover, .footer-menu-columns a:focus, .footer-menu-columns li:focus-within a { font-weight: inherit; } /* Override Gutenberg's submenu width behavior to keep footer columns stable */ .footer-menu-columns .wp-block-navigation__submenu-container, .footer-menu-columns .has-child:hover > .wp-block-navigation__submenu-container, .footer-menu-columns .has-child:focus-within > .wp-block-navigation__submenu-container, .footer-menu-columns .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { width: 100% !important; min-width: 0 !important; max-width: 100%; } /* Responsive breakpoints - increase height as columns decrease */ @media (max-width: 1400px) { .footer-menu-columns > ul, .footer-menu-columns > .wp-block-navigation__container { --footer-menu-height: 700px; --footer-menu-columns: 5; } } @media (max-width: 1200px) { .footer-menu-columns > ul, .footer-menu-columns > .wp-block-navigation__container { --footer-menu-height: 900px; --footer-menu-columns: 4; } } @media (max-width: 992px) { .footer-menu-columns > ul, .footer-menu-columns > .wp-block-navigation__container { --footer-menu-height: 900px; --footer-menu-columns: 4; } } @media (max-width: 768px) { .footer-menu-columns > ul, .footer-menu-columns > .wp-block-navigation__container { --footer-menu-height: 1500px; --footer-menu-columns: 2; } } @media (max-width: 480px) { .footer-menu-columns > ul, .footer-menu-columns > .wp-block-navigation__container { max-height: none; flex-wrap: nowrap; --footer-menu-columns: 1; } } .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon { align-self: center; display: inline-block; font-size: inherit; height: 10px; line-height: 0; margin-left: 3px; padding: 0; width: 12px; } .wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.open-always.wp-block-navigation-submenu { gap: .5rem; } .wp-block-navigation .has-child .wp-block-navigation__submenu-container { z-index: 99; } .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle { display: flex; } .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon, .wp-block-navigation .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--gvpl-sky-900, #0876b0); align-self: center; display: inline-block; font-size: inherit; height: 12px; line-height: 0; margin-left: 3px; padding: 0; width: 12px; } .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon svg, .wp-block-navigation .wp-block-navigation__submenu-icon svg { stroke: currentColor; display: inline-block; height: inherit; transition: all .125s linear; width: inherit; } .wp-block-table.is-style-stripes { border-bottom: 0; } .wp-block-table.is-style-stripes thead { border-bottom: 3px solid var(--wp--preset--color--gvpl-sky-900, #0876b0); } .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th { border: 0; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--gvpl-sky-50, #effbff); } /*.faq-item-wrapper{*/ details h2, details h3, details h4, details h5, details h6 { margin-top: 0; margin-bottom: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } details ul { list-style: disc; margin-left: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } details ul li { margin-bottom: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } details p, details ul { margin-top: 0; margin-bottom: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } details p:last-child, details ul:last-child { margin-bottom: 0; } details { background: var(--wp--preset--color--gvpl-sky-50, #effbff); border-radius: 10px; color: var(--wp--preset--color--gvpl-black, #000000); } details[open] { padding-bottom: clamp(1rem, 5vw, 1.25rem); } details > summary { padding-top: clamp(1rem, 5vw, 1.25rem); padding-right: clamp(1rem, 5vw, 1.25rem); padding-bottom: clamp(1rem, 5vw, 1.25rem); padding-left: 45px; font-size: 20px; font-weight: 500; outline: none; list-style: none; color: var(--wp--preset--color--gvpl-sky-900, #0876b0); position: relative; } details > summary:focus-visible { outline: 2px solid var(--wp--preset--color--gvpl-sky-500, #00aeef); outline-offset: 2px; /*outline: .5rem solid #06c7;*/ } details > *:not(summary) { padding-right: var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)); padding-left: var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)); } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: ""; width: 16px; height: 1.85rem; background: url("/wp-content/themes/gvpl/assets/images/caret.svg") left center no-repeat; background-size: contain; position: relative; display: block; margin: 0; position: absolute; top: clamp(1rem, 5vw, 1.25rem); left: var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)); } details[open] > summary::before{ content: ""; background: url("/wp-content/themes/gvpl/assets/images/caret.svg") left center no-repeat; background-size: contain; transform: rotate(180deg); } /*}*/ .search-filter-field .search-filter-input-button-group { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; } .search-filter-field .search-filter-input-button-group .search-filter-checkable-button { width: 100%; display: block; text-align: left; border-radius: 4px; border: 0; background: var(--wp--preset--color--gvpl-sky-900, #0876b0); color: #fff; } .search-filter-field .search-filter-input-button-group .search-filter-checkable-button .search-filter-input-button { background: var(--wp--preset--color--gvpl-sky-900, #0876b0); color: var(--wp--preset--color--gvpl-white, #ffffff); border: 0; } .search-filter-field .search-filter-input-button-group .search-filter-checkable-button .search-filter-input-button.search-filter-checkable-button__label { cursor: pointer; display: flex; flex-direction: row; width: var(--search-filter-input-label-width, 100%); justify-content: var(--search-filter-count-justification, flex-start); } .search-filter-field .search-filter-input-button-group .search-filter-checkable-button .search-filter-input-button.search-filter-input-button--is-selected { background: var(--wp--preset--color--gvpl-sky-50, #effbff); color: var(--wp--preset--color--gvpl-sky-900, #0876b0); } .search-filter-field .search-filter-input-button-group .search-filter-checkable-button .search-filter-input-button:hover:not(.is-disabled):not(.search-filter-input-button--is-selected) { background: var(--wp--preset--color--gvpl-sky-50, #effbff); color: var(--wp--preset--color--gvpl-sky-900, #0876b0); border-color: transparent; } .is-style-media-card-block { gap: var(--wp--preset--spacing--large, clamp(1rem, 5vw, 1.5rem)); } @media (min-width: 600px) { .is-style-media-card-block { /*grid-template-columns: 100% !important;*/ } } @media (min-width: 680px) { .is-style-media-card-block { /*grid-template-columns: 50% auto !important;*/ } } @media (min-width: 768px) { .is-style-media-card-block { gap: var(--wp--preset--spacing--x-large, clamp(1.5rem, 7vw, 2.5rem)) /*grid-template-columns: 55% auto !important;*/ } } @media (min-width: 1024px) { .is-style-media-card-block { /*grid-template-columns: 60% auto !important;*/ } } .is-style-media-card-block > .wp-block-media-text__media { display: block; margin: 0; aspect-ratio: 8 / 5; overflow: hidden; } .is-style-media-card-block > .wp-block-media-text__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 679px) { .is-style-media-card-block.is-stacked-on-mobile { grid-template-columns: 100% !important } } @media (max-width: 679px) { .is-style-media-card-block.is-stacked-on-mobile > .wp-block-media-text__media { grid-column: 1; grid-row: 1 } } @media (max-width: 679px) { .is-style-media-card-block.is-stacked-on-mobile > .wp-block-media-text__content { grid-column: 1; grid-row: 2 } } @media (min-width: 680px) { .is-style-media-card-block.has-media-on-the-right { /*grid-template-columns: auto 50% !important;*/ } } @media (min-width: 768px) { .is-style-media-card-block.has-media-on-the-right { gap: var(--wp--preset--spacing--x-large, clamp(1.5rem, 7vw, 2.5rem)) /*grid-template-columns: auto 55% !important;*/ } } @media (min-width: 1024px) { .is-style-media-card-block.has-media-on-the-right { /*grid-template-columns: auto 60% !important;*/ } } .is-style-media-card-block > .wp-block-media-text__media { align-self: start; margin-top: calc(var(--wp--preset--spacing--large, clamp(1rem, 5vw, 1.5rem)) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); margin-right: calc(var(--wp--style--root--padding-left) * -1); } @media (min-width: 680px) { .is-style-media-card-block > .wp-block-media-text__media { margin: 0 } } @media (min-width: 768px) { .is-style-media-card-block > .wp-block-media-text__media { align-self: inherit } } .is-style-media-card-block > .wp-block-media-text__content { display: flex; flex-direction: column; padding: 0; gap: var(--wp--preset--spacing--large, clamp(1rem, 5vw, 1.5rem)); } @media (min-width: 680px) { .is-style-media-card-block > .wp-block-media-text__content { padding: 0 } } .is-style-media-quote-block .wp-block-quote cite { color: var(--wp--preset--color--gvpl-white, #ffffff); font-style: normal; padding-bottom: 1rem; } .is-style-vertical-media-card-block { grid-template-columns: 100% !important; gap: var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)); display: flex; flex-direction: column; } .is-style-vertical-media-card-block > .wp-block-media-text__media { display: block; margin: 0; aspect-ratio: 8 / 5; overflow: hidden; } .is-style-vertical-media-card-block > .wp-block-media-text__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .is-style-vertical-media-card-block > .wp-block-media-text__content { padding: 0; display: block; } .sticky-buttons{ position: fixed; bottom: 20vh; right: 1rem; } .shadow-button{ box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.10);border-radius:100px; width:50px; overflow:hidden; } /* core/search block — button matches the core/button Fill style from theme.json */ .wp-block-search .wp-block-search__input { border: 1px solid var(--wp--preset--color--gvpl-black-400, #c0c6cb); border-radius: 4px; padding: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); width: 100%; font-size: var(--wp--preset--font-size--normal); } .wp-block-search .wp-block-search__button { background-color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); color: var(--wp--preset--color--gvpl-white, #ffffff); border: none; border-radius: 4px; padding: 0.75em; padding-inline: 1.5em; font-size: var(--wp--preset--font-size--small, 0.88rem); font-weight: 700; text-decoration: none; } .wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:focus-visible { background-color: var(--wp--preset--color--gvpl-magenta-900, #c01c6e); color: var(--wp--preset--color--gvpl-white, #ffffff); text-decoration: none; } .grouped-taxonomy-query .term-group, .grouped-taxonomy-query .grouped-taxonomy-query__no-results { padding: var(--wp--preset--spacing--large, clamp(1rem, 5vw, 1.5rem)) 0; margin: 0; } .grouped-taxonomy-query .term-group-heading { border-top: 1px solid var(--wp--preset--color--gvpl-black-400, #c0c6cb); font-size: var(--wp--preset--font-size--small, 0.88rem); font-style: normal; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: var(--wp--preset--spacing--large, clamp(1rem, 5vw, 1.5rem)) 0; } /* Post Excerpt --------------------------------------------- */ ul[class*="columns-"].wp-block-post-template .wp-block-post-excerpt__more-text, .wp-block-post-excerpt__more-text { margin-top: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } div[class*="is-style-excerpt-truncate-"], div[class*="is-style-excerpt-truncate-"] .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .is-style-excerpt-truncate-2, .is-style-excerpt-truncate-2 .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 2; } .is-style-excerpt-truncate-3, .is-style-excerpt-truncate-3 .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 3; } .is-style-excerpt-truncate-4, .is-style-excerpt-truncate-4 .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 4; } /* Separator --------------------------------------------- */ hr, .wp-block-separator { opacity: 1; width: 100%; border-top: 0; border-bottom: 1px solid var(--wp--preset--color--gvpl-black-400, #c0c6cb); } .wp-block-separator:not(.is-style-dots), .wp-block-separator.has-background:not(.is-style-dots) { border-bottom: 1px solid currentColor; height: 1px; } .wp-block-separator.is-style-dots::before { font-family: sans-serif; font-size: var(--wp--preset--font-size--large, 1.33rem); letter-spacing: 10px; padding-left: 10px; } hr.is-style-separator-dotted, .editor-styles-wrapper hr.is-style-separator-dotted { width: 100% !important; height: 1px !important; border: none !important; height: 1px !important; background-color: none !important; background: currentColor !important; background: repeating-linear-gradient(90deg,currentColor,currentColor 2px,transparent 2px,transparent 5px) !important; } .wp-block-separator.is-style-separator-thin { border-bottom-width: 1px !important; } .wp-block-separator.is-style-wide { border-bottom-width: 8px !important; } /* List --------------------------------------------- */ /* List styles for default unordered lists */ .entry-content ul li, .entry-content ol li, .wp-block-post-content ul li, .wp-block-post-content ol li { margin-bottom: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } .entry-content ul ul, .entry-content ol ul, .wp-block-post-content ul ul, .wp-block-post-content ol ul { margin-top: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); } /* Remove paddings */ .entry-content :not(.wp-block-group) > li:first-child { padding-top: 0; } .entry-content :not(.wp-block-group) li:last-child { padding-bottom: 0; } ul.is-style-list-check, ul.is-style-list-check ul, ul.is-style-list-check-circle, ul.is-style-list-check-circle ul { padding-inline-start: 0px !important; padding-left: 0; list-style: none; } .entry-content ul.is-style-list-check, .entry-content ul.is-style-list-check-circle { padding-inline-start: .5rem; } ul.is-style-list-check li, ul.is-style-list-check-circle li { position: relative; padding-left: calc(var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)) + .5rem); } ul.is-style-list-check li:before, ul.is-style-list-check-circle li:before { content: "\2713"; position: absolute; left: 0; top: .1em; } ul.is-style-list-check-circle li:before { background: var(--wp--preset--color--gvpl-sky-900, #0876b0); color: var(--wp--preset--color--gvpl-white, #ffffff); border-radius: 100px; height: 1.5rem; width: 1.5rem; line-height: 1.5rem; text-align: center; font-size: var(--wp--preset--font-size--normal); transform: scale(.8); } ul.is-style-list-check-circle li { padding-left: calc(var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)) + .5rem); } @media (max-width: 781px) { ul.is-style-list-check-circle li:before { top: .05em; } ul.is-style-list-check-circle li { padding-left: calc(var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)) + .8rem); } } /* Boxed list style */ ul.is-style-list-boxed, ol.is-style-list-boxed, ul.is-style-list-boxed.wp-block, ol.is-style-list-boxed.wp-block { background: var(--wp--preset--color--gvpl-sky-50, #effbff); padding: var(--wp--preset--spacing--medium, clamp(.5rem, 4vw, 1rem)) var(--wp--preset--spacing--large, clamp(1rem, 5vw, 1.5rem)); border-radius: 5px; } ul.is-style-list-boxed li:last-child, ol.is-style-list-boxed li:last-child { margin-bottom: 0; } /* Program Query Filter --------------------------------------------- */ .wp-block-program-filter { display: flex; flex-direction: column; gap: 1.25rem; } .wp-block-program-filter__dropdowns { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.5rem; gap: 1.5rem; } .wp-block-program-filter__field { display: flex; flex-direction: column; gap: 0.35rem; } .wp-block-program-filter__label { font-size: 0.8125rem; font-weight: 400; color: var(--wp--preset--color--gvpl-black-800, #48494b); } .wp-block-program-filter__select { width: 100%; padding: 0.875rem 2.75rem 0.875rem 1rem; background-color: var(--wp--preset--color--gvpl-sky-100, #e5f7fd); border: none; border-radius: 4px; font-size: 1rem; color: var(--wp--preset--color--gvpl-black-800, #48494b); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2348494b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.5em; cursor: pointer; } .wp-block-program-filter__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .wp-block-program-filter__group-selector { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .wp-block-program-filter__group-selector .wp-block-program-filter__group-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9375rem; font-weight: 400; color: var(--wp--preset--color--gvpl-black-800, #48494b); width: auto; text-decoration: none; border-radius: 4px; outline-offset: 2px; } .wp-block-program-filter__group-selector .wp-block-program-filter__group-option:hover { text-decoration: none; } .wp-block-program-filter__group-selector .wp-block-program-filter__group-option:focus-visible { outline: 2px solid var(--wp--preset--color--gvpl-sky-500, #00aeef); outline-offset: 2px; } .wp-block-program-filter__group-selector .wp-block-program-filter__radio { -moz-appearance: none; appearance: none; -webkit-appearance: none; width: 1.375rem; height: 1.375rem; border: 2px solid var(--wp--preset--color--gvpl-magenta-900, #c01c6e); border-radius: 50%; background-color: transparent; flex-shrink: 0; transition: background-color 0.15s, border-color 0.15s; } .wp-block-program-filter__group-selector .wp-block-program-filter__group-option[aria-current="true"] .wp-block-program-filter__radio { background-color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); border-color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 65%; } .wp-block-program-filter__reset { display: inline-flex; align-items: center; gap: 0.35rem; color: white; font-size: var(--wp--preset--font-size--small, 0.88rem); font-style: normal; font-weight: 700; outline-color: var(--wp--preset--color--gvpl-magenta-500, #ec048a); outline-offset: -2px; outline-style: solid; outline-width: 2px; padding-top: 0.75em; padding-right: 0.75em; padding-bottom: 0.75em; padding-left: 0.75em; border-radius: 4px; background: var(--wp--preset--color--gvpl-magenta-500, #ec048a); text-decoration: none; line-height: 1; white-space: nowrap; transition: background-color 0.15s; } .wp-block-program-filter__reset:hover, .wp-block-program-filter__reset:focus { background-color: var(--wp--preset--color--gvpl-magenta-900, #c01c6e); color: #fff; text-decoration: none; outline: none; } .wp-block-program-filter__reset:focus-visible { outline: 2px solid var(--wp--preset--color--gvpl-sky-500, #00aeef); outline-offset: 2px; } .wp-block-program-filter__reset svg { width: 1em; height: 1em; flex-shrink: 0; } @media (max-width: 600px) { .wp-block-program-filter__dropdowns { grid-template-columns: 1fr; } .wp-block-program-filter__row { flex-direction: column; align-items: flex-start; } } .bookshelf { /* .slick*/ } .bookshelf.slick-slider { margin: 0 20px; } .bookshelf.slick-slider .slick-list { margin: 0 var(--wp--preset--spacing--x-large, clamp(1.5rem, 7vw, 2.5rem)); } .bookshelf.slick-slider .slick-prev, .bookshelf.slick-slider .slick-next { font-size: 0; line-height: 0; position: absolute; top: calc(50% - 44px); display: block; width: 44px; height: 44px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; border-radius: 50%; background: var(--wp--preset--color--gvpl-sky-700, #009dd6) url("assets/images/arrow-left.svg") center center no-repeat; transform: none; z-index: 1; } .bookshelf.slick-slider .slick-prev::before, .bookshelf.slick-slider .slick-next::before { display: none; } .bookshelf.slick-slider .slick-prev:hover, .bookshelf.slick-slider .slick-prev:focus, .bookshelf.slick-slider .slick-prev:active, .bookshelf.slick-slider .slick-next:hover, .bookshelf.slick-slider .slick-next:focus, .bookshelf.slick-slider .slick-next:active { background-color: var(--wp--preset--color--gvpl-sky-900, #0876b0); color: transparent; } .bookshelf.slick-slider .slick-next { rotate: 180deg; } .bookshelf.slick-slider .caption { margin-top: var(--wp--preset--spacing--small, clamp(.25rem, 2.5vw, .5rem)); font-size: var(--wp--preset--font-size--small, 0.88rem); color: var(--wp--preset--color--gvpl-sky-900, #0876b0); font-weight: 600; text-align: left; } .bookshelf.slick-slider p { color: inherit; text-align: inherit; } /* .bookshelf */ /* Syndetics Unbound book display widget — match Slick bookshelf layout */ .ltfl_bookdisplay_widget { margin: 0 20px; overflow: hidden; } .ltfl_bookdisplay_widget .ltfl_bd_iframe { max-width: 100% !important; } body.carousel { width: 100% !important; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal { border: 0; background: none; border-radius: 0; padding-right: 0; padding-left: 0; min-width: 100%; width: 100% !important; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-clip-horizontal { width: auto; margin: 0 65px; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-clip-horizontal .jcarousel-item-horizontal { padding: 0 .25rem; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-prev, .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-next { font-size: 0; line-height: 0; position: absolute; top: calc(50% - 22px); display: block; width: 44px; height: 44px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; border-radius: 50%; background: #009dd6 url("https://gvpl.ca/wp-content/themes/gvpl/assets/images/arrow-left.svg") center center no-repeat; z-index: 1; transform: none; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-prev { left: 10px; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-next { rotate: 180deg; right: 10px !important; } .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-prev:hover, .wp-gvpl .jcarousel-container.jcarousel-container-horizontal .jcarousel-next:hover { background: #0876b0 url("https://gvpl.ca/wp-content/themes/gvpl/assets/images/arrow-left.svg") center center no-repeat; z-index: 1; } /* Featured programs: 2-col on tablet/desktop (1 large + 2 stacked), horizontal scroll-snap carousel of 3 equal cards on mobile. */ @media (max-width: 600px) { /* Collapse the column wrappers so all 3 post
  • become flex items of one scrolling row. */ .featured-programs .wp-block-columns, .featured-programs .wp-block-column, .featured-programs .wp-block-query, .featured-programs .wp-block-post-template { display: contents; } /* The columns block is the scroll container. Re-establish it as a flex row since its direct children are now display:contents. */ .featured-programs > .wp-block-columns { display: flex; flex-direction: row; flex-wrap: nowrap; /* Horizontal-only gap; row-gap would leak as top/bottom space. */ -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--wp--style--root--padding-left, 1rem); -webkit-overflow-scrolling: touch; /* Hide scrollbar; the peeking next card is the affordance. */ scrollbar-width: none; } .featured-programs > .wp-block-columns::-webkit-scrollbar { display: none; } /* Equal-width cards; ~82% so the edge of the next card peeks in. */ .featured-programs .wp-block-post { flex: 0 0 82%; scroll-snap-align: start; /* The post-template's is-layout-flow rule adds margin-block-start to stacked items; in a horizontal row that becomes stray top spacing. */ margin-block: 0; } } /* Library updates: vertical post list on desktop, horizontal scroll-snap carousel on mobile + tablet (< 1024px). All cards are already
  • siblings in one post-template, so that