inside an .
Cap these at h3 size so the archive listing doesn't look like a title page. */
.gb-block-post-grid-post-title,
.gb-block-post-grid .gb-block-post-grid-post-title,
.gb-block-post-grid-columns .gb-block-post-grid-post-title,
.archive .gb-block-post-grid p.gb-block-post-grid-post-title,
.category .gb-block-post-grid p.gb-block-post-grid-post-title,
.tag .gb-block-post-grid p.gb-block-post-grid-post-title,
.author .gb-block-post-grid p.gb-block-post-grid-post-title {
font-family: var(--font-serif) !important;
font-weight: 400 !important;
font-size: clamp(1.625rem, 2.62vw + 0.905rem, 3rem) !important; /* h3 */
letter-spacing: -0.015em;
text-transform: none !important;
color: var(--skin-ink);
}
/* ═══════════════════════════════════════════════════════════════════
TYPOGRAPHY — BODY
═══════════════════════════════════════════════════════════════════ */
p, li, dt, dd, blockquote, td, th, label {
font-family: var(--font-sans);
color: var(--skin-ink);
}
p {
text-align: left;
text-wrap: pretty;
}
/* Global links — OXBLOOD
!important required: compiled SCSS @extend chain produces a mega-selector
that forces color: #24808e with higher specificity than a bare `a` rule. */
a {
color: var(--skin-accent) !important;
transition: color 0.2s ease;
}
a:hover,
a:focus,
a:active {
opacity: 0.8;
color: var(--skin-accent) !important;
}
/* Body copy links — underline as the link indicator, normal weight.
All three selectors scoped to .entry-content so this only fires inside
article content. Bare p > a and li > a reach nav menus, WP admin bar,
footer widgets, and any other p/li-based structures on the page. */
.entry-content p > a,
.entry-content li > a,
.entry-content p > strong > a {
color: var(--skin-accent) !important;
font-weight: inherit !important;
text-decoration: underline !important;
text-underline-offset: 5px;
}
.entry-content p > a:hover,
.entry-content li > a:hover,
.entry-content p > strong > a:hover {
opacity: 0.8;
}
/* Media-text block links — no underline; the heading-style presentation
makes underlines look wrong. Color still applies for link affordance. */
.wp-block-media-text__content p > a,
.wp-block-media-text__content p > strong > a {
text-decoration: none !important;
}
/* Secondary copy — INK 2 */
figcaption,
.post-summary__meta {
color: var(--skin-ink-2);
font-size: 0.875em;
}
/* Post meta footer (tags, published date, "PUBLISHED ON" label) —
eyebrow treatment: uppercase Barlow Bold, tight tracking, INK 2.
The theme uses .entry-date-wrap (not .entry-date / .published / .updated).
Genesis also generates .entry-category, .entry-tags-links, .entry-footer-breadcrumbs
via the same @extend chain in _singular.scss — all need the same treatment.
Compiled CSS sets .entry-date-wrap a { color: #24808e !important } — must beat it. */
.entry-footer,
.entry-footer .entry-meta,
.entry-date-wrap,
.entry-tags-links,
.entry-tags,
.entry-footer-breadcrumbs,
.post-meta,
.post-tags,
time,
.entry-time,
.published,
.updated {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--skin-ink-2) !important;
}
/* Link color inside all meta elements — compiled CSS forces #24808e with !important */
.entry-date-wrap a,
.entry-tags-links a,
.entry-tags a,
.entry-footer-breadcrumbs a,
.entry-footer .entry-meta a,
.post-tags a {
color: var(--skin-ink-2) !important;
font-weight: 700 !important;
text-decoration: none;
}
.entry-date-wrap a:hover,
.entry-tags-links a:hover,
.entry-tags a:hover,
.entry-footer-breadcrumbs a:hover,
.entry-footer .entry-meta a:hover,
.post-tags a:hover {
color: var(--skin-accent) !important;
}
/* Category / entry label — INK 2 on cream, Brass on dark tiles */
.entry-category,
.entry-category a {
font-family: var(--font-sans);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--skin-ink-2);
}
.entry-category a:hover {
color: var(--skin-accent);
}
/* Text CTA style — LEARN MORE → ; Brass on light backgrounds */
.text-cta,
.learn-more,
a.cta-arrow {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--skin-brass);
text-decoration: none;
}
.text-cta:hover,
.learn-more:hover,
a.cta-arrow:hover {
opacity: 0.8;
}
/* ═══════════════════════════════════════════════════════════════════
SITE HEADER
─────────────────────────────────────────────────────────────────
Structure inside .site-header > .wrap:
.title-area > p.site-title > a (SVG logo via background-image)
nav.nav-menu > .nav-primary (horizontal nav links)
button.menu-toggle (mobile hamburger — hidden at desktop)
button.search-toggle (search icon — hidden at desktop)
.header-search (search drawer)
Desktop layout (≥1061px): three-column flex row
[logo left, 160px] [nav centered, flex:1] [CTA button, abs right]
The CTA (.menu-item.nav-cta) is pulled out of nav flow via
position: absolute; right: 32px — anchored to .wrap (position: relative).
Mobile layout (≤1060px): flex column, logo centered, nav hidden until
toggled, hamburger + search toggle buttons at top-right.
═══════════════════════════════════════════════════════════════════ */
.site-header {
background-color: var(--skin-base);
box-shadow: 0 1px 0 var(--skin-surface);
-webkit-box-shadow: 0 1px 0 var(--skin-surface);
}
/* Wrap: flex column on mobile, flex row on desktop.
position: relative anchors the absolute-positioned .header-search drawer. */
.site-header > .wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
max-width: 100%;
position: relative;
}
/* ── Logo area ── */
.title-area {
width: 100%;
max-width: 180px;
text-align: center !important;
margin: 0 auto;
padding: 14px 0 12px;
float: none !important;
}
/* SVG logo link — aspect ratio container, color irrelevant (text hidden) */
.title-area .site-title a,
.title-area h1.site-title a,
.title-area p.site-title a {
color: var(--skin-ink) !important; /* fallback text color if SVG fails */
display: block;
width: 100%;
}
/* ── Nav ── */
.nav-menu {
float: none !important;
}
/* Nav items padding */
.nav-menu .menu-item a {
padding: 10px 16px !important;
}
/* Nav items on hover have full oxblood opacity */
.nav-menu .menu-item a:hover,
.nav-menu .menu-item a:focus,
.nav-menu .menu-item a:active {
opacity: 1;
}
/* ── Desktop: three-column row layout ──
[logo left] [nav centered] [CTA right]
──────────────────────────────────────── */
@media (min-width: 1061px) {
.site-header > .wrap {
flex-direction: row;
align-items: center;
padding: 0 32px;
max-width: 1200px; /* matches .page.content .wrap; locks header width on full-width archive/page templates */
}
.title-area {
flex: 0 0 auto;
width: 160px;
max-width: 160px;
margin: 0;
padding: 16px 0;
text-align: left !important;
}
/* Nav takes all remaining space; compiled text-align: center + inline-block
handles centering the items within it */
.nav-menu {
flex: 1 1 auto;
display: block;
text-align: right;
}
}
/* ── Mobile: centered column, toggle buttons at right ── */
@media (max-width: 1060px) {
.site-header > .wrap {
position: relative;
}
.title-area {
max-width: 160px;
padding: 14px 0 12px;
float: none !important;
text-align: center !important;
}
/* Use full selector to beat compiled .site-header .wrap > .menu-toggle
specificity (compiled: top: 3px; left: 0 / right: 0; 48×48px).
Fixed top value — NOT 50% — so buttons don't slide when drawer opens
and expands .wrap height. 20px centers a 38px button in the ~62px logo row. */
.site-header > .wrap > .menu-toggle,
.site-header > .wrap > .search-toggle {
top: 20px;
transform: none;
width: 38px;
height: 38px;
}
.site-header > .wrap > .menu-toggle {
left: 8px; /* stays on the left — clears any right value */
right: auto;
}
.site-header > .wrap > .search-toggle {
right: 10px;
left: auto;
}
}
/* ═══════════════════════════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════════════════════════ */
.nav-menu .menu-item a {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.07em;
color: var(--skin-ink) !important; /* beats global a { color !important } */
transition: color 0.2s ease, background-color 0.2s ease;
}
/* Hover: OXBLOOD background + BASE text */
.nav-menu .menu-item:hover > a {
background-color: var(--skin-accent) !important;
color: var(--skin-base) !important;
}
/* Active / current section: Oxblood text only, no background box */
.nav-menu .menu-item.current-menu-item > a,
.nav-menu .menu-item.current-menu-ancestor > a {
color: var(--skin-accent) !important;
background-color: transparent !important;
}
/* ── CTA nav button ──
Add CSS class "nav-cta" to the newsletter menu item in WP:
Appearance > Menus > Screen Options > enable CSS Classes > add "nav-cta" */
.nav-menu .menu-item.nav-cta > a {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
border-radius: 2px;
padding: 10px 16px !important;
font-weight: 700 !important;
letter-spacing: 0.09em;
white-space: nowrap;
}
.nav-menu .menu-item.nav-cta:hover > a {
background-color: var(--skin-accent) !important;
color: var(--skin-base) !important;
}
/* Dropdown — SURFACE 2 background */
.nav-menu .sub-menu {
background-color: var(--skin-surface);
border: 1px solid var(--skin-surface);
}
.nav-menu .sub-menu .menu-item a {
color: var(--skin-ink);
}
.nav-menu .sub-menu .menu-item:hover > a {
background-color: var(--skin-accent);
color: var(--skin-base);
}
/* Mobile drawer */
@media (max-width: 1060px) {
.nav-menu.active {
background-color: var(--skin-base);
border-top-color: var(--skin-surface);
}
/* Center nav items in the mobile drawer */
.nav-menu .menu-item > a {
text-align: center;
}
/* Subscribe button — center as a block */
.nav-menu .menu-item.nav-cta {
text-align: center;
padding: 8px 0;
}
.nav-menu .menu-item.nav-cta > a {
display: inline-block;
}
}
/* Toggle buttons — INK 2 icon color on BASE header */
.search-toggle,
.menu-toggle {
color: var(--skin-ink-2);
}
.search-toggle svg,
.search-toggle svg path,
.menu-toggle svg,
.menu-toggle svg path {
fill: var(--skin-ink-2);
}
.search-toggle:hover,
.menu-toggle:hover,
.search-toggle.active,
.menu-toggle.active {
background-color: var(--skin-surface);
}
/* Desktop search icon in nav (visible ≥1061px as a .menu-item.search) */
.nav-menu .menu-item.search a svg,
.nav-menu .menu-item.search a svg path {
fill: var(--skin-ink-2);
}
/* Submenu expand arrow — pin to right edge without crowding nav text */
.nav-menu .submenu-expand {
right: 5px !important;
}
/* ── Search drawer ──
At ≥768px: position: absolute; bottom: -75px; right: 0 (from compiled CSS)
Anchored to .site-header > .wrap (position: relative, set above).
At ≤767px: full-width block below the nav. */
.header-search {
background-color: var(--skin-surface);
border-bottom: 1px solid var(--skin-surface);
bottom: -87px;
}
/* Drawer is position: absolute inside .wrap (max-width constrained).
Break out to full viewport width using the centered-container escape:
left: 50% of the wrap + wrap's own offset from viewport = viewport center,
then translateX(-50%) pulls it to the left viewport edge. */
@media (min-width: 768px) {
.header-search {
width: 99vw !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
}
}
/* Compiled CSS offsets .header-search on mobile with margin: 0 -48px and
width: calc(100% + 96px) to bleed out of the original 48px-padded wrap.
Our wrap has padding: 0, so that negative margin pulls it offscreen.
Reset to full-width with no offset. */
@media (max-width: 1060px) {
.header-search {
margin: 0 !important;
width: 100% !important;
}
}
/* Search input field */
.header-search input[type="search"],
.header-search input[type="text"],
.header-search .search-form input {
background-color: var(--skin-base);
border: 1px solid var(--skin-ink-2);
color: var(--skin-ink);
font-family: var(--font-sans);
border-radius: 2px;
}
.header-search input[type="search"]:focus,
.header-search input[type="text"]:focus,
.header-search .search-form input:focus {
border-color: var(--skin-accent);
outline: none;
box-shadow: none;
}
/* Search submit button */
.header-search button[type="submit"],
.header-search .search-form .search-submit {
color: var(--skin-base) !important;
border: none;
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.07em;
cursor: pointer;
border-radius: 2px;
}
.header-search button[type="submit"]:hover,
.header-search .search-form .search-submit:hover {
background-color: var(--skin-accent);
color: var(--skin-base) !important;
opacity: 1;
}
/* ═══════════════════════════════════════════════════════════════════
POST TITLE AREA
═══════════════════════════════════════════════════════════════════ */
.post-title-area {
background-color: var(--skin-base);
border-top: none !important;
border-bottom: none !important;
}
.post-title-area > .wrap {
padding-top: clamp(3rem, 5vw, 5.625rem);
padding-bottom: clamp(3rem, 5vw, 5.625rem);
}
.post-title-area .entry-title {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.02em;
text-transform: none;
margin-top: 0;
margin-bottom: clamp(0.25rem, 1vw, 0.75rem);
}
/* Post title area — center the whole block */
.post-title-area .entry-header,
.post-title-area {
text-align: center;
}
/* Author / category line below post title — eyebrow treatment */
.entry-title-author,
.entry-title-author-name,
.entry-title-author-name a,
.post-title-area .entry-meta,
.post-title-area .byline,
.post-title-area .byline a,
.post-title-area .entry-categories,
.post-title-area .entry-categories a,
.post-title-area .entry-author,
.post-title-area .entry-author a {
display: inline;
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--skin-ink-2);
text-decoration: none;
}
.post-title-area .entry-meta {
display: block;
margin-top: 0.5em;
}
.post-title-area .byline a:hover,
.post-title-area .entry-categories a:hover,
.post-title-area .entry-author a:hover {
color: var(--skin-accent);
}
/* ═══════════════════════════════════════════════════════════════════
ARTICLE / POST SUMMARY CARDS
═══════════════════════════════════════════════════════════════════ */
/* Uniform thumbnail height — 3:2 aspect ratio, center-cropped.
Overrides height: auto from main.css so portrait/landscape uploads all match.
Change the aspect-ratio value to adjust proportions site-wide.
WP block and Genesis wrap are separated: Genesis wrap needs explicit width: 100%
because it has no implicit full-width styling from WordPress block styles. */
.wp-block-post-featured-image,
.wp-block-post-featured-image a {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.post-summary-image-wrap {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.post-summary-image-wrap a {
display: block;
width: 100%;
height: 100%;
}
/* Homepage post grid images — force uniform height via aspect-ratio + cover crop.
Targets the .wp-block-image figure and img inside .gb-container-inside columns. */
.homepage-main-content-area .gb-container-inside .wp-block-image {
aspect-ratio: 3 / 2;
overflow: hidden;
margin-bottom: 0;
}
.homepage-main-content-area .gb-container-inside .wp-block-image a {
display: block;
width: 100%;
height: 100%;
}
.homepage-main-content-area .gb-container-inside .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.wp-block-post-featured-image img,
.post-summary-image-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top; /* favour faces/subjects at top of frame */
}
.post-summary__title,
.wp-block-post-title {
font-family: var(--font-serif);
letter-spacing: -0.01em;
}
.post-summary__title a,
.wp-block-post-title a {
color: var(--skin-ink) !important; /* beats @extend a chain in compiled SCSS */
font-weight: 400 !important; /* compiled chain forces bold via @extend */
text-decoration: none !important; /* beats p > a { underline !important } */
}
.post-summary__title a:hover,
.wp-block-post-title a:hover {
color: var(--skin-accent) !important;
border-bottom: none !important; /* mega-selector forces teal border-bottom on hover */
padding-bottom: 0 !important;
text-decoration: none !important;
}
/* Homepage block post grids */
.gb-block-post-grid h3,
.homepage-main-content-area .wp-block-group h3,
.homepage-main-content-area .wp-block-group h4 {
font-family: var(--font-serif);
letter-spacing: -0.01em;
text-transform: none;
/* text-wrap: balance causes early line breaks in narrow card columns.
pretty prevents orphans without forcing line-length equalization. */
text-wrap: pretty;
}
/* ── Homepage container alignment system ─────────────────────────────
main.css line 612 blanket-sets max-width: 1136px on all .gb-container-inside
elements inside .homepage-main-content-area, bypassing alignment intent.
Overriding here with standardized widths per alignment type.
Scoped to .homepage-main-content-area only — won't affect any other page.
Alignment reference (what main.css does to the OUTER container):
- aligncenter / no class: margin: auto, stays within content column
- alignwide: outer breaks out ~25% past column on each side (calc trick)
- alignfull: outer goes 100vw, touches both browser edges
These rules control the INNER content width (gb-container-inside):
- aligncenter: 1200px — matches the site .wrap max-width (full-width pages)
- alignwide: 80vw — wider than column, narrower than viewport
- alignfull: 100% — fills the full-bleed outer container edge-to-edge
──────────────────────────────────────────────────────────────────── */
/* Fluid vertical padding — overrides main.css line 607: padding: 48px 0.
Scales from 24px at 375px (mobile) to 48px at 1440px (desktop).
Formula: clamp(min, slope·vw + intercept, max)
slope: (48-24)/(1440-375)*100 ≈ 2.25vw
intercept at 375px: 24 - (2.25×3.75) = ~15.56px = 0.97rem
:not() exclusions respect the main.css utility classes (.nopadding,
.nopaddingtop, .nopaddingbottom). When both rules carry !important,
specificity decides — our (0,2,0) selector would beat their (0,1,0).
Excluding them here lets the utility classes work as intended.
Top and bottom are declared separately so .nopaddingtop only suppresses
the top clamp, not the bottom (and vice versa). */
.homepage-main-content-area .gb-block-container:not(.nopadding):not(.nopaddingtop) {
padding-top: clamp(1.5rem, 2.25vw + 0.97rem, 3rem) !important;
}
.homepage-main-content-area .gb-block-container:not(.nopadding):not(.nopaddingbottom) {
padding-bottom: clamp(1.5rem, 2.25vw + 0.97rem, 3rem) !important;
}
/* Default / aligncenter — flat 1200px on desktop, 24px gutters on mobile.
margin-inline is the modern shorthand for margin-left + margin-right. */
.homepage-main-content-area .gb-block-container:not(.alignwide):not(.alignfull) > .gb-container-inside {
max-width: 1200px !important;
margin-inline: auto;
}
/* Horizontal gutters for viewports below 1280px.
Below 1280px, max-width: 1200px doesn't provide natural breathing room
(auto-centering only yields meaningful margin above ~1280px).
24px padding-inline ensures content never runs edge-to-edge.
At 1280px+ the centered 1200px container provides 40px+ of room naturally,
so the rule stops firing and content expands to its full 1200px. */
@media (max-width: 1279px) {
.homepage-main-content-area .gb-block-container:not(.alignwide):not(.alignfull) > .gb-container-inside {
padding-inline: 24px !important;
}
/* Reset nested container-inside elements — the outer container already
provides the gutter; inner grid cells should not double it up. */
.homepage-main-content-area .gb-block-container > .gb-container-inside .gb-block-container > .gb-container-inside {
padding-inline: 0 !important;
}
}
/* alignwide — content breaks past column but not full viewport */
.homepage-main-content-area .gb-block-container.alignwide > .gb-container-inside {
max-width: 80vw !important;
margin-left: auto;
margin-right: auto;
}
/* alignfull — inner content fills the full-bleed outer container */
.homepage-main-content-area .gb-block-container.alignfull > .gb-container-inside {
max-width: 100% !important;
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════════ */
/*
* PRIMARY FILL: INK (#1A2A3F) — standard CTAs (subscribe, read more, etc.)
* PURCHASE/BUY: OXBLOOD (#6E2127) — sales page buy buttons only
* HOVER: opacity 0.85 — no extra color needed
*/
.wp-block-button__link,
.gb-button {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Standard button fill — INK
color needs !important: global a { color !important } would otherwise win */
.wp-block-button__link,
.gb-button {
color: var(--skin-base) !important;
}
.wp-block-button__link:not(.has-background),
.gb-button:not([class*="has-"][class*="background"]) {
background-color: var(--skin-ink);
color: var(--skin-base) !important;
}
.wp-block-button__link:hover,
.gb-button:hover {
opacity: 0.85;
transform: translateY(-1px);
text-decoration: none;
}
.wp-block-button__link:active,
.gb-button:active {
opacity: 0.9;
transform: scale(0.98) translateY(0);
}
/* Buy / purchase buttons — OXBLOOD */
.wp-block-button.buy .wp-block-button__link,
.gb-block-button.buy .gb-button,
.has-eg-blue-background-color.wp-block-button__link,
.has-eg-blue-background-color.gb-button {
background-color: var(--skin-accent) !important;
color: var(--skin-base) !important;
border-radius: 2px;
}
/* Ensure hover/focus states also hold Base text color */
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.gb-button:hover,
.gb-button:focus {
color: var(--skin-base) !important;
}
/* Kit (ConvertKit) form submit buttons — override teal inline styles sitewide.
Kit sets background-color, color, border-radius, font-size, font-weight
as inline styles. !important is required to beat them. */
.formkit-submit {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.6875rem, 0.9vw, 0.8125rem) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-radius: 2px !important;
border: none !important;
transition: opacity 0.2s ease !important;
}
.formkit-submit:hover {
opacity: 0.85 !important;
color: var(--skin-base) !important;
}
/* Kit inline form — zero its built-in padding and margin at all viewport sizes.
Kit's frontend.css sets padding on [data-style="clean"] via a container-width
attribute selector ([min-width~="700"]) that fires based on the form's own
rendered width, not the viewport. It applies padding: 10px / padding-top: 56px
whenever the form container hits 700px — which happens at tablet widths too.
Scoping this to a mobile-only media query lets it slip back in above 767px,
so these overrides apply universally instead. */
.formkit-form [data-style="clean"] {
padding: 0 !important;
}
.formkit-form[data-format="inline"] {
margin-bottom: 0 !important;
}
/* WordPress core sets margin-bottom: 1.75em on :where(.wp-block-columns).
:has() scopes this to columns containing a Kit form only. */
.wp-block-columns:has(.formkit-form) {
margin-bottom: 0 !important;
}
/* Back To Top inline button — appears in post content as p.backtotop > a.
Eyebrow treatment on brass pill. Specificity: .entry-content .backtotop a = (0,2,1)
which beats .entry-content p > a = (0,1,2), killing the underline bleed. */
.backtotop {
margin: 0 0 24px;
}
.entry-content .backtotop a,
.backtotop a {
display: inline-block !important;
background-color: var(--skin-brass) !important;
color: var(--skin-surface) !important;
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 8px 14px !important;
border: 0px none;
border-radius: 2px;
line-height: 1;
}
.entry-content .backtotop a:hover,
.backtotop a:hover {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════════
FORMS & INPUTS
═══════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select,
.search-field {
font-family: var(--font-sans);
border-color: var(--skin-surface);
background-color: var(--skin-base);
color: var(--skin-ink);
transition: border-color 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
.search-field:focus {
border-color: var(--skin-ink);
outline: none;
box-shadow: 0 0 0 2px var(--skin-surface);
}
/* ═══════════════════════════════════════════════════════════════════
FOOTER WIDGETS
═══════════════════════════════════════════════════════════════════ */
.footer-widgets {
background-color: var(--skin-ink);
border-top: 1px solid var(--skin-ink);
}
/* Widget titles get eyebrow treatment on dark INK background.
body prefix gives (0,2,1) specificity vs .widget-area .widget-title (0,2,0),
winning the !important tiebreaker without needing .site-footer as parent
(in Genesis, .footer-widgets is a sibling of .site-footer, not a child). */
body .footer-widgets .widget-title {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--skin-surface) !important;
}
.footer-widgets p,
.footer-widgets li {
color: var(--skin-surface);
}
/* Links: no underline at rest; brighten to Base on hover (not Oxblood — wrong context for dark bg).
!important required on color to beat global a { color !important } and .entry-content p > a { color !important }.
!important required on text-decoration to beat p > a { text-decoration: underline !important }. */
.footer-widgets a {
color: var(--skin-surface) !important;
text-decoration: none !important;
font-weight: inherit !important; /* mega-selector forces font-weight: 700 on p > a */
}
.footer-widgets a:hover {
color: var(--skin-base) !important;
}
/* ═══════════════════════════════════════════════════════════════════
SITE FOOTER
═══════════════════════════════════════════════════════════════════ */
/* Dark footer uses INK as background — matches V3.1 mosaic dark tile treatment */
.site-footer {
background-color: var(--skin-ink);
border-top: 1px solid var(--skin-ink);
color: var(--skin-base);
}
.site-footer p,
.site-footer li {
color: var(--skin-surface);
}
/* Copyright line — eyebrow treatment on INK background.
Color uses --skin-surface (not --skin-ink-2) since it sits on dark INK footer. */
.site-footer .copyright,
.site-footer p.copyright {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--skin-surface) !important;
}
/* Links inside copyright (Accessibility, Privacy Policy etc) —
global a { color !important } would make them oxblood on dark bg.
text-decoration: none !important overrides p > a { underline !important }. */
.site-footer .copyright a,
.site-footer p.copyright a {
color: var(--skin-surface) !important;
text-decoration: none !important;
}
.site-footer .copyright a:hover,
.site-footer p.copyright a:hover {
color: var(--skin-base) !important;
opacity: 1;
}
.site-footer .footer-links a,
.site-footer a {
color: var(--skin-surface);
}
.site-footer .footer-links a:hover,
.site-footer a:hover {
color: var(--skin-base);
opacity: 1;
}
/* Back-to-top button sits on INK background.
Default: transparent, Surface 2 border + arrow (subtle, unobtrusive).
Hover: Base fill + INK arrow — inverse of a standard button, works on dark bg.
!important on color required to beat global a { color !important }. */
.site-footer .backtotopglobal {
background-color: transparent;
border: none !important;
color: var(--skin-surface) !important;
border-radius: 2px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-footer .backtotopglobal:hover {
background-color: var(--skin-base) !important;
border-color: var(--skin-base) !important;
color: var(--skin-ink) !important;
}
.site-footer .backtotopglobal svg {
fill: currentColor;
}
/* ═══════════════════════════════════════════════════════════════════
TILE COLOR CONTEXTS
─────────────────────────────────────────────────────────────────
Add one of these classes to any Genesis Block Container or
Gutenberg Group block to get the full color treatment:
.tile--surface Surface 2 bg (#E3DBC6) — newsletter / list tile
.tile--ink INK bg (#1A2A3F) — Matching Matrix tile
.tile--oxblood Oxblood bg (#6E2127) — Instagram tile
.tile--brass Brass bg (#B58B3A) — YouTube tile
Every child element (headings, body, eyebrow, cta, links) inherits
the correct foreground color automatically.
═══════════════════════════════════════════════════════════════════ */
/* ── Shared tile geometry — targets all tile--* variants without requiring a separate .tile class.
overflow: hidden prevents content from breaking out of the ratio box.
position: relative is required for .stretched-link to work correctly. ── */
[class*="tile--"] {
position: relative;
overflow: hidden;
}
/* .stretched-link — add this class to any CTA inside a tile via Gutenberg
Advanced → CSS class(es). Makes the entire tile clickable via an invisible
::after overlay. Tiles with forms or multiple interactive elements should
skip this class and keep their normal link behavior. */
.stretched-link::after {
content: '';
position: absolute;
inset: 0;
}
/* WordPress core :where(.is-layout-grid) applies gap: 0.5em to all grid layouts.
Zero it out for nav tile grid inside the homepage content area so tile grids are flush. */
.homepage-main-content-area .homepage-nav-tiles .is-layout-grid {
gap: 0 !important;
}
/* ── SURFACE 2 tile: INK text, Brass CTAs, Oxblood italic emphasis ── */
.tile--surface {
background-color: var(--skin-surface) !important;
}
.tile--surface h1, .tile--surface h2, .tile--surface h3,
.tile--surface h4, .tile--surface h5, .tile--surface h6 {
color: var(--skin-ink) !important;
}
.tile--surface p,
.tile--surface li {
color: var(--skin-ink) !important;
}
.tile--surface .eyebrow {
color: var(--skin-ink-2) !important;
}
.tile--surface em,
.tile--surface i {
color: var(--skin-accent) !important;
font-style: italic;
}
.tile--surface .cta,
.tile--surface a.cta {
color: var(--skin-brass) !important;
}
.tile--surface a {
color: var(--skin-ink) !important;
}
.tile--surface a:hover {
color: var(--skin-accent) !important;
}
/* Button links inside tile--surface are tags and inherit the a:hover oxblood rule above.
Override with higher specificity to keep button text cream on hover. */
.tile--surface .wp-block-button__link,
.tile--surface .gb-button,
.tile--surface .convertkit-formtrigger {
color: var(--skin-base) !important;
}
.tile--surface .wp-block-button__link:hover,
.tile--surface .gb-button:hover,
.tile--surface .convertkit-formtrigger:hover {
color: var(--skin-base) !important;
}
/* ── INK tile: BASE text, Brass CTAs, Brass italic emphasis ── */
.tile--ink {
background-color: var(--skin-ink) !important;
}
.tile--ink h1, .tile--ink h2, .tile--ink h3,
.tile--ink h4, .tile--ink h5, .tile--ink h6 {
color: var(--skin-base) !important;
}
.tile--ink p,
.tile--ink li {
color: var(--skin-surface) !important;
}
.tile--ink .eyebrow {
color: var(--skin-brass) !important;
}
.tile--ink em,
.tile--ink i {
color: var(--skin-brass) !important;
font-style: italic;
}
.tile--ink .cta,
.tile--ink a.cta {
color: var(--skin-brass) !important;
}
.tile--ink a {
color: var(--skin-surface) !important;
}
.tile--ink a:hover {
color: var(--skin-base) !important;
opacity: 1;
}
/* ── OXBLOOD tile: BASE text throughout, BASE CTAs ── */
.tile--oxblood {
background-color: var(--skin-accent) !important;
}
.tile--oxblood h1, .tile--oxblood h2, .tile--oxblood h3,
.tile--oxblood h4, .tile--oxblood h5, .tile--oxblood h6 {
color: var(--skin-base) !important;
}
.tile--oxblood p,
.tile--oxblood li {
color: rgba(241, 236, 223, 0.8) !important;
}
.tile--oxblood .eyebrow {
color: rgba(241, 236, 223, 0.65) !important;
}
.tile--oxblood em,
.tile--oxblood i {
color: var(--skin-base) !important;
font-style: italic;
}
.tile--oxblood .cta,
.tile--oxblood a.cta {
color: var(--skin-base) !important;
}
.tile--oxblood a {
color: var(--skin-base) !important;
}
.tile--oxblood a:hover {
opacity: 0.8;
color: var(--skin-base) !important;
}
/* ── BRASS tile: INK text throughout, INK CTAs ── */
.tile--brass {
background-color: var(--skin-brass) !important;
}
.tile--brass h1, .tile--brass h2, .tile--brass h3,
.tile--brass h4, .tile--brass h5, .tile--brass h6 {
color: var(--skin-ink) !important;
}
.tile--brass p,
.tile--brass li {
color: var(--skin-ink) !important;
}
.tile--brass .eyebrow {
color: var(--skin-ink-2) !important;
}
.tile--brass em,
.tile--brass i {
color: var(--skin-ink) !important;
font-style: italic;
}
.tile--brass .cta,
.tile--brass a.cta {
color: var(--skin-ink) !important;
}
.tile--brass a {
color: var(--skin-ink) !important;
}
.tile--brass a:hover {
opacity: 0.7;
color: var(--skin-ink) !important;
}
/* ═══════════════════════════════════════════════════════════════════
HEADLINE / HERO BAND
─────────────────────────────────────────────────────────────────
Add class "eg-section--surface" to any section or Group block to
get the Surface 2 background treatment that lifts the hero area
off the base cream page background.
═══════════════════════════════════════════════════════════════════ */
.eg-section--surface {
background-color: var(--skin-surface) !important;
}
.eg-section--surface h1, .eg-section--surface h2,
.eg-section--surface h3, .eg-section--surface h4 {
color: var(--skin-ink);
}
.eg-section--surface p {
color: var(--skin-ink);
}
.eg-section--surface .eyebrow {
color: var(--skin-ink-2);
}
.eg-section--surface em,
.eg-section--surface i {
color: var(--skin-accent); /* Oxblood italic emphasis on Surface 2 */
font-style: italic;
}
/* "LEARN MORE →" text CTA on Surface 2 band */
.eg-section--surface .cta,
.eg-section--surface a.cta {
color: var(--skin-brass) !important;
}
/* SUBSCRIBE button on Surface 2 band — INK fill */
.eg-section--surface .wp-block-button__link,
.eg-section--surface .gb-button {
background-color: var(--skin-ink);
color: var(--skin-base);
}
.eg-section--surface .wp-block-button__link:hover,
.eg-section--surface .gb-button:hover {
opacity: 0.85;
color: var(--skin-base) !important;
}
/* ═══════════════════════════════════════════════════════════════════
LEGACY COLOR NEUTRALIZATION — compiled main.css overrides
─────────────────────────────────────────────────────────────────
The compiled SCSS contains hardcoded colors from the old teal
palette (#24808e, #8dbabf, #538d93) plus cold whites and greys
(#ffffff, #EEEEEE, #CCCCCC, #F5F5F5). These rules override every
instance that is not already covered by the skin's component rules.
═══════════════════════════════════════════════════════════════════ */
/* Old "light" button variant — teal mapped to INK */
.wp-block-button.light .wp-block-button__link,
.wp-block-button.light .gb-button {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
}
.wp-block-button.light .wp-block-button__link:hover,
.wp-block-button.light .gb-button:hover {
background-color: var(--skin-ink) !important;
opacity: 0.85;
}
/* Nav menu ".button" and ".light" item variants — old teal */
.menu .menu-item.button a,
.menu .menu-item.light a {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
}
.menu .menu-item.button a:hover,
.menu .menu-item.light a:hover {
background-color: var(--skin-accent) !important;
color: var(--skin-base) !important;
}
/* WordPress block editor preset classes — old teal palette */
.has-og-eg-blue-background-color,
.has-eg-blue-background-color {
background-color: var(--skin-surface) !important;
}
.has-og-eg-blue-color,
.has-eg-blue-color {
color: var(--skin-accent) !important;
}
/* Table — remove compiled border on td/th, use subtle bottom rule only */
.wp-block-table table td,
.wp-block-table table th {
border: none !important;
border-bottom: 1px solid var(--skin-surface) !important;
}
/* Remove outer table border too */
.wp-block-table table {
border: none !important;
}
/* Striped table — zebra rows from cold #EEEEEE to Surface 2 */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: var(--skin-surface) !important;
}
.wp-block-table.is-style-stripes {
border-color: var(--skin-surface) !important;
}
/* Pagination — active page from old teal to Oxblood */
.pagination ul li.active > a {
background: var(--skin-accent) !important;
color: var(--skin-base) !important;
}
/* Pagination — removing background color on hover from mega-selector */
.pagination ul li:hover a {
background: none;
}
/* Shared Counts social share buttons — cold greys mapped to palette */
.shared-counts-wrap .shared-counts-button {
background-color: var(--skin-surface) !important;
color: var(--skin-ink) !important;
border-color: var(--skin-surface) !important;
}
.shared-counts-wrap .shared-counts-button:hover {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
}
.shared-counts-wrap .shared-counts-button .shared-counts-count {
background-color: var(--skin-surface) !important;
color: var(--skin-ink-2) !important;
}
/* Shared Counts email/print button variants */
.shared-counts-wrap .email.shared-counts-button,
.shared-counts-wrap .print.shared-counts-button {
background-color: var(--skin-surface) !important;
}
.shared-counts-wrap .email.shared-counts-button:hover,
.shared-counts-wrap .print.shared-counts-button:hover {
background-color: var(--skin-ink) !important;
color: var(--skin-base) !important;
}
/* .post-info — entry meta band uses cold #f0f0f0 border top and bottom.
Replace with a single Surface 2 border-bottom; remove the top border
since the post-title-area above it already defines the separation. */
.post-info {
border: none !important;
border-bottom: 1px solid var(--skin-surface) !important;
}
/* .after-entry .post-footer-meta — blurred #ccc box-shadow relic from old design.
Replace with a clean Surface 2 top rule matching the hr/separator style. */
.after-entry .post-footer-meta {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
border-top: 1px solid var(--skin-surface);
}
/* ═══════════════════════════════════════════════════════════════════
SEPARATORS — hr and wp-block-separator
─────────────────────────────────────────────────────────────────
Target: WordPress core style.min.css approach — border: none +
border-top only. No height, no color, no opacity, no position.
main.css adds: height: 32px, position: relative, width: 100%
Those are reset here so spacing is controlled by margin only.
═══════════════════════════════════════════════════════════════════ */
hr,
.wp-block-separator {
border: none !important;
border-top: 1px solid var(--skin-surface) !important;
height: auto !important;
position: static !important;
background: none !important;
}
/* On dark tiles — use semi-transparent BASE so line remains visible */
.tile--ink hr,
.tile--ink .wp-block-separator,
.tile--oxblood hr,
.tile--oxblood .wp-block-separator,
.tile--brass hr,
.tile--brass .wp-block-separator,
.eg-section--dark hr,
.eg-section--dark .wp-block-separator {
border-top-color: rgba(241, 236, 223, 0.3) !important;
background-color: rgba(241, 236, 223, 0.3) !important;
}
/* On Surface 2 tile — slightly darker than the background to stay readable */
.tile--surface hr,
.tile--surface .wp-block-separator,
.eg-section--surface hr,
.eg-section--surface .wp-block-separator {
border-top-color: rgba(26, 42, 63, 0.15) !important;
background-color: rgba(26, 42, 63, 0.15) !important;
}
/* ═══════════════════════════════════════════════════════════════════
SHADOWS — simplified, using SURFACE 2 only
═══════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
GREY BOX-SHADOW RELIC ELIMINATION
_base-styles.scss applies "0 -30px 20px -30px #CCCCCC" as a global
bleed shadow to a long compiled selector list including:
img, .related-post, .singular .relatedPost, #ez-toc-container,
.gb-block-testimonial, and Lasso containers.
Treatment per element:
img, .gb-block-testimonial — shadow removed, no replacement
.related-post, .relatedPost — shadow removed, Surface 2 background
#ez-toc-container — shadow removed, Surface 2 border added
───────────────────────────────────────────────────────────────── */
/* .related-post and .singular .relatedPost (capital P — different class)
No border — use Surface 2 background to create visual separation instead. */
.related-post,
.singular .relatedPost {
background-color: var(--skin-surface) !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
border: none !important;
}
/* Table of contents block — zero shadow, give it Surface 2 border */
#ez-toc-container {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
border: 1px solid var(--skin-surface) !important;
background-color: var(--skin-base) !important;
}
/* Genesis Blocks testimonial */
.gb-block-testimonial {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
/* cancels mega-selector box shadow */
.gb-block-testimonial .gb-testimonial-text a {
box-shadow: 0 0 0;
}
/* Images — remove the bleed shadow applied globally in _base-styles.scss */
img {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.wp-block-genesis-blocks-gb-container {
box-shadow: none;
}
/* ═══════════════════════════════════════════════════════════════════
WORDPRESS ADMIN BAR — isolate from global link color override
─────────────────────────────────────────────────────────────────
The global a { color: var(--skin-accent) !important } rule punches
through #wpadminbar's own scoped styles, turning all admin bar links
Oxblood. Using color: inherit pulled --skin-ink (dark navy) which
was invisible on the dark admin bar. Hardcoding #eee / #fff matches
WordPress's native admin bar link colors and sidesteps both issues.
Logged-in view only — no effect on public-facing pages.
═══════════════════════════════════════════════════════════════════ */
#wpadminbar,
#wpadminbar a,
#wpadminbar a:focus,
#wpadminbar a:active,
#wpadminbar .ab-item,
#wpadminbar .ab-item:focus {
color: #eee !important;
}
#wpadminbar a:hover,
#wpadminbar .ab-item:hover,
#wpadminbar li:hover > .ab-item {
color: #fff !important;
}
/* ═══════════════════════════════════════════════════════════════════
ACCESSIBILITY — SKIP LINK RESTORED
═══════════════════════════════════════════════════════════════════ */
/* _layout.scss sets .genesis-skip-link { display: none } — WCAG failure. */
.genesis-skip-link {
display: block !important;
visibility: visible !important;
position: absolute;
left: 0;
top: 0;
z-index: 10000;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
overflow: hidden;
}
.genesis-skip-link a:focus,
.genesis-skip-link a:focus-visible {
clip: auto !important;
height: auto;
width: auto;
padding: 10px 18px;
background-color: var(--skin-ink);
color: var(--skin-base);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
border-radius: 0 0 3px 0;
}
/* ═══════════════════════════════════════════════════════════════════
ACCESSIBILITY — FOCUS RINGS RESTORED
═══════════════════════════════════════════════════════════════════ */
/* _base-styles.scss removes outline on focused headings — WCAG failure. */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
.h1:focus, .h2:focus, .h3:focus, .h4:focus {
outline: 2px solid var(--skin-accent);
outline-offset: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible,
.gb-button:focus-visible {
outline: 2px solid var(--skin-accent);
outline-offset: 3px;
}
/* ═══════════════════════════════════════════════════════════════════
SIDEBAR HEADING SCALE
─────────────────────────────────────────────────────────────────
Sidebar headings inherit the full type scale, which is too large
in a narrow column. This scoped override caps them to a smaller
contextual scale. If you manually convert a sidebar h2 to .h3 it
will still pick up the correct sidebar size below.
Fallback: any h2 inside .sidebar or .widget-area that you haven't
manually reclassified will be capped at h4 size.
═══════════════════════════════════════════════════════════════════ */
.sidebar h1, .sidebar .h1,
.widget-area h1, .widget-area .h1 {
font-size: clamp(1.625rem, 2.62vw + 0.905rem, 3rem) !important; /* h3 size */
}
/* Sidebar h2 fallback — prevents oversized headings on unedited widgets */
.sidebar h2, .sidebar .h2,
.widget-area h2, .widget-area .h2,
.sidebar .widget-title,
.widget-area .widget-title {
font-size: clamp(1.25rem, 1.43vw + 0.857rem, 2rem) !important; /* h4 size */
}
.sidebar h3, .sidebar .h3,
.widget-area h3, .widget-area .h3 {
font-size: clamp(0.9375rem, 0.60vw + 0.774rem, 1.25rem) !important; /* h5 size */
}
.sidebar h4, .sidebar .h4,
.sidebar h5, .sidebar .h5,
.sidebar h6, .sidebar .h6,
.widget-area h4, .widget-area .h4,
.widget-area h5, .widget-area .h5,
.widget-area h6, .widget-area .h6 {
font-size: clamp(0.8125rem, 0.36vw + 0.714rem, 1rem) !important; /* h6 size */
}
/* ═══════════════════════════════════════════════════════════════════
UTILITY HEADING CLASSES (.h1 – .h6)
─────────────────────────────────────────────────────────────────
Apply to any element (p, div, span, etc.) to make it visually
mimic a heading level without changing the HTML tag.
Font sizes are already applied via the "h1, .h1 { ... }" rules
in the TYPE SCALE section above. This block ensures the full
typographic treatment (font-family, weight, tracking, color) also
applies when the class is on a non-heading element.
═══════════════════════════════════════════════════════════════════ */
.h1, .h2, .h3, .h4 {
font-family: var(--font-serif) !important;
font-weight: 400 !important;
text-transform: none !important;
color: var(--skin-ink);
text-wrap: balance;
display: block;
}
.h1 { letter-spacing: -0.025em; }
.h2 { letter-spacing: -0.02em; }
.h3 { letter-spacing: -0.015em; }
.h4 { letter-spacing: -0.01em; }
.h5, .h6 {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
text-transform: none !important;
color: var(--skin-ink);
display: block;
}
.h5 { letter-spacing: 0.01em; }
.h6 { letter-spacing: 0.01em; }
/* ═══════════════════════════════════════════════════════════════════
HOMEPAGE MARKUP CLASSES (V3.1 Markup Map)
═══════════════════════════════════════════════════════════════════ */
/*
* .eyebrow — small all-caps label above headings on LIGHT backgrounds
* Uses INK 2. On dark/oxblood tiles it switches to BRASS (see tile rules below).
*/
.eyebrow {
display: block;
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important; /* !important beats body p li { font-size !important } */
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--skin-ink-2);
margin-bottom: 0.6em;
text-wrap: nowrap;
}
/* On dark/oxblood/brass tiles: eyebrow uses BRASS (per style guide) */
.tile[style*="background"] .eyebrow,
.tile--dark .eyebrow,
.tile--navy .eyebrow,
.tile--oxblood .eyebrow {
color: var(--skin-brass);
}
/* On BASE-colored tiles: eyebrow stays INK 2 */
.tile--base .eyebrow {
color: var(--skin-ink-2);
}
/*
* .num — decorative italic numeral in principles strip
*/
.num {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(0.75rem, 1vw, 0.875rem);
color: var(--skin-ink-2);
margin-bottom: 0.4em;
}
/*
* .cta — inline text CTA on light backgrounds
* "LEARN MORE →", "@EFFORTLESSGENT →", "WATCH · 12 MIN →"
* Uses BRASS on light surfaces; inherits on dark tiles (cream by default).
*/
.cta {
display: inline-block;
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--skin-brass);
transition: opacity 0.2s ease;
}
.cta:hover {
opacity: 0.8;
text-decoration: none;
}
/* On dark/colored tiles, .cta inherits the tile's text color (cream) */
.tile .cta {
color: inherit;
}
/*
* .meta — secondary micro-copy (read times, dates, fine print)
*/
.meta {
display: block;
font-family: var(--font-sans);
font-size: clamp(0.6875rem, 0.85vw, 0.75rem);
color: var(--skin-ink-2);
letter-spacing: 0.02em;
}
/*
* .cat — article card category label on cream surfaces
* INK 2, not Brass. Brass is for dark-tile eyebrows only (per style guide).
*/
.cat {
display: block;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--skin-ink-2);
margin-bottom: 0.35em;
text-decoration: none;
}
/*
* .brand — site name wordmark in footer (on dark INK background)
*/
.brand {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1rem, 1.4vw, 1.125rem);
letter-spacing: -0.01em;
color: var(--skin-base);
margin-bottom: 0.4em;
}
/*
* .tile — mosaic clickable cards
* Layout handled by existing block styles; this normalises link behavior.
*/
.tile {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.tile:hover,
.tile:focus {
text-decoration: none;
color: inherit;
}
.tile h2 {
color: inherit;
}
/*
* .card — featured article link cards ("Six articles to start with")
*/
.card {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.card:hover,
.card:focus {
text-decoration: none;
}
.card:hover h3,
.card:focus h3 {
color: var(--skin-accent);
}
/*
* .btn — general-purpose filled button utility class
* INK fill (not Oxblood — subscribe/utility CTAs, not purchase CTAs).
* Note: the header nav CTA uses .nav-cta (a menu item class), not .btn.
* Use .btn on standalone anchor tags or block editor buttons that need
* the INK pill treatment outside the nav context.
*/
.btn {
display: inline-block;
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
background-color: var(--skin-ink);
color: var(--skin-base) !important;
padding: 0.55em 1.1em;
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
white-space: nowrap;
}
.btn:hover {
opacity: 0.85;
color: var(--skin-base) !important;
transform: translateY(-1px);
text-decoration: none;
}
.btn:active {
opacity: 0.9;
transform: scale(0.98) translateY(0);
}
/* main.css adds a ::before pseudo-element hairline to hr and .wp-block-separator
(position: absolute, #f0f0f0). Zeroed out — our border-top handles the line. */
hr::before,
.wp-block-separator::before {
display: none !important;
}
/* Homepage separator alignment widths — mirrors the gb-container-inside system.
Separators are the element itself (no inner wrapper), so max-width applies directly.
Scoped to .homepage-main-content-area only. */
.homepage-main-content-area hr:not(.alignwide):not(.alignfull),
.homepage-main-content-area .wp-block-separator:not(.alignwide):not(.alignfull) {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.homepage-main-content-area hr.alignwide,
.homepage-main-content-area .wp-block-separator.alignwide {
max-width: 80vw !important;
margin-left: auto !important;
margin-right: auto !important;
}
.homepage-main-content-area hr.alignfull,
.homepage-main-content-area .wp-block-separator.alignfull {
max-width: 100% !important;
width: 100% !important;
}
/* ═══════════════════════════════════════════════════════════════════
UTILITY CLASSES
Modernized from legacy _blocks-base.scss "Quick Adjustments" section.
.uppercase — unchanged, no skin conflicts.
.small — fluid scale replacing static 13px.
.quiet — on-palette ink-2 replacing off-palette brand-color mid-grey.
.notitlecase — removes capitalize from any heading outside entry-content (defined near headings).
.titlecase — re-applies capitalize to a heading inside entry-content (defined near headings).
═══════════════════════════════════════════════════════════════════ */
/* ── Fluid spacing utilities ─────────────────────────────────────────
Based on the --space-* tokens defined in :root.
Apply via Gutenberg Advanced → CSS class(es).
Naming:
p-* all sides py-* top + bottom px-* left + right
pt-* top only pb-* bottom only
mt-* margin top mb-* margin bottom
Sizes: xs · sm · md · lg · xl · 2xl · 3xl
!important needed to override Gutenberg inline padding/margin styles.
──────────────────────────────────────────────────────────────────── */
/* padding — all sides */
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }
/* padding — vertical (top + bottom) */
.py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.py-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.py-3xl { padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }
/* padding — horizontal (left + right) */
.px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.px-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
.px-3xl { padding-left: var(--space-3xl) !important; padding-right: var(--space-3xl) !important; }
/* padding — top only */
.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pt-2xl { padding-top: var(--space-2xl) !important; }
.pt-3xl { padding-top: var(--space-3xl) !important; }
/* padding — bottom only */
.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }
.pb-2xl { padding-bottom: var(--space-2xl) !important; }
.pb-3xl { padding-bottom: var(--space-3xl) !important; }
/* margin — all sides */
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }
.m-2xl { margin: var(--space-2xl) !important; }
.m-3xl { margin: var(--space-3xl) !important; }
/* margin — vertical (top + bottom) */
.my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.my-sm { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
.my-md { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-lg { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.my-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
.my-3xl { margin-top: var(--space-3xl) !important; margin-bottom: var(--space-3xl) !important; }
/* margin — horizontal (left + right) */
.mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mx-sm { margin-left: var(--space-sm) !important; margin-right: var(--space-sm) !important; }
.mx-md { margin-left: var(--space-md) !important; margin-right: var(--space-md) !important; }
.mx-lg { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
.mx-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.mx-2xl { margin-left: var(--space-2xl) !important; margin-right: var(--space-2xl) !important; }
.mx-3xl { margin-left: var(--space-3xl) !important; margin-right: var(--space-3xl) !important; }
/* margin — top */
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }
/* margin — bottom */
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }
/* ── Max-width utilities ─────────────────────────────────────────────
Apply to any element (heading, paragraph, image, container) via
Gutenberg Advanced → CSS class(es) to constrain its width.
Useful for forcing a headline to reflow across more lines, narrowing
a form, capping an image, or any other width-constrained layout need.
margin-inline: auto ensures the element stays centered.
!important required to override Gutenberg inline width/max-width styles.
xs 400px — very narrow: pull quote, short label, small form
sm 560px — narrow heading, 2-column intro copy
md 720px — article measure, medium heading
lg 900px — wide content block, slightly constrained hero
xl 1100px — near-full width within the 1200px site wrap */
.max-w-xs { max-width: 400px !important; margin-inline: auto; }
.max-w-sm { max-width: 560px !important; margin-inline: auto; }
.max-w-md { max-width: 720px !important; margin-inline: auto; }
.max-w-lg { max-width: 900px !important; margin-inline: auto; }
.max-w-xl { max-width: 1100px !important; margin-inline: auto; }
/* .uppercase — no change needed; text-transform: uppercase in compiled CSS is uncontested */
/* .small — fluid equivalent of legacy 13px static value.
!important required: compiled p.small chains can have elevated specificity. */
.small {
font-size: clamp(0.75rem, 0.4vw + 0.65rem, 0.875rem) !important;
}
/* .quiet — opacity fade rather than a specific color, so it works in any background context.
color: inherit !important cancels compiled .quiet { color: #8f8f8f } from main.css,
letting opacity fade against the correct skin color instead of legacy grey.
Safe here since .quiet is text-only, no child images to accidentally fade. */
.quiet {
color: inherit !important;
opacity: 0.5;
}
/* ═══════════════════════════════════════════════════════════════════
LASSO AFFILIATE PLUGIN
Colors and display settings are controlled via Lasso → Settings →
Display in the WP admin. Add any skin-level corrections here.
═══════════════════════════════════════════════════════════════════ */
/* Cutter display: zero out box-shadow and border from lasso-live stylesheet. */
.lasso-container .lasso-cutter,
.entry-content .wp-block-affiliate-plugin-lasso .lasso-container .lasso-cutter {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
border: none !important;
}
/* Title link: remove underline forced by lasso-live stylesheet.
Multiple selectors to beat the layered !important chain. */
.lasso-cutter .lasso-title,
.lasso-list.lasso-cutter li .lasso-title,
a.lasso-title,
.lasso-container a.lasso-title,
.entry-content .wp-block-affiliate-plugin-lasso a.lasso-title {
text-decoration: none !important;
border-bottom: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
GENESIS BLOCKS — TESTIMONIAL
Zeroes out the hardcoded grey background and resets text to
standard skin colors. Name uses h4 scale (Instrument Serif, ~1.25rem)
since the block outputs an h2 but it should read as a label.
!important required throughout — Genesis Blocks sets background and
color in its own stylesheet; name/title carry inline style attributes.
═══════════════════════════════════════════════════════════════════ */
.gb-block-testimonial {
background: transparent !important;
color: var(--skin-text) !important;
border-radius: 0 !important;
}
.gb-block-testimonial .gb-testimonial-text {
color: var(--skin-text) !important;
}
/* Name — h2 in the markup, styled down to h4 scale */
.gb-block-testimonial .gb-testimonial-name {
font-family: var(--font-serif) !important;
font-size: 1.25rem !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
color: var(--skin-text) !important;
}
/* Title / role line */
.gb-block-testimonial .gb-testimonial-title {
font-family: var(--font-sans) !important;
font-size: 0.8125rem !important;
color: var(--skin-text-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════════
TILE CONTEXT — BUTTON THEMING
Buttons inside tile containers adapt their color automatically.
Covers WP buttons, Genesis Blocks buttons, .btn, and third-party
form submit buttons (ConvertKit, etc.).
═══════════════════════════════════════════════════════════════════ */
/* Reusable selector set — buttons inside any tile */
.tile--ink .wp-block-button__link,
.tile--ink .gb-button,
.tile--ink .btn,
.tile--ink .formkit-submit,
.tile--ink input[type="submit"],
.tile--ink button[type="submit"] {
background-color: #B58B3A !important; /* Antique Brass */
color: #F1ECDF !important; /* Cream text */
border: none !important;
}
.tile--ink .wp-block-button__link:hover,
.tile--ink .gb-button:hover,
.tile--ink .btn:hover,
.tile--ink .formkit-submit:hover,
.tile--ink input[type="submit"]:hover,
.tile--ink button[type="submit"]:hover {
background-color: #8E6A24 !important; /* Brass dark */
color: #F1ECDF !important;
}
/* tile--oxblood → Cream button, Ink text */
.tile--oxblood .wp-block-button__link,
.tile--oxblood .gb-button,
.tile--oxblood .btn,
.tile--oxblood .formkit-submit,
.tile--oxblood input[type="submit"],
.tile--oxblood button[type="submit"] {
background-color: #F1ECDF !important; /* Cream */
color: #1A2A3F !important; /* Ink text */
border: none !important;
}
.tile--oxblood .wp-block-button__link:hover,
.tile--oxblood .gb-button:hover,
.tile--oxblood .btn:hover,
.tile--oxblood .formkit-submit:hover,
.tile--oxblood input[type="submit"]:hover,
.tile--oxblood button[type="submit"]:hover {
background-color: #E3DBC6 !important; /* Surface on hover */
color: #1A2A3F !important;
}
/* tile--surface / tile--cream → default Oxblood button already works;
no override needed unless you want a specific treatment later. */
/* ═══════════════════════════════════════════════════════════════════
FULL-WIDTH PAGE FIXES
═══════════════════════════════════════════════════════════════════ */
/* main.css sets margin-bottom: 64px on .entry-content for post/comment
spacing. On full-width pages sections handle their own padding,
so the extra margin just creates a gap above the footer. */
.full-width-content .entry-content {
margin-bottom: 0;
}
/* ═══════════════════════════════════════════════════════════════════
UTILITY CLASSES
═══════════════════════════════════════════════════════════════════ */
/* Circular image — apply to the image block's Additional CSS Class */
.img-circle img,
.img-circle {
border-radius: 50% !important;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════════
CONVERTKIT / KIT FORMS
═══════════════════════════════════════════════════════════════════ */
/* Our site h2 clamp() is too large inside Kit modals and inline forms.
Override to a fixed size that works at popup scale. */
.formkit-form h2,
.seva-form h2,
.formkit-modal h2 {
font-size: 3rem !important;
line-height: 1.2 !important;
}
/* Disclaimer text gets eyebrow treatment */
.formkit-form .formkit-disclaimer p,
.seva-form .formkit-disclaimer p {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--skin-ink-2) !important;
opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════════
SIDEBAR WIDGETS
═══════════════════════════════════════════════════════════════════ */
/* Target individual sidebar widgets by their WP-generated ID.
Find the ID in DevTools: the