/* ==================================================================================================== ==================================================================================================== ⚠️ DEVELOPMENT FILE — DO NOT USE IN PRODUCTION This stylesheet is intended for development, readability, and maintainability. It contains comments, structure, and formatting that are NOT optimized for performance. ✔ For production use ONLY: → cms-page-custom-sections.min.css ✔ Before deployment: - Ensure this file is compiled/minified - Verify the minified version is up to date ✔ Notes for developers: - Keep this file clean and well-structured - Do NOT manually edit the minified file - All changes should happen here ==================================================================================================== ==================================================================================================== */ /* ==================================================================================================== ==================================================================================================== ██████╗ ██╗ ██╗ █████╗ ██████╗ ████████╗███████╗██████╗ ██╗ ██╔════╝ ██║ ██║██╔══██╗██╔══██╗╚══██╔══╝██╔════╝██╔══██╗ ███║ ██║ ███████║███████║██████╔╝ ██║ █████╗ ██████╔╝ ██║ ██║ ██╔══██║██╔══██║██╔═══╝ ██║ ██╔══╝ ██╔══██╗ ██║ ╚██████╗ ██║ ██║██║ ██║██║ ██║ ███████╗██║ ██║ ██║ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ CHAPTER 1 — TWEAKS, HELPER CLASSES, QOL IMPROVEMENTS ---------------------------------------------------------------------------------------------------- PURPOSE: Small, reusable utilities and improvements that enhance the CMS experience without altering layout structure. These should be safe, predictable, and broadly applicable. INCLUDES: - Helper classes (visibility, spacing, alignment, etc.) - Minor UI/UX improvements - CMS-specific overrides - Non-destructive enhancements GUIDELINES: - Keep rules lightweight and reusable - Avoid layout-breaking changes - Prefer utility-style naming conventions - Keep specificity low whenever possible ==================================================================================================== ==================================================================================================== */ /* ================================================================= START Helper Classes ================================================================= */ .only-cms { display: none; } /* ================================================================= END Helper Classes ================================================================= */ /* ================================================================= START Sidemenu (navigation) column is smaller ================================================================= */ .left-sidebar-row { &:has(.column.left-sidebar .pb-navigation) { --one-third-width: 300px; --two-thirds-width: calc((100% - var(--one-third-width) - 20px)); @media (max-width: 1499px) { --one-third-width: 275px; } @media (max-width: 1199px) { --one-third-width: 250px; } } } /* ================================================================= END Sidemenu (navigation) column is smaller ================================================================= */ /* fix navigation color on code generated with AI */ .navigation-section[style*="--nav-main-color"][style*="#333"] { &, .navigation-header { --nav-main-color: var(--page-builder-color) } } /* end fix navigation color */ /* ================================================================= START Update image focus in bulk for cards and galleries ================================================================= */ .images-focus-top, .focus-top { .pb-card:not(.exclude) .card-image, .gallery-item .gallery-image { object-position: top center !important; } } /* ================================================================= END Update image focus in bulk for cards and galleries ================================================================= */ /* ================================================================= START Change components color to white ================================================================= */ #page .white-text { --white-text: #FFF; --light-primary: color-mix(in srgb, var(--primary-color), #fff 84%); --light-primary-darker: color-mix(in srgb, var(--primary-color), #fff 74%); .pb-text, .pb-quote { color: var(--white-text); * { --color-link: var(--white-text); } } .pb-heading, .pb-heading * { --color-heading: var(--white-text); --heading-color: var(--white-text); } .pb-spacer[style*="--spacer-background-color: #ffffff"] { --spacer-background-color: transparent !important; } .pb-button { .button-theme-light { --light-button: var(--light-primary); --light-button-hover: var(--light-primary-darker); } .button-theme-outline:not(:hover) { --dark-button: var(--white-text); --color-main: var(--white-text); &.button-style-2 { svg circle { fill: transparent; } } } .button-type-link { .title-text { --dark-button: var(--light-primary); } svg { color: var(--light-primary) !important; } &:hover { .title-text { color: var(--light-primary-darker); } svg { color: var(--light-primary-darker) !important; } } } } .accordion-panel { &.light { .panel-heading { --theme-bg-color: var(--light-primary); } } &.default { .panel-heading { --theme-bg-color: transparent; --theme-font-color: var(--white-text); } } } .pb-image, .pb-gallery { .caption { color: var(--white-text); } } } /* ================================================================= END Change components color to white ================================================================= */ /* ================================================================= START Make cards equal height when each column has a single component ================================================================= */ #page { .triple-column-row, .quadruple-column-row, .double-column-row { &:not(:has(.column .content-active-wrapper:not(:only-child))) { .content-active-wrapper:has(.pb-card) { &, div:not(.pb-card div) { display: flex; flex-direction: column; flex: 1; } .card-container { height: 100%; box-sizing: border-box; } } } } } /* ================================================================= END Make cards equal height when each column has a single component ================================================================= */ /* ================================================================= START Make a one-column layout have equal height when it’s inside another layout ================================================================= */ #page { .triple-column-row, .quadruple-column-row, .double-column-row { &:not(:has(.column .layout-active-wrapper:not(:only-child))) { .layout-active-wrapper:has(.single-column-row) { &, div:not(.single-column-row div) { display: flex; flex-direction: column; flex: 1; } } } } } /* ================================================================= END Make a one-column layout have equal height when it’s inside another layout ================================================================= */ /* ================================================================= START Make the "Full Width" layout standard width - needed in some situations ================================================================= */ #app #page { .pb-layout-container { .pb-layout-container:not(.row-level-2):not(.row-level-3) { &>.full-width-column-row.standard-container { --custom-root-level-width: calc(85% - 20px); --custom-root-level-max-width: calc(1920px - 20px); max-width: var(--custom-root-level-max-width); width: var(--custom-root-level-width); } } } } /* ================================================================= END Make the "Full Width" layout standard width - needed in some situations ================================================================= */ /* ================================================================= START 3 Columns with Middle One Larger ================================================================= */ #page .larger-middle-column { .column.triple-column { &:nth-child(1) { width: calc(25% - (var(--gap-size) * 2/3)); @media (max-width: 991px) { width: 100%; } } &:nth-child(2) { width: calc(50% - (var(--gap-size) * 2/3)); @media (max-width: 991px) { width: 100%; } } &:nth-child(3) { width: calc(25% - (var(--gap-size) * 2/3)); @media (max-width: 991px) { width: 100%; } } } } /* ================================================================= START 3 Columns with Middle One Larger ================================================================= */ /* ================================================================= START Add shadow to one column when it's inside another layout ================================================================= */ #page { :is(.add-shadow, .box-shadow) { &.single-column-row, &:not(:has(.single-column-row)):not(.single-column-row)>.column, &:not(.single-column-row)>.column .single-column-row { box-shadow: 1px 1px 5px var(--pb-grey-35); } .single-column-row[style*="padding: 0px;"] { padding: 10px !important; } } } /* ================================================================= END Add shadow to one column when it's inside another layout ================================================================= */ /* ================================================================= START Reduce the card image size when using icon images ================================================================= */ #page { /* Size variants — add more here as needed */ .card-small-image, .card-image-sm { --image-size: 95px; } .card-medium-image, .card-image-md { --image-size: 195px; } :is(.card-small-image, .card-image-sm, .card-medium-image, .card-image-md) { &.pb-card, &.layout-node-container .pb-card:not(.exclude) { --gap: 15px; .card-container { display: flex; flex-direction: row; gap: var(--gap); flex-wrap: wrap; padding: 20px; .card-image-container { float: none; margin-right: 0; height: auto; min-height: unset; padding-top: 5px; --image-dimensions: var(--image-size); img { height: auto; } } &.image-right .card-image-container { order: 2; } .card-content-container { width: calc(100% - var(--image-size) - var(--gap)); box-sizing: border-box; flex: 1; min-width: 180px; } } } } } /* ================================================================= END Reduce the card image size when using icon images ================================================================= */ /* ================================================================= START Equal height images for page builder layouts ================================================================= */ #page .layout-node-container[class*="images-height-"] .pb-image:not( .default-image-size, .layout-node-container.default-image-size .pb-image ) .image-container { figure, img { height: var(--img-max-h); max-height: unset !important; max-width: 100%; } img { object-fit: contain; height: 100%; } } .images-height-100 { --img-max-h: 100px; } .images-height-150 { --img-max-h: 150px; } .images-height-200 { --img-max-h: 200px; } .images-height-250 { --img-max-h: 250px; } .images-height-300 { --img-max-h: 300px; } .images-height-350 { --img-max-h: 350px; } .images-height-400 { --img-max-h: 400px; } .images-height-450 { --img-max-h: 450px; } .images-height-500 { --img-max-h: 500px; } /* ================================================================= END Equal height images for page builder layouts ================================================================= */ /* ================================================================= START Add border radius to cards ================================================================= */ #page { .border-radius-10 { --card-radius: 10px; } .border-radius-20 { --card-radius: 20px; } :is(.border-radius-10, .border-radius-20) { &.pb-card .card-container, &.layout-node-container .pb-card .card-container { border-radius: var(--card-radius); } } } /* ================================================================= END Add border radius to cards ================================================================= */ /* ================================================================= START Display the entire card image ================================================================= */ #page .show-entire-image { .card-image-container { height: auto; min-height: unset; .card-image { height: auto; object-fit: contain; object-position: top center; } } } /* ================================================================= END Display the entire card image ================================================================= */ /* ================================================================= START Align the buttons vertically ================================================================= */ #page .pb-button.vertical-direction .buttons-container { flex-direction: column; } /* ================================================================= END Align the buttons vertically ================================================================= */ /* ================================================================= START Increase accordtion title size ================================================================= */ #page .accordion-panel { &:is(.title-medium, .title-large) .panel-title { line-height: 1.1; } &.title-medium .panel-title { font-size: 22px; } &.title-large .panel-title { font-size: 32px; } } /* ================================================================= END Increase accordtion title size ================================================================= */ /* ================================================================= START Custom Bullets for text lists ================================================================= */ #page { .pb-text.custom-list-1, .pb-text.list-style-type-triangle { .html-wrapper { ul, ul li { list-style-type: disclosure-closed; } } } .pb-text.custom-list-2, .pb-text.list-style-type-checkbox, .pb-text.custom-list-3, .pb-text.list-style-type-pdf, .pb-text.custom-list-4, .pb-text.list-style-type-document, .pb-text.custom-list-5, .pb-text.list-style-type-video { .html-wrapper { ul { line-height: 1.5em; li { list-style-type: none; position: relative; padding-left: 1.25em; align-content: center; +li { margin-top: .25em; } &::before { content: ""; position: absolute; left: 0; top: 0.4em; width: .75em; height: .75em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } } } } } .pb-text.custom-list-3, .pb-text.list-style-type-pdf { .html-wrapper { ul li { &:before { top: 0.25em; width: .9em; height: .9em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm-3.741 17.261c.346-.327.932-.647 1.742-.954.366-.725.731-1.523 1.018-2.232-.242-.506-.397-1.039-.464-1.588-.25-2.061 2.083-1.907 1.729.012-.068.368-.23.884-.483 1.536.367.654.849 1.146 1.233 1.472.524-.084 1.271-.17 1.797-.093 1.396.205 1.219 1.744-.021 1.744-.649 0-1.463-.507-1.972-.896-.779.144-1.613.365-2.33.618-.229.44-.536 1.001-.811 1.396-1.143 1.646-2.65.127-1.438-1.015zm1.199.055c-.253.128-.609.348-.801.559-.299.328-.103.586.257.233.178-.172.392-.492.544-.792zm4.44-1.201c.235.158.558.323.911.33.412.008.377-.261-.082-.328-.2-.03-.488-.03-.829-.002zm-2.947-.128c.328-.109 1.036-.274 1.213-.315-.02-.021-.528-.544-.695-.832-.134.335-.509 1.127-.518 1.147zm.314-3.983c-.057.296.029.771.129 1.061.113-.237.255-.806.197-1.085-.056-.279-.262-.299-.326.024z'/%3E%3C/svg%3E"); } } } } .pb-text.custom-list-4, .pb-text.list-style-type-document { .html-wrapper { ul li { &:before { top: 0.15em; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm4.811 13h-10v-1h10v1zm0 2h-10v1h10v-1zm0 3h-10v1h10v-1z'/%3E%3C/svg%3E"); } } } } .pb-text.custom-list-5, .pb-text.list-style-type-video { .html-wrapper { ul li { &:before { top: 0.15em; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 8c.276 0 .5.224.5.5v7c0 .276-.224.5-.5.5h-11c-.276 0-.5-.224-.5-.5v-7c0-.276.224-.5.5-.5h11zm2.5 0c0-1.104-.896-2-2-2h-12c-1.104 0-2 .896-2 2v8c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2v-8zm6 1.854v4.293l-2-1.408v-1.478l2-1.407zm2-3.854l-6 4.223v3.554l6 4.223v-12z'/%3E%3C/svg%3E"); } } } } } /* ================================================================= END Custom Bullets for text lists ================================================================= */ /* ==================================================================================================== ==================================================================================================== ██████╗ ██╗ ██╗ █████╗ ██████╗ ████████╗███████╗██████╗ ██████╗ ██╔════╝ ██║ ██║██╔══██╗██╔══██╗╚══██╔══╝██╔════╝██╔══██╗ █║ ██║ ██║ ███████║███████║██████╔╝ ██║ █████╗ ██████╔╝ ██║ ██║ ██╔══██║██╔══██║██╔═══╝ ██║ ██╔══╝ ██╔══██╗ ██║ ╚██████╗ ██║ ██║██║ ██║██║ ██║ ███████╗██║ ██║ ███████║ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═════╝ CHAPTER 2 — FULLY CUSTOM LAYOUTS ---------------------------------------------------------------------------------------------------- PURPOSE: Dedicated area for building complete, custom-designed sections and layouts that go beyond the default CMS/page builder capabilities. INCLUDES: - Fully custom page sections - Complex layout overrides - Component-specific styling - Advanced responsive behavior GUIDELINES: - Expect higher specificity where necessary - Scope styles carefully to avoid bleed - Document complex sections clearly - Prefer modular, section-based organization NOTE: Code in this section may override or extend Chapter 1 utilities where needed. ==================================================================================================== ==================================================================================================== */ /* ================================================================= START Custom Headers CMS pages ================================================================= */ #page { .root.main-node-manager:has(.page-title-style-1) { padding-top: 0; } .page-title-style-1 { background-color: var(--page-title-bg-color, var(--primary-color)); margin-top: 0 !important; .pb-heading { padding: 1em .75em; h1, h2, h3, h4, h5 { color: var(--page-title-text-color, #fff); } } &.size-xxl { .pb-heading { font-size: clamp(1.5rem, 2vw + 1rem, 4rem); h1, h2, h3, h4, h5 { font-weight: 900; } } } &.size-xl { .pb-heading { font-size: clamp(1.4rem, 2vw + 0.5rem, 3.5rem); } } &.size-lg { .pb-heading { font-size: clamp(1.3rem, 1.75vw + 0.5rem, 2.5rem); } } &.size-md { .pb-heading { font-size: clamp(1.2rem, 1.5vw + 0.5rem, 2.25rem); } } &.size-sm { .pb-heading { font-size: clamp(1.1rem, 1.5vw + 0.25rem, 2rem); } } } } /* ================================================================= END Custom Headers CMS pages ================================================================= */ /* ================================================================= START Custom Programs V1 ================================================================= */ #page { .pb-heading.style-light { display: inline-flex; align-items: center; h1, h2 { font-size: 32px; text-transform: uppercase; font-weight: 400; } &:after { content: ""; display: inline-block; width: 56px; height: 2px; background-color: var(--header-accent-color, var(--section-text-color, currentColor)); margin: 0 24px; } } .program-p1-item { --program-p1-height: 300px; --programs-p1-card-title-area-height: 85px; --side-padding: 20px; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; height: var(--program-p1-height); .single-column { height: 100%; margin-bottom: 0; overflow: hidden; container-type: inline-size; container-name: card; &:before { content: ''; position: absolute; top: -6px; height: 6px; width: 100%; background-color: var(--programs-p1-border-color, var(--secondary-color)); } .pb-image { height: var(--program-p1-height); width: 100%; position: absolute; top: 0; left: 0; } .content-active-wrapper:has(.pb-image) { margin-bottom: 0; } &>.draggable-node-list-container { &>.draggable-node-list { position: relative; &:after { content: ''; position: absolute; width: 100%; height: 100%; top: calc(var(--program-p1-height) - var(--programs-p1-card-title-area-height)); left: 0; background-color: var(--programs-p1-background-color, var(--primary-color)); opacity: .85; z-index: 1; pointer-events: none; transition: opacity .25s linear; } } } .content-active-wrapper:has(.pb-heading) { display: flex; align-items: center; padding: 5px var(--side-padding); width: 100%; height: calc(var(--programs-p1-card-title-area-height) - 10px); margin-bottom: 0; /* margin-top: calc(var(--program-p1-height) - var(--programs-p1-card-title-area-height)); */ transform: translateY(calc(var(--program-p1-height) - var(--programs-p1-card-title-area-height))); flex-shrink: 0; transition: transform .25s linear; z-index: 2; h1, h2, h3, h4, h5 { color: var(--programs-p1-text-color, #fff); font-weight: 500; --font-size: 20px; --line-height: 1.4; --lines-to-show: 2; display: block; display: -webkit-box; font-size: var(--font-size); line-height: var(--line-height); overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines-to-show); @container card (max-width: 350px) { --font-size: 16px; } } } .content-active-wrapper:has(.pb-text) { /* max-height: calc(var(--program-p1-height) - var(--programs-p1-card-title-area-height) - 75px); */ z-index: 2; padding: 5px var(--side-padding); color: var(--programs-p1-text-color, #fff); overflow-y: auto; margin-top: 15px; max-width: 98%; margin-bottom: 0; transform: translateY(calc(var(--program-p1-height) - var(--programs-p1-card-title-area-height))); transition: transform .25s linear; @container card (max-width: 350px) { font-size: 14px; } &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-track { background: #f1f1f1; } &::-webkit-scrollbar-thumb { background: #888; } &::-webkit-scrollbar-thumb:hover { background: #555; } } .content-active-wrapper:has(.pb-button) { /* 40px for the "More" button */ margin-top: 10px; margin-bottom: 15px; z-index: 2; padding: 5px var(--side-padding); flex-shrink: 0; transform: translateY(calc(var(--program-p1-height) - var(--programs-p1-card-title-area-height))); transition: transform .25s linear; .pb-button { .buttons-container { a { color: var(--programs-p1-text-color, #fff); display: inline-block; border-radius: unset; background-color: transparent; min-width: unset; width: auto; height: auto; min-height: unset; margin: 0; text-decoration: underline; .title-text { color: inherit; margin: unset; line-height: 1.4; min-width: unset; } } } } } &:hover { &>.draggable-node-list-container { &>.draggable-node-list { &:after { top: 0; opacity: 1; } } } .content-active-wrapper:has(.pb-heading) { transform: translateY(0); height: auto; margin-top: 15px; h1, h2, h3, h4, h5 { display: block; height: auto; overflow: visible; text-overflow: clip; -webkit-box-orient: initial; -webkit-line-clamp: unset; } } .content-active-wrapper:has(.pb-text) { transform: translateY(0); } .content-active-wrapper:has(.pb-button) { transform: translateY(0); } } } } } /* ================================================================= END Custom Programs V1 ================================================================= */ /* ================================================================= START Custom Spotlight V6 ================================================================= */ #page { .custom-spotlight-v6-slider { --item-width: 300px; --item-height: 350px; --scale-factor: .25; margin: 0 !important; @media screen and (max-width: 1200px) { --item-width: 200px; --item-height: 250px; } @media screen and (max-width: 767px) { --item-width: 175px; --item-height: 200px; } .swiper-wrapper { @media screen and (min-width: 768px) { padding-left: 25vw; } @media screen and (min-width: 1200px) { padding-left: 12vw; } } .single-column { display: flex; flex-direction: column; } .swiper { overflow-y: visible; overflow-x: clip; } .swiper-wrapper { flex-direction: unset; align-items: flex-end; padding-top: calc(var(--item-height) * var(--scale-factor)); overflow: visible; @media screen and (max-width: 768px) { padding-top: 0; } } .content-active-wrapper:has(.pb-card) { --card-image-width: var(--item-width); --card-image-height: var(--item-height); width: var(--card-image-width); height: var(--card-image-height); margin-bottom: 0; @media screen and (max-width: 767px) { height: auto; } .node-manager-container { width: var(--card-image-width); margin-left: auto; margin-right: auto; } .pb-card { transform: scale(1); transform-origin: bottom center; transition: all .5s linear; width: 100%; cursor: pointer; .card-container { width: 100%; padding: 0; box-shadow: none; overflow: visible; &:after { content: ''; display: block; width: 1px; height: 100px; position: absolute; bottom: calc(95% - 40px); right: 35px; background-color: currentColor; opacity: 0; transition: opacity .25s linear; @media screen and (max-width: 767px) { display: none; } } } .card-image-container { width: 100%; min-height: unset; height: var(--card-image-height); float: unset; .card-image { width: var(--card-image-width); height: var(--card-image-height); } } .card-content-container { position: absolute; background-color: #fff; opacity: 0; visibility: hidden; transition: all .5s linear; border-radius: 1em; padding: 1em; @media screen and (max-width: 767px) { border-radius: 0; padding: .5em; width: 100%; position: static; order: -1; } .card-heading { margin-bottom: 0.5em; } .pb-heading { --font-size: 13px; --line-height: 1.4; --lines-to-show: 2; @media screen and (max-width: 960px) { --font-size: 11px; } display: block; display: -webkit-box; font-size: var(--font-size); line-height: var(--line-height); overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines-to-show); @media screen and (max-width: 767px) { text-align: center; } h1, h2, h3, h4 { font-size: 1em; } } .card-text { color: var(--primary-color); font-weight: 700; --font-size: 15px; --line-height: 1.4; --lines-to-show: 2; @media screen and (max-width: 960px) { --font-size: 13px; } display: block; display: -webkit-box; font-size: var(--font-size); line-height: var(--line-height); overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines-to-show); @media screen and (max-width: 767px) { text-align: center; } } } } &.swiper-slide-active { @media screen and (min-width: 768px) { width: calc(var(--card-image-width) + var(--card-image-width) * var(--scale-factor)); z-index: 2; .pb-card { transform: scale(calc(1 + var(--scale-factor))); .card-container { &:after { opacity: 1; } } .card-content-container { opacity: 1; visibility: visible; bottom: calc(100% + 30px); right: 15px; max-width: 100%; z-index: 3; } } } } &.swiper-slide-active { @media screen and (max-width: 767px) { z-index: 2; .card-container { display: flex; } .pb-card { .card-content-container { opacity: 1; visibility: visible; max-width: 100%; z-index: 3; } } } } } } } #page { .custom-spotlight-v6 { --section-bg-color: var(--primary-color); --section-bg-opacity: .5; --top-decoration-size: 80px; @media screen and (max-width: 767px) { --top-decoration-size: 30px; } margin-bottom: 0 !important; position: relative; margin-top: var(--top-decoration-size) !important; &:before { content: ''; display: block; position: absolute; width: 100%; height: var(--top-decoration-size); top: calc(-1 * var(--top-decoration-size)); mask-image: url('data:image/svg+xml,'); background-color: var(--section-bg-color); opacity: var(--section-bg-opacity); } &:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--section-bg-color); z-index: -1; opacity: var(--section-bg-opacity); } .custom-spotlight-v6-header { @media screen and (min-width: 768px) { max-width: 50%; padding-left: 5% !important; } @media screen and (max-width: 767px) { .pb-heading { text-align: center; } .pb-button { justify-content: center; } } } } } /* ================================================================= END Custom Spotlight V6 ================================================================= */ /* ================================================================= START Custom Tabs - Desktop (≥768px): horizontal tab nav - Mobile (≤767px): accordion ================================================================= */ /* ── Tab nav: base ──────────────────────────────────────────────── */ #page .custom-tabs-nav { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border-bottom: 2px solid #e0e0e0; .custom-tabs-nav-btn { display: flex; align-items: center; text-align: left; column-gap: .5em; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px; font-size: 1rem; line-height: 1.3; cursor: pointer; color: #555; transition: color 0.2s ease, border-color 0.2s ease; .custom-tabs-nav-btn-img { width: 1em; height: 1em; } } &:hover { color: #111; } &.is-active { color: #111; font-weight: 600; border-bottom-color: currentColor; } .left-sidebar-row { .column.left-sidebar:first-child { .pb-card { .card-content-container { .card-text { display: none; } } } } } } /* ── Desktop: pane visibility ───────────────────────────────────── */ @media (min-width: 768px) { #page { .custom-tabs-nav {} .custom-tabs { --radius: 3em; --alpha: 0.065; --padding: .75em; .left-sidebar-row { /* Hide the quote column — its text is already in the nav */ .column.left-sidebar:first-child { display: none; } /* Content column takes full width when the quote column is gone */ .column.left-sidebar:last-child { width: 100%; max-width: 100%; display: block !important; } } /* Hide all panes; show only the active one */ .custom-tabs-panel { display: none; } .custom-tabs-panel.is-active { display: block; } } } } /* ── Mobile: accordion ──────────────────────────────────────────── */ @media (max-width: 767px) { #page { /* Nav hidden; accordion is used instead */ .custom-tabs-nav { display: none; } .custom-tabs { /* All panes visible; content visibility is controlled per-row */ .custom-tabs-panel { display: block; } /* Quote column visible as accordion trigger */ .custom-tabs-accordion-trigger { cursor: pointer; user-select: none; } /* Content column hidden by default; JS sets display:block for open rows */ .left-sidebar-row .column.left-sidebar:last-child { display: none; } } } } @media (max-width: 767px) { #page .custom-tabs { .draggable-node-list-container .layout-active-wrapper { margin-bottom: 0 !important; } .custom-tabs-accordion-trigger { .card-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid #cacaca; &.box-shadow { box-shadow: none; } &:after { content: ''; display: block; width: 1em; height: 1em; background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z' fill-rule='nonzero'/%3E%3C/svg%3E"); mask-size: contain; mask-position: center; mask-repeat: no-repeat; } .card-image-container { --image-dimensions: 1.2em; float: unset; } &.has-image { .card-content-container { width: calc(100% - 3.2em); } } .card-content-container { width: calc(100% - 2em); padding-bottom: 0; padding-top: 0 !important; .card-heading { font-size: 1em; margin-bottom: unset; h3 { font-weight: 500; } } } } &[aria-expanded="true"] { .card-container { &:after { mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 11.75c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75z' fill-rule='nonzero'/%3E%3C/svg%3E"); } } } } } } /* ── v1: visual style ───────────────────────────────────────────── */ #page { .custom-tabs { .custom-tabs-nav { border-bottom-color: #d0d0d0; } .custom-tabs-nav-btn { color: #666; font-weight: 500; } .custom-tabs-nav-btn:hover { color: #222; } .custom-tabs-nav-btn.is-active { color: #222; border-bottom-color: #222; } } } /* ── v2 and more: visual style ───────────────────────────────────────────── */ @media (min-width: 768px) { #page { .custom-tabs.v2, .custom-tabs.v3, .custom-tabs.v4 { position: relative; .custom-tabs-nav { width: 100%; display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100% * 1.25), transparent); position: relative; border-color: var(--primary-color); border-radius: var(--radius); padding: var(--padding); } .custom-tabs-nav-btn { border-bottom: none; text-transform: unset; font-weight: 700; color: #000; } .custom-tabs-nav-btn.is-active { background: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100% * 1.75), transparent); border-radius: var(--radius); } } .custom-tabs.v3 { .custom-tabs-nav { border: none; box-shadow: 3px 3px 20px 3px rgba(0, 0, 0, 0.2); } } .custom-tabs.v4 { .custom-tabs-nav { border: 1px solid #cacaca; background: none; } } .custom-tabs.v5, .custom-tabs.v6 { gap: unset; --alpha: 0.05; --radius: 3px; --padding: .75em; --active-color: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100% * 5.5), transparent); .custom-tabs-nav { width: 100%; column-gap: 4px; border: none; .custom-tabs-nav-btn { border: none; background-color: var(--primary-color); color: var(--primary-color-contrast); border-radius: var(--radius) var(--radius) 0 0; text-align: center; padding: var(--padding); margin-bottom: unset; &.is-active { background: var(--active-color); color: var(--primary-color); } } } .full-width-column { border-top: 5px solid var(--active-color); background: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100%), transparent); border-radius: 0 0 var(--radius) var(--radius); padding-top: .5em; } } .custom-tabs.v6 { .custom-tabs-nav { .custom-tabs-nav-btn { background: var(--active-color); color: var(--primary-color); &.is-active { background-color: var(--primary-color); color: var(--primary-color-contrast); } } } .full-width-column { border-color: var(--primary-color); } } .custom-tabs.v7, .custom-tabs.v8 { gap: unset; --radius: 20px; --alpha: 0.05; --active-color: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100%), white); --non-active-color: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100% * 5), white); .custom-tabs-nav { border: none; display: flex; width: 100%; overflow: hidden; background-color: var(--primary-color); padding-top: 1em; border-radius: var(--radius) var(--radius) 0 0; .custom-tabs-nav-btn { --tab-bg-color: var(--non-active-color); border-radius: var(--radius) var(--radius) 0 0; color: var(--primary-color); position: relative; z-index: 1; background: var(--tab-bg-color); border: none; margin-bottom: unset; padding: 1em; font-weight: 600; &:before, &:after { content: ''; position: absolute; bottom: 0; left: calc(var(--radius) * -1); width: var(--radius); height: var(--radius); border-bottom-right-radius: var(--radius); box-shadow: calc(var(--radius)/2) calc(var(--radius)/2) 0 calc(var(--radius)/2) var(--tab-bg-color); } &:after { left: unset; right: calc(var(--radius) * -1); border-bottom-right-radius: 0; border-bottom-left-radius: var(--radius); box-shadow: calc(var(--radius)/2 * -1) calc(var(--radius)/2) 0 calc(var(--radius)/2) var(--tab-bg-color); } &.is-active { --tab-bg-color: var(--active-color); z-index: 2; } } } .full-width-column { background: var(--active-color); border-radius: 0 0 var(--radius) var(--radius); } } .custom-tabs.v7 { --radius: 10px; .custom-tabs-nav { .custom-tabs-nav-btn:not(.is-active) { background: transparent; color: var(--primary-color-contrast); &:before, &:after { display: none; } } } } .custom-tabs.v8 { .custom-tabs-nav { justify-content: center; } } } } #app #page { .custom-tabs { &.medium-radius { --radius: 1em; } &.small-radius { --radius: .5em; --padding: .5em; } &.one-row-only { .custom-tabs-nav { flex-wrap: nowrap; } } } } /* ================================================================= END Custom Tabs ================================================================= */ /* ================================================================= START Masonry Layout - Fluid grid via Masonry.js + CSS container queries - Column count scales: 1 → 2 → 3 → 4 → 5 cols - Desktop (hover): card content overlays on hover - Touch devices: overlay hidden, content always visible ================================================================= */ #app .masonry-layout, #app .custom-gallery-v2 { /* opacity: 0; */ container-type: inline-size; container-name: masonryLayout; transition: opacity .25s linear; --padding-size: 10px; --border-radius: 10px; margin-top: 0 !important; &:has(.images-loaded) { opacity: 1; } .draggable-level-1 { display: block; } .content-active-wrapper:has(.pb-card) { padding: var(--padding-size); margin-bottom: 0; width: 100%; @container masonryLayout (width > 500px) { width: 50%; } @container masonryLayout (width > 960px) { width: 33.33%; } @container masonryLayout (width > 1200px) { width: 25%; } @container masonryLayout (width > 1500px) { width: 20%; } .card-container { border-radius: var(--border-radius); position: relative; } .card-image-container { float: none; width: 100%; height: auto; min-height: unset; position: static; font-size: 0; border-radius: var(--border-radius); overflow: hidden; .card-image { object-fit: unset; object-position: unset; height: auto; } } .card-content-container { @media not all and (hover: none) { position: absolute; width: calc(100% - var(--padding-size) * 2); left: var(--padding-size); right: var(--padding-size); top: var(--padding-size); bottom: var(--padding-size); background-color: #fff; background-color: var(--primary-color); color: var(--primary-color-contrast); padding: var(--padding-size); border-radius: var(--border-radius); box-sizing: border-box; opacity: 0; z-index: 2; visibility: hidden; transition: opacity .25s linear, visibility .25s linear; &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-track { background: #f1f1f1; } &::-webkit-scrollbar-thumb { background: #888; } &::-webkit-scrollbar-thumb:hover { background: #555; } } .card-heading { color: inherit; .pb-heading { color: inherit; h1, h2, h3, h4, h5, h6 { color: inherit; } } } .card-text { font-size: 14px; color: inherit; } } .card-container:hover:not(:has(.pb-heading h1:empty):has(.card-text .html-wrapper p:empty)) { .card-content-container { @media not all and (hover: none) { opacity: 1; visibility: visible; } } } } } /* ================================================================= END Masonry Layout ================================================================= */ /* ================================================================= START Extra Cards Layout ================================================================= */ /* START Custom Card V1 */ #page .pb-card { &.custom-card-v1 { --aspect-ratio: 6/5; --border-radius: var(--custom-border-radius, 12px); --bg-color: var(--primary-color); --text-color: var(--primary-color-contrast); --color-heading: var(--text-color); --button-bg-color: var(--primary-color-contrast); --button-text-color: var(--primary-color); .card-container { padding: 0; overflow: hidden; border-radius: var(--border-radius); &.has-image { .card-image-container { width: 100%; aspect-ratio: var(--aspect-ratio); float: unset; height: auto; min-height: auto; overflow: hidden; position: relative; &:after { content: ''; display: block; position: absolute; width: 100%; height: 60px; clip-path: polygon(0 0, 100% 0, 100% 25%, 0 100%); background-color: var(--bg-color); bottom: -1px; left: 0; transform: rotate(180deg); } .card-image { aspect-ratio: var(--aspect-ratio); height: auto; min-height: auto; } } } .card-content-container { padding: .5em 1.5em 1.5em; background-color: var(--bg-color); color: var(--text-color); position: relative; z-index: 2; overflow: unset; flex: 1; } } } } /* END Custom Card V1 */ /* START Custom Card V2 and V3 */ #page .pb-card { &.custom-card-v2, &.custom-card-v3 { --aspect-ratio: 7/5; --border-radius: var(--custom-border-radius, 12px); --button-bg-color: var(--primary-color); --button-text-color: var(--primary-color-contrast); .card-container { overflow: hidden; border-radius: var(--border-radius); background-color: color-mix(in oklch, var(--primary-color) 10%, #fff); &.has-image { .card-image-container { width: 100%; aspect-ratio: var(--aspect-ratio); float: unset; height: auto; min-height: auto; overflow: hidden; position: relative; border-radius: var(--border-radius) var(--border-radius) 0 0; .card-image { aspect-ratio: var(--aspect-ratio); height: auto; min-height: auto; } } } .card-content-container { padding: .75em 0 1.5em; position: relative; z-index: 2; overflow: unset; text-align: center; } } } &.custom-card-v3 { .card-container { background-color: unset; .card-content-container { position: relative; &:after { content: ''; display: block; position: absolute; background-color: color-mix(in oklch, var(--primary-color) 10%, #fff); height: 120%; width: 40%; top: 0; right: -25%; transform: skew(-25deg); z-index: -1; } } } } } /* END Custom Card V2 and V3 */ /* START Custom Card V4 */ #app #page .pb-card { &.custom-card-v4, &.custom-card-v5, &.custom-card-v6 { --gap: 1.75em; --border-radius: var(--custom-border-radius, 12px); --button-bg-color: var(--primary-color); --button-text-color: var(--primary-color-contrast); --bg-color: #fff; --text-color: #000; container-type: inline-size; container-name: customCardLayout; .card-image-container { font-size: 0; padding-top: 0; float: unset; height: auto; min-height: auto; overflow: hidden; position: relative; &:after { content: ''; display: block; position: absolute; width: 50px; height: 100%; clip-path: polygon(0 0, 100% 0, 50% 0, 0 100%); background-color: var(--bg-color); color: var(--text-color); bottom: -1px; right: 0; transform: rotate(180deg); } img { width: 100%; height: 100%; object-fit: cover; } } .card-content-container { flex-wrap: wrap; display: flex; flex-direction: column; justify-content: center; padding: 1.5em 1.5em 1.5em 0; align-content: center; } .card-container { padding: 0; border-radius: var(--border-radius); display: flex; background-color: var(--bg-color); &.image-right { .card-image-container { order: 2; margin-left: unset; &:after { clip-path: polygon(100% 0, 0 0, 50% 0, 100% 100%); right: unset; left: 0; } } .card-content-container { padding: 1.5em 0 1.5em 1.5em; } } @container customCardLayout (width < 600px) { flex-wrap: wrap; .card-image-container { width: 100%; margin-left: 0; margin-right: 0; &:after { display: none; } } .card-content-container { width: 100%; padding: 1.5em; } } } } &.custom-card-v5 { --text-color: #000; --alpha: 0.05; --bg-color: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100%), white); } &.custom-card-v6 { --text-color: var(--primary-color-contrast); --alpha: 0.05; --bg-color: color-mix(in srgb, var(--primary-color) calc(var(--alpha) * 100%), white); --offset: 25px; --gap: var(--offset); --c1: color-mix(in oklab, var(--primary-color) 80%, white); --c2: var(--primary-color); --c3: color-mix(in oklab, var(--primary-color) 60%, black); --c4: color-mix(in oklab, var(--primary-color) 30%, black); --button-bg-color: var(--primary-color-contrast); --button-text-color: var(--primary-color); margin-top: calc(var(--offset) / 2); .card-image-container { position: relative; top: calc(var(--offset) * - 1); margin-left: 0; margin-right: 0; @container customCardLayout (width < 600px) { position: unset; top: unset; } .card-image { border-radius: var(--border-radius); @container customCardLayout (width < 600px) { border-radius: var(--border-radius) var(--border-radius) 0 0; } } &:after { display: none; } } .card-content-container { --color-heading: var(--text-color); color: var(--text-color); } .card-container { overflow: unset; padding-left: var(--offset); column-gap: var(--offset); background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 30%, var(--c3) 70%, var(--c4) 100%); &.box-shadow { box-shadow: 5px 5px 25px 5px rgba(0, 0, 0, 0.25); } @container customCardLayout (width < 600px) { padding-left: unset; } } } } /* END Custom Card V4 */ /* START Custom Buttons inside the cards */ #page .pb-card { &.custom-card-v1, &.custom-card-v2, &.custom-card-v3, &.custom-card-v4, &.custom-card-v5, &.custom-card-v6 { .card-content-container { a { display: inline-block; text-align: center; background-color: var(--button-bg-color); color: var(--button-text-color); text-decoration: none; padding: .5em 1.5em; min-width: 150px; border-radius: 2em; } } } } /* END Custom Buttons inside the cards */ /* ================================================================= END Extra Cards Layout ================================================================= */ /* ================================================================= START Custom Hero Section Setup (in the builder): - Outer wrapper: Full Width → classes: hero-section + v1 (or v2, etc.) - Optionally add a Heading element inside the wrapper to set a custom title. - Optionally set a background image on the wrapper. - Optionally add text-white (dark bg) or text-dark (light bg) — manual, CSS-driven. Behaviour: - Scenario 1 – No background image, no Heading element: Pulls the page title via GetInfo and injects it as an

