/*
Theme Name: Herb and Needle (Kadence Child)
Theme URI: https://herbandneedle.com
Description: Child theme of Kadence for herbandneedle.com — Herb and Needle brand site (content, courses, books, services, community).
Author: Michael Keane
Author URI: https://herbandneedle.com
Template: kadence
Version: 1.1.11
Text Domain: herb-and-needle-child
*/
/*
* Brand palette — warm/earthy dark ground, confirmed 2026-09-01.
* See vault: projects/Book Launch Marketing/Herb and Needle Kadence Child Theme/index.md
* for the full rationale and the Type Study artifact this was built from.
*
* Mapped onto Kadence's own Global Palette variables (--global-paletteN) so the
* whole theme — buttons, headings, backgrounds — inherits this by default rather
* than needing per-block color picks. Michael can still fine-tune from
* Appearance > Customize > Colors; these are the starting values.
*
* Kadence's palette slots (see inc/components/color_palette/component.php):
* 1 Accent 2 Accent - alt 3 Strongest text
* 4 Strong text 5 Medium text 6 Subtle text
* 7 Subtle background 8 Lighter background 9 White/offwhite (base bg)
* 10 Accent - complement
* Slot 9 is normally the site's main background — in this dark theme that's
* our darkest tone, not white, which is why 7/8/9 read "backwards" below.
*/
:root {
/*
* Direction A — "Charcoal Base, Earth & Herb Accents," confirmed 2026-09-01.
* Original palette (v1.0.1–1.0.6) put brown/umber in every large surface —
* ground, both "subtle"/"lighter" backgrounds — leaving only small accents
* in any other hue. Michael's feedback: "so brown." Fix: neutral warm
* charcoal is now the base (barely brown at all); earth/terracotta pulls
* back to an accent-only role; the herbal green (previously a rare text
* flourish, --hn-flair-herbal-*) becomes a real second surface tone
* (palette7) used on the Read/Books section specifically, so the page
* actually shifts hue as you scroll, not just shade.
*/
--global-palette1: #d68a48; /* Accent — earth/terracotta (primary buttons, links) */
--global-palette2: #b96f34; /* Accent alt — darker earth (hover/active states on accent elements) */
--global-palette3: #efe8da; /* Strongest text — warm cream (headings) */
--global-palette4: #e0d6c2; /* Strong text */
--global-palette5: #b8ac97; /* Medium text — body copy */
--global-palette6: #8a8168; /* Subtle text — captions, meta */
--global-palette7: #182018; /* Subtle background — herb surface (Read/Books section) */
--global-palette8: #1e1c17; /* Lighter background — neutral charcoal surface */
--global-palette9: #161510; /* Base background — neutral warm charcoal, not brown */
--global-palette10: #a67bff; /* Accent complement — violet, one half of the holographic flair pair (see below); used sparingly, not a standalone accent */
--hn-accent-herb: #8bab7e; /* Accent — herb green, paired with the palette7 herb surface */
/* Extra brand tokens Kadence doesn't have slots for — used directly in custom CSS/blocks. */
--hn-flair-holographic-start: #a67bff;
--hn-flair-holographic-end: #3fc7ac;
--hn-flair-herbal-start: #e0708f;
--hn-flair-herbal-end: #6b8f5a;
/*
* ENCODING ACCENTS — added 1.1.8, confirmed with Michael 2026-09-03.
*
* Deliberately a SEPARATE family from the --hn-flair-* gradients above.
* The distinction is the whole point of having both:
*
* --hn-data-* ENCODES meaning. Flat colour, never a gradient.
* A reader can look up what the colour means.
* --hn-flair-* ORNAMENTS. Gradients, decorative only, rare.
* Carries no information; nothing is lost if ignored.
*
* Never use a flair gradient to encode a category, and never use a data
* colour as decoration — that is what keeps both families legible.
*
* These four are drawn from colours already sanctioned in the palette
* (palette1, hn-accent-herb, palette10, and the holographic gradient's
* end stop) so nothing foreign enters the system. All four clear WCAG AA
* (>=4.5:1) on base #161510, surface #1e1c17, and the reading ground
* #232019 — measured, not assumed.
*/
--hn-data-1: #d68a48; /* Terracotta — primary, warm, Yang, "active/selected" AA 6.60 / 6.15 / 5.87 */
--hn-data-2: #8bab7e; /* Herb green — counterpart, Yin, "mother/supplement" AA 7.16 / 6.67 / 6.36 */
--hn-data-3: #a67bff; /* Violet — analytical/scientific, the third category AA 6.00 / 5.59 / 5.34 */
--hn-data-4: #3fc7ac; /* Teal — fourth category, for charts needing four AA 8.68 / 8.09 / 7.72 */
/*
* UI STATE — added 1.1.9, chosen by Michael 2026-09-03.
*
* A third family, separate from both --hn-data-* (encodes meaning) and
* --hn-flair-* (ornaments). This one marks INTERFACE STATE: what is
* currently selected, active, or being traced.
*
* It keeps its own token even though it currently resolves to the same
* value as --hn-data-1: the token names the ROLE, so selection can be
* re-pointed later by changing one line rather than hunting through
* every component.
*
* Two candidates were tried and rejected before landing here (1.1.10):
* - palette10 violet: wrong because selection fires 5-15 times on a
* single interactive page, and violet is at value 100 — the
* brightest colour in the palette and the only cool hue. The most
* frequent element on the page became the loudest thing on it.
* - antique gold #c9a44c: quiet and warm, but only 14 degrees from
* terracotta, so it read as a muddy near-miss rather than either a
* match or a contrast.
*
* Terracotta wins because it is the site's OWN interactive colour —
* links and buttons already use it, so a selected item looks like every
* other thing that responds to a click. Native beats invented.
*
* AA on base 6.60 / surface 6.15 / reading ground 5.87.
*
* Where selection and a terracotta-coded meaning appear on the same
* control, distinguish them by FILL vs OUTLINE — as the Twelve Officials
* explainer does for sovereign vs selected — never by hue alone.
*/
--hn-ui-select: #d68a48; /* Terracotta — selected / active / tracing */
/* Colour-vision note: data-2 (103 deg) and data-4 (168 deg) are the
closest pair at 65 deg apart, and are the risky combination under
deuteranopia. When both appear in one diagram, also distinguish them
by shape, position, or a direct label — never by hue alone. */
/*
* READING SURFACE — added 1.1.8. "Option B, tuned dark."
*
* For long-form article bodies (blog posts) only. Site chrome stays on
* the base ground; the article sits on its own lifted panel.
*
* Why not maximum contrast: pushing body text to palette3 (#efe8da)
* would give 13.3:1, which sounds better and reads worse. Very high
* light-on-dark contrast produces halation — the glow-bleed that smears
* letterforms for astigmatic readers, who are a large minority. 10.5:1
* sits comfortably past AA while staying out of that zone.
*
* The larger win here is not colour at all: it is 19px type, 1.72
* line-height, and a 68ch measure. Unbounded line length was the real
* readability problem, not the palette.
*/
--hn-read-bg: #232019; /* Lifted reading ground */
--hn-read-text: #d9cfb8; /* Body copy 10.50:1 */
--hn-read-head: #efe8da; /* Headings 13.33:1 */
--hn-read-meta: #9a9078; /* Byline, dates, meta 5.13:1 */
--hn-read-rule: #332e26; /* Hairlines within the article */
}
/*
* Type pairing — "Ink & Instrument," confirmed 2026-09-01.
* Fraunces (ancient/manuscript pole) for headings, IBM Plex Sans
* (scientific/precise pole) for body — the duality staged directly
* rather than blended into one neutral voice.
*/
body,
p,
li,
input,
textarea,
button {
font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
font-family: 'Fraunces', serif;
font-weight: 500;
letter-spacing: -0.01em;
}
/*
* ORNAMENTAL flair utilities — gradients, decoration only.
* Kept deliberately (Michael, 2026-09-03): the gradients earn their place
* as flavour on display text, and an artist's site is allowed to like
* colour. The rule is scope, not deletion.
*
* - Use rarely: roughly one gradient moment per section, at most.
* - Display text only — never body copy, never UI controls.
* - NEVER to encode meaning. If a colour needs to be looked up, it is a
* --hn-data-* colour, not a flair gradient. See the token block above.
*/
.hn-flair-holographic {
background: linear-gradient(100deg, var(--hn-flair-holographic-start), var(--hn-flair-holographic-end));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hn-flair-herbal {
background: linear-gradient(100deg, var(--hn-flair-herbal-start), var(--hn-flair-herbal-end));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/*
* Consistent image treatment + two ratio standards, confirmed 2026-09-01.
* A warm duotone-leaning filter plus a soft inner vignette, so photos,
* digital book covers, and course thumbnails from different sources all
* read as one family sitting on the dark umber ground, rather than a grab
* bag of clashing rectangles pasted onto it.
*
* Two standard ratios — pick ONE per image, and never mix them within the
* same row/grid (a wide thumbnail next to a tall book cover reads as
* incoherent, confirmed 2026-09-01):
* .hn-ratio-wide 16:9 — video/course thumbnails, screenshots, landscape photos
* .hn-ratio-tall 2:3 — book covers, portrait-oriented art
* Group same-ratio images together (e.g. two wide cards side by side);
* give a tall image its own spotlight layout (image one side, text the
* other — see the About/Books sections in Home Page Blocks) rather than
* forcing it into a row with wide neighbors.
*
* Usage:
* or
*
* object-fit:contain + a filled letterbox background means the whole
* image is always visible, never force-cropped, regardless of its native
* proportions — the ratio classes control the card shape, not the source
* image's actual dimensions.
*/
.hn-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 3px;
border: 1px solid rgba(241, 230, 211, 0.14);
background: var(--global-palette7);
/* Compact by default (confirmed 2026-09-01) — a card that fills its whole
column reads as oversized; keep tiles modest like classicalchinesemedicine.org's
content cards. Cards center within a wider column rather than stretching to fill it. */
max-width: 300px;
width: 100%;
margin: 0 auto;
}
.hn-ratio-wide {
aspect-ratio: 16 / 9;
}
.hn-ratio-tall {
aspect-ratio: 2 / 3;
}
.hn-media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: sepia(0.14) saturate(0.85) contrast(1.05) brightness(0.94);
}
.hn-media::after {
content: "";
position: absolute;
inset: 0;
box-shadow: inset 0 0 32px 8px rgba(23, 17, 12, 0.4);
pointer-events: none;
}
/*
* Watermark background art, confirmed 2026-09-01 (revised same day).
* A hint of art behind a text section — low opacity, desaturated — never
* competing with readability. Text sits in a separate layer above it, so
* contrast is unaffected regardless of what's underneath.
*
* Usage — apply to a CONTENT-WIDTH wrapper, never the outer full-bleed
* section directly (revised: it originally stretched edge-to-edge across
* the whole viewport, which read as a giant stretched panorama rather than
* art sitting behind the actual content column):
*
*
*
...actual content blocks...
*
*
* Reserved for occasional use (one moment per page or so) — not meant to
* cover every section, or it stops being a deliberate accent.
*/
.hn-watermark {
position: relative;
overflow: hidden;
}
.hn-watermark::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--hn-watermark-image);
background-size: cover;
/* Optional per-instance scale + position — set --hn-watermark-scale
(e.g. 1.1) and/or --hn-watermark-position (e.g. "center 60%") inline
on a specific .hn-watermark to enlarge/reposition just that section's
image (e.g. lining up a motif with the content below it), confirmed
2026-09-01. Defaults: no zoom, position matching the original crop. */
background-position: var(--hn-watermark-position, center 20%);
transform: scale(var(--hn-watermark-scale, 1));
opacity: 0.07;
filter: grayscale(1) contrast(1.1);
pointer-events: none;
}
.hn-watermark-content {
position: relative;
z-index: 1;
}
/*
* Full-bleed hero background, confirmed 2026-09-01.
* Full-strength image (not the low-opacity .hn-watermark treatment) with a
* dark gradient scrim so content stays legible and the bottom blends into
* the page's own ground color. Used for the Home hero, which now uses the
* logo-and-needle artwork — the wordmark is baked into the image itself,
* so hero copy should NOT repeat "Herb and Needle" as separate text.
*
* Usage:
*
*
...tagline, copy...
*
*/
.hn-hero {
position: relative;
overflow: hidden;
/* Match the box's shape to the source image's real proportions (revised
2026-09-01 — a fixed min-height on a full-bleed box forced a much wider
aspect ratio than the image itself, so "cover" cropped it into a tight,
disorienting zoom). min-height is a floor only, for narrow/mobile
widths where the aspect-ratio math would otherwise be too short for
the text to sit in comfortably. */
aspect-ratio: 1456 / 816;
min-height: 320px;
display: flex;
align-items: flex-end;
}
.hn-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--hn-hero-image);
background-size: cover;
background-position: center center;
}
.hn-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(22,21,16,0) 0%, rgba(22,21,16,0.55) 55%, var(--global-palette9) 100%);
}
.hn-hero-content {
position: relative;
z-index: 1;
max-width: 640px;
}
/*
* Mobile hero fix, confirmed 2026-09-01.
* The overlay-on-image hero design (text sitting in the dark gradient zone
* at the bottom) was tuned for a short-and-wide desktop box. On narrow
* mobile viewports the same text is much taller relative to the box, so it
* grows past the gradient's dark zone and ends up overlapping busy image
* detail directly, with poor contrast. Fix: below the same breakpoint
* Kadence itself uses for column-stacking (782px), switch from an
* image-with-text-overlay to a stacked layout — a short, fixed-height image
* band on top, text on the plain background below it, so length of text
* can never collide with the image regardless of viewport width.
*/
@media (max-width: 782px) {
.hn-hero {
display: block;
height: auto;
aspect-ratio: unset;
min-height: 0;
overflow: visible;
/* padding, not the child's margin-top, creates the gap below the
image — a top margin on the first child of a padding-less box
collapses through and pushes the whole .hn-hero element down
instead of adding space inside it (confirmed via live inspection
2026-09-01: this exact bug caused both a blank gap above the hero
AND the text still overlapping the image). Padding can't collapse. */
padding-top: 220px;
}
.hn-hero::before {
inset: 0 0 auto 0;
height: 220px;
}
.hn-hero::after {
inset: 0 0 auto 0;
height: 220px;
background: linear-gradient(180deg, rgba(22,21,16,0) 0%, rgba(22,21,16,0.85) 88%, var(--global-palette9) 100%);
}
.hn-hero-content {
max-width: 100%;
}
}
/*
* Visually-hidden accessible text — used to keep exactly one real
on
* the page (SEO/accessibility) even when the visible brand name is baked
* into a hero image instead of rendered as on-page text.
*/
.hn-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
* Remove Kadence's Page Header banner site-wide, confirmed 2026-09-01.
* Kadence reserves a "Page Header" section above the actual content (a
* title/featured-image banner). Originally only hidden on Home (where it
* rendered as a blank gap), but decided site-wide: every page now carries
* its own custom H1 in the page content itself (see e.g. Courses), so
* Kadence's title banner became a redundant second heading rather than
* something worth keeping on other pages. One real H1 per page, always
* hand-built in content, never Kadence's auto title.
*/
.entry-hero.page-hero-section {
display: none;
}
/*
* Category card, confirmed 2026-09-01.
* Wraps an image + heading + text + button as one visually bounded card,
* instead of the image sitting in its own box while the text floats loose
* on the section background. Used for the Courses page's Video Categories
* row (Leadership, History of Chinese Medicine, and any future category
* added there) — designed to scale cleanly whether a row holds two, three,
* or more cards.
* Usage: wrap a column's whole content (image + heading + text + button)
* in
...
.
*/
.hn-card {
background: var(--global-palette8);
border: 1px solid rgba(241, 230, 211, 0.14);
border-radius: 4px;
padding: 28px 24px 32px;
height: 100%;
}
.hn-card .hn-media {
margin-bottom: 4px;
}
/*
* Header polish, confirmed 2026-09-02.
* Flagged as the weakest part of the site: the logo was rendering at
* Kadence's Customizer width (200px) with no mobile override — half the
* screen width on a phone — and the site-title text was still in the
* default body sans font instead of Fraunces, so the wordmark next to it
* read as unstyled Kadence chrome sitting right above a much more
* considered hero. Fix: shrink the logo to badge scale at every
* breakpoint, crop it into the circle the artwork already inscribes
* (trims the flat cream corners, keeps the gold ring and lettering
* intact), add a thin accent ring so it reads as a placed mark rather
* than a dropped-in square, and set the wordmark in Fraunces to match
* every other heading on the site.
*/
.site-header .brand.has-logo-image {
display: flex;
align-items: center;
gap: 14px;
}
.site-header .custom-logo {
width: 52px !important;
height: 52px !important;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(214, 138, 72, 0.55);
box-shadow: 0 0 0 3px rgba(22, 21, 16, 0.6);
}
.site-title {
font-family: 'Fraunces', serif;
font-weight: 500;
letter-spacing: -0.01em;
}
@media (max-width: 782px) {
.site-header .custom-logo {
width: 42px !important;
height: 42px !important;
}
}
/*
* Mobile menu link color fix, confirmed 2026-09-02.
* Kadence's own mobile-drawer-nav Customizer CSS sets link text color to
* var(--global-palette8) — in Kadence's default light-theme meaning that
* slot holds a light color, safe against the drawer's dark background.
* Our dark-theme palette remap (see :root above) repurposes palette8 as a
* dark charcoal SURFACE tone (#1e1c17), so the same rule now renders
* mobile nav links almost invisibly dark against the drawer's near-black
* background. Kadence's Customizer CSS is injected inline late in ,
* so !important is needed to reliably win regardless of load order.
*/
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
color: var(--global-palette3) !important;
}
/*
* Long-form article reading surface, added 1.1.8.
* Applies to blog post bodies. Wrap the article content in .hn-article
* (or add the class to the entry-content wrapper on single posts).
* Token rationale lives with the --hn-read-* declarations in :root.
*/
.hn-article {
background: var(--hn-read-bg);
color: var(--hn-read-text);
padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
.hn-article > * {
max-width: 68ch;
margin-left: auto;
margin-right: auto;
}
.hn-article p,
.hn-article li {
color: var(--hn-read-text);
font-size: 19px;
line-height: 1.72;
}
.hn-article h1,
.hn-article h2,
.hn-article h3,
.hn-article h4 {
color: var(--hn-read-head);
}
.hn-article a {
color: var(--hn-data-1);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.hn-article a:hover,
.hn-article a:focus {
color: var(--global-palette2);
}
.hn-article .hn-article-meta {
color: var(--hn-read-meta);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hn-article blockquote {
border-left: 2px solid var(--hn-data-1);
padding-left: 22px;
margin-left: 0;
color: var(--hn-read-head);
}
.hn-article hr {
border: 0;
border-top: 1px solid var(--hn-read-rule);
}
/* Full-bleed children (an embedded interactive explainer, a wide figure)
opt out of the 68ch measure without breaking the article's centring. */
.hn-article > .hn-article-wide {
max-width: none;
}
/*
* Single post titles, added 1.1.11.
* Kadence's default post title is 32px/500, which reads as a small label
* above a long article rather than as the article's own title. Michael
* preferred the scale the first interactive explainer used internally, so
* that treatment moves here and out of the embed. Fraunces 300 at display
* size: the light weight is doing as much work as the size is.
*
* Scoped to .single deliberately. Archive and blog-index listings keep the
* smaller title, or a page of ten posts becomes a wall of 60px headlines.
*/
.single .entry-title {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(2.4rem, 6vw, 4rem);
font-weight: 300;
line-height: 1.04;
letter-spacing: -0.02em;
margin-bottom: 0.35em;
}
/*
* Tighten the run from title to first line of content, added 1.1.11.
* Kadence puts 32px above .entry-content, which combines with the byline's
* own spacing to leave a large dead band under the title. 16px reads as
* deliberate without running the byline into the text.
*/
.single .entry-content {
margin-top: 16px;
}
/* Further custom overrides go below this line. */