/* Theme Name: Blue Valley Technologies LLC - Drink-Milk 2026 Theme URI: https://drink-milk.com Author: Blue Valley Technologies LLC Author URI: https://bluevalleytech.com Description: Child theme for Drink-Milk.com, built on Betheme. Template: betheme Version: 2.0.2 */ /* ---------------------------------------------------------------- Sticky Header PATH A — mfn-hasSticky enabled in Header Builder: BeTheme pins the header on scroll at 768px+ only. Below that, we use position:fixed (not sticky — BeTheme overflow-x breaks it) plus a #Wrapper offset from sticky-header.js. PATH B — sticky not yet set in Header Builder (CSS fallback): position:sticky on desktop; same fixed+offset approach on mobile. Shrink styles use .ada-header-scrolled (sticky-header.js). ---------------------------------------------------------------- */ /* PATH B — CSS fallback when Builder sticky is off. */ #mfn-header-template:not(.mfn-hasSticky) { position: sticky; top: 0; z-index: 200; } /* * Mobile pinning — position:sticky is broken below 768px because BeTheme sets * overflow-x:hidden on body (.responsive-overflow-x-mobile). Use fixed positioning * plus a #Wrapper offset set by sticky-header.js (--bvt-header-height). */ @media screen and (max-width: 767px) { #mfn-header-template { position: fixed !important; top: var(--bvt-header-admin-offset, 0) !important; left: 0; width: 100%; z-index: 200; margin-top: 0 !important; } body.bvt-header-pin-active #Wrapper, #Wrapper { padding-top: calc( var(--bvt-header-admin-offset, 0px) + var(--bvt-header-height, 72px) ); } } /* Sit below the WP admin bar (32 px desktop / 46 px mobile) */ .admin-bar #mfn-header-template:not(.mfn-hasSticky) { top: 32px; } @media screen and (max-width: 782px) { .admin-bar #mfn-header-template:not(.mfn-hasSticky) { top: 46px; } .admin-bar { --bvt-header-admin-offset: 46px; } } .admin-bar.mfn-header-scrolled .mfn-header-tmpl.mfn-hasSticky, .admin-bar.ada-header-scrolled .mfn-header-tmpl.mfn-hasSticky { top: 32px !important; } @media screen and (max-width: 782px) { .admin-bar.mfn-header-scrolled .mfn-header-tmpl.mfn-hasSticky, .admin-bar.ada-header-scrolled .mfn-header-tmpl.mfn-hasSticky { top: 46px !important; } } /* ---------------------------------------------------------------- Base transitions Declared on the elements in their resting state so the browser can interpolate smoothly in BOTH directions (expand and shrink). ---------------------------------------------------------------- */ /* Inner builder content — drop shadow follows shrunk height, not min-height spacer. */ #mfn-header-template .mfn-builder-content { transition: box-shadow 0.35s ease; } /* Logo image — width drives the resize; height:auto maintains aspect ratio. The img carries HTML width/height attributes (298×159) which CSS overrides. */ #mfn-header-template .logo-wrapper img { display: block; width: 298px; /* matches the HTML attribute — explicit start value */ height: auto !important; max-width: 100%; /* never overflow its column on narrow viewports */ transition: width 0.35s ease; } /* Top header row (logo + utility links) — vertical padding */ #mfn-header-template .header-v5 .section_wrapper { transition: padding-top 0.35s ease, padding-bottom 0.35s ease; } /* Nav row (main menu) — vertical padding */ #mfn-header-template .header-v4 .section_wrapper { transition: padding-top 0.35s ease, padding-bottom 0.35s ease; } /* Nav link text — font-size and letter-spacing */ #mfn-header-template .mfn-header-menu > li > a { transition: font-size 0.35s ease, letter-spacing 0.35s ease; } /* ---------------------------------------------------------------- Scrolled state Applied when either .ada-header-scrolled OR .mfn-header-scrolled is present on . ---------------------------------------------------------------- */ .ada-header-scrolled #mfn-header-template .mfn-builder-content, .mfn-header-scrolled #mfn-header-template .mfn-builder-content { box-shadow: 0 1px 20px #00000054; } /* * PATH B only — hold expanded outer height while inner logo/nav shrink * (prevents scroll bounce with CSS position:sticky). BeTheme sticky * (mfn-hasSticky) pins the header fixed and reserves space via body * padding, so min-height there only adds empty space below the nav. */ @media screen and (min-width: 768px) { .ada-header-scrolled #mfn-header-template:not(.mfn-hasSticky), .mfn-header-scrolled #mfn-header-template:not(.mfn-hasSticky) { min-height: var(--bvt-header-height, auto); } } /* Logo shrinks to ~58 % of original (298 → ~175 px). height:auto is already set above, so aspect ratio is preserved. */ .ada-header-scrolled #mfn-header-template .logo-wrapper img, .mfn-header-scrolled #mfn-header-template .logo-wrapper img { width: 141px !important; } /* Top row — tighter vertical padding */ .ada-header-scrolled #mfn-header-template .section_wrapper, .mfn-header-scrolled #mfn-header-template .section_wrapper, .ada-header-scrolled #mfn-header-template .mcb-wrap, .mfn-header-scrolled #mfn-header-template .mcb-wrap{ /* padding-top: 6px !important; padding-bottom: 6px !important; */ } .ada-header-scrolled #mfn-header-template .mcb-section .mcb-wrap .mcb-item-b8d99ebf0 .mcb-column-inner-b8d99ebf0, .mfn-header-scrolled #mfn-header-template .mcb-section .mcb-wrap .mcb-item-b8d99ebf0 .mcb-column-inner-b8d99ebf0 { padding-top: 6px !important; padding-bottom:6px !important; } /* Nav link font reduction */ .ada-header-scrolled #mfn-header-template .mfn-header-menu > li > a, .mfn-header-scrolled #mfn-header-template .mfn-header-menu > li > a { font-size: 15px !important; letter-spacing: 0.02em !important; } .ada-header-scrolled #mfn-header-template .button_label, .mfn-header-scrolled #mfn-header-template .button_label { /* font-size: 13px !important; letter-spacing: 0.02em !important; */ } .ada-header-scrolled #mfn-header-template .button, .mfn-header-scrolled #mfn-header-template .button { font-size: 15px; line-height: 15px; padding-top: 8px; padding-bottom: 8px; } .ada-header-scrolled #mfn-header-template form input.field, .mfn-header-scrolled #mfn-header-template form input.field { height: 30px; } /* Force regular weight on anything using Bear Days */ /* This is the most elegant solution */ /* *:where(font-family: "Bear Days"), *:where(font-family: "Bear Days", *) { font-weight: 400 !important; } */ /* Update to fix too wide padding on tablet layouts */ .section_wrapper, .container, .with_aside .content_wrapper { max-width: 1150px; } /* Breadcrumb separator */ .breadcrumb-sep { margin: 0 6px; opacity: 0.45; } /* FAQ Styles */ .accordion .answer img, .accordion .answer iframe, .accordion .answer figure, .accordion .answer picture { border-radius: 25px; } /* ---------------------------------------------------------------- Mobile Menu ---------------------------------------------------------------- */ .mfn-sidemenu-menu.mfn-menu-submenu-on.mfn-menu-submenu-toggled li > ul { margin-bottom: 20px; } /* ---------------------------------------------------------------- Resource Library — filter dropdowns and card grid Colours match BeTheme nav dropdown: white panel, dark-navy hover/active. Override variables on .resource-filters if needed, e.g.: .resource-filters { --rl-btn-bg: #yourcolor; } ---------------------------------------------------------------- */ .resource-filters { --rl-btn-bg: var(--mfn-button-bg); --rl-btn-color: #ffffff; --rl-btn-radius: 25px; --rl-panel-bg: #ffffff; --rl-panel-radius: 25px; --rl-item-color: #1a2332; --rl-item-hover-bg: #f0f4f8; --rl-item-active-bg: #1d4068; --rl-item-active-color:#ffffff; --rl-font-size: 15px; padding: 20px 0; } .rl-filter-row { display: flex; flex-wrap: wrap; gap: 12px; } .rl-filter-group { position: relative; flex: 1 1 200px; min-width: 180px; } /*Hide Resource selection group*/ #rl-group-section { display: none; } /* Bridge the gap between toggle and panel so hover stays active while moving the pointer */ .rl-filter-group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 4px; } .rl-filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 16px; background-color: var(--rl-btn-bg); color: var(--rl-btn-color); border: none; border-radius: var(--rl-btn-radius); font-family: 'Bear Days'; font-weight: 400; font-size: 17px; cursor: pointer; user-select: none; transition: opacity .15s ease; white-space: nowrap; text-align: left; box-shadow: -3px 5px 0 0 #31AADC; } .rl-filter-toggle:hover { background-color: #032d4e; } .rl-filter-toggle .rl-caret { margin-left: 10px; flex-shrink: 0; transition: transform .2s ease; } .rl-filter-group.open .rl-filter-toggle .rl-caret { transform: rotate(180deg); } .rl-filter-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; background-color: var(--rl-panel-bg); border-radius: var(--rl-panel-radius); box-shadow: var(--rl-panel-shadow); z-index: 9999; overflow: hidden; padding: 0; } .rl-filter-group.open .rl-filter-panel { display: block; } .rl-filter-option { display: block; width: 100%; padding: 9px 18px; background: none; border: none; border-radius: 0; box-shadow: none !important; outline: none; text-align: left; font-size: var(--rl-font-size); color: var(--rl-item-color); cursor: pointer; white-space: nowrap; transition: background-color .12s ease; } .rl-filter-option:hover { background-color: var(--rl-item-hover-bg); } .rl-filter-option.active { background-color: var(--rl-item-active-bg); color: var(--rl-item-active-color); } .resource-index .rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; row-gap: 30px; } @media (max-width: 991px) { .resource-index .rl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .resource-index .rl-grid { grid-template-columns: 1fr; } .rl-filter-group { flex: 1 1 100%; } .rl-filter-panel { width: 100%; } } .rl-card-image-wrap { display: block; position: relative; border-radius: 25px; overflow: hidden; height: 250px; margin-bottom: 12px; text-decoration: none; border: 1px solid #d9d9d9; margin-bottom: 10px; } .rl-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .rl-card-type-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .rl-card-type-icon i { font-size: 95px; color: rgba(248,246,242, 1); transition: color .25s ease; } .rl-card-image-wrap:hover .rl-card-type-icon i { color: rgba(3,45,78,0.81); } .rl-card-body { padding: 0 4px; } .rl-card-title { margin: 0 0 6px; /*display: flex;*/ align-items: baseline; justify-content: space-between; gap: 10px; text-align: center; } .rl-card-title .rl-title-link { text-decoration: none; text-align: center; } .rl-card-title a.rl-title-link:hover { color: #fe5d26; } .rl-download-link { flex-shrink: 0; margin-left: auto; color: var(--rl-btn-bg); text-decoration: none; font-size: 15px; } .rl-download-link:hover { opacity: .75; } .rl-card-excerpt { font-size: 13px; color: #555; margin: 0; line-height: 18px; text-align: center; } .mfn-looped-items-slider .rl-card-excerpt { display:none; } /*Full With Images in content */ .single-post img.scale-with-grid, .single-post .content_wrapper img .single-farm_family .content_wrapper img { max-width: 100%; height: auto; width: 100%; } .content_wrapper img { max-width: 100%; /* height: auto; */ width: 100%; object-fit: cover; } .wp-block-image .aligncenter { margin-left: 0; margin-right: 0; width: 100%; } /* ---------------------------------------------------------------- Query loop card sliders — remove Swiper grey square slide shadows The "cards" animation adds a .swiper-slide-shadow element (flat grey, square corners) behind each rotated card. Hide it; the stacked cards themselves stay visible. ---------------------------------------------------------------- */ .mfn-looped-items-slider.swiper-cards .swiper-slide-shadow, .mfn-looped-items-slider[data-animationtype="cards"] .swiper-slide-shadow { display: none !important; } /* ---------------------------------------------------------------- Search — [resource_library_search_results] on BeTheme Search template ---------------------------------------------------------------- */ .bvt-search-results .rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 991px) { .bvt-search-results .rl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .bvt-search-results .rl-grid { grid-template-columns: 1fr; } } .bvt-search-results .bvt-search-pagination { margin-top: 32px; text-align: center; } /* ---------------------------------------------------------------- Article/Blog Detail page ---------------------------------------------------------------- */ .single-post .mcb-column .mid-content-video { float: right; width: 100%; max-width: 366px; margin: 0 0 2% 3%; /*padding: 2.5%; background: #54C6EB; border-radius: 30px;*/ } @media (max-width: 760px) { .single-post .mcb-column .mid-content-video { width: 100%; max-width: 100%; } } .mfn-single-post-tmpl-builder h2 strong, .mfn-single-post-tmpl-builder h3 strong { font-weight: 400; } .article-author { font-size: 21px; font-family: 'Poppins'; font-style: italic; } .mcb-column .mid-content-video iframe { width: 100%; border-radius: 20px; } .mcb-column .mid-content-video h4 { margin-bottom: 0px; color: #006BB4; } .mcb-column .mid-content-video p { color: #606060; line-height: 1.4; } /* ---------------------------------------------------------------- Recipe Detail page ---------------------------------------------------------------- */ .wprm-recipe-template-ada-custom---meadow-2 .wprm-recipe-name, .wprm-recipe-template-ada-custom---meadow-2 .wprm-recipe-header { font-weight: 400; } .wprm-recipe-jump-to-section-container { display: block; } .wprm-recipe-jump-to-section-container .wprm-recipe-jump-to-section { float: left; margin: 0 20px 0 0; } .wprm-recipe-instruction-text, .wprm-recipe-instruction-text ul, .wprm-recipe-instruction-text ol, ol.wprm-recipe-instructions, .wprm-recipe-notes, .wprm-recipe-notes ul, .wprm-recipe-notes ol { color: #032D4E; } .wprm-call-to-action.wprm-call-to-action-simple .wprm-call-to-action-text-container .wprm-call-to-action-header { font-weight: 400; } .wprm-call-to-action.wprm-call-to-action-simple { display: none; } /*Remove captions on mid content videos on recipes only */ .single-post .mid-content-video h4, .single-post .mid-content-video p { display: none; } @media (max-width: 500px) { .wprm-recipe .wprm-padding-30 { padding: 20px; } .wprm-recipe-jump-to-section-container a.wprm-recipe-jump-to-section { margin: 0 10px 0 0; padding: 10px; } } @media (max-width: 710px) { .single-post #respond .form-submit input[type="submit"] { float: none !important; } #respond .form-submit { margin: 0; text-align: center; } } /* ---------------------------------------------------------------- Farm Families ---------------------------------------------------------------- */ .mfn-single-farm_family-tmpl-builder h2, .mfn-single-farm_family-tmpl-builder h3, .mfn-single-farm_family-tmpl-builder h2 strong, .mfn-single-farm_family-tmpl-builder h3 strong { font-family: 'Poppins'; font-size: 22px; line-height: 33px; font-weight: 600; margin-bottom: 10px; margin-top: 25px; } .mfn-single-farm_family-tmpl-builder h2.title { margin-top: 0px; } .farm-family-content p.intro.wp-block-paragraph { color: #616161; font-weight: 400; font-size: 1.1em; line-height: 1.33em; text-align: left; margin: 0 0px 45px; } .single-farm_family .wp-block-image, .single-farm_family .wp-block-image figure.aligncenter, .single-farm_family .wp-block-image figure.aligncenter img { width: 100% !important; max-width: auto; } .single-farm_family .wp-block-image .aligncenter { margin-left: 0; margin-right: 0; } .single-farm_family .mcb-column .mid-content-video { float: right; margin: 0 0 30px 60px; width: 50% !important; background-color: #d0ecf7; border-radius: 25px; padding: 25px; } .single-farm_family .mcb-column .mid-content-video p { color: #032D4E; font-size: 1em; margin-bottom: 0; } .single-farm_family .mcb-column .mid-content-video iframe { min-height: 600px; } .single-farm_family .wp-block-embed-youtube { border-radius: 25px; overflow: hidden; } @media (max-width: 950px) { .single-farm_family .mcb-column .mid-content-video { width: 100% !important; margin-left: 0; margin-right: 0; } } /*Archive Load More Button*/ .mfn-query-pagination ul.page-numbers li a { background-color: #006bb4; border-radius: 50px 50px 50px 50px; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; line-height: 20px; font-size: 18px; font-family: 'Bear Days'; font-weight: 400; color: #FFFFFF; box-shadow: -3px 5px 0 0 #31AADC; } .mfn-query-pagination ul.page-numbers li a:hover { /* Let BeTheme slide animation handle background via :before */ background-color: #032D4E; } /*Cookies Notice*/ #mfn-gdpr .mfn-gdpr-button { border-radius: 50px 50px 50px 50px; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; line-height: 20px; font-size: 18px; font-family: 'Bear Days'; font-weight: 400; color: #FFFFFF; box-shadow: -3px 5px 0 0 #31AADC; } #mfn-gdpr .mfn-gdpr-button.button:hover { /* Let BeTheme slide animation handle background via :before */ background-color: var(--mfn-button-bg); } /* ---------------------------------------------------------------- Custom 404 — BeBuilder (animations + section shell) ---------------------------------------------------------------- */ .bvt-404 { position: relative; overflow: hidden; background: linear-gradient(165deg, #f8f6f2 0%, #eef6fb 55%, #f8f6f2 100%); } .bvt-404__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } @keyframes bvt-404-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.04); } } .bvt-404 .section_wrapper, .bvt-404 .mcb-section-inner { position: relative; z-index: 1; } .bvt-404__visual { position: relative; text-align: center; } .bvt-404__code { margin: 0 0 -24px; font-family: 'Bear Days', sans-serif; font-size: clamp(5.5rem, 16vw, 9rem); line-height: 0.9; font-weight: 400; color: #032d4e; letter-spacing: -0.04em; text-shadow: -4px 6px 0 #31AADC; animation: bvt-404-wobble 4s ease-in-out infinite; } @keyframes bvt-404-wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } .bvt-404__carton { display: none; } @keyframes bvt-404-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @media (prefers-reduced-motion: reduce) { .bvt-404__bubble, .bvt-404__code, .bvt-404__carton-body, .bvt-404__drop { animation: none; } }