. Adds classes: no-bg-image + no-heading (CSS hooks for styling). - Scenario 2 – No background image, Heading element present: Adds class: no-bg-image (CSS hook; heading already in DOM). - Scenario 3 – Background image + Heading element: No DOM changes needed; CSS handles visuals via hero-section + v1 and optional text-white / text-dark classes. ================================================================= */ #page:has(.hero-section) { .main-node-manager { padding-top: unset; } .hero-section { margin-top: 0 !important; --hero-section-bg-color: var(--primary-color); --hero-section-text-color: var(--primary-color-contrast); --hero-section-container-width: calc(85% - 20px); --hero-section-min-height: 200px; --color-heading: var(--hero-section-text-color); --h1-size: 3em; --h2-size: 2.5em; --h3-size: 2em; --mask-opacity: 0.25; color: var(--hero-section-text-color); &.no-bg-image { background-color: var(--hero-section-bg-color); } &.dark-text { --hero-section-text-color: var(--primary-color); } &.darker-mask { --mask-opacity: 0.45; } &.darkest-mask { --mask-opacity: 0.65; } &.size-xxl { --hero-section-min-height: 400px; --h1-size: 4em; --h2-size: 3em; --h3-size: 2.5em; } &.size-xl { --hero-section-min-height: 300px; } &.size-lg { --hero-section-min-height: 250px; } &.size-md { --hero-section-min-height: 225px; --h1-size: 2.5em; --h2-size: 2.25em; --h3-size: 1.75em; } &.size-sm { --hero-section-min-height: 150px; --h1-size: 2em; --h2-size: 1.5em; --h3-size: 1.25em; } &.size-xs { --hero-section-min-height: 100px; --h1-size: 1.75em; --h2-size: 1.45em; --h3-size: 1.25em; } &.size-xxl, &.size-xl, &.size-lg, &.size-md, &.size-sm, &.size-xs { @media (max-width: 599px) { --h1-size: 1.5em; --h2-size: 1.35em; --h3-size: 1.2em; } } @media (max-width: 599px) { --h1-size: 1.75em; --h2-size: 1.45em; --h3-size: 1.25em; } &.has-mask { position: relative; isolation: isolate; &:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: var(--mask-opacity, 0.25); z-index: -1; } } .column { padding-top: 1em; padding-bottom: 1em; } .draggable-node-list { display: flex; justify-content: center; max-width: var(--hero-section-container-width); width: var(--hero-section-container-width); margin-left: auto; margin-right: auto; min-height: var(--hero-section-min-height); h1 { font-size: var(--h1-size); } h2 { font-size: var(--h2-size); } h3 { font-size: var(--h3-size); } h1+.content-active-wrapper { margin-top: 1em; } } &.v2 { position: relative; &:after { content: ''; display: block; width: 100%; height: 70px; background-color: #fff; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 320'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0 64L48 53.3C96 43 192 21 288 64C384 107 480 213 576 250.7C672 288 768 256 864 202.7C960 149 1056 75 1152 42.7C1248 11 1344 21 1392 26.7L1440 32L1440 320L1392 320C1344 320 1248 320 1152 320C1056 320 960 320 864 320C768 320 672 320 576 320C480 320 384 320 288 320C192 320 96 320 48 320L0 320Z'%3E%3C/path%3E%3C/svg%3E"); } } } } /* ================================================================= END Custom Hero Section ================================================================= */ /* ================================================================= START Custom Gallery V1 - Fluid grid via Masonry.js + CSS container queries - Column count scales: 1 → 2 → 3 → 4 → 5 cols - Desktop (hover): card content overlays on hover - Touch devices: overlay hidden, content always visible ================================================================= */ #app .custom-gallery-v1 { container-type: inline-size; container-name: masonryLayout; --padding-size: 6px; --radius: var(--custom-border-radius, 12px); --c1: color-mix(in oklab, var(--primary-color) 80%, white); --c2: var(--primary-color); --c3: color-mix(in oklab, var(--primary-color) 60%, black); --c4: color-mix(in oklab, var(--primary-color) 30%, black); opacity: 0; transition: opacity .25s linear; margin-top: 0 !important; &:has(.custom-masonry-initiated) { opacity: 1; } .gallery-container { display: block; } .gallery-item { padding: var(--padding-size); margin-bottom: 0; width: 100%; @container masonryLayout (width > 500px) { width: 50%; } @container masonryLayout (width > 960px) { width: 33.33%; } @container masonryLayout (width > 1200px) { width: 25%; } @container masonryLayout (width > 1500px) { width: 20%; } .image-container { aspect-ratio: unset; width: 100%; font-size: 0; border-radius: var(--radius); overflow: hidden; opacity: 1; transition: opacity .25s linear; &>div { aspect-ratio: unset; overflow: unset; max-width: 100%; font-size: 0; .gallery-image { height: unset; object-fit: unset; object-position: unset; max-width: 100%; } } } .caption-container { position: absolute; width: calc(100% - 2 * var(--padding-size)); height: calc(100% - 2 * var(--padding-size)); left: var(--padding-size); bottom: var(--padding-size); border-radius: var(--radius); overflow: hidden; .caption { width: 100%; height: 100%; position: relative; padding-top: unset; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transition: opacity .25s linear; @media all and (hover: none) { opacity: 1; } &:hover { opacity: 1; } p:has(a) { color: var(--primary-color-contrast); padding: 3em .5em .5em; background: linear-gradient(0deg, var(--primary-color) 0%, rgba(255, 255, 255, 0) 100%); } a { color: inherit; text-decoration: none; &:after { content: ''; display: block; position: absolute; inset: 0; } } } } &:has(.caption-container .caption a:hover) { .image-container { opacity: .9; } } } &.no-visible-text { .gallery-item { .caption-container { .caption { opacity: 0; } } } } } /* ================================================================= END Custom Gallery V1 ================================================================= */ /* ================================================================= START Custom Image Slider V1 - Native "Gallery" from CMS builder is converted into a slider - Uses Swiper.js to arrange items into an image slider. - Compared to the default slider, this has some advantages: * More Items Visible at the same time * Images will keep their aspect ratio * Supports url (via "Caption" text with link on it) ================================================================= */ #page .custom-image-slider-v1 { --image-max-height: 25vw; @media (max-width: 959px) { --image-max-height: 200px; } opacity: 0; transition: opacity .25s linear; &.swiper-initialized { opacity: 1; } .gallery-container { flex-wrap: unset; &:has(.gallery-item) { .image-container { opacity: .8; } } .gallery-item { flex-grow: unset; width: auto; min-width: unset; padding: 0; .image-container { aspect-ratio: unset; width: 100%; font-size: 0; overflow: hidden; opacity: 1; transition: opacity .25s linear; &>div { aspect-ratio: unset; overflow: unset; font-size: 0; .gallery-image { height: unset; object-fit: contain; object-position: unset; height: var(--image-max-height); } } } .caption-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: var(--radius); overflow: hidden; .caption { width: 100%; height: 100%; position: relative; padding-top: unset; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transition: opacity .25s linear; @media all and (hover: none) { opacity: 1; } &:hover { opacity: 1; } p { color: var(--primary-color-contrast); padding: 3em .5em .5em; background: linear-gradient(0deg, var(--primary-color) 0%, rgba(255, 255, 255, 0) 100%); } a { color: inherit; text-decoration: none; &:after { content: ''; display: block; position: absolute; inset: 0; } } } } } } &.no-visible-text { .gallery-item { .caption-container { .caption { opacity: 0 !important; } } } } &+.custom-swiper-controls { /* margin-top: unset; */ justify-content: space-between; .custom-swiper-pagination { margin-left: auto; @media (max-width: 1199px) { display: none; } } } } /* ================================================================= END Custom Image Slider V1 ================================================================= */ /* ================================================================= START Custom Timeline V1 ================================================================= */ #page .custom-timeline.v1 { --timeline-line-width: 2px; --timeline-dot-radius: 8px; --timeline-gap: 50px; --timeline-color: var(--primary-color); --card-bg-color: #f1f1f1; display: flex; flex-wrap: wrap; align-items: flex-start; &>.column:first-child { position: sticky; top: 40px; align-self: flex-start; } &>.column:last-child { position: relative; padding-block: 20px; &::before { content: ""; position: absolute; top: 15px; bottom: 0; left: 0; width: var(--timeline-line-width); background-color: var(--timeline-color); transform: translateX(-50%); z-index: 1; } .pb-card { position: relative; margin-left: var(--timeline-gap); margin-bottom: 30px; .card-container { background-color: var(--card-bg-color); padding: 40px 8%; border-radius: var(--custom-timeline-border-radius, var(--custom-border-radius)); .card-content-container { padding-block: 0; .pb-text ul { padding-left: 0; } } } &::before { content: ""; position: absolute; left: calc(var(--timeline-gap) * -1); top: calc(40px + 0.7em); width: calc(var(--timeline-dot-radius) * 2); height: calc(var(--timeline-dot-radius) * 2); border-radius: 50%; background-color: var(--timeline-color); transform: translate(-50%, -50%); z-index: 2; } } } } @media (width <=960px) { #page .custom-timeline.v1 { flex-direction: column; &>.column { width: 100%; max-width: 100%; } &>.column:first-child { position: static; margin-bottom: 30px; } .pb-card { margin-left: calc(var(--timeline-gap) + 15px); } } } @media (width <=450px) { #page .custom-timeline.v1 { --timeline-gap: 30px; } } #page-wrapper #page .builder-manager-container:has(.custom-timeline.v1), #page-wrapper #page .builder-draggable-section:has(.custom-timeline.v1), .layout-node-container:has(.custom-timeline.v1) { overflow: visible; } /* ================================================================= END Custom Timeline V1 ================================================================= */