#wpfront-notification-bar, #wpfront-notification-bar-editor            {
            background: #000000;
            background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#000000));
            background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
            background: -o-linear-gradient(top, #000000 0%,#000000 100%);
            background: -ms-linear-gradient(top, #000000 0%,#000000 100%);
            background: linear-gradient(to bottom, #000000 0%, #000000 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
            background-repeat: no-repeat;
                        }
            #wpfront-notification-bar div.wpfront-message, #wpfront-notification-bar-editor.wpfront-message            {
            color: #ffffff;
                        }
            #wpfront-notification-bar a.wpfront-button, #wpfront-notification-bar-editor a.wpfront-button            {
            background: #00b7ea;
            background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
            background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
            background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
            background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
            background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

            background-repeat: no-repeat;
            color: #ffffff;
            }
            #wpfront-notification-bar-open-button            {
            background-color: #00b7ea;
            right: 10px;
                        }
            #wpfront-notification-bar-open-button.top                {
                background-image: url(https://knrslidingdoors.com/wp-content/plugins/wpfront-notification-bar/images/arrow_down.png);
                }

                #wpfront-notification-bar-open-button.bottom                {
                background-image: url(https://knrslidingdoors.com/wp-content/plugins/wpfront-notification-bar/images/arrow_up.png);
                }
                #wpfront-notification-bar-table, .wpfront-notification-bar tbody, .wpfront-notification-bar tr            {
                        }
            #wpfront-notification-bar div.wpfront-close            {
            border: 1px solid #555555;
            background-color: #555555;
            color: #000000;
            }
            #wpfront-notification-bar div.wpfront-close:hover            {
            border: 1px solid #aaaaaa;
            background-color: #aaaaaa;
            }
             #wpfront-notification-bar-spacer { display:block; }/* ===== KNR — Notification Bar (final) ===== */ /* 1) Force solid black bar + white text (kill any white wrappers) */ #wpfront-notification-bar, #wpfront-notification-bar .wpfront-text, #wpfront-notification-bar a, #wpfront-notification-bar * { background-color: #000 !important; color: #fff !important; box-shadow: none !important; text-shadow: none !important; } /* 2) Layout + stacking */ #wpfront-notification-bar{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 99999 !important; /* above any sticky header */ padding: 8px 12px !important; min-height: 42px; display: flex; align-items: center; justify-content: center; border: 0 !important; opacity: 1 !important; visibility: visible !important; } /* Center the message, remove plugin's inline widths */ #wpfront-notification-bar .wpfront-text{ width: 100% !important; text-align: center !important; margin: 0 !important; } /* Links */ #wpfront-notification-bar a{ font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; border-bottom: 1px dotted transparent; } #wpfront-notification-bar a:hover{ color: #ff2a7a !important; border-bottom-color: #ff2a7a; } /* Close button (X) */ #wpfront-notification-bar .wpfront-close{ color: #fff !important; opacity: 1 !important; font-size: 20px; line-height: 1; margin-left: 12px; } /* 3) Smooth offset: push the whole page down by bar height when open */ body.wpfront-notification-bar-open{ /* Use padding, not the plugin spacer, to avoid header overlap */ padding-top: 42px !important; } /* kill the spacer element so it doesn't double-push */ #wpfront-notification-bar-spacer{ height: 0 !important; } /* Elementor sticky header also needs the offset */ body.wpfront-notification-bar-open .elementor-sticky--effects{ top: 42px !important; } /* Admin bar offset (when logged in) */ body.admin-bar #wpfront-notification-bar{ top: 32px !important; } @media (max-width: 782px){ body.admin-bar #wpfront-notification-bar{ top: 46px !important; } body.admin-bar.wpfront-notification-bar-open{ padding-top: calc(42px + 46px) !important; } } /* Mobile polish */ @media (max-width: 768px){ #wpfront-notification-bar{ padding: 10px 14px !important; min-height: 40px; } } /* Holiday banner: allow the message to wrap without covering the header. */ #wpfront-notification-bar-spacer { height: auto !important; position: relative !important; } #wpfront-notification-bar, body.admin-bar #wpfront-notification-bar { position: relative !important; top: auto !important; width: 100% !important; } body.wpfront-notification-bar-open, body.admin-bar.wpfront-notification-bar-open { padding-top: 0 !important; } body.wpfront-notification-bar-open .elementor-sticky--effects { top: 0 !important; } body.admin-bar.wpfront-notification-bar-open .elementor-sticky--effects { top: 32px !important; } @media (max-width: 782px) { body.admin-bar.wpfront-notification-bar-open .elementor-sticky--effects { top: 46px !important; } } /* Keep the holiday message and sticky navigation visible together. */ body:has(#wpfront-notification-bar-spacer) { --knr-banner-space: 52px; } @media (max-width: 1100px) { body:has(#wpfront-notification-bar-spacer) { --knr-banner-space: 76px; } } @media (max-width: 600px) { body:has(#wpfront-notification-bar-spacer) { --knr-banner-space: 96px; } } @media (max-width: 350px) { body:has(#wpfront-notification-bar-spacer) { --knr-banner-space: 120px; } } #wpfront-notification-bar-spacer { position: sticky !important; top: 0 !important; z-index: 99998 !important; } #wpfront-notification-bar { box-sizing: border-box !important; min-height: var(--knr-banner-space) !important; } body:has(#wpfront-notification-bar-spacer) .elementor-sticky--effects { top: var(--knr-banner-space) !important; } body.admin-bar #wpfront-notification-bar-spacer { top: 32px !important; } body.admin-bar:has(#wpfront-notification-bar-spacer) .elementor-sticky--effects { top: calc(var(--knr-banner-space) + 32px) !important; } @media (max-width: 782px) { body.admin-bar #wpfront-notification-bar-spacer { top: 46px !important; } body.admin-bar:has(#wpfront-notification-bar-spacer) .elementor-sticky--effects { top: calc(var(--knr-banner-space) + 46px) !important; } } @media (min-width: 1025px) { body:has(#wpfront-notification-bar-spacer) .mega-header.elementor-sticky--effects { top: calc(var(--knr-banner-space) + 38px) !important; } body.admin-bar:has(#wpfront-notification-bar-spacer) .mega-header.elementor-sticky--effects { top: calc(var(--knr-banner-space) + 70px) !important; } } /* Holiday banner: green emphasis. */ #wpfront-notification-bar .knr-holiday-accent { color: #b7e84e !important; font-weight: 700 !important; }