.snl-lead-wide{max-width:900px}.snl-feat{display:flex;flex-direction:column;gap:28px;margin:8px 0 0}.snl-feat-row{display:grid;grid-template-columns:minmax(0,5fr)minmax(0,7fr);gap:40px;align-items:center;background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-top:3px solid var(--e-global-color-primary);padding:32px}.snl-feat-media{position:relative;overflow:hidden;background:var(--e-global-color-surface);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.snl-feat-media img{display:block;width:100%;height:100%;object-fit:cover}.snl-feat-media.snl-feat-fit{padding:24px}.snl-feat-media.snl-feat-fit img{object-fit:contain}.snl-feat-copy{min-width:0}.snl-feat-tag{display:inline-block;font-family:barlow condensed,sans-serif;font-weight:600;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--e-global-color-accent);margin:0 0 10px}.snl-feat-copy h3{font-family:barlow condensed,sans-serif;font-weight:700;font-size:32px;line-height:1.1;letter-spacing:.5px;text-transform:uppercase;color:var(--e-global-color-secondary);margin:0 0 12px}.snl-feat-copy p{font-family:inter,sans-serif;font-size:16px;line-height:1.7;color:var(--e-global-color-text);margin:0 0 14px}.snl-feat-list{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.snl-feat-list li{position:relative;padding-left:18px;font-family:inter,sans-serif;font-size:15px;line-height:1.5;color:var(--e-global-color-text)}.snl-feat-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--e-global-color-primary)}.snl-feat-act{display:flex;flex-wrap:wrap;gap:12px;margin:0!important}.snl-feat-price{display:block;font-family:barlow condensed,sans-serif;font-weight:700;font-size:28px;line-height:1;color:var(--e-global-color-secondary);margin:0 0 16px}.snl-feat-price small{font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--e-global-color-muted);margin-left:8px}.snl-status{display:inline-flex;align-items:center;gap:8px;font-family:barlow condensed,sans-serif;font-weight:700;font-size:15px;line-height:1;letter-spacing:1.4px;text-transform:uppercase;color:var(--e-global-color-secondary);border:2px solid var(--e-global-color-secondary);padding:10px 14px;margin:0 0 16px}.snl-status::before{content:"";width:8px;height:8px;background:var(--e-global-color-primary)}.snl-onink .snl-status{color:var(--e-global-color-white);border-color:var(--e-global-color-white)}.snl-gridnote{display:grid;grid-template-columns:minmax(0,1fr)auto;gap:24px 32px;align-items:center;background:var(--e-global-color-surface);border:1px solid var(--e-global-color-line);border-left:4px solid var(--e-global-color-primary);padding:28px 32px;margin:40px 0 0}.snl-gridnote h3{font-family:barlow condensed,sans-serif;font-weight:700;font-size:24px;line-height:1.15;letter-spacing:.8px;text-transform:uppercase;color:var(--e-global-color-secondary);margin:0 0 8px}.snl-gridnote p{font-family:inter,sans-serif;font-size:15px;line-height:1.6;color:var(--e-global-color-text);margin:0}.snl-gridnote-act{display:flex;flex-wrap:wrap;gap:12px}.snl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 40px}.snl-shot{border:1px solid var(--e-global-color-line);overflow:hidden}.snl-shot img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}.snl-onink .snl-shot{border-color:#2c2c2c}.snl-coming-soon-price{font-family:barlow condensed,sans-serif;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--e-global-color-secondary)}.snl-tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:8px 0 0}.snl-tv-item{background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-top:3px solid var(--e-global-color-primary);padding:14px}.snl-tv-cap{font-family:barlow condensed,sans-serif;font-weight:700;font-size:19px;letter-spacing:.8px;text-transform:uppercase;color:var(--e-global-color-secondary);margin:12px 2px 2px}@media(max-width:767px){.snl-tv-grid{grid-template-columns:1fr;gap:18px}}.snl-formerly{margin:-6px 0 14px;font-family:barlow condensed,sans-serif;font-weight:600;font-size:15px;letter-spacing:1.8px;text-transform:uppercase;color:var(--e-global-color-text)}.snl-loop-was{display:block;margin:2px 0 0;font-family:barlow condensed,sans-serif;font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--e-global-color-text)}.snl-feat-sub{display:block;margin:-8px 0 10px;font-family:barlow condensed,sans-serif;font-weight:600;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;color:var(--e-global-color-text)}.snl-prodgrid ul.products li.product a img{aspect-ratio:4/5;object-fit:contain;width:100%;height:auto}.snl-ft-news .snl-ft-news-copy{flex:0 1 400px!important;width:auto!important;min-width:0!important}.snl-ft-news .snl-ft-form{flex:0 1 470px!important;width:auto!important;min-width:290px!important}.cwginstock-subscribe-form{margin:6px 0 4px}.cwginstock-subscribe-form .cwginstock-panel-primary{border:1px solid var(--e-global-color-line)!important;border-top:3px solid var(--e-global-color-primary)!important;border-radius:0!important;box-shadow:none!important;background:var(--e-global-color-white)!important;margin:0!important}.cwginstock-subscribe-form .cwginstock-panel-heading{background:var(--e-global-color-secondary)!important;border:0!important;border-radius:0!important;padding:13px 16px!important}.cwginstock-subscribe-form .cwginstock-panel-heading h4{font-family:barlow condensed,sans-serif!important;font-weight:700!important;font-size:19px!important;line-height:1.2!important;letter-spacing:1.4px!important;text-transform:uppercase!important;color:var(--e-global-color-white)!important;margin:0!important;padding:0!important}.cwginstock-subscribe-form .cwginstock-panel-body{padding:14px!important}.cwginstock-subscribe-form .row,.cwginstock-subscribe-form [class*=col-md]{margin:0!important;padding:0!important;width:100%!important;float:none!important}.cwginstock-subscribe-form .cwginstock-subscribe-form__form{display:flex!important;flex-wrap:wrap;gap:10px;align-items:stretch}.cwginstock-subscribe-form .cwginstock-subscribe-form__form>.form-group{display:flex;flex:auto;gap:10px;margin:0!important;min-width:0}.cwginstock-subscribe-form .cwginstock-subscribe-form__form>.form-group:has(.cwgstock_button){flex:none}.cwginstock-subscribe-form input.cwgstock_name,.cwginstock-subscribe-form input.cwgstock_email,.cwginstock-subscribe-form input.cwgstock_phone{text-align:left!important;font-family:inter,sans-serif!important;font-size:15px!important;color:var(--e-global-color-secondary)!important;background:var(--e-global-color-white)!important;border:1px solid var(--e-global-color-line)!important;border-radius:0!important;padding:10px 12px!important;margin:0!important;min-height:46px;flex:1;min-width:0;width:auto!important;box-shadow:none!important}.cwginstock-subscribe-form input.cwgstock_name:focus,.cwginstock-subscribe-form input.cwgstock_email:focus,.cwginstock-subscribe-form input.cwgstock_phone:focus{outline:2px solid var(--e-global-color-primary)!important;outline-offset:1px;border-color:var(--e-global-color-primary)!important}.cwginstock-subscribe-form .cwgstock_button{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-height:46px;padding:0 22px!important;background:var(--e-global-color-primary)!important;color:#fff!important;font-family:barlow condensed,sans-serif!important;font-weight:700!important;font-size:17px!important;letter-spacing:1.4px!important;text-transform:uppercase!important;line-height:1!important;border:0!important;border-bottom:4px solid var(--e-global-color-accent)!important;border-radius:0!important;cursor:pointer;white-space:nowrap;transition:background-color .25s ease,border-color .25s ease}.cwginstock-subscribe-form .cwgstock_button:hover,.cwginstock-subscribe-form .cwgstock_button:focus{background:var(--e-global-color-accent)!important;border-bottom-color:var(--e-global-color-secondary)!important}.cwginstock-subscribe-form .cwgstock_output{flex:1 1 100%;font-family:inter,sans-serif;font-size:14px;line-height:1.5}.cwginstock-subscribe-form .cwgstock_output:empty{display:none}@media(max-width:640px){.cwginstock-subscribe-form .cwginstock-subscribe-form__form>.form-group{flex-direction:column}.cwginstock-subscribe-form .cwgstock_button{width:100%!important}}@media(max-width:1024px){.snl-feat-row{gap:28px;padding:24px}.snl-feat-copy h3{font-size:28px}.snl-gridnote{grid-template-columns:1fr}}@media(max-width:767px){.snl-feat{gap:20px}.snl-feat-row{grid-template-columns:1fr;gap:20px;padding:20px}.snl-feat-media{aspect-ratio:4/3}.snl-feat-media.snl-feat-fit{padding:14px}.snl-feat-copy h3{font-size:24px}.snl-feat-list{grid-template-columns:1fr}.snl-gridnote{padding:22px 20px}.snl-grid2{grid-template-columns:1fr;gap:18px}} .elementor-kit-24{--e-global-color-primary:#DF742D;--e-global-color-secondary:#101010;--e-global-color-text:#4A4A4A;--e-global-color-accent:#B85A1E;--e-global-color-ink_soft:#1F1F1F;--e-global-color-surface:#F6F6F6;--e-global-color-line:#E1E1E1;--e-global-color-primary_wash:#FDF1E8;--e-global-color-muted:#7A7A7A;--e-global-color-white:#FFFFFF;--e-global-color-on_dark:#D6D0CA;--e-global-color-on_dark_muted:#B9B2AB;--e-global-typography-primary-font-family:"Barlow Condensed";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-family:"Barlow Condensed";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-letter-spacing:1.5px;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Barlow Condensed";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-letter-spacing:1.2px;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.7em;}.elementor-kit-24 button,.elementor-kit-24 input[type="button"],.elementor-kit-24 input[type="submit"],.elementor-kit-24 .elementor-button{background-color:#DF742D;font-family:"Barlow Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-kit-24 button:hover,.elementor-kit-24 button:focus,.elementor-kit-24 input[type="button"]:hover,.elementor-kit-24 input[type="button"]:focus,.elementor-kit-24 input[type="submit"]:hover,.elementor-kit-24 input[type="submit"]:focus,.elementor-kit-24 .elementor-button:hover,.elementor-kit-24 .elementor-button:focus{background-color:#B85A1E;color:#FFFFFF;}.elementor-kit-24 e-page-transition{background-color:#FFBC7D;}.elementor-kit-24 a{color:var( --e-global-color-accent );}.elementor-kit-24 a:hover{color:#101010;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ---- SELF-HOSTED BRAND FONTS ---- Elementor only enqueues a webfont when a WIDGET typography control names it. Our type comes from the kit and from custom CSS, so it never requested these and every logged-out visitor got the system fallback. Hosting them ourselves makes that impossible to regress, and removes the third-party request. Files live in uploads/snl-fonts/. ---- */ @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display: swap;src:url("https://sealnlock.myjsapp.com/wp-content/uploads/snl-fonts/barlow-condensed-600.woff2") format("woff2");} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display: swap;src:url("https://sealnlock.myjsapp.com/wp-content/uploads/snl-fonts/barlow-condensed-700.woff2") format("woff2");} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display: swap;src:url("https://sealnlock.myjsapp.com/wp-content/uploads/snl-fonts/barlow-condensed-800.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display: swap;src:url("https://sealnlock.myjsapp.com/wp-content/uploads/snl-fonts/inter-400.woff2") format("woff2");} /* ---- END FONTS ---- */ /* ========================================================================= * SEAL 'N LOCK COMPONENT LIBRARY (Site Settings > Custom CSS) * Site-wide. Applies to any page that uses the .snl-* classes. * Colours and fonts come from the kit tokens, so changing a swatch or a * font in Site Settings restyles everything here. * ========================================================================= */ /* ---- ROOT FIX: stop parent row stretch vars leaking into card contents ---- */ .snl-trust, .snl-card, .snl-step, .snl-tile, .snl-quote-card{--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;} .snl-card > .elementor-widget, .snl-step > .elementor-widget, .snl-tile > .elementor-widget{flex-grow:0;height:auto;align-self:stretch;} /* ---- TRUST BAR: real Elementor widgets, so a human can swap the icon from the icon picker and edit the label and the copy in the panel. The orange square and the icon colour come from the Icon widget's own Stacked view settings, so those are editable too; only the box size is fixed here. ---- */ .snl-trust > .elementor-widget{align-self:flex-start;} /* the parent sets --container-widget-width:100% to stop stretch leaking into card contents, which would make the icon full width; opt this one back out */ .snl-tw-ico{flex:0 0 auto!important;width:auto!important;} .snl-tw-ico .elementor-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:0;padding:0;} .snl-tw-ico .elementor-icon svg{width:23px;height:23px;display:block;} .snl-tw-body{min-width:0;} .snl-tw-label .elementor-heading-title{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;line-height:1.15;letter-spacing:.9px;text-transform:uppercase;color:var(--e-global-color-secondary);margin:0;} .snl-tw-desc{font-family:"Inter",sans-serif;font-size:14.5px;line-height:1.5;color:var(--e-global-color-text);} .snl-tw-desc p{margin:0;} @media(max-width:767px){ .snl-tw-ico .elementor-icon{width:40px;height:40px;} .snl-tw-ico .elementor-icon svg{width:20px;height:20px;} } /* ---- measure ---- */ .snl-narrow{max-width:640px;} .snl-prose{max-width:700px;} .snl-head{max-width:900px;} @media(max-width:1024px){ .snl-narrow,.snl-prose,.snl-head{max-width:100%;} } /* ---- eyebrow marker ---- */ .snl-eyebrow .elementor-heading-title::before{content:"";display:inline-block;width:32px;height:3px;background:var(--e-global-color-primary);vertical-align:middle;margin-right:14px;position:relative;top:-2px;} /* ---- shared card behaviour ---- */ .snl-card, .snl-quote-card{position:relative;transition:box-shadow .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1);} .snl-card::before, .snl-quote-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--e-global-color-primary);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.7,.3,1);z-index:3;} .snl-card:hover::before, .snl-quote-card:hover::before{transform:scaleX(1);} .snl-card:hover, .snl-quote-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(16,16,16,.5);} /* ---- product cards ---- */ .snl-prod-card{overflow:hidden;} /* width:calc(100% + 48px) so the panel actually WIDENS to the card edges. With width:100% the negative side margins only shift it left. */ .snl-prod-img{margin:-28px -24px 22px!important;width:calc(100% + 48px)!important;max-width:none!important;background:var(--e-global-color-surface);border-bottom:1px solid var(--e-global-color-line);padding:24px 20px;} .snl-prod-img > .elementor-widget-container{margin:0;} .snl-prod-img img{height:170px;width:auto;max-width:100%;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 12px 18px rgba(16,16,16,.16));transition:transform .45s cubic-bezier(.2,.7,.3,1);} /* ---- compliance credential strip ---- */ .snl-spec{display:flex;align-items:center;gap:15px;background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-left:3px solid var(--e-global-color-primary);padding:18px 24px;} .snl-spec-ico{flex:0 0 auto;line-height:0;} .snl-spec-ico svg{width:23px;height:23px;display:block;fill:var(--e-global-color-primary);} .snl-spec-txt{font-family:"Inter",sans-serif;font-size:15px;line-height:1.55;color:var(--e-global-color-text);} .snl-spec-txt strong{color:var(--e-global-color-secondary);font-weight:600;} @media(max-width:767px){ .snl-spec{align-items:flex-start;padding:16px 18px;} } .snl-prod-card:hover .snl-prod-img img{transform:scale(1.06) translateY(-2px);} .snl-cardbtn{margin-top:auto;} .snl-cardbtn .elementor-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background-color .25s ease,color .25s ease,border-color .25s ease;} .snl-cardbtn .elementor-button::after{content:"→";font-size:18px;line-height:1;transition:transform .25s ease;} .snl-cardbtn .elementor-button:hover::after{transform:translateX(4px);} /* ---- PROCESS STEPS: one widget per step; numeral overlays the image ---- */ .snl-step > .elementor-widget{width:100%;align-self:start;} .snl-st{display:block;} .snl-st-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--e-global-color-surface);} .snl-st-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1);} .snl-st:hover .snl-st-media img{transform:scale(1.05);} .snl-st-num{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;min-width:66px;height:54px;padding:0 16px;background:var(--e-global-color-secondary);color:#FFFFFF;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:31px;line-height:1;letter-spacing:.04em;} .snl-st-label{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:1.4px;text-transform:uppercase;color:var(--e-global-color-secondary);margin:20px 0 8px;} .snl-st-desc{display:block;font-family:"Inter",sans-serif;font-size:15.5px;line-height:1.6;color:var(--e-global-color-text);margin:0;} @media(max-width:767px){ .snl-st-num{min-width:56px;height:46px;font-size:26px;} .snl-st-label{font-size:23px;margin-top:16px;} } /* ---- dark benefit tiles ---- */ .snl-tile{position:relative;border:1px solid #2C2C2C;transition:background-color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);} .snl-tile::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--e-global-color-primary);} .snl-tile:hover{background-color:#262320;transform:translateY(-4px);} .snl-tile-in h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;line-height:1.15;letter-spacing:1.1px;text-transform:uppercase;color:var(--e-global-color-white);margin:0 0 10px;} .snl-tile-in p{font-family:"Inter",sans-serif;font-size:15px;line-height:1.6;color:var(--e-global-color-on_dark);margin:0;} /* ================= SHARED BLOCKS for the new content sections ================= */ .snl-blk{display:block;} .snl-eb{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:16px;letter-spacing:2.2px;text-transform:uppercase;color:var(--e-global-color-accent);margin:0 0 12px;} .snl-eb::before{content:"";display:inline-block;width:32px;height:3px;background:var(--e-global-color-primary);vertical-align:middle;margin-right:14px;position:relative;top:-2px;} .snl-h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:44px;line-height:1.1;color:var(--e-global-color-secondary);margin:0 0 18px;max-width:900px;} .snl-lead{font-family:"Inter",sans-serif;font-size:17px;line-height:1.7;color:var(--e-global-color-text);margin:0 0 46px;max-width:700px;} @media(max-width:1024px){ .snl-h2{font-size:36px;} .snl-lead{max-width:100%;} } @media(max-width:767px){ .snl-h2{font-size:30px;} } .snl-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 40px;} .snl-grid3-tight{margin:0;} @media(max-width:1024px){ .snl-grid3{grid-template-columns:1fr;gap:18px;} } /* ---- Arm Your Business: carousel left, copy right ---- */ .snl-slider{background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-top:3px solid var(--e-global-color-primary);padding:26px 26px 8px;} .snl-slider .elementor-image-carousel-wrapper{margin:0;} .snl-slider .swiper-slide img, .snl-slider .elementor-carousel-image{height:400px;width:auto!important;max-width:100%;object-fit:contain;margin:0 auto;display:block;background:transparent!important;filter:drop-shadow(0 16px 24px rgba(16,16,16,.18));} .snl-slider .swiper-pagination{position:static;margin-top:18px;} .snl-slider .swiper-pagination-bullet{background:var(--e-global-color-line);opacity:1;border-radius:0;width:30px;height:4px;margin:0 5px!important;transition:background-color .25s ease;} .snl-slider .swiper-pagination-bullet-active{background:var(--e-global-color-primary);} @media(max-width:1024px){ .snl-slider .swiper-slide img,.snl-slider .elementor-carousel-image{height:300px;} } @media(max-width:767px){ .snl-slider .swiper-slide img,.snl-slider .elementor-carousel-image{height:240px;} } .snl-copy p{font-family:"Inter",sans-serif;font-size:17px;line-height:1.7;color:var(--e-global-color-text);margin:0 0 16px;} .snl-copy p:last-of-type{margin-bottom:30px;} .snl-copy .snl-h2{max-width:100%;} .snl-copy strong{color:var(--e-global-color-secondary);font-weight:600;} /* value blocks */ .snl-mini{background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-top:3px solid var(--e-global-color-primary);padding:26px 24px;} .snl-mini h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;line-height:1.15;letter-spacing:1px;text-transform:uppercase;color:var(--e-global-color-secondary);margin:0 0 10px;} .snl-mini p{font-family:"Inter",sans-serif;font-size:15px;line-height:1.6;color:var(--e-global-color-text);margin:0;} /* kill the theme's link underlines inside our own blocks */ .snl-blk a, .snl-copy a, .snl-btn, .snl-posts a, .snl-contact a, .snl-res-head a, .snl-cta-card a{text-decoration:none!important;box-shadow:none!important;} /* NOTE: do NOT add border-bottom:0 above. `.snl-res-head a` outranks `.snl-btn-ghost`, so it silently strips the ghost button's bottom border. */ /* inline buttons inside markup blocks */ /* inline-flex + min-height = the box height is explicit, so no inherited line-height can push the bottom border out of the rendered box. position/z-index so nothing painted after it can cover the edge. */ .snl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--e-global-color-primary);color:#FFFFFF!important;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;letter-spacing:1.4px;text-transform:uppercase;padding:0 34px;line-height:1;box-sizing:border-box;position:relative;z-index:4;overflow:visible;transition:background-color .25s ease,transform .25s ease;} .snl-btn:hover{background:var(--e-global-color-accent);transform:translateY(-2px);color:#FFFFFF!important;} /* border forced so no link-reset rule can strip an edge again */ .snl-btn-ghost{background:transparent;color:var(--e-global-color-secondary)!important;border:2px solid var(--e-global-color-secondary)!important;min-height:52px;padding:0 30px;font-size:17px;} .snl-btn-ghost:hover{border-color:var(--e-global-color-secondary)!important;} .snl-btn-ghost:hover{background:var(--e-global-color-secondary);color:#FFFFFF!important;} .snl-btn-ghost::after{content:"→";margin-left:12px;display:inline-block;transition:transform .25s ease;} .snl-btn-ghost:hover::after{transform:translateX(4px);} /* "Browse all answers" sits right, aligned to the TOP of the heading itself (the eyebrow is outside this row, so flex-start lands on the h2) */ .snl-res-head{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;margin:0 0 46px;} .snl-res-head-copy{flex:1 1 auto;min-width:0;} .snl-res-head .snl-h2{margin:0 0 16px;} .snl-res-head .snl-lead{margin:0;} .snl-res-head .snl-btn{flex:0 0 auto;white-space:nowrap;margin-top:2px;align-self:flex-start;} .snl-res-head, .snl-res-head-copy{overflow:visible;position:relative;z-index:3;} /* the widget this button lives in must sit above the posts grid that follows */ .snl-sec > .elementor-widget-text-editor, .snl-sec > .e-con-inner > .elementor-widget-text-editor, .snl-sec > .e-con-inner > .elementor-widget-html, .snl-sec > .elementor-widget-html{position:relative;z-index:3;overflow:visible;} @media(max-width:1024px){ .snl-res-head{flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:36px;} .snl-res-head .snl-btn{margin-top:0;} } /* ---- lead-magnet band: copy left, form right ---- */ .snl-band-copy .snl-h2{font-size:34px;margin:0 0 10px;max-width:100%;} .snl-band-copy p{font-family:"Inter",sans-serif;font-size:16px;line-height:1.6;color:var(--e-global-color-text);margin:0;max-width:46ch;} @media(max-width:767px){ .snl-band-copy .snl-h2{font-size:28px;} } /* ---- shared form control styling (guide band + contact) ---- */ .snl-band .elementor-field-group{margin-bottom:0;} .snl-band .elementor-field-textual, .snl-contact-sec .elementor-field-textual{height:58px!important;min-height:58px!important;background:#FFFFFF!important;border:1px solid var(--e-global-color-line)!important;border-radius:0!important;padding:0 18px!important;font-family:"Inter",sans-serif!important;font-size:15px!important;color:var(--e-global-color-secondary)!important;box-shadow:none!important;} .snl-band .elementor-field-textual::placeholder, .snl-contact-sec .elementor-field-textual::placeholder{color:var(--e-global-color-muted);opacity:1;} .snl-band .elementor-field-textual:focus, .snl-contact-sec .elementor-field-textual:focus{border-color:var(--e-global-color-primary)!important;} .snl-band .elementor-button[type="submit"], .snl-contact-sec .elementor-button[type="submit"]{height:58px!important;min-height:58px!important;border-radius:0!important;background:var(--e-global-color-primary);color:#FFFFFF;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;letter-spacing:1.3px;text-transform:uppercase;transition:background-color .25s ease;} .snl-band .elementor-button[type="submit"]:hover, .snl-contact-sec .elementor-button[type="submit"]:hover{background:var(--e-global-color-accent);transform:none;} /* nothing may clip a submit button's edges, and give it real clearance */ .snl-band .elementor-form, .snl-contact-sec .elementor-form, .snl-band .elementor-field-type-submit, .snl-contact-sec .elementor-field-type-submit{overflow:visible!important;} .snl-contact-sec .elementor-field-type-submit{margin-top:6px;margin-bottom:6px;padding-bottom:6px;} .snl-band .elementor-button[type="submit"], .snl-contact-sec .elementor-button[type="submit"]{line-height:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;} /* Give the submit a real, visible bottom edge and room so it can never be shaved */ .snl-contact-sec .elementor-button[type="submit"]{height:60px!important;min-height:60px!important;width:100%;border:0!important;border-bottom:4px solid var(--e-global-color-accent)!important;} .snl-contact-sec .elementor-button[type="submit"]:hover{border-bottom-color:var(--e-global-color-secondary)!important;} .snl-contact-sec .elementor-form, .snl-contact-sec .elementor-widget-form, .snl-contact-sec .elementor-widget-form > .elementor-widget-container{overflow:visible!important;padding-bottom:8px;} .snl-band .elementor-button[type="submit"]{border:0!important;border-bottom:4px solid var(--e-global-color-accent)!important;} /* keep the contact copy clear of the worker figure */ .snl-contact-sec .elementor-widget-form, .snl-contact-sec .snl-contact{position:relative;z-index:2;} /* NOTE: no background-image reset here on purpose. The section has no CSS background image; the figure is a real image widget (.snl-worker), so hiding it is done on that element, further down. */ /* ---- contact form labels + spacing ---- */ .snl-contact-sec .elementor-field-group{margin-bottom:18px;} .snl-contact-sec .elementor-field-label{font-family:"Inter",sans-serif!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:.1em;text-transform:uppercase;color:var(--e-global-color-muted)!important;margin-bottom:8px!important;padding-bottom:0!important;} .snl-contact-sec .elementor-field-required .elementor-field-label:after, .snl-contact-sec .elementor-mark-required .elementor-field-label:after{color:var(--e-global-color-primary);} .snl-contact-sec select.elementor-field-textual{appearance:none;-webkit-appearance:none;background-image:none!important;} .snl-contact-sec .elementor-field-type-checkbox .elementor-field-subgroup{padding-top:6px;} .snl-contact-sec .elementor-field-subgroup label{font-family:"Inter",sans-serif;font-size:15px;color:var(--e-global-color-text);} /* ---- worker cut-out: a real element, so he stands IN FRONT of the cards ---- */ .snl-contact-sec{position:relative;overflow:visible;} /* ---- the form sits on its own white card, lifted off the photo ---- */ .snl-formcard{box-shadow:0 26px 64px -36px rgba(16,16,16,.5);position:relative;z-index:2;} .snl-formcard .elementor-widget-form > .elementor-widget-container{padding-bottom:0;} /* ---- contact details: a panel, not floating text ---- */ .snl-contact{margin-top:30px;background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-left:3px solid var(--e-global-color-primary);padding:24px 26px 8px;box-shadow:0 18px 44px -32px rgba(16,16,16,.4);} .snl-clabel{display:inline-block;font-family:"Inter",sans-serif;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--e-global-color-muted);} .snl-clabel-top{display:block;margin:0 0 4px;} .snl-cphone{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:42px;line-height:1.05;letter-spacing:.5px;color:var(--e-global-color-secondary)!important;margin:0 0 18px;transition:color .25s ease;} .snl-cphone:hover{color:var(--e-global-color-accent)!important;} .snl-crow{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--e-global-color-line);} .snl-crow .snl-clabel{flex:0 0 56px;padding-top:2px;} .snl-cvalue{font-family:"Inter",sans-serif;font-size:15.5px;line-height:1.55;color:var(--e-global-color-text)!important;} a.snl-cvalue{transition:color .25s ease;} a.snl-cvalue:hover{color:var(--e-global-color-accent)!important;} @media(max-width:767px){ .snl-cphone{font-size:34px;} } /* ================= DYNAMIC POSTS GRID ================= */ .snl-posts .elementor-posts-container{margin:0;} .snl-posts article.elementor-post{position:relative;background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);padding:0;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s cubic-bezier(.2,.7,.3,1);} .snl-posts article.elementor-post::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--e-global-color-primary);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.7,.3,1);z-index:3;} .snl-posts article.elementor-post:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(16,16,16,.5);} .snl-posts article.elementor-post:hover::before{transform:scaleX(1);} /* Elementor Pro centres this image with transform:translate(-50%,-50%). We pin it to the box corners instead and NEUTRALISE that transform, so the hover scale doesn't knock it out of position. Both states must set transform. */ .snl-posts .elementor-post__thumbnail__link{margin:0;display:block;overflow:hidden;} .snl-posts .elementor-post__thumbnail{position:relative;overflow:hidden;height:0!important;padding-bottom:62.5%!important;background:var(--e-global-color-surface);} .snl-posts .elementor-post__thumbnail img{position:absolute!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;display:block;transform:none!important;transform-origin:center center;transition:transform .6s cubic-bezier(.2,.7,.3,1);} .snl-posts article.elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.05)!important;} .snl-posts .elementor-post__text{padding:22px 22px 24px;margin:0;} .snl-posts .elementor-post__meta-data{font-family:"Inter",sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--e-global-color-muted);margin:0 0 10px;padding:0;border:0;} .snl-posts .elementor-post__title{margin:0 0 10px;} .snl-posts .elementor-post__title a{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;line-height:1.18;color:var(--e-global-color-secondary);} .snl-posts article.elementor-post:hover .elementor-post__title a{color:var(--e-global-color-accent);} .snl-posts .elementor-post__excerpt{margin:0 0 16px;} .snl-posts .elementor-post__excerpt p{font-family:"Inter",sans-serif;font-size:14.5px;line-height:1.6;color:var(--e-global-color-text);margin:0;} .snl-posts .elementor-post__read-more{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;color:var(--e-global-color-accent);display:inline-block;} .snl-posts .elementor-post__read-more::after{content:"→";margin-left:8px;display:inline-block;transition:transform .25s ease;} .snl-posts article.elementor-post:hover .elementor-post__read-more::after{transform:translateX(4px);} .snl-posts .elementor-pagination{margin-top:40px;} .snl-posts .page-numbers{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;padding:8px 14px;color:var(--e-global-color-secondary);text-decoration:none!important;} .snl-posts .page-numbers.current{background:var(--e-global-color-primary);color:#FFFFFF;} /* ---- testimonial grid ---- */ .snl-quote-card{background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);padding:28px 26px 26px;} .snl-quote-card > .elementor-widget{width:100%;display:flex;flex:1 1 auto;} .snl-quote-card > .elementor-widget > .elementor-widget-container{display:flex;flex-direction:column;width:100%;} .snl-qtop{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px;} .snl-mono{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--e-global-color-secondary);color:var(--e-global-color-white);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px;letter-spacing:.06em;} .snl-qb{flex:1 1 auto;margin:0 0 22px;} .snl-qfoot{border-top:1px solid var(--e-global-color-line);padding-top:16px;} .snl-qfoot b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;letter-spacing:.02em;line-height:1.15;color:var(--e-global-color-secondary);} .snl-qfoot i{display:block;font-style:normal;font-family:"Inter",sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--e-global-color-muted);margin-top:5px;} .snl-cta-card{background:var(--e-global-color-secondary);border-color:var(--e-global-color-secondary);} .snl-cta-card .snl-mono{background:var(--e-global-color-primary);color:var(--e-global-color-white);font-size:30px;} .snl-cta-card .snl-qfoot{border-top-color:#33302D;} .snl-cta-card .snl-qfoot b a{color:var(--e-global-color-white);text-decoration:none;border-bottom:2px solid var(--e-global-color-primary);padding-bottom:2px;transition:color .25s ease;} .snl-cta-card .snl-qfoot b a:hover{color:var(--e-global-color-primary);} .snl-cta-card .snl-qfoot i{color:var(--e-global-color-on_dark_muted);} /* ---- buttons ---- */ .snl-btn-el .elementor-button{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;} .snl-btn-el .elementor-button:hover{transform:translateY(-2px);} /* EVERY button widget shares one box height, so a 4px under-edge on the solid ones can't make them taller than the outline one sitting beside them. border-box means the border is counted inside the 60px, not added to it. */ /* Each button carries its OWN vertical padding from its widget settings (17px vs 15px), so min-height never applied and the under-edge made the solid one taller. Zero the vertical padding and fix the height instead. */ .snl-btn-el .elementor-button{height:52px!important;min-height:52px!important;padding-top:0!important;padding-bottom:0!important;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box!important;line-height:1;} .snl-cardbtn .elementor-button{height:48px!important;min-height:48px!important;} /* ================= 3D EDGE: every solid-orange button gets the same 4px darker-orange under-edge the SEND button has ================= */ .snl-btn3d .elementor-button{border:0!important;border-bottom:4px solid var(--e-global-color-accent)!important;min-height:52px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;} .snl-btn3d .elementor-button:hover{border-bottom-color:var(--e-global-color-secondary)!important;} /* inline orange buttons in markup blocks (e.g. "See the training") */ .snl-btn:not(.snl-btn-ghost){border-bottom:4px solid var(--e-global-color-accent)!important;} .snl-btn:not(.snl-btn-ghost):hover{border-bottom-color:var(--e-global-color-secondary)!important;} /* product-card buttons: ghost at rest, orange with the same under-edge on hover */ .snl-btn3d-hover .elementor-button{border-bottom-width:3px!important;} .snl-btn3d-hover .elementor-button:hover{border-bottom-color:var(--e-global-color-secondary)!important;} /* the two outline buttons keep an even 2px box, no under-edge */ .snl-btn-ghost{border-bottom-width:2px!important;} @media(max-width:767px){ .snl-prod-img img{height:130px;} .snl-card:hover,.snl-quote-card:hover,.snl-tile:hover{transform:none;} .snl-eyebrow .elementor-heading-title::before{width:22px;margin-right:10px;} } @media(prefers-reduced-motion:reduce){ [class*="snl-"],[class*="snl-"] *{transition:none!important;animation:none!important;} } .snl-ba-frame{--snl-pos:50%;position:relative;aspect-ratio:1876/845;overflow:hidden;border-radius:4px;background:var(--e-global-color-surface,#F3F1EE);box-shadow:0 30px 70px -40px rgba(16,16,16,.55);isolation:isolate;} .snl-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;margin:0;border-radius:0;user-select:none;-webkit-user-drag:none;} .snl-ba-reveal{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--snl-pos)) 0 0);will-change:clip-path;} /* corner labels: white on near-black, never on orange, per the palette rule */ .snl-ba-tag{position:absolute;bottom:20px;z-index:3;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(16,16,16,.8);padding:10px 15px 9px;pointer-events:none;} .snl-ba-tag-before{left:20px;} .snl-ba-tag-after{right:20px;border-bottom:3px solid var(--e-global-color-primary);padding-bottom:6px;} .snl-ba-divider{position:absolute;top:0;bottom:0;left:var(--snl-pos);width:2px;margin-left:-1px;z-index:4;background:#fff;box-shadow:0 0 0 1px rgba(16,16,16,.14),0 0 22px rgba(16,16,16,.32);pointer-events:none;} .snl-ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#fff;color:var(--e-global-color-secondary,#101010);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(16,16,16,.6);transition:color .18s ease,transform .18s ease;} .snl-ba-grip svg{display:block;} /* The range input IS the whole frame: click anywhere to jump, then drag. It sits above the divider so the pointer never lands on a dead layer. */ .snl-ba-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:ew-resize;background:transparent;-webkit-appearance:none;appearance:none;} .snl-ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:64px;border-radius:50%;} .snl-ba-range::-moz-range-thumb{width:64px;height:64px;border:0;border-radius:50%;} .snl-ba-range:hover ~ .snl-ba-divider .snl-ba-grip, .snl-ba-range:active ~ .snl-ba-divider .snl-ba-grip{color:var(--e-global-color-primary);transform:translate(-50%,-50%) scale(1.06);} .snl-ba-range:focus-visible ~ .snl-ba-divider .snl-ba-grip{outline:3px solid var(--e-global-color-primary);outline-offset:3px;} .snl-ba-hint{font-family:"Inter",sans-serif;font-size:14px;line-height:1.5;color:var(--e-global-color-muted);margin:14px 0 0;} @media(max-width:1024px){ .snl-ba-frame{aspect-ratio:16/9;} } @media(max-width:767px){ .snl-ba-frame{aspect-ratio:4/3;} .snl-ba-tag{bottom:14px;font-size:12.5px;padding:8px 12px 7px;} .snl-ba-tag-before{left:14px;} .snl-ba-tag-after{right:14px;padding-bottom:5px;} .snl-ba-grip{width:48px;height:48px;} } @media(min-width:768px) and (max-width:1024px){ .snl-st-label{font-size:22px;letter-spacing:1px;} .snl-tile-in h3{font-size:20px;letter-spacing:.8px;} .snl-st-num{min-width:56px;height:46px;font-size:26px;} } @media(max-width:767px){ .snl-btn-el .elementor-button{height:auto!important;min-height:52px!important;padding-top:14px!important;padding-bottom:14px!important;line-height:1.15;text-align:center;} .snl-cardbtn .elementor-button{height:auto!important;min-height:48px!important;} .snl-btn{min-height:52px;height:auto;padding-top:14px;padding-bottom:14px;line-height:1.15;text-align:center;} .snl-res-head .snl-btn{white-space:normal;width:100%;} } @media(max-width:767px){ .snl-ba-frame{aspect-ratio:3/2;} .snl-ba-frame img{object-position:38% center;} } /* A horizontal drag on a range input must not be read as a page scroll, and a vertical swipe over it must still scroll. */ .snl-ba-range{touch-action:pan-y;} @media(max-width:767px){ .snl-posts .page-numbers{padding:12px 16px;display:inline-block;min-width:44px;text-align:center;} .snl-posts .elementor-pagination{margin-top:28px;} } @media(max-width:767px){ .snl-btnrow .elementor-button{width:100%;} } @media(max-width:480px){ .snl-btnrow .elementor-button{padding-left:12px!important;padding-right:12px!important;font-size:15px!important;letter-spacing:.8px!important;} } @media(max-width:360px){ .snl-btnrow .elementor-button{font-size:14px!important;letter-spacing:.5px!important;padding-left:9px!important;padding-right:9px!important;} } /* --- 10. Eyebrow rule: 32x3 read as a heavy slab next to 16px type. Finer and shorter so it marks the label instead of competing with it. Both eyebrow flavours (heading widget and markup block) are set together; .snl-eb had no mobile step at all before. --- */ .snl-eyebrow .elementor-heading-title::before, .snl-eb::before{width:24px;height:2px;margin-right:11px;top:-3px;} @media(max-width:767px){ .snl-eyebrow .elementor-heading-title::before, .snl-eb::before{width:18px;height:2px;margin-right:9px;} } /* --- 11. Eyebrow wrapping. The rule is a ::before INSIDE the heading, so a label that runs to two lines sends the second line back to the far left, underneath the rule ("2004" hanging on its own under the dash). Making the heading a flex row puts the text in its own column, so it wraps as a block and every line starts at the same place. Applies at all sizes; on desktop these labels are single line so nothing moves. --- */ .snl-eyebrow .elementor-heading-title, .snl-eb{display:flex;align-items:flex-start;gap:11px;} /* margin-top instead of `top`, so the rule sits on the cap height of whatever size the label ends up at rather than a fixed offset */ .snl-eyebrow .elementor-heading-title::before, .snl-eb::before{flex:0 0 auto;margin-right:0;top:0;margin-top:.52em;} @media(max-width:767px){ .snl-eyebrow .elementor-heading-title, .snl-eb{gap:9px;line-height:1.35;} /* the tracking is what pushes this label over two lines on a phone */ .snl-eyebrow .elementor-heading-title{font-size:14px!important;letter-spacing:1.4px!important;} .snl-eb{font-size:14px;letter-spacing:1.4px;} .snl-head .elementor-heading-title, .snl-h2{text-wrap:balance;} } /* ========================================================================= * HEADER (template "SNL Header 2026") * One template, three states: * default ink bar, for every interior page * body.home transparent, sitting over the hero photo * .elementor-sticky--effects ink again once scrolled, on every page * The transparent state is a modifier rather than a second template, so there * is one navigation menu to maintain. The white logo works on all three, which * is why no logo swap is needed. * ========================================================================= */ .snl-hdr{--snl-hdr-ink:var(--e-global-color-secondary);background-color:var(--snl-hdr-ink);transition:background-color .3s ease,box-shadow .3s ease;} .snl-hdr{position:relative;z-index:200;} /* The cart lives in the utility bar and opens as a full side panel, so the utility bar has to outrank the main bar or the Order button paints over the open cart. A z-index on the cart itself cannot fix this: a child never escapes its parent's stacking context. */ /* The cart moved into the main bar, so the main bar is what has to sit on top. Leaving the utility bar higher made its Distributors link paint over the open cart panel. A child never escapes its parent stacking context, so the order of these two is the whole fix. */ .snl-hdr .snl-hdr-util{position:relative;z-index:300;} .snl-hdr .snl-hdr-main{position:relative;z-index:200;} /* Home only: let the hero photo show through until the user scrolls. Covers the live front page and the draft while it is still being previewed. */ body.home .snl-hdr:not(.elementor-sticky--effects), body.page-id-4773 .snl-hdr:not(.elementor-sticky--effects){background-color:transparent;} body.home .snl-hdr:not(.elementor-sticky--effects) .snl-hdr-util, body.page-id-4773 .snl-hdr:not(.elementor-sticky--effects) .snl-hdr-util{border-bottom-color:rgba(255,255,255,.18);} /* Scrolled: solid on every page, with a shadow so it reads as lifted, and a little height taken back so it intrudes less on the content. */ .snl-hdr.elementor-sticky--effects{background-color:var(--snl-hdr-ink);box-shadow:0 12px 34px -20px rgba(0,0,0,.75);} .snl-hdr.elementor-sticky--effects .snl-hdr-util{max-height:0;opacity:0;overflow:hidden;padding-top:0!important;padding-bottom:0!important;border-bottom-width:0;} .snl-hdr .snl-hdr-util{max-height:60px;opacity:1;transition:max-height .3s ease,opacity .25s ease,padding .3s ease;} .snl-hdr.elementor-sticky--effects .snl-hdr-main{padding-top:10px!important;padding-bottom:10px!important;} .snl-hdr .snl-hdr-main{transition:padding .3s ease;} /* ---- utility bar ---- */ .snl-hdr-util{border-bottom:1px solid rgba(255,255,255,.1);} .snl-hdr-contact,.snl-hdr-dist{font-family:"Inter",sans-serif;font-size:13px;line-height:1;color:var(--e-global-color-on_dark);} .snl-hdr-contact a,.snl-hdr-dist a{color:var(--e-global-color-on_dark)!important;text-decoration:none!important;transition:color .25s ease;} .snl-hdr-contact a:hover,.snl-hdr-dist a:hover{color:var(--e-global-color-primary)!important;} .snl-hdr-tel a{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;letter-spacing:.04em;color:#FFFFFF!important;} .snl-hdr-sep{margin:0 10px;opacity:.4;} /* was body-grey at 14px over a photo, which read as disabled text */ .snl-hdr-dist{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;} .snl-hdr-dist a{color:#FFFFFF!important;border-bottom:2px solid rgba(223,116,45,.6);padding-bottom:2px;} .snl-hdr-dist a:hover{color:var(--e-global-color-primary)!important;border-bottom-color:var(--e-global-color-primary);} /* ---- logo ---- */ /* source is only 226x73, so it is held well under 1x to stay crisp until a larger white logo (ideally SVG) replaces it */ .snl-hdr-logo img{width:auto;height:44px;max-width:none;display:block;} @media(max-width:1024px){.snl-hdr-logo img{height:38px;}} @media(max-width:767px){.snl-hdr-logo img{height:34px;}} /* ---- navigation ---- */ .snl-hdr-nav .elementor-nav-menu .elementor-item{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:17px;letter-spacing:1.1px;text-transform:uppercase;color:#FFFFFF!important;padding:10px 14px!important;fill:#FFFFFF;transition:color .25s ease;} .snl-hdr-nav .elementor-nav-menu .elementor-item:hover, .snl-hdr-nav .elementor-nav-menu .elementor-item.elementor-item-active, .snl-hdr-nav .elementor-nav-menu .elementor-item.highlighted{color:var(--e-global-color-primary)!important;} /* underline marker instead of Elementor's default pointer */ .snl-hdr-nav .e--pointer-none .elementor-item.elementor-item-active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--e-global-color-primary);} .snl-hdr-nav .elementor-nav-menu--main .elementor-item{position:relative;} /* dropdowns: ink panel, orange on hover, square corners like the rest */ .snl-hdr-nav .elementor-nav-menu--dropdown{background-color:var(--e-global-color-secondary)!important;border-radius:0!important;box-shadow:0 24px 48px -28px rgba(0,0,0,.8);} .snl-hdr-nav .elementor-nav-menu--dropdown a{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:16px;letter-spacing:.9px;text-transform:uppercase;color:var(--e-global-color-on_dark)!important;padding:11px 18px!important;} .snl-hdr-nav .elementor-nav-menu--dropdown a:hover{background-color:var(--e-global-color-ink_soft)!important;color:var(--e-global-color-primary)!important;} /* the burger and the mobile panel */ /* The burger renders as an with its own fill:#33373d, so setting colour alone leaves it dark. Drive the fill, and the size variable Elementor exposes. */ .snl-hdr-nav .elementor-menu-toggle{--nav-menu-icon-color:#FFFFFF;--nav-menu-icon-size:26px;color:#FFFFFF!important;background-color:transparent!important;border-radius:0!important;padding:6px!important;} .snl-hdr-nav .elementor-menu-toggle svg, .snl-hdr-nav .elementor-menu-toggle .e-font-icon-svg, .snl-hdr-nav .elementor-menu-toggle i{fill:#FFFFFF!important;color:#FFFFFF!important;} .snl-hdr-nav .elementor-menu-toggle:hover svg, .snl-hdr-nav .elementor-menu-toggle:hover .e-font-icon-svg{fill:var(--e-global-color-primary)!important;} .snl-hdr-nav .elementor-menu-toggle.elementor-active svg{fill:var(--e-global-color-primary)!important;} .snl-hdr-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{margin-top:0!important;} /* ---- header buttons ---- */ .snl-hdr-btn .elementor-button{height:44px!important;min-height:44px!important;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;padding-left:20px!important;padding-right:20px!important;border-radius:0!important;} .snl-hdr-btn-ghost .elementor-button{background:transparent!important;color:#FFFFFF!important;border:2px solid rgba(255,255,255,.45)!important;} .snl-hdr-btn-ghost .elementor-button:hover{border-color:#FFFFFF!important;background:rgba(255,255,255,.08)!important;} @media(max-width:1024px){ /* the utility bar is the first thing to go when space is tight */ .snl-hdr-contact .snl-hdr-mail,.snl-hdr-sep{display:none;} .snl-hdr-nav .elementor-nav-menu .elementor-item{font-size:16px;padding:10px 10px!important;} } @media(max-width:767px){ /* On phones the two bars collapse into ONE row. display:contents dissolves the wrapper boxes so the logo, the cart and the burger all become direct flex children of the header and can be ordered freely - no duplicate widget, and no absolute positioning with a magic offset to clear the burger. The cart still lives in the utility bar in the markup, which is what keeps it in the first row on desktop and tablet. */ .snl-hdr{flex-direction:row!important;align-items:center!important;padding:12px 20px!important;} /* Both bars are BOXED containers, so each renders an .e-con-inner between itself and its children. Dissolving only the outer box just promotes that inner wrapper to be the flex child, which is why the cart group and the logo group sat side by side instead of flattening. Dissolve both levels. */ .snl-hdr-util,.snl-hdr-utilr,.snl-hdr-main, .snl-hdr-util > .e-con-inner,.snl-hdr-main > .e-con-inner{display:contents!important;} .snl-hdr-contact{display:none!important;} .snl-hdr-dist{display:none!important;} /* The action group holds the burger trigger as well as the two buttons, so it must stay visible on phones - only the buttons come out (see .snl-hdr-btn). Hiding the whole group left the phone with no way to open the menu. */ .snl-hdr-cta{display:flex!important;order:3;width:auto!important;flex:0 0 auto!important;align-items:center;} /* Elementor forces --flex-wrap:wrap on every flex container below 768 and gives every widget width:100%. Flattening the bars alone therefore produced three full-width items that each took their own line. Pin the row and size each item to its content. */ .snl-hdr{flex-wrap:nowrap!important;} .snl-hdr-logo,.snl-hdr-cart,.snl-hdr-nav{width:auto!important;max-width:none!important;flex:0 0 auto!important;} .snl-hdr-logo{order:1;margin-right:auto;} .snl-hdr-cart{order:2;} .snl-hdr-nav{order:3;} /* Both buttons come out on phones: the cart is the action that matters and the nav covers the rest. Order stays reachable one tap in. */ .snl-hdr-btn{display:none!important;} .snl-hdr-main{gap:12px!important;} .snl-hdr-btn .elementor-button{height:40px!important;min-height:40px!important;font-size:14px;padding-left:14px!important;padding-right:14px!important;} } /* ---- header height, published as a variable so the home hero can be pulled up under the transparent header without hard-coding the number twice ---- */ :root{--snl-hdr-h:130px;} @media(max-width:1024px){:root{--snl-hdr-h:118px;}} @media(max-width:767px){:root{--snl-hdr-h:66px;}} /* ---- header buttons: explicit colours so they never fall back to the theme's default blue, whatever the kit says ---- */ .snl-hdr-btn:not(.snl-hdr-btn-ghost) .elementor-button{background-color:var(--e-global-color-primary)!important;color:#FFFFFF!important;} .snl-hdr-btn:not(.snl-hdr-btn-ghost) .elementor-button:hover{background-color:var(--e-global-color-accent)!important;color:#FFFFFF!important;} /* ---- mini cart ---- Two scopes that must not be confused: .elementor-menu-cart__toggle_button the control in the header, on ink .elementor-menu-cart__main the side panel, on white A blanket rule on .elementor-button-text hits BOTH, which is what made the View Cart label white on a white button. Every rule below names its scope. */ /* --- the toggle, in the header --- */ .snl-hdr-cart .elementor-menu-cart__toggle .elementor-button, .snl-hdr-cart .elementor-menu-cart__toggle_button{background:transparent!important;border:0!important;color:#FFFFFF!important;padding:0!important;height:auto!important;min-height:0!important;display:inline-flex;align-items:center;gap:8px;} /* the toggle icon renders as an inline , so colour alone does nothing */ .snl-hdr-cart .elementor-menu-cart__toggle_button svg{fill:#FFFFFF!important;color:#FFFFFF!important;width:22px;height:22px;} .snl-hdr-cart .elementor-menu-cart__toggle_button:hover svg{fill:var(--e-global-color-primary)!important;} .snl-hdr-cart .elementor-menu-cart__toggle_button .elementor-button-text, .snl-hdr-cart .elementor-menu-cart__toggle_button .amount{color:#FFFFFF!important;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;} .snl-hdr-cart .elementor-button-icon-qty{background-color:var(--e-global-color-primary)!important;color:#FFFFFF!important;font-family:"Inter",sans-serif;font-size:10px;font-weight:600;} /* --- the panel --- */ .snl-hdr-cart .elementor-menu-cart__container{z-index:9999!important;} .snl-hdr-cart .elementor-menu-cart__main{z-index:9999!important;background:#FFFFFF;border-radius:0!important;border:0!important;box-shadow:-26px 0 60px -30px rgba(16,16,16,.55);padding:26px 26px 24px!important;} /* The close button IS the icon: its X is two ::before/::after bars stretched to width:100%. Sizing it like a button stretches the bars into a huge X, and a font-size does nothing because there is no glyph. Drive it through the custom properties Elementor exposes instead. */ .snl-hdr-cart .elementor-menu-cart__close-button{--cart-close-icon-size:18px;--cart-close-button-color:var(--e-global-color-secondary);--cart-close-button-hover-color:var(--e-global-color-primary);margin:0 0 10px;align-self:flex-end;} .snl-hdr-cart .elementor-menu-cart__close-button::before, .snl-hdr-cart .elementor-menu-cart__close-button::after{height:2px;} /* product rows */ .snl-hdr-cart .elementor-menu-cart__products{padding-top:4px;} .snl-hdr-cart .elementor-menu-cart__product{padding:18px 0!important;border-bottom:1px solid var(--e-global-color-line)!important;align-items:flex-start;} .snl-hdr-cart .elementor-menu-cart__product:first-child{border-top:1px solid var(--e-global-color-line)!important;} .snl-hdr-cart .elementor-menu-cart__product-image{border:1px solid var(--e-global-color-line);background:var(--e-global-color-surface);} .snl-hdr-cart .elementor-menu-cart__product-image img{border-radius:0!important;mix-blend-mode:multiply;} .snl-hdr-cart .elementor-menu-cart__product-name, .snl-hdr-cart .elementor-menu-cart__product-name a{font-family:"Barlow Condensed",sans-serif!important;font-weight:700!important;font-size:20px!important;line-height:1.15!important;letter-spacing:.4px;text-transform:uppercase;color:var(--e-global-color-secondary)!important;text-decoration:none!important;} .snl-hdr-cart .elementor-menu-cart__product-name a:hover{color:var(--e-global-color-accent)!important;} .snl-hdr-cart .elementor-menu-cart__product-price{font-family:"Inter",sans-serif!important;font-size:14.5px!important;color:var(--e-global-color-text)!important;margin-top:6px;} .snl-hdr-cart .elementor-menu-cart__product-price .amount{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;color:var(--e-global-color-secondary);} .snl-hdr-cart .elementor-menu-cart__product-price .product-quantity{color:var(--e-global-color-muted);} /* Remove: the control is the DIV, not the inside it, and its circle comes from border-radius:var(--remove-item-button-size). Square it to match the rest of the system and move it up beside the product name. Quiet grey until hover, then red, because it is destructive and should not compete with Checkout. */ .snl-hdr-cart .elementor-menu-cart__product-remove{--remove-item-button-size:24px;--remove-item-button-color:var(--e-global-color-line);--remove-item-button-hover-color:#B3261E;border-radius:0!important;top:18px;bottom:auto;} .snl-hdr-cart .elementor-menu-cart__product-remove:hover{--remove-item-button-color:#B3261E;} .snl-hdr-cart .elementor-menu-cart__product-remove a{display:block;width:100%;height:100%;} /* subtotal */ .snl-hdr-cart .elementor-menu-cart__subtotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border:0!important;padding:22px 0 20px!important;font-family:"Barlow Condensed",sans-serif;} .snl-hdr-cart .elementor-menu-cart__subtotal strong{font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--e-global-color-muted);} .snl-hdr-cart .elementor-menu-cart__subtotal .amount{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:30px;letter-spacing:.02em;color:var(--e-global-color-secondary);} /* footer buttons: Checkout is the action, View cart is the escape hatch */ .snl-hdr-cart .elementor-menu-cart__footer-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--e-global-color-line);padding-top:18px;} .snl-hdr-cart .elementor-menu-cart__footer-buttons .elementor-button{height:52px!important;min-height:52px!important;display:inline-flex!important;align-items:center;justify-content:center;border-radius:0!important;font-family:"Barlow Condensed",sans-serif!important;font-weight:700!important;font-size:16px!important;letter-spacing:1.2px!important;text-transform:uppercase;box-sizing:border-box;padding:0 14px!important;} .snl-hdr-cart .elementor-button--checkout{background-color:var(--e-global-color-primary)!important;border:0!important;border-bottom:4px solid var(--e-global-color-accent)!important;} .snl-hdr-cart .elementor-button--checkout:hover{background-color:var(--e-global-color-accent)!important;border-bottom-color:var(--e-global-color-secondary)!important;} .snl-hdr-cart .elementor-button--checkout .elementor-button-text{color:#FFFFFF!important;} .snl-hdr-cart .elementor-button--view-cart{background-color:transparent!important;border:2px solid var(--e-global-color-secondary)!important;} .snl-hdr-cart .elementor-button--view-cart:hover{background-color:var(--e-global-color-secondary)!important;} /* the label lives in a span, so colouring the anchor alone leaves it white */ .snl-hdr-cart .elementor-button--view-cart .elementor-button-text{color:var(--e-global-color-secondary)!important;} .snl-hdr-cart .elementor-button--view-cart:hover .elementor-button-text{color:#FFFFFF!important;} /* empty state */ .snl-hdr-cart .woocommerce-mini-cart__empty-message{font-family:"Inter",sans-serif;font-size:15px;color:var(--e-global-color-muted);text-align:center;padding:70px 0 30px;} @media(max-width:767px){ .snl-hdr-cart .elementor-menu-cart__main{padding:20px 18px 18px!important;} .snl-hdr-cart .elementor-menu-cart__product-name, .snl-hdr-cart .elementor-menu-cart__product-name a{font-size:18px!important;} .snl-hdr-cart .elementor-menu-cart__subtotal .amount{font-size:26px;} .snl-hdr-cart .elementor-menu-cart__footer-buttons .elementor-button{height:48px!important;min-height:48px!important;font-size:15px!important;} } /* ---- cart now lives in the main bar beside the buttons, so it survives the utility bar being hidden on phones and reads as the action it is ---- */ .snl-hdr-cta .snl-hdr-cart{display:flex;align-items:center;} .snl-hdr-cta .snl-hdr-cart .elementor-menu-cart__toggle_wrapper{display:flex;align-items:center;} @media(max-width:767px){ /* bigger tap target once it is the only control besides the burger */ .snl-hdr-cart .elementor-menu-cart__toggle_button svg{width:24px;height:24px;} .snl-hdr-cart .elementor-menu-cart__toggle_button .elementor-button-text, .snl-hdr-cart .elementor-menu-cart__toggle_button .amount{display:inline-block;font-size:14px;} .snl-hdr-cta{gap:6px!important;} } /* ---- header: breathing room between the cart and the burger ---- */ .snl-hdr-utilr{gap:18px;} @media(max-width:767px){ .snl-hdr{gap:16px!important;} .snl-hdr-cart{margin-right:2px;} } /* ---- Lock the page while the drawer is open. Without this the page scrolls behind the panel, the sticky header re-lays itself out mid-interaction, and the close control ends up somewhere the tap never lands - which is why it stopped closing after a scroll. ---- */ /* ========================================================================= * MOBILE / TABLET MENU - Elementor's Off-Canvas widget. * Replaces a hand-rolled drawer built by re-styling the nav menu's dropdown. * That approach fought a component whose open/close behaviour Elementor owns, * and the close kept failing. The widget brings its own close button, overlay, * scroll lock and Esc handling, so only appearance is ours. * ========================================================================= */ /* desktop nav out, burger in - at the width the horizontal menu stops fitting */ .snl-ofc-trigger{display:none;} @media(max-width:1024px){ .snl-hdr-nav{display:none!important;} .snl-ofc-trigger{display:flex!important;align-items:center;} } .snl-ofc-trigger .elementor-icon{color:#FFFFFF;padding:4px;} .snl-ofc-trigger .elementor-icon svg{fill:#FFFFFF;width:26px;height:26px;} .snl-ofc-trigger .elementor-icon:hover svg{fill:var(--e-global-color-primary);} /* the panel */ /* __main is a full-screen positioning wrapper; the actual panel is __content. Painting __main left the panel white, and white menu text disappeared into it - the navigation was there all along, just invisible. */ .snl-ofc .e-off-canvas__main{background-color:transparent!important;} .snl-ofc .e-off-canvas__content{background-color:var(--e-global-color-secondary)!important;height:100%;overflow-y:auto;} .snl-ofc .e-off-canvas__overlay{background-color:rgba(16,16,16,.62)!important;} .snl-ofc .e-off-canvas__close-button{color:#FFFFFF!important;} .snl-ofc .e-off-canvas__close-button svg{fill:#FFFFFF!important;width:22px;height:22px;} .snl-ofc .e-off-canvas__close-button:hover svg{fill:var(--e-global-color-primary)!important;} /* menu inside the panel */ .snl-ofc-nav .elementor-nav-menu--main .elementor-item{ font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px; letter-spacing:1.3px;text-transform:uppercase;color:#FFFFFF!important; padding:15px 24px!important;border-bottom:1px solid rgba(255,255,255,.08); } .snl-ofc-nav .elementor-nav-menu--main .elementor-item:hover, .snl-ofc-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{ background-color:var(--e-global-color-ink_soft)!important;color:var(--e-global-color-primary)!important; } .snl-ofc-nav .elementor-nav-menu .sub-arrow svg, .snl-ofc-nav .elementor-nav-menu .sub-arrow i{fill:#FFFFFF;color:#FFFFFF;} .snl-ofc-nav .elementor-nav-menu--dropdown{background-color:transparent!important;} .snl-ofc-nav .elementor-nav-menu--dropdown a{ font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:16px; letter-spacing:.9px;text-transform:uppercase;color:var(--e-global-color-on_dark)!important; padding:12px 24px 12px 40px!important;border-bottom:1px solid rgba(255,255,255,.05); } .snl-ofc-nav .elementor-nav-menu--dropdown a:hover{ background-color:var(--e-global-color-ink_soft)!important;color:var(--e-global-color-primary)!important; } /* actions and contact at the foot of the panel */ .snl-ofc-btn .elementor-button{width:100%;height:50px!important;min-height:50px!important;justify-content:center;border-radius:0!important;font-size:16px!important;} .snl-ofc-btn-ghost .elementor-button{background:transparent!important;color:#FFFFFF!important;border:2px solid rgba(255,255,255,.45)!important;} .snl-ofc-btn-ghost .elementor-button:hover{border-color:#FFFFFF!important;background:rgba(255,255,255,.08)!important;} .snl-ofc-tel{padding:18px 24px 0;font-family:"Barlow Condensed",sans-serif;} .snl-ofc-tel a{color:#FFFFFF!important;font-weight:700;font-size:21px;letter-spacing:.04em;text-decoration:none!important;} .snl-ofc-tel .snl-ofc-mail{display:block;margin-top:8px;} .snl-ofc-tel .snl-ofc-mail a{font-family:"Inter",sans-serif;font-weight:400;font-size:14px;color:var(--e-global-color-on_dark)!important;letter-spacing:0;} /* The widget ships no close control of its own - it closes on overlay click and on Esc. This is an explicit one so there is something visible to tap. */ .snl-ofc-close{align-self:flex-end;} .snl-ofc-close .elementor-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:12px;border:1px solid rgba(255,255,255,.22);} .snl-ofc-close .elementor-icon svg{fill:#FFFFFF;width:18px;height:18px;} .snl-ofc-close .elementor-icon:hover{background:var(--e-global-color-primary);border-color:var(--e-global-color-primary);} .snl-ofc-close .elementor-widget-container{display:flex;justify-content:flex-end;} /* The widget defaults to a 1.5s entrance, which reads as a broken menu. */ .snl-ofc{--e-off-canvas-animation-duration:.35s!important;} /* Submenus collapse and open on tap. Elementor gives the vertical menu a sub-arrow driven by SmartMenus, which does not behave inside a panel that starts hidden, so the panel script adds its own toggle button per parent item and this only reflects the state. No dependency on Elementor JS. */ .snl-ofc-nav .elementor-menu-toggle{display:none!important;} .snl-ofc-nav .sub-arrow{display:none!important;} .snl-ofc-nav .elementor-nav-menu li{position:relative;} .snl-ofc-nav .elementor-nav-menu ul{display:none!important;position:static!important;box-shadow:none!important;background-color:transparent!important;width:auto!important;min-width:0!important;} .snl-ofc-nav .elementor-nav-menu li.snl-open > ul{display:block!important;} /* the toggle is its own target so tapping the label still follows the link */ /* !important because this is a real

s into every page on the site; a footer that repeats on every template must not touch the document outline. Each link group is a