/* ns-framework - foldout v2, scoped path --------------------------------- Paired with foldout.js, which adds .ns-foldout2 to . Loading this sheet on a page that does not load foldout.js does nothing. ---------------------------------------------------------------------- */ /* v2 b) The railing band is the panel's lower boundary. lab.css gives it z-index:0, but Divi's stock .et_pb_column carries z-index:2 - so the copy painted OVER the band, and the only thing that ever hid it was the panel's own overflow:hidden. That is a hard edge with no line-box awareness, and it is what cuts body text through the middle of the glyphs while the panel grows. Raising the band above the column lets the copy disappear UNDER the railing before it ever reaches that edge. 3 clears the column's 2 and stays under the tile's 6 and the excerpt's 7, so the travelling excerpt still passes in front of the band. */ .ns-foldout2 .ns-panel.ns-panel::after{z-index:3} /* v2 g) The GLASS lower rim - only on a page that carries a glass surface design. Glass surfaces v6 (a page code module, today on foldout-test only) kills this ::after with `html body ... {background:none !important}` and redraws the frame on ::before - which lab.css pins at z-index:-1, BEHIND the copy. The only thing left cutting the copy was the panel's own overflow:hidden: a hard edge with no line-box awareness, so the copy ran visibly through the translucent rim down to the box edge and was cut mid-glyph - the exact defect v2 b) had already fixed for the opaque band. The rim's paint therefore comes back here, above the page's kill (html.ns-foldout2.ns-glassband body = 0,4,3 over its 0,2,3, both !important), as the SAME glass material composited over an opaque base so nothing shows through: the v6 tint verbatim, the sheen flattened to the 7.5% white it has decayed to at the bottom of the frame's own 105deg run (measured against the settled band; the moving band and the frame's bar then differ by <=2/255 across their width), and beneath both the raw page colour at the band's height, written per frame as --ns-railbase (--ns-railbg carries the pre-mixed 7.5% wash and belongs to the pre-glass band). The band's geometry is unchanged: it rides the animated box's bottom edge and spans between the 24px side bars, so the glass frame's own corners still mitre beneath it in the same colour. SCOPE. `.ns-glassband` is set on by foldout.js when it detects the glass kill (a panel ::after computing background-image:none while this rule is still inactive - the detection reads the pre-rule state, so it cannot see its own paint). A page without a glass module never gets the class and keeps the v2 b) band above in its page colours: the glass material is the page's design decision, not the framework's. If Glass v6 leaves a page, the class simply stops being set and nothing here applies. */ html.ns-foldout2.ns-glassband body .ns-panel.ns-panel::after{ background: linear-gradient(rgba(255,255,255,0.075), rgba(255,255,255,0.075)) left 24px bottom/calc(100% - 48px) 34px no-repeat, linear-gradient(rgba(17,34,74,0.40), rgba(17,34,74,0.40)) left 24px bottom/calc(100% - 48px) 34px no-repeat, linear-gradient(var(--ns-railbase,var(--ns-bg-page,#050F2C)), var(--ns-railbase,var(--ns-bg-page,#050F2C))) left 24px bottom/calc(100% - 48px) 34px no-repeat !important} /* v2 i) THE BOUNDARY. The foldout leaves its multi-column design at 767 - the same line where the page's own designed rows stack (measured: hero and prose+figure rows hold columns to 768 on every foldout page) - not at Divi's 980 tablet line, which the component inherited rather than chose and which stranded a 213px band of prematurely one-column foldouts on still-multi-column pages. All three mobile blocks below, foldout.js's wide(), and lab.css's desktop tile-row block share the number. In the reclaimed 768-980 band the tiles must hold the desktop row against the theme's tablet stacking. Two markup generations, two mechanisms: the flex rows (et_flex_row) stack by flipping flex-direction to column, so the band pins it back to row and sizes the tiles as equal flex tracks; the older .ns-tiles/.et_pb_row_4col rows are already held by lab.css's tile block, whose boundary moved to 768 with this change. Selection is by the declared role class (.hovergroup), as everywhere in this file. */ @media (min-width:768px) and (max-width:980px){ html.ns-foldout2 body .ns-tabset :is(.et_pb_row,.nst-tiles):has(:is(.et_pb_column,.nst-tile).hovergroup){ flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch} html.ns-foldout2 body .ns-tabset :is(.et_pb_row,.nst-tiles):has(:is(.et_pb_column,.nst-tile).hovergroup) > :is(.et_pb_column,.nst-tile).hovergroup{ flex:1 1 0!important;width:auto!important;max-width:none!important; min-width:0;margin:0!important} } /* v2 c2) The rail column's 320px entrance pose. lab.css parks it with `transform: translateY(320px)` the moment the panel opens, and only `.ns-colgo` — added by the trip driver — releases it. Below 768 the trip does not run, so nothing released it and the column sat 320px below the copy it belongs under, with a hole where it should have been. The pose is a desktop entrance: the rail slides up beside the lead. Once the row has stacked there is no lead to slide beside, so the pose has no meaning and is cancelled outright rather than played. Transform only — the 24px gap above the column is owned by lab.css's max-width:1099 rule and is left alone. */ @media (max-width:767px){ .ns-foldout2 .ns-panel.ns-panel.ns-open > :is(.et_pb_row,.nst-panel-main-row) > :is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2), .ns-foldout2 .ns-panel.ns-panel.ns-open.ns-rev > :is(.et_pb_row,.nst-panel-main-row) > :is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2){ transform:none!important} } /* v2 d) Mobile tile regroup. Closed: every tile occupies the single wide track, stacked - the layout the page has always had. Open: the active tile keeps the wide track and spans it, and the closed tiles drop into a narrow second track beside it, so the panel that follows the section sits directly under the open tile rather than under the whole stack. 65 / 35. The split is not transitioned here - grid placement is discrete, so the motion is driven by mobFlip() in foldout.js instead. */ @media (max-width:767px){ .ns-foldout2 .ns-tabset :is(.et_pb_row,.nst-tiles):has(:is(.et_pb_column,.nst-tile).hovergroup){ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,0fr); /* The closed tiles share the height the open tile defines. `1fr` cannot do it: the row has no definite height, so flexible tracks resolve to their own content and the spanning tile's extra height is never distributed. The share is driven per frame by mobShare() instead; stretch makes each tile fill the track that gives it. */ grid-auto-rows:min-content; align-items:stretch; column-gap:0!important; row-gap:24px!important} .ns-foldout2 .ns-tabset :is(.et_pb_row,.nst-tiles) > :is(.et_pb_column,.nst-tile).hovergroup{ grid-column:1; width:auto!important;max-width:none!important;min-width:0} .ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_row,.nst-tiles):has(:is(.et_pb_column,.nst-tile).hovergroup){ grid-template-columns:minmax(0,1fr) minmax(0,0.538fr); column-gap:12px!important; row-gap:12px!important} /* the open tile keeps the wide track and holds the column open beside it */ /* The open tile stretches to the block, so when the closed column needs more height than the open tile's content the tile follows it down and no dark strip opens under it. The feedback that used to make this inflate is broken on the other side: mobShare sizes the closed tiles from the open tile's CONTENT height, which does not move when the box stretches. */ .ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_row,.nst-tiles) > :is(.et_pb_column,.nst-tile).hovergroup.is-active{ grid-column:1;grid-row:1 / span var(--ns-closed,8); /* The tile's bottom sits on the excerpt's last line. Its 22px inset plus the block's 20px band plus the panel's own top inset put 61px between that line and the first line of copy, where a paragraph gap is 21. The tile is page-coloured and the band continues it, so there is no box to crowd - dropping the inset leaves the band and the panel to own the gap, which is the block spacing they are supposed to own. */ padding-bottom:0!important} /* heading only: the excerpt is already collapsed by the controller, the chevron is noise at this size */ /* A closed tile is a label and its chevron, side by side. Stacked, the chevron doubles the tile's height for no information - and the closed column then drives the whole block taller than the open tile's content. */ .ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_row,.nst-tiles) > :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active){ grid-column:2; /* the top inset matches the open tile's, so the labels sit on the same line. 12px against the open tile's 22px put the closed names 10px higher. */ padding:22px 12px 12px!important; flex-direction:row!important; align-items:flex-start!important; column-gap:6px} body:not(:has(#et-fb-app-body-root)).ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) :is(.et_pb_blurb,.nst-tile-blurb){ flex:1 1 auto;min-width:0} body:not(:has(#et-fb-app-body-root)).ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) :is(.et_pb_icon,.nst-tile-icon){ /* font-size only shrinks the glyph. The BOX is what takes the room: Divi sizes .et_pb_icon at 38x46, which is a third of a 115px tile and left the label 45px - enough to break "AI Sprinter" across two lines. Size the box, not just the mark. */ flex:0 0 auto; margin:0!important;padding:0!important; width:auto!important;min-width:0!important; height:auto!important;min-height:0!important; /* beside the label's first line, not floating in the middle of a tile that mobShare has stretched */ align-self:flex-start!important} /* the mark is an inner element with its own size - 38px, set by the module. font-size on the wrapper alone shrinks nothing. */ body:not(:has(#et-fb-app-body-root)).ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) :is(.et_pb_icon,.nst-tile-icon), body:not(:has(#et-fb-app-body-root)).ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) :is(.et_pb_icon,.nst-tile-icon) *{ font-size:20px!important;line-height:1!important; width:auto!important;height:auto!important;min-width:0!important} /* The label keeps the narrow column it is left with, so it must not break mid-word: lab.css lets narrow items break anywhere, which turns "Search" into "Searc h" once the chevron takes its 24px. Wrap at word boundaries, hyphenate only where the dictionary allows. */ body:not(:has(#et-fb-app-body-root)).ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) h3{ overflow-wrap:normal!important;word-break:normal!important; hyphens:auto;-webkit-hyphens:auto} /* 15px flat was set when these boxes were 51px tall. They now share the open tile's height, so the label scales with the viewport and tops out just under the open tile's own size. And it is not dimmed: .5 opacity is legible on a full-size heading and not on a small one. */ .ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) h3{ font-size:clamp(15px,2vw,18px)!important;line-height:1.25!important; opacity:1!important} .ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active):hover h3{ opacity:1!important} /* The chevron belongs to a CLOSED tile - it is the affordance. lab.css hides it on the open tile with opacity:0, which leaves its box in flow: 46px of dead space under the excerpt, and 92px on a 4-tile foldout where it also carries a 36px top margin. Above 767 the trip pins the tile height so the space never shows; below it there is nothing pinning anything, and mobShare then hands the same slack to every closed tile. Take it out of flow. */ .ns-foldout2 .ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup.is-active :is(.et_pb_icon,.nst-tile-icon){ display:none!important} } /* v2 f) The rail box below 768. The panel paints a 24px wash down each edge (::before). The rail box started at 42px - 10px panel padding plus 32px row padding - so an 18px strip of bare panel showed between the wash and the box on both sides and read as a black column. The box now reaches the wash: the 18px comes off the margin and goes straight back on as padding, so its text keeps the same 42px inset as the copy above it and only the fill moves. The inset itself becomes the registry value CARD-INSET-PANEL (22/18/12/18). lab.css's mobile rule carries an ad-hoc `24px 18px`, which is 2px over canon at the top and twice canon at the bottom. The selector is deliberately heavy. lab.css's own rule carries `:not(:has(#et-fb-app-body-root))`, and a :has() holding an ID contributes an ID-level component - so that rule is (1,11,1) and no amount of classes can beat it. The same guard is repeated here, plus one class, to reach (1,12,1). Both declarations are !important, so specificity is the whole contest. */ @media (max-width:767px){ body:not(:has(#et-fb-app-body-root)).ns-foldout2 .ns-panel.ns-panel.ns-panel.ns-panel.ns-open > :is(.et_pb_row,.nst-panel-main-row):first-of-type > :is(.et_pb_column,.nst-panel-content,.nst-rail):last-child:not(:first-child){ /* The row is a flex column with a 24px gap when stacked, and lab.css adds a 24px margin on top of it - so the two stacked to 48px. The row owns the gap; the column does not repeat it. */ margin-top:0!important; margin-left:-18px!important; margin-right:-18px!important; /* auto, not 100%: 100% resolves against the row's content box and would hang 18px past the wash on the right while meeting it on the left. */ width:auto!important; max-width:none!important; padding:22px 18px 12px!important} }