.nss-slider{--nss-desktop:3;--nss-tablet:2;--nss-mobile:1;--nss-gap:18px;--nss-height:480px;--nss-duration:750ms;--nss-radius:8px;--nss-accent:#738b54;--nss-fit:cover;--nss-items:var(--nss-desktop);position:relative;width:100%;max-width:100%;outline:none;font-family:inherit}.nss-slider *{box-sizing:border-box}.nss-viewport{width:100%;overflow:hidden}.nss-track{display:flex;gap:var(--nss-gap);transition:transform var(--nss-duration) cubic-bezier(.22,.68,0,1);will-change:transform}.nss-slide{position:relative;flex:0 0 calc((100% - (var(--nss-items) - 1)*var(--nss-gap))/var(--nss-items));min-width:0}.nss-type-hero,.nss-type-elementor,.nss-type-video{--nss-items:1}.nss-image-frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:#edece8;border-radius:var(--nss-radius)}.nss-image-frame img{display:block;width:100%;height:100%;object-fit:var(--nss-fit);transition:transform .85s cubic-bezier(.2,.7,0,1)}.nss-image-frame:hover img{transform:scale(1.07)}.nss-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:200px;color:#85877f;font-size:14px}.nss-image-link{display:block;color:inherit;text-decoration:none}.nss-image-caption{padding-top:12px}.nss-image-caption>span{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#85877f}.nss-image-caption>h3{margin:5px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:400;color:#282a26}.nss-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px}.nss-pagination{display:flex;align-items:center;gap:7px}.nss-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#d0d2cb;cursor:pointer;transition:width .3s ease,background .3s ease}.nss-dot.nss-dot-active{width:23px;border-radius:5px;background:var(--nss-accent)}.nss-navigation{display:flex;gap:8px;margin-left:auto}.nss-arrow{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #dedfd9;border-radius:50%;background:#fff;color:#343730;font-size:16px;line-height:1;cursor:pointer;transition:background .2s,color .2s,transform .2s}.nss-arrow:hover{background:#22251f;color:#fff;transform:translateY(-2px)}.nss-hero{display:flex;align-items:center;min-height:var(--nss-height);padding:7%;background-position:center;background-size:cover;border-radius:var(--nss-radius);color:#fff}.nss-hero-copy{max-width:610px}.nss-eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase}.nss-hero-copy h2{margin:14px 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,6vw,72px);font-weight:400;letter-spacing:-1.5px;line-height:1.08;color:#fff}.nss-hero-copy p{max-width:480px;color:#f0f0ec;font-size:15px}.nss-button{display:inline-flex;align-items:center;gap:12px;margin-top:12px;padding:11px 17px;border-radius:4px;background:var(--nss-accent);color:#fff;text-decoration:none;font-size:13px}.nss-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--nss-radius);background:#181a17}.nss-video-frame iframe,.nss-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}.nss-video-caption{padding-top:13px}.nss-video-caption span{font-size:10px;color:#85877f;letter-spacing:1px}.nss-video-caption h3{margin:5px 0;font-size:18px}.nss-elementor-content{width:100%;min-height:80px}.nss-effect-fade .nss-slide{transition:opacity var(--nss-duration) ease,transform var(--nss-duration) ease}.nss-effect-fade .nss-slide:not(.nss-active){opacity:.35;transform:translateY(10px)}.nss-effect-fade .nss-slide.nss-active{opacity:1;transform:translateY(0)}.nss-effect-zoom .nss-slide img{transform:scale(1.12);transition:transform var(--nss-duration) cubic-bezier(.19,1,.22,1)}.nss-effect-zoom .nss-slide.nss-active img{transform:scale(1)}.nss-effect-cinematic .nss-track{transition-timing-function:cubic-bezier(.16,1,.3,1)}.nss-effect-cinematic .nss-slide img{transform:scale(1.1) translateX(-3%);transition:transform calc(var(--nss-duration)*1.3) cubic-bezier(.19,1,.22,1)}.nss-effect-cinematic .nss-slide.nss-active img{transform:scale(1) translateX(0)}.nss-effect-coverflow .nss-viewport{perspective:1200px}.nss-effect-coverflow .nss-slide{transform:scale(.92) rotateY(-7deg);opacity:.68;transition:transform var(--nss-duration) cubic-bezier(.19,1,.22,1),opacity var(--nss-duration) ease}.nss-effect-coverflow .nss-slide.nss-active{transform:scale(1) rotateY(0);opacity:1}.nss-notice{padding:12px 15px;border-left:3px solid #dba617;background:#fff8e7;color:#624c16}@media(max-width:1024px){.nss-slider{--nss-items:var(--nss-tablet)}.nss-type-hero,.nss-type-elementor,.nss-type-video{--nss-items:1}}@media(max-width:767px){.nss-slider{--nss-items:var(--nss-mobile)}.nss-type-hero,.nss-type-elementor,.nss-type-video{--nss-items:1}.nss-hero{min-height:min(var(--nss-height),480px);padding:9%}.nss-hero-copy h2{font-size:clamp(32px,10vw,52px)}.nss-controls{padding-top:16px}.nss-arrow{width:34px;height:34px}}@media(prefers-reduced-motion:reduce){.nss-slider *,.nss-slider *::before,.nss-slider *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Version 1.1: visual design controls and draggable layer output. */ .nss-slider{--nss-background:#ffffff;--nss-caption-color:#292c27;--nss-caption-size:17px;--nss-image-ratio:4/5}.nss-type-gallery,.nss-type-carousel{background:var(--nss-background)}.nss-image-frame{aspect-ratio:var(--nss-image-ratio)}.nss-image-caption>h3{color:var(--nss-caption-color);font-size:var(--nss-caption-size)}.nss-full-width{max-width:none}.nss-arrows-filled .nss-arrow{border-color:var(--nss-accent);background:var(--nss-accent);color:#fff}.nss-arrows-minimal .nss-arrow{border:0;background:transparent;font-size:21px}.nss-arrows-square .nss-arrow{border-radius:5px}.nss-hero-layered{position:relative;display:block;padding:0;overflow:hidden}.nss-design-layer{position:absolute;z-index:2;line-height:1.18}.nss-design-layer h2,.nss-design-layer p{margin:0;color:inherit;font-size:inherit;font-weight:inherit;text-align:inherit;line-height:inherit}.nss-design-heading h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-1px}.nss-design-button a{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:5px;text-decoration:none;font-size:inherit}.nss-design-image img{display:block;width:100%;height:auto}.nss-video-wrap{position:relative}.nss-video-layer-overlay{position:absolute;inset:0;pointer-events:none}.nss-video-layer-overlay .nss-design-button,.nss-video-layer-overlay a{pointer-events:auto}.nss-active .nss-design-layer{animation:nssLayerEnter .65s cubic-bezier(.19,1,.22,1) both}.nss-active .nss-design-layer:nth-child(2){animation-delay:.12s}.nss-active .nss-design-layer:nth-child(3){animation-delay:.23s}.nss-active .nss-design-layer:nth-child(4){animation-delay:.34s}.nss-active .nss-design-layer:nth-child(5){animation-delay:.45s}@keyframes nssLayerEnter{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@media(max-width:767px){.nss-design-heading{font-size:min(var(--nss-mobile-title,42px),9vw)!important}.nss-design-text{font-size:min(16px,4vw)!important}.nss-design-button{font-size:min(14px,3.6vw)!important}} /* Themes routinely underline every anchor inside post content with a selector that out-specifies this plugin's own rules, which puts an underline through gallery captions and straight across the hero call-to-action button. These are the plugin's own controls rather than body copy, so the decoration is pinned here instead of being left to whichever theme happens to be installed. */ .nss-slider a.nss-image-link,.nss-slider a.nss-image-link:hover,.nss-slider a.nss-image-link:focus,.nss-slider a.nss-button,.nss-slider a.nss-button:hover,.nss-slider a.nss-button:focus,.nss-slider .nss-design-button a,.nss-slider .nss-design-button a:hover,.nss-slider .nss-design-button a:focus{text-decoration:none!important;box-shadow:none} .nss-slider a.nss-image-link{color:inherit} /* Section sizing and presentation. Every rule below is a modifier on the wrapper, so a slider saved before these settings existed renders exactly as it did: the defaults are nss-h-fixed, nss-cap-below, nss-align-left, nss-shadow-none, nss-hover-zoom, nss-dots-dots. */ .nss-slider{--nss-height-tablet:var(--nss-height);--nss-height-mobile:var(--nss-height);--nss-max-width:100%;--nss-padding-y:0px;max-width:min(100%,var(--nss-max-width));margin-inline:auto;padding-block:var(--nss-padding-y)} .nss-full-width{--nss-max-width:100%} .nss-h-auto .nss-image-frame{aspect-ratio:auto} .nss-h-auto .nss-image-frame img{height:auto} .nss-h-auto .nss-hero{min-height:0} .nss-h-viewport .nss-hero{min-height:100vh} .nss-h-viewport .nss-image-frame{aspect-ratio:auto;height:80vh} .nss-align-center .nss-image-caption,.nss-align-center .nss-video-caption{text-align:center} .nss-align-right .nss-image-caption,.nss-align-right .nss-video-caption{text-align:right} .nss-cap-overlay .nss-image-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 18px;background:linear-gradient(to top,rgba(12,14,11,.82),rgba(12,14,11,.34) 62%,transparent);border-radius:0 0 var(--nss-radius) var(--nss-radius);pointer-events:none} /* Forced light on the scrim: the caption colour setting applies to the "below" position, where the author controls the background behind the text. */ .nss-cap-overlay .nss-image-caption>h3{color:#fff} .nss-cap-overlay .nss-image-caption>span{color:#e6e7e2} .nss-shadow-soft .nss-image-frame,.nss-shadow-soft .nss-hero,.nss-shadow-soft .nss-video-frame{box-shadow:0 10px 30px rgba(16,24,40,.10)} .nss-shadow-strong .nss-image-frame,.nss-shadow-strong .nss-hero,.nss-shadow-strong .nss-video-frame{box-shadow:0 18px 48px rgba(16,24,40,.20)} .nss-hover-none .nss-image-frame:hover img{transform:none} .nss-hover-lift .nss-image-frame:hover img,.nss-hover-tilt .nss-image-frame:hover img{transform:none} .nss-hover-lift .nss-slide{transition:transform .4s cubic-bezier(.2,.7,0,1)} .nss-hover-lift .nss-slide:hover{transform:translateY(-9px)} .nss-hover-tilt .nss-slide{transition:transform .45s cubic-bezier(.2,.7,0,1)} .nss-hover-tilt .nss-slide:hover{transform:perspective(900px) rotateX(4deg) rotateY(-5deg) scale(1.02)} .nss-dots-bars .nss-dot{width:22px;height:4px;border-radius:2px} .nss-dots-bars .nss-dot.nss-dot-active{width:40px} .nss-dots-numbers .nss-pagination{counter-reset:nssdot} .nss-dots-numbers .nss-dot{width:auto;height:auto;min-width:27px;padding:3px 7px;border:1px solid #dedfd9;border-radius:6px;background:transparent;color:#5a5d55;font-size:12px;line-height:1.5} .nss-dots-numbers .nss-dot::after{counter-increment:nssdot;content:counter(nssdot)} .nss-dots-numbers .nss-dot.nss-dot-active{border-color:var(--nss-accent);background:var(--nss-accent);color:#fff} @media(max-width:1024px){.nss-hero{min-height:var(--nss-height-tablet)}.nss-h-viewport .nss-hero{min-height:100vh}} @media(max-width:767px){.nss-hero{min-height:min(var(--nss-height-mobile),480px)}.nss-h-viewport .nss-hero{min-height:100vh}.nss-h-viewport .nss-image-frame{height:60vh}.nss-hover-tilt .nss-slide:hover{transform:none}} /* Hero copy: width as a share of the slide, and where it sits. The old hard-coded 610px is the fallback, so a slider rendered without the new custom property is unchanged. */ .nss-hero-copy{max-width:var(--nss-content-width,610px)} .nss-vpos-top .nss-hero{align-items:flex-start} .nss-vpos-middle .nss-hero{align-items:center} .nss-vpos-bottom .nss-hero{align-items:flex-end} .nss-hpos-left .nss-hero{justify-content:flex-start} .nss-hpos-center .nss-hero{justify-content:center;text-align:center} .nss-hpos-center .nss-hero-copy p{margin-inline:auto} .nss-hpos-right .nss-hero{justify-content:flex-end;text-align:right} .nss-hpos-right .nss-hero-copy p{margin-inline-start:auto} /* Layered heroes place every element themselves, so the flex alignment above must not fight the canvas the author dragged their layers onto. */ .nss-hero.nss-hero-layered{display:block} @media(max-width:767px){.nss-hero-copy{max-width:100%}} /* ---------- Stacked layout: section > column > widget ---------- */ .nss-hero-stacked{display:block;padding:0} .nss-b-stack{display:flex;flex-direction:column;width:100%} .nss-b-section{display:flex;flex-wrap:wrap;gap:var(--nss-b-gap,24px);width:100%;padding:var(--nss-b-pad,28px);background:var(--nss-b-bg,transparent)} .nss-b-section>*{min-width:0} /* max-width centres the row without stopping the section's background spanning the slide */ .nss-b-section[style*="--nss-b-max"]{max-width:var(--nss-b-max);margin-inline:auto} .nss-b-v-top{align-items:flex-start} .nss-b-v-middle{align-items:center} .nss-b-v-bottom{align-items:flex-end} .nss-b-h-left{justify-content:flex-start} .nss-b-h-center{justify-content:center} .nss-b-h-right{justify-content:flex-end} .nss-b-h-between{justify-content:space-between} .nss-b-column{display:flex;flex-direction:column;gap:var(--nss-b-cgap,12px);width:var(--nss-b-cw,auto);padding:var(--nss-b-cpad,0);background:var(--nss-b-cbg,transparent)} .nss-b-ca-left{text-align:left;align-items:flex-start} .nss-b-ca-center{text-align:center;align-items:center} .nss-b-ca-right{text-align:right;align-items:flex-end} .nss-b-cv-top{justify-content:flex-start} .nss-b-cv-middle{justify-content:center} .nss-b-cv-bottom{justify-content:flex-end} .nss-b-widget{width:100%} .nss-b-widget:last-child{margin-bottom:0!important} .nss-b-heading{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.5px} .nss-b-text{max-width:70ch} .nss-b-button{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;line-height:1;transition:transform .2s ease,filter .2s ease} .nss-b-button:hover{transform:translateY(-1px);filter:brightness(1.06)} .nss-b-image{display:block;height:auto;max-width:100%} .nss-b-ca-center .nss-b-image{margin-inline:auto} .nss-b-ca-right .nss-b-image{margin-inline-start:auto} /* 2.12.1: a text line narrower than its column, and a short divider, followed the column's alignment only for their words - the box itself stayed at the left edge. */ .nss-b-divider{margin-inline:0} .nss-b-ca-center .nss-b-text,.nss-b-ca-center .nss-b-divider{margin-inline:auto} .nss-b-ca-right .nss-b-text,.nss-b-ca-right .nss-b-divider{margin-inline:auto 0} .nss-b-spacer{width:100%;flex:0 0 auto} /* Columns stack on a phone. This is the whole point of the mode: a percentage width that is right on a desktop is unreadable on a 375px screen, so width is dropped entirely. Written before "Stack the columns" existed, and it named bare .nss-b-section and .nss-b-column, so it also stacked the sections whose author had chosen Never: a four column logo strip became four screens of scrolling, and the builder's mobile preview showed the opposite of what shipped, because the canvas honoured the setting. The padding still shrinks on every section; only the stacking now asks first. */ @media(max-width:767px){ .nss-b-section{padding:calc(var(--nss-b-pad,28px)*.7)} .nss-b-section:not(.nss-b-stackmode-never){flex-direction:column} .nss-b-section:not(.nss-b-stackmode-never)>.nss-b-column{width:100%!important;flex:0 1 auto!important} .nss-b-text{max-width:none} } /* Section and column corner radius. overflow:hidden so a background image or a full-bleed child is clipped by the corners rather than squaring them off again. Only applied when a radius is actually set, so a plain section keeps its default overflow behaviour. */ .nss-b-section[style*="--nss-b-rad"]{border-radius:var(--nss-b-rad,0);overflow:hidden} .nss-b-column[style*="--nss-b-crad"]{border-radius:var(--nss-b-crad,0);overflow:hidden} /* A lone section fills the slide, so "middle" and "bottom" mean something. The stack was only ever as tall as its content, sitting at the top of a slide with a fixed height: every vertical alignment looked identical and a short section left a large dead area underneath it. Several sections are the opposite problem. Sharing the height between them turns a heading above three columns into two half-height bands with a hole in the middle, and no setting could close it. They take the height they ask for and the stack places the group; the single-section slide keeps the behaviour it had. */ .nss-hero-stacked{display:flex;flex-direction:column} .nss-b-stack{flex:1 1 auto;justify-content:center} .nss-b-section{flex:0 0 auto} .nss-b-stack>.nss-b-section:only-of-type{flex:1 1 auto} /* Column direction --------------------------------------------------------- Stacking the columns swaps the flex axes: justify-content becomes the vertical one and align-items the horizontal. Without these the section's Vertical and Horizontal controls quietly trade places the moment the direction changes. Stacked columns stretch to the full width unless one carries an explicit width, which is what "below each other" is expected to look like. */ .nss-b-dir-column{flex-direction:column} .nss-b-dir-column.nss-b-h-left,.nss-b-dir-column.nss-b-h-center,.nss-b-dir-column.nss-b-h-right,.nss-b-dir-column.nss-b-h-between{align-items:stretch} .nss-b-dir-column.nss-b-v-top{justify-content:flex-start} .nss-b-dir-column.nss-b-v-middle{justify-content:center} .nss-b-dir-column.nss-b-v-bottom{justify-content:flex-end} .nss-b-dir-column>.nss-b-column{width:var(--nss-b-cw,100%);flex:0 0 auto} /* Below 768px every section stacks, so the same swap applies there to all of them. */ @media(max-width:767px){ .nss-b-section{align-items:stretch} .nss-b-section.nss-b-v-top{justify-content:flex-start} .nss-b-section.nss-b-v-middle{justify-content:center} .nss-b-section.nss-b-v-bottom{justify-content:flex-end} } /* "Side by side" has to mean it. The section wraps by default, so two columns whose widths add up to more than 100% - which is exactly what duplicating a 70% column gives you - dropped the second one underneath and made the setting a lie. Without wrapping they shrink to share the row instead. Below 768px the direction rule above stacks them anyway, so narrow screens are unaffected. */ .nss-b-dir-row{flex-wrap:nowrap} /* Arrow placement ---------------------------------------------------------- Separate from arrow_style, which is only how they look. The markup does not move: the arrows stay in the controls row and the stylesheet places them, so nothing about the tab order or the reading order changes with the setting. */ /* Below, on the right, is the original arrangement and stays the default. */ .nss-arrowpos-bottom-right .nss-navigation{margin-left:auto} .nss-arrowpos-bottom-left .nss-navigation{order:-1;margin-left:0;margin-right:auto} .nss-arrowpos-bottom-center .nss-controls{justify-content:center;flex-wrap:wrap} .nss-arrowpos-bottom-center .nss-navigation{order:2;flex-basis:100%;justify-content:center;margin-left:0} .nss-arrowpos-bottom-center .nss-pagination{order:1;flex-basis:100%;justify-content:center} .nss-arrowpos-top-right .nss-controls{padding-top:0;padding-bottom:18px} .nss-arrowpos-top-right{display:flex;flex-direction:column} .nss-arrowpos-top-right>.nss-controls{order:-1} /* Over the slider: the container spans the width and the two buttons are pushed to its edges. It has to ignore pointer events or the invisible strip between the arrows would swallow clicks and drags meant for the slide underneath. */ .nss-arrowpos-sides{position:relative} .nss-arrowpos-sides .nss-navigation{position:absolute;top:calc(var(--nss-viewport-h,100%)/2);left:0;right:0;z-index:4;justify-content:space-between;margin:0;padding:0 14px;transform:translateY(-50%);pointer-events:none} .nss-arrowpos-sides .nss-navigation>.nss-arrow{pointer-events:auto;box-shadow:0 2px 10px rgba(0,0,0,.18)} /* The controls row can end up holding nothing once the arrows leave it. The renderer marks that case rather than relying on :has(), which is a needless dependency for a padding rule. */ .nss-controls-empty{padding-top:0} @media(max-width:700px){ /* On a phone the edges are where thumbs are, so overlaid arrows sit inside the padding. */ .nss-arrowpos-sides .nss-navigation{padding:0 6px} /* 2.12.1: a hero's words start 9% in, and on a phone that is under the overlaid arrow. */ .nss-type-hero.nss-arrowpos-sides .nss-hero:not(.nss-hero-layered):not(.nss-hero-stacked){padding-inline:max(9%,48px)} } /* A dot hidden because it is past the page count. Stated explicitly rather than left to the user-agent stylesheet: an explicit display on .nss-dot would silently beat it, and that exact mistake has been made twice in the admin CSS. */ .nss-dot[hidden]{display:none!important} /* 2.12.1: the same mistake on the play/pause button - its display:grid beat [hidden], so a button the script hid for a reduced-motion visitor stayed on screen. */ .nss-playpause[hidden]{display:none!important} /* Reels & Shorts ----------------------------------------------------------- Vertical video, several at a time, each with its own link - the shape the platforms made familiar. The caption sits over the video rather than under it. */ .nss-type-reels .nss-video-frame{aspect-ratio:9/16} .nss-type-reels .nss-video-wrap{position:relative} .nss-type-reels .nss-slide{cursor:default} /* The overlay must not swallow clicks meant for the player underneath: everything in here is inert except the shop button, which takes pointer events back. */ .nss-reel-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;pointer-events:none;border-radius:var(--nss-radius);background:linear-gradient(to bottom,rgba(12,15,11,.72),rgba(12,15,11,.28) 34%,transparent 58%)} /* Our button, not the platform's: the plugin accent, the plugin's corner radius. */ .nss-reel-shop{flex:0 0 auto;pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px;background:var(--nss-accent);color:#fff;font-size:13px;font-weight:600;line-height:1;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:filter .15s,transform .15s} .nss-reel-shop:hover,.nss-reel-shop:focus-visible{filter:brightness(1.08);transform:translateY(-1px);color:#fff} .nss-reel-shop:focus-visible{outline:2px solid #fff;outline-offset:2px} .nss-reel-shop>svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* Below the label the bag alone still reads, and a row of reels gets tight on a phone. */ @media(max-width:640px){ .nss-reel-shop{padding:0 9px} .nss-reel-shop>span{display:none} } /* The button on an ordinary video slide, which never used to render at all. */ .nss-video-button{display:inline-flex;align-items:center;margin-top:12px;padding:10px 20px;border-radius:8px;background:var(--nss-accent);color:#fff;font-size:14px;font-weight:600;text-decoration:none} .nss-video-button:hover,.nss-video-button:focus-visible{filter:brightness(1.08);color:#fff} /* 2.12.1: stated against the slider root. A theme's own link colour and underline reach a plain class rule, and turned these buttons into accent-coloured words on an accent box. */ .nss-slider a.nss-video-button,.nss-slider a.nss-video-button:hover,.nss-slider a.nss-video-button:focus-visible,.nss-slider a.nss-reel-shop,.nss-slider a.nss-reel-shop:hover,.nss-slider a.nss-reel-shop:focus-visible{color:#fff} .nss-slider a.nss-video-button,.nss-slider a.nss-video-button:hover,.nss-slider a.nss-video-button:focus,.nss-slider a.nss-b-button,.nss-slider a.nss-b-button:hover,.nss-slider a.nss-b-button:focus{text-decoration:none!important} /* The words sit under the reel, clear of YouTube's own title in the top-left of the embed - two captions in the same corner make both unreadable. */ .nss-reel-caption{display:flex;flex-direction:column;gap:2px;padding:10px 2px 0} .nss-reel-caption>strong{color:var(--nss-caption-color);font-size:var(--nss-caption-size);font-weight:600;line-height:1.3} .nss-reel-caption>span{color:var(--nss-caption-color);opacity:.68;font-size:12.5px;letter-spacing:.3px;text-transform:uppercase} /* Themes underline links; this one is a button. */ .nss-reel-shop,.nss-reel-shop:hover,.nss-reel-shop:focus{text-decoration:none!important} /* A hero fills the slide it sits in ---------------------------------------- .nss-slide is a block box, so every hero sized itself to its own copy and stopped there. One slide whose headline wrapped to a third line stretched the track, and the shorter slides were left with a strip of page showing under the photograph - ragged, and only on the slides with the least to say. Scoped to the two types that render a hero. .nss-slide belongs to every other type as well, and making all of them flex containers to fix this one would be a much larger change than the problem deserves. */ .nss-type-hero .nss-slide,.nss-type-elementor .nss-slide{display:flex} .nss-type-hero .nss-hero,.nss-type-elementor .nss-hero{flex:1 1 auto;min-width:0} /* Pagination dots keep their shape in any theme ------------------------------ A dot is a