/* Theme Name: Kadence Child — Northshore Parent Template: kadence Description: Northshore Parent customizations. All NP theme changes live here. Version: 3.6.0 */ /* NP brand tokens */ :root { --np-dark-blue:#165272; --np-grey-blue:#5894b4; --np-aqua:#7ebcc7; --np-aqua-2:#b1e1ea; --np-aqua-3:#d8eff3; --np-aqua-4:#ebf7fc; --np-orange:#e5892a; --np-gold:#e5b02c; --np-cream:#faf1db; --np-ink:#2f4858; --np-muted:#5f7480; /* The one keyboard-focus ring colour, sitewide -- see "Focus states (sitewide)" below. */ --np-focus-ring: var(--np-dark-blue); /* Every heading's colour, sitewide -- see "Typography: headlines" below. Reads through --global-palette3 (a Kadence Customizer navy slot) rather than a literal, since that's the exact value .entry-title was already computing by inheriting Kadence's own default h1 colour -- naming it here makes that the deliberate site-wide value instead of an unstyled coincidence a future Customizer change could quietly break apart again. */ --np-heading-color: var(--global-palette3, #10344a); /* A light, neutral blue-grey -- deliberately not from the --np-aqua family, which reads as this site's own vivid accent rather than a quiet ground. The blog post hero's category chips' own background; see "Blog post hero" below. */ --np-hero-chip-bg: #dde6ec; /* A true neutral grey, not blue-tinted like the tokens above -- the category/similar-posts carousel arrows' own hover ground (a plain light grey, as asked, not the listicle carousel's own translucent-navy hover tint). See ".np-carousel-btn" below. */ --np-carousel-btn-hover-bg: #f0f0f0; /* One step darker than the hover ground above, so the same stroke reads against either background it sits on (idle white, or the grey the circle turns to on hover) -- a belt-and-suspenders outline for the white circle against a white page, independent of the drop shadow already doing that job. */ --np-carousel-btn-border: #dcdcdc; /* The display face, in one place. It was written out fifteen times across this file, which meant changing the headline font was fifteen edits and any one of them could be missed. */ --np-font-condensed: "acumin-pro-condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif; /* The body face, tokenised for the same reason as the condensed one above -- so anything that needs "the site's regular text font" (the listicle template, most immediately) has one name to ask for rather than a literal to keep in step with the `body` rule below. */ --np-font-body: "acumin-pro", "Helvetica Neue", Arial, sans-serif; /* The site's card-image corner, promoted here from a local declaration on the homepage card rule (below) once the listicle template became a second consumer that needed the same value -- one token rather than two 8px literals that could drift apart. */ --np-img-radius: 8px; /* Family Favorites colours live here, at :root, and the sub-brand block below aliases them. They were declared only on `.np-nsff`, which meant anything outside that scope -- the Family Favorites button in the site navbar, most obviously -- had to repeat the hex. Two sources for one colour is how a palette drifts. Declared here they are available to the whole document, and `.np-nsff` still exposes them under the style guide's own names so the sub-brand rules read the way the guide does. */ --np-bloom-pink: #F2799B; --np-midnight-navy: #1E295B; --np-ff-gold: #E8C845; --np-ff-band-blue: #3495D2; /* Deep Harbor. The style guide names it in its own comments -- "Deep Harbor rather than Navy on a dark ground" -- where Navy is #0C4F73. White on it is about 11:1. */ --np-harbor-blue: #053952; /* The hero-image shape (ratio, radius) is still shared -- see --np-hero-ratio/--np-hero-radius below -- but this specific width value is not any more: it's now only the fallback single-post/page hero's own width (".single .post-thumbnail.article-post-thumbnail", further down), for a page that shows its featured image above the content without going through the Family Favorites page hero (.np-page-hero) or the blog post hero (.np-post-hero), neither of which reads this token now -- .np-page-hero uses a plain 1178px literal instead, matching the nav and footer. The 20% step here is measured against the **content column** (1178px), not Kadence's `--global-content-width` (1290px): 1290 x 1.2 is 1548px, which exceeds a 1440 viewport, clamps to the available width and produces a full-bleed hero instead of an inset one. */ --np-hero-w: calc(1178px * 1.2); --np-hero-ratio: 3 / 1; --np-hero-radius: 14px; /* Site chrome -- header, social strip, mobile drawer, footer -- in light mode. These exist so the chrome has one place to change. Every colour in those four regions reads a token from this block rather than naming a brand colour directly, so returning to the dark treatment means editing eleven values here instead of fifty-four declarations spread over three thousand lines. The brand tokens above are untouched: cards, ribbons, hero strokes and the NSFF sub-brand still use them directly. Three inks rather than one, because the nav distinguishes three states -- the current page (strong), everything else (muted), and whatever the cursor is on (accent). Collapsing accent into strong would mean hovering the active link did nothing visible. */ --np-chrome-nav-bg: #ffffff; --np-chrome-drawer-bg: #ffffff; --np-chrome-strip-bg: #f2f6f9; /* thin strip above the navbar */ --np-chrome-footer-bg: #eef3f7; /* light blue grey; same value as --np-band */ --np-chrome-footer-bottom-bg: #dfe8ee; /* copyright strip, one step deeper */ --np-chrome-ink: #2f4858; /* body-weight chrome text */ --np-chrome-ink-strong: #0e3a52; /* current page, footer headings */ --np-chrome-ink-muted: #5f7480; /* inactive nav links, social glyphs */ --np-chrome-accent: #165272; /* hover and focus text */ --np-chrome-hover-bg: #ebf7fc; /* hover ground; was --np-navy-shade */ --np-chrome-rule: #d7dee4; /* dividers; was --np-navy-shade */ /* Placeholder text, site wide. Same value as the NSFF `--on-surface-dis` the nomination form already used -- that form was the reference, so the two are deliberately equal rather than coincidentally close. */ --np-placeholder: #94a3b8; /* How long a content/post image takes to fade in once loaded -- see "Image fade-in on load" below. */ --np-img-fade-duration: .35s; /* Space above the body content, sitewide -- see "Content top spacing (sitewide)" further down. */ --np-content-top-spacing: 1rem; } body { background: #fff; } /* Header: dark blue, white nav */ .site-header, #masthead, .site-header .site-header-upper-wrap, .site-header .site-main-header-wrap { background: var(--np-chrome-nav-bg); } .site-header .main-navigation a, .site-header .menu > li > a { color: var(--np-chrome-ink-muted); } .site-header .main-navigation a:hover { color: var(--np-chrome-accent); } .mobile-toggle-open, .menu-toggle-open { color: var(--np-chrome-ink); } .site-header .site-title, .site-header .site-tagline { display: none; } /* The logo is a wide mark (1440x263 natural), and Kadence's dynamic CSS caps it with `.site-branding a.brand img { max-width: 200px }` from its "Logo max width" setting. That width cap is what governs the rendered height -- a `max-height` alone never bound, which is why raising it changed nothing (37px rendered against a 68px max-height). Width is therefore the lever: 340px at this aspect ratio comes out ~62px tall, inside the 80px header row. The `#masthead` id outranks Kadence's two-class-two-element rule. */ #masthead .site-branding a.brand img, #masthead .custom-logo, .site-header .brand img { max-width: 250px; max-height: 56px; width: auto; height: auto; } /* On mobile the bar also has to hold the hamburger toggle; at desktop width the mark overlapped it. */ @media (max-width: 767px) { #masthead .site-branding a.brand img, #masthead .custom-logo, .site-header .brand img { max-width: 200px; max-height: 46px; } } /* Section titles. Border, padding and margin are set in the section-band block near the bottom of this file -- the band owns that spacing, because a margin here would fall outside the painted background and show as a seam. The heading is a flex row: its text is an anonymous flex item and the ::after rule is a second item with `flex: 1`, so the rule simply absorbs whatever width the title leaves. That is what makes it shrink and grow with the title length, with no per-section values to maintain. */ .np-section-title { display: flex; align-items: center; gap: 1rem; letter-spacing: .02em; /* All caps, at every width -- the desktop-only clamp further down only touches size. */ text-transform: uppercase; } .np-section-title::after { content: ""; flex: 1 1 auto; min-width: 1.5rem; /* never vanishes entirely on a very long title */ height: 2px; background: var(--np-rule); } /* ---------- Homepage ---------- */ .home .entry-content > .wp-block-group { max-width: 1200px; margin-left: auto; margin-right: auto; } /* Section headings: serif, dark blue, orange kicker bar */ .home .entry-content h2:not(.wp-block-post-title):not(.np-section-title) { color: var(--np-dark-blue); font-size: 1.5rem; letter-spacing: .01em; margin: 2.75rem 0 1.25rem; padding-top: 1rem; border-top: 3px solid var(--np-orange); display: block; } /* Post grids: breathing room */ :is(.home, .np-related, .np-archive-loop) .wp-block-post-template { gap: 1.75rem 1.5rem; } .home .wp-block-query { margin-bottom: 1rem; } /* Cards */ :is(.home, .np-related, .np-archive-loop) .wp-block-post-template .wp-block-post { display: flex; flex-direction: column; } :is(.home, .np-related, .np-archive-loop) .wp-block-post-featured-image { margin-bottom: .7rem; } :is(.home, .np-related, .np-archive-loop) .wp-block-post-featured-image img { border-radius: 8px; transition: transform .25s ease, box-shadow .25s ease; } /* Card hover intentionally empty -- the previous lift/shadow "pop" was removed; a different hover treatment is planned. The img transition above is left in place so the replacement has something to animate. */ :is(.home, .np-related, .np-archive-loop) .wp-block-post-title { font-size: 1.02rem; line-height: 1.35; margin: 0 0 .3rem; } /* Was --np-ink -- moved to the same --np-heading-color every other heading on the site now shares (see "Typography: headlines"), since this anchor's own colour is more specific than that shared rule and would otherwise keep winning over it, leaving the card title looking like a different colour from the section heading above it for no deliberate reason. The hover-to-gold effect right below is untouched -- that's a real, separate, wanted treatment, not part of this. */ :is(.home, .np-related, .np-archive-loop) .wp-block-post-title a { color: var(--np-heading-color); text-decoration: none; } /* Title colour is driven by hovering the whole card, not just the title itself, so it changes in step with the image stroke and the Read More reveal -- all three now share the same `.wp-block-post:hover` trigger. Scoped to `.wp-block-post-template` rather than `.home` so archive and category listings behave identically. `:focus-within` keeps the keyboard path in sync. */ .wp-block-post-template .wp-block-post-title a { transition: color .24s ease; } .wp-block-post-template .wp-block-post-title a:hover, .wp-block-post-template .wp-block-post:hover .wp-block-post-title a, .wp-block-post-template .wp-block-post:focus-within .wp-block-post-title a { color: var(--np-gold); } .home .wp-block-post-date { color: var(--np-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; } /* Hero: first section, first story goes big */ @media (min-width: 768px) { .home .wp-block-query:first-of-type .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home .wp-block-query:first-of-type .wp-block-post:first-child { grid-column: span 2; grid-row: span 2; } .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-featured-image img { height: 100%; object-fit: cover; } /* Hero headline. clamp() rather than a fixed size so it scales between the 768px breakpoint and wide desktops without overflowing the 2-column tile. */ .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-title { /* !important: the h2 carries has-medium-font-size, and WordPress emits preset font-size classes with !important, which beats specificity alone. */ font-size: clamp(1.9rem, 3.1vw, 3.1rem) !important; line-height: 1.1; letter-spacing: -0.015em; /* No font-weight here: this rule is more specific than the headline rule, so declaring 700 held the hero at Bold and kept it off the 800 the kit provides. */ margin: 0 0 .45rem; text-wrap: balance; } } .home .wp-block-query:first-of-type { margin-top: 1.5rem; /* Extra separation between the hero and the first banded section. */ padding-bottom: 3rem; } /* ---------- Post thumbnails: hard 4:3 ---------- */ /* Global on purpose: applies to every core Post Featured Image, not just .home, so archives and category pages match without a second rule. Two things are being fought here. (1) The block editor's "Aspect ratio" control writes aspect-ratio inline on the
and width/height/object-fit inline on the ; inline styles can only be beaten with !important. (2) More subtly, the card above is `display:flex; flex-direction:column`, which makes the figure a flex item whose `min-height:auto` resolves to the image's min-content height -- that is what let portrait sources stretch past the declared ratio and produce mismatched heights even though the inline 3/2 was present on all 18. `min-height:0` is the part that actually fixes it; the ratio alone did not. Consequence for the editor: the block's Aspect ratio control no longer has any visible effect. Ratio is set here, in code, on purpose. */ .wp-block-post-featured-image { aspect-ratio: 4 / 3 !important; min-height: 0; /* No overflow:hidden -- object-fit already crops, and hiding overflow would clip the Read More CTA that deliberately hangs past the image's bottom edge. */ } .wp-block-post-featured-image a { display: block; height: 100%; } .wp-block-post-featured-image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; } /* The homepage hero tile keeps the same 4:3 ratio and gets its prominence from spanning 2 grid columns instead: ~577px wide against ~277px for a normal tile, so it is larger in both dimensions at an identical ratio. Nothing to override here -- it inherits the rule above by design. The 2x2 span lives in the Hero block below. */ /* ---------- Card meta line: author + date ---------- */ /* Rendered as a single `.np-post-meta` element by the render_block_core/post-title filter, with core's Post Date block suppressed for cards. Done in PHP rather than CSS because the card is a flex column: the author and date were separate sibling blocks, and flex blockifies its items, so no amount of `display:inline` would put them on one line. Replaces the earlier absolutely-positioned chip on the image -- the date is back to plain text. */ .wp-block-post-template .np-post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45em; margin: 0 0 .4rem; color: var(--np-muted); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; } /* ---------- "Read More" CTA ---------- */ /* There is no Read More block in the Post Template markup, so this is generated on the featured image's own . Because the pseudo-element lives inside that anchor it is genuinely clickable and lands on the post -- no new markup and nothing to add in the editor, so the whole treatment stays in this file and in git. Tradeoff: a real core/read-more block would be semantically cleaner. It would mean editing all five Post Templates, which is page content rather than code and therefore invisible to git. Chosen the CSS route to match "layout in CSS, as global as possible". `bottom: 0` + `translateY(50%)` puts exactly half the button below the image edge regardless of the button's own height -- no magic pixel offset to maintain. */ .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more) { position: relative; /* Single knob for CTA scale. Both pseudo-elements size their geometry in `em`, so the ribbon, its notch and its fold all scale together from this one value -- the hero override below only has to change this, not re-declare the shape. Needed because ::before does NOT inherit ::after's font-size; they are siblings. */ /* Base (small card) ribbon scale. Every ribbon dimension -- padding, notch depth, overhang, fold, and the 3em lift off the image edge -- is expressed in `em`, so this one value resizes the whole assembly coherently. */ --np-cta-fs: .95rem; --np-cta-pad-y: .85em; /* How far the ribbon pokes past the image's left edge. The overhang plus the darker fold beneath it is what reads as 3D -- the reference does the same thing with negative margins. Supersedes the earlier flat 2em inset. */ --np-cta-out: 1.15em; /* Distance from the image's bottom edge up to the ribbon's bottom. The ribbon now sits fully inside the image rather than straddling the edge. In `em` of the CTA font-size, so it scales with the ribbon on the hero tile. */ --np-cta-bottom: 3em; --np-gold-shade: #a8761a; } /* Ribbon body. The trailing chevron is cut with clip-path rather than drawn with extra elements, since an ::after cannot have children of its own. */ .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more)::after { content: "Read More"; position: absolute; left: calc(-1 * var(--np-cta-out)); bottom: var(--np-cta-bottom); z-index: 3; font-size: var(--np-cta-fs); /* Left padding absorbs the overhang so the label stays optically inside the image. */ padding: var(--np-cta-pad-y) 2.1em var(--np-cta-pad-y) calc(var(--np-cta-out) + 1.15em); background: var(--np-gold); color: var(--np-dark-blue); font-family: var(--np-font-condensed); font-weight: 600; line-height: 1; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - .9em) 50%, 100% 100%, 0 100%); transition: background-color .28s ease, color .28s ease; /* drop-shadow, not box-shadow: box-shadow would trace the unclipped rectangle and draw a shadow across the notch that clip-path just cut out. */ filter: drop-shadow(0 3px 8px rgba(22, 82, 114, .28)); } /* The fold: a darker wedge tucked beneath the ribbon's leading end, which is what reads as "wrapped around the edge" rather than "button sitting on top". Offset down by half the ribbon's own height (pad*2 + 1em line, halved) so it meets the body. */ .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more)::before { content: ""; position: absolute; left: calc(-1 * var(--np-cta-out)); bottom: var(--np-cta-bottom); z-index: 2; font-size: var(--np-cta-fs); width: var(--np-cta-out); height: .62em; /* Both pseudo-elements share the same `bottom`, so translateY(100%) of the fold's own height puts its top edge exactly on the ribbon's bottom edge. This no longer depends on the ribbon's padding at all, so the two cannot drift apart when the ribbon is retuned. */ transform: translateY(100%); background: var(--np-gold-shade); clip-path: polygon(0 0, 100% 0, 100% 100%); transition: background-color .28s ease; } /* Ribbon hover: invert to navy-on-gold, cross-fading both the body and its fold. The trigger is the image's own , which is also the ribbon's generating element -- so hovering anywhere on the photo or on the ribbon itself drives the same state, with no JS and no duplicated selectors. :focus-visible is included so keyboard users get the same affordance. */ .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more):hover::after, .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more):focus-visible::after { background: var(--np-dark-blue); color: var(--np-gold); } .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more):hover::before, .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more):focus-visible::before { background: var(--np-navy-shade); } @media (prefers-reduced-motion: reduce) { .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more)::after, .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more)::before { transition: none; } } /* Clearance so the overhanging CTA does not land on the title. */ .wp-block-post-template .wp-block-post-featured-image { margin-bottom: 1.7rem; } :is(.home, .np-related, .np-archive-loop) .wp-block-post-featured-image { margin-bottom: 1.7rem; } /* Hero CTA scales with the hero tile -- a button sized for a 277px card looks lost under a 44px headline. Hero only, so it lives in the 768px breakpoint where the hero treatment exists at all. */ @media (min-width: 768px) { .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-featured-image a { /* Drives the label and every em-based dimension of the ribbon, so the shape scales with the text instead of the text outgrowing it. */ --np-cta-fs: 1.32rem; } } /* Card titles on the smaller tiles. `!important` for the same reason as the hero: `has-medium-font-size` is emitted by WordPress with !important and otherwise pins every title to the 20px preset. The hero rule is more specific, so it still wins. */ .wp-block-post-template .wp-block-post-title { /* The vw term has to be large enough to actually clear the 20px preset at desktop widths -- 1.45vw resolved to 20.88px at 1440, i.e. no visible change at all. 1.75vw gives ~25px at 1440 and still degrades sensibly on narrow screens. */ font-size: clamp(1.36rem, 1.75vw, 1.72rem) !important; line-height: 1.2; } /* ---------- Homepage hero: responsive layout ---------- */ /* Three steps, narrowest last so each overrides the one above it (all carry equal specificity, so source order decides): >= 990px the 4-column grid with a 2x2 hero, defined further up 601-989px hero spans the full row, the remaining four sit two-up beneath it <= 600px everything stacks in a single column `grid-column: 1 / -1` is what makes the hero full width regardless of how many columns the track has, and `grid-row: auto` undoes the 2-row span it carries at desktop -- leaving that in place would open an empty second row. */ @media (max-width: 989px) and (min-width: 601px) { .home .wp-block-query:first-of-type .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home .wp-block-query:first-of-type .wp-block-post:first-child { grid-column: 1 / -1; grid-row: auto; } /* The featured article owns the full row here, so its headline scales up to match. `!important` for the `has-medium-font-size` preset, as everywhere else. */ .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-title { font-size: clamp(2.2rem, 5.5vw, 3.4rem) !important; line-height: 1.06; letter-spacing: -0.015em; } } @media (max-width: 600px) { .home .wp-block-query:first-of-type .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } .home .wp-block-query:first-of-type .wp-block-post:first-child { grid-column: auto; grid-row: auto; } /* Featured article goes full-bleed at this size. Only the IMAGE breaks out -- the title and meta stay in the content column, since running body text to the screen edges would be worse, not bolder. Same viewport-based breakout used by the single-post hero: 100vw with a half-width translate, which does not care how wide the column it sits in happens to be. Corners are squared because a rounded edge-to-edge image shows the page through its corners, and the scrim's own radius has to be cleared with it. */ .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-featured-image { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); border-radius: 0; } .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-featured-image img, .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-featured-image::after { border-radius: 0; } /* No hover stroke on the featured image here: it is drawn 9px OUTSIDE the image, which has nowhere to go once the image spans the viewport -- and a hover affordance earns little on a touch screen anyway. */ .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-featured-image::before { display: none; } /* Larger headline for the featured article. `!important` for the same reason as elsewhere: the h2 carries `has-medium-font-size`, which WordPress emits with !important. */ .home .wp-block-query:first-of-type .wp-block-post:first-child .wp-block-post-title { font-size: clamp(1.8rem, 7.5vw, 2.5rem) !important; line-height: 1.1; letter-spacing: -0.015em; } /* Sit the featured image flush under the navbar. The 80px gap was three separate values stacking -- `.content-area` margin-top 32px, `.entry-content-wrap` padding-top 24px and the query block's own margin-top 24px -- so all three have to go, not just the nearest one. */ .home .content-area { margin-top: 0; } .home .entry-content-wrap { padding-top: 0; } .home .wp-block-query:first-of-type { margin-top: 0; } /* Breathing room under the featured card, now that it runs edge to edge. */ .home .wp-block-query:first-of-type .wp-block-post:first-child { margin-bottom: 1.6rem; } } /* The same seam at the *bottom* of the page, at every width -- not just mobile. 56px of plain white sat between the last band and the footer: Kadence's `.entry-content-wrap` carries a 24px bottom padding and `.content-area` a 32px bottom margin, neither zeroed here because the top-of-page fix above only touched the matching top values. Both are Kadence defaults, not anything this theme set on purpose. */ .home .entry-content-wrap { padding-bottom: 0; } .home .content-area { margin-bottom: 0; } /* ---------- Bottom gradient scrim on card images ---------- */ /* Uses the *figure's* ::after. The ribbon occupies the anchor's ::after/::before, and the anchor does not create a stacking context (position:relative with z-index:auto), so the ribbon's z-index:3 still paints above this scrim's z-index:1 inside the figure. */ .wp-block-post-template .wp-block-post-featured-image::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); border-radius: 0 0 8px 8px; /* follow the img's own 8px radius */ pointer-events: none; /* clicks continue through to the image link */ } /* ---------- Small-card Read More button ---------- */ /* A real anchor emitted by the render_block_core/post-title filter, sitting below the author line -- not generated content, so it is focusable and has its own accessible name. Square corners as requested. */ /* Selector is `.wp-block-post-featured-image .np-read-more`, not a bare `.np-read-more`. WordPress core ships `.wp-block-post-featured-image a { display:block; height:100% }`, which matches this button because it is an inside the figure. At one class plus one element that outranks a bare single-class selector, so core's `height:100%` won and the button rendered as a full-height block (106x195px) instead of a button. Two classes beats one-class-plus-element, and height/width are reset explicitly. */ .wp-block-post-featured-image .np-read-more { height: auto; width: auto; /* Centred on the image. Absolute against the figure (the PHP filter injects this inside it), so it does not depend on the image's rendered height. */ position: absolute; left: 50%; top: 50%; z-index: 4; opacity: 0; transform: translate(-50%, -50%) scale(.94); /* Hidden state must not be clickable, or an invisible target sits over the photo. */ pointer-events: none; padding: .82em 1.7em; /* Same 8px as the image itself, so the button echoes its container's corner. */ border-radius: var(--np-img-radius, 8px); background: var(--np-gold); color: var(--np-dark-blue); font-family: var(--np-font-condensed); font-size: 1.02rem; font-weight: 600; line-height: 1; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; /* Required, not cosmetic. The button is absolutely positioned with `left: 50%` and no `right`, so its available width is only from the midpoint to the figure's right edge (~138px on a 277px card). With the larger padding the label needs ~151px and wrapped onto two lines. nowrap lets it size to content; translate(-50%) still centres it. */ white-space: nowrap; transition: opacity .26s ease, transform .26s ease, background-color .26s ease, color .26s ease; } /* Revealed by hovering anywhere on the card. `focus-within` is the keyboard equivalent -- without it this button would be unreachable without a mouse. */ .wp-block-post:hover .wp-block-post-featured-image .np-read-more, .wp-block-post:focus-within .wp-block-post-featured-image .np-read-more { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } /* Colour inversion on the button itself, for direct feedback once it is visible. */ .wp-block-post-featured-image .np-read-more:hover, .wp-block-post-featured-image .np-read-more:focus-visible { background: var(--np-dark-blue); color: var(--np-gold); } @media (prefers-reduced-motion: reduce) { .wp-block-post-featured-image .np-read-more { transition: none; } } /* ---------- Ribbon retired ---------- */ /* Every card in a post template, the homepage featured article included, now uses the `.np-read-more` hover button. The ribbon was the hero's alone, and it is off. Suppressed with `content: none` rather than by deleting the ribbon block above: those rules still describe the only ribbon this site has, and nothing on a post template enables them any more. They are dead code as far as the current design goes -- say the word and they come out, along with the scrim comment that refers to them. Two things that were tied to the ribbon and are now gone with it: the extra vertical padding on the hero's ribbon, and the larger hero label. The featured article takes the same button as its neighbours, which is the point. */ .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more)::after, .wp-block-post-template .wp-block-post-featured-image a:not(.np-read-more)::before { content: none; } /* ---------- Hover: yellow stroke drawn from the top centre ---------- */ /* `--np-sweep` is registered with @property so it can be *transitioned* -- a plain custom property is not animatable, and this whole effect depends on animating an angle. The mask is a conic gradient starting at 12 o'clock. Two symmetric opaque wedges grow from 0deg: one clockwise to +sweep, one anticlockwise to (360 - sweep). They meet at the bottom when sweep reaches 180deg, so the stroke draws from the top centre around both sides simultaneously. Why not the previous approaches: - four straight background-gradient lines: no corner geometry, cannot be rounded. - a radial mask expanding from the top edge: mathematically "worked" and reached 300%, but a circle centred on the top edge already covers the entire border by ~100%, so the reveal completed in the first third of the duration and read as a pop-in rather than a draw. Still a transition, so it unwinds on mouse-out with no reverse keyframes. Degradation: without @property support the angle is not animatable, so the stroke snaps in and out instead of drawing. Acceptable -- the hover affordance still exists. */ @property --np-sweep { syntax: ""; inherits: false; initial-value: 0deg; } .wp-block-post-template .wp-block-post-featured-image { /* 3px was chosen to match the old .np-section-title divider, which has since been removed in favour of the alternating section bands. Kept at 3px deliberately. */ --np-stroke: 3px; --np-stroke-gap: 9px; /* --np-img-radius itself now lives at :root -- see the token block near the top of this file -- so the listicle template's images can share the exact same corner as every card image on the site instead of a second 8px written out to match it by hand. */ } .wp-block-post-template .wp-block-post-featured-image::before { content: ""; position: absolute; inset: calc(-1 * var(--np-stroke-gap)); z-index: 1; pointer-events: none; border: var(--np-stroke) solid var(--np-gold); /* Image radius plus the gap keeps the curve concentric with the image's corner. */ border-radius: calc(var(--np-img-radius) + var(--np-stroke-gap)); --np-sweep: 0deg; -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, #000 0deg, #000 var(--np-sweep), transparent var(--np-sweep), transparent calc(360deg - var(--np-sweep)), #000 calc(360deg - var(--np-sweep)), #000 360deg); mask-image: conic-gradient(from 0deg at 50% 50%, #000 0deg, #000 var(--np-sweep), transparent var(--np-sweep), transparent calc(360deg - var(--np-sweep)), #000 calc(360deg - var(--np-sweep)), #000 360deg); transition: --np-sweep .52s cubic-bezier(.4, 0, .2, 1); } .wp-block-post-template .wp-block-post:hover .wp-block-post-featured-image::before, .wp-block-post-template .wp-block-post-featured-image:hover::before { --np-sweep: 180deg; } @media (prefers-reduced-motion: reduce) { .wp-block-post-template .wp-block-post-featured-image::before { transition: none; } } /* ---------- Typography: headlines ---------- */ /* Adobe Fonts kit udr2iav, enqueued in functions.php. The kit ships acumin-pro-condensed at 400/600/700/800 -- there is no 900, so 800 is the heaviest available and stands in for Black. Fallbacks are condensed-ish system faces so a failed kit load does not jump to a wide default. Colour added here too, not just font: `.entry-title` and `.np-section-title` (the homepage's category headings, reached through the bare `h2` above) never had a colour of their own in this theme -- each fell through to whatever Kadence core's own default heading colour happens to be, which is how the two ended up reading as different colours in the first place despite looking like they should match. `--np-heading-color` points at `--global-palette3`, the same Kadence Customizer navy `.entry-title` was already computing (confirmed live, and independently the value `.nspl-navy`/the carousel arrows' own icon colour already stand in for), so this makes that the deliberate, named value every heading here shares instead of an unstyled coincidence. `.wp-block-post-title` itself picks it up this way; its own `a` still needs pointing at the same token directly, see that rule's own comment further down -- an anchor's colour doesn't inherit past a more specific rule already setting it. */ h1, h2, h3, h4, h5, h6, .wp-block-post-title, .entry-title, .site-title, .widget-title { font-family: var(--np-font-condensed); font-weight: 800; color: var(--np-heading-color); } /* Everything else on Acumin Pro (the non-condensed family from the same kit). Set on `body` so it inherits; form controls are listed explicitly because they do not inherit font-family from an ancestor by default. The heading rule above is more specific, so headlines stay condensed. */ body, input, select, textarea, button, .entry-content, .site-footer { font-family: var(--np-font-body); } /* ---------- Tags / chips (sitewide) ---------- */ /* One shared rule for exactly the three properties asked to change on a tag pill -- no stroke, the site's regular body face rather than the condensed display one, and label text that is *the same hue as the ground it sits on*, just at full opacity rather than the ground's own washed-out tint of that colour. A tonal chip, not an outlined one. Everything else about a tag -- its size, its padding, its corner radius, which colour it actually uses -- stays declared at the point of use, because those genuinely differ by context (the listicle chips below keep their own .74rem/letter-spacing/padding exactly as authored). Only the three shared properties live here, driven by two custom properties each context sets: `--np-tag-bg` is the pale ground, `--np-tag-ink` is that same colour at full strength. The defaults exist so `.np-tag` alone -- with no colours set -- still renders something sane if it is ever used bare. `.nspl-chips li:not(.nspl-chips-lbl) a` and `.nspl-price` are listed directly in this selector rather than inheriting `.np-tag` via markup, because that markup is generated by nsp_listicle_render_item() in inc/listicles.php, which has its own reasons to name its own classes rather than reuse this one (see that file's own comments). This is the sitewide source for their border, font and colour regardless. */ .np-tag, .nspl-chips li:not(.nspl-chips-lbl) a, .nspl-price { font-family: var(--np-font-body); border: 0; color: var(--np-tag-ink, var(--np-dark-blue)); background: var(--np-tag-bg, var(--np-aqua-4)); } /* ---------- Homepage section spacing ---------- */ /* A "section" is an `h2.np-section-title` plus the `.wp-block-query` immediately after it. They are separate sibling blocks with no wrapper in the page content, so the vertical rhythm below is set on both and they abut to read as one continuous run. That is why their vertical margins are zeroed and replaced with padding -- a margin here would fall *outside* whatever this block paints, and show as a seam between the heading and its posts if a background were ever reintroduced. There is no coloured band any more -- see the rule below for why -- but the mechanism for painting one is left in place, set to `none`/`transparent` rather than deleted. If a band comes back, it is three values in that one rule, not rebuilding the full-bleed technique: `box-shadow` spread + `clip-path`, not negative margins, so the shadow paints past the container on both sides while the element's own box -- and therefore the content width -- stays untouched and aligned with the hero. `clip-path: inset(...)` would confine that spread vertically to the section; the vertical inset was -14px rather than 0 because the card hover stroke sits 9px outside each image plus its own 3px width, and clipping at exactly 0 sheared the top of the stroke on the first row. */ :root { --np-band: #eef3f7; /* light blue-grey; swap for --np-aqua-4 (#ebf7fc) if too neutral */ --np-rule: #d7dee4; /* light grey rule beside section titles */ /* Was originally declared on the ribbon's anchor rule, which meant it did not exist anywhere else -- the nav's hover `background: var(--np-navy-shade)` silently resolved to an invalid value and no fill appeared. Root scope now. */ --np-navy-shade: #0e3a52; /* Search submit: a light medium blue-grey that still separates from the panel's lighter --np-band behind it. */ --np-search-btn-bg: #cfdae3; --np-search-btn-bg-hover: #b9c9d6; } /* Margins must be zero, not merely small: they fall OUTSIDE the painted band, so any margin here appears as an unbanded white gap. Kadence's content.min.css sets `.single-content h2 { margin-top: 1.5em }` at (0,1,1), which beat a bare `.np-section-title`, leaving a 69px white strip above every grey band -- and because that value is in `em`, enlarging the section titles to 46px inflated it from ~36px to 69px. White sections merged with that gap while grey ones did not, which is why they looked like they had different padding. The selector below is (0,3,1) to win. */ .home .entry-content h2.np-section-title, .home .entry-content h2.np-section-title + .wp-block-query, .np-related h2.np-section-title, .np-related h2.np-section-title + .wp-block-query, .np-section-title, .np-section-title + .wp-block-query { border-top: 0; margin-top: 0; margin-bottom: 0; } .np-section-title { padding: 2.4rem 0 1.1rem; } .np-section-title + .wp-block-query { padding: .9rem 0 2.6rem; } /* No band colour on the homepage sections at all -- white, like the page around them. This went through two other states first: an odd/even alternation, then a single grey `--np-band` on every section (matching `.np-related`'s own fixed colour), then grey on all but the first section. Each was a reasonable reading of "get rid of the evenodd effect... just keep the background the same for related posts", and each still left grey showing on the homepage, which is what the section stayed unwanted. Landing here instead: nothing about "category sections" was ever asked to be grey, only to stop *alternating* -- so the resolution is no colour at all, not a different fixed one. `.np-related` is untouched throughout this: its grey comes from a background declared directly on the `.np-related` wrapper in the "Similar Posts" block further down, a rule this selector has never touched. "Keep the background the same for related posts" has therefore been true by construction the whole time, on every one of these attempts. */ .np-section-title, .np-section-title + .wp-block-query { background: transparent; box-shadow: none; clip-path: none; } /* Section headings, tablet and up. Matches the specificity of the (now excluded) divider rule so it reliably beats the 24px coming from the theme's h2 sizing. Trimmed slightly from clamp(2rem, 3.2vw, 3rem) -- same shape, about 12% smaller at both ends of the range, now that the all-caps transform above adds its own weight. */ @media (min-width: 768px) { .home .entry-content h2.np-section-title, .np-related h2.np-section-title { font-size: clamp(1.75rem, 2.8vw, 2.65rem); line-height: 1.08; } } /* ---------- Advertisement slots ---------- */ /* Advanced Ads wraps each slot in a div whose id is randomised per render but always prefixed `nspar-`, so the attribute prefix selector is the only stable hook -- there is no class to target. No colour here either, for the same reason as the sections above and to the same end: a grey ad slot between two white sections is itself a two-tone alternation, which is exactly what "get rid of the evenodd effect... for the ad sections" asked to stop. `--np-band-ad`, the shade this used to carry, was retired when the sections first went to one colour; the plain `--np-band` that replaced it here is retired now too. Padding and margin stay -- that spacing is independent of colour, and it is what still separates an ad visually from the editorial content around it. */ .home .entry-content div[id^="nspar-"] { background: transparent; box-shadow: none; clip-path: none; padding: 2.6rem 1rem; margin: 0; } /* Shadow is on the ad creative only, never the band. Two reasons: it is the intended effect, and the band could not carry one anyway -- its full bleed depends on `clip-path: inset(0 -100vmax)`, which confines all painting to its own box vertically, so a shadow on the band would be clipped away. Navy-tinted rather than black, and much softer than the first pass, which was tuned for a navy backdrop and reads far too heavy on a light band. */ .home .entry-content div[id^="nspar-"] > div { box-shadow: 0 6px 16px rgba(22, 82, 114, .16), 0 1px 3px rgba(22, 82, 114, .1); } /* ---------- Category section carousels ---------- */ /* The track is a native scroll-snap container, so touch, trackpad and keyboard scrolling all work with no JavaScript; carousel.js only drives the arrows and their disabled state. `overflow-x: auto` forces `overflow-y` to compute as auto too, which would clip the card hover stroke where it sits 9px above the first row -- hence the padding-top, since overflow clips at the padding box, not the content box. */ .np-carousel { position: relative; } .np-carousel .wp-block-post-template.is-layout-grid { display: flex; /* Required. Depending on how a loop's displayLayout is authored, core may add `is-flex-container`, whose own rule sets `flex-wrap: wrap` -- which turned the Similar Posts track into two stacked rows of three instead of one scrolling row. */ flex-wrap: nowrap; grid-template-columns: none; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; /* The scroll container clips at its padding box on BOTH axes (overflow-x:auto forces overflow-y to auto), which was shearing the card hover stroke -- it sits 9px outside each image plus 3px of its own width. Extending the box 14px past the content on the inline axis and padding it straight back gives the stroke room while leaving the cards exactly aligned with the section's content width. `scroll-padding-inline` moves the snap edge back to the content start so cards still snap flush. */ /* `width: auto` is essential, not tidying. Core sets `width: 100%` on .wp-block-post-template, so the negative margin merely SHIFTED the box 14px left instead of widening it: the card area came out 1150px against the hero's 1178px and the right arrow ended up 28px past the last card. With width auto the box grows to content + 28px, the padding puts the cards back on the content edges, and the scrollport still extends far enough for the hover stroke. */ width: auto; /* Core's inline block CSS also sets `.wp-block-post-template { max-width: 100% }`, which caps the box at the containing block's width -- so `width: auto` alone still could not grow past 1178px and the cards stayed 28px narrow. Both are required. */ max-width: none; margin-inline: -14px; padding: 14px 14px .6rem; scroll-padding-inline: 14px; scrollbar-width: none; /* arrows are the affordance */ -ms-overflow-style: none; } .np-carousel .wp-block-post-template.is-layout-grid::-webkit-scrollbar { display: none; } .np-carousel .wp-block-post-template.is-layout-grid > .wp-block-post { flex: 0 0 calc((100% - 3rem) / 3); /* three across, matching the old grid */ scroll-snap-align: start; } /* `display: contents` so the wrapper generates no box of its own: each button then positions against `.np-carousel` directly, letting one sit on the left edge and one on the right rather than the pair sharing a corner. */ .np-carousel-nav { display: contents; } .np-carousel--static .np-carousel-btn { display: none; /* nothing to scroll */ } .np-carousel-btn { position: absolute; /* Set by carousel.js to the image row's vertical centre. The fallback only matters for the instant before the script runs -- `top: 50%` of the carousel lands ~87px low, because the box also contains each card's title, meta and the band's padding. */ top: var(--np-arrow-top, 50%); z-index: 6; width: 3rem; height: 3rem; display: grid; place-items: center; padding: 0; /* A visible stroke, not just the drop shadow, so the white circle still reads against a white background even if something (a future change, a print stylesheet, a browser that suppresses box-shadow) ever drops the shadow again -- box-sizing is border-box sitewide, so this doesn't grow the button past its 3rem diameter. */ border: 1px solid var(--np-carousel-btn-border); border-radius: 50%; /* White circle with a navy chevron, matching the listicle carousel's own arrow icon and container (inc/listicles.php's .nspl-caro-nav pill) -- solid, not transparent, since these buttons overlap photographs and a see-through control would be unreadable over a busy image. Colour reads through the same token chain --nspl-navy itself resolves through (--global-palette3, falling back to --np-dark-blue) rather than a second, separately- maintained navy, since .nspl-navy is scoped to `.nspl` and cannot be read outside it. */ background: #fff; color: var(--global-palette3, var(--np-dark-blue)); font-size: 1.6rem; line-height: 1; cursor: pointer; /* Neutral, not the old navy-tinted shadow (rgba(22,82,114,...) made sense against a navy fill; it doesn't against white) -- matches the listicle pill's own plain black shadow. */ box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease; } /* `display: block` so the SVG is not treated as inline text, where its baseline would reintroduce the very off-centring the glyphs caused. */ .np-carousel-btn svg { display: block; } /* Each button's centre lands exactly on the track's edge, so it is half over the cards and half outside them. The section band is full-bleed and the content is inset ~131px from the viewport, so the outer half has room and is never clipped. */ .np-carousel-btn[data-np-dir="prev"] { left: 0; transform: translate(-50%, -50%); } .np-carousel-btn[data-np-dir="next"] { right: 0; transform: translate(50%, -50%); } /* Hover and press share one appearance -- the white circle turns a light, plain grey, per the ask, rather than the icon itself changing colour. `:active` and `:focus` are pinned explicitly because Kadence's own generic button rule (see "Neutralise Kadence's orange button hover/focus/active" further down) would otherwise repaint these on click; `:focus` resets to the plain idle colours rather than a distinct appearance of its own -- the sitewide `:focus-visible` outline (see "Focus states (sitewide)") is the actual keyboard- focus indicator, so this only needs to stop Kadence's own default from showing through, not draw a second one. The base rule's own box-shadow needs no repeating here any more -- the sitewide focus rule that used to strip it on every click/tab no longer touches box-shadow at all (see that section's own comment). */ .np-carousel-btn:hover:not(:disabled), .np-carousel-btn:active:not(:disabled) { background: var(--np-carousel-btn-hover-bg); color: var(--global-palette3, var(--np-dark-blue)); } .np-carousel-btn:focus:not(:hover):not(:disabled) { background: #fff; color: var(--global-palette3, var(--np-dark-blue)); } /* At either end of the track the arrow disappears rather than sitting there greyed out. `pointer-events: none` matters: without it the invisible button still takes hover and clicks, and Kadence's own button hover styling would repaint it. */ .np-carousel-btn:disabled { opacity: 0; visibility: hidden; pointer-events: none; } /* Fewer cards in view as the viewport narrows. */ @media (max-width: 1024px) { .np-carousel .wp-block-post-template.is-layout-grid > .wp-block-post { flex-basis: calc((100% - 1.5rem) / 2); } } @media (max-width: 640px) { .np-carousel .wp-block-post-template.is-layout-grid > .wp-block-post { flex-basis: 82%; /* a sliver of the next card hints that it scrolls */ } .np-carousel-btn { width: 2.5rem; height: 2.5rem; font-size: 1.3rem; } } @media (prefers-reduced-motion: reduce) { .np-carousel .wp-block-post-template.is-layout-grid { scroll-behavior: auto; } } /* Kadence gives content containers (`.content-bg`) a card shadow (`rgba(0,0,0,.05) 0 15px 15px -10px`). On the homepage it read as a stray grey smudge spanning the width just above the footer, once the full-bleed section bands made the article's bottom edge visible. Removed sitewide, not just on the homepage. Both selectors are listed because Kadence's own rule is `.entry.content-bg` (two classes); a bare `.content-bg` would lose to it on the article wrapper, while the bare form is still needed for the other containers that carry the class. */ .content-bg, .entry.content-bg { box-shadow: none; } /* ---------- Similar Posts (single post) ---------- */ /* Rendered by template-parts/content/entry_related.php as a core Query Loop with queryId 900, which is in np_carousel_query_ids() -- so the `.np-carousel` class, the arrows, the 4:3 ratio, the hover stroke, the Read More reveal and the meta line all come from the rules above with nothing duplicated here. This block only supplies the band and the content width. `width: min(1178px, 100% - 3rem)` reproduces the homepage's measured 1178px content width exactly on wide screens while still leaving gutters on narrow ones. */ .np-related { /* The section is rendered inside the single-post content column, which is only 794px wide -- so `min(1178px, ...)` on the inner element resolved against that and the carousel came out far narrower than the homepage. These negative margins break the section out to the full viewport width first; the inner element then re-centres at the homepage's 1178px. Safe here because that content column is itself centred in the viewport (measured: 323px of gutter on both sides at 1440px). The box-shadow spread is kept as a backstop: if a future template ever places this section in an off-centre column, the fill still reaches both edges even though the box would not. */ margin-inline: calc(50% - 50vw); background: var(--np-band); box-shadow: 0 0 0 100vmax var(--np-band); clip-path: inset(0 -100vmax); margin-top: 3rem; padding: .5rem 0 3rem; } .np-related-inner { width: min(1178px, 100% - 3rem); margin-inline: auto; } /* The band lives on .np-related, so the odd/even rules above must not also paint the heading and loop -- they would stack a second background inside the first. */ .np-related .np-section-title, .np-related .np-section-title + .wp-block-query { background: transparent; box-shadow: none; clip-path: none; } /* ---------- Primary navigation ---------- */ /* Top-level links computed to --np-muted (#5f7480) on the navy header, which is what made them illegible. Kadence sets that through its own palette rules, so these use `#masthead` (an id) to outrank them cleanly rather than piling on !important. Items are made full-height so the hover fill and the underline read as bar-height blocks rather than floating pills: the bar is 80px while the links were only 48px. */ #masthead .site-header-item .main-navigation { /* The parent is a flex row with align-items:center, so without this the nav is only as tall as its text (27px) and `height: 100%` further down has nothing to fill -- which is why the underline sat directly under the link instead of at the bar's edge. */ align-self: stretch; } #masthead .main-navigation, #masthead .main-navigation .primary-menu-container, #masthead .main-navigation .menu { height: 100%; } #masthead .main-navigation .menu, #masthead .main-navigation .menu > li { align-items: stretch; } #masthead .main-navigation .menu > li { display: flex; } #masthead .main-navigation .menu > li > a { position: relative; display: flex; align-items: center; gap: .4rem; height: 100%; /* Wider gutters, since the hover fill now spans the item. */ /* Slightly tighter than before, to absorb the extra "Home" item without the bar wrapping on mid-size desktops. */ padding: 0 1.2rem; /* Condensed semibold caps. 600 exists in the kit (400/600/700/800 for acumin-pro-condensed), so this is a real weight rather than a synthesised one. Letter-spacing is added deliberately: condensed uppercase sets very tight, and without tracking the labels read as a solid block. Size is nudged up because condensed caps occupy less width per character than the previous mixed-case setting. */ font-family: var(--np-font-condensed); font-weight: 600; font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase; /* Inactive links sit a step darker than the footer's light blue, so the white active item reads as clearly selected. */ color: var(--np-chrome-ink-muted); transition: background-color .2s ease, color .2s ease; } /* Active page. WordPress marks the current item with several classes depending on whether it is the page itself, an ancestor, or the parent of the current item -- all are listed so a child page still highlights its top-level parent in the bar. These sit BEFORE the hover rules on purpose: the two carry equal specificity, so source order is what lets hover still win over the active state. */ #masthead .main-navigation .menu > li.current-menu-item > a, #masthead .main-navigation .menu > li.current-menu-ancestor > a, #masthead .main-navigation .menu > li.current-menu-parent > a, #masthead .main-navigation .menu > li.current_page_item > a, #masthead .main-navigation .menu > li.current_page_ancestor > a, #masthead .main-navigation .menu > li.current_page_parent > a { color: var(--np-chrome-ink-strong); } /* Chevrons: Kadence colours these separately and ships fill:#000, so both properties need setting or the arrow stays dark against the navy. */ #masthead .main-navigation .menu > li > a .dropdown-nav-toggle, #masthead .main-navigation .menu > li > .dropdown-nav-toggle, #masthead .main-navigation .menu > li .dropdown-nav-toggle svg, #masthead .main-navigation .menu > li > a svg { color: inherit; /* follow the label: light blue, or white when active */ fill: currentColor; } #masthead .main-navigation .menu > li > a:hover, #masthead .main-navigation .menu > li:hover > a, #masthead .main-navigation .menu > li:focus-within > a { color: var(--np-chrome-accent); /* Colour only, no weight change: bolding re-measured the text and visibly widened the item (and shifted its neighbours) on every hover. */ background: var(--np-chrome-hover-bg); } #masthead .main-navigation .menu > li > a:hover .dropdown-nav-toggle, #masthead .main-navigation .menu > li:hover > a .dropdown-nav-toggle, #masthead .main-navigation .menu > li:hover .dropdown-nav-toggle svg, #masthead .main-navigation .menu > li:hover > a svg { color: var(--np-chrome-accent); fill: currentColor; } /* Underline swipe, in three colours that arrive one after another: orange, then gold, then aqua. **Three background layers on one pseudo-element, not three stacked elements.** Each layer has its own animated width, so the three draw across independently and the stagger comes from giving each its own `transition-delay`. A single `transition-delay` on `background-size` could not do this: the property takes a list of sizes but one delay, so all three layers would move together. **The layers are flat colour, not ramps.** `linear-gradient( 0 0)` is the idiom for a solid background *layer* -- there is only one `background-color`, so a stack of solids has to be expressed as images. Every colour boundary here is therefore a hard edge: what you see is each layer's `background-size` edge, not a blend. Written in the two-position form rather than as `linear-gradient(c, c)` precisely so it does not read as a gradient to the next person. Why not three elements: only `a::after` is genuinely free here. `.sub-menu::before` is already the bridge that keeps dropdowns reachable, and the `
  • ` is **not** a positioned element -- adding `position: relative` to it to host a pseudo-element would change the containing block the dropdowns resolve against, which is not a thing worth risking for an underline. `@property` is what makes the widths animatable at all: a plain custom property is not interpolated, so the layers would jump rather than draw. Same mechanism as the card hover stroke further up this file. Without `@property` support the stroke snaps in instead of sweeping -- the affordance survives, the flourish does not. Layer order paints first-listed on top, so aqua ends up covering the other two: during the sweep you see an orange leading edge trailed by gold and then aqua, and at rest the stroke is solid aqua. */ @property --np-stroke-1 { syntax: ""; inherits: false; initial-value: 0%; } @property --np-stroke-2 { syntax: ""; inherits: false; initial-value: 0%; } @property --np-stroke-3 { syntax: ""; inherits: false; initial-value: 0%; } #masthead .main-navigation .menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(var(--np-aqua) 0 0) left bottom / var(--np-stroke-3) 100% no-repeat, linear-gradient(var(--np-gold) 0 0) left bottom / var(--np-stroke-2) 100% no-repeat, linear-gradient(var(--np-orange) 0 0) left bottom / var(--np-stroke-1) 100% no-repeat; /* The delays are only on the way in. Declared here without them, so on mouse-out all three retract together -- staggered on the way out reads as the stroke coming apart. */ transition: --np-stroke-1 .5s cubic-bezier(.4, 0, .2, 1), --np-stroke-2 .5s cubic-bezier(.4, 0, .2, 1), --np-stroke-3 .5s cubic-bezier(.4, 0, .2, 1); } /* Hover only. The gold stroke used to draw itself on `:focus-within` as well, which meant it appeared under an item whenever anything inside it took focus -- including the moment a dropdown was opened from the keyboard, and on the parent of a focused sub-menu link. Keyboard users are not left without feedback: `li:focus-within > a` still changes both the text colour and the ground, so a focused item is still clearly marked. */ #masthead .main-navigation .menu > li > a:hover::after, #masthead .main-navigation .menu > li:hover > a::after { --np-stroke-1: 100%; --np-stroke-2: 100%; --np-stroke-3: 100%; /* 200ms apart, against a 500ms draw. How wide each colour band looks is the **ratio** of the stagger to the duration, not the duration on its own: a layer's leading edge sits `delay / duration` of the way behind the one before it. The old pair was 90ms against 280ms, so each band was about a third of the item's width; slowing everything proportionally would have looked exactly the same, only lazier. Raising the stagger faster than the duration is what actually separates the colours -- 200/500 puts each band at roughly 40% of the width, so orange is nearly all the way across before aqua sets off. The whole cascade now finishes in 900ms. If that reads as sluggish on hover, bring the duration down before the delays: shortening the delays first would narrow the bands again and undo the point of the change. */ transition-delay: 0ms, 200ms, 400ms; } @media (prefers-reduced-motion: reduce) { #masthead .main-navigation .menu > li > a::after { transition: none; } /* Straight to the final colour, with no cascade. */ #masthead .main-navigation .menu > li > a:hover::after, #masthead .main-navigation .menu > li:hover > a::after { transition-delay: 0ms; } } /* Sub-menus sit below the underline rather than covering it. The ::before bridges the gap back up to the nav item: without it the pointer leaves the
  • while crossing the offset and the dropdown closes before it can be reached. Hovering a pseudo-element counts as hovering its element, so the bridge keeps `li:hover` true. */ /* The dropdown panel was the one part of the header light mode missed, because its ground is Kadence's (#10344a, from the Customizer) rather than this stylesheet's -- so there was no declaration here to remap. It stayed a dark panel hanging off a white bar. The hairline earns its place now: against a white navbar a shadow alone leaves the panel edge indistinct. */ #masthead .main-navigation .menu > li > .sub-menu { top: calc(100% + 6px); min-width: 17.5rem; background: var(--np-chrome-nav-bg); border: 1px solid var(--np-chrome-rule); box-shadow: 0 10px 24px rgba(88, 148, 180, .28); } #masthead .main-navigation .sub-menu li > a { color: var(--np-chrome-ink); /* Kadence sets a fixed `width: 200px` on dropdown anchors, both in header.min.css and again in its dynamic customiser CSS (its "dropdown width" setting). Widening the