.elementor-202144 .elementor-element.elementor-element-49b02883{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#E8E8E8;--border-color:#E8E8E8;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-49b02883:not(.elementor-motion-effects-element-type-background), .elementor-202144 .elementor-element.elementor-element-49b02883 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-202144 .elementor-element.elementor-element-2341eacc{--display:flex;--min-height:41px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-2341eacc:not(.elementor-motion-effects-element-type-background), .elementor-202144 .elementor-element.elementor-element-2341eacc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-202144 .elementor-element.elementor-element-6cfbef8d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-26400425{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-26400425 .elementor-heading-title{font-family:"SofiaProRegular", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#595252;}.elementor-202144 .elementor-element.elementor-element-16513179{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-16513179 .elementor-heading-title{font-family:"SofiaProRegular", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#595252;}.elementor-202144 .elementor-element.elementor-element-472b88db{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-472b88db .elementor-heading-title{font-family:"SofiaProRegular", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#595252;}.elementor-202144 .elementor-element.elementor-element-5a045474{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-8ed76ff .elementor-button{background-color:#11671C;font-family:"SofiaProRegular", Sans-serif;font-size:11px;font-weight:400;line-height:11px;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:16px 16px 16px 16px;padding:2px 0px 0px 0px;}.elementor-202144 .elementor-element.elementor-element-8ed76ff{width:var( --container-widget-width, 150px );max-width:150px;--container-widget-width:150px;--container-widget-flex-grow:0;}.elementor-202144 .elementor-element.elementor-element-1a1a66a .elementor-button{background-color:#11671C;font-family:"SofiaProRegular", Sans-serif;font-size:11px;font-weight:400;line-height:11px;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:16px 16px 16px 16px;padding:2px 0px 0px 0px;}.elementor-202144 .elementor-element.elementor-element-1a1a66a{width:var( --container-widget-width, 150px );max-width:150px;--container-widget-width:150px;--container-widget-flex-grow:0;}.elementor-202144 .elementor-element.elementor-element-13f83629 .elementor-button{background-color:#A75A25;font-family:"SofiaProRegular", Sans-serif;font-size:12px;font-weight:400;line-height:18px;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:16px 16px 16px 16px;padding:2px 0px 0px 0px;}.elementor-202144 .elementor-element.elementor-element-13f83629{width:var( --container-widget-width, 144px );max-width:144px;--container-widget-width:144px;--container-widget-flex-grow:0;}.elementor-202144 .elementor-element.elementor-element-13f83629 .elementor-button-content-wrapper{flex-direction:row;}.elementor-202144 .elementor-element.elementor-element-13f83629 .elementor-button .elementor-button-content-wrapper{gap:5px;}.elementor-202144 .elementor-element.elementor-element-7af2ef46{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-78ed3f63{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:22px;--padding-bottom:15.5px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-2fc074ae{width:var( --container-widget-width, 214px );max-width:214px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:214px;--container-widget-flex-grow:0;}.elementor-202144 .elementor-element.elementor-element-7d9909e3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-70d8196f .elementor-button{background-color:#A75A25;font-family:"SofiaProRegular", Sans-serif;font-size:16px;font-weight:400;line-height:24px;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:16px 16px 16px 16px;padding:0px 0px 0px 0px;}.elementor-202144 .elementor-element.elementor-element-70d8196f{width:var( --container-widget-width, 150px );max-width:150px;--container-widget-width:150px;--container-widget-flex-grow:0;}.elementor-202144 .elementor-element.elementor-element-70d8196f .elementor-button-content-wrapper{flex-direction:row;}.elementor-202144 .elementor-element.elementor-element-70d8196f .elementor-button .elementor-button-content-wrapper{gap:5px;}.elementor-202144 .elementor-element.elementor-element-236bf6ea{--ecs-nav-main-display:flex;--ecs-nav-main-dir:row;--ecs-nav-toggle-display:none;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-menu-toggle{margin-left:auto;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown .elementor-item, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown .elementor-sub-item{justify-content:flex-start;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu .elementor-item{font-family:"SofiaProRegular", Sans-serif;font-size:14px;font-weight:700;line-height:18px;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--main .elementor-item{color:#595252;fill:#595252;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--main .elementor-item:hover, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--main .elementor-item.highlighted, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--main .elementor-item:focus{color:#595252;fill:#595252;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#595252;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown a, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-menu-toggle{color:#595252;fill:#595252;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown{background-color:#FFFFFF;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown a:hover, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown a:focus, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown a.highlighted, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-menu-toggle:hover, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-menu-toggle:focus{color:#595252;}.elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown .elementor-item, .elementor-202144 .elementor-element.elementor-element-236bf6ea .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"SofiaProRegular", Sans-serif;font-size:12px;font-weight:700;}.elementor-202144 .elementor-element.elementor-element-3b9a8930{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-3b9a8930 .elementor-search-form__container{min-height:50px;}.elementor-202144 .elementor-element.elementor-element-3b9a8930 .elementor-search-form__submit{min-width:50px;}body:not(.rtl) .elementor-202144 .elementor-element.elementor-element-3b9a8930 .elementor-search-form__icon{padding-left:calc(50px / 3);}body.rtl .elementor-202144 .elementor-element.elementor-element-3b9a8930 .elementor-search-form__icon{padding-right:calc(50px / 3);}.elementor-202144 .elementor-element.elementor-element-3b9a8930 .elementor-search-form__input, .elementor-202144 .elementor-element.elementor-element-3b9a8930.elementor-search-form--button-type-text .elementor-search-form__submit{padding-left:calc(50px / 3);padding-right:calc(50px / 3);}.elementor-202144 .elementor-element.elementor-element-3b9a8930:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-radius:3px;}.elementor-202144 .elementor-element.elementor-element-3b9a8930.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-radius:3px;}.elementor-202144 .elementor-element.elementor-element-2e00a51{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-2e00a51 .elementor-search-form__container{min-height:50px;}.elementor-202144 .elementor-element.elementor-element-2e00a51 .elementor-search-form__submit{min-width:50px;}body:not(.rtl) .elementor-202144 .elementor-element.elementor-element-2e00a51 .elementor-search-form__icon{padding-left:calc(50px / 3);}body.rtl .elementor-202144 .elementor-element.elementor-element-2e00a51 .elementor-search-form__icon{padding-right:calc(50px / 3);}.elementor-202144 .elementor-element.elementor-element-2e00a51 .elementor-search-form__input, .elementor-202144 .elementor-element.elementor-element-2e00a51.elementor-search-form--button-type-text .elementor-search-form__submit{padding-left:calc(50px / 3);padding-right:calc(50px / 3);}.elementor-202144 .elementor-element.elementor-element-2e00a51:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-radius:3px;}.elementor-202144 .elementor-element.elementor-element-2e00a51.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-radius:3px;}.elementor-202144 .elementor-element.elementor-element-34f529d6{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:16px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-202144 .elementor-element.elementor-element-5d5675ca{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-5d5675ca .elementor-heading-title{font-family:"SofiaProRegular", Sans-serif;font-size:16px;font-weight:400;line-height:24px;color:#A75A24;}.elementor-202144 .elementor-element.elementor-element-4a08b918{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-202144 .elementor-element.elementor-element-4a08b918 .elementor-heading-title{font-family:"SofiaProRegular", Sans-serif;font-size:16px;font-weight:400;line-height:24px;color:#A75A24;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-202144 .elementor-element.elementor-element-236bf6ea{margin:-52px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(min-width:768px){.elementor-202144 .elementor-element.elementor-element-2341eacc{--content-width:1024px;}.elementor-202144 .elementor-element.elementor-element-78ed3f63{--content-width:1024px;}}/* Start custom CSS for container, class: .elementor-element-49b02883 */@font-face { font-family: SofiaProRegular; src: url("/wp-content/uploads/2026/09/SofiaPro-Regular.woff2") format("woff2"); font-display: swap; } .elementor-202144 .elementor-element.elementor-element-49b02883 { background: #FFFFFF; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip { border-bottom: 1px solid #E8E8E8; } /* What appears at which width. See the note beside ON_PHONE: Elementor's own responsive-hide controls are unusable on this install. */ @media (min-width: 1025px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-small-only { display: none !important; } } @media (max-width: 1024px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-wide-only { display: none !important; } } @media (max-width: 767px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-phone-hide { display: none !important; } } /* A button's own box is the pill. Without this the anchor shrinks to its text -- the Website Login pill came out 94 wide instead of 150 -- and Elementor leaves it `inline-block`, which stood the wording at the TOP of the pill with the 2px of padding above it and nothing below. The live pills centre their text both ways, which is what lets "Renew / Manage Membership" sit on two lines in the middle of a 34px pill. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .elementor-widget-button .elementor-button { width: 100%; display: flex; align-items: center; justify-content: center; } /* the user mark in the Website Login pill is 16x16 on the live page */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-actions .elementor-button-icon svg, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act .elementor-button-icon svg { width: 16px; height: 16px; } /* A widget in a flex row starts out 100% wide, so "the newsletter link" claimed the whole row and squeezed the pill beside it. Only the wording is told to size itself -- saying `width: auto` for both took the pill's own 150 away again. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-actions > .elementor-widget { flex: 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-subscribe { width: auto; } /* Elementor took the 16 asked for as BOTH gaps; only the one between the two lines should be there. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main > .e-con-inner { column-gap: 0; row-gap: 15.5px; } /* the four pieces of the masthead row. The menu is given a line of its own by taking the whole width bar the search field, so the two wrap together on to the second line -- which is also what lets the scrolled header pull them back up beside the masthead with nothing but a width. */ /* A container inside a flex row is 100% wide in Elementor, so each of these would otherwise take a line of its own and stack its contents. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-actions { width: auto; flex: 0 0 auto; flex-wrap: nowrap; } /* Elementor has no height control for a button; the live pills are all 34 tall with their text centred. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .elementor-widget-button .elementor-button { min-height: 34px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act .cb-wide-only .elementor-button { letter-spacing: .45px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-logo { width: 214px; flex: 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-actions { width: auto; flex: 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav { width: calc(100% - 175.5px); flex: 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search { width: 160px; flex: 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-logo, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-actions, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__container { transition: all .25s ease; } /* the menu itself: 14px bold, 43px apart, and the drop-downs the old site opens under California Ag News, Special Features, CalAgXchange and About Us */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item { padding: 0 21px 0 0; font-size: 14px; line-height: 18px; font-weight: 700; color: #595252; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li:last-child > a.elementor-item { padding-right: 0; } /* the drop-down: a white panel with a 1px #E8E8E8 edge, no rounding and no shadow, opening 24 under the heading, its links 12/18 BOLD with 12 of air around them -- not the 400 weight this first carried */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu { background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 0; box-shadow: none; padding: 12px 0 12px 24px; margin-top: 24px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu a { font-size: 12px; line-height: 18px; font-weight: 700; color: #595252; padding: 0; margin: 12px 12px 12px 0; background: transparent; } /* Nothing on the live header changes under the cursor -- the menu, the strip links and the pills all keep their colour, and nothing is underlined. The hover and current-page colours are therefore the same as the resting one rather than the accent. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu a:hover { color: #595252; background: transparent; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav a.elementor-item:hover, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav a.elementor-item:focus, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav a.elementor-item.elementor-item-active, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav a.elementor-item.highlighted { color: #595252; background: transparent; } .elementor-202144 .elementor-element.elementor-element-49b02883 a:hover { text-decoration: none; } /* "the newsletter link" wraps to two lines in a 78px box on the live page */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-subscribe { max-width: 96px; } /* The search field: a 14px #A75A24 magnifier at the left, the placeholder 12/18, and one 1px #E8E8E8 rule running the whole 160 underneath -- which is why the rule is on the box and not on the input, whose own box stops where the magnifier begins. Elementor draws the magnifier as an SVG with a fill of its own and no width, so it came out 0 wide and invisible: there was no magnifier on the page at all. Both are stated here. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__container { background: #FFFFFF; border: 0; box-shadow: none; border-radius: 0; min-height: 35px; border-bottom: 1px solid #E8E8E8; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search input[type="search"] { height: 35px; padding: 8px 0 8px 11px; background: #FFFFFF; border: 0; border-radius: 0; font-size: 12px; line-height: 18px; color: #595252; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon svg, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon svg { width: 14px; height: 14px; min-width: 14px; fill: #A75A24; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search input[type="search"]::placeholder, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch input[type="search"]::placeholder { color: #A2A2A2; opacity: 1; } /* The magnifier box: Elementor's minimal skin pushes it 16.7 in from the left and gives the wrapper round the SVG no width at all, so the mark sat 9px right of where the live one does. The live one is flush with the left edge of the field. The padding needs !important -- the skin's own rule outranks a plain one. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon { color: #A75A24; font-size: 14px; width: 14px; min-width: 14px; flex: 0 0 14px; padding: 0 !important; justify-content: flex-start; align-items: center; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .e-font-icon-svg-container, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .e-font-icon-svg-container { width: 14px; min-width: 14px; display: block; } /* ---- the page is scrolled: 185 tall becomes 120 ---------------------- Only on a wide screen. The live header is fixed at every size, but below 1025 it does not shrink at all -- at 375 it stays 213 tall with the full masthead however far the page is scrolled. Left unguarded, these rules fired on a phone too and pulled the menu button out of place the moment the reader scrolled. */ @media (min-width: 1025px) { /* A boxed container carries its padding on .e-con-inner on this install and on the container itself on others, so both are named -- written against the container alone, this rule did nothing and the small header stayed 22 and 16 deep. */ .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-main { padding-top: 0; padding-bottom: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-main > .e-con-inner { padding-top: 20px; padding-bottom: 20px; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-logo { width: 144px; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-actions { display: none; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-nav { width: auto; flex: 1 1 auto; margin-left: 16px; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search { width: 32px; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search .elementor-search-form__container { width: 32px; height: 32px; min-height: 32px; border: 1px solid #E8E8E8; border-bottom: 1px solid #E8E8E8; border-radius: 50%; justify-content: center; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search input[type="search"] { width: 0; min-width: 0; padding: 0; } } /* ---- 1024 and under: the button, and the menu underneath ------------- */ @media (max-width: 1024px) { /* the strip stands 40 in from the left at 768 and 32 at 375, and in both cases lets the pill come a little closer to the right edge than that */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip { padding-left: 0; padding-right: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip > .e-con-inner { padding-left: 40px; padding-right: 25px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act { flex: 0 1 auto; min-width: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main { padding: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main > .e-con-inner { padding: 22px 20px 20px; } /* The menu takes a line of its own and is then pulled back up by its own height, so its button comes to rest beside the masthead while the menu it opens stays below -- and, because the drop-down is put back into the ordinary flow, opening it pushes the page down the way the old site's does rather than floating over it. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav { width: 100%; margin-top: -52px; align-self: flex-start; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle { margin-left: auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown { position: static !important; width: 100% !important; left: auto !important; margin-top: 24px; box-shadow: none; background: #FFFFFF; } /* the button: a 48px circle of the brown at a tenth strength, holding two 15x2 bars that cross into an X when the menu is open */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle { width: 48px; height: 48px; border-radius: 50%; position: relative; background: rgba(167, 90, 36, .1); padding: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle i, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle svg { display: none; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle::before, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle::after { content: ""; position: absolute; left: 50%; margin-left: -7.5px; width: 15px; height: 2px; border-radius: 30%; background: #A75A24; transition: .3s ease-in-out; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle::before { top: 22px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle::after { top: 32px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle.elementor-active::before { top: 27px; transform: rotate(45deg); } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle.elementor-active::after { top: 27px; transform: rotate(-45deg); } /* a row of the open menu, and a child row. An open or current row keeps the text colour -- only its chevron is brown, as on the old site */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown a.elementor-item { font-size: 16px; line-height: 24px; font-weight: 700; color: #595252; padding: 5px; border-bottom: 1px solid #E8E8E8; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown a.elementor-sub-item { font-size: 16px; line-height: 24px; font-weight: 700; color: #595252; padding: 17px 5px 17px 37px; border-bottom: 1px solid #E8E8E8; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown a.elementor-item.highlighted, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active { background: transparent; color: #595252; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown .sub-arrow i, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--dropdown .sub-arrow svg { color: #A75A24; fill: #A75A24; font-size: 12px; width: 12px; height: 12px; } /* the search field and the two membership links the old site keeps at the foot of the open menu. They are part of the masthead row, last, and are shown only while the button is open. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-mextra { display: none; width: 100%; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main:has(.elementor-menu-toggle.elementor-active) .cb-msearch, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main:has(.elementor-menu-toggle[aria-expanded="true"]) .cb-msearch { display: block; order: 9; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main:has(.elementor-menu-toggle.elementor-active) .cb-mextra, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main:has(.elementor-menu-toggle[aria-expanded="true"]) .cb-mextra { display: flex; order: 10; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch input[type="search"] { height: 35px; padding: 5px 0 5px 6px; font-size: 16px; line-height: 24px; border: 0; border-radius: 0; background: #FFFFFF; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__container { background: #FFFFFF; border: 0; box-shadow: none; border-radius: 0; min-height: 35px; border-bottom: 1px solid #E8E8E8; padding-left: 5px; } /* the two links sit side by side and fill the line between them, as they do on the live page -- no gap, the second one taking what is left and wrapping on to a second line inside it */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-mextra { flex-wrap: nowrap; gap: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-mextra .elementor-widget { width: auto; flex: 0 1 auto; min-width: 0; } } /* ---- 767 and under -------------------------------------------------- The strip comes in to 32, its two remaining links are narrow enough to wrap the way the live ones do, and the pill is allowed to shrink rather than hang off the side of a 375 screen. */ @media (max-width: 767px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip { padding-left: 0; padding-right: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip > .e-con-inner { padding-left: 32px; padding-right: 17px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links { gap: 18px; flex: 0 1 auto; min-width: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links .elementor-widget { max-width: 88px; } } /* the links to the other two sites at 0.6, as on the old site, hover or not */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-other-site { opacity: .6; } /* the widget that carries the menu's script takes no room */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-script { display: none !important; } /* the strip's words carry 2px above them, as its pills do */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links .elementor-heading-title { padding-top: 2px; } /* the green pills stand 5px past the masthead's right edge on the old site */ @media (min-width: 1025px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act { margin-right: -5px; } } /* the user mark: 5 either side of it and 2 under it, which stands it a pixel above the middle of the pill */ .elementor-202144 .elementor-element.elementor-element-49b02883 .elementor-button-content-wrapper { gap: 0 !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .elementor-button-icon { margin: 0 5px 2px 5px !important; } /* "the newsletter link" is a block as wide as "Newsletter" with both words centred in it, not the left half of a 96px box */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-subscribe { width: min-content !important; max-width: none !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-subscribe .elementor-heading-title { text-align: center; } /* the strip's contents stand in the middle of its 40 (41 less its rule) -- left to themselves they hugged the top of a 36px box */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip > .e-con-inner { min-height: 40px; } /* ---- the chevron, everywhere ------------------------------------------ */ /* 4px of margin after the SPACE the old site leaves between the words and the chevron (3.64 at 14px) -- without the space each item came out 3.6 short and the menu crept left, 15px by Archives */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .sub-arrow { padding: 0 !important; margin: 0 0 0 calc(4px + .26em); width: 12px; height: 12px; line-height: 0; display: inline-flex; flex: 0 0 12px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .sub-arrow svg, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .sub-arrow i { display: none !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .sub-arrow::before { content: ""; display: block; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A75A24' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / 12px 12px; transition: transform .2s ease; } /* flex, not inline-flex: inline, each heading stood in a 24px line and the drop-down opened 3px lower than the old site's */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main a.elementor-item { display: flex; align-items: center; } /* the chevron turns over while its drop-down is open */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main a.highlighted .sub-arrow::before, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main a[aria-expanded="true"] .sub-arrow::before { transform: rotate(180deg); } /* ---- the desktop drop-down: 194 wide, 24 to the LEFT of its heading so the words line up under it, 24 below it, and its links 30 apart -- set as gaps, not as margins left to collapse, since the panel is shown as a flex column on some installs and a block on others ------------------- */ @media (min-width: 1025px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu { width: 194px !important; min-width: 194px !important; max-width: 194px !important; margin-left: -24px !important; padding: 24px 0 24px 24px !important; box-sizing: border-box; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu > li { line-height: 18px; margin: 0; padding: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu > li + li { margin-top: 12px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu a { display: flex !important; margin: 0 12px 0 0 !important; } } /* ---- the search field: the magnifier in the middle of the 35, not at its top, and one rule under the whole 160 ---------------------------------- */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__container, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__container { align-items: center; height: 35px; min-height: 35px; box-sizing: border-box; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon { align-self: center; height: 14px; display: flex; align-items: center; } /* the icon's own box took the 24px line height and lifted the magnifier 2px off the middle */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .e-font-icon-svg-container, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .e-font-icon-svg-container { display: flex; align-items: center; height: 14px; line-height: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon svg, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon svg { display: block; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search input[type="search"] { height: 34px; } /* The logo's link is inline, so the line under the picture added 7px to the masthead: the menu, the search field and the pills all sat 7 too low and the scrolled header was 128 tall, not the old site's 120. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-logo a, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-logo img { display: block; } /* ---- the scrolled header's 32px circle: the magnifier in the middle of it, and the field laid over the whole circle so a click still lands in it -- its words are kept out of sight, as the old site's are by its 30px of left padding in a 32px box. Before this the field hung 35px tall out of the bottom of the circle with the "S" of Search showing. -------------- */ @media (min-width: 1025px) { .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search .elementor-search-form__container { position: relative; justify-content: flex-start; align-items: flex-start; padding: 0; height: 32px; min-height: 32px; overflow: hidden; } /* 10 in from the circle's outside edge, top and left, as the old site places it -- a pixel off the true middle */ .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search .elementor-search-form__icon { margin: 9px 0 0 9px; align-self: flex-start; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search input[type="search"] { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; padding: 0 0 0 30px; border: 0; background: transparent; color: transparent; z-index: 1; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search input::placeholder { color: transparent; } } /* ---- 1024 and under --------------------------------------------------- */ @media (max-width: 1024px) { /* The 16 between the masthead and the menu's line belongs to a wide screen. Left in, it put the menu button 16px BELOW the middle of the masthead; the old site centres the two on each other. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main > .e-con-inner { row-gap: 0; } /* the old site keeps 40 under the masthead while the menu is shut (its 16 + 20 + 20 of margins and padding) and 20 under the open menu */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-main:not(:has(.elementor-menu-toggle.elementor-active)) > .e-con-inner { padding-bottom: 40px; } /* the button's two bars, 18 and 28 down a 48px circle, crossing at its middle when it is open */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle::before { top: 18px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle::after { top: 28px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle.elementor-active::before, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle.elementor-active::after { top: 23px; } /* each row: the words at the left, the chevron hard right */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown a.elementor-item { display: flex; justify-content: space-between; align-items: center; font-family: SofiaProRegular, Arial, Helvetica, sans-serif; border-bottom: 0; border-left: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown .sub-arrow { margin: 0 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown a.highlighted .sub-arrow::before, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown a[aria-expanded="true"] .sub-arrow::before { transform: rotate(180deg); } /* The rule under each row belongs to the ROW, so an open row's children sit above its rule, not under it -- as the old site draws it. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown > ul > li { border-bottom: 1px solid #E8E8E8; } /* the children: 37 in from either side, each 59 tall with its own rule, and 15 of air under the last (the old site's 10px spacer and the row's 5px of padding) before the parent's rule */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown ul.sub-menu { position: static !important; width: auto !important; margin: 0 !important; padding: 0 37px 15px !important; background: transparent; border: 0; box-shadow: none; } /* An open row is a box at most 250 tall that scrolls its children inside it, as the old site's does -- California Ag News has 13 of them, and they would otherwise push the rest of the menu off a phone's screen. The children start straight under the parent's words, the row's own 5px of bottom padding moving below the last of them. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown > ul > li:has(> a.highlighted), .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown > ul > li:has(> a[aria-expanded="true"]) { max-height: 250px; overflow-y: auto; box-sizing: border-box; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown a.elementor-item.highlighted, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown a.elementor-item[aria-expanded="true"] { padding-bottom: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown ul.sub-menu > li { border-bottom: 1px solid #E8E8E8; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown a.elementor-sub-item { padding: 17px 5px !important; margin: 0; border: 0 !important; font-family: SofiaProRegular, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; font-weight: 700; color: #595252; background: transparent; } /* the two links under the menu share the line evenly, as the old site's do -- at 480 they no longer run together as "Become a MemberRenew" */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-mextra { justify-content: space-evenly; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-mextra .elementor-widget { flex: 0 1 auto; } } @media (min-width: 768px) and (max-width: 1024px) { /* the Website Login pill is 150 at 768 and 144 below that */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act .elementor-widget-button { width: 150px; } } @media (max-width: 767px) { /* The links wrap only when there is no room, as the old site's do: one line each at 480, two at 375. A fixed 88px cap wrapped them at every width. The pill keeps its 144 and the links give way. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links .elementor-widget { max-width: none; flex: 0 1 auto; min-width: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act { flex: 0 0 144px; } /* and they run to within 3px of the pill before giving way, so "California Farm" stays together on the first line as it does on the old site */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip > .e-con-inner { column-gap: 3px; } } /* the chevron stands 3.8 down its 18px line, as the old site's does */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main .sub-arrow { position: relative; top: .8px; } @media (min-width: 1025px) { /* Elementor's menu script writes margin-top: 0 on a panel as it opens it, which left the panel hugging its heading. the old site's hangs 24 below the heading -- the header's bottom edge -- in both headers. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu { margin-top: 24px !important; } /* Elementor keeps menu links on one line; the old site wraps a long name on to two, so "Voice of California Agriculture Podcast" stays inside its panel */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-nav-menu--main ul.sub-menu a { white-space: normal !important; } } /* ---- the search fields ------------------------------------------------- */ /* the magnifier at full strength -- Elementor's skin dims it to 60% */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon { opacity: 1 !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon svg, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon i, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .e-font-icon-svg-container, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon svg, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon i, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .e-font-icon-svg-container { display: none !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__icon::before, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__icon::before { content: ""; display: block; width: 14px; height: 14px; flex: 0 0 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 24' preserveAspectRatio='none'%3E%3Cpath fill='%23a75a24' fill-rule='evenodd' d='M16.337 15.034l6.704 6.703-1.836 1.834-6.703-6.702a8.926 8.926 0 0 1-5.356 1.774 8.965 8.965 0 1 1 0-17.929 8.965 8.965 0 0 1 7.19 14.32zm-7.19 1.722a7.078 7.078 0 1 0-7.079-7.077 7.078 7.078 0 0 0 7.078 7.077z'/%3E%3C/svg%3E") no-repeat center / 14px 14px; } /* the words in the fields are in the site's face -- the theme had them in the system one -- the typed ones grey in the wide field and dark in the phone one, the word "Search" #757575 in both */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search input[type="search"], .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch input[type="search"] { font-family: SofiaProRegular, Arial, Helvetica, sans-serif !important; outline: none !important; box-shadow: none !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search input[type="search"] { color: #A2A2A2; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch input[type="search"] { color: #595252; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search input[type="search"]::placeholder, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch input[type="search"]::placeholder { color: #757575; opacity: 1; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search .elementor-search-form__container, .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-msearch .elementor-search-form__container { box-shadow: none !important; } /* ---- the scrolled header's search opens across the menu's line --------- A click on the circle hides the menu and draws the field out to the logo, 864 wide, in half a second; a round grey x at its right end closes it again. The script in the header adds and removes .cb-search-open and puts the x in. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-search-close { display: none; } @media (min-width: 1025px) { .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-search input[type="search"] { cursor: pointer; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-nav { display: none !important; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-search { width: calc(100% - 160px) !important; transition: width .5s; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-search .elementor-search-form__container { width: 100%; border: 0; border-radius: 0; background: transparent; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-search input[type="search"] { box-sizing: border-box; padding: 8px 0 4px 30px; border: 0; border-bottom: 1px solid #E8E8E8; border-radius: 0; background: #FFFFFF; color: #A2A2A2; font-size: 12px; line-height: 18px; cursor: text; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-search input::placeholder { color: #757575; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-search .elementor-search-form__icon { margin: 10px 0 0 10px; position: relative; z-index: 2; pointer-events: none; } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects.cb-search-open .cb-search-close { display: flex; position: absolute; right: 0; top: 12px; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: #A2A2A2; color: #FFFFFF; font: 100 18px/27px SofiaProRegular, Arial, sans-serif; align-items: center; justify-content: center; transform: rotate(45deg); cursor: pointer; user-select: none; } } /* ---- the phone menu --------------------------------------------------- */ @media (max-width: 1024px) { /* Elementor hides the shut menu by squashing it to nothing, not by taking it out, so its 24 of top margin still stood under the button and put 20 more under the masthead than the old site has. The 24 is there only while the menu is open. And it opens at once, as the old site's does, not with Elementor's 0.3s slide. */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav nav.elementor-nav-menu--dropdown { margin-top: 0; transition: none !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-nav .elementor-menu-toggle.elementor-active ~ nav.elementor-nav-menu--dropdown { margin-top: 24px; } } /* Bountiful: no the newsletter link beside the pill */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-actions { gap: 0; } /* the logo is a picture in an HTML widget; it scales with its box when the header shrinks */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-logo img { width: 100%; height: auto; } /* the old site's masthead picture stands 7px right of its own box, at every width and in the scrolled header too */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-logo img { position: relative; left: 7px; } /* the menu: the old .nav-links is 800 wide with its seven headings spread across it (justify-content: space-between), not set a fixed 21 apart -- 21 drifted 0.17 a heading, a whole pixel by About Us. The scrolled header keeps its 21. */ @media (min-width: 1025px) { .elementor-202144 .elementor-element.elementor-element-49b02883:not(.elementor-sticky--effects) .cb-nav .elementor-nav-menu--main > ul.elementor-nav-menu { width: 800px; justify-content: space-between; } .elementor-202144 .elementor-element.elementor-element-49b02883:not(.elementor-sticky--effects) .cb-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item { padding-right: 0; } /* (the menu script's clearing ::after would count as an eighth heading) */ .elementor-202144 .elementor-element.elementor-element-49b02883:not(.elementor-sticky--effects) .cb-nav .elementor-nav-menu--main > ul.elementor-nav-menu::after { display: none; } } /* ---- the strip at the old site's own widths ------------------------- The Ag Alert strip changes at 767; the old Bountiful strip (.global-header) changes at 640 and 540: padding 0 40 up to 1024 and 0 32 from 640 down; 40 between the links (li margin-right), 18 from 540 down, where the site you are on (.current-site) drops out; the pill 150 wide while there is room. Its links wrap when they must -- at 375 both "California Farm Bureau" and "Ag Alert" go on to two lines. */ @media (min-width: 641px) and (max-width: 767px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip > .e-con-inner { padding-left: 40px; padding-right: 25px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act { flex: 0 0 auto; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act .elementor-widget-button { width: 150px; } } @media (min-width: 541px) and (max-width: 767px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links > .cb-phone-hide { display: block !important; } /* the old links each keep their 40 after them, the last one too, and the pill's box reaches 15 back over them (its row's -15 margins): so when the strip runs short (541 and so) they give way as much */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-links { gap: 40px; padding-right: 40px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip > .e-con-inner { column-gap: 0; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-strip-act { margin-left: -15px; } } /* (at exactly 1024 the old site shows neither the Website Login pill nor the menu button -- its "up to 1024" and "1024 and up" rules hide one each. Not copied, by the user's choice: here 1024 keeps both, as every width under it does.) */ /* ---- the advert bar under the strip (old: .ab-auto-banner) ----------- */ .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar { position: relative; height: 94px; min-height: 94px; padding: 0 !important; overflow: visible; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar > .elementor-widget { position: absolute; left: 0; right: 0; top: 4px; z-index: 6; margin: 0 !important; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar .adbutler-container { text-align: center; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar [id^=placement_] { display: flex; justify-content: center; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar img { display: block; height: auto; max-height: 90px; max-width: 728px; width: 100%; } @media (max-width: 1024px) { .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar { height: 53px; min-height: 53px; } .elementor-202144 .elementor-element.elementor-element-49b02883 .cb-adbar > .elementor-widget { top: -1px; } } .elementor-202144 .elementor-element.elementor-element-49b02883.elementor-sticky--effects .cb-adbar { display: none; }/* End custom CSS */