/* =======================================================================
KCK BLOG, brand alignment
kck-blog.css
Enqueued LAST, after style.css, new-styles.css, new-styles-v2.css and
kck-header-footer.css. Every override below relies on that: the
specificity is matched to the rule it replaces rather than raised above
it, and load order breaks the tie. No !important anywhere.
WHAT THIS FILE DOES NOT TOUCH
Layout. No widths, no floats, no column measures, no section padding, no
grid. The brief was fonts, labels and element polish, and changing the
measure on 346 posts is a separate decision. The two things worth knowing:
.section-single .content is capped at 780px and .post-blog .post__entry at
715px, where the brand measure is 680px. Left alone deliberately.
It also does not touch the header or footer sheets, and does not redefine
any token that kck-header-footer.css already defines correctly.
FONT FACES AVAILABLE ON THIS INSTALL
Six, as of the matching functions.php:
Montserrat 400, 600, 700
Nunito 300, 400, 600, 700
Montserrat 800 is not loaded and is not wanted: 700 is the heaviest weight
the brand system uses, and the one theme rule that asked for 800 is
corrected in Part 7 rather than served a seventh font file.
Nothing in this file asks for a weight outside that set, so nothing here is
faux bold.
======================================================================= */
/* =======================================================================
PART -1 - Metric-matched fallbacks
Copied from the brand system's tokens.css, not invented, and here for one
reason: the font URL now carries display=swap, so text paints immediately
in the fallback face and is repainted when the real face arrives. Without
this block that repaint moves every line on the page, because Montserrat
and Nunito are both wider than the system sans they fall back to.
size-adjust matches the fallback's metrics to the real face, which removes
almost all of that shift. Nothing here downloads: src is local("Arial").
The blog's --doc-font-* tokens, declared in kck-header-footer.css, do not
name these fallback families, so the two stacks are restated below with
the fallback inserted. Same real fonts, same order, one extra step before
the generic sans. If this whole block is deleted the page still renders
correctly; it just shifts on font load the way it does today.
======================================================================= */
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: "Nunito Fallback";
src: local("Arial");
size-adjust: 101%;
ascent-override: 101%;
descent-override: 35%;
line-gap-override: 0%;
}
:root {
--doc-font-heading: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--doc-font-body: "Nunito", "Nunito Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* =======================================================================
PART 0 - The tokens this install is missing
--doc-red, --doc-ink, --doc-charcoal, --doc-mid, --doc-line,
--doc-surface, --doc-cream, --doc-info, --doc-font-body,
--doc-font-heading, the --doc-space-* scale, --doc-radius-*,
--kck-measure, --kck-leading-normal, --kck-leading-snug and
--kck-tracking-wide are ALL already defined in kck-header-footer.css,
correctly, from the brand source. They are not redeclared here.
These seven are not defined anywhere on the blog. Values are the brand
values, copied, not adjusted.
======================================================================= */
:root {
--doc-cream-soft: #fbf8f3;
--doc-mid-aa: #6e675f;
--kck-leading-tight: 1.2;
--kck-measure-wide: 780px;
--kck-tracking-wider: 0.14em;
--doc-dur: 200ms;
--doc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* =======================================================================
PART 1 - Foundations
style.css opens with:
body { font-family: 'Montserrat'; font-size: 14px; line-height: 1.3;
color: #000; }
Four wrong values in one declaration: the heading font used as the body
font, a 14px base where brand is 16, 1.3 leading where brand body is
1.65, and pure black where brand ink is #38342e.
This is the rule that fixes the most at once. The single post template
already overrode the family on its paragraphs; the index, the card
excerpts, the bylines and the sidebar never did, which is why they all
render in Montserrat today.
Safe to set on body because the header and footer name their own family
on their own classes and do not inherit from here.
======================================================================= */
html {
/* style.css sets `none`, which also disables the legitimate iOS
orientation text scale-up. Brand sets 100%. */
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--doc-font-body, "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
font-size: 16px;
line-height: var(--kck-leading-normal, 1.65);
color: var(--doc-ink, #38342e);
}
/* Headings keep Montserrat. The theme never states this, so before the rule
above they were Montserrat only because body was; now it has to be said. */
.section-single h1,
.section-single h2,
.section-single h3,
.section-single h4,
.section-single h5,
.section-single h6 {
font-family: var(--doc-font-heading, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
/* The sidebar is inside .section-single on these templates, so it is covered
by the rule above. The search input is not a heading and is handled in
PART 9. */
/* =======================================================================
PART 2 - Breadcrumb
THIS PART REQUIRES THE NEW fragments/breadcrumb.php. The two files go up
TOGETHER. The old fragment emitted
with the current page rendered as a link to itself, and the separators
drawn as absolutely positioned glyphs from the ThemeIcons font. The new
fragment emits
which is the structure already live on /glossary/ and on the store's
.kckt-crumbs, so one selector now serves all three. The class is still
"breadcrumb", so every existing rule that styles the BAR itself, the
borders, padding and margins in style.css and new-styles.css, keeps
applying untouched.
EVERY VALUE BELOW IS COPIED FROM THE LIVE MAIN SITE, not chosen. I first
built this to the brand tokens in the abstract and it came out looking
like a third system. Measured in the browser on
/slim-shaker-kitchen-cabinets, where .kckt-crumbs is the canonical
breadcrumb:
ol display flex, gap 8px, flex-wrap wrap,
list-style none, margin 0, padding 0
li + li::before content "/", color #e0dbd6, 13px, weight 400,
padding-right 8px
links 13px, #7a736d, no underline, weight 400
current page 13px, weight 600, #38342e, on the
itself
the nav NO borders, NO vertical padding, margin-bottom 24px
ONE DELIBERATE DEPARTURE: the link colour. Measured contrast, 13px is
normal-size text so AA is 4.5:1 and AAA is 7:1:
--doc-mid #7a736d store 4.67 on white, 4.19 on cream (fails)
--doc-mid-aa #6e675f glossary 5.57 on white, 5.01 on cream
--doc-ink #38342e current 12.36 on white
The store's grey clears AA on white by 0.17, and fails on cream. The
glossary's is one step darker with real headroom and passes on every
background in the system. Both sit on white here so both technically
pass, but there is no reason to copy the marginal one when the two greys
are all but indistinguishable side by side. So the blog follows the
GLOSSARY on colour and the store on everything else. The store is then
the odd one out, and moving it is a Magento change for another day.
What I had instead, and what made it look foreign: a chevron drawn from
two borders where the rest of the site uses a typed "/", the current page
at weight 300 inherited from the theme rather than 600, and a 1px rule
above and below boxing the whole thing in, which no other breadcrumb on
the site has. The bar came from new-styles.css and I had kept it and only
retokenized its colour.
The glossary uses the same pattern one step up, at 14px with a 300-weight
separator. This file follows the MAIN SITE at 13px, since that is the
store. If you want all three identical, the glossary is the one to move.
Historic sizing note: style.css set the wrapper to 12px and
new-styles.css set the link inside it to 14px, so the bar rendered at two
sizes at once. #857e78 and #efefef were not tokens, and the link hover
was #991717, a ninth red.
======================================================================= */
body .breadcrumb {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 13px;
line-height: var(--kck-leading-snug, 1.4);
letter-spacing: normal;
color: var(--doc-mid-aa, #6e675f);
/* The boxed-in look, removed. No other breadcrumb on the site has it. */
border-top: 0;
border-bottom: 0;
padding-bottom: 0;
/* 20px, which is the glossary's own padding-top, copied.
Measured from the bottom of the header to the top of the first crumb's
text, at 1440px:
main site 20px
glossary 30px (10px from the shell, plus this 20px)
blog 10px before this line, which is why it sat tight
against the header
Removing the boxed bar also removed the padding that had been doing
this job by accident.
The other 10px is already there: #main-inner carries padding-top: 10px,
traced up the ancestor chain in the browser. So 10px here lands on
exactly 20px, which is the store's gap and the one Andrew picked.
10px is NOT on the 4px spacing scale, and that is deliberate rather
than sloppy: it is not a new spacing step, it is the completion of an
existing 10px the theme already owns on #main-inner, chosen to hit a
measured target. The on-scale alternatives land on 18px or 22px, and
the only way to use 20px here is to zero #main-inner's padding, which
would change the top spacing of every blog template that has no
breadcrumb. Not worth it for 2px. */
padding-top: 10px;
}
/* .section-single .breadcrumb is 0-2-0 and sets margin-bottom: 15px, which
outranks `body .breadcrumb` at 0-1-1. Matched here so the 24px the rest
of the site uses actually lands. */
.section-single .breadcrumb {
margin-top: 0;
margin-bottom: var(--doc-space-6, 24px);
}
body .breadcrumb > ol {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--doc-space-2, 8px);
list-style: none;
margin: 0;
padding: 0;
}
body .breadcrumb > ol > li {
min-width: 0;
}
/* The separator. A typed slash, in --doc-line, exactly as the store and the
glossary draw it.
It stays a CSS pseudo-element rather than markup so it is not read aloud
between every crumb, and it is on `li + li` so the crumb dropped on
mobile takes its own separator with it and cannot leave one dangling. */
body .breadcrumb > ol > li + li:before {
content: "/";
color: var(--doc-line, #e0dbd6);
font-size: 13px;
font-weight: 400;
padding-right: var(--doc-space-2, 8px);
}
/* The theme's own arrow, off. It was an absolutely positioned :before on
every anchor, drawn with a glyph from the ThemeIcons font and offset into
a 25px right margin, and it was hidden on :last-child. With this markup
the last ANCHOR is no longer the last crumb, so that rule would have
removed a separator that is still needed. */
body .breadcrumb a:before {
content: none;
display: none;
}
body .breadcrumb a {
display: inline;
font-size: 13px;
font-weight: 400;
margin-right: 0;
color: var(--doc-mid-aa, #6e675f);
text-decoration: none;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
body .breadcrumb a:hover,
body .breadcrumb a:focus {
color: var(--doc-red, #d9201e);
text-decoration: underline;
text-underline-offset: 2px;
}
/* The page you are on: ink at 600, which is how the store and the glossary
both mark it. It was rendering at 300, because style.css sets
font-weight: 300 on .breadcrumb and nothing here overrode it, so the
current page was the LIGHTEST thing in the trail instead of the
heaviest. */
body .breadcrumb [aria-current="page"] {
font-size: 13px;
font-weight: 600;
color: var(--doc-ink, #38342e);
min-width: 0;
}
/* =======================================================================
PART 3 - Index intro
.post-primary .post__entry is the paragraph under the H1 on /blog/. It
set colour, size and leading but never a family, so it inherited
Montserrat from body. 1.33 leading on 18px copy is what makes those three
lines read cramped.
18px is --kck-font-size-lg. Kept. Leading and colour corrected.
======================================================================= */
.post-primary .post__entry {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 18px;
line-height: var(--kck-leading-normal, 1.65);
color: var(--doc-charcoal, #544f4a);
margin-bottom: var(--doc-space-6, 24px);
}
.post-primary .post__entry p {
margin-bottom: var(--doc-space-5, 20px);
max-width: var(--kck-measure-wide, 780px);
}
.post-primary .post__entry > *:last-child {
margin-bottom: 0;
}
/* 34px is off the type scale. 32px is its top fixed step, and the column is
capped, so a fixed step rather than a clamp is the brand rule. */
.post-primary .post__entry h1 {
font-size: 32px;
line-height: var(--kck-leading-tight, 1.2);
font-weight: 700;
color: var(--doc-ink, #38342e);
margin-bottom: var(--doc-space-6, 24px);
}
.post-primary .post__entry h2 {
font-size: 24px;
line-height: var(--kck-leading-tight, 1.2);
font-weight: 700;
color: var(--doc-ink, #38342e);
margin-bottom: var(--doc-space-4, 16px);
}
.post-primary .post__entry a {
color: var(--doc-red, #d9201e);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.post-primary .post__entry a:hover,
.post-primary .post__entry a:focus {
color: var(--doc-red-hover, #b81a18);
}
/* =======================================================================
PART 4 - The article cards
One set of rules, four templates: /blog/, /blog/page/N/,
/blog/category// and the search results. All four render identical
.article-main markup, confirmed by fetching each one.
======================================================================= */
/* -- 4a. The red category label -----------------------------------------
Was: 18px, uppercase, weight 400, letter-spacing 0.5px, #d41c1d.
Three things wrong. #d41c1d is not brand red. 18px is the same size as
the excerpt below it and within 6px of the headline, so it competes
instead of annotating. And weight 400 with 0.5px of tracking is why it
reads washed out rather than deliberate.
These are the exact values of .kck-eyebrow from components.css: 12px,
Montserrat 700, --kck-tracking-wider (0.14em), uppercase, --doc-red.
Copied rather than reinvented. 700 is a loaded face.
If 12px reads too small to you beside a 24px card title, 13px is the next
step on the scale and it is the only value to change, here and in 5a.
--------------------------------------------------------------------- */
.article-main .article__body-title h6,
.article-main .article__body-title .kck-eyebrow {
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 12px;
line-height: var(--kck-leading-snug, 1.4);
font-weight: 700;
letter-spacing: var(--kck-tracking-wider, 0.14em);
text-transform: uppercase;
color: var(--doc-red, #d9201e);
margin-bottom: var(--doc-space-2, 8px);
}
.article-main .article__body-title h6 a,
.article-main .article__body-title .kck-eyebrow a {
color: var(--doc-red, #d9201e);
text-decoration: none;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.article-main .article__body-title h6 a:hover,
.article-main .article__body-title h6 a:focus,
.article-main .article__body-title .kck-eyebrow a:hover,
.article-main .article__body-title .kck-eyebrow a:focus {
color: var(--doc-red-hover, #b81a18);
}
/* -- 4b. Card headline ---------------------------------------------------
Was 24px with a 36px line-height, which is 1.5: body-copy leading on a
heading. Every two-line title on the index is spaced like a paragraph.
24px is on the scale and stays; the leading goes to 1.2.
--------------------------------------------------------------------- */
.article-main .article__body-title h2 {
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 24px;
line-height: var(--kck-leading-tight, 1.2);
font-weight: 700;
color: var(--doc-ink, #38342e);
margin-bottom: 0;
}
.article-main .article__body-title h2 a {
color: var(--doc-ink, #38342e);
text-decoration: none;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.article-main .article__body-title h2 a:hover,
.article-main .article__body-title h2 a:focus {
color: var(--doc-red, #d9201e);
text-decoration: none;
}
/* -- 4c. Excerpt --------------------------------------------------------- */
.article-main .article__body-content {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 16px;
line-height: var(--kck-leading-normal, 1.65);
color: var(--doc-charcoal, #544f4a);
margin: var(--doc-space-4, 16px) 0 var(--doc-space-4, 16px);
}
.article-main .article__body-content p {
margin: 0;
}
/* -- 4d. Read More ------------------------------------------------------
A bare inline link with nothing above it, so it collides with the last
line of the excerpt and reads as a stray word. Given its own line, the
brand's 13px label size, and an arrow that moves 4px on hover, which is
the one piece of motion the brand system allows.
:not(:only-child) so an excerpt that is nothing but a link is untouched.
The arrow is a pseudo-element, so it is never read aloud or selected.
--------------------------------------------------------------------- */
.article-main .article__body-content a {
display: inline-block;
margin-top: var(--doc-space-2, 8px);
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: var(--kck-tracking-wide, 0.08em);
text-transform: uppercase;
color: var(--doc-red, #d9201e);
text-decoration: none;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.article-main .article__body-content a::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-left: 7px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: translateY(-1px) rotate(45deg);
transition: transform var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.article-main .article__body-content a:hover,
.article-main .article__body-content a:focus {
color: var(--doc-red-hover, #b81a18);
}
.article-main .article__body-content a:hover::after,
.article-main .article__body-content a:focus::after {
transform: translateY(-1px) rotate(45deg) translate(3px, -3px);
}
/* -- 4e. Byline --------------------------------------------------------
Was 16px, the same size as the excerpt it sits under, so on a page with
ten cards the author line carried as much weight as ten article
summaries. --doc-mid puts it back where it belongs.
14px, not the 13px I first shipped. Ten repetitions of the same name
want to be quiet, but 13px made them the smallest thing on the page,
which undersells the byline. 14px is one step up and still clearly
subordinate to the 16px excerpt above it. The single post byline is a
different case and is set separately in 5c.
Avatar 46px to 40px to match the smaller line.
--------------------------------------------------------------------- */
.article-main .article__body-author {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 14px;
line-height: var(--kck-leading-snug, 1.4);
color: var(--doc-mid, #7a736d);
}
.article-main .article__body-author p {
margin: 0;
}
.article-main .article__body-author img {
width: 40px;
height: 40px;
object-fit: cover;
margin-right: var(--doc-space-3, 12px);
}
/* -- 4f. The divider between cards -------------------------------------- */
.list-articles .list__body > ul > li {
border-bottom: 1px solid var(--doc-line, #e0dbd6);
padding-bottom: var(--doc-space-8, 32px);
margin-bottom: var(--doc-space-8, 32px);
}
.list-articles .list__body > ul > li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
/* =======================================================================
PART 5 - Single post header
.post-blog .post__head, on all 346 posts.
======================================================================= */
/* -- 5a. Category eyebrow, same component as 4a ------------------------- */
.post-blog .post__head h6,
.post-blog .post__head .kck-eyebrow {
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 12px;
line-height: var(--kck-leading-snug, 1.4);
font-weight: 700;
letter-spacing: var(--kck-tracking-wider, 0.14em);
text-transform: uppercase;
color: var(--doc-red, #d9201e);
margin-bottom: var(--doc-space-2, 8px);
}
.post-blog .post__head h6 a,
.post-blog .post__head .kck-eyebrow a {
color: var(--doc-red, #d9201e);
text-transform: uppercase;
text-decoration: none;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.post-blog .post__head h6 a:hover,
.post-blog .post__head h6 a:focus,
.post-blog .post__head .kck-eyebrow a:hover,
.post-blog .post__head .kck-eyebrow a:focus {
color: var(--doc-red-hover, #b81a18);
}
/* -- 5b. Post title. 34px off-scale, to 32px. --------------------------- */
.post-blog .post__head h1 {
font-size: 32px;
line-height: var(--kck-leading-tight, 1.2);
font-weight: 700;
color: var(--doc-ink, #38342e);
}
.post-blog .post__head {
padding-bottom: var(--doc-space-6, 24px);
margin-bottom: var(--doc-space-10, 40px);
border-bottom: 1px solid var(--doc-line, #e0dbd6);
}
/* -- 5c. Byline ---------------------------------------------------------
DELIBERATELY LARGER THAN THE CARD BYLINE IN 4e, and the difference is the
point rather than an inconsistency.
On an index there are ten bylines repeating one name, so they should
recede. On a post there is exactly one, it sits directly under the H1,
and it is the page's authorship signal. I first shipped this at the
card's 13px by applying the index reasoning to a page where it does not
hold, which made the byline the smallest text on the article.
15px rather than back to the original 16px: body copy here is 18px, and
a byline that matches the prose reads as prose. 15px is on the scale and
is unmistakably a byline without being a whisper.
The date cannot be sized separately. The markup is
so the date is a bare text node with no element around it. The name
reads ahead of the date because the link is 600, which is the only
hierarchy available here without editing the single post template.
--------------------------------------------------------------------- */
.post-blog .post__head-author p {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 15px;
line-height: var(--kck-leading-snug, 1.4);
color: var(--doc-mid, #7a736d);
margin: 0;
}
.post-blog .post__head-author img {
width: 44px;
height: 44px;
object-fit: cover;
margin-right: var(--doc-space-3, 12px);
}
/* The byline link was written at weight 600, which this install did not
load, so it rendered as synthesized semibold. 600 is now a real face, so
the original intent stands and the declaration below only restates it.
600 rather than 700 on purpose: the name sits inside a byline and should
read before the date without turning into a heading. Its underline colour
and hover were already correct brand values and are untouched. */
.post__author-link {
font-weight: 600;
}
/* =======================================================================
PART 6 - Single post body
.post-blog .post__entry. The family was already Nunito here, correctly.
What was wrong: leading, four heading treatments, two wrong reds and one
colour that is not a token.
THE BIGGEST VISIBLE CHANGE IN THIS FILE IS THE LINE-HEIGHT ON THIS
BLOCK, 1.5 to 1.65, across every post. It is the brand body leading and
it is the right value, but it makes every post taller. If you want it
back, it is the one declaration marked REVERT below and nothing else.
======================================================================= */
.post-blog .post__entry {
font-size: 18px;
/* REVERT: change to 1.5 to restore the previous rhythm. */
line-height: var(--kck-leading-normal, 1.65);
color: var(--doc-charcoal, #544f4a);
}
.post-blog .post__entry p,
.post-blog .post__entry li {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-weight: 400;
font-size: 18px;
line-height: var(--kck-leading-normal, 1.65);
}
.post-blog .post__entry p {
margin-bottom: var(--doc-space-6, 24px);
}
/* h1 and h2 were weight 400 at 30px, which is Montserrat regular at display
size: thin and washed out. 24px/700 on the scale, matching the card
titles so a reader crossing from the index sees one system.
#555 was not a token. */
.post-blog .post__entry h1,
.post-blog .post__entry h2 {
font-size: 24px;
line-height: var(--kck-leading-tight, 1.2);
font-weight: 700;
color: var(--doc-ink, #38342e);
margin: var(--doc-space-10, 40px) 0 var(--doc-space-4, 16px);
}
.post-blog .post__entry h1:first-child,
.post-blog .post__entry h2:first-child {
margin-top: 0;
}
/* h3 was #C53731, a tenth red, at 20px bold. 20px is on the scale and
stays. The colour goes to ink: a red subheading every few hundred words
spends the action colour on navigation, and red is reserved for things a
reader can click. */
.post-blog .post__entry h3 {
font-size: 20px;
line-height: var(--kck-leading-tight, 1.2);
font-weight: 700;
color: var(--doc-ink, #38342e);
text-transform: none;
margin: var(--doc-space-8, 32px) 0 var(--doc-space-3, 12px);
}
/* h4 was Nunito 700. That face is now loaded, so it is no longer faux bold,
but it stays Montserrat here anyway: the brand reset puts every h1 to h6
on --doc-font-heading, and an h4 in Nunito reads as an emphasised
paragraph rather than as the fourth level of a heading hierarchy. This is
a deliberate departure from the theme's original choice. */
.post-blog .post__entry h4 {
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 18px;
line-height: var(--kck-leading-snug, 1.4);
font-weight: 700;
color: var(--doc-ink, #38342e);
margin: var(--doc-space-6, 24px) 0 var(--doc-space-2, 8px);
}
/* Prose links. The theme reached them through three separate selectors
(p a, li a, and nothing for the rest), all at #d41c1d and none
underlined. Action red on charcoal is 1.6:1, under the 3:1 WCAG 1.4.1
threshold, so colour alone does not mark a link. Underline is the
non-colour signal, and it is what a link in a sentence looks like. */
.post-blog .post__entry a {
color: var(--doc-red, #d9201e);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.post-blog .post__entry a:hover,
.post-blog .post__entry a:focus {
color: var(--doc-red-hover, #b81a18);
}
/* Headings that contain a link, and images wrapped in one, keep no
underline: they are not links in a sentence. */
.post-blog .post__entry h1 a,
.post-blog .post__entry h2 a,
.post-blog .post__entry h3 a,
.post-blog .post__entry h4 a,
.post-blog .post__entry a:has(img) {
text-decoration: none;
}
/* Bullets and list numbers, both at the wrong red. */
.post-blog .post__entry ul li:before {
background-color: var(--doc-red, #d9201e);
top: 0.62em;
width: 6px;
height: 6px;
}
.post-blog .post__entry ol li:before {
color: var(--doc-red, #d9201e);
font-family: var(--doc-font-body, "Nunito", sans-serif);
/* Nunito 700 is loaded now, so the theme's original 700 is a real face and
stands. The number carries the same weight as the bullet dot in an
unordered list, which is the point. */
font-weight: 700;
}
.post-blog .post__entry ul,
.post-blog .post__entry ol {
margin-bottom: var(--doc-space-6, 24px);
}
.post-blog .post__entry blockquote {
border-left: 2px solid var(--doc-red, #d9201e);
padding-left: var(--doc-space-5, 20px);
margin-bottom: var(--doc-space-6, 24px);
color: var(--doc-charcoal, #544f4a);
}
/* Images in an article. The theme has NO rule for these at all, which means
nothing caps their width: a post whose image is wider than the 715px
column pushes the page sideways, and on a 346-post archive going back
years that is a real risk rather than a theoretical one. There are 14
images in the post I tested.
`display: block` also removes the few pixels of descender space an inline
image leaves under itself, which is what makes an image look like it is
sitting slightly high in its own gap. */
.post-blog .post__entry img {
max-width: 100%;
height: auto;
display: block;
}
.post-blog .post__entry img.aligncenter,
.post-blog .post__entry .aligncenter img {
margin-left: auto;
margin-right: auto;
}
.post-blog .post__entry > img,
.post-blog .post__entry > p > img:only-child,
.post-blog .post__entry > figure {
margin-top: var(--doc-space-6, 24px);
margin-bottom: var(--doc-space-6, 24px);
}
/* Captions. Brand is 13px roman in --doc-mid. The theme had no rule, so
they inherited 18px body copy and read as part of the article. */
.post-blog .post__entry figcaption,
.post-blog .post__entry .wp-caption-text {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 13px;
line-height: var(--kck-leading-snug, 1.4);
color: var(--doc-mid, #7a736d);
margin-top: var(--doc-space-2, 8px);
margin-bottom: 0;
}
/* =======================================================================
PART 7 - Author box at the foot of a post
50px of padding on a 715px column, and a 139px avatar, which is three
times the size of the one in the header of the same page. The heading
asked for weight 800, which does not exist on this install.
NOT CHANGED, and worth knowing about: this rule carries
`flex-direction: flex-start`, which is not a valid value for that
property. The browser discards the declaration and falls back to `row`,
which is what the layout wants anyway, so it has no visible effect. I
left it rather than "fixing" it, because writing `row` here would beat
the mobile rule that correctly sets `column` and would break the phone
layout. It is a no-op typo, not a bug to patch from this file.
======================================================================= */
.post-blog .post__author {
padding: var(--doc-space-8, 32px);
border: 1px solid var(--doc-line, #e0dbd6);
border-radius: var(--doc-radius-md, 10px);
background: var(--doc-cream-soft, #fbf8f3);
margin-top: var(--doc-space-10, 40px);
align-items: flex-start;
}
.post-blog .post__author img {
width: 96px;
height: 96px;
object-fit: cover;
flex: none;
}
.post-blog .post__author blockquote {
width: auto;
flex: 1 1 auto;
min-width: 0;
padding-left: var(--doc-space-6, 24px);
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 16px;
line-height: var(--kck-leading-normal, 1.65);
color: var(--doc-charcoal, #544f4a);
}
/* THIS IS A PERSON'S NAME, NOT A SECTION LABEL, and I had it wrong.
I first styled it to match the sidebar widget titles: 13px, grey, widely
tracked. Looked at painted, that turns the author's name into the
quietest thing in his own bio box, which is the opposite of what an
author box is for. The widget-title analogy was simply the wrong one.
16px, ink, Montserrat 700. Still uppercase and still tracked, so it
reads as a byline heading rather than a run-in heading, but it is now
the strongest thing in the box, which is the whole point of the box.
Was weight 800 at 18px. 700 is the heaviest real face on this install,
and 800 was being synthesized. */
.post-blog .post__author h6,
.post-blog .post__author .kck-author__name {
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 16px;
line-height: var(--kck-leading-snug, 1.4);
font-weight: 700;
letter-spacing: var(--kck-tracking-wide, 0.08em);
text-transform: uppercase;
color: var(--doc-ink, #38342e);
margin-bottom: var(--doc-space-3, 12px);
}
/* If the name is a link to the author archive, it keeps the ink colour of
the heading rather than inheriting the byline link's own colour, and
picks up red on hover like everything else. */
.post-blog .post__author h6 a,
.post-blog .post__author .kck-author__name a {
color: inherit;
text-decoration: none;
}
.post-blog .post__author h6 a:hover,
.post-blog .post__author h6 a:focus,
.post-blog .post__author .kck-author__name a:hover,
.post-blog .post__author .kck-author__name a:focus {
color: var(--doc-red, #d9201e);
}
/* =======================================================================
PART 8 - Pagination
Renders on /blog/, /blog/page/N/, the category archives and search.
#2d2d2d for the resting state and #d41c1d for hover and current, neither
of which is a token. Also 25px boxes, which are under the 44px minimum
for a touch target and are the smallest thing on the page to hit on a
phone.
======================================================================= */
.nav-pagination > ul {
gap: var(--doc-space-2, 8px);
margin: 0;
}
.nav-pagination > ul > li {
padding: 0;
}
.nav-pagination a,
.nav-pagination > ul > li > span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0 var(--doc-space-2, 8px);
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 14px;
font-weight: 700;
line-height: 1;
text-align: center;
border: 1px solid var(--doc-line, #e0dbd6);
border-radius: var(--doc-radius-sm, 6px);
color: var(--doc-charcoal, #544f4a);
text-decoration: none;
transition:
border-color var(--doc-dur, 200ms) var(--doc-ease, ease),
color var(--doc-dur, 200ms) var(--doc-ease, ease),
background-color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
/* The ellipsis is not a control. No border, no box, no hit area. */
.nav-pagination > ul > li > span {
border-color: transparent;
color: var(--doc-mid, #7a736d);
min-width: 24px;
}
.nav-pagination a:hover,
.nav-pagination a:focus {
border-color: var(--doc-red, #d9201e);
background-color: var(--doc-red, #d9201e);
color: #fff;
text-decoration: none;
}
.nav-pagination .active > a {
border-color: var(--doc-red, #d9201e);
background-color: var(--doc-red, #d9201e);
color: #fff;
/* The current page is not a destination. */
cursor: default;
}
/* =======================================================================
PART 9 - Sidebar
Scoped to .sidebar on purpose. .widget__title is also used by the footer,
which has its own rules at higher specificity, and this must not reach
them.
======================================================================= */
.sidebar .widget .widget__title {
font-family: var(--doc-font-heading, "Montserrat", sans-serif);
font-size: 13px;
line-height: var(--kck-leading-snug, 1.4);
font-weight: 700;
letter-spacing: var(--kck-tracking-wide, 0.08em);
text-transform: uppercase;
color: var(--doc-mid-aa, #6e675f);
border-bottom: 1px solid var(--doc-line, #e0dbd6);
padding: 0 0 var(--doc-space-3, 12px);
margin-bottom: var(--doc-space-4, 16px);
}
/* The search field named 'ProximaNovaReg', which is not in the brand system
and is not loaded on this install, so it fell back to whatever generic
sans the browser picked. That is why the search box did not match
anything else on the page. */
.widget_search .search-field,
.search-form .search-field {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 15px;
height: 44px;
padding: 0 44px 0 var(--doc-space-3, 12px);
background: var(--doc-surface, #f4efe8);
border: 1px solid var(--doc-line, #e0dbd6);
border-radius: var(--doc-radius-sm, 6px);
color: var(--doc-ink, #38342e);
transition:
border-color var(--doc-dur, 200ms) var(--doc-ease, ease),
background-color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.widget_search .search-field:focus,
.search-form .search-field:focus {
background: #fff;
border-color: var(--doc-mid, #7a736d);
outline: 2px solid var(--doc-ink, #38342e);
outline-offset: 1px;
}
.widget_search .search-field::placeholder,
.search-form .search-field::placeholder {
color: var(--doc-mid, #7a736d);
opacity: 1;
}
.widget_search .search-submit,
.search-form .search-submit {
width: 44px;
border-radius: 0 var(--doc-radius-sm, 6px) var(--doc-radius-sm, 6px) 0;
}
/* The native category select inherited nothing and sat at the browser
default, next to inputs that are 44px tall. */
.sidebar .widget select {
width: 100%;
max-width: 300px;
height: 44px;
padding: 0 var(--doc-space-3, 12px);
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 15px;
color: var(--doc-ink, #38342e);
background: #fff;
border: 1px solid var(--doc-line, #e0dbd6);
border-radius: var(--doc-radius-sm, 6px);
}
/* Sidebar list widgets: recent posts, categories, archives. */
.sidebar .widget ul li a {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 15px;
line-height: var(--kck-leading-snug, 1.4);
color: var(--doc-charcoal, #544f4a);
text-decoration: none;
transition: color var(--doc-dur, 200ms) var(--doc-ease, ease);
}
.sidebar .widget ul li a:hover,
.sidebar .widget ul li a:focus {
color: var(--doc-red, #d9201e);
}
/* =======================================================================
PART 10 - The reds that are left
There were ten different reds in this theme's four sheets. Counted:
#d91f1f 28 uses, #d41c1d 28, #d81f1f 5, brand #d9201e 5, then #991c1f,
#cc3333, #991717, #ff0000, #ef0000, #d71f25 and #c53731 in ones and
twos. Brand red was the least used red on the blog.
Everything above puts the content templates onto var(--doc-red). This
last part catches the shared components that paint red and sit inside
these templates. It is not exhaustive for the whole theme: the remaining
uses are in the old header, the old footer and the comment form, and
those are better deleted with their sheets during the header migration
than overridden from here.
======================================================================= */
.section-single .yarpp-related h3:before,
.section-single .yarpp-related .section-related h4:before {
background-color: var(--doc-red, #d9201e);
}
.section-single .yarpp-related .yarpp-thumbnails-horizontal a,
.section-single .yarpp-related .section-related a {
font-family: var(--doc-font-body, "Nunito", sans-serif);
font-size: 16px;
line-height: var(--kck-leading-normal, 1.65);
color: var(--doc-red, #d9201e);
}
.section-single .yarpp-related .yarpp-thumbnails-horizontal a:hover,
.section-single .yarpp-related .section-related a:hover {
color: var(--doc-red-hover, #b81a18);
}
.section-single .content > p {
color: var(--doc-charcoal, #544f4a);
}
/* =======================================================================
PART 11 - Focus
The theme sets no focus style anywhere in the content area, so keyboard
users get the browser default, which the sheets partly suppress. Ink
rather than red: a red ring on red text is close to invisible.
======================================================================= */
.section-single a:focus-visible,
.section-single button:focus-visible,
.section-single input:focus-visible,
.section-single select:focus-visible {
outline: 2px solid var(--doc-ink, #38342e);
outline-offset: 2px;
border-radius: 3px;
}
/* =======================================================================
PART 12 - Small screens
Only the values that have to move. Sanctioned breakpoints, max-width
only.
======================================================================= */
@media (max-width: 767px) {
.post-primary .post__entry h1 {
font-size: 24px;
}
.post-primary .post__entry,
.post-primary .post__entry p {
font-size: 16px;
}
.post-blog .post__head h1 {
font-size: 24px;
}
.post-blog .post__entry,
.post-blog .post__entry p,
.post-blog .post__entry li {
font-size: 16px;
}
.post-blog .post__entry h1,
.post-blog .post__entry h2 {
font-size: 20px;
}
.post-blog .post__entry h3 {
font-size: 18px;
}
.article-main .article__body-title h2 {
font-size: 20px;
}
/* LEFT-ALIGNED, NOT CENTRED, and this corrects both the theme and my own
first pass at it.
new-styles.css centres the bio on mobile
(`.post__author blockquote { text-align: center }`) and I reinforced it
with text-align: center on the box. Seen painted on a 390px phone that
is eight lines of centred body copy with a ragged edge on both sides,
which is hard to read and is not how anything else on the page is set.
Avatar, name and bio all flush left now, sharing the same left edge as
the article above them. The blockquote rule below is what beats the
theme's centring: same 0-2-0 specificity, later in the load order. */
.post-blog .post__author {
padding: var(--doc-space-5, 20px);
text-align: left;
}
.post-blog .post__author img {
margin-left: 0;
margin-right: 0;
}
.post-blog .post__author blockquote {
padding-left: 0;
padding-top: var(--doc-space-4, 16px);
text-align: left;
}
.nav-pagination > ul {
justify-content: center;
}
/* THE LONG BREADCRUMB IS A PHONE PROBLEM, NOT A DESKTOP ONE. Measured on
a real post at four widths, with the last crumb's length varied:
1280px never wraps, even at 107 characters
984px wraps at 92 characters and up -> 1 of 346 posts
768px wraps at 56 and up -> ~50% of posts
390px wraps at 50 and up -> 234 of 346 posts (68%)
longest runs to 3 lines
Post H1 lengths across all 346 posts: median 56, mean 56, max 107.
So on a phone two thirds of posts spend two or three lines of the
top of the screen restating, in grey 13px, the words that the H1
says at 24px immediately underneath.
The last crumb is dropped below 768px. What remains is
"Blog > Kitchen", which is the part that is actually navigation. No
information is lost, because the crumb being removed is the title of
the page the reader is already on.
:not(:only-child) matters. The blog index renders a breadcrumb of
exactly ONE crumb, which is also its last child, so without that the
rule would empty the bar and leave a bordered strip with nothing in
it. Scoped to body.single as well, so the category archives keep both
of their crumbs; "Blog > Kitchen" is short and does not wrap.
The second rule kills the arrow that would otherwise be left pointing
at the crumb that is no longer there. The theme hides the arrow on
:last-child, and :last-child is still the hidden element.
If you would rather keep the crumb visible, replace this block with a
truncation instead:
body.single .breadcrumb > ol > li:not(:only-child):last-child {
max-width: 22ch; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; display: block;
}
That keeps one line at every width and ends it in an ellipsis. I
prefer dropping it, because an ellipsis mid-title reads as truncation
rather than as a trail, and the H1 is two lines below either way.
Keyed to the list item, not the anchor. The last crumb is a
now, not an , so an anchor-based rule would hide the CATEGORY and
leave the title. :not(:only-child) still matters: the blog index
renders exactly one crumb, and without it this would empty the bar and
leave a bordered strip with nothing in it. Scoped to body.single, so
the category and tag archives keep both crumbs, which are short. */
body.single .breadcrumb > ol > li:not(:only-child):last-child {
display: none;
}
}
/* =======================================================================
PART 12b - Where the sidebar stacks under the content
THE BREAKPOINT HERE IS 985px, WHICH IS NOT ON THE SANCTIONED LIST, AND
THAT IS DELIBERATE. Flagging it because it is the one number in this file
that breaks the house rule.
The two columns are floated by style.css and unfloated by
kck-header-footer.css:
@media (max-width: 985px) {
.kckhf-header-container + .shell .content,
.kckhf-header-container + .shell .sidebar {
float: none; width: 100%; max-width: 100%;
}
}
Measured in Chromium: side by side at 986px, stacked at 984px. So the
layout changes at 985 whether this file agrees or not. A divider set at
1023px, the nearest sanctioned breakpoint, would paint a horizontal rule
above the sidebar for the 38px window where the columns are STILL side by
side, which is a visible bug. A divider at 767px would leave 218px of
widths where the sidebar is stacked with no separation at all, which is
the thing being fixed.
A separator has to fire at the same width as the layout change it
separates. The sanctioned list governs breakpoints this file introduces;
this one is mirrored from the chrome, which owns it. The right long-term
fix is for 985 to move onto the list or for the chrome to move to 1023,
and either way this number follows it. It is in one place for that reason.
Nothing here touches kck-header-footer.css.
======================================================================= */
@media (max-width: 985px) {
/* Stacked, the sidebar butted straight against the pagination on the
index and against the author box on a post, with zero separation. */
.section-single .sidebar {
margin-top: var(--doc-space-10, 40px);
padding-top: var(--doc-space-8, 32px);
border-top: 1px solid var(--doc-line, #e0dbd6);
}
/* Between 780px and 985px the columns go full width, so the measure got
LONGER as the screen got smaller: the cards render 932px wide at a
984px viewport, against 729px on a 1280px desktop. Line length growing
as the window shrinks is backwards. Capped at the brand's wide measure
and centred, which only affects this 205px band. Single posts were
already safe, because .post__entry carries its own 715px cap.
Selector note. The chrome's rule is
`.kckhf-header-container + .shell .content`, which is three classes,
so 0-3-0. The obvious `.section-single .content` is only 0-2-0 and
loses to it, which is what it did: it measured as a no-op on the first
pass. `.section-single .shell .content` is also 0-3-0, reaching the
inner .shell that section__body wraps the columns in, so it ties and
wins on load order. No change to the chrome sheet.
THE BREADCRUMB IS IN THIS RULE FOR A REASON. It is a sibling of
.content inside .shell, not a child of it, so capping and centring the
two columns left the trail behind at the shell's own edge. Measured at
984px before this line: breadcrumb left edge 26px, content 102px, h1
102px, sidebar 102px. The trail started 76px left of the heading it
belongs to, on all three blog templates.
It does not show below 768px, because there the shell is narrower than
780px, the cap never binds, and all four land on 26px again. Which is
why the mobile pass came back clean. */
.section-single .shell .breadcrumb,
.section-single .shell .content,
.section-single .shell .sidebar {
max-width: var(--kck-measure-wide, 780px);
margin-left: auto;
margin-right: auto;
}
/* ONE LEFT EDGE FOR THE WHOLE STACKED SIDEBAR, which it did not have.
Measured at 768px: the widget titles and the "Select Category" label
sat flush left, the search field was stuck at the 300px it uses in a
narrow column, the