/* Theme Name: Twenty Twenty Five Child Theme URI: https://wordpress.org/themes/twentytwentyfive/ Description: Twenty Twenty Five Child Theme Author: OrderlyMeds Author URI: orderlymeds.com Template: twentytwentyfive Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ /* Template Overrides */ /*** Header ***/ :root { --om-scrolling-up: 0; --om-menu-transform: translate3d(0, 0, 0); --banner-height: 58px; @media (max-width: 1024px) { --wp--preset--spacing--group-default: 55px; --wp--preset--spacing--group-half: 32px; --wp--preset--spacing--group-gap: 32px; } @media (max-width: 767px) { --banner-height: 91px; --wp--preset--spacing--group-half: 24px; } } :root :is(p) { color: var(--wp--preset--color--gray-900); } /* Block Editor Edits */ .block-editor-block-list__block:has(> .om-navigation-close) { display: none; } /* End Block Editor Edits */ /* Need to remove to go to Tags and Cats in the future */ :is([rel="tag"], .featured-post__tag, .featured-post__label), :is(.om-chip-pill, .om-chip-pill-small, .om-chip-square, .om-chip-square-small, .chip-square) { /* pointer-events: none; */ } .no-link a { pointer-events: none; } @media (max-width: 767px) { .entry-content.has-global-padding { padding-right: 20px !important; padding-left: 20px !important; } } html { scroll-behavior: smooth; & * { word-break: normal; } } footer { margin-top: 0; margin-right: 7px !important; margin-left: 7px !important; margin-bottom: 7px !important; border-radius: var(--wp--custom--border-radius--small-large) !important; overflow: hidden; >div>div:is(.mobile-only) { gap: var(--wp--preset--spacing--small) !important; } @media (max-width: 767px) { margin-right: 3px !important; margin-left: 3px !important; margin-bottom: 3px !important; & details { width: 100%; border-width: 0 0 1px 0 !important; border-color: var(--wp--preset--color--navy-100) !important; border-radius: 0 !important; margin: 0 !important; padding-inline: 0 !important; padding-top: 0 !important; & summary { font-size: var(--wp--preset--font-size--x-small) !important; &:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzM4OF84Nzk3IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjUiPgo8cmVjdCB5PSIwLjY1MDAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8zODhfODc5NykiPgo8cGF0aCBkPSJNMTEuOTk5OCAxNi4yNDEzTDUuODA4NTkgMTAuMDUwMUw3LjM5OTg0IDguNDU4OEwxMS45OTk4IDEzLjA1ODhMMTYuNTk5OCA4LjQ1ODhMMTguMTkxMSAxMC4wNTAxTDExLjk5OTggMTYuMjQxM1oiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==) !important; width: 24px; height: 24px; transition: ease-in-out .15s all; } } &[open] summary:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzM4OF84Nzk3IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjUiPgo8cmVjdCB5PSIwLjY1MDAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8zODhfODc5NykiPgo8cGF0aCBkPSJNMTEuOTk5OCAxNi4yNDEzTDUuODA4NTkgMTAuMDUwMUw3LjM5OTg0IDguNDU4OEwxMS45OTk4IDEzLjA1ODhMMTYuNTk5OCA4LjQ1ODhMMTguMTkxMSAxMC4wNTAxTDExLjk5OTggMTYuMjQxM1oiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==) !important; transform: rotate(180deg); } nav li span { font-size: var(--wp--preset--font-size--x-small) !important; font-weight: 400 !important; } } .om-legal-menu { row-gap: var(--wp--preset--spacing--xx-small); margin-block-end: var(--wp--preset--spacing--xx-small); } } } /* B2B template mods */ header.om-b2b-page, .post-template-single-post-corporate-resources header, .category-corporate-resources header { :is(.wp-block-buttons, .om-navigation--trigger) { visibility: hidden; pointer-events: none; } :is(.wp-block-site-logo) { pointer-events: none; } } /* END B2B template mods END */ [data-om-menu-open="true"] { overflow: hidden; } :is(.wp-site-blocks) { overflow-x: hidden; } /* .entry-content > div:not(:first-child) { margin-block: 55px; } */ .entry-content>div:not(:has(+ .om-marquee)):not(:has(+ hr)):not(.alignfull), .entry-content>div.alignfull:has(+ :not(.alignfull)), .entry-content>div:last-child:not(.alignfull) { margin-block-end: 110px !important; &+hr { margin-block-end: 55px !important; } @media (max-width: 767px) { margin-block-end: 55px !important; &+hr { margin-block-end: 22.5px !important; } } } .entry-content>div.alignfull:has(+ .alignfull), .entry-content>div:is(.alignfull):last-child { margin-block-end: 8px !important; } .forminator-field:has(.forminator-input--wrap) .border-wrapper { background: #fff; } input[id*="forminator"] { outline: none; } /* Top and Sideout Navigation */ :is(.wp-site-blocks)>header { z-index: 99998; .om-navigation-submenu--action, .om-navigation--trigger { cursor: pointer; } @media (max-width: 767px) { .wp-block-site-logo img { max-width: 80%; } } >div:last-child { position: fixed; right: -140%; top: 0; opacity: 0; pointer-events: none; height: 100vh; z-index: 1002; background: #fff; width: 420px; transition: ease-in-out .3s all; @media (max-width: 767px) { width: 100% } } >div.om-global-navigation { z-index: 1000; position: fixed; left: 0; right: 0; top: var(--om-scrolling-up); transition: ease-in-out .3s top; padding-inline: 24px; .wp-block-group-is-layout-constrained { background: rgba(255, 255, 255, .4); border-radius: var(--wp--preset--spacing--x-small); backdrop-filter: blur(50px); /* margin-inline: var(--wp--preset--spacing--xx-small) !important; */ margin-inline: auto; margin-block: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small); padding-inline: var(--wp--preset--spacing--small); padding-block: var(--wp--preset--spacing--small); max-width: 1320px; width: 100%; transition: ease-in-out .15s all; /* min-width: -webkit-fill-available; min-width: calc(100% - var(--wp--preset--spacing--small)); */ } @media (max-width: 767px) { padding-inline: 0; .wp-block-group-is-layout-constrained { margin: 0; margin-inline: 0 !important; padding-block: var(--wp--preset--spacing--small); border-radius: 0; } } [data-om-menu-open="false"] & { +.om-scroll-down-overlay { opacity: 0; } } .wp-block-group-is-layout-grid { grid-template-columns: max-content 1fr 28px; align-items: center; @media (max-width: 767px) { grid-template-columns: 1fr 28px; grid-template-rows: 1fr 1fr; .wp-block-site-logo { grid-column: 1; grid-row: 1; } .wp-block-buttons { grid-row: 2; grid-column: 1 / 3; display: flex; justify-content: space-between; >div { width: 47%; } } .om-b2b-page &, .category-corporate-resources & { grid-template-rows: 1fr; grid-template-columns: 1fr 28px; .wp-block-buttons { display: none; } } } } .wp-block-navigation__responsive-container { animation: none !important; } [data-om-menu-open="true"] & { animation: none !important; nav { opacity: 0 !important; } +div { right: 0; overflow-y: auto; overflow-x: hidden; opacity: 1; pointer-events: initial; z-index: 10001; .om-main-navigation { width: calc(200% + calc(var(--wp--preset--spacing--small) * 2)); transform: var(--om-menu-transform); transition: ease-in-out .3s all; flex-wrap: nowrap !important; @media (max-width: 767px) { transition: ease-in-out .15s all; } &>div { width: 48%; } .wp-block-group:has(.wp-block-buttons) { align-items: center; p { white-space: normal; word-break: keep-all; overflow-wrap: normal; } .wp-block-buttons { flex-wrap: nowrap; } a { white-space: normal; word-break: keep-all; overflow-wrap: normal; } } .om-main-nav--banner>div { align-items: flex-start !important; } } >div:first-child { position: sticky; top: 0; background: #fff; z-index: 100; } } } } &:has(.om-global-banner) { .om-global-navigation { transform: translateY(var(--banner-height)); transition: ease-out .3s all; /* top: 28px; */ .om-scrolling & { transform: initial; top: var(--om-scrolling-up); } } @media (max-width: 767px) { .om-global-navigation { transform: translateY(var(--banner-height)); } &+main>.alignfull:first-child { margin-top: 9rem !important; } } } } [data-om-menu-open="true"] header:after { content: ''; display: block; background-color: rgba(0, 0, 0, .4); position: fixed; inset: 0; z-index: 1001; transition: ease-in-out .15s all; } /* END Top and Sideout Navigation END */ /* Alternative Navigation */ main:has(.header) { margin-top: 0 !important; padding-top: 0 !important; } .wp-block-group:has(> .entry-content .header) { padding-top: 0 !important; } .header { z-index: 999999999; margin-block-end: 0 !important; padding-block-start: 0 !important; .om-navigation-submenu--action, .om-navigation--trigger { cursor: pointer; } @media (max-width: 767px) { .wp-block-site-logo img { max-width: 80%; } } >div.om-global-navigation { z-index: 1000; position: fixed; left: 0; right: 0; top: var(--om-scrolling-up); transition: ease-in-out .3s top; padding-inline: 24px; .wp-block-group-is-layout-constrained { background: rgba(255, 255, 255, .4); border-radius: var(--wp--preset--spacing--x-small); backdrop-filter: blur(50px); /* margin-inline: var(--wp--preset--spacing--xx-small) !important; */ margin-inline: auto; margin-block: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small); padding-inline: var(--wp--preset--spacing--small); padding-block: var(--wp--preset--spacing--small); max-width: 1320px; width: 100%; transition: ease-in-out .15s all; /* min-width: -webkit-fill-available; min-width: calc(100% - var(--wp--preset--spacing--small)); */ } @media (max-width: 767px) { padding-inline: 16px; .wp-block-group-is-layout-constrained { margin: 0; margin-inline: 0 !important; padding-block: var(--wp--preset--spacing--small); border-radius: 0; } } .wp-block-group-is-layout-grid { grid-template-columns: max-content 1fr 28px; align-items: center; @media (max-width: 767px) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; .wp-block-site-logo { grid-column: 1; grid-row: 1; } .wp-block-buttons { grid-template-columns: 1fr; display: flex; >div { width: fit-content; } } .om-b2b-page &, .category-corporate-resources & { grid-template-rows: 1fr; grid-template-columns: 1fr 28px; .wp-block-buttons { display: none; } } } } .wp-block-navigation__responsive-container { animation: none !important; } [data-om-menu-open="true"] & { animation: none !important; nav { opacity: 0 !important; } +div { right: 0; overflow-y: auto; overflow-x: hidden; opacity: 1; pointer-events: initial; z-index: 10001; .om-main-navigation { width: calc(200% + calc(var(--wp--preset--spacing--small) * 2)); transform: var(--om-menu-transform); transition: ease-in-out .3s all; flex-wrap: nowrap !important; @media (max-width: 767px) { transition: ease-in-out .15s all; } &>div { width: 48%; } .wp-block-group:has(.wp-block-buttons) { align-items: center; p { white-space: normal; word-break: keep-all; overflow-wrap: normal; } .wp-block-buttons { flex-wrap: nowrap; } a { white-space: normal; word-break: keep-all; overflow-wrap: normal; } } .om-main-nav--banner>div { align-items: flex-start !important; } } >div:first-child { position: sticky; top: 0; background: #fff; z-index: 100; } } } } &:has(.om-global-banner) { .om-global-navigation { transform: translateY(var(--banner-height)); transition: ease-out .3s all; .om-scrolling & { transform: initial; } } @media (max-width: 767px) { .om-global-navigation { transform: translateY(var(--banner-height)); } &+main>.alignfull:first-child { margin-top: 9rem !important; } } } } [data-om-menu-open="true"] header:after { content: ''; display: block; background-color: rgba(0, 0, 0, .4); position: fixed; inset: 0; z-index: 1001; transition: ease-in-out .15s all; } /* END Alternative Navigation END */ /* Buttons */ :root :where(.wp-block-button .wp-block-button__link) { white-space: nowrap; } .wp-block-button:has(.view-more-query) { display: flex; justify-content: center; align-items: center; .view-more-query { width: fit-content; } } .wp-block-button.is-style-blur a { transition: ease-in-out .15s all; } .wp-block-button.is-style-blur a:hover { color: #fff !important; } /* END Buttons */ .om-full-width-card { margin-right: -16px !important; margin-left: -16px !important; border-radius: var(--wp--custom--border-radius--small-large); } .entry-content>.alignfull, .om-hero { margin-right: -16px !important; margin-left: -16px !important; border-radius: var(--wp--custom--border-radius--small-large); } /* Video Background */ .om-video-background { overflow: hidden; } :is(.om-hero:first-child:not(.protein-calc):not(.new-homepage--bg), .om-banner-right-blur:first-child:not(.protein-calc):not(.new-homepage--bg), .entry-content > .alignfull:first-child:not(.protein-calc):not(.new-homepage--bg):not(.audio-hero)) { @media (min-width: 767px) and (max-width: 1160px) { padding-block-start: 4rem; } @media (max-width: 767px) { gap: 0; margin-top: 8rem !important; padding-top: 0 !important; .wp-block-columns { gap: 0; max-width: 100%; } .wp-block-column { padding-bottom: 0 !important; padding-top: 0 !important; } } :not(header.om-b2b-page)+main & { padding-top: 8rem; } } header.om-b2b-page+main { margin-top: 0 !important; >div { padding-top: 0 !important } & :is(.om-hero:first-child, .om-banner-right-blur:first-child, .entry-content > .alignfull:first-child) { padding-top: 8rem !important; @media (max-width: 767px) { padding-top: 1rem !important; margin-top: 5rem !important; } } } @media (max-width: 767px) { .om-banner-right-blur .wp-block-columns> :first-child { order: 2; } } /* Add a custom transition when opening/closing. */ .wp-block-details { transition: all 0.15s ease-in-out; } .wp-block-details summary { font-size: var(--wp--preset--font-size--small) !important; font-weight: bold !important; } .wp-block-details :where(:not(summary)) { font-size: var(--wp--preset--font-size--small) !important; } /* If open, add some bottom padding to avoid content butting against the bottom. */ .wp-block-details[open] { padding-bottom: var(--wp--preset--spacing--medium); } /* Base `summary` element styling. */ .wp-block-details { & summary { transition: all 0.3s ease-in-out; box-sizing: border-box; font-weight: 600; background-color: transparent; display: grid; justify-content: space-between; align-items: center; font-size: var(--wp--preset--font-size--regular); grid-template-columns: 1fr 16px; gap: 1rem; &:focus { outline: none; } &:after { content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAwNzk3QyIgZD0iTTExLjI1IDV2MTQgLjc1aDEuNVYxOSA1di0uNzVoLTEuNVY1Wk01IDEyLjc1aDE0IC43NXYtMS41SDE5IDVoLS43NXYxLjVINVoiLz48L3N2Zz4=); width: 24px; height: 24px; } } &[open] summary:after { content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAwNzk3QyIgZD0iTTUgMTIuNzVoMTQgLjc1di0xLjVIMTkgNWgtLjc1djEuNUg1WiIvPjwvc3ZnPg==); } } .wp-block-buttons:has(.om-chip-pill) .wp-block-button__link { width: fit-content !important } [class*="om-chip-pill"] { width: fit-content !important; } .is-safari-183-or-below .wp-block-details summary { grid-template-columns: 0 1fr 16px; } .orderlymeds-button { display: flex; justify-content: center; } .wp-block-buttons:has(.om-chip-square) { flex-wrap: nowrap !important; } /* Cards */ /** Personalized **/ .om-card-group--horizontal-scroll { scroll-snap-type: x mandatory; overflow-x: auto; scroll-behavior: smooth; .om-card--personalized { min-width: 313px; scroll-snap-align: center; &:last-child { margin-inline-end: var(--wp--preset--spacing--medium); } /* List styles */ ul li::marker { color: var(--wp--preset--color--primary); } } } .om-card--personalized { /* List styles */ ul li::marker { color: var(--wp--preset--color--coral-500); } } /** END Personalized END **/ /** Product **/ @media (max-width: 767px) { .om-product-cards-section--header>div { flex-direction: column; align-items: left; } } div:has(> .om-product-cards) { overflow: hidden; } .om-product-cards { overflow-x: visible; transition: ease-in-out .3s all; gap: 32px; padding-inline: 8px; align-items: stretch; & li { margin-top: 0 !important; } >div { transition: ease-in-out .15s width; min-width: calc(31.6% - 2px); background-size: 80%; overflow: hidden; column-gap: 0 !important; @media (max-width: 1060px) { background-size: 100% !important; } @media (min-width: 767px) and (max-width: 1000px) { min-width: calc(32.2% - 5px); } @media (max-width: 767px) { background-size: 60% !important; } @media (max-width: 520px) { background-size: 70% !important; } } @media (max-width: 767px) { flex-direction: column; gap: 24px; >div { flex: 1 100%; min-width: 100%; transform: translateX(0); } } } .om-mobile-horizontal { .om-product-card-pagination { display: flex; gap: var(--wp--preset--spacing--xx-small); align-items: center; justify-content: center; .pagination-dot { border-radius: 50%; } } } .om-card--treatments:has(.product-card--mobile-img) { grid-template-rows: min-content 1fr; overflow: hidden; gap: .8rem; flex-grow: 1; /* flex-basis: 0; */ &> :first-child { grid-column: 1 / 3; } &> :nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; padding-bottom: var(--wp--preset--spacing--medium); padding-bottom: 0; display: grid; place-content: center; &>img { max-height: 280px; width: auto; &[data-src*="tablet-box"] { max-height: 252px; } } } &> :last-child { .wp-block-buttons { width: 100%; >div { flex: 1; } } } @media (min-width: 767px) and (max-width: 1210px) { &> :last-child { .wp-block-buttons { flex-wrap: wrap; } } } @media (max-width: 990px) { .wp-block-group:has(h5, .wp-block-buttons) { flex-direction: column; h5 { order: 2; } } } @media (max-width: 767px) { grid-template-columns: 80px 1fr; grid-template-rows: min-content min-content; min-height: 100% !important; row-gap: 1rem; column-gap: .4rem; padding: var(--wp--preset--spacing--small) !important; &> :first-child { grid-column: 2 / 3; padding-inline-start: var(--wp--preset--spacing--small); & h5 { font-size: var(--wp--preset--font-size--small); } & p { font-size: var(--wp--preset--font-size--xx-small); } .om-chip-pill-small a { font-size: var(--wp--preset--font-size--tiny); } .wp-block-group:has(>h5) { /* flex-wrap: wrap-reverse; */ >div { width: 100%; } } } & figure { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; img { height: 100%; max-height: 120px !important; object-fit: contain; } } &> :last-child { grid-column: 1 / 3; & a { font-size: var(--wp--preset--font-size--x-small); } } } } @media (min-width: 767px) and (max-width: 1000px) { .om-product-cards { gap: 26px; } } @media (min-width: 767px) { .om-product-card-nav>div { pointer-events: initial; opacity: 1; display: flex; } } /*** Product Details ***/ @media (max-width: 767px) { .om-product-details { .wp-block-column:first-child { order: 2; } } } /*** END Product Details END ***/ /** END Product END **/ /* Resources & Blog */ .om-resources--header { grid-template-columns: 1fr 33.3%; p:has(.featured-post__label) { margin: 0; } p:has(.featured-post__tag) { grid-column: 1; } & br { display: none; } .featured-post__content { display: grid; } .featured-post__title { margin: 0; } .featured-post__label { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--gray-700); text-transform: uppercase; } .featured-post__tag { padding-inline: var(--wp--preset--spacing--x-small); padding-block: var(--wp--preset--spacing--xx-small); border-radius: var(--wp--custom--border-radius--large); background-color: var(--wp--preset--color--teal-100); font-size: var(--wp--preset--font-size--x-small); font-weight: bold; background-color: var(--wp--preset--color--teal-100); } & :is(p:empty, .featured-post__tag br) { display: none; } .related-articles { display: grid; row-gap: var(--wp--preset--spacing--large); .related-articles__heading { margin: 0; } } &> :first-child { .featured-post__image { grid-row: 1; margin-bottom: var(--wp--preset--spacing--large); & img { width: 100%; height: auto; border-radius: 12px; } } .featured-post__label { margin-bottom: var(--wp--preset--spacing--xx-small); } .featured-post__title { margin-block-end: var(--wp--preset--spacing--large); } .featured-post__excerpt { font-size: var(--wp--preset--font-size--small); margin-block-end: var(--wp--preset--spacing--xx-small); } } &> :last-child { display: grid; /* row-gap: var(--wp--preset--spacing--large); */ grid-template-rows: repeat(3, min-content); .featured-post__content { grid-template-columns: 1fr 80px; gap: var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--large); } .featured-post__image { grid-column: 2; grid-row: 1 / 5; & img { width: 80px; aspect-ratio: 1; height: auto; border-radius: 12px; object-fit: cover; } } .featured-post__label { grid-column: 1; margin-bottom: calc(var(--wp--preset--spacing--xx-small) / 2); } .featured-post__title { grid-column: 1; margin-block-end: var(--wp--preset--spacing--xx-small); } .featured-post__excerpt { grid-column: 1; font-size: var(--wp--preset--font-size--small); margin-block-end: var(--wp--preset--spacing--xx-small); } } @media (max-width: 767px) { grid-template-columns: 1fr; } } .om-resources--related---sidebar { h3 { margin-top: 0; } >li>div, .wp-block-post>div { display: flex; flex-wrap: nowrap; align-items: start; >div { row-gap: 0rem; } } >li>div>div { row-gap: .8rem !important; } figure { margin-top: 2.3rem; } h5 { margin-top: var(--wp--preset--spacing--xx-small); } .wp-block-post-excerpt__excerpt { font-size: var(--wp--preset--font-size--small); } } .om-latest-posts ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--wp--preset--spacing--large); align-items: baseline; @media (max-width: 767px) { grid-template-columns: 1fr; } } /* Category List */ .wp-block-categories-list { display: grid; gap: 16px; font-weight: 600; list-style: none; margin-left: 0; padding-left: 4px; } /** Tag filter **/ .om-archive-tag-filters { display: flex; justify-content: flex-start; align-items: center; list-style: none; gap: var(--wp--preset--spacing--small); padding: 0; &>li { padding-inline: var(--wp--preset--spacing--x-small); padding-block: var(--wp--preset--spacing--xx-small); border-radius: var(--wp--custom--border-radius--large); background-color: var(--wp--preset--color--teal-100); font-size: var(--wp--preset--font-size--x-small); font-weight: bold; } & a { letter-spacing: .2px; } .current-cat { background-color: var(--wp--preset--color--teal-500); color: var(--wp--preset--color--white-100); font-weight: 600; } } .wp-block-group:has(.om-archive-tag-filters):has(> .wp-block-group) { padding-inline: 0; overflow-x: hidden; & ul { margin-top: 8rem; padding-inline: 16px; white-space: nowrap; } } /* END Resources & Blog END */ /* Weight Loss Calc */ .weight-loss-calc>div { background-image: url(https://orderlymeds.com/wp-content/uploads/2025/04/Calculator-bg.png); background-position: 50% 40%; background-repeat: no-repeat; background-size: 50%; .wp-block-column:has(.wp-block-create-block-weight-loss-calculator)+.wp-block-column { padding-block: var(--wp--preset--spacing--large) !important; } @media (max-width: 1078px) { background-size: 60%; } @media (max-width: 879px) { background-size: 70%; } @media (max-width: 767px) { background-size: 90%; background-position: 50% 35%; padding-top: 4rem !important; gap: 16px; .wp-block-columns { gap: var(--wp--preset--spacing--small) !important; ; } & details { margin-block-start: 16px; } } @media (max-width: 550px) { background-size: 100%; } } .new-homepage--bg { >div:first-child { position: relative; z-index: 2; } >div:last-child:has(> svg) { position: absolute; top: 60px; left: 0; right: 0; z-index: 1; @media (min-width: 1500px) { left: -170px; } @media (min-width: 768px) and (max-width: 1040px) { top: 50px; left: -120px; } @media (min-width: 700px) and (max-width: 771px) { top: 150px; } @media (max-width: 767px) { /* top: 190px; */ left: auto; right: auto; display: none; } @media (min-width: 408px) and (max-width: 700px) { top: 135px; } @media (max-width: 407px) { top: 180px; } @media (max-width: 350px) { top: 250px; } } } .weight-loss-calc.new-homepage--bg>div { /* background-image: url(https://orderlymeds.com/wp-content/uploads/2025/12/homepage-hero-ladies-12-5.webp); */ background-image: none; background-size: 80%; background-position: 50% 70%; @media (max-width: 1078px) { background-size: 80%; } .homepage-hero-grid--12-5 { grid-template-rows: repeat(10, 70px); grid-template-columns: repeat(12, 1fr); & figure { grid-column: 4 / 10; grid-row: 1 / 10; max-width: 100%; } .wp-block-columns { grid-column: 1 / 13; grid-row: 4 / 12; } @media (max-width: 1000px) { .wp-block-columns { grid-row: 4 / 13 } } @media (max-width: 782px) { & figure { grid-column: 1 / 13; } .wp-block-columns { grid-row: 3 / 13 } } } @media (max-width: 767px) { padding-top: 4rem !important; } } /* Forms -- Using Forminator, might need to change if Form service chnages */ @media (max-width: 767px) { .om-main-form { padding-left: var(--wp--preset--spacing--medium) !important; padding-right: var(--wp--preset--spacing--medium) !important; } } .forminator-ui { .iti--show-flags { display: none !important; } .border-wrapper:has(+.iti--show-flags) label { padding-left: 0 !important; } /* opacity: 0; */ #editor & { opacity: 1; } transition: ease-out .15s opacity; display: flex; flex-wrap: wrap; column-gap: var(--wp--preset--spacing--large); >.forminator-row { width: 50%; &.input-full-width { width: 100%; } &:first-of-type:last-of-type { width: 100%; } @media (max-width: 767px) { width: 100%; } } } .forminator-ui:has(.border-wrapper) { opacity: 1; } [class*="forminator-field-"] { transition: .2s all ease-in-out; } .forminator-field { .border-wrapper { border: 1px solid var(--wp--preset--color--navy-100) !important; border-radius: 4px; padding: var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--small) !important; display: grid; >* { grid-row: 2; grid-column: 1; } >label { display: flex !important; align-items: center; transform: none !important; font-size: var(--wp--preset--font-size--small) !important; } } &:is(.forminator-is_active, .forminator-is_focus, .forminator-is_hover, .forminator-is_filled) .border-wrapper { border-color: var(--wp--preset--color--navy-500) !important; } &.forminator-has_error .border-wrapper { border-color: var(--wp--preset--color--red-600) !important; } &:is(.forminator-is_active, .forminator-is_filled) { & label { transform: translateY(-40px) !important; font-size: var(--wp--preset--font-size--x-small) !important; } & input { transform: translateY(0px); } } &:has(select) { border: 1px solid var(--wp--preset--color--navy-100) !important; border-radius: 4px; padding: var(--wp--preset--spacing--x-small) !important; } } .forminator-select-dropdown { background-color: #fff !important; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); border-radius: 0 0 4px 4px; } .select2-results__option--selectable { background-color: #fff !important; color: var(--wp--preset--color--navy-500) !important; } .select2-results__option--highlighted { background-color: var(--wp--preset--color--teal-500) !important; color: #fff !important; } .forminator-button.forminator-button-submit { background-color: transparent !important; padding: 0 !important; } #forminator-module-600.forminator-design--material .forminator-input--wrap .forminator-input, .forminator-ui#forminator-module-600.forminator-design--material .forminator-input--stripe, #forminator-module-600.forminator-design--material .forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"], #forminator-module-600.forminator-design--material .forminator-textarea, .forminator-input { border-bottom: none !important; } #forminator-module-600.forminator-design--material .forminator-input--wrap::after, .forminator-ui#forminator-module-600.forminator-design--material .forminator-input--stripe div.StripeElement:not(.forminator-stripe-payment-element)::after, #forminator-module-600.forminator-design--material .forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"]:before, .forminator-ui.forminator-custom-form[data-design=material] .forminator-input--wrap:after { visibility: hidden; } .forminator-row-last { width: 100% !important } .om-footer--form-input .forminator-ui { display: grid; grid-template-columns: 1fr auto; margin: 0; max-width: 320px; width: 320px; transition: none; @media screen and (max-width: 767px) { max-width: 100%; width: 100%; } &>*:empty { display: none; } p:has(> input[type=hidden]) { display: none; } .forminator-row { grid-column: 1 / 3; width: 100%; height: 50px; grid-row: 1; margin-bottom: 0 !important; & label { display: none; } & input { transform: none !important; width: 100%; height: 50px; border-radius: 4px; appearance: none; border: none; padding: 10px 75px 10px 12px; } } .forminator-response-message { grid-row: 2; grid-column: 1 / 3; font-size: var(--wp--preset--font-size--x-small); max-width: 100%; line-height: 1.2; margin-block-start: 4px; color: #fff; background-color: var(--wp--preset--color--red-700); border-radius: 4px; padding-block: 4px 6px; padding-inline: 8px; margin-block-start: 6px; animation: fadein 0.3s ease-in-out; } @keyframes fadein { 50% { opacity: 0; } 100% { opacity: 1; } } .forminator-row-last { width: fit-content !important; margin-bottom: 0; grid-column: 2 / 3; grid-row: 1; border-radius: 4px; color: #fff; height: auto; & button { height: 50px; width: fit-content; padding: 10px 12px !important; appearance: none; border: 2px solid #fff; border-radius: 4px; background-color: var(--wp--preset--color--navy-500) !important; color: #fff; } } } .om-inline-form-input-container form { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; max-width: 600px; place-content: center; margin: 0 auto !important; .forminator-col { padding: 0 !important; } .forminator-row { grid-column: 1/2; width: 100%; margin-bottom: 0 !important; } .forminator-row-last { grid-column: 2/3; height: 100%; margin-bottom: 0; display: grid; place-content: center; display: grid; place-content: center; width: fit-content !important; background-color: var(--wp--preset--color--coral-500) !important; color: var(--wp--preset--color--navy-500); border-radius: 30px; padding-inline: 12px; transition: ease-in-out .15s all; & button { color: inherit; font-weight: 700 !important; } &:hover { background-color: var(--wp--preset--color--coral-400) !important; color: #fff !important; } } .forminator-field { display: grid; border-radius: 4px; border: 1px solid var(--wp--preset--color--navy-500); .input-full-width & { padding-inline-start: 12px !important; } & label.forminator-label.forminator-floating--input { grid-row: 1; grid-column: 1; transform: translateY(10px); } .forminator-input--wrap { grid-row: 1; grid-column: 1; transform: translateY(-10px); } &:has(input) { background-color: #fff; padding: 8px 12px !important; } &:is(.forminator-is_active, .forminator-is_filled) { & label { color: #fff; display: none !important; } & input { transform: translateY(8px); } } .border-wrapper { /* padding: 0 !important; margin: 0; border: none !important; */ } button>span { all: unset } .forminator-error-message { position: absolute; bottom: 0px; } & input { transform: translateY(8px); } } @media screen and (max-width: 767px) { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; row-gap: var(--wp--preset--spacing--20); } } .om-single-form-input-container form { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 12px; max-width: 600px; place-content: center; margin: 0 auto !important; .forminator-col { padding: 0 !important; } .forminator-row { grid-column: 1; grid-row: 1; width: 100%; margin-bottom: 0 !important; } .forminator-row-last { grid-column: 1; grid-row: 2; height: 100%; margin-bottom: 0; display: grid; place-content: center; display: grid; place-content: center; width: fit-content !important; background-color: var(--wp--preset--color--navy-500) !important; color: var(--wp--preset--color--white-100); border-radius: 30px; padding-inline: 12px; transition: ease-in-out .15s all; & button { color: inherit; font-weight: 700 !important; } &:hover { background-color: var(--wp--preset--color--navy-400) !important; color: var(--wp--preset--color--white-100) !important; } } .forminator-field { display: grid; border-radius: 4px; border: 1px solid var(--wp--preset--color--navy-500); .input-full-width & { padding-inline-start: 12px !important; } & label.forminator-label.forminator-floating--input { grid-row: 1; grid-column: 1; transform: translateY(10px); } .forminator-input--wrap { grid-row: 1; grid-column: 1; transform: translateY(-10px); } &:has(input) { background-color: #fff; padding: 8px 12px !important; } &:is(.forminator-is_active, .forminator-is_filled) { & label { color: #fff; display: none !important; } & input { transform: translateY(8px); } } .border-wrapper { /* padding: 0 !important; margin: 0; border: none !important; */ } button>span { all: unset } .forminator-error-message { position: absolute; bottom: 0px; } & input { transform: translateY(8px); } } @media screen and (max-width: 767px) { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; row-gap: var(--wp--preset--spacing--20); } } .full-width:has(> form[id*="forminator"]), .full-width>form[id*="forminator"] .forminator-row, .full-width>form[id*="forminator"] button { width: 100% !important; } /* Anchor Link Adjustment */ #signup { scroll-margin-top: 100px; } /* END FORM END */ /* Results Card */ .om-before-after { .wp-block-columns>.wp-block-column { flex-basis: calc(50% - 4px) !important; &>div>* { grid-row: 1; grid-column: 1; &:first-child { padding: 8px; } } } } /* .om-content-block.two-col-equal .wp-block-column { height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; } */ /* Content Cards */ .content-card--4-cards { @media (max-width: 767px) { padding-inline: 1rem !important; .wp-block-columns { gap: 0; >.wp-block-column { padding-bottom: 0 !important; } } } } /* Content Cards */ /* OM Marquee */ @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } .om-marquee { &>div { overflow: hidden; } &>div>div { animation: marquee 40s linear infinite; gap: var(--wp--preset--spacing--xx-large); } p { white-space: nowrap; } } /* Large Link */ .om-link-large { width: 100%; & :is(a, .block-editor-rich-text__editable) { display: grid; grid-template-columns: 1fr min-content; align-items: center; font-weight: 400 !important; font-size: var(--wp--preset--font-size--regular); text-align: left; white-space: normal; &:after { content: ''; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAwNzk3QyIgZD0iTTkuNTMgMTguNTNsNi02IC41My0uNTQgLS41NC0uNTQgLTYtNiAtLjU0LS41NCAtMS4wNyAxLjA2IC41My41MyA2IDZ2LTEuMDdsLTYgNiAtLjU0LjUzIDEuMDYgMS4wNiAuNTMtLjU0WiIvPjwvc3ZnPg==); background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; height: 24px; width: 24px; } } } .om-mobile-horizontal { /* Card section wrapper */ &.om-cards-section, .om-product-cards-section--header+div { overflow: hidden; position: relative; width: 100%; } /* Product card container */ .om-product-cards { width: 100%; display: flex !important; flex-wrap: nowrap !important; transition: transform 0.3s ease; will-change: transform; } /* Each product card */ .om-product-cards>div { /* min-width: 100%; flex: 0 0 100%; */ box-sizing: border-box; padding: 1rem; } /* Pagination (visible only on mobile) */ .om-product-card-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 1rem; } /* Pagination dot */ .pagination-dot { border-radius: 50%; width: 10px; height: 10px; background-color: var(--wp--preset--color--navy-100); transition: all 0.2s ease; } /* Responsive override for mobile view */ @media screen and (max-width: 767px) { .om-product-cards { flex-wrap: nowrap !important; flex-direction: row; align-items: flex-start; /* JS handles transform */ } .om-product-cards>div { min-width: 100%; height: 100%; min-height: 260px !important; padding-top: var(--wp--preset--spacing--medium) !important; & p:not(:has(em)) { font-size: var(--wp--preset--font-size--x-small) !important; } } &.om-benefits-cards .om-product-cards>div { min-height: 220px !important; } } .om-product-card-pagination { display: flex; gap: var(--wp--preset--spacing--xx-small); align-items: center; justify-content: center; .pagination-dot { border-radius: 50%; } } } /* FAQs */ .faq-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; >a { white-space: nowrap; } } .wp-block-details [pseudo="-webkit-details-marker"] { display: none !important; appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; width: 0px !important; opacity: 0 !important; visibility: hidden !important; } .faq-section summary::-webkit-details-marker { appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 0px; opacity: 0; visibility: hidden; } .is-safari-183-or-below :is(.wp-site-blocks)>header { z-index: 999999999; } .is-safari-183-or-below :is(.wp-site-blocks)>header .om-navigation-submenu--action { cursor: pointer; } @media (max-width: 767px) { .is-safari-183-or-below :is(.wp-site-blocks)>header .wp-block-site-logo img { max-width: 80%; } } .is-safari-183-or-below :is(.wp-site-blocks)>header>div:last-child { position: fixed; right: -140%; top: 0; opacity: 0; pointer-events: none; height: 100vh; z-index: 1002; background: #fff; width: 420px; transition: ease-in-out .3s all; } @media (max-width: 767px) { .is-safari-183-or-below :is(.wp-site-blocks)>header>div:last-child { width: 100%; } } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation { z-index: 1000; position: fixed; left: 0; right: 0; top: var(--om-scrolling-up); transition: ease-in-out .3s top; padding-inline: 24px; } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-constrained { background: rgba(255, 255, 255, .4); border-radius: var(--wp--preset--spacing--x-small); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); margin-inline: auto; margin-block: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small); padding-inline: var(--wp--preset--spacing--small); padding-block: var(--wp--preset--spacing--small); max-width: 1320px; width: 100%; transition: ease-in-out .15s all; } @media (max-width: 767px) { .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation { padding-inline: 0; } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-constrained { margin: 0; margin-inline: 0 !important; padding-block: var(--wp--preset--spacing--small); border-radius: 0; } } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid { grid-template-columns: max-content 1fr 28px; align-items: center; } @media (max-width: 767px) { .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid { grid-template-columns: 1fr 28px; grid-template-rows: 1fr 1fr; } .is-safari-183-or-below.category-corporate-resources :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid { grid-template-rows: 1fr; .wp-block-site-logo+.wp-block-buttons { display: none; } } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid .wp-block-site-logo { grid-column: 1; grid-row: 1; } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid .wp-block-buttons { grid-row: 2; grid-column: 1 / 3; display: flex; justify-content: space-between; } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid .wp-block-buttons>div { width: 47%; } .is-safari-183-or-below .om-b2b-page :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid { grid-template-rows: 1fr; grid-template-columns: 1fr 28px; } .is-safari-183-or-below .om-b2b-page :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-group-is-layout-grid .wp-block-buttons { display: none; } } .is-safari-183-or-below :is(.wp-site-blocks)>header>div.om-global-navigation .wp-block-navigation__responsive-container { animation: none !important; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation { animation: none !important; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation nav { opacity: 0 !important; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div { right: 0; overflow-y: auto; overflow-x: hidden; opacity: 1; pointer-events: initial; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation { width: calc(200% + calc(var(--wp--preset--spacing--small) * 2)); transform: var(--om-menu-transform); transition: ease-in-out .3s all; flex-wrap: nowrap !important; } @media (max-width: 767px) { .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation { transition: ease-in-out .15s all; } } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation>div { width: 48%; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation .wp-block-group:has(.wp-block-buttons) { align-items: center; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation .wp-block-group:has(.wp-block-buttons) p, .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation .wp-block-group:has(.wp-block-buttons) a { white-space: normal; word-break: keep-all; overflow-wrap: normal; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation .wp-block-group:has(.wp-block-buttons) .wp-block-buttons { flex-wrap: nowrap; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div .om-main-navigation .om-main-nav--banner>div { align-items: flex-start !important; } .is-safari-183-or-below [data-om-menu-open="true"] :is(.wp-site-blocks)>header>div.om-global-navigation+div>div:first-child { position: sticky; top: 0; background: #fff; z-index: 100; } .is-safari-183-or-below :is(.wp-site-blocks)>header:has(.om-global-banner) .om-global-navigation { transform: translateY(var(--banner-height)); transition: ease-out .3s all; } .is-safari-183-or-below :is(.wp-site-blocks)>header:has(.om-global-banner) .om-scrolling .om-global-navigation { transform: initial; } @media (max-width: 767px) { .is-safari-183-or-below :is(.wp-site-blocks)>header:has(.om-global-banner) .om-global-navigation { transform: translateY(var(--banner-height)); } .is-safari-183-or-below :is(.wp-site-blocks)>header:has(.om-global-banner)+main>.alignfull:first-child { margin-top: 9rem !important; } } .is-safari-183-or-below [data-om-menu-open="true"] header:after { content: ''; display: block; background-color: rgba(0, 0, 0, .4); position: fixed; inset: 0; z-index: 1001; transition: ease-in-out .15s all; } /* B2B Product Cards */ .om-b2b-product-cards>div { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--medium); @media (max-width: 767px) { grid-template-columns: 1fr; } } .page-template-b2b-page { .om-card--treatments { grid-template-columns: 100px 1fr; column-gap: 2rem !important; row-gap: 0 !important; min-height: auto !important; &> :first-child { grid-column: 2 / 3; grid-row: 1; } &> :nth-child(2) { grid-row: 1; grid-column: 1; } } @media (max-width: 832px) { .om-product-cards { grid-template-columns: 1fr; } } } strong { font-weight: 700 !important; } img { max-width: 100%; } html body .entry-content div.wp-block-group.alignfull.has-global-padding:has(> .wp-block-create-block-product-recommender) { .wp-block-create-block-product-recommender { max-width: calc(1288px - 14%); @media (max-width: 1140px) { margin-block-start: -60px !important; } } } .wp-block-create-block-product-recommender form>p { display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 600px; justify-content: center; row-gap: 1rem; column-gap: .5rem; } .wp-block-create-block-product-recommender form>p br { display: none; } .wp-block-create-block-product-recommender form input[type=number] { padding: 10px 0px 10px 14px; } .wp-block-create-block-product-recommender form select { padding: .5rem 0 .5rem .5rem; } .wp-block-create-block-product-recommender form input[type=number], .wp-block-create-block-product-recommender form input[type=text], .wp-block-create-block-product-recommender form select { border-radius: 4px; border: 1px solid var(--wp--preset--color--navy-500); } /* Testimonials Tabs */ div [class*="tab--content"]:not(.active) { display: none; } [class*="tab--content"] li { margin-block-start: 0 !important; } .om-callout-metrics { font-size: 230px; font-style: normal; font-weight: 400; white-space: nowrap; line-height: 1; background: linear-gradient(180deg, var(--wp--preset--color--navy-500) 40.87%, var(--wp--preset--color--navy-300) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; >span { font-size: 150px; font-weight: 300; } @media (max-width: 767px) { font-size: 160px; >span { font-size: 91px; } } } @media (max-width: 767px) { div:has(.om-callout-metrics)> :last-child { text-align: left; } } .wp-container-core-group-is-layout-37f99c75 { min-width: 200px; } .entry-content [class*="tab--content"] .entry-content.wp-block-post-content>div { margin-block-end: 0px !important; @media (max-width: 767px) { flex-direction: column; } >div:first-child { font-size: var(--wp--preset--font-size--small); } h5 { line-height: 1; } } :is(.trustpilot-tab, .google-tab, .facebook-tab):not(.active) { border-bottom: 1px solid var(--wp--preset--color--navy-100); cursor: pointer; >p { font-weight: 400; color: var(--wp--preset--color--gray-500) !important; } @media (max-width: 783px) { border-bottom: none !important; } } :is(.trustpilot-tab, .google-tab, .facebook-tab).active { border-bottom: 1px solid var(--wp--preset--color--navy-500); cursor: pointer; >p { font-weight: bold; color: var(--wp--preset--color--navy-500) !important; } @media (max-width: 783px) { border-bottom: none !important; &.om-chip-pill a { background-color: var(--wp--preset--color--teal-500) !important; color: #fff !important; } } } .customer-story-cards { ul { display: flex; gap: 2rem; } li { width: 405px; max-width: 100%; margin-block-start: 0 !important; img { transform: scale(1.01); } } .entry-content.wp-block-post-content .wp-block-columns { margin-block-end: 0 !important; &:after { content: ''; background-color: var(--wp--preset--color--navy-500); background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExLjI1IDV2MTQgLjc1aDEuNVYxOSA1di0uNzVoLTEuNVY1Wk01IDEyLjc1aDE0IC43NXYtMS41SDE5IDVoLS43NXYxLjVINVoiLz48L3N2Zz4=); background-size: 20px; background-position: center; background-repeat: no-repeat; width: 44px; height: 44px; position: absolute; left: 1rem; bottom: 1rem; z-index: 1000; border-radius: 50%; transition: ease-in-out .15s all; } } .entry-content.wp-block-post-content .wp-block-columns.is-flipped:after { background-color: var(--wp--preset--color--teal-500); transform: rotate(45deg); } .wp-block-column { box-sizing: border-box; } .card-backface { display: grid; } .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493:not(.no-min-height) { position: relative; overflow: hidden; min-height: 520px; } .card-frontface, .card-backface { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; justify-content: space-between; } .card-frontface { z-index: 1; } .card-backface { z-index: 2; transform: translateY(100%); background-color: var(--wp--preset--color--navy-50); padding: 2rem; overflow-y: auto; } .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493.is-flipped .card-backface { transform: translateY(0); } } /* Utility */ .has-blur { -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); } .has-blur-25 { -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); } .nowrap { white-space: nowrap; } .om-hide { display: none !important; } .mobile-full-width { @media screen and (max-width: 767px) { width: 100% !important; } } .desktop-only:not(.block-editor-block-list__block) { display: flex; @media screen and (max-width: 767px) { display: none; } } .mobile-only:not(.block-editor-block-list__block) { display: none; @media screen and (max-width: 767px) { display: flex; &.wp-block-details { flex-direction: column; } } } .tablet-show:not(.block-editor-block-list__block) { display: none; @media (max-width: 1024px) { display: flex; } } .tablet-hide:not(.block-editor-block-list__block) { display: flex; @media (max-width: 1023px) { display: none; } } .aspect-1, .aspect-1>img { aspect-ratio: 1 / 1; height: auto; } .mobile-reverse-order { @media screen and (max-width: 767px) { >*:first-child { order: 2; } >*:last-child { order: 1; } } } .no-overflow { overflow: clip !important; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% + 100vw)); } } @keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } } /* Homepage Dec 2025 */ /* Slow scroll (this is used on Homepage Dec 2025) */ .entry-content>.wp-block-group:has(.om-slow-scroll-container):has(.homepage-success-container) { overflow: hidden; } div:has(> .om-slow-scroll-container) { display: flex; flex-direction: column; overflow: hidden; width: 100vw; } .homepage-success-container { display: flex; /* flex-direction: column; */ overflow: hidden; width: 100vw; } .om-slow-scroll-container { --scroll-time: 85s; min-width: max-content; flex-wrap: nowrap; overflow: visible; gap: 1.5rem !important; & img { height: 65px; width: auto; } &:not(.reverse) { animation: scroll-left calc(var(--scroll-time) + 100s) linear infinite; &:first-of-type { animation: scroll-left calc(var(--scroll-time) + 300s) linear infinite; } } &.reverse { transform: translateX(-50%); animation: scroll-right var(--scroll-time) linear infinite; } &:hover { animation-play-state: paused; } } .homepage-success-container .om-slow-scroll-container { >* { max-width: 420px; height: 280px; } & img { height: auto } &:not(.reverse) { animation: scroll-left 235s linear infinite; } } /* END Slow scroll (this is used on Homepage Dec 2025) END */ /* Timeline Section */ @media screen and (max-width: 768px) { .homepage-timeline-section > div { background-image: none !important; } .homepage-timeline-section .is-layout-constrained { max-width: 100% !important; } } .homepage-timeline-DEC25 { &>div { &:first-child { grid-column: 1 / 8; grid-row: 3; } &:nth-child(2) { grid-column: 6 / 13; grid-row: 1; } &:nth-child(3) { grid-column: 11 / 18; grid-row: 3; } &:nth-child(4) { grid-column: 16 / 23; grid-row: 1; } &:nth-child(5) { grid-column: 21 / 28; grid-row: 3; } &:last-child { display: flex; justify-content: space-between; align-items: center; /* overflow: clip; */ position: relative; grid-row: 2; grid-column: 1 / 28; width: 100%; >div { width: 24px; height: 24px; aspect-ratio: 1; position: relative; z-index: 1; } &:after { content: ''; display: block; height: 2px; width: 100%; position: absolute; left: 0; right: 0; background-color: var(--wp--preset--color--navy-50); z-index: 0; } } } @media screen and (max-width: 768px) { grid-template-columns: 24px 1fr; &>div:not(:last-child) { grid-column: 2; grid-row: auto; } &>div:last-child { width: 100%; height: 100%; display: grid; align-items: start; grid-template-rows: subgrid; grid-row: 1 / 6; grid-column: 1; &:after { top: 0; bottom: 0; left: 11px; width: 2px; height: 100%; } } } } /* END Timeline Section END */ /* END Homepage Dec 2025 END */ .reviews-container+div .view-more-query { background-color: var(--wp--preset--color--white-100); border-color: var(--wp--preset--color--navy-500); color: var(--wp--preset--color--navy-500); } .om-equal-height { align-items: stretch !important; >.wp-block-column { align-self: stretch !important; >div { height: 100%; } } @media screen and (max-width: 768px) { h4 br { display: none; } } } @media screen and (max-width: 768px) { .om-reverse-mobile-stack { flex-direction: column-reverse; } } /* Testimonials Carousel */ .customer-story-cards { position: relative; padding: 0; box-sizing: border-box; } /* .om-facebook-story-cards { overflow: hidden; } .om-facebook-story-cards ul.wp-block-post-template { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0; gap: var(--wp--preset--spacing--medium); scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .om-facebook-story-cards ul.wp-block-post-template::-webkit-scrollbar { display: none; } .om-facebook-story-cards li.wp-block-post { flex: 0 0 90%; max-width: 370px; scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; @media (max-width: 783px) { flex: 0 0 100%; } } */ /* ================================================================= Responsive Testimonial Carousel CSS ================================================================= */ /* --- Base Styles (Mobile-first) --- */ .om-facebook-story-cards { /* The main container needs a position context for your navigation buttons */ position: relative; overflow: hidden; } .om-facebook-story-cards ul.wp-block-post-template { display: flex; flex-wrap: nowrap; overflow-x: auto; /* Enables horizontal scrolling on mobile */ margin: 0; padding-bottom: 1rem; /* Adds space for scrollbar or pagination dots if they overlap */ gap: var(--wp--preset--spacing--medium); /* Snapping behavior for a smooth mobile experience */ scroll-snap-type: x mandatory; scrollbar-width: none; /* Hide scrollbar for Firefox */ -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */ } /* Hide scrollbar for Chrome, Safari, and Opera */ .om-facebook-story-cards ul.wp-block-post-template::-webkit-scrollbar { display: none; } .om-facebook-story-cards li.wp-block-post { flex: 0 0 90%; /* Each card takes 90% of the container width on mobile */ max-width: 370px; scroll-snap-align: center; /* Snap cards to the center on scroll */ scroll-snap-stop: always; cursor: pointer; } /* --- Styles for smaller mobile devices --- */ @media (max-width: 783px) { .om-facebook-story-cards li.wp-block-post { flex: 0 0 100%; /* Card takes full width on the smallest screens */ } } /* --- Styles for Desktop (3-card layout) --- */ @media (min-width: 784px) { .om-facebook-story-cards ul.wp-block-post-template { /* On desktop, we disable per-item snapping since we scroll in groups */ scroll-snap-type: none; } .om-facebook-story-cards li.wp-block-post { /* * This is the core calculation for the 3-card layout. * It calculates the basis for each card to be 1/3 of the container's * width, while also subtracting space to account for the gaps. */ flex-basis: calc((100% / 3) - (var(--wp--preset--spacing--medium) * (2 / 3))); flex-shrink: 0; /* Override mobile-specific styles */ max-width: none; scroll-snap-align: none; /* Disable snapping for individual items */ } } .om-slider-nav { position: absolute; top: auto; bottom: 20px; transform: none; z-index: 10; background-color: var(--wp--preset--color--white-100); border: 1px solid var(--wp--preset--color--teal-500); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .om-slider-nav:hover { background-color: white; } .om-slider-next { right: 20px; bottom: 2px; left: auto; } .om-slider-prev { right: 74px; bottom: 2px; left: auto; } @media (max-width: 783px) { .om-slider-next, .om-slider-prev { display: none; } .om-slider-pagination { display: flex; } } .om-slider-nav svg { width: 24px; height: 24px; fill: var(--wp--preset--color--teal-500); } .om-slider-nav:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* --- Testimonials Carousel Pagination Dots --- */ .om-slider-pagination { display: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); gap: 8px; /* Space between dots */ z-index: 11; /* Ensure it's above other elements */ } .om-slider-pagination .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ffffff; /* Inactive color */ border: 1px solid #ccc; cursor: pointer; transition: background-color 0.3s ease; } .om-slider-pagination .dot.active { background-color: var(--wp--preset--color--teal-500); border-color: var(--wp--preset--color--teal-500); } @media (max-width: 783px) { .om-slider-pagination { display: flex; } } /* Tabs mobile */ .reviews-header { display: none; justify-content: space-between; align-items: center; color: var(--wp--preset--color--teal-500); /* A light teal for the text */ margin-bottom: 1rem; } .reviews-header p { margin: 0; } @media (max-width: 783px) { .reviews-header { display: flex; flex-direction: column; width: 100vw; margin-inline-start: -20px !important; padding-inline: 20px; padding-block-start: 16px; background-color: var(--wp--preset--color--navy-50); > :first-child { display: flex; justify-content: space-between; align-items: stretch; width: 100%; } > :last-child { margin-left: 0 !important; height: 0; >div { display: none; } } svg { transition: ease-in-out .15s all; } &.active { height: 100%; padding-block: 16px; >div, >div>div { display: flex; height: 100%; } svg { transform: rotate(180deg); } } } .reviews-tabs-container { display: none !important; } } .taxonomy-post_tag { border-radius: 1000px; padding-right: 0 !important; padding-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; background-color: transparent !important; display: flex; flex-wrap: wrap; column-gap: 0.3rem; row-gap: 0.6rem; /* pointer-events: none; */ & a { border-radius: 1000px; padding-right: var(--wp--preset--spacing--x-small); padding-left: var(--wp--preset--spacing--x-small); padding-top: var(--wp--preset--spacing--xx-small); padding-bottom: var(--wp--preset--spacing--xx-small); font-size: var(--wp--preset--font-size--x-small) !important; font-weight: 600; background-color: var(--wp--preset--color--teal-100) !important; } } /* Post Slider */ .swiper { overflow: visible; } .swiper-wrapper { transition-duration: 500ms !important; } .swiper-slide { border-radius: 12px; overflow: hidden; } .swiper-container-outer { background-position: top center !important; display: grid; grid-template-rows: 240px 1fr; background-size: contain !important; } .ebpg-carousel-post img { border-radius: 12px !important; border: 1px solid var(--wp--preset--color--navy-50); } .ebpg-carousel-post .ebpg-entry-wrapper { padding: 8px 0 !important; } .gutslider-overlay { grid-row: 1; } .swiper-container-outer .gutslider-content-wrapper { grid-row: 2; height: auto !important; min-height: 320px; } .swiper-container-outer .gutslider-content-inner { max-width: 100%; } .wp-block-gutsliders-post-slider .gutslider-nav.nav_outside.nav_br { bottom: 20px; } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { transform: translate(-50%, 180%); } .slick-arrow { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--wp--preset--color--teal-500) !important; padding: 8px !important; display: grid !important; place-content: center; } .slick-prev { left: auto !important; bottom: -36px; top: auto !important; right: 28px; } .slick-next { bottom: -35px; top: auto !important; } .slick-disabled { opacity: .4; pointer-events: none; } @media screen and (max-width: 766px) { .slick-dots { display: none !important; } .eb-post-carousel .slick-track { flex-direction: column; article { width: 100% !important; } } } /* Personalized Popover Cards (Hotspot) */ /* @position-try --hotspot-card { inset: auto; top: anchor(bottom); right: anchor(left); } */ .om-banner--hotspot-targets { position: relative; } /* Using a flexible selector for the hotspot targets */ [class*="om-hotspot-cards-target"] { position: absolute; z-index: 10; } /* Initial state of the popover - hidden by default */ [class*="om-hotspot-cards--"] { z-index: 100; border: none !important; max-width: 420px; width: 100%; position: absolute; visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; transform: translateY(10px); /* A slight animation effect */ display: none !important; @media screen and (max-width: 767px) { position: fixed; left: 0 !important; right: 0 !important; /* max-width: calc(100vw - 24px); */ top: auto !important; bottom: 0.5rem; margin: 0 auto !important; } } [class*="om-hotspot-cards--"].visible { visibility: visible; opacity: 1; transform: translateY(0); display: none !important; } div:has(> [class*="om-hotspot-cards-target--"]) { position: relative; } [class*="om-hotspot-cards-target"] { opacity: 1; display: block; position: relative; & *:not(.icon-container) { pointer-events: none; } .icon-container { transform: rotate(0deg) scaleX(1) scaleY(1); transition: transform 0.3s ease; } &[title*="om-hotspot-cards-target--"] { position: absolute; } &[title="om-hotspot-cards-target--gastro"] { top: 57%; right: 51%; } &[title="om-hotspot-cards-target--muscle"] { top: 45%; right: 10%; } &[title="om-hotspot-cards-target--energy"] { top: 35%; right: 49%; } } @media screen and (max-width: 767px) { main:has([class*="om-hotspot-cards--"].visible):after { content: ''; background-color: rgba(0, 0, 0, .3); position: fixed; inset: 0; } } [popover]:-internal-popover-in-top-layer::backdrop { background-color: rgba(0, 0, 0, .3) !important; } div:has(>.om-hotspot-cards [class*="om-hotspot-cards--"] [class*="om-hotspot-cards-target"]) { transform: rotate(0deg) scaleX(1) scaleY(1); transition: transform 0.3s ease; } div:has(>.om-hotspot-cards [class*="om-hotspot-cards--gastro"].visible) .om-hotspot-cards-target--gastro, div:has(>.om-hotspot-cards [class*="om-hotspot-cards--energy"].visible) .om-hotspot-cards-target--energy, div:has(>.om-hotspot-cards [class*="om-hotspot-cards--muscle"].visible) .om-hotspot-cards-target--muscle { transform: rotate(45deg) scaleX(1) scaleY(1); transition: transform 0.3s ease; } [class*="om-hotspot-cards--"] .icon-container:hover svg path:first-child { fill: #015658; transition: fill 0.3s ease; } /* om-b2b-info-cards */ .om-b2b-info-cards { align-items: unset; &>div { flex: 1; justify-content: flex-start !important; gap: 1rem; } &>div .icon-container svg { height: 40px; } @media screen and (max-width: 767px) { flex-direction: column; gap: var(--wp--preset--spacing--medium); &>div { flex-direction: row !important; align-items: center !important; text-align: left !important; } } } /****** Medical Math Page */ /* Hero */ @media screen and (max-width: 767px) { .wp-block-group.alignfull.om-hero.has-coral-to-deep-coral-gradient-background.medical-math--hero.has-pink-to-pale-purple-gradient-background.has-background.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained { padding-top: var(--wp--preset--spacing--large) !important; padding-inline: 0 !important; padding-block-start: 16px !important; } .medical-math--hero-section { background-size: cover !important; background-position: center bottom !important; } .wp-block-button { width: 100%; } } .medical-math--form { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.3); border-radius: 12px; @media screen and (max-width: 767px) { margin-block-start: 240px !important; margin-inline: 16px; padding-right: var(--wp--preset--spacing--small) !important; padding-left: var(--wp--preset--spacing--small) !important; } } .om-medical-math__container { display: grid; gap: var(--wp--preset--spacing--large); } .medical-math--form-fields { display: grid; gap: var(--wp--preset--spacing--medium); } .om-medical-math__field-group { display: flex; flex-direction: column; align-items: stretch; width: 100%; position: relative; & label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray-700) } & select, input { height: 50px; border-radius: 8px; font-size: 20px; padding: 10px 14px; border: none; font-weight: 400; font-family: var(--wp--preset--font-family--plus-jakarta-sans); -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari, Chrome, Opera */ appearance: none; select::-ms-expand { /* Internet Explorer */ display: none; } &::placeholder { color: var(--wp--preset--color--gray-400); } & option:first-of-type { color: var(--wp--preset--color--gray-500) } &+p { margin-block: 0.3rem; font-size: var(--wp--preset--font-size--xx-small); } &:focus-visible { outline: 2px solid var(--wp--preset--color--navy-500); outline-offset: 2px; } } select:after { content: ''; position: absolute; right: 14px; /* top: 50%; */ transform: translateY(-50%); width: 24px; height: 24px; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzM0Nzc3QiIgZD0iTTUuNDYgOS42OGw2IDUuOTkgLjUzLjUzIC41My0uNTQgNi02IC41My0uNTQgLTEuMDctMS4wNyAtLjU0LjUzIC02IDUuOTloMS4wNmwtNi02IC0uNTQtLjU0IC0xLjA3IDEuMDYgLjUzLjUzWiIvPjwvc3ZnPg==); background-size: cover; pointer-events: none; } &:has(select):after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzM0Nzc3QiIgZD0iTTUuNDYgOS42OGw2IDUuOTkgLjUzLjUzIC41My0uNTQgNi02IC41My0uNTQgLTEuMDctMS4wNyAtLjU0LjUzIC02IDUuOTloMS4wNmwtNi02IC0uNTQtLjU0IC0xLjA3IDEuMDYgLjUzLjUzWiIvPjwvc3ZnPg==); background-size: cover; pointer-events: none; } &:first-child:has(select):after { top: 65%; } input { height: 30px; } } .om-medical-math__result-heading { margin-block: 0 1rem; } .om-medical-math__result-value { font-size: 64px; color: var(--wp--preset--color--teal-500); font-weight: bold; & span { font-size: 32px; &.error { font-size: 18px; } } } :root :where(.wp-block-button .wp-block-button__link.om-medical-math__calculate-btn[disabled]) { pointer-events: none; background-color: var(--wp--preset--color--gray-300) !important; color: var(--wp--preset--color--gray-500) !important; border: none; } /* Scroll Trail */ .scroll-trail-column { --scroll-progress-height: 0px; &>div { padding-inline-end: 0; } .wp-block-columns { gap: var(--wp--preset--spacing--large); &>div:last-child>div:after { content: ''; position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(circle at top 10% right 10%, transparent 0%, transparent 40%); transition: ease-in-out .15s all; z-index: 0; border-radius: 12px; } &>div:last-child>div>* { z-index: 10; position: relative; } } /* The :after element will now use the custom property for its height */ >div:after { content: ''; position: absolute; top: 0; left: 0.75rem; transform: translateX(-50%); width: 4px; height: var(--scroll-progress-height); /* This is the key change */ background-color: var(--wp--preset--color--navy-500); z-index: -1; /* Add a transition for a smooth animation effect */ transition: height 0.15s ease-out; transform: translate(4.7px, 4.5px); } /* Your existing :before styles */ >div:before { content: ''; position: absolute; top: 0; left: 0.75rem; transform: translateX(-50%); width: 4px; height: 100%; background-color: var(--wp--preset--color--navy-100); z-index: -1; transform: translate(4.7px, 6.5px); } p.scroll-trail--marker-num { border-radius: 50%; background-color: var(--wp--preset--color--navy-100); aspect-ratio: 1; width: 24px; transform: translate(6.7px, 6.5px); } } .scroll-trail-column>div:before { content: ''; /* This creates a smooth transition for the color change. */ transition: background-color 0.3s ease; } /* New state: This class will be added to the parent element to change the pseudo-element's color. */ .scroll-trail-column.scrolled-down>div:before { background-color: var(--wp--preset--color--navy--500); } .scroll-trail--marker-num.scroll-trail--marker-num--active { background-color: var(--wp--preset--color--navy-500) !important; /* Change to a darker color */ color: #fff; /* White text for contrast */ outline: 7px solid var(--wp--preset--color--navy-100); transition: background-color 0.3s ease, outline 0.3s ease; } .wp-block-columns:has(>div >div>p.scroll-trail--marker-num.scroll-trail--marker-num--active)>div:last-child>div:after, .wp-block-columns:has(>div>p.scroll-trail--marker-num.scroll-trail--marker-num--active)>div:last-child>div:after { background-image: var(--wp--preset--gradient--pink-to-pale-purple); opacity: 1; transition: ease-in-out .15s all; } .wp-block-columns:has(+ .wp-block-columns p.scroll-trail--marker-num.scroll-trail--marker-num--active)>div:last-child>div:after, .wp-block-columns:has(+ .wp-block-columns p.scroll-trail--marker-num.scroll-trail--marker-num--active)>div:last-child>div:after { background-image: radial-gradient(circle at top 10% right 10%, transparent 0%, transparent 40%); opacity: 0; transition: ease-in-out .15s all; } .wp-block-columns:has(.scroll-trail-column) { overflow: initial !important; &>div:first-child { position: relative; &>div { top: 300px; } } } /* End Medical Math Page */ /* Start Navigation Scroll Down */ [data-om-menu-open="false"] .om-scroll-down-overlay { opacity: 0; } .om-scroll-down-overlay { position: fixed; left: auto; right: 0; bottom: 0; height: 100px; width: 420px; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0) 100%); transition: opacity 0.4s; transition-delay: 0.4s; opacity: 1; z-index: 9999999999; padding-block-end: 0.4rem; @media (max-width: 767px) { width: 100vw; right: 0; left: 0; bottom: 0; height: 80px; } } .om-scroll-down-overlay.om-scroll-down-hide { opacity: 0; pointer-events: none; } .om-scroll-down-text { margin-bottom: 8px; font-size: .8rem; color: #00797C; font-weight: 600; text-align: center; } .om-scroll-down-svg { display: flex; justify-content: center; align-items: center; } /* Customer Resources */ .post-template-wp-custom-template-customer-resources-upcoming-events main>div:first-child { padding-block-start: 0 !important; } :is(#new-customer-orientations, #upcoming-webinars, #support-discussions)>div>.wp-block-column { max-width: 408px; box-sizing: border-box; @media screen and (max-width: 768px) { max-width: 100%; } } /* OM Toggle */ main:has(.wp-block-group.om-toggle-container) { background-image: linear-gradient(192deg, rgb(237, 247, 243) 17%, rgb(255, 255, 255) 100%); } .alignfull:has(.wp-block-group.om-toggle-container) { padding-inline: var(--wp--preset--spacing--small) !important; } :not(.block-editor-block-list__layout).alignfull .wp-block-group.om-toggle-container { background-size: 780px !important; @media screen and (max-width: 767px) { background-image: none !important; } .om-toggle-btns { .om-toggle-btn { cursor: pointer; padding-top: var(--wp--preset--spacing--small) !important; padding-bottom: var(--wp--preset--spacing--small) !important; } .om-toggle-active { background-color: var(--wp--preset--color--teal-500); p { color: #fff; } } } .om-toggle-items { .om-toggle-item:not(.om-toggle-item-active) { display: none; } .om-toggle-item { .is-not-stacked-on-mobile .wp-block-group { @media screen and (max-width: 767px) { flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 4px; } } } } div:has(>div>.om-toggle-btns) { display: grid; grid-template-columns: 1fr 1fr; >div { grid-column: 2; } } .wp-block-group:has(> .om-toggle-btns) { margin-top: 4rem !important; min-width: 630px; max-width: 630px; box-sizing: border-box; margin-right: 0 !important; @media screen and (max-width: 767px) { min-width: 100%; padding-inline: var(--wp--preset--spacing--small) !important; padding-block: var(--wp--preset--spacing--medium) !important; } } } /* Product Cards 8-26-25 */ /* Aug 2025 New Cards */ .om-card--personalized-aug25 { position: relative; /* cursor: pointer; */ &>div { z-index: 1; } @media (max-width: 767px) { background-position: 30% 59% !important; &.non-compounded { background-position: 90% 59% !important; } padding: var(--wp--preset--spacing--small) !important; &>div>div:first-child>div:nth-child(2) p { font-size: var(--wp--preset--font-size--x-small) !important; } &>div>div:last-child { padding-right: 0 !important } } &:after, &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; transition: opacity 0.3s ease-in-out; /* Transitioning opacity is key */ } &::before { background: linear-gradient(222deg, transparent .92%, transparent 83.96%); } &:after { background: linear-gradient(222deg, hsla(70, 48%, 92%, .3) 2.92%, hsla(152, 35%, 93%, .3) 83.96%); opacity: 0; /* Hide by default */ } &:hover:after { opacity: 1; } } .om-product-card--8-26-25 { .om-chip-square-small, .om-button-small { width: fit-content; } @media (max-width: 767px) { h5 { font-size: var(--wp--preset--font-size--small); } .om-product-card--8-26-25---details { &:first-child { font-size: var(--wp--preset--font-size--x-small); } &:last-child { font-size: var(--wp--preset--font-size--xx-small); } } .wegovy { background-position: 60% 60% !important; } } &.new-brand { @media (max-width: 1065px) { .om-card--personalized-aug25 { background-size: cover !important; background-position: 43% 100% !important; } h5 { font-size: var(--wp--preset--font-size--small); } .om-product-card--8-26-25---details { &:first-child { font-size: var(--wp--preset--font-size--x-small); } &:last-child { font-size: var(--wp--preset--font-size--xx-small); } } } } } @media (max-width: 768px) { .om-col-spacing--override { gap: var(--wp--preset--spacing--large) !important; } } /* New Brand */ .op-product-recommender { border: none !important; background-color: color-mix(in srgb, var(--wp--preset--color--new-primary-light-two-300) 60%, transparent) !important; .headline { font-family: var(--wp--preset--font-family--noto-serif-ethiopic) !important; color: #000 !important; } & form p, .wp-block-button__link { font-family: var(--wp--preset--font-family--instrument-sans) !important; color: #000 !important; background-color: transparent !important; } .wp-block-button__link a { background-color: #000 !important; border: 1px solid !important; } } .op-header { &>div { background-color: color-mix(in srgb, var(--wp--preset--color--new-primary-light-one-300) 60%, transparent) !important; & figure { max-width: 160px !important; } .wp-block-button__link { background-color: transparent !important; border: 1px solid #000 !important; color: #000 !important; font-family: var(--wp--preset--font-family--instrument-sans) !important } } } .op-footer #forminator-module-4342>div.forminator-row.forminator-row-last>div>div>button { background-color: #000 !important; } /*** Footer Mobile App Card ***/ .om-footer-mobile-app { display: grid; place-content: center; max-width: 100%; max-height: 200px; aspect-ratio: 16 / 9; border-radius: 8px; .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { padding-block: 0.8rem !important; flex-basis: 60% !important; flex-grow: 0 !important; } .wp-block-group:has(.icon-container) { flex-wrap: nowrap; gap: .6rem; } .icon-container { height: 24px; width: fit-content !important; } } .slick-prev, .slick-next { width: 20px !important; height: 20px !important; } /* Pricing updated */ .om-index-up { z-index: 1; } .no-wrap { white-space: nowrap; } .om-card-pill { transform: translateY(13px); z-index: 10; } [class*="om-bf-hero-star"] { position: absolute; } .om-bf-hero-star-1 { top: 10%; left: 3%; } .om-bf-hero-star-2 { bottom: 10%; left: 2%; } .om-bf-hero-star-3 { bottom: 8%; right: 1%; } @media (max-width: 768px) { .om-bf-hero { background-image: none !important; } .om-bf-hero-star-1 { top: 0; left: 1%; width: 66px; } .om-bf-hero-star-2 { display: none; } .om-bf-hero-star-3 { top: 28%; } .om-simplestart-free-section { .wp-block-column:first-child { order: 2; } .wp-block-column:last-child { order: 1; } } div:has(> div > .om-mobile-wrap) { align-items: flex-start; } .om-mobile-wrap { flex-direction: column; align-items: flex-start; /* &>p { order: 2; } &>div { order: 1; } */ } } /* Homepage Black Friday Section */ .wp-block-column { &:has(.homepage-stars--NOV25) { position: relative; } &:has(.homepage-stars--NOV25)>*:not(.homepage-stars--NOV25) { z-index: 1; position: relative; width: 100%; } .homepage-stars--NOV25 { position: absolute; top: 10%; width: 100px; z-index: 0; &:first-of-type { width: 100px; margin: 0; top: -80px; right: -50px; } &:last-child { width: 60px; top: auto; bottom: -10px; left: -40px; } } } /* End Homepage Black Friday Section */ /* --- Protein Calculator --- */ .wp-site-blocks:has(#weightLossForm) { background-color: var(--wp--preset--color--sky-blue-500); .entry-content>.wp-block-group.alignfull:not(.protein-calc--bottom-banner) { background-color: #fff !important; } .personalized-plan-lock { display: none; } } /* Form Scroll */ .forminator-scroll-form { form { display: grid; place-content: center; width: 550px !important; max-width: 100%; } .forminator-row { width: 100%; text-align: center; height: 100vh; display: grid; place-content: center; } .forminator-label { font-size: var(--wp--preset--font-size--xxxx-large) !important; font-weight: 700 !important; line-height: 140% !important; margin-bottom: 32px !important; } .forminator-radio { border: 1px solid #CED9DD; border-radius: 8px; padding: 1.2rem 1rem; font-size: 16px; transition: ease-in-out .15s all; &:hover, &.forminator-is_checked { background-color: var(--wp--preset--color--navy-500); color: #fff; border-color: var(--wp--preset--color--navy-500); } } .forminator-radio-bullet { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; border-radius: 8px !important; border-color: transparent !important; background-color: transparent !important; &::before { display: none !important; } } .forminator-row-last { display: none !important; } .forminator-response-message { position: absolute; bottom: 0; display: none !important; } } .tik-tok--bottom-banner:focus { outline: none; } .nofocus:focus { outline: none; } /* Calculator Pages */ .custom-group{ padding: 110px; overflow: hidden; } /* .custom-group .wp-block-list li{ margin-top: 0; } */ .custom-group .wp-block-list li{ margin-top: 1rem; } .custom-group .wp-block-list.list-no-margin li{ margin-top: 0; } .custom-group .wp-block-list li.list-no-margin{ margin-top: 0; } .custom-group .wp-block-list li a{ color: var(--wp--preset--color--teal-500); font-weight: 600; } .custom-group .wp-block-list li a:active, .custom-group .wp-block-list li a:hover { color: #135e96; } @media (max-width: 782px) { .custom-group{ padding: 60px 16px; } } .om-calc-slider .slick-list{ overflow: visible; } .om-calc-slider .eb-slider-button::after{ display: inline-block; /* content: "\2192"; */ content: ""; background-image: url(/wp-content/uploads/2026/01/arrow-right.png); background-position: center; background-size: cover; width: 14px; height: 14px; margin-left: 10px; } .om-calc-slider .slick-next, .om-calc-slider .slick-prev{ bottom: -50px; } .om-calc-slider .slick-dots li:not(.slick-active) button{ transform: scale(0.9); } @media screen and (max-width: 766px) { .om-calc-slider .slick-list{ overflow: hidden; } .om-calc-slider .slick-dots { display: block !important; } .om-calc-slider .slick-next, .om-calc-slider .slick-prev{ display: none !important; } .custom-group.email-form{ background-image: url(/wp-content/uploads/2026/01/7-day-bg-mobile.webp) !important; background-position: center; min-height: 850px; } } /* SKEERY */ /* TRUE FALSE SUCCESS STORIES CAROUSEL */ .customer-story-cards .testimonial-true-false figure + div { position: absolute; padding: var(--wp--preset--spacing--medium); top: 0; left: 0; margin: 0; } .customer-story-cards .testimonial-true-false figure + div > p, .customer-story-cards .testimonial-true-false figure + div > h2, .customer-story-cards .testimonial-true-false figure + div > h3, .customer-story-cards .testimonial-true-false figure + div > h4, .customer-story-cards .testimonial-true-false figure + div > h5 { color: var(--wp--preset--color--white-100); } .customer-story-cards .testimonial-true-false { .entry-content.wp-block-post-content .wp-block-columns { margin-block-end: 0 !important; &:after { left: initial; right: 1rem; } } } /* Personaiized meds */ .personalized-meds-column { background-size: 90% !important; background-repeat: no-repeat; background-position: bottom right; } .customer-story-cards .testimonial-true-false.wp-block-columns img{ min-height: 520px; } @media (max-width: 767px){ .entry-content > .alignfull.audio-hero { gap: 0; margin-top: 8rem !important; padding-top: var(--wp--preset--spacing--xx-large); } .entry-content > .alignfull.skeery { padding-left: var(--wp--preset--spacing--medium) !important; padding-right: var(--wp--preset--spacing--medium) !important; } .entry-content > .alignfull.skeery:first-child h1 { margin-top: var(--wp--preset--font-size--xxx-large) !important; } .entry-content > .alignfull.skeery.personalized-meds { padding-left: 0 !important; padding-right: 0 !important; } .entry-content > .alignfull.skeery.personalized-meds > .has-background { background-image: url(/wp-content/uploads/2026/02/model-1-mobile.png) !important; } .entry-content > .alignfull.skeery.personalized-meds > .wp-block-group > .wp-block-columns { padding: 20px; } .entry-content > .alignfull.skeery.personalized-meds > .wp-block-group > .wp-block-columns h2 { font-size: 32px !important; margin-right: 30%; } .customer-story-cards .testimonial-true-false.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493:not(.no-min-height) { min-height: 440px } .mobile-only.skeery.is-layout-grid { display: grid !important; margin-top: -40px !important; margin-left: -16px !important; margin-right: -16px !important; } .mobile-only.skeery.disclaimer { margin-top: -40px !important; margin-left: -16px !important; margin-right: -16px !important; } } /* TDEE */ /* .dietitian .forminator-ui.forminator-design--material .forminator-input { background-color: #ffffff !important; border: 1px solid var(--wp--preset--color--navy-100) !important; border-radius: 4px; padding: var(--wp--preset--spacing--small) !important; } */ .dietitian .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:not(:last-child){ margin-bottom: 12px; } @media (max-width: 767px){ .dietitian { background-image: url(/wp-content/uploads/2026/02/dietician-bg.png) !important; background-position: bottom center !important; > .wp-block-group { min-height: initial !important; padding-bottom: 320px; } /* .forminator-ui.forminator-design--material .forminator-input { background-color: #ffffff; border: 1px solid var(--wp--preset--color--navy-100) !important; border-radius: 4px; padding: var(--wp--preset--spacing--small) !important; } */ } } /* om-mobile-slider */ @media (max-width: 767px) { .wp-block-columns.om-mobile-slider { display: flex; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .wp-block-columns.om-mobile-slider::-webkit-scrollbar { display: none; } .wp-block-columns.om-mobile-slider > .wp-block-column { flex: 0 0 100%; scroll-snap-align: center; } .wp-block-columns.om-mobile-slider .om-slider-pagination{ margin-bottom: 40px; } } .wp-site-blocks:has(#tdeeForm) { background-color: var(--wp--preset--color--sky-blue-100); } .wp-site-blocks:has(#bmiForm) { background-color: var(--wp--preset--color--sky-blue-100); } @media (min-width: 768px ){ .wp-site-blocks:has(#tdeeForm) > header{ margin-block-start: 120px; } .wp-site-blocks:has(#bmiForm) > header{ margin-block-start: 120px; } } /* Simplestart Hero */ .om-simplestart-hero { background-size: 50% !important; background-repeat: no-repeat; } @media (max-width:560px) { .om-simplestart-hero { background-image: none !important; } } @media (min-width:560px) and (max-width:781px){ .om-simplestart-hero { background-position: 100% 60px !important; background-size: 240px !important; .wp-block-column { h1,p { max-width: 400px; } } .tablet-show.wp-block-buttons .wp-block-button__link { width: auto; } } } /* Alternating Column */ @media (max-width: 781px) { .alternating-column { .wp-block-columns .wp-block-image { &.alignleft, &.alignright { float: none; margin-inline-start: 0; margin-inline-end: 0; margin: 16px auto 0; } } .mobile-reverse-order { >*:first-child { order: 2; } >*:last-child { order: 1; } } } }