/* ========================================================================= Nutraponics Global Chrome Header / mega menus / mobile drawer / sticky / footer. Every selector is namespaced .np-*. Nothing here targets a bare element, an Elementor class, or a generic name like .container / .header / .menu, so no page content can inherit from this file. Tokens live on body.np-chrome-on, which only exists on the 25 approved pages. ========================================================================= */ body.np-chrome-on { /* Brand tokens — Branding Design Workbook v1.0 / Handoff v3.0 */ --np-forest-deep: #12231C; --np-forest: #13412E; --np-pine: #2F6B4F; --np-sage: #B7C6B1; --np-olive: #7A8F63; --np-ivory: #F7F4EB; --np-paper: #FFFFFF; --np-charcoal: #1E1E1E; --np-muted: #5F655F; --np-border: #DFE7D6; /* Component tones measured from the approved reference boards. --np-olive-deep: footer CTA fill; white text on it clears WCAG AA (5.4:1), which the workbook Olive would not (3.0:1). --np-olive-light: olive accents on the dark footer. */ --np-olive-deep: #5C7020; --np-olive-light: #AEBE5E; --np-sage-panel: #E7E9D5; --np-hairline: rgba(255, 255, 255, .14); --np-band: 1320px; --np-gut: 32px; --np-r: 14px; --np-ease: 180ms cubic-bezier(.4, 0, .2, 1); --np-hdr-h: 64px; --np-util-h: 36px; --np-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --np-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; } /* Elementor wraps the Theme Builder template in its own divs. Neutralise their padding and make sure nothing clips the sticky header or the mega panels. */ body.np-chrome-on .elementor-location-header, body.np-chrome-on .elementor-location-footer { overflow: visible; } body.np-chrome-on .elementor-location-header .elementor-section, body.np-chrome-on .elementor-location-header .e-con, body.np-chrome-on .elementor-location-header .e-con-inner, body.np-chrome-on .elementor-location-header .elementor-widget-shortcode, body.np-chrome-on .elementor-location-header .elementor-widget-container, body.np-chrome-on .elementor-location-footer .elementor-section, body.np-chrome-on .elementor-location-footer .e-con, body.np-chrome-on .elementor-location-footer .e-con-inner, body.np-chrome-on .elementor-location-footer .elementor-widget-shortcode, body.np-chrome-on .elementor-location-footer .elementor-widget-container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; overflow: visible; } /* Sticky header. Two things had to be true and neither was: 1. The theme ships an inline `html, body { overflow-x: hidden }`. That makes a scroll container whose scrollHeight equals its clientHeight, so it never scrolls — and a sticky child measures against *that* scrollport, so it can never stick. `overflow-x: clip` clips exactly the same way without creating a scroll container, handing scrolling back to . Horizontal clipping is unaffected because still carries overflow-x: hidden. 2. Every Elementor wrapper between .np-header and is exactly header-height, so sticky on .np-header had no room to travel. The sticky element is therefore the location wrapper, which is a direct child of body. */ body.np-chrome-on { /* the theme's inline rule is `html, body { overflow-x: hidden !important }`, so matching !important is the only way to win. keeps its copy, so horizontal clipping still happens — only the redundant one on goes. */ overflow-x: clip !important; overflow-y: visible !important; } body.np-chrome-on .elementor-location-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 900; } body.np-chrome-on .elementor-location-header > .elementor { position: relative; z-index: 900; } /* ------------------------------------------------------------- kit reset The Elementor kit styles bare elements at `.elementor-kit-8346 button` (specificity 0-1-1), which outranks a plain `.np-*` class. Every rule in this file is emitted scoped under `body.np-chrome-on` (0-2-x) so the component always wins; this block clears the kit's button, field, heading and list chrome first, and the component rules below re-apply the approved styling. */ body.np-chrome-on .np-header :where(button, body.np-chrome-on input, body.np-chrome-on select, body.np-chrome-on textarea), body.np-chrome-on .np-footer :where(button, body.np-chrome-on input, body.np-chrome-on select, body.np-chrome-on textarea), body.np-chrome-on .np-drawer :where(button, body.np-chrome-on input, body.np-chrome-on select, body.np-chrome-on textarea) { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; margin: 0; padding: 0; min-height: 0; min-width: 0; line-height: normal; width: auto; } body.np-chrome-on .np-header :where(h1, body.np-chrome-on h2, body.np-chrome-on h3, body.np-chrome-on h4, body.np-chrome-on p), body.np-chrome-on .np-footer :where(h1, body.np-chrome-on h2, body.np-chrome-on h3, body.np-chrome-on h4, body.np-chrome-on p), body.np-chrome-on .np-drawer :where(h1, body.np-chrome-on h2, body.np-chrome-on h3, body.np-chrome-on h4, body.np-chrome-on p) { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; } body.np-chrome-on .np-header :where(ul, body.np-chrome-on ol, body.np-chrome-on li), body.np-chrome-on .np-footer :where(ul, body.np-chrome-on ol, body.np-chrome-on li), body.np-chrome-on .np-drawer :where(ul, body.np-chrome-on ol, body.np-chrome-on li) { margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-header :where(a), body.np-chrome-on .np-footer :where(a), body.np-chrome-on .np-drawer :where(a) { text-decoration: none; box-shadow: none; } body.np-chrome-on .np-header :where(img), body.np-chrome-on .np-footer :where(img), body.np-chrome-on .np-drawer :where(img) { max-width: 100%; height: auto; border-radius: 0; } /* --------------------------------------------------------------- primitives */ body.np-chrome-on .np-header *, body.np-chrome-on .np-footer *, body.np-chrome-on .np-drawer * { box-sizing: border-box; } /* The band is the content box itself — 1320 wide with NO inner padding — so the logo, nav and footer columns line up exactly with the 1320 page sections these pages use. Below 1320 + gutters it shrinks and the gutter becomes the margin. */ body.np-chrome-on .np-band { width: min(100% - (var(--np-gut) * 2), var(--np-band)); max-width: var(--np-band); margin-inline: auto; padding-inline: 0; } body.np-chrome-on .np-sr, body.np-chrome-on .np-skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body.np-chrome-on .np-skip:focus { position: fixed; top: 12px; left: 12px; z-index: 1200; background: var(--np-forest); color: #fff; padding: 12px 20px; border-radius: 8px; font: 600 15px/1 var(--np-sans); text-decoration: none; } body.np-chrome-on .np-i { flex: none; display: block; } /* Visible focus on every control — WCAG 2.2 AA, 2px Pine at 3px offset. */ body.np-chrome-on .np-header a:focus-visible, body.np-chrome-on .np-header button:focus-visible, body.np-chrome-on .np-header input:focus-visible, body.np-chrome-on .np-footer a:focus-visible, body.np-chrome-on .np-footer button:focus-visible, body.np-chrome-on .np-footer input:focus-visible, body.np-chrome-on .np-drawer a:focus-visible, body.np-chrome-on .np-drawer button:focus-visible { outline: 2px solid var(--np-pine); outline-offset: 3px; border-radius: 4px; } body.np-chrome-on .np-footer a:focus-visible, body.np-chrome-on .np-footer button:focus-visible, body.np-chrome-on .np-drawer a:focus-visible, body.np-chrome-on .np-drawer button:focus-visible { outline-color: var(--np-olive-light); } /* buttons ------------------------------------------------------------------ */ body.np-chrome-on .np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 26px; border: 1px solid transparent; border-radius: 6px; font: 600 15px/1 var(--np-sans); letter-spacing: .002em; text-decoration: none; cursor: pointer; transition: background-color var(--np-ease), color var(--np-ease), border-color var(--np-ease); white-space: nowrap; } body.np-chrome-on .np-btn--primary { background: var(--np-forest-deep); color: #fff; } body.np-chrome-on .np-btn--primary:hover { background: var(--np-forest); color: #fff; } body.np-chrome-on .np-btn--olive { background: var(--np-olive-deep); color: #fff; } body.np-chrome-on .np-btn--olive:hover { background: #6a8127; color: #fff; } body.np-chrome-on .np-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } body.np-chrome-on .np-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; } body.np-chrome-on .np-btn--onpromo { background: var(--np-forest-deep); color: #fff; } body.np-chrome-on .np-btn--onpromo:hover { background: var(--np-forest); } body.np-chrome-on .np-btn--block { width: 100%; } /* ========================================================================= HEADER ========================================================================= */ body.np-chrome-on .np-header { /* the sticky element is .elementor-location-header (see top of file); this only needs to out-stack .np-scrim, which shares that wrapper as a sibling. */ position: relative; z-index: 2; font-family: var(--np-sans); /* one permanent elevation: the header must look identical at every scroll position, so nothing is toggled on scroll. */ --np-shadow: 0 1px 0 var(--np-border), 0 6px 18px rgba(18, 35, 28, .05); } /* utility bar -------------------------------------------------------------- */ body.np-chrome-on .np-header__utility { background: var(--np-forest-deep); overflow: hidden; transition: height var(--np-ease), opacity var(--np-ease); height: var(--np-util-h); } body.np-chrome-on .np-header__utilrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--np-util-h); } body.np-chrome-on .np-header__promise { margin: 0; font-size: 12.5px; font-weight: 400; line-height: 1.2; color: rgba(255, 255, 255, .88); letter-spacing: .004em; } body.np-chrome-on .np-header__utilnav { display: flex; align-items: center; gap: 30px; flex: none; } body.np-chrome-on .np-header__utilnav a { display: inline-flex; align-items: center; height: var(--np-util-h); font-size: 12.5px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, .9); text-decoration: none; transition: color var(--np-ease); } body.np-chrome-on .np-header__utilnav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* main bar ----------------------------------------------------------------- */ body.np-chrome-on .np-header__main { position: relative; background: var(--np-paper); box-shadow: var(--np-shadow); transition: box-shadow var(--np-ease); } body.np-chrome-on .np-header__row { display: flex; align-items: center; height: var(--np-hdr-h); gap: 16px; flex-wrap: nowrap; transition: height var(--np-ease); } body.np-chrome-on .np-logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; text-decoration: none; } body.np-chrome-on .np-logo__img { display: block; width: 178px; height: auto; transition: width var(--np-ease); } /* primary nav -------------------------------------------------------------- */ body.np-chrome-on .np-header__nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; /* The actions cluster (CTA pill + three icons) is ~155px wider than the logo, so centring the nav in the space between them lands it ~78px left of the page centre and reads as left-aligned. This biases it back toward the centre of the 1320 band. Padding on a `justify-content: center` box moves the content by half its value, so 100px of padding is a 50px shift; the clamp ramps it in from 1178px up, which is the first width where the row has room to give. */ padding-left: clamp(0px, 100vw - 1178px, 100px); } body.np-chrome-on .np-nav { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-nav__item { margin: 0; padding: 0; } body.np-chrome-on .np-nav__btn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: var(--np-hdr-h); padding: 0; background: none; border: 0; cursor: pointer; font: 600 15px/1 var(--np-sans); color: var(--np-charcoal); letter-spacing: .002em; white-space: nowrap; transition: color var(--np-ease), height var(--np-ease); } body.np-chrome-on .np-nav__btn:hover { color: var(--np-forest); } body.np-chrome-on .np-nav__chev { transition: transform var(--np-ease); color: var(--np-muted); } body.np-chrome-on .np-nav__btn[aria-expanded="true"] { color: var(--np-forest); } body.np-chrome-on .np-nav__btn[aria-expanded="true"] .np-nav__chev { transform: rotate(180deg); color: var(--np-forest); } /* olive underline: open state, and a quieter one for the current page */ body.np-chrome-on .np-nav__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--np-olive); transform: scaleX(0); transition: transform var(--np-ease); } body.np-chrome-on .np-nav__btn[aria-expanded="true"]::after { transform: scaleX(1); } body.np-chrome-on .np-nav__item.is-current .np-nav__btn::after { transform: scaleX(1); background: var(--np-sage); } body.np-chrome-on .np-nav__item.is-current .np-nav__btn[aria-expanded="true"]::after { background: var(--np-olive); } /* right-hand actions -------------------------------------------------------- */ body.np-chrome-on .np-header__actions { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; /* keeps cart + burger on the right edge when the nav is hidden */ margin-left: auto; } body.np-chrome-on .np-header__cta { margin-right: 6px; padding: 0 26px; font-size: 14px; } body.np-chrome-on .np-header__ctaarrow { width: 16px; opacity: 1; } body.np-chrome-on .np-util { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--np-charcoal); font: 500 14px/1 var(--np-sans); transition: color var(--np-ease); } body.np-chrome-on .np-util:hover { color: var(--np-forest); } body.np-chrome-on .np-util__t { display: none; } body.np-chrome-on .np-util--cart { justify-content: center; } body.np-chrome-on .np-util__cartwrap { position: relative; display: block; } body.np-chrome-on .np-cart-badge { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--np-forest-deep); color: #fff; font: 700 11px/18px var(--np-sans); text-align: center; } body.np-chrome-on .np-cart-badge.is-empty { display: none; } body.np-chrome-on .np-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--np-charcoal); margin-right: -8px; } /* sticky / compact ---------------------------------------------------------- */ /* The resting header already uses the compact treatment, so becoming stuck only retracts the utility bar and adds the shadow — one 36px height change instead of four, which is what made the transition feel jumpy. */ body.np-chrome-on .np-header.is-stuck .np-header__utility { height: 0; opacity: 0; } /* ========================================================================= MEGA MENUS ========================================================================= */ body.np-chrome-on .np-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; width: min(100% - (var(--np-gut) * 2), var(--np-band)); max-width: var(--np-band); margin-inline: auto; padding-inline: 0; } body.np-chrome-on .np-mega[hidden] { display: none; } body.np-chrome-on .np-mega__inner { display: grid; gap: 0; background: var(--np-paper); border: 1px solid var(--np-border); border-top: 0; border-radius: 0 0 var(--np-r) var(--np-r); box-shadow: 0 22px 44px rgba(18, 35, 28, .10); padding: 26px 26px 28px; align-items: start; } body.np-chrome-on .np-mega--systems .np-mega__inner, body.np-chrome-on .np-mega--schools .np-mega__inner, body.np-chrome-on .np-mega--learn .np-mega__inner, body.np-chrome-on .np-mega--why .np-mega__inner { grid-template-columns: 1.04fr 1.14fr 1.20fr 1.22fr; } body.np-chrome-on .np-mega--solutions .np-mega__inner { grid-template-columns: minmax(0, 2fr) minmax(0, .95fr) minmax(0, 1fr); } body.np-chrome-on .np-mega__col { padding-inline: 18px; min-width: 0; } body.np-chrome-on .np-mega__col:first-child { padding-left: 8px; } body.np-chrome-on .np-mega__inner > .np-mega__col + .np-mega__col { border-left: 1px solid var(--np-border); } body.np-chrome-on .np-mega__title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 600 11px/1.25 var(--np-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--np-olive); } body.np-chrome-on .np-mega__titleico { color: var(--np-olive); display: flex; } body.np-chrome-on .np-mega__list { margin: 0; padding: 0; list-style: none; } /* one menu row */ body.np-chrome-on .np-mi { margin: 0; } body.np-chrome-on .np-mi__a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 7px 4px 7px 0; border-radius: 10px; text-decoration: none; color: var(--np-charcoal); transition: background-color var(--np-ease); } body.np-chrome-on .np-mi__a:hover { background: #F4F7EF; } body.np-chrome-on .np-mi__a:hover .np-mi__chev { transform: translateX(3px); color: var(--np-forest); } body.np-chrome-on .np-mi__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--np-sage-panel); color: var(--np-forest); } body.np-chrome-on .np-mi__thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 44px; } /* product geometry is never stretched */ body.np-chrome-on .np-mi__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } body.np-chrome-on .np-mi__body { display: block; min-width: 0; flex: 1; } body.np-chrome-on .np-mi__label { display: block; font: 600 13.2px/1.32 var(--np-sans); color: var(--np-charcoal); } body.np-chrome-on .np-mi__desc { display: block; margin-top: 2px; font: 400 11.4px/1.4 var(--np-sans); color: var(--np-muted); } body.np-chrome-on .np-mi__chev { flex: none; color: #A9B2A4; transition: transform var(--np-ease), color var(--np-ease); } /* solutions cards ------------------------------------------------------------ */ body.np-chrome-on .np-mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-right: 24px; min-width: 0; } body.np-chrome-on .np-scard { position: relative; display: flex; align-items: stretch; gap: 0; border: 1px solid var(--np-border); border-radius: 12px; overflow: hidden; text-decoration: none; background: var(--np-paper); transition: border-color var(--np-ease), box-shadow var(--np-ease); min-width: 0; } body.np-chrome-on .np-scard:hover { border-color: var(--np-sage); box-shadow: 0 8px 20px rgba(18, 35, 28, .08); } body.np-chrome-on .np-scard__media { flex: none; width: 38%; overflow: hidden; } body.np-chrome-on .np-scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } body.np-chrome-on .np-scard__body { display: block; padding: 14px 42px 14px 16px; min-width: 0; } body.np-chrome-on .np-scard__ico { display: block; color: var(--np-olive); margin-bottom: 5px; } body.np-chrome-on .np-scard__h { display: block; font: 600 17px/1.2 var(--np-serif); font-size: 19px; color: var(--np-charcoal); } body.np-chrome-on .np-scard__p { display: block; margin-top: 5px; font: 400 12.6px/1.45 var(--np-sans); color: var(--np-muted); } body.np-chrome-on .np-scard__go { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--np-forest-deep); color: #fff; transition: transform var(--np-ease); } body.np-chrome-on .np-scard:hover .np-scard__go { transform: translateX(3px); } body.np-chrome-on .np-mega__col--explore { border-left: 1px solid var(--np-border); } /* promo panel ---------------------------------------------------------------- */ body.np-chrome-on .np-promo { position: relative; overflow: hidden; border-radius: 12px; min-height: 100%; display: flex; align-items: stretch; margin-left: 26px; } body.np-chrome-on .np-promo__body { position: relative; z-index: 2; padding: 20px 14px 20px 20px; max-width: 60%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } body.np-chrome-on .np-promo__eyebrow { margin: 0 0 9px; font: 600 11px/1.3 var(--np-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--np-olive); } body.np-chrome-on .np-promo__h { margin: 0; font: 600 22px/1.2 var(--np-serif); color: var(--np-forest-deep); letter-spacing: -.004em; } body.np-chrome-on .np-promo__copy { margin: 9px 0 0; font: 400 12.4px/1.5 var(--np-sans); color: var(--np-muted); } body.np-chrome-on .np-promo .np-btn { margin-top: 16px; font-size: 13.4px; padding: 0 18px; min-height: 42px; } body.np-chrome-on .np-promo__media { position: absolute; inset: 0 0 0 auto; width: 40%; z-index: 1; overflow: hidden; } /* the image is positioned by its insets, not by a percentage height: inside a flex box with align-items other than stretch, `height:100%` resolves as auto and the plate collapses to its intrinsic aspect ratio. */ body.np-chrome-on .np-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; display: block; } body.np-chrome-on .np-promo--sage { background: var(--np-sage-panel); } /* the Systems promo is the only one with an eyebrow; it needs a wider text column to keep it on one line. Its plate is a right-aligned transparent cutout, so the small overlap is invisible. */ body.np-chrome-on .np-promo--sage .np-promo__body { max-width: 78%; padding-right: 10px; } body.np-chrome-on .np-promo--sage .np-promo__media { width: 34%; } body.np-chrome-on .np-promo--forest { background: var(--np-forest-deep); } body.np-chrome-on .np-promo--forest .np-promo__h, body.np-chrome-on .np-promo--forest .np-promo__eyebrow { color: #fff; } body.np-chrome-on .np-promo--forest .np-promo__copy { color: rgba(255, 255, 255, .82); } body.np-chrome-on .np-promo--forest .np-btn--onpromo { background: #fff; color: var(--np-forest-deep); } body.np-chrome-on .np-promo--forest .np-btn--onpromo:hover { background: var(--np-sage-panel); } body.np-chrome-on .np-promo--photo { background: var(--np-sage-panel); } body.np-chrome-on .np-promo--photo .np-promo__body { max-width: 54%; } body.np-chrome-on .np-promo--photo .np-promo__media { width: 46%; } /* the source is landscape; a portrait crop centred on the students, not the tower */ body.np-chrome-on .np-promo--photo .np-promo__media img { object-fit: cover; object-position: 32% 45%; } /* the Why panel's botanical art sits behind the copy, not beside it */ body.np-chrome-on .np-mega--why .np-promo__body { max-width: 68%; } body.np-chrome-on .np-mega--why .np-promo__media { width: 46%; opacity: .95; } body.np-chrome-on .np-mega--why .np-promo__media img { object-fit: cover; object-position: right center; } /* the plate carries its own dark ground; fade its left edge so no seam shows */ body.np-chrome-on .np-mega--why .np-promo__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 62%; z-index: 2; background: linear-gradient(90deg, var(--np-forest-deep) 0%, rgba(18, 35, 28, 0) 100%); } /* search disclosure ----------------------------------------------------------- */ body.np-chrome-on .np-search { position: absolute; top: 100%; left: 0; right: 0; z-index: 6; background: var(--np-paper); border-bottom: 1px solid var(--np-border); box-shadow: 0 18px 32px rgba(18, 35, 28, .08); } body.np-chrome-on .np-search[hidden] { display: none; } body.np-chrome-on .np-search__form { padding-block: 18px; } body.np-chrome-on .np-search__lab { display: block; margin-bottom: 8px; font: 600 11px/1 var(--np-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--np-olive); } body.np-chrome-on .np-search__row { display: flex; align-items: center; gap: 12px; } body.np-chrome-on .np-search__ico { color: var(--np-muted); flex: none; } body.np-chrome-on .np-search__input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--np-border); border-radius: 6px; font: 400 15px/1 var(--np-sans); color: var(--np-charcoal); background: #fff; } body.np-chrome-on .np-search__input:focus { border-color: var(--np-pine); outline: none; } body.np-chrome-on .np-search__close { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--np-muted); } /* scrim ------------------------------------------------------------------------ */ body.np-chrome-on .np-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(18, 35, 28, .34); opacity: 0; transition: opacity var(--np-ease); } body.np-chrome-on .np-scrim[hidden] { display: none; } body.np-chrome-on .np-scrim.is-on { opacity: 1; } /* ========================================================================= MOBILE DRAWER ========================================================================= */ body.np-chrome-on .np-drawer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--np-ivory); font-family: var(--np-sans); transform: translateX(-100%); transition: transform var(--np-ease); } body.np-chrome-on .np-drawer[hidden] { display: none; } body.np-chrome-on .np-drawer.is-open { transform: none; } body.np-chrome-on .np-drawer__bar { flex: none; display: flex; align-items: center; gap: 12px; height: 58px; padding-inline: 14px; background: var(--np-forest-deep); } body.np-chrome-on .np-drawer__close, body.np-chrome-on .np-drawer__cart { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: #fff; text-decoration: none; position: relative; flex: none; } body.np-chrome-on .np-drawer__cart .np-cart-badge { top: 2px; right: 2px; background: var(--np-olive-deep); } body.np-chrome-on .np-drawer__logo { margin-inline: auto; display: flex; align-items: center; } body.np-chrome-on .np-drawer__logo .np-logo__img { width: 168px; } body.np-chrome-on .np-drawer__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.np-chrome-on .np-acc { margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-acc__item { border-bottom: 1px solid var(--np-border); } body.np-chrome-on .np-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px 20px; background: none; border: 0; cursor: pointer; font: 600 16px/1.2 var(--np-sans); color: var(--np-charcoal); text-align: left; } body.np-chrome-on .np-acc__btn[aria-expanded="true"] { background: #EFF2E8; color: var(--np-forest); } body.np-chrome-on .np-acc__chev { transition: transform var(--np-ease); color: var(--np-muted); } body.np-chrome-on .np-acc__btn[aria-expanded="true"] .np-acc__chev { transform: rotate(180deg); } body.np-chrome-on .np-acc__panel { padding: 4px 0 12px; background: #FBFAF5; } body.np-chrome-on .np-acc__panel[hidden] { display: none; } body.np-chrome-on .np-acc__grp { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 0 20px; font: 600 11px/1.3 var(--np-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--np-olive); } body.np-chrome-on .np-acc__grpico { color: var(--np-olive); display: flex; } body.np-chrome-on .np-acc__list { margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-acc__list a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 20px; text-decoration: none; color: var(--np-charcoal); font: 500 14.5px/1.35 var(--np-sans); } body.np-chrome-on .np-acc__list a:active { background: #EFF2E8; } body.np-chrome-on .np-acc__ico { flex: none; display: flex; color: var(--np-pine); } body.np-chrome-on .np-acc__go { margin-left: auto; color: #A9B2A4; flex: none; } body.np-chrome-on .np-drawer__utils { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 6px 0 0; padding: 10px 8px; list-style: none; border-top: 1px solid var(--np-border); } body.np-chrome-on .np-drawer__util { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 52px; background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--np-charcoal); font: 500 11.5px/1 var(--np-sans); } body.np-chrome-on .np-drawer__util .np-i { color: var(--np-pine); } body.np-chrome-on .np-drawer__cta { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--np-paper); border-top: 1px solid var(--np-border); } body.np-chrome-on .np-drawer__cta .np-btn { min-height: 50px; font-size: 16px; } /* ========================================================================= FOOTER ========================================================================= */ body.np-chrome-on .np-footer { position: relative; background: var(--np-forest-deep); color: #fff; font-family: var(--np-sans); } /* CTA band ------------------------------------------------------------------- */ body.np-chrome-on .np-fcta { position: relative; overflow: hidden; border-bottom: 1px solid var(--np-hairline); } body.np-chrome-on .np-fcta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .69fr) minmax(0, 1.16fr); gap: 34px; align-items: center; padding-block: 34px; padding-right: 150px; } body.np-chrome-on .np-fcta__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 12px/1.2 var(--np-sans); letter-spacing: .125em; text-transform: uppercase; color: var(--np-olive-light); } body.np-chrome-on .np-fcta__leaf { display: flex; color: var(--np-olive-light); } body.np-chrome-on .np-fcta__h { margin: 0; font: 600 clamp(24px, 2.3vw, 32px)/1.18 var(--np-serif); color: #fff; letter-spacing: -.005em; } body.np-chrome-on .np-fcta__copy { margin: 0; font: 400 15px/1.62 var(--np-sans); color: rgba(255, 255, 255, .85); } body.np-chrome-on .np-fcta__act { position: relative; padding-left: 40px; border-left: 1px solid var(--np-hairline); } body.np-chrome-on .np-fcta__btns { display: flex; flex-wrap: wrap; gap: 12px; } /* both buttons on one row: 187.4 + 172.8 + 12 = 372.2 in a 385px column */ body.np-chrome-on .np-fcta__btns .np-btn { min-height: 48px; padding: 0 22px; } body.np-chrome-on .np-fcta__school { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 0; font: 400 14.5px/1.5 var(--np-sans); color: rgba(255, 255, 255, .9); } body.np-chrome-on .np-fcta__cap { display: flex; color: var(--np-olive-light); padding-top: 2px; } body.np-chrome-on .np-fcta__school a { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-weight: 500; } body.np-chrome-on .np-fcta__school a:hover { text-decoration: underline; text-underline-offset: 3px; } body.np-chrome-on .np-fcta__media { position: absolute; top: 0; right: 0; bottom: 0; width: 20%; max-width: 400px; z-index: 1; pointer-events: none; } body.np-chrome-on .np-fcta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; } /* fade the plate into the band so there is no hard seam */ body.np-chrome-on .np-fcta__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 80%; z-index: 2; background: linear-gradient(90deg, var(--np-forest-deep) 0%, var(--np-forest-deep) 26%, rgba(18, 35, 28, 0) 100%); } /* main ------------------------------------------------------------------------ */ body.np-chrome-on .np-fmain__grid { display: grid; grid-template-columns: 1.35fr 1.30fr .90fr 1.18fr 1.16fr 1.34fr; gap: 22px; padding-block: 46px 40px; align-items: start; } body.np-chrome-on .np-fbrand { padding-right: 18px; } body.np-chrome-on .np-fbrand__logo { display: flex; align-items: center; min-height: 44px; margin-bottom: 12px; } body.np-chrome-on .np-fbrand__logo .np-logo__img { width: 218px; } body.np-chrome-on .np-fbrand__desc { margin: 0 0 8px; font: 400 13.4px/1.6 var(--np-sans); color: rgba(255, 255, 255, .82); } body.np-chrome-on .np-fbrand__since { margin: 0 0 18px; font: 500 12.8px/1.5 var(--np-sans); color: var(--np-olive-light); } body.np-chrome-on .np-fbrand__contact { margin: 0 0 18px; padding: 0; list-style: none; } body.np-chrome-on .np-fbrand__contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font: 400 13px/1.5 var(--np-sans); color: rgba(255, 255, 255, .82); } body.np-chrome-on .np-fbrand__ci { display: flex; color: var(--np-olive-light); padding-top: 1px; flex: none; } body.np-chrome-on .np-fbrand__contact a { display: inline-block; padding-block: 3px; color: rgba(255, 255, 255, .82); text-decoration: none; } body.np-chrome-on .np-fbrand__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } body.np-chrome-on .np-fsocial { display: flex; gap: 9px; margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-fsocial a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background-color var(--np-ease), border-color var(--np-ease); } body.np-chrome-on .np-fsocial a:hover { background: var(--np-olive-deep); border-color: var(--np-olive-deep); } /* nav columns ------------------------------------------------------------------ */ body.np-chrome-on .np-fnav__h { margin: 0 0 14px; } /* the approved boards use an equal ~25px accent rule under every heading, not a text-width underline — so the rule is a pseudo-element, not a border. */ body.np-chrome-on .np-fnav__btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--np-olive-light); } body.np-chrome-on .np-fnav__btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 0 9px; background: none; border: 0; border-bottom: 0; padding-bottom: 11px; cursor: default; text-align: left; font: 600 12px/1.25 var(--np-sans); letter-spacing: .125em; text-transform: uppercase; color: #fff; width: -moz-fit-content; width: fit-content; min-width: 24px; } body.np-chrome-on .np-fnav__chev { display: none; } body.np-chrome-on .np-fnav__list { margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-fnav__list li { margin-bottom: 3px; } body.np-chrome-on .np-fnav__list a { display: inline-block; padding-block: 4px; font: 400 13px/1.42 var(--np-sans); color: rgba(255, 255, 255, .82); text-decoration: none; transition: color var(--np-ease); } body.np-chrome-on .np-fnav__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } body.np-chrome-on .np-fnav__list a[aria-current="page"] { color: var(--np-olive-light); } /* newsletter --------------------------------------------------------------------- */ body.np-chrome-on .np-fnews { padding-left: 24px; border-left: 1px solid var(--np-hairline); } body.np-chrome-on .np-fnews__h { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font: 600 12px/1.35 var(--np-sans); letter-spacing: .125em; text-transform: uppercase; color: var(--np-olive-light); } body.np-chrome-on .np-fnews__ico { display: flex; color: var(--np-olive-light); flex: none; } body.np-chrome-on .np-fnews__lead { margin: 0 0 6px; font: 600 14.5px/1.4 var(--np-sans); color: #fff; } body.np-chrome-on .np-fnews__copy { margin: 0 0 14px; font: 400 13.4px/1.55 var(--np-sans); color: rgba(255, 255, 255, .78); } body.np-chrome-on .np-fnews__input { display: block; width: 100%; height: 46px; padding: 0 14px; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background: rgba(255, 255, 255, .06); color: #fff; font: 400 14.5px/1 var(--np-sans); } body.np-chrome-on .np-fnews__input::placeholder { color: rgba(255, 255, 255, .55); } body.np-chrome-on .np-fnews__input:focus { outline: 2px solid var(--np-olive-light); outline-offset: 2px; border-color: transparent; } body.np-chrome-on .np-fnews__go { width: 100%; min-height: 48px; } body.np-chrome-on .np-fnews__goshort { display: none; } body.np-chrome-on .np-fnav__abbr { display: none; } body.np-chrome-on .np-fnews__msg { margin: 10px 0 0; font: 500 13px/1.45 var(--np-sans); color: var(--np-olive-light); } body.np-chrome-on .np-fnews__msg.is-err { color: #F3B7A8; } body.np-chrome-on .np-fnews__msg:empty { display: none; } /* bottom bar ----------------------------------------------------------------------- */ body.np-chrome-on .np-fbot { border-top: 1px solid var(--np-hairline); } body.np-chrome-on .np-fbot__grid { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-block: 18px; } body.np-chrome-on .np-fbot__copy { margin: 0; font: 400 12.8px/1.55 var(--np-sans); color: rgba(255, 255, 255, .68); } body.np-chrome-on .np-fbot__links { display: flex; flex-wrap: wrap; gap: 22px; } body.np-chrome-on .np-fbot__links a { display: inline-block; padding-block: 7px; font: 400 12.8px/1 var(--np-sans); color: rgba(255, 255, 255, .78); text-decoration: none; } body.np-chrome-on .np-fbot__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } body.np-chrome-on .np-fpay { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-fpay li { display: flex; align-items: center; justify-content: center; width: 40px; height: 26px; background: #fff; border-radius: 4px; padding: 2px 3px; } body.np-chrome-on .np-fpay img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } /* ========================================================================= RESPONSIVE ========================================================================= */ /* --- narrow desktop: tighten before anything can collide ------------------ */ @media (max-width: 1365px) { body.np-chrome-on { --np-gut: 26px; } /* keeps the two CTA buttons on one row down to ~1230 */ body.np-chrome-on .np-fcta__btns .np-btn { padding: 0 16px; font-size: 14px; } body.np-chrome-on .np-nav { gap: 24px; } body.np-chrome-on .np-header__actions { gap: 16px; } body.np-chrome-on .np-nav__btn { font-size: 14.5px; } body.np-chrome-on .np-logo__img { width: 190px; } body.np-chrome-on .np-btn { padding: 0 22px; } } @media (max-width: 1200px) { /* at the bottom of this range the row has to hold the full inline nav between the logo and the CTA; without this compaction the first item laps the logo. */ body.np-chrome-on .np-nav { gap: 12px; } body.np-chrome-on .np-nav__btn { font-size: 13.5px; } body.np-chrome-on .np-header__actions { gap: 12px; } body.np-chrome-on .np-header__cta { padding: 0 18px; } body.np-chrome-on .np-util__t { display: none; } body.np-chrome-on .np-util--cart .np-util__t { display: none; } body.np-chrome-on .np-logo__img { width: 150px; } body.np-chrome-on .np-mega__col { padding-inline: 18px; } body.np-chrome-on .np-promo { margin-left: 18px; } body.np-chrome-on .np-promo__h { font-size: 26px; } } /* --- tablet: nav stays, mega menus compact -------------------------------- */ @media (max-width: 1023px) { body.np-chrome-on { --np-gut: 24px; --np-hdr-h: 68px; } body.np-chrome-on .np-header__promise { font-size: 11.6px; } body.np-chrome-on .np-header__utilnav { gap: 20px; } body.np-chrome-on .np-header__utilnav a { font-size: 11.6px; } body.np-chrome-on .np-header__row { gap: 10px; } body.np-chrome-on .np-nav { gap: 10px; } body.np-chrome-on .np-nav__btn { font-size: 12.6px; gap: 4px; } body.np-chrome-on .np-header__cta { font-size: 12.8px; padding: 0 16px; min-height: 44px; margin-right: 0; } body.np-chrome-on .np-header__actions { gap: 10px; } body.np-chrome-on .np-logo__img { width: 148px; } body.np-chrome-on .np-burger { display: inline-flex; } /* compact mega: three columns wrap to two, promo drops under */ body.np-chrome-on .np-mega--systems .np-mega__inner, body.np-chrome-on .np-mega--schools .np-mega__inner, body.np-chrome-on .np-mega--learn .np-mega__inner, body.np-chrome-on .np-mega--why .np-mega__inner { grid-template-columns: 1fr 1fr 1fr; } body.np-chrome-on .np-mega--solutions .np-mega__inner { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } body.np-chrome-on .np-mega__inner { padding: 20px 18px 22px; gap: 0 0; } body.np-chrome-on .np-mega__col { padding-inline: 14px; } body.np-chrome-on .np-mega__col:first-child { padding-left: 4px; } body.np-chrome-on .np-promo { grid-column: 1 / -1; margin: 16px 4px 0; min-height: 0; } body.np-chrome-on .np-promo__body { max-width: 58%; padding: 18px; } body.np-chrome-on .np-promo__h { font-size: 23px; } body.np-chrome-on .np-mega--why .np-promo__body { max-width: 62%; } body.np-chrome-on .np-mega__cards { grid-template-columns: 1fr; gap: 10px; padding-right: 14px; } body.np-chrome-on .np-scard__media { width: 26%; } body.np-chrome-on .np-scard__h { font-size: 17px; } body.np-chrome-on .np-scard__body { padding: 12px 40px 12px 14px; } body.np-chrome-on .np-mi__desc { display: none; } body.np-chrome-on .np-mi__ico, body.np-chrome-on .np-mi__thumb { width: 34px; height: 38px; } body.np-chrome-on .np-mi__ico { height: 34px; border-radius: 8px; } body.np-chrome-on .np-mi__label { font-size: 13.4px; } body.np-chrome-on .np-mega__title { font-size: 10.6px; } /* footer */ body.np-chrome-on .np-fcta__grid { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; padding-right: 120px; } body.np-chrome-on .np-fcta__grid > * { max-width: 640px; } body.np-chrome-on .np-fcta__act { padding-left: 0; border-left: 0; } body.np-chrome-on .np-fcta__h { font-size: 24px; } body.np-chrome-on .np-fcta__copy { font-size: 14px; } body.np-chrome-on .np-fcta__media { width: 22%; } body.np-chrome-on .np-fmain__grid { grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: 22px; padding-block: 34px 30px; } body.np-chrome-on .np-fbrand { padding-right: 12px; } body.np-chrome-on .np-fnews { padding-left: 18px; } body.np-chrome-on .np-fbrand__logo .np-logo__img { width: 186px; } body.np-chrome-on .np-fnav__list a, body.np-chrome-on .np-fbrand__desc, body.np-chrome-on .np-fbrand__contact li { font-size: 13px; } body.np-chrome-on .np-fnews__copy { font-size: 12.6px; } } /* tablet: four nav columns + newsletter need their own row rules */ @media (min-width: 768px) and (max-width: 1023px) { /* Approved tablet board: brand + four nav columns + newsletter stay on one row, with the longest labels abbreviated so nothing wraps. */ body.np-chrome-on .np-fmain__grid { grid-template-columns: 1.44fr 1.04fr .92fr 1.02fr 1fr 1.22fr; gap: 14px; } body.np-chrome-on .np-fnav__full { display: none; } body.np-chrome-on .np-fnav__abbr { display: inline; } body.np-chrome-on .np-fnav__list a { font-size: 11.6px; } body.np-chrome-on .np-fnav__btn { font-size: 10.4px; letter-spacing: .07em; } body.np-chrome-on .np-fbrand { padding-right: 6px; } body.np-chrome-on .np-fbrand__logo .np-logo__img { width: 150px; } body.np-chrome-on .np-fbrand__desc, body.np-chrome-on .np-fbrand__contact li { font-size: 11.8px; } body.np-chrome-on .np-fbrand__since { font-size: 11.6px; } body.np-chrome-on .np-fnews { padding-left: 14px; } body.np-chrome-on .np-fnews__h { font-size: 10.4px; } body.np-chrome-on .np-fnews__lead { font-size: 12.6px; } body.np-chrome-on .np-fnews__copy { font-size: 11.4px; } body.np-chrome-on .np-fnews__input { height: 42px; font-size: 12.6px; } body.np-chrome-on .np-fnews__go { min-height: 42px; font-size: 12.4px; padding: 0 10px; } body.np-chrome-on .np-fsocial { gap: 6px; } body.np-chrome-on .np-fsocial a { width: 28px; height: 28px; } } /* --- 768-939: the inline nav can no longer fit beside the CTA and the utility icons, so it folds into the drawer. Everything else stays. */ @media (max-width: 939px) { body.np-chrome-on .np-header__nav { display: none; } body.np-chrome-on .np-mega { display: none !important; } body.np-chrome-on .np-logo__img { width: 156px; } body.np-chrome-on .np-header__cta { font-size: 13.4px; padding: 0 20px; } } /* --- mobile ------------------------------------------------------------------ */ @media (max-width: 767px) { body.np-chrome-on { --np-gut: 20px; --np-hdr-h: 62px; --np-util-h: 0px; } /* the utility bar's links live in the drawer at this width */ body.np-chrome-on .np-header__utility { display: none; } body.np-chrome-on .np-header__nav, body.np-chrome-on .np-header__cta, body.np-chrome-on .np-util:not(.np-util--cart) { display: none; } body.np-chrome-on .np-header__row { gap: 8px; } body.np-chrome-on .np-logo__img { width: 158px; } body.np-chrome-on .np-header__actions { gap: 4px; } /* below 768 the cart stands next to the 24px burger rather than the 20px search/account pair, so it carries a little more size. */ body.np-chrome-on .np-util--cart .np-i--cart { width: 21px; height: 21px; } body.np-chrome-on .np-util--cart .np-util__t { display: none; } body.np-chrome-on .np-burger { display: inline-flex; } body.np-chrome-on .np-mega { display: none !important; } body.np-chrome-on .np-search__lab { display: none; } body.np-chrome-on .np-search__go { display: none; } body.np-chrome-on .np-search__form { padding-block: 12px; } /* footer */ body.np-chrome-on .np-fcta__grid { padding-block: 20px; gap: 12px; padding-right: 0; } body.np-chrome-on .np-fcta__h { font-size: 21px; } body.np-chrome-on .np-fcta__copy { display: none; } body.np-chrome-on .np-fcta__btns .np-btn { flex: 1 1 auto; min-height: 46px; font-size: 14px; padding: 0 16px; } body.np-chrome-on .np-fcta__school { font-size: 13px; margin-top: 12px; } body.np-chrome-on .np-fcta__school br { display: none; } body.np-chrome-on .np-fcta__media { display: none; } body.np-chrome-on .np-fmain__grid { display: block; padding-block: 26px 20px; } body.np-chrome-on .np-fbrand { padding-right: 0; } body.np-chrome-on .np-fbrand__logo .np-logo__img { width: 148px; } body.np-chrome-on .np-fsocial { gap: 6px; } body.np-chrome-on .np-fsocial a { width: 30px; height: 30px; } body.np-chrome-on .np-fbrand__contact li { font-size: 13px; } body.np-chrome-on .np-fbrand__desc { display: none; } body.np-chrome-on .np-fbrand__since { display: none; } body.np-chrome-on .np-fbrand { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 10px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--np-hairline); margin-bottom: 4px; } body.np-chrome-on .np-fbrand__logo { grid-column: 1; grid-row: 1; margin-bottom: 2px; } body.np-chrome-on .np-fsocial { grid-column: 2; grid-row: 1; align-self: center; justify-content: flex-end; } body.np-chrome-on .np-fbrand__contact { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; } /* nav groups become accordions */ body.np-chrome-on .np-fnav { border-bottom: 1px solid var(--np-hairline); } body.np-chrome-on .np-fnav__h { margin: 0; } body.np-chrome-on .np-fnav__btn { width: 100%; min-width: 0; min-height: 50px; padding: 14px 0; border-bottom: 0; cursor: pointer; } body.np-chrome-on .np-fnav__chev { display: block; color: var(--np-olive-light); } body.np-chrome-on .np-fnav__btn[aria-expanded="true"] .np-fnav__chev { transform: rotate(180deg); } body.np-chrome-on .np-fnav__list { padding: 0 0 14px; } body.np-chrome-on .np-fnav__list[hidden] { display: none; } body.np-chrome-on .np-fnav__list li { margin-bottom: 12px; } body.np-chrome-on .np-fnav__list a { font-size: 14px; } body.np-chrome-on .np-fnews { padding: 18px 0 4px; border-left: 0; border-bottom: 1px solid var(--np-hairline); display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; } body.np-chrome-on .np-fnews__h { grid-column: 1 / -1; margin: 0; } body.np-chrome-on .np-fnews__lead, body.np-chrome-on .np-fnews__copy { display: none; } body.np-chrome-on .np-fnews__form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; } body.np-chrome-on .np-fnews__input { margin-bottom: 0; } body.np-chrome-on .np-fnews__go { width: auto; min-height: 46px; padding: 0 18px; } body.np-chrome-on .np-fnews__golong { display: none; } body.np-chrome-on .np-fnews__goshort { display: inline; } body.np-chrome-on .np-fnews__msg { grid-column: 1 / -1; margin: 0; } body.np-chrome-on .np-fbot__grid { padding-block: 16px; gap: 12px; flex-direction: column; align-items: flex-start; } body.np-chrome-on .np-fbot__links { gap: 14px; } body.np-chrome-on .np-fbot__links a { font-size: 12.2px; } body.np-chrome-on .np-fbot__copy { font-size: 12.2px; } body.np-chrome-on .np-fpay { flex-wrap: wrap; } body.np-chrome-on .np-fpay li { width: 38px; height: 25px; } } @media (max-width: 359px) { body.np-chrome-on { --np-gut: 16px; } body.np-chrome-on .np-logo__img { width: 142px; } body.np-chrome-on .np-fnews__form { grid-template-columns: 1fr; } body.np-chrome-on .np-fnews__go { width: 100%; } body.np-chrome-on .np-fcta__btns { flex-direction: column; } body.np-chrome-on .np-fcta__btns .np-btn { width: 100%; } } /* ========================================================================= REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { body.np-chrome-on .np-header, body.np-chrome-on .np-header *, body.np-chrome-on .np-footer *, body.np-chrome-on .np-drawer, body.np-chrome-on .np-drawer *, body.np-chrome-on .np-scrim { transition: none !important; animation: none !important; } body.np-chrome-on .np-drawer { transform: none; } }