keeps it out of the
global body-link recolor (a:not([class*="jj-"])). */
.jj-chips { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.jj-chip {
display: inline-block;
font-family: var(--jj-mono);
font-size: 13px;
letter-spacing: .02em;
color: var(--jj-ink);
background: var(--jj-bone);
border: 1px solid var(--jj-paper-2);
border-radius: 2px;
padding: 8px 14px;
text-decoration: none;
}
.jj-chip:hover { border-color: var(--jj-verm); color: var(--jj-verm); }
.jj-field--ink .jj-chip { color: var(--jj-bone); background: var(--jj-ink-2); border-color: rgba(244, 239, 231, .14); }
.jj-field--ink .jj-chip:hover { border-color: var(--jj-gold); color: var(--jj-gold); }
/* guides directory — categories in two columns, each a titled link list */
.jj-guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: var(--s6); }
.jj-guides__h {
font-family: var(--jj-display);
font-weight: 400;
font-size: 22px;
color: var(--jj-ink);
margin: 0 0 var(--s4);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--jj-paper-2);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s3);
}
.jj-guides__n { font-family: var(--jj-mono); font-size: 12px; color: var(--jj-ink-30); flex: none; }
.jj-guides__list { list-style: none; margin: 0; padding: 0; }
.jj-guides__list li { padding: 7px 0; border-bottom: 1px solid rgba(23, 20, 15, .06); }
.jj-guides__list li:last-child { border-bottom: 0; }
.jj-guides__list a { font-size: 15px; line-height: 1.4; }
@media (max-width: 640px) { .jj-guides { grid-template-columns: 1fr; } }
/* ==========================================================================
Photo hero band — the signature opening for visual pages (style pages,
portfolio, bio). Rendered by jj-design.php outside the content container,
so it is full-bleed by construction.
========================================================================== */
.jj-hero-band {
position: relative;
min-height: clamp(300px, 42vw, 520px);
display: flex;
align-items: center;
background: var(--jj-ink);
overflow: hidden;
}
.jj-hero-band__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focus, center 35%);
display: block;
}
/* Scrim carries the type, not luck. With the copy centered on the left, the
horizontal ramp does the work — the right side of the photograph stays
almost clean, so the image still reads as the hero. */
.jj-hero-band::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(23, 20, 15, .90) 0%,
rgba(23, 20, 15, .70) 30%,
rgba(23, 20, 15, .18) 58%,
rgba(23, 20, 15, 0) 78%),
linear-gradient(180deg,
rgba(23, 20, 15, .38) 0%,
rgba(23, 20, 15, .12) 45%,
rgba(23, 20, 15, .48) 100%);
}
.jj-hero-band__inner {
position: relative;
z-index: 1;
width: 100%;
padding: var(--s8) var(--frame-pad);
}
/* eyebrow: readable bone type with the gold reduced to a leading rule —
gold at 11px over a mid-grey photograph never had the contrast */
.jj-hero-band__eyebrow {
display: flex;
align-items: center;
gap: var(--s3);
font-family: var(--jj-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--jj-bone);
margin: 0 0 var(--s4);
text-shadow: 0 1px 14px rgba(0, 0, 0, .85);
}
.jj-hero-band__eyebrow::before {
content: '';
flex: none;
width: 30px;
height: 2px;
background: var(--jj-gold);
}
.jj-hero-band h1 {
font-family: var(--jj-display);
font-weight: 400;
font-size: var(--t-h1);
line-height: 1.02;
color: var(--jj-bone);
margin: 0;
text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
.jj-hero-band__sub {
font-family: var(--jj-body);
font-size: 16.5px;
line-height: 1.55;
color: var(--jj-bone);
opacity: .92;
max-width: none;
margin: var(--s4) 0 0;
text-shadow: 0 1px 16px rgba(0, 0, 0, .9);
}
/* Compact variant — gallery pages. No photograph: the grid below is the
hero, and this just names the room and states its depth. Sits on the same
ink field as the gallery so header and work read as one environment. */
/* One step lighter than the sticky header so the two dark blocks read as
separate layers instead of one mass; the gallery below returns to --jj-ink,
giving header / page-head / grid a subtle three-step depth. */
.jj-hero-band--compact {
min-height: 0;
background: var(--jj-ink-2);
box-shadow: inset 0 1px 0 rgba(244, 239, 231, .07);
padding: clamp(34px, 4vw, 56px) 0 clamp(24px, 2.6vw, 34px);
}
.jj-hero-band--compact::after { display: none; }
.jj-hero-band--compact .jj-hero-band__inner { padding: 0 var(--gutter); }
/* A page header is a signpost, not the homepage hero — deliberately a step
down the scale so the work below stays the loudest thing on the page. */
/* gold rule accent above the title — same device as the page-lede header,
so compact gallery headers match the plain content-page headers exactly */
.jj-hero-band--compact .jj-hero-band__inner { text-align: center; }
.jj-hero-band--compact .jj-hero-band__sub { margin-left: auto; margin-right: auto; }
.jj-hero-band--compact .jj-hero-band__inner::before {
content: '';
display: block;
width: 34px;
height: 2px;
background: var(--jj-gold);
margin: 0 auto var(--s4);
}
.jj-hero-band--compact h1 {
text-shadow: none;
font-size: clamp(26px, 3vw, 42px);
}
.jj-hero-band--compact .jj-hero-band__eyebrow,
.jj-hero-band--compact .jj-hero-band__sub { text-shadow: none; }
.jj-hero-band--compact .jj-hero-band__sub {
font-size: 15.5px;
color: var(--jj-bone-dim);
opacity: 1;
margin-top: var(--s3);
}
/* meta row: descriptor left, depth right — keeps the header to three lines */
.jj-hero-band__topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
flex-wrap: wrap;
margin-bottom: var(--s4);
padding-bottom: var(--s3);
border-bottom: 1px solid rgba(244, 239, 231, .12);
}
.jj-hero-band__topline .jj-hero-band__eyebrow { margin: 0; }
.jj-hero-band__count {
font-family: var(--jj-mono);
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--jj-gold);
margin: 0;
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.jj-hero-band__inner { animation: jj-rise .55s ease-out both; }
}
@media (max-width: 640px) {
.jj-hero-band { min-height: 300px; }
.jj-hero-band__inner { padding: var(--s7) var(--gutter); }
/* narrow viewports: the horizontal ramp can't cover, so darken evenly */
.jj-hero-band::after {
background: linear-gradient(180deg, rgba(23, 20, 15, .55) 0%, rgba(23, 20, 15, .68) 100%);
}
}
.jj-gallery__item figcaption {
font-family: var(--jj-mono);
font-size: 11px;
letter-spacing: .1em;
color: #8d8371;
padding-top: 6px;
}
.jj-port-cta { margin-top: 56px; text-align: center; }
/* lightbox */
.jj-lightbox { border: 0; padding: 0; background: rgba(23, 20, 15, .96); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.jj-lightbox::backdrop { background: rgba(23, 20, 15, .96); }
.jj-lightbox figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.jj-lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 2px; }
.jj-lightbox figcaption { font-family: var(--jj-mono); font-size: 12px; letter-spacing: .12em; color: var(--jj-bone-dim); text-transform: uppercase; text-align: center; padding: 0 20px; }
.jj-lightbox button {
position: fixed;
background: none;
border: 0;
color: var(--jj-bone);
font-size: 34px;
cursor: pointer;
padding: 18px;
line-height: 1;
}
.jj-lightbox .jj-lb-close { top: 10px; right: 14px; }
.jj-lightbox .jj-lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.jj-lightbox .jj-lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
.jj-lightbox button:hover { color: var(--jj-gold); }
/* ==========================================================================
Site-wide field system — inner pages share the homepage's full-bleed
ink/paper rhythm. Selected blocks escape Gutenberg's constrained layout
and paint edge-to-edge; their inner content re-centers via padding.
========================================================================== */
/* inner pages: the whole content area runs full-bleed; text anchors to the
left at the header's gutter with a readable measure (no centered column) */
article:not(:has(.jj-home, .jj-bio)) .entry-content {
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: clamp(22px, 3vw, 44px);
padding-right: clamp(22px, 3vw, 44px);
}
/* strip Gutenberg's centered-narrow constraint from EVERY child (including
wrapper divs like .jj-portfolio / .jj-style-head) — except the blocks that
break out with negative margins */
/* Unconstrain WRAPPERS only (jj-portfolio, jj-bio-story, figures…) — text
elements are excluded so the centered-column rules below own them fully. */
article:not(:has(.jj-home, .jj-bio)) .entry-content
> :not(.tattoo-faq-section, .tattoo-related-articles, .jj-port-cta, .jj-gallery-clamp, .jj-gallery, .ww-crumbs, .jj-style-head, .jj-page-lede, h2, h3, h4, p, ul, ol, blockquote) {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* CENTERED editorial column — the architecture of every inner page. A
left-anchored column leaves 40% of a desktop viewport as dead whitespace;
centering the measure is what makes long-form pages read as composed.
Text stays left-aligned inside the centered column. */
article:not(:has(.jj-home, .jj-bio)) .entry-content :is(h2, h3, h4, p, ul, ol, blockquote) {
/* px, not ch — ch scales with each element's font, so display headings
would compute a ~2000px "measure" and escape the column */
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* larger body copy fills the measure and reads better */
article:not(:has(.jj-home, .jj-bio)) .entry-content :is(p, li) { font-size: 17px; line-height: 1.65; }
/* component grids opt back out of the editorial column — inside a flex card,
auto margins stop children stretching and short quotes float centered */
article:not(:has(.jj-home, .jj-bio)) .entry-content .ww-reviews :is(h2, h3, h4, p, ul, ol, blockquote) {
max-width: none;
margin-left: 0;
margin-right: 0;
font-size: inherit;
line-height: inherit;
}
/* brand device on content section headings — the same short vermillion rule
that opens homepage sections, so long pages inherit the section language */
article:not(:has(.jj-home, .jj-bio)) .entry-content h2:not(.jj-flash__title)::before {
content: '';
display: block;
width: 26px;
height: 2px;
background: var(--jj-verm);
margin-bottom: var(--s3);
}
/* the portfolio's ink section bars carry their own treatment — no dash */
article .entry-content .jj-portfolio h2::before { display: none; }
/* !important throughout: Gutenberg's constrained-layout rules tie on
specificity and win on order for direct children — these blocks must
always span the viewport regardless */
.hero-section,
.entry-content .jj-style-head,
.entry-content .jj-page-lede,
.entry-content .tattoo-faq-section,
.entry-content .tattoo-related-articles,
.entry-content .jj-port-cta,
.entry-content .jj-port-seeall,
.entry-content .jj-gallery {
width: 100vw;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* readable ink body text — Blocksy's default gray-blue is off-brand */
.entry-content, .entry-content p, .entry-content li { color: #2a2620; }
/* Solo-link CTA rows (tagged by the content sweep): a bordered pill instead
of a bare red text link — content pages get real call-to-action buttons */
.entry-content a.jj-link-btn {
display: inline-block;
padding: 11px 20px;
border: 1.5px solid var(--jj-verm);
border-radius: var(--jj-radius);
/* verm-2 for 13px text: base verm is 4.46:1 on bone, a hair under AA */
color: var(--jj-verm-2) !important;
font-family: var(--jj-body);
font-size: 13.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none !important;
transition: background .25s ease, color .25s ease;
}
.entry-content a.jj-link-btn:hover { background: var(--jj-verm); color: #fff !important; }
/* ONE link system — every content link is vermillion with underline-on-hover;
Blocksy's default blue was appearing 15-50x per page */
.entry-content a:not(.jj-btn):not([class*="jj-"]):not(.jj-port-jump a),
.tattoo-related-articles a,
.ww-post__foot a {
/* verm-2, not verm: body-size links need 4.5:1 on the bone ground */
color: var(--jj-verm-2) !important;
text-decoration: none;
}
.entry-content a:not(.jj-btn):not([class*="jj-"]):not(.jj-port-jump a):hover,
.tattoo-related-articles a:hover {
text-decoration: underline;
}
/* ==========================================================================
Blog index + archives — Blocksy entry-cards on the system palette
========================================================================== */
/* archive header band comes from wp_body_open — Blocksy's "Category X"
title would duplicate it; its description becomes the column intro */
:is(.archive, .search) .hero-section .page-title { display: none; }
.archive .hero-section .page-description {
max-width: 820px;
margin: 0 auto 38px;
font-size: 17px;
line-height: 1.65;
color: var(--jj-ink-90, #2b2620);
}
/* Blocksy ships the description hidden on phones — it's real content, keep it
(!important: Blocksy's ct-hidden-sm utility is itself !important) */
.archive .hero-section .page-description.ct-hidden-sm { display: block !important; }
/* force the archive into a real card grid regardless of customizer state */
.entries[data-layout] {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: var(--jj-wide);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1000px) { .entries[data-layout] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .entries[data-layout] { grid-template-columns: 1fr; } }
.entry-card {
background: var(--jj-bone);
border: 1px solid var(--jj-paper-2);
border-radius: var(--jj-radius);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 !important; /* kill Blocksy's 30px boxed padding — it strips the image */
}
/* image first (Blocksy renders it mid-card), uniform landscape crop —
portrait photos get cropped, never stretched */
.entry-card .ct-media-container {
order: -1;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.entry-card .ct-media-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.entry-card > *:not(.ct-media-container) { padding: 0 20px; }
.entry-card .entry-meta:first-child { padding-top: 18px; }
.entry-card .entry-meta { padding-top: 14px; }
.entry-card > *:last-child:not(.ct-media-container) { padding-bottom: 20px; }
.entry-card .entry-title {
font-family: var(--jj-display);
font-weight: 400;
font-size: 19px;
line-height: 1.25;
}
.entry-card .entry-title a { color: var(--jj-ink); }
.entry-card .entry-title a:hover { color: var(--jj-verm); }
.entry-card .entry-excerpt { font-size: 14.5px; line-height: 1.55; color: #3d3729; }
.entry-card .entry-meta, .entry-card .ct-meta-element {
font-family: var(--jj-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--jj-ink-30);
}
/* category label — brand vermillion, not Blocksy's teal term color */
.entry-card .meta-categories a, .entry-card .entry-meta a { color: var(--jj-verm-2) !important; }
/* image flush to the card top (kill any Blocksy spacing above it) */
.entry-card .ct-media-container { margin: 0; }
.entry-card .entry-meta:first-child { margin-top: 0; padding-top: 14px; }
/* pager: pills in the site palette — Blocksy defaults the links to blue, so the
color needs !important to win, and prev/next + numbers all get the same chip */
.ct-pagination {
font-family: var(--jj-mono);
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
/* remap Blocksy's blue accent (it drives the current pill + hover rings) to
the site palette, so nothing in the pager renders blue */
--theme-palette-color-1: var(--jj-ink);
--theme-link-hover-color: var(--jj-verm);
--theme-text-active-color: var(--jj-bone);
--theme-border-color: var(--jj-paper-2);
--theme-link-initial-color: var(--jj-ink);
}
.ct-pagination .page-numbers {
display: inline-flex;
align-items: center;
min-width: 42px;
justify-content: center;
padding: 10px 15px;
font-size: 13px;
letter-spacing: .04em;
color: var(--jj-ink) !important;
background: transparent;
border: 1px solid var(--jj-paper-2);
border-radius: var(--jj-radius);
text-decoration: none;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ct-pagination a.page-numbers:hover {
color: var(--jj-verm) !important;
border-color: var(--jj-verm);
}
.ct-pagination .page-numbers.current {
color: var(--jj-bone) !important;
background: var(--jj-ink);
border-color: var(--jj-ink);
}
.ct-pagination .page-numbers.dots { border-color: transparent; }
/* post reading experience */
.jj-page-lede .jj-post-title { margin: 0; }
.jj-post-meta {
font-family: var(--jj-body);
font-size: 14.5px;
color: var(--jj-ink-50);
margin: 40px auto 0;
padding-top: 16px;
border-top: 1px solid var(--jj-paper-2);
max-width: 820px;
}
.jj-post-meta__sep { color: #b3a893; padding: 0 2px; }
.jj-post-meta a.jj-post-meta__cat {
color: var(--jj-verm) !important;
font-weight: 700;
text-decoration: none;
}
.jj-post-meta a.jj-post-meta__cat:hover { text-decoration: underline; }
.ww-post__foot {
background: var(--jj-paper);
border-left: 3px solid var(--jj-verm);
border-radius: 0 var(--jj-radius) var(--jj-radius) 0;
padding: 18px 20px;
margin: 24px auto 0;
max-width: 820px;
font-size: 15px !important;
line-height: 1.6;
}
/* ==========================================================================
Guides hub — category sections as two-column link panels
========================================================================== */
.page-id-1417 article .entry-content h2 {
font-size: clamp(22px, 2.4vw, 28px);
margin-top: 44px;
padding-bottom: 10px;
border-bottom: 2px solid var(--jj-ink);
max-width: 1000px;
}
.page-id-1417 .entry-content ul.wp-block-list {
list-style: none;
padding: 0;
margin: 18px auto 0;
columns: 2;
column-gap: 40px;
max-width: 1000px !important;
}
.page-id-1417 .entry-content ul.wp-block-list li {
break-inside: avoid;
padding: 10px 0;
border-bottom: 1px solid var(--jj-paper-2);
}
.page-id-1417 .entry-content ul.wp-block-list a { font-size: 15.5px; }
@media (max-width: 700px) {
.page-id-1417 .entry-content ul.wp-block-list { columns: 1; }
}
/* ==========================================================================
Reviews wall (westwind-reviews) — cards on the system palette
========================================================================== */
/* the wall sits in the wide frame, not the full content width */
article:not(:has(.jj-home, .jj-bio)) .entry-content .ww-reviews {
max-width: var(--jj-wide);
margin-left: auto;
margin-right: auto;
}
.ww-reviews__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.ww-reviews__avg { font-family: var(--jj-display); font-size: 44px; color: var(--jj-ink); }
.ww-reviews__stars { color: var(--jj-gold); letter-spacing: .15em; }
.ww-reviews__stars-off { opacity: .25; }
.ww-reviews__count { font-family: var(--jj-mono); font-size: 12px; letter-spacing: .12em; color: #8d8371; text-transform: uppercase; }
/* masonry columns so wildly different quote lengths pack tight. The plugin
prints an inline `display:grid` (equal-height rows) that loads after this
file, so `display:block !important` is needed to beat it. */
.ww-reviews__grid {
display: block !important;
column-count: 3;
column-gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 900px) { .ww-reviews__grid { column-count: 2; } }
@media (max-width: 560px) { .ww-reviews__grid { column-count: 1; } }
.ww-reviews__grid article {
break-inside: avoid;
margin: 0 0 clamp(16px, 1.8vw, 24px);
background: #fff;
border: 1px solid var(--jj-paper-2);
border-radius: var(--jj-radius);
padding: clamp(22px, 2vw, 30px);
box-shadow: 0 12px 28px rgba(23, 20, 15, .09);
transition: transform .3s ease, box-shadow .3s ease;
}
.ww-reviews__grid article:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(23, 20, 15, .13);
}
.ww-reviews__stars { color: var(--jj-gold); letter-spacing: .22em; font-size: 13.5px; }
.ww-reviews__text {
font-size: 15.5px !important;
line-height: 1.6;
color: var(--jj-ink-90);
margin: 12px 0 16px !important;
}
.ww-reviews__by {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--jj-paper-2);
}
.ww-reviews__avatar { border-radius: 50%; flex: none; }
.ww-reviews__author { font-family: var(--jj-body); font-weight: 700; font-size: 14px; color: var(--jj-ink); }
.ww-reviews__src, .ww-reviews__meta { font-family: var(--jj-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--jj-ink-30); text-transform: uppercase; }
.ww-reviews__cta { margin-top: 30px; }
.ww-reviews__cta-btn {
display: inline-block;
padding: 13px 24px;
background: var(--jj-verm);
color: #fff !important;
border-radius: var(--jj-radius);
font-weight: 700;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
.ww-reviews__cta-btn:hover { background: var(--jj-verm-2); }
/* ==========================================================================
Site-wide enders: consult CTA band + footer (Blocksy's stock footer hidden)
========================================================================== */
body.wp-theme-blocksy footer.ct-footer, body.wp-theme-blocksy [data-id="footer"] { display: none !important; }
.jj-endcta {
background: var(--jj-ink);
color: var(--jj-bone);
padding: clamp(48px, 6vw, 80px) clamp(22px, 3vw, 44px);
}
/* centered composition — a CTA band left-hugging the gutter reads as
unfinished; centered it reads as a deliberate closing statement */
.jj-endcta__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.jj-endcta__inner::before {
content: '';
display: block;
width: 34px;
height: 2px;
background: var(--jj-gold);
margin: 0 auto var(--s4);
}
.jj-endcta h2 {
font-family: var(--jj-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 42px);
color: var(--jj-bone);
margin: 0 0 10px;
}
.jj-endcta p { font-family: var(--jj-body); font-size: 16.5px; color: var(--jj-bone-dim); margin: 0 auto 24px; max-width: 44ch; }
.jj-endcta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.jj-footer {
background: #100e0b;
color: var(--jj-bone-dim);
/* band bleeds; columns align to the wide-content frame */
padding: clamp(44px, 5vw, 64px) var(--frame-pad) 0;
border-top: 1px solid rgba(244, 239, 231, .08);
}
.jj-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.jj-footer__logo { width: 64px; height: auto; margin-bottom: 12px; display: block; }
.jj-footer__mark { display: block; font-family: var(--jj-display); font-size: 26px; color: var(--jj-bone); }
.jj-footer__sub { display: block; font-family: var(--jj-mono); font-size: 10px; letter-spacing: .26em; margin-top: 4px; }
.jj-footer__motto { font-family: var(--jj-mono); font-size: 11.5px; letter-spacing: .12em; margin: 18px 0 10px; }
.jj-footer__ig { font-family: var(--jj-body); font-size: 14px; color: var(--jj-gold); text-decoration: none; }
.jj-footer__ig:hover { text-decoration: underline; }
.jj-footer__col h3 { margin: 0 0 14px; }
.jj-footer__col p, .jj-footer__col li { font-family: var(--jj-body); font-size: 14.5px; line-height: 2; }
.jj-footer__col ul { list-style: none; margin: 0; padding: 0; }
.jj-footer__col a { color: var(--jj-bone-dim); text-decoration: none; }
.jj-footer__col a:hover { color: var(--jj-bone); }
.jj-footer__legal {
border-top: 1px solid rgba(244, 239, 231, .08);
padding: 18px 0 22px;
font-family: var(--jj-mono);
font-size: 11px;
letter-spacing: .08em;
}
.jj-footer__legal a { color: var(--jj-bone-dim); }
@media (max-width: 780px) {
.jj-footer__cols { grid-template-columns: 1fr; gap: 28px; }
.jj-footer { padding-bottom: 52px; }
}
/* Galleries live on the ink field — dark-ink-on-skin photography loses
contrast against white and glows against near-black. This is also what
separates a gallery page from a text page at a glance. */
.entry-content .jj-gallery {
background: var(--jj-ink);
/* the ink field bleeds; the photo grid inside is framed at --jj-wide */
padding: var(--s5) var(--frame-pad);
}
/* section bars sit directly on the gallery field: no seam between them */
article .entry-content .jj-portfolio h2 { margin-bottom: 0; }
.entry-content .jj-portfolio h2 + .jj-gallery { padding-top: var(--s4); }
/* the see-all pill sits on the same ink field as the gallery above it */
.entry-content .jj-port-seeall {
background: var(--jj-ink);
margin: 0;
padding: 0 var(--frame-pad) var(--s7);
}
.jj-port-seeall a {
color: var(--jj-gold);
border-color: rgba(201, 154, 61, .45);
}
.jj-port-seeall a:hover { background: var(--jj-gold); color: var(--jj-ink) !important; border-color: var(--jj-gold); }
/* FAQ (paper) + Related Guides (deeper paper) — flush stacking, no white
strips between bands; padding carries the rhythm */
.entry-content .tattoo-faq-section,
.entry-content .tattoo-related-articles {
padding-top: clamp(40px, 5vw, 64px);
padding-bottom: clamp(40px, 5vw, 64px);
margin-top: 0;
margin-bottom: 0;
}
.entry-content .tattoo-faq-section {
background-color: var(--jj-paper);
background-image: var(--jj-paper-tone), var(--jj-grain);
}
.entry-content .tattoo-related-articles {
background-color: var(--jj-paper-2);
background-image: var(--jj-paper-tone), var(--jj-grain);
}
.tattoo-faq-section h2, .tattoo-related-articles h2 {
font-family: var(--jj-display);
font-weight: 400;
text-align: left !important;
/* centered on the same column as the band's content */
max-width: 820px;
margin: 0 auto 24px !important;
}
.tattoo-related-articles ul { list-style: none; padding: 0 !important; margin: 0; }
.tattoo-related-articles li { padding: 12px 0 !important; border-bottom: 1px solid var(--jj-paper-2) !important; }
.tattoo-related-articles a { color: var(--jj-pine) !important; font-size: 16.5px !important; text-decoration: none; }
.tattoo-related-articles a:hover { text-decoration: underline; }
/* consult CTA band on ink */
.entry-content .jj-port-cta {
background: var(--jj-ink);
color: var(--jj-bone);
padding-top: clamp(48px, 6vw, 72px);
padding-bottom: clamp(48px, 6vw, 72px);
margin-top: 48px;
margin-bottom: 0;
}
.jj-port-cta h2 { color: var(--jj-bone); }
.jj-port-cta a { color: var(--jj-gold); }
/* FAQ accordions — one look everywhere (homepage + converted legacy blocks).
Inside full-bleed bands they sit on the same centered column as the page. */
.tattoo-faq-section > details, .tattoo-related-articles > ul, .tattoo-related-articles > p {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.jj-faq details, .tattoo-faq-section details {
border-bottom: 1px solid var(--jj-paper-2);
padding: 4px 0;
}
.jj-faq summary, .tattoo-faq-section summary {
font-family: var(--jj-body);
font-weight: 700;
font-size: 16.5px;
color: var(--jj-ink);
padding: 14px 0;
cursor: pointer;
}
.jj-faq details p, .tattoo-faq-section details p {
font-family: var(--jj-body);
font-size: 15.5px;
line-height: 1.6;
color: #3d3729;
}
/* content typography — display h2s site-wide */
.entry-content h2 { font-family: var(--jj-display); font-weight: 400; letter-spacing: .01em; }
.entry-content h3 { font-family: var(--jj-body); font-weight: 700; }
/* article pull-quote (Tier-3 posts): vermillion-ruled display quote */
.entry-content blockquote {
margin: var(--s7) 0;
padding: var(--s2) 0 var(--s2) var(--s5);
border-left: 3px solid var(--jj-verm);
font-family: var(--jj-display);
font-weight: 400;
font-size: clamp(19px, 2.2vw, 25px);
line-height: 1.4;
color: var(--jj-ink);
}
.entry-content blockquote p { font-size: inherit !important; line-height: inherit; margin: 0; }
/* article lede: the opening paragraph reads a step larger */
.single-post .entry-content > p:first-of-type { font-size: 18.5px; line-height: 1.65; color: var(--jj-ink); }
/* ordered lists get mono, vermillion, zero-padded numerals */
.single-post .entry-content > ol { list-style: none; counter-reset: jjol; padding-left: 0; }
.single-post .entry-content > ol > li { counter-increment: jjol; position: relative; padding-left: 42px; margin-bottom: var(--s4); }
.single-post .entry-content > ol > li::before {
content: counter(jjol, decimal-leading-zero);
position: absolute;
left: 0;
top: 3px;
font-family: var(--jj-mono);
font-size: 13px;
font-weight: 500;
color: var(--jj-verm);
}
/* ==========================================================================
Breadcrumbs (westwind-seo .ww-crumbs) — specimen-tag treatment
========================================================================== */
/* visible crumbs only where the hierarchy is deep enough to need a map:
blog posts. Flat pages (portfolio/bio/styles) keep only the
BreadcrumbList schema — the SEO part — with no visible bar. */
body.page .ww-crumbs { display: none; }
/* full-bleed utility bar: hairline spans the viewport, crumb text aligns
with the site's 1280 grid */
.ww-crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-family: var(--jj-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
width: 100vw;
max-width: none;
margin: 0 calc(50% - 50vw) 30px;
/* crumbs align with the wide-content frame edge, not the viewport gutter */
padding: 2px var(--frame-pad) 14px;
border-bottom: 1px solid rgba(23, 20, 15, .12);
}
.ww-crumbs a { color: var(--jj-verm-2); text-decoration: none; }
.ww-crumbs a:hover { text-decoration: underline; }
.ww-crumbs .sep { color: #b3a893; }
.ww-crumbs [aria-current], .ww-crumbs span:not(.sep) { color: #8d8371; }
/* ==========================================================================
Content pages — shared typography + style pages + bio
========================================================================== */
.page .entry-header h1, .single .entry-header h1, .page-title {
font-family: var(--jj-display);
font-weight: 400;
letter-spacing: .01em;
}
.jj-style-intro p { font-size: 17.5px; line-height: 1.6; max-width: 44em; }
.jj-style-morelink { margin: 20px 0 36px; }
/* legacy content blocks (FAQ / Related Guides divs carry inline styles from
the Divi era — soften their palette to match paper) */
.tattoo-related-articles { background: var(--jj-paper) !important; border-radius: var(--jj-radius); }
/* ==========================================================================
Bio — the artist page. Under the photo hero the body is a sequence of
field bands (paper story → ink track record → paper specialties → white
FAQ → paper links), so the page reads as designed like the homepage
instead of a document dropped in a white column.
========================================================================== */
/* one full-width breakout; bands bleed edge-to-edge, .jj-wrap re-contains */
.entry-content > .jj-bio,
.jj-bio {
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.jj-bio > section { padding: var(--band-y) 0; }
/* wpautop wraps the managed FAQ/related marker comments in empty paragraphs;
drop them so they don't add stray margin between elements */
.jj-bio p:empty { display: none; }
/* — story + specimen facts card — */
.jj-bio-lead__cols {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
/* .jj-bio prefix beats the legacy .entry-content p color rule so the seal-red
motto keeps its accent instead of falling back to body ink */
.jj-bio .jj-bio-motto {
font-family: var(--jj-display);
font-weight: 400;
font-size: clamp(23px, 3.2vw, 38px);
line-height: 1.24;
color: var(--jj-verm);
margin: 0 0 var(--s6);
max-width: 15em;
}
.jj-bio-story p {
font-family: var(--jj-body);
font-size: 17px;
line-height: 1.75;
color: var(--jj-ink-90);
margin: 0 0 var(--s5);
max-width: 40em;
}
.jj-bio-story p:last-child { margin-bottom: 0; }
/* the facts card: an ink specimen card sitting on the paper field */
.jj-bio-facts {
position: sticky;
top: calc(78px + var(--s5));
background: var(--jj-ink);
color: var(--jj-bone);
border-radius: var(--jj-radius);
padding: clamp(26px, 2.6vw, 34px);
box-shadow: var(--jj-shadow);
border-top: 3px solid var(--jj-verm);
}
/* .jj-bio prefix beats the legacy `.entry-content p` color rule — without it
this heading rendered dark ink on the near-black card (invisible) */
.jj-bio .jj-bio-facts__h {
font-family: var(--jj-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--jj-gold);
margin: 0 0 var(--s5);
padding-bottom: var(--s3);
border-bottom: 1px solid rgba(201, 154, 61, .28);
}
.jj-bio-facts dl { margin: 0; display: grid; gap: var(--s4); }
.jj-bio-facts dt {
font-family: var(--jj-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--jj-bone-dim);
margin: 0 0 3px;
}
.jj-bio-facts dd {
margin: 0;
font-family: var(--jj-body);
font-size: 15.5px;
line-height: 1.4;
color: var(--jj-bone);
}
.jj-bio-facts .jj-btn { margin-top: var(--s6); display: block; text-align: center; }
/* — track record: stat grid + studio tags on ink — */
.jj-bio-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 3vw, 40px);
margin: var(--s7) 0 0;
padding-top: var(--s7);
border-top: 1px solid rgba(244, 239, 231, .14);
}
.jj-bio-stat__n {
display: block;
font-family: var(--jj-display);
font-weight: 400;
font-size: clamp(38px, 4.6vw, 60px);
line-height: 1;
color: var(--jj-bone);
}
.jj-bio-stat__l {
display: block;
margin-top: var(--s3);
font-family: var(--jj-body);
font-size: 14px;
line-height: 1.4;
color: var(--jj-bone-dim);
max-width: 13em;
}
.jj-bio-studios__k { margin-top: var(--s8); color: var(--jj-bone-dim); }
.jj-bio-studios {
list-style: none;
margin: var(--s4) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--s3);
}
.jj-bio-studios li {
font-family: var(--jj-mono);
font-size: 12.5px;
letter-spacing: .03em;
color: var(--jj-bone);
background: var(--jj-ink-2);
border: 1px solid rgba(244, 239, 231, .14);
border-radius: 2px;
padding: 8px 14px;
}
/* — specialties: reuse the flash plates, one row down from the h2 — */
.jj-bio-spec__grid { margin-top: var(--s7); }
/* — legacy FAQ / related blocks, re-homed into bio bands —
these ship with their own paper card + an 820px editorial column meant for
the centered inner pages; here the band IS the field and content anchors
left across the frame, so strip both. */
/* the .jj-wrap already frames these; cancel their standalone full-bleed
breakout (width:100vw + negative margins) so they sit in the band, not the
viewport edge */
.jj-bio .tattoo-faq-section,
.jj-bio .tattoo-related-articles {
width: auto;
max-width: none;
margin-left: 0 !important;
margin-right: 0 !important;
}
.jj-bio .tattoo-faq-section {
background: none;
padding: 0;
}
.jj-bio .tattoo-related-articles {
background: var(--jj-bone) !important;
border: 1px solid var(--jj-paper-2);
padding: clamp(26px, 3vw, 40px);
}
.jj-bio .tattoo-faq-section > h2,
.jj-bio .tattoo-related-articles > h3 {
font-family: var(--jj-display);
font-weight: 400;
font-size: var(--t-h2);
line-height: 1.08;
color: var(--jj-ink);
max-width: none;
margin: 0 0 var(--s6) !important;
}
.jj-bio .tattoo-faq-section > details,
.jj-bio .tattoo-related-articles > ul,
.jj-bio .tattoo-related-articles > p {
max-width: none;
margin-left: 0;
margin-right: 0;
}
@media (max-width: 860px) {
.jj-bio-lead__cols { grid-template-columns: 1fr; }
.jj-bio-facts { position: static; }
.jj-bio-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--s6); }
}
/* ==========================================================================
Scroll reveal
========================================================================== */
.jj-reveal-on .jj-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.jj-reveal-on .jj-in { opacity: 1; transform: none; }