/** * Plus Ultra Coffee — Free Shipping Banner * * Custom properties are exposed at :root so the theme can override colors via * its own stylesheet without editing the plugin. */ :root { --pu-fsb-bg: #A08050; --pu-fsb-bg-success: #2E9E6A; --pu-fsb-text: #FFFFFF; --pu-fsb-bar-track: rgba( 0, 0, 0, 0.18 ); --pu-fsb-bar-fill: #2E9E6A; --pu-fsb-bar-fill-success: #FFFFFF; --pu-fsb-padding-y: 8px; --pu-fsb-padding-x: 16px; --pu-fsb-font-size: 14px; --pu-fsb-font-size-mobile: 13px; --pu-fsb-z: 9000; } .pu-fsb { display: block; width: 100%; margin: 0; padding: var( --pu-fsb-padding-y ) var( --pu-fsb-padding-x ); background: var( --pu-fsb-bg ); color: var( --pu-fsb-text ); font-family: inherit; font-size: var( --pu-fsb-font-size ); line-height: 1.4; text-align: center; box-sizing: border-box; opacity: 0; animation: pu-fsb-fade-in 200ms ease-out forwards; transition: background-color 250ms ease-out; } .pu-fsb--empty { display: none; } .pu-fsb--success { background: var( --pu-fsb-bg-success ); } .pu-fsb__inner { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 1100px; margin: 0 auto; } .pu-fsb__message { display: inline-block; font-weight: 600; } .pu-fsb__message .amount, .pu-fsb__message bdi { color: inherit; font-weight: 700; } .pu-fsb__bar { display: block; width: 100%; max-width: 360px; height: 4px; background: var( --pu-fsb-bar-track ); border-radius: 0; overflow: hidden; } .pu-fsb__bar-fill { display: block; height: 100%; width: 0; background: var( --pu-fsb-bar-fill ); transition: width 320ms ease-out, background-color 250ms ease-out; } .pu-fsb--success .pu-fsb__bar-fill { background: var( --pu-fsb-bar-fill-success ); } .pu-fsb--success .pu-fsb__bar { background: rgba( 255, 255, 255, 0.25 ); } @keyframes pu-fsb-fade-in { from { opacity: 0; } to { opacity: 1; } } @media ( max-width: 768px ) { .pu-fsb { font-size: var( --pu-fsb-font-size-mobile ); padding: 10px var( --pu-fsb-padding-x ); } .pu-fsb__bar { max-width: 100%; } } /** * Fallback mode: fired when wp_body_open didn't render the banner before the * footer fallback ran. The class is set on by inline JS in the footer. * Pin the banner to the top of the viewport so it still appears above content. */ html.pu-fsb-fallback .pu-fsb { position: fixed; top: 0; left: 0; right: 0; z-index: var( --pu-fsb-z ); } html.pu-fsb-fallback body { /* Banner height is dynamic; use scroll-padding so anchor scrolls aren't hidden. */ scroll-padding-top: 48px; }