/* ========================================================================= NovusWay class library. HOW THIS IS MEANT TO BE USED Build pages in Beaver Builder with whatever modules you like, then put one of these class names in the module's Advanced tab -> CSS Class. The module keeps all its own controls; the class supplies the NovusWay treatment. Nothing here locks a layout, and none of it has to be used - it is a shortcut to being on-brand, not a cage. Loaded after tokens.css, which owns every color, size and space. No rule below contains a literal color or a raw pixel type size; they compose the tokens. That is what keeps a redesign a change to one file. THE ORGANIZING IDEA The camp accent is not interface chrome, it is LANDSCAPE. A camp page opens on a drawn profile of its own ground, layered far-to-near with distant ranges paler - atmospheric perspective, which is what the Blue Ridge is named for. It also does work color cannot: Lutheridge and Lutherock were measured as indistinguishable under protanopia, so silhouette carries identity where hue provably fails. THE DISPLAY FACE IS ONE WEIGHT. Coniferous ships medium only and must never be faked bold, so emphasis comes from SIZE, never from weight. THE ACCENT IS A FILL. It never colors text, on any camp, anywhere. ========================================================================= */ :root{ --nw-gutter:clamp(20px,5vw,76px); --nw-rule:3px; /* the accent rule thickness, everywhere */ } /* ---------- shared type roles ------------------------------------------ */ .nw-section-title{ font-family:var(--font-accent);font-weight:500; font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.04;letter-spacing:-.02em; margin:0;text-wrap:balance;max-width:17ch; } .nw-lede{ font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.5; color:var(--ink-2);max-width:46ch;margin:0; } /* The eyebrow carries its camp color as a rule BESIDE the letters, never in them. Small uppercase text is where contrast matters most, and the accent is a fill that never colors text. */ .nw-eyebrow{display:flex;align-items:center;gap:.75em} .nw-eyebrow::before{ content:"";flex:none;display:block;width:2.2em; border-top:var(--nw-rule) solid var(--camp-accent); } /* When a module emits the rule as a real element, drop the drawn one. */ .nw-eyebrow:has(.nw-eyebrow__rule)::before{display:none} .nw-eyebrow__rule{ flex:none;display:block;width:2.2em; border-top:var(--nw-rule) solid var(--camp-accent); } /* REMOVED 1.37.0 (plugin 2.54.0, Carter 10 Oct 2026): the styles for the Opening and its landform, the Invitation, the three Doors, the Activity Index and the Program List. NovusWay > Cleanup check found those modules on no layout on staging, and the plugin no longer registers them. */ /* ---------- the info box ----------------------------------------------- The general-purpose card. Content and named layout come from the module in the plugin; everything you can see is decided here. IT IS DELIBERATELY BUILT FROM THE DOOR'S PARTS. The prefix is the door's kicker, the title is the door's title one step smaller, and the call to action is the door's growing accent rule. A page of info boxes should look like it came from the same place as the camp home, not like an addon pack bolted on beside it. THE ACCENT IS A FILL HERE TOO. A filled disc carries the camp color with the derived label on top of it; an outlined disc carries it as a ring. There is no accent-colored glyph anywhere in this block, because the Luther Springs gold measures 1.85:1 on the cream and 2.21:1 on white where non-text contrast needs 3:1. A plain icon is ink. The squares added with plugin 2.35.0 follow the same rule: a filled square is a fill, an outlined square is a ring, and both glyphs stay off the accent. ONE STANDING EXCEPTION, named here with plugin 2.35.0 so this note stops contradicting the code: the bullets and numbers of a list typed in the content are drawn in the camp color (.nw-ibox__text li::marker, below), as they have been since the content became an editor. They are decoration - the list's structure is carried by its markup and its indent, not by the bullet - which is the reading that keeps them clear of the 3:1 rule. Whether they should move to a muted ink is Carter's call; until then the builder's "List bullet color" sets them per box. */ .nw-ibox{ position:relative; display:flex;flex-direction:column;gap:var(--s-4); --nw-ibox-mark:clamp(48px,5.5vw,62px); } /* Scoped border-box. The parent theme sets this globally, but a button with width:100% and horizontal padding overflows its card by 48px the moment it does not - measured, on a preview page without the reset. Six selectors here make the module correct on its own rather than correct by inheritance. */ .nw-ibox,.nw-ibox *,.nw-ibox *::before,.nw-ibox *::after{box-sizing:border-box} /* Mark size is a real field now, emitted by the module against --nw-ibox-mark. The value on .nw-ibox above is the DEFAULT: a size that scales with the viewport, which a pinned pixel value from the builder cannot do. Leaving the field empty is therefore not "unset", it is a deliberate choice of the responsive one. */ /* Three modifiers carry no rule here and that is deliberate, not an omission: .nw-ibox--above is the stacked default, .nw-ibox--plain is the absence of a box, and .nw-ibox--title-left is the default order inside the head. They are emitted anyway so a page can hook them without the module having to change. */ /* Alignment used to be a --center class here. It is an align field now, and the module emits text-align, align-items, justify-content and three margins from it - because a centered card whose icon and rule are still hard left is not centered, it is broken. Left is the default and needs no rule. */ .nw-ibox__body{display:flex;flex-direction:column;gap:var(--s-3);min-width:0} /* The two side placements: the icon or photo in a column beside the words. CHANGED with plugin 2.35.0: this is the layout at EVERY width now, not only from 640px up. A 60px disc beside two lines of text in a 320px column is still four words per line, so a side box still stacks on a phone - but the stacking has moved into the module's own generated CSS, which writes it at Beaver Builder's small-device breakpoint from the builder's global settings. The 640px that used to sit here was a number the builder knew nothing about, so a box could stack at one width while its phone settings switched at another; and it could not be turned off, either per box or by switching the builder's responsive layouts off. The module's phone rule puts back the stacked layout exactly as it was, including the var(--s-4) gap from .nw-ibox above, so a stacked box looks the same. The rules stay in this position in the file on purpose: moving them would change which of them and the equal-height rules further down wins. NOTE: an updated module stylesheet reaches a page only when Beaver Builder rebuilds that page's cached CSS. Until then a side box on that page stays side by side on a phone, because this file no longer stacks it. The plugin now clears that cache itself, once, the first time 2.35.0 runs (see NW_CORE_CSS_REV in novusway-core.php) - so upload the plugin and this theme together, and the gap closes on the next page view. */ .nw-ibox--left,.nw-ibox--right{ display:grid;grid-template-columns:auto minmax(0,1fr); align-items:start;gap:var(--s-5); } .nw-ibox--right{grid-template-columns:minmax(0,1fr) auto} .nw-ibox--right>.nw-ibox__mark{grid-column:2;grid-row:1} .nw-ibox--right>.nw-ibox__body{grid-column:1;grid-row:1} /* Mark beside the title only - the text runs full width underneath it. The centered line-up and the gap are defaults: since plugin 2.35.0 the module writes "Beside the heading, line it up" and "Space between the icon and the words" over them when either is set. "Below the heading" needs no rule here - the mark sits inside the body and takes its rhythm. */ .nw-ibox__head{display:flex;align-items:center;gap:var(--s-4)} .nw-ibox__heading{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--s-1)} .nw-ibox--title-right .nw-ibox__head .nw-ibox__mark{order:2} /* ---- the mark ---- */ .nw-ibox__mark{ flex:none;display:inline-flex;align-items:center;justify-content:center; width:var(--nw-ibox-mark);height:var(--nw-ibox-mark); } .nw-ibox__mark i{display:block;line-height:1;font-size:calc(var(--nw-ibox-mark)*.44)} .nw-ibox__mark--disc{background:var(--camp-accent);color:var(--camp-accent-label);border-radius:50%} .nw-ibox__mark--outline{border:var(--nw-rule) solid var(--camp-accent);color:var(--ink);border-radius:50%} .nw-ibox__mark--plain{width:auto;height:auto;color:var(--ink)} .nw-ibox__mark--plain i{font-size:calc(var(--nw-ibox-mark)*.7)} /* ADDED with plugin 2.35.0: the two square treatments, on the same rule as the discs - a filled square carries the camp color with the derived label on it, an outlined square carries the color as its ring around an ink glyph. Neither colors the glyph with the accent. The corner is the site's small radius, from the .nw-ibox__mark--square rule below, which a square PHOTO already uses: the two share that modifier class, so the fill here is named against the photo rather than put on every square. */ .nw-ibox__mark--square:not(.nw-ibox__mark--photo){background:var(--camp-accent);color:var(--camp-accent-label)} .nw-ibox__mark--square-outline{border:var(--nw-rule) solid var(--camp-accent);color:var(--ink);border-radius:var(--radius)} .nw-ibox__mark--photo{overflow:hidden;background:var(--surface-sunk)} .nw-ibox__mark--circle{border-radius:50%} .nw-ibox__mark--square{border-radius:var(--radius)} .nw-ibox__mark--wide{width:100%;height:auto;display:block;border-radius:var(--radius-lg)} .nw-ibox__img{width:100%;height:100%;object-fit:cover;display:block} /* A banner across the top of a card is cropped to a fixed shape rather than left at whatever the photograph happens to be, so a row of boxes stays a row of boxes. 16:10 was tried first and ate half the card. */ .nw-ibox__mark--wide .nw-ibox__img{height:auto;aspect-ratio:16/9} /* ADDED with plugin 2.35.0: a photo in its own shape - not cropped, and not pinned to the icon size. It sits at the width of the image WordPress serves, never wider than the box, until a Photo width is set. A block rather than the mark's flex box, so a wide image shrinks with its column instead of holding the column open. No backdrop: a transparent logo on a grey rectangle is nobody's idea of its own shape, and Frame color puts one back on purpose. */ .nw-ibox__mark--natural{display:block;width:auto;height:auto;max-width:100%;background:transparent} .nw-ibox__mark--natural .nw-ibox__img{width:auto;height:auto;max-width:100%} /* ---- the words ---- */ .nw-ibox__prefix{ margin:0;font-size:var(--step--1);letter-spacing:.13em; text-transform:uppercase;color:var(--ink-muted); } /* NO FONT-FAMILY, NO WEIGHT, NO TRACKING - changed in 1.11.0. This used to force var(--font-accent), which meant setting the site's Heading font to anything else changed nothing here and the heading stayed Coniferous. The module's Typography field was sitting on Default, emitting nothing, and this rule quietly won - so from inside the builder the control said one thing and the page said another, with nothing to see. THE RULE, because this is the third time: a module stylesheet must not declare a property the site already controls globally. Type inherits, so a global heading font reaches the module. What stays below is what is genuinely this component's business - how big a CARD heading is relative to a page heading, and how tightly it sets. The typeface is not. */ .nw-ibox__title{ line-height:1.06;margin:0;font-size:clamp(1.25rem,1.9vw,1.6rem); text-wrap:balance;display:block; } /* THE DEFAULT SIZE FOLLOWS THE HEADING LEVEL. Level and size are different things and the Typography field decouples them whenever that is wanted. But the level is the thing somebody sets first, and a Heading 2 opening a section rendering at card size means setting typography every single time - which is friction on the one module meant to be used everywhere. So the default scales, and overriding it is still one field. Coniferous is one weight, so these are all size and never weight. */ h1.nw-ibox__title{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.02} h2.nw-ibox__title{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.04} h4.nw-ibox__title{font-size:clamp(1.1rem,1.5vw,1.3rem)} h5.nw-ibox__title, h6.nw-ibox__title{font-size:var(--step-1);line-height:1.2} p.nw-ibox__title, span.nw-ibox__title, div.nw-ibox__title{font-size:var(--step-2);line-height:1.15} /* Every one of these is a field in the Style tab, so they are written out longhand: a border shorthand here would be reset wholesale by a single longhand override and the other two values would vanish with it. */ .nw-ibox__rule{ border:0; border-top-width:var(--nw-rule); border-top-style:solid; border-top-color:var(--camp-accent); width:2.6rem;margin:0; } /* The content is a real editor now, so this has to style whatever somebody types into it rather than one line of plain text. First and last child margins are collapsed because the stack's own gap already provides the space, and a leading

margin would double it. */ /* NO MAX-WIDTH BY DEFAULT, changed in 1.10.1, and this is the second time the same mistake has been made on this site. tokens.css 1.5.1 removed `p,li{max-width:var(--measure)}` for exactly this reason: an invisible cap means a passage in a wide box stops mid-row and wraps, and from inside Beaver Builder it looks like the text has a line break in it that will not go away. Nothing in the builder shows the constraint, so there is no way to find it from the outside. Carter hit it on a Lutheridge card on 21 Sep 2026 - 42ch was 492px inside a 1100px box, measured. Measure is still the right idea for a long passage, so it is still a field. It is a choice made where it helps, not a rule imposed where nobody asked. */ .nw-ibox__text{margin:0;font-size:var(--step-0);color:var(--ink-2)} .nw-ibox__text > :first-child{margin-top:0} .nw-ibox__text > :last-child{margin-bottom:0} .nw-ibox__text p{margin:0 0 .85em} .nw-ibox__text ul,.nw-ibox__text ol{margin:0 0 .85em;padding-left:1.2em} .nw-ibox__text li{margin:0 0 .3em} .nw-ibox__text li::marker{color:var(--camp-accent)} /* ADDED 1.26.2, with plugin 2.38.0: an icon as a list bullet. The plugin puts it at the start of each item and makes room for it; this hangs it back into that room, so a second line of the item lines up with the first line's words rather than running under the icon. Size and gap come from the Lists fields through two custom properties; unset, the icon is the text size and the gap is .6rem, the same values the plugin reserves. Camp color by default, the way the dots are. */ .nw-ibox__text .nw-ibox__bullet{ display:inline-block; width:var(--nw-ibox-li-size,1em); margin-left:calc(-1 * (var(--nw-ibox-li-size,1em) + var(--nw-ibox-li-gap,.6rem))); margin-right:var(--nw-ibox-li-gap,.6rem); font-size:var(--nw-ibox-li-size,1em); line-height:1; text-align:center; color:var(--camp-accent); } .nw-ibox__text a{color:inherit;text-underline-offset:.18em} .nw-ibox__text a:hover{text-decoration-color:var(--camp-accent)} /* ADDED with plugin 2.35.0: a link in the preheader or the heading takes the part's own color, the way a link in the content already does. The plugin now lets a link through in those two parts - an ACF link field, a URL connection, a shortcode that prints an anchor - and without this it took the skin's link and heading-link colors instead, so Color, Color on hover and the muted preheader ink never reached it, and a builder link color set to a camp accent would have put accent-colored words in a heading. Stated for hover and focus too, because the skin's a:hover and a:focus weigh the same as the plain rule would, and which won would depend on load order. Links were stripped from these parts before 2.35.0, so no saved box changes. */ .nw-ibox__prefix a,.nw-ibox__title a, .nw-ibox__prefix a:hover,.nw-ibox__title a:hover, .nw-ibox__prefix a:focus,.nw-ibox__title a:focus{color:inherit;text-underline-offset:.18em} .nw-ibox__text strong{font-weight:600} /* A heading typed inside the content is subordinate to the module's own heading, so it never competes with it. NO FONT-FAMILY AND NO COLOR - changed with plugin 2.35.0, and this is the same trap the module heading fell into in 1.11.0. This rule forced the primary font and ink, so the site's heading settings never reached these headings, and neither did the Content typeface or color set in the builder: on a dark box with a light body color they stayed near-black. Both are now left to the site, and the module writes the Content typeface and color onto them when those fields are set. WHAT THAT CHANGES, so nobody is surprised by it: a heading typed inside the content now takes the site's global heading typeface. On staging on 27 Sep 2026 the theme skin set that to Newsreader, so such a subhead moves from Plus Jakarta Sans to Newsreader - the same face the box's own heading already uses. The color barely moves: the skin's heading color is #1b1918 against the #1b1b18 this rule used to force. No typed subhead was found in the info boxes on the staging home or program page that day. Size, leading and spacing stay, because how big a subhead is inside a card is this component's business. NO WEIGHT EITHER - changed with plugin 2.35.0, after review. The 600 that used to sit here was paired with Plus Jakarta Sans, which has a SemiBold; left behind on its own it landed on the site's heading face instead, which overrode the builder's global heading weight and, on a face with no 600 (or Coniferous, which is one weight), made the browser fake the bold. So a typed subhead takes the site's heading weight, and when a Content typeface is set in the builder the plugin writes 600 with it, which puts back the semibold subhead every box had before. */ .nw-ibox__text h2,.nw-ibox__text h3,.nw-ibox__text h4{ font-size:var(--step-1); line-height:1.25;margin:1.2em 0 .4em; } /* ADDED with plugin 2.35.0: a YouTube or Vimeo address pasted into the body becomes an embed, and an embed arrives with a fixed pixel width. Held to the box, and a video sized by its own shape rather than by the 500x281 WordPress happens to ask for. */ .nw-ibox__text iframe{display:block;max-width:100%} .nw-ibox__text iframe[src*="youtube"], .nw-ibox__text iframe[src*="youtu.be"], .nw-ibox__text iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9} /* ---- the links. The text link is a growing arrow (see 1.26.1 below). ---- They sit in a row of their own, which is what makes two of them possible and what lets the pair be pinned to the bottom of an equal-height box together rather than one at a time. */ .nw-ibox__actions{ display:flex;flex-wrap:wrap;align-items:center; gap:var(--s-4);margin-top:var(--s-2); } /* CHANGED 1.26.1: the text link now looks like the one Carter typed into the Payment Plans box - semibold, body-text ink - and its line ends in an arrowhead. It still grows on hover; the head rides the end of the line. CHANGED 1.26.4: no longer italic by default. Carter's call: italic is set by hand in the Links typography where a box wants it, not forced on every link, because a clickable tile with a plain label is a link too. The arrow itself is optional from plugin 2.39.0 - "Arrow after the words" on the link. The arrow is the text's own color rather than the camp accent, so the Links > Text color field recolors the words and the arrow together, the way a typed arrow character would. Sized in em so it scales with the link's typography instead of staying 22px under a larger label. THE UNDERLINE ON HOVER was the theme skin's a:hover{text-decoration:underline}, which scores (0,1,1) against .nw-ibox__go's (0,1,0) - the same trap .nw-btn hit in tokens.css 1.18.0. The rule below scores (0,2,1): enough to beat the skin, and still below the builder's per-box color fields (0,3,0 and up), so a color set in the builder keeps winning on hover. */ .nw-ibox__go{ display:inline-flex;align-items:center;gap:.4em; font-weight:600;font-size:var(--step-0); color:var(--ink-2);text-decoration:none; } a.nw-ibox__go:hover, a.nw-ibox__go:focus-visible, a.nw-ibox__go:active{text-decoration:none;color:var(--ink-2)} .nw-ibox__arrow{position:relative;display:block;width:1.375em;border-top:.125em solid currentColor;transition:width .18s} .nw-ibox__arrow::after{ content:"";position:absolute;right:-.0625em;top:-.375em; border-left:.5em solid currentColor; border-top:.3125em solid transparent;border-bottom:.3125em solid transparent; } /* CHANGED with plugin 2.35.0: the arrow grows on keyboard focus too, the way the rest of the hover look now does (see HOVER AND FOCUS below). CHANGED again after review: keyboard focus is :has(:focus-visible), not :focus-within, so a mouse click that leaves focus on a link does not leave the box looking hovered; and it is a rule of its own, because a browser that cannot read :has() drops the whole rule it is in - the hover included. */ .nw-ibox__go:hover .nw-ibox__arrow, .nw-ibox__go:focus-visible .nw-ibox__arrow, .nw-ibox--stretch:hover .nw-ibox__arrow{width:2.375em} .nw-ibox--stretch:has(:focus-visible) .nw-ibox__arrow{width:2.375em} /* ---- surfaces. The card is the door's hover move, one step quieter. ---- */ .nw-ibox--card,.nw-ibox--outlined{--nw-ibox-pad:clamp(20px,2.6vw,32px);padding:var(--nw-ibox-pad)} /* CHANGED with plugin 2.35.0: the two surfaces no longer carry transitions of their own. Theirs covered only the theme's lift, so a hover background set in the builder snapped while the border beside it faded; the one rule in HOVER AND FOCUS below now covers every box and every property that changes. And the lift shows on keyboard focus in a linked box as well as on hover (audit N8). The focus ring is untouched: it is an outline, and this is a border and a shadow. */ .nw-ibox--card{ background:var(--surface);color:var(--ink); border-radius:var(--radius-lg);border-top:4px solid transparent; box-shadow:var(--shadow-card); } .nw-ibox--outlined{ background:transparent; border:1px solid var(--line);border-radius:var(--radius-lg); } /* CHANGED after review, with plugin 2.35.0: - Keyboard focus is :has(:focus-visible) in a rule of its own, for the reasons given at the arrow above. :focus-visible on the box itself covers the one case where the box IS the link. - The Outlined fill is background-COLOR, not the shorthand. The shorthand outweighed this box's own background and gradient from the builder and wiped both on hover; now a gradient stays, and the plugin writes a set background color again for these states so it stays too. - A card that is itself the link keeps the soft half of the site's focus ring beside its lift. The lift replaced it, so that card's ring was an outline only - visible, but thinner than everywhere else. */ .nw-ibox--card.nw-ibox--linked:hover, .nw-ibox--card.nw-ibox--linked:focus-visible{border-top-color:var(--camp-accent);box-shadow:var(--shadow-card-lift)} .nw-ibox--card.nw-ibox--linked:has(:focus-visible){border-top-color:var(--camp-accent);box-shadow:var(--shadow-card-lift)} a.nw-ibox--card.nw-ibox--linked:focus-visible{box-shadow:var(--shadow-card-lift),var(--focus)} .nw-ibox--outlined.nw-ibox--linked:hover, .nw-ibox--outlined.nw-ibox--linked:focus-visible{border-color:var(--camp-accent);background-color:var(--surface)} .nw-ibox--outlined.nw-ibox--linked:has(:focus-visible){border-color:var(--camp-accent);background-color:var(--surface)} /* ---- HOVER AND FOCUS, ADDED with plugin 2.35.0 ---- Every hover color in the builder now fades rather than snapping: 200ms, on the parts that have a hover state, and only on the properties those states change. The colors themselves are the module's, written per box and only when set; the motion lives here, once, so no box writes a transition of its own and an untouched box still writes nothing. Deliberately NOT box-shadow on the links. The site's focus ring is partly a box-shadow (tokens.css, :focus-visible), and a ring that faded in would lag behind the key press that moved it. Nor on the disc, whose shadow has no hover state to fade to. The box itself does take box-shadow, for the card's lift: a whole-box link's ring on the box is an outline, which never transitions, and in the one rare case where the box is itself the anchor (no label, heading or preheader) the soft shadow half of the site's ring fades in with the lift - its outline still appears at once. (CORRECTED after review: on a Card that half used to be replaced by the lift outright, not faded; the rule after the surfaces above now draws the two together.) The button takes filter as well: its standard hover is the theme's brightness filter, and without it the one hover a button has out of the box would still snap (audit R126). All of it stops for anybody who has asked their device to reduce motion, at the end of this block - tokens.css also shortens every transition then, but a component states its own, as the others in this file do. */ .nw-ibox{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease} .nw-ibox__mark{transition:color .2s ease,background-color .2s ease,border-color .2s ease} .nw-ibox__prefix, .nw-ibox__title, .nw-ibox__text, .nw-ibox__text a, .nw-ibox__text h1,.nw-ibox__text h2,.nw-ibox__text h3, .nw-ibox__text h4,.nw-ibox__text h5,.nw-ibox__text h6, .nw-ibox__go{transition:color .2s ease} /* CHANGED with plugin 2.35.0: transform joins the button's list, for the 3D presses below (audit R126). A button with no style set never moves, so for it this changes nothing. */ .nw-ibox__btn{transition:color .2s ease,background-color .2s ease,border-color .2s ease,filter .2s ease,transform .2s ease} @media (prefers-reduced-motion:reduce){ .nw-ibox,.nw-ibox__mark, .nw-ibox__prefix,.nw-ibox__title,.nw-ibox__text,.nw-ibox__text a, .nw-ibox__text h1,.nw-ibox__text h2,.nw-ibox__text h3, .nw-ibox__text h4,.nw-ibox__text h5,.nw-ibox__text h6, .nw-ibox__go,.nw-ibox__btn,.nw-ibox__arrow{transition:none} } /* ---- BUTTON STYLES, ADDED with plugin 2.35.0 ---- The looks behind the builder's Button style setting (audit R101, R104-R108, R113-R117). The plugin puts the style on the button as a class and writes only what depends on one box's own colors; the looks live here, once. A filled button - the default, and every button built before the setting existed - carries none of these classes, so nothing in this block reaches it except the two rules at the end, and both reproduce what it already did. No font and no size anywhere: a button's type is the site's and the builder's, and a style is not a reason to change it. The accent stays a fill and an outline. The words on a transparent or unfilled button are ink, and on the camp color they are the derived label color, as on every other button. */ /* An icon, on any style. Icon and words share the button's own flex row; the icon's side is the order the plugin prints them in. */ .nw-ibox__btn--has-icon{gap:.5em} .nw-ibox__btn-icon{flex:none;line-height:1} /* The layer behind the words - the transparent button's fill and the hover gradient - clipped to the button, with its z-index kept inside it. A button is never the whole-box link's stretched anchor (that is always the text link, and its overlay is an ::after, not this), so positioning a button here cannot shrink that overlay. */ .nw-ibox__btn--fill, .nw-ibox__btn--gradient{position:relative;isolation:isolate;overflow:hidden} .nw-ibox__btn--fill::before, .nw-ibox__btn--gradient::before{ content:"";position:absolute;inset:0;z-index:-1; border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .2s ease,transform .2s ease; } .nw-ibox__btn--fill:hover::before,.nw-ibox__btn--fill:focus-visible::before, .nw-ibox__btn--gradient:hover::before,.nw-ibox__btn--gradient:focus-visible::before{opacity:1;transform:none} /* Gradient. With no gradient picked, the button's own color under a soft sheen - lighter at the top, a touch darker at the foot - so it works on any camp's color, the way UABB draws its gradient button from the button color. Translucent at both ends, so the label keeps close to the contrast it has on the flat color. A gradient picked in the builder replaces it. */ .nw-ibox__btn--gradient{background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.12))} /* Transparent. An outline in the button color and ink words on whatever the button sits on. tokens.css gives every button's words the camp label color at the weight of ".fl-page a.nw-btn", so the ink is stated at that weight, and this file loads after it. A color set in the builder outranks both. */ .nw-ibox__btn--transparent{background:transparent;border:2px solid var(--camp-accent)} .fl-page a.nw-ibox__btn--transparent{color:var(--ink)} /* Transparent, filling on hover. Over the fill the words take the label color: tokens.css already does that on hover, and this adds keyboard focus, where the fill shows too. The standard darkening would dim the fill, so it is off. */ .fl-page a.nw-ibox__btn--fill:focus-visible, .fl-page a.nw-ibox__btn--fill-plain:focus-visible{color:var(--camp-accent-label)} .nw-ibox__btn--fill:hover,.nw-ibox__btn--fill:focus-visible, .nw-ibox__btn--fill-plain:hover,.nw-ibox__btn--fill-plain:focus-visible{filter:none} .nw-ibox__btn--fill::before{background-color:var(--camp-accent)} .nw-ibox__btn--fill-plain:hover,.nw-ibox__btn--fill-plain:focus-visible{background-color:var(--camp-accent)} /* Transparent, changing only its border. Nothing fills, so the words stay ink instead of taking the label color tokens.css gives every button on hover, which on an unfilled button could vanish into the page. */ .fl-page a.nw-ibox__btn--hover-border:hover, .fl-page a.nw-ibox__btn--hover-border:focus-visible{color:var(--ink)} /* The eight fills (the ninth choice, no animation, is --fill-plain or --hover-border above). Fade is the layer's own opacity. The others hold the layer at full strength, folded to nothing against an edge or along the middle, and unfold it; the diagonal is a wide skewed layer that sweeps across from the left. Leaving, each folds back the way it came. */ .nw-ibox__btn--fill-top::before, .nw-ibox__btn--fill-bottom::before, .nw-ibox__btn--fill-center-v::before{opacity:1;transform:scaleY(0)} .nw-ibox__btn--fill-left::before, .nw-ibox__btn--fill-right::before, .nw-ibox__btn--fill-center-h::before{opacity:1;transform:scaleX(0)} .nw-ibox__btn--fill-top::before{transform-origin:50% 0} .nw-ibox__btn--fill-bottom::before{transform-origin:50% 100%} .nw-ibox__btn--fill-left::before{transform-origin:0 50%} .nw-ibox__btn--fill-right::before{transform-origin:100% 50%} .nw-ibox__btn--fill-diagonal::before{opacity:1;left:-30%;right:-30%;transform:translateX(-100%) skewX(-30deg)} .nw-ibox__btn--fill-diagonal:hover::before, .nw-ibox__btn--fill-diagonal:focus-visible::before{transform:translateX(0) skewX(-30deg)} /* 3D. A hard 4px edge in a darker shade of the button color. The shade is mixed in the browser from --nw-ibox-btn-face, which the plugin sets from Button background and which otherwise falls back to the camp color - so it works for any color, including a builder global color PHP could not darken. The mix sits behind @supports rather than straight in the custom property: a custom property holding a function the browser cannot use poisons every declaration that reads it, and the edge would vanish instead of falling back to the plain dark one. An edge color picked in the builder is written into --nw-ibox-btn-edge by the plugin and outranks both. The site's focus ring is an outline and a shadow, and the edge is a shadow too, so on focus the two are written together rather than one replacing the other. */ .nw-ibox__btn--3d{ --nw-ibox-btn-edge:rgba(0,0,0,.3); --nw-ibox-3d-x:0px;--nw-ibox-3d-y:4px; box-shadow:var(--nw-ibox-3d-x) var(--nw-ibox-3d-y) 0 var(--nw-ibox-btn-edge); } @supports (color:color-mix(in srgb,red 50%,blue)){ .nw-ibox__btn--3d{--nw-ibox-btn-edge:color-mix(in srgb,var(--nw-ibox-btn-face,var(--camp-accent)) 72%,#000)} } .nw-ibox__btn--3d:focus-visible{box-shadow:var(--nw-ibox-3d-x) var(--nw-ibox-3d-y) 0 var(--nw-ibox-btn-edge),var(--focus)} /* The five movements (the sixth choice, none, has no class: the edge sits below and stays put). Each puts the edge on its side and presses the button halfway into it on hover or keyboard focus, and all the way, quickly, while it is held down. The edge fades with the press, which is the one place a link's shadow transitions - so on a 3D button the soft half of the focus ring fades in with it; the outline half still appears at once. */ .nw-ibox__btn--press-up{--nw-ibox-3d-y:-4px} .nw-ibox__btn--shift-left{--nw-ibox-3d-x:-4px;--nw-ibox-3d-y:0px} .nw-ibox__btn--shift-right{--nw-ibox-3d-x:4px;--nw-ibox-3d-y:0px} .nw-ibox__btn--shift-diagonal{--nw-ibox-3d-x:4px;--nw-ibox-3d-y:4px} .nw-ibox__btn--press{transition:color .2s ease,background-color .2s ease,border-color .2s ease,filter .2s ease,transform .2s ease,box-shadow .2s ease} .nw-ibox__btn--press:hover,.nw-ibox__btn--press:focus-visible{ transform:translate(calc(var(--nw-ibox-3d-x) / 2),calc(var(--nw-ibox-3d-y) / 2)); box-shadow:calc(var(--nw-ibox-3d-x) / 2) calc(var(--nw-ibox-3d-y) / 2) 0 var(--nw-ibox-btn-edge); } .nw-ibox__btn--press:focus-visible{box-shadow:calc(var(--nw-ibox-3d-x) / 2) calc(var(--nw-ibox-3d-y) / 2) 0 var(--nw-ibox-btn-edge),var(--focus)} .nw-ibox__btn--press:active{ transform:translate(var(--nw-ibox-3d-x),var(--nw-ibox-3d-y)); box-shadow:0 0 0 var(--nw-ibox-btn-edge);transition-duration:.05s; } /* Flat. The standard fill, with its icon revealed on hover or keyboard focus. Only the icon comes and goes - the words never leave - so the button always says what it does. Three reveals keep the icon's space, so nothing on the page moves; push starts with no space and lets the button grow into it. A touch screen has no hover to reveal anything with, so there the icon simply shows. The plugin only adds these classes to a button that has an icon. */ .nw-ibox__btn--reveal{overflow:hidden} .nw-ibox__btn--reveal .nw-ibox__btn-icon{opacity:0;transition:opacity .2s ease,transform .2s ease,max-width .2s ease} .nw-ibox__btn--reveal-from-left .nw-ibox__btn-icon{transform:translateX(-.75em)} .nw-ibox__btn--reveal-from-right .nw-ibox__btn-icon{transform:translateX(.75em)} .nw-ibox__btn--reveal-push{gap:0;transition:color .2s ease,background-color .2s ease,border-color .2s ease,filter .2s ease,transform .2s ease,gap .2s ease} .nw-ibox__btn--reveal-push .nw-ibox__btn-icon{max-width:0;overflow:hidden} .nw-ibox__btn--reveal:hover .nw-ibox__btn-icon, .nw-ibox__btn--reveal:focus-visible .nw-ibox__btn-icon{opacity:1;transform:none} .nw-ibox__btn--reveal-push:hover,.nw-ibox__btn--reveal-push:focus-visible{gap:.5em} .nw-ibox__btn--reveal-push:hover .nw-ibox__btn-icon, .nw-ibox__btn--reveal-push:focus-visible .nw-ibox__btn-icon{max-width:2em} @media (hover:none){ .nw-ibox__btn--reveal .nw-ibox__btn-icon{opacity:1;transform:none;max-width:none} .nw-ibox__btn--reveal-push{gap:.5em} } /* None of the movement for anybody who has asked for less. The states still change - a fill still appears, a 3D button still sits lower while pressed - they just do not travel there. Stated at the weight of the rules above, after them. */ @media (prefers-reduced-motion:reduce){ .nw-ibox__btn--press,.nw-ibox__btn--reveal-push, .nw-ibox__btn--fill::before,.nw-ibox__btn--gradient::before, .nw-ibox__btn--reveal .nw-ibox__btn-icon{transition:none} } /* The two rules a filled button meets too, and what each keeps the same. A PHONE. tokens.css makes every .nw-btn full width below 640px. On this module's buttons the plugin now does that itself, at Beaver Builder's own small breakpoint and only when "On a phone" says full width - which it does unless changed - so the fixed rule is lifted off them here. The plugin's rule is a class heavier than this one, so it wins wherever it is written. A TOUCH SCREEN. The 44px tap floor holds whatever Minimum height says: the larger of 44px and the builder's value, one element heavier than the plugin's own rule for this box so it wins. With no minimum set that is 44px, which is what .nw-btn already had. With a mouse, a shorter button is allowed; see the note on the field in the plugin. */ @media (max-width:639px){ .nw-ibox .nw-ibox__btn{width:auto} } @media (pointer:coarse){ .fl-module .nw-ibox a.nw-ibox__btn{min-height:max(var(--tap,44px),var(--nw-ibox-btn-h,0px))} } /* A full-width photo in a boxed info box runs to the edges of the box rather than sitting inside the padding with a margin of surface all round it. */ .nw-ibox--card>.nw-ibox__mark--wide, .nw-ibox--outlined>.nw-ibox__mark--wide{ width:calc(100% + (2 * var(--nw-ibox-pad))); margin:calc(-1 * var(--nw-ibox-pad)) 0 0 calc(-1 * var(--nw-ibox-pad)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; } /* ---- a row of boxes that lines up ------------------------------------- Beaver Builder puts two wrappers between the column and the module and neither carries a height, so a percentage height resolves against nothing. The first version of this rule did exactly that and the cards overlapped by 20px. The second added min-height:0 and squashed the tallest card until its text ran out through the bottom of it. Both were visible in the preview and neither was visible in the code, which is the argument for the preview. So: flex the whole way down, no percentage height and no min-height:0. Each wrapper becomes a column that grows, the box grows inside it, and the default min-height:auto on a flex item is what stops the tallest one being squashed. Where the chain is absent - a box on its own, or dropped into some other container - flex-grow is simply ignored and the box is its own height. That is the correct fallback, so nothing has to detect anything. */ .fl-col:has(.nw-ibox--equal){display:flex;flex-direction:column} .fl-col:has(.nw-ibox--equal)>.fl-col-content, .fl-module:has(.nw-ibox--equal), .fl-module-content:has(.nw-ibox--equal), .nw-ibox--equal{display:flex;flex-direction:column;flex:1 1 auto} .nw-ibox--equal .nw-ibox__body{flex:1 1 auto} .nw-ibox--equal .nw-ibox__actions{margin-top:auto;padding-top:var(--s-4)} /* ---- the whole box clickable, without a forty-word link ---------------- One anchor, stretched over the box by a pseudo-element. The heading and the paragraph stay out of the link text, so a screen reader announces the label and nothing else. The focus ring is moved to the box because a ring drawn around two words in the corner of a card does not read as "this card". */ a.nw-ibox{text-decoration:none;color:inherit} .nw-ibox--stretch{cursor:pointer} .nw-ibox--stretch .nw-ibox__go::after, .nw-ibox--stretch .nw-ibox__btn::after{content:"";position:absolute;inset:0} /* CHANGED after review, with plugin 2.35.0: the ring moves to the box only for the whole-box link itself - the labelled text link or the unlabelled cover. It used to be any link in the box, and since 2.35.0 lifted links in the content and heading above the overlay as links in their own right, tabbing onto one of them stripped its ring and drew one round the card, which told a keyboard user the card link had focus when another link did. Those links now keep the site's own ring. On a box built before 2.35.0 the whole-box link's ring is where it always was; a link typed in its content, which a keyboard could always reach, now shows its own ring instead of the card's. */ .nw-ibox--stretch:has(.nw-ibox__go:focus-visible, .nw-ibox__cover:focus-visible){outline:3px solid var(--ink);outline-offset:3px} .nw-ibox--stretch .nw-ibox__go:focus-visible, .nw-ibox--stretch .nw-ibox__cover:focus-visible{outline:none} /* CHANGED with plugin 2.35.0: a clickable box with no label no longer wraps the whole card in its link, which nested any link typed in the body inside it. The anchor is laid over the box instead, and its name - the heading - is hidden visually, so the card looks exactly as it did. Anything clickable inside the box sits ABOVE the overlay, or the overlay would swallow it: a link in the body, a link a variable put in the heading, an embedded video. isolation keeps the two z-index values local to the box so neither can climb over a menu or a header elsewhere on the page. The module's own link row is deliberately not lifted - its ::after IS the overlay, and giving the anchor a position would shrink that to the label. */ .nw-ibox--stretch{isolation:isolate} .nw-ibox--stretch .nw-ibox__go::after, .nw-ibox--stretch .nw-ibox__btn::after{z-index:1} .nw-ibox__cover{position:absolute;inset:0;z-index:1;border-radius:inherit} .nw-ibox__cover-name{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .nw-ibox--stretch .nw-ibox__text a, .nw-ibox--stretch .nw-ibox__text button, .nw-ibox--stretch .nw-ibox__text summary, .nw-ibox--stretch .nw-ibox__text iframe, .nw-ibox--stretch .nw-ibox__text video, .nw-ibox--stretch .nw-ibox__text audio, .nw-ibox--stretch .nw-ibox__prefix a, .nw-ibox--stretch .nw-ibox__title a{position:relative;z-index:2} /* The ring goes round the box, as it does for a labelled one. Where :has() is not supported the cover keeps the site's own focus shadow, so focus is never invisible. */ @supports selector(:has(a)){ .nw-ibox__cover:focus-visible{box-shadow:none} } /* ADDED with plugin 2.35.0, after review: what the BUILDER shows for an info box that has nothing to show on this page - every part empty, or its variable empty on the preview post. The plugin prints this only while Beaver Builder is open on the layout, so a visitor never sees it; it exists so the module is still there to find and click, rather than a strip of zero height. Deliberately not an .nw-ibox, so none of the box's own settings or the surfaces above reach it. */ .nw-ibox-empty{ min-height:48px;padding:var(--s-3) var(--s-4); border:1px dashed var(--line);border-radius:var(--radius); display:flex;align-items:center; } .nw-ibox-empty__note{margin:0;font-size:var(--step--1);color:var(--ink-muted)} /* ---------- print -------------------------------------------------------- */ /* CHANGED 1.37.0: the landform, doors and separator rules went with their modules (plugin 2.54.0). The info box keeps its print outline. */ @media print{ .nw-ibox--card,.nw-ibox--outlined{box-shadow:none;border:1px solid #000} } /* ========================================================================= UTILITIES — the ones worth having when composing in the builder. Put the name in a module's Advanced tab -> CSS Class. ========================================================================= */ /* ---------- measure and rhythm ----------------------------------------- */ .nw-measure { max-width:var(--measure) } /* running text, ~66ch */ .nw-measure-s { max-width:44ch } /* a standfirst */ .nw-narrow { max-width:30ch } /* a big pull paragraph */ .nw-gutter { padding-left:var(--nw-gutter);padding-right:var(--nw-gutter) } /* ---------- SECTION PADDING — put these on a ROW ------------------------ Three steps, each fluid. The clamp scales the padding with the viewport, so a row classed here needs no separate tablet and mobile values and cannot drift out of step with the rest of the site. Set row padding to 0 in Beaver Builder global settings and let these carry the rhythm. */ .nw-pad-s { padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px) } .nw-pad-m { padding-top:clamp(44px,7vw,96px);padding-bottom:clamp(44px,7vw,96px) } .nw-pad-l { padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,9vw,120px) } /* Directional, for where two sections meet and only one should breathe. */ .nw-pad-t-s { padding-top:clamp(28px,4vw,48px) } .nw-pad-t-m { padding-top:clamp(44px,7vw,96px) } .nw-pad-t-l { padding-top:clamp(56px,9vw,120px) } .nw-pad-b-s { padding-bottom:clamp(28px,4vw,48px) } .nw-pad-b-m { padding-bottom:clamp(44px,7vw,96px) } .nw-pad-b-l { padding-bottom:clamp(56px,9vw,120px) } .nw-pad-0 { padding-top:0;padding-bottom:0 } /* ---------- GAPS BETWEEN MODULES — put these on a MODULE ---------------- Margin-bottom only, deliberately. Spacing that comes from one direction never collapses unpredictably and never doubles where two modules meet. */ .nw-mb-xs { margin-bottom:var(--s-3) } .nw-mb-s { margin-bottom:var(--s-4) } .nw-mb-m { margin-bottom:var(--s-5) } .nw-mb-l { margin-bottom:var(--s-6) } .nw-mb-xl { margin-bottom:var(--s-7) } .nw-mb-0 { margin-bottom:0 } /* ---------- HEADER OVER A PHOTOGRAPH ----------------------------------- A transparent header is only legible until somebody swaps in a darker image. This lays a soft scrim behind the header content so the wordmark and nav hold on any photograph, without reading as a solid bar. */ .nw-header-scrim{ position:relative; background:linear-gradient(180deg,rgba(242,234,223,.92) 0%,rgba(242,234,223,.72) 60%,rgba(242,234,223,0) 100%); } /* Escape a constrained column and run to both edges of the window. */ .nw-bleed{width:100vw;margin-left:calc(50% - 50vw);max-width:none} /* ---------- surfaces ---------------------------------------------------- */ .nw-on-ground { background:var(--ground);color:var(--ink) } .nw-on-sunk { background:var(--surface-sunk);color:var(--ink) } .nw-on-surface { background:var(--surface);color:var(--ink) } .nw-on-ink { background:var(--ink);color:var(--ground) } .nw-on-ink a { color:var(--ground) } /* ---------- lines ------------------------------------------------------- */ .nw-top-rule { border-top:2px solid var(--ink) } .nw-top-hair { border-top:1px solid var(--line) } .nw-bottom-hair { border-bottom:1px solid var(--line) } /* A short accent rule as its own element - an empty HTML module will do. */ .nw-accent-rule { border:0;border-top:var(--nw-rule) solid var(--camp-accent);width:3rem;margin:var(--s-5) 0 } /* ---------- text tones -------------------------------------------------- */ .nw-ink-2 { color:var(--ink-2) } .nw-muted { color:var(--ink-muted) } .nw-tabular{ font-variant-numeric:tabular-nums } /* ---------- type roles, applied to any heading or text module ---------- */ .nw-display{ font-family:var(--font-accent);font-weight:500; font-size:clamp(2.7rem,8.4vw,6.6rem);line-height:.96;letter-spacing:-.028em; margin:0;text-wrap:balance;max-width:15ch; } .nw-display-s{ font-family:var(--font-accent);font-weight:500; font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.024em; margin:0;text-wrap:balance; } .nw-quote{ font-family:var(--font-accent);font-weight:500; font-size:var(--step-3);line-height:var(--lh-snug);max-width:36ch; } /* ========================================================================= BREAKPOINTS — two, and only two. 640 the phone/tablet line 1024 the tablet/desktop line These match the Medium and Small breakpoints set in Beaver Builder, so the builder previews break where the site actually breaks. Everything between them scales with clamp() rather than stepping, which is why the system needs no third tier: above 1024 the layout is settled and only the gutters grow. ========================================================================= */ /* ---------- a horizontal scroller for wide content --------------------- */ .nw-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- org-level pages -------------------------------------------- */ /* Nothing to do. With no camp resolved the body carries camp-org and the accent falls back to the NovusWay slate blue, so every class above works unchanged on the organization header, footer and home page. */ /* ========================================================================= THE DAY, AS A TIMELINE - .nw-tl CHANGED 1.37.0: what is left of WHAT A DAY LOOKS LIKE (1.14.0). [nw_day_plan] prints this timeline on the program layouts; the Program Day module that wrapped it in .nw-day was removed with plugin 2.54.0. ========================================================================= */ .nw-tl{ list-style:none;margin:0;padding:0 0 0 var(--s-5); border-left:2px solid var(--camp-accent); display:flex;flex-direction:column;gap:var(--s-4); max-width:46rem; } /* CHANGED 1.34.22 (Carter, 8 Oct: the program column ran long on phones): the time stays beside its activity at every width. Stacked, River Explorers' thirteen-row day was 746px on a 390px phone; side by side it is 408px. At 360 only "Group Interaction Course" takes a second line, beside its time. 640 and up is unchanged. */ .nw-tl__row{display:grid;grid-template-columns:4.25em minmax(0,1fr);gap:var(--s-3);align-items:baseline} @media (max-width:639px){ .nw-tl{gap:var(--s-3)} } @media (min-width:640px){ .nw-tl__row{grid-template-columns:6em 1fr;gap:var(--s-4)} } .nw-tl__time{ /* CHANGED 1.34.0: ink. The accent is a fill, never text - Bronze is 1.85:1 on the cream. */ font-size:var(--step--1);font-weight:600;color:var(--ink-2); font-variant-numeric:tabular-nums;letter-spacing:.01em; } .nw-tl__what{font-size:var(--step-0);color:var(--ink);line-height:var(--lh-body)} /* --------------------------------------------------------------------------- PROGRAM HERO - CLEARANCE FOR THE PINNED HEADER 1.15.0 The site header is position:fixed and 148px tall at desktop width, 174px at 1440px. Being fixed, it takes no space in the flow, so the first row of every page begins underneath it. On most pages that is invisible - the first row is white and its own padding carries it clear. On a program page the first row is the coloured hero, and the program title lands at y=40, behind the logo. The row does carry its own 200px top padding. Beaver Builder then writes a global responsive rule that beats it: @media (max-width:1440px){ .fl-row[data-node] > .fl-row-content-wrap { margin:0; padding:20px } } That selector scores (0,3,0) against the per-row .fl-node-xxxx rule's (0,2,0), so it wins, and being a shorthand it takes the top value down with it. Below 1440px - which is very nearly every visitor - the hero gets 20px and the program title is behind the header on all 55 pages. This takes back exactly one row: the first row of the singular layout, keyed on an ID that nothing Beaver Builder generates can outrank. Every other row on the site keeps whatever padding Carter sets in the builder. CHANGED IN 1.25.1: the clearance is now EXACTLY the header's height. The old clamp guessed at it and guessed high - 256px under a 149px header at desktop, which left a band of blank white between the header and the photo on every program page once the hero became a photo column. It also guessed low on phones, where the header is 195px and the clamp gave 135px. A small script in functions.php measures the real header and publishes --nw-header-h; the fixed value after it is only the no-script fallback. Any breathing room beyond the header is a builder decision, not the theme's. CHANGED 1.33.2: every program-hero rule in this file now also holds while a program template is open in Themer. The editor's page is the template, not a program, so it never carried single-program, and the hero was drawn there without the rules that finish it - the columns floated in the middle of the row and left a band of bare row under the photo, which Carter found on 2026-10-01. functions.php adds nw-program-layout to the editor's body for any Themer layout located on programs, the way Themer itself labels a layout located on downloads. ------------------------------------------------------------------------ */ :is(body.single-program, body.nw-program-layout) #fl-main-content > .fl-builder-content > .fl-row:first-child > .fl-row-content-wrap{ position:relative; } /* CHANGED 1.29.0: the clearance moved off the row and onto its columns. On the row it pushed the whole hero down, backgrounds included - so the photo and the paper panel began BELOW the header and you saw the top edge of the section sitting in the open, a band between the header's wave and the picture. On the columns, only their CONTENT is pushed down. The columns themselves still start at the top of the row, so the photo runs up behind the header and the section has no visible top edge at all. The title lands in exactly the same place either way. Direct children only. A nested column group inside the hero would take the clearance a second time and push the title down by two headers. CHANGED 1.33.0: every page, the header's shape counts, and only the columns that actually sit at the top. Found on 2026-10-01. It only ran on program pages. Every other page relied on a top padding typed into its first row, which can only be right at one width: the organization home's 250px cleared the header at 1024 and left the headline 51px underneath it at 1440. It cleared the header's box, which ends where the header's row ends. The header's bottom shape hangs below that row - 100px at desktop - so content stopped short of the shape. functions.php now publishes --nw-header-clear, measured to the bottom of the shape, and that is what this pushes by. It pushed every column group in the row, and every column in it. The organization hero is three column groups, one above the other, and on a phone a program hero's text column stacks under its photo; both were taking the full clearance again. Now only the row's first column group takes it, and functions.php marks any of its columns that has stacked below the top of the row as nw-col-under. Scope: the first row of the main layout on any page - a builder layout in the main content that is not itself inside a row, so a page drawn through a Post Content module never takes the clearance twice. Only while the header really overlays the page; a header in normal flow takes its own space. "First" means first of its kind, not first child: the editor slips a drop target in ahead of the first column group, and :first-child would miss the hero in exactly the place Carter is looking at it. The row's own top padding is not touched. It is now simply the gap between the bottom of the header and the hero's content, set in the builder like any other row. The column's top padding on this one row is the theme's. */ .fl-page:has(> [data-type="header"][data-overlay="1"]:not(.fl-builder-content-editing)) #fl-main-content .fl-builder-content:not(.fl-row .fl-builder-content) > .fl-row:not(.fl-row ~ .fl-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group:not(.fl-col-group ~ .fl-col-group) > .fl-col:not(.nw-col-under) > .fl-col-content{ /* CHANGED 1.34.0: a fallback that resembles a header. 20rem was 320px of blank page whenever the measuring script had not run. */ padding-top:var(--nw-header-clear, clamp(7rem, 16vw, 16rem)); } /* ADDED 1.36.9: HEADER IN NORMAL FLOW. Carter turned the NovusWay header's overlay off on 10 Oct 2026 (the camp headers still overlay that day). A header in normal flow takes its own space, so the rules above step aside - but its bottom shape still hangs below its row, about 100px at desktop, over the top of the first row. On /news/ the title only cleared it because the row's 80px top padding and the column's 20px happened to add up to the shape's 100px. So the same first row's content now clears the overhang alone (--nw-header-over, measured in functions.php at every width), and the row's own top padding is again simply the gap below the shape, as it is under an overlay header. The row's background still runs up under the shape. A header with no shape measures 0 and changes nothing. */ .fl-page:has(> [data-type="header"]:not([data-overlay="1"]):not(.fl-builder-content-editing)) #fl-main-content .fl-builder-content:not(.fl-row .fl-builder-content) > .fl-row:not(.fl-row ~ .fl-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group:not(.fl-col-group ~ .fl-col-group) > .fl-col:not(.nw-col-under) > .fl-col-content{ padding-top:var(--nw-header-over, 0px); } body:not(.single-fl-theme-layout) .fl-page:has(> [data-type="header"]:not([data-overlay="1"]):not(.fl-builder-content-editing)) > #fl-main-content:not(:has(.fl-builder-content)){ padding-top:var(--nw-header-over, 0px); } /* ADDED 1.33.0: a page with no builder layout at all - a plain page, search, a 404 - has no hero to push, so its content would start behind the header. The main content takes the clearance instead. Not while a Themer header or footer is open in the editor: the main content is empty there, and the footer editor shows the header in normal flow already. */ body:not(.single-fl-theme-layout) .fl-page:has(> [data-type="header"][data-overlay="1"]:not(.fl-builder-content-editing)) > #fl-main-content:not(:has(.fl-builder-content)){ padding-top:var(--nw-header-clear, clamp(7rem, 16vw, 16rem)); } /* ADDED 1.34.21 (polish pass, 7 Oct 2026): the photo band is framed on the part you can see. The band's photo runs up behind the header, as 1.29.0 intends, so Fill sized it to the whole row - header included - and the header then covered the top of the picture. On a phone the header is 237px of a 420px row: every band showed only the bottom third of its photo, which on most of the 69 programs was legs, torsos or swimsuits rather than faces. At desktop the eyes were cut on Whitewater Backpack, Blue Ridge Expeditions and Discoverers. The row keeps its photo and its own settings. This draws the same photo again over the part below the header's box, filled and centred there, so "Center" means the centre of what is visible. The header's bottom shape is translucent and still shows the band through it. Without the measuring script --nw-header-h is unset and the copy covers the whole row, exactly as before. Program and venue pages, first row, and only the band itself: a photo row with nothing in it. A venue with no photo skips the band, and its first row is then the paper-textured title row, which this leaves alone. */ :is(body.single-program, body.single-venue) .fl-page:has(> [data-type="header"][data-overlay="1"]:not(.fl-builder-content-editing)) #fl-main-content > .fl-builder-content > .fl-row.fl-row-bg-photo:first-child:not(:has(.fl-module)) > .fl-row-content-wrap::after{ content:""; position:absolute; left:0;right:0;bottom:0; top:var(--nw-header-h, 0px); background-image:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0; pointer-events:none; } /* REMOVED 1.34.2: the 1.30.0 rules that stretched the first row of a program page (display:flex on its content, align-items:stretch, flex on each column group). They lined the row's column groups up side by side, so a second group Carter added under the hero title was squeezed into a 40px empty strip at the right edge - invisible in the editor, and it made phones scroll sideways (3 Oct 2026). Measured on staging with the rules taken out at 375, 768, 1024 and 1440 wide: the published hero is pixel-identical, so they no longer did anything except hide what the builder showed. */ /* --------------------------------------------------------------------------- PROGRAM HERO - THE BAND BELONGS TO THE CAMP 1.16.0 The torn-paper graphic behind a program title was one file set on the row, which meant every Lutherock and Luther Springs program - twenty-nine of the fifty-five - wore Lutheridge's chestnut. A camp wearing another camp's colour is a brand error, and it is not one a visitor can be expected to forgive on the page that is supposed to be selling them that camp. The plugin publishes --camp-band and --camp-band-mobile from the camp term's own hero_media fields. This paints them over the row as an overlay rather than replacing the row's background, which is what makes the empty case safe: a camp with no image set leaves the variable undefined, the overlay resolves to no image, and whatever the builder set shows through untouched. ------------------------------------------------------------------------ */ :is(body.single-program, body.nw-program-layout) #fl-main-content > .fl-builder-content > .fl-row:first-child:not(.nw-hero-band) > .fl-row-content-wrap::before{ content:""; position:absolute; inset:0; background-image:var(--camp-band); background-size:cover; background-position:center; background-repeat:no-repeat; pointer-events:none; } @media (max-width:640px){ :is(body.single-program, body.nw-program-layout) #fl-main-content > .fl-builder-content > .fl-row:first-child:not(.nw-hero-band) > .fl-row-content-wrap::before{background-image:var(--camp-band-mobile, var(--camp-band))} } /* The hero's own content has to sit on top of that overlay. */ :is(body.single-program, body.nw-program-layout) #fl-main-content > .fl-builder-content > .fl-row:first-child:not(.nw-hero-band) > .fl-row-content-wrap > .fl-row-content{position:relative;z-index:1} /* --------------------------------------------------------------------------- CAMP MARK 1.16.0 [nw_camp_mark] renders the current camp's own mark. Sized off the text around it rather than in pixels, so it holds its proportion in a hero that scales, and centred on phones where the hero stacks to one column. ------------------------------------------------------------------------ */ .nw-camp-mark{ display:block; width:auto; max-width:100%; height:clamp(4.5rem, 9vw, 9rem); object-fit:contain; object-position:left center; } @media (max-width:640px){ .nw-camp-mark{object-position:center;margin-inline:auto} } /* --------------------------------------------------------------------------- REGISTRATION BUTTON 1.16.0 The wrapper only carries layout. Everything about how the button looks is .nw-btn in tokens.css, so this control and the one in the sessions block cannot drift apart - which matters, because on a closed program they say the same words and a parent may well see both. ------------------------------------------------------------------------ */ .nw-reg{display:block} .nw-reg--full .nw-reg__btn{width:100%} .nw-reg__btn{gap:var(--s-2)} .nw-reg__text{display:inline-block} .nw-reg__note{ margin:var(--s-3) 0 0; font-size:var(--step--1); color:var(--ink-muted); } /* The icon rides with the label rather than sitting in its own column, so a button that wraps keeps its arrow attached to the last word. */ .nw-reg__icon{flex:0 0 auto;line-height:1} .nw-reg__btn--icon-hover .nw-reg__icon{ opacity:0; max-width:0; transition:opacity .18s ease,max-width .18s ease; } .nw-reg__btn--icon-hover:hover .nw-reg__icon, .nw-reg__btn--icon-hover:focus-visible .nw-reg__icon{opacity:1;max-width:2em} /* Background animations. Beaver Builder's own button has one of these; this is NovusWay's version of the same control rather than a copy of its CSS. Both are decoration, so both stop entirely for anyone who has asked their machine to reduce motion - a hover effect is never worth overriding that. */ .nw-reg__btn--animfade{transition:background-color .25s ease,filter .25s ease} .nw-reg__btn--animsweep{position:relative;overflow:hidden;isolation:isolate} .nw-reg__btn--animsweep::after{ content:""; position:absolute; inset:0; z-index:-1; background:currentColor; opacity:.14; transform:translateX(-101%); transition:transform .32s cubic-bezier(.22,.61,.36,1); } .nw-reg__btn--animsweep:hover::after, .nw-reg__btn--animsweep:focus-visible::after{transform:translateX(0)} @media (prefers-reduced-motion:reduce){ .nw-reg__btn--icon-hover .nw-reg__icon{opacity:1;max-width:2em;transition:none} .nw-reg__btn--animfade, .nw-reg__btn--animsweep::after{transition:none} .nw-reg__btn--animsweep::after{display:none} } /* --------------------------------------------------------------------------- PROSE 1.20.0 For a block somebody actually reads a paragraph of - a program description, a camp story - rather than a label or a caption. Add the class nw-prose to the module. Opt-in on purpose. Body size, leading and family are set globally in the builder and the Customizer, and a stylesheet that redeclares them leaves a control sitting on Default while the page disagrees with it. This only applies where somebody has asked for it by name. The measure is the point. Program descriptions arrived at 14px with no max-width, which at a desktop column is well past a hundred characters a line; the eye loses the start of the next line and the block reads as a wall whatever the paragraph breaks say. ------------------------------------------------------------------------ */ .nw-prose{max-width:var(--measure)} .nw-prose p{ font-size:var(--step-1); line-height:1.65; color:var(--ink); margin:0 0 var(--s-5); } .nw-prose p:last-child{margin-bottom:0} .nw-prose p:first-child{margin-top:0} .nw-prose h2,.nw-prose h3,.nw-prose h4{margin:var(--s-7) 0 var(--s-3)} .nw-prose h2:first-child,.nw-prose h3:first-child,.nw-prose h4:first-child{margin-top:0} .nw-prose ul,.nw-prose ol{margin:0 0 var(--s-5);padding-left:var(--s-5)} .nw-prose li{font-size:var(--step-1);line-height:1.55;margin-bottom:var(--s-2)} .nw-prose li:last-child{margin-bottom:0} /* The opening line of a description is usually a standfirst in the camps' own copy - "A week that builds kids up - for life." Give it the weight it was written with. */ .nw-prose--lede p:first-child{ font-size:var(--step-2); line-height:1.5; color:var(--ink-2); } /* Full width, for a description sitting in a narrow column already. */ .nw-prose--wide{max-width:none} @media (max-width:640px){ .nw-prose p,.nw-prose li{font-size:var(--step-0)} .nw-prose--lede p:first-child{font-size:var(--step-1)} } /* --------------------------------------------------------------------------- OTHER WEEKS THAT FIT 1.21.0 Three suggestions at the foot of a program page. A card is one link, not a wrapped one: the week's name is the anchor and its ::after is stretched over the card, so a screen reader announces "Sky Explorers" rather than the name, the grades, the dates and the excerpt as one forty-word link. ------------------------------------------------------------------------ */ .nw-rel{display:block} .nw-rel__title{ font-family:var(--font-accent);font-size:var(--step-3);font-weight:500; line-height:1.2;color:var(--ink);margin:0 0 var(--s-3); } .nw-rel__intro{ font-size:var(--step-0);line-height:1.6;color:var(--ink-muted); margin:0 0 var(--s-5);max-width:var(--measure); } .nw-rel__list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr;gap:var(--s-4); } @media (min-width:640px){ .nw-rel--cards .nw-rel__list{grid-template-columns:repeat(3,minmax(0,1fr))} } .nw-rel--rows .nw-rel__list{grid-template-columns:1fr} .nw-rel__item{ position:relative;isolation:isolate; display:flex;flex-direction:column;gap:var(--s-2); padding:var(--s-5); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .16s ease,background-color .16s ease; } .nw-rel--rows .nw-rel__item{ flex-direction:row;flex-wrap:wrap;align-items:baseline; gap:var(--s-2) var(--s-5); } .nw-rel__name{ font-family:var(--font-accent);font-size:var(--step-1);font-weight:500; line-height:1.25;margin:0; } .nw-rel__name a{ color:var(--ink);text-decoration:none; } .nw-rel__name a::after{ content:"";position:absolute;inset:0;z-index:1; } /* CHANGED 1.34.0: hover underlines in the accent instead of turning the text the accent; the focus ring is ink, which every camp's ground clears. */ .fl-page .nw-rel__name a:hover, .fl-page .nw-rel__name a:focus-visible{text-decoration:underline;text-decoration-color:var(--camp-accent);text-decoration-thickness:2px;text-underline-offset:3px} .nw-rel__item:focus-within{outline:2px solid var(--ink);outline-offset:2px} .nw-rel__meta{ margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-muted); font-variant-numeric:tabular-nums; } .nw-rel__dot{margin:0 .4em;opacity:.55} .nw-rel__line{ margin:0;font-size:var(--step--1);line-height:1.55;color:var(--ink-2); } .nw-rel__all{margin:var(--s-5) 0 0;font-size:var(--step-0)} /* --------------------------------------------------------------------------- ADDED 1.22.0. A row that sets its own link and heading colours - a chestnut hero setting both to white - repaints anything placed inside it, including a card that brought its own white background. .fl-builder-content .fl-node-x a scores (0,2,1) against .nw-rel__name a at (0,2,0) and wins, and the week names rendered white on white. A component that owns its surface owns its text colour. Same guard tokens.css already carries for button labels. ------------------------------------------------------------------------ */ .fl-page .nw-rel__item .nw-rel__name, .fl-page .nw-rel__item .nw-rel__name a{color:var(--ink)} .fl-page .nw-rel__item .nw-rel__name a:hover, .fl-page .nw-rel__item .nw-rel__name a:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:var(--camp-accent);text-decoration-thickness:2px;text-underline-offset:3px} .fl-page .nw-rel__item .nw-rel__meta{color:var(--ink-muted)} .fl-page .nw-rel__item .nw-rel__line{color:var(--ink-2)} @media (prefers-reduced-motion:reduce){ .nw-rel__item{transition:none} } /* --------------------------------------------------------------------------- HELP WITH THE COST 1.23.0 Discounts, payment plans and camperships at the foot of a program page. The lines are a definition list because that is what they are - a label and the thing it labels - and a hairline between them rather than a card each, so the block reads as one offer and not five. ------------------------------------------------------------------------ */ .nw-cost{display:block} .nw-cost__title{ font-family:var(--font-accent);font-size:var(--step-3);font-weight:500; line-height:1.2;color:var(--ink);margin:0 0 var(--s-3); } .nw-cost__intro{ font-size:var(--step-0);line-height:1.6;color:var(--ink-2); margin:0 0 var(--s-5);max-width:var(--measure); } .nw-cost__list{ margin:0;display:grid;grid-template-columns:1fr;gap:var(--s-4) var(--s-7); } @media (min-width:640px){ .nw-cost__list{grid-template-columns:repeat(2,minmax(0,1fr))} } .nw-cost__row{ display:flex;flex-direction:column;gap:2px; padding-top:var(--s-3);border-top:1px solid var(--line); } .nw-cost__k{ font-size:var(--step--1);font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-muted);margin:0; } .nw-cost__v{margin:0;font-size:var(--step-0);line-height:1.6;color:var(--ink)} .nw-cost__v p{margin:0} .nw-cost__v p + p{margin-top:var(--s-2)} /* The door for the family none of the discounts reach. A panel, because it is the one item here that asks somebody to do something. */ .nw-cost__camp{ margin-top:var(--s-6);padding:var(--s-5); background:var(--surface-sunk);border-radius:var(--radius); display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3); } .nw-cost__camptitle{ font-family:var(--font-accent);font-size:var(--step-2);font-weight:500; line-height:1.25;color:var(--ink);margin:0; } .nw-cost__campnote{font-size:var(--step-0);line-height:1.6;color:var(--ink-2);max-width:var(--measure)} .nw-cost__campnote p{margin:0} .nw-cost__campnote p + p{margin-top:var(--s-3)} /* --------------------------------------------------------------------------- THE FACT STRIP 1.24.0 What the info boxes were doing, from a shortcode instead of a module, so a stock Text Editor can hold the whole strip. [nw_fact] prints a label and its value together or prints neither, which is the one thing a Text Editor with a typed label could not do - an unset lodging field left "Lodging" standing over nothing. The label sits above the value rather than beside it, because the values are different shapes: "5th-8th" is three characters and the dates are a list of nine lines, and a two-column grid has to size itself for the worst case on every row. ------------------------------------------------------------------------ */ /* CHANGED 1.34.0: sized by the space the strip has, not the screen. In the title row's 60% column four across squeezed every value onto two lines; now as many fit as can at a readable width - three there, more in a full row - and a phone shows two across rather than a tall single column. Dates run long, so they keep a row of their own everywhere. */ /* CHANGED 1.34.9: never on a module. "nw-facts" and "nw-dates" are also the switches typed into a UABB Advanced Posts module's Class field (plugin 2.45.0 / 2.49.11), and this grid on the module itself squeezed the More at [camp] cards into its first column (3 Oct 2026). The strip and the list are what these rules are for; the module is not. */ .nw-facts:not(.fl-module){ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5); grid-auto-flow:row dense; /* a short fact fills the gap beside one left alone by the dates row */ margin:0; } .nw-facts .nw-fact--dates{grid-column:1/-1} @media (min-width:900px){ .nw-facts:not(.fl-module){grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s-4) var(--s-6)} } .nw-fact{ display:flex;flex-direction:column;gap:var(--s-1); padding-top:var(--s-3);border-top:1px solid var(--line);min-width:0; } .nw-fact__k{ font-size:var(--step--1);font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-muted); } .nw-fact__v{font-size:var(--step-0);line-height:1.6;color:var(--ink);min-width:0} .nw-fact__v p{margin:0} .nw-fact__v p + p{margin-top:var(--s-2)} /* A shortcode that returns a list returns a real