/**
* Iron Extensions - Posts: shared styles.
*
* Loaded on every single post, and on any page that uses a post module. Keep this file
* for things more than one module needs (tokens, shared primitives). Anything specific
* to one module belongs in that module's own CSS file.
*
* Plain CSS - no build step. Save it and it ships.
*/
/*--------------------------------------------------------------
# Tokens
# Populated from the Figma design as modules are built, so every
# module reads from one place rather than repeating hex values.
--------------------------------------------------------------*/
:root {
--iron-red: #e60000;
/* How far an anchored heading must clear the top of the viewport. posts.js overwrites
this with the real measured total (sticky header + admin bar + breathing room); the
124 here is the logged-out desktop case (100px header + 24) so jump links still land
correctly with no JS. */
--iron-scroll-offset: 124px;
}
/*--------------------------------------------------------------
# Content images
#
# WPBakery's own stylesheet (js_composer.min.css) is what normally caps these at
# `max-width: 100%` - and it is NOT enqueued on posts, because WPBakery is not enabled for
# the Posts post type (MODULES.md D1). Its shortcodes still render, so a Single Image in a
# post body paints at its intrinsic size: measured 2560px and 1707px wide inside a 539px
# column, giving the document 1032px of horizontal overflow and a scrollbar on every
# viewport.
#
# Not gated on .iron-post-type: an image tearing the page open is broken regardless of the
# typography toggle.
#
# `:not([class*="iron-"])` keeps this off our own module/card artwork, which sizes itself
# deliberately: the meta bar icons are `height:24px; width:auto` at (0,1,0) and a bare
# `height:auto` here would beat them and collapse every one. Scoped to __body so the rail's
# own images are excluded too.
--------------------------------------------------------------*/
:where(body.single-post) .iron-article__body img:not([class*="iron-"]) {
max-width: 100%;
height: auto;
}
/*--------------------------------------------------------------
# Anchor targets
#
# The site header is `position: sticky; top: 0` and 100px tall, so a bare jump link scrolls
# the heading to y=0 - underneath it, invisible. Measured: a heading landed at 11.8px with
# scroll-margin-top: 0.
#
# Deliberately NOT gated on .iron-post-type: the h2 ids are stamped on every single post by
# Headings.php regardless of the type-scale toggle, so the anchors must clear the header
# whether that toggle is on or off.
#
# scroll-margin-top (not JS scroll handlers) so it also covers arriving at a /post/#section
# URL cold, which the browser scrolls before any script runs.
--------------------------------------------------------------*/
:where(body.single-post) .site-iron-main-generic h2[id] {
scroll-margin-top: var(--iron-scroll-offset, 124px);
}
/*--------------------------------------------------------------
# Article typography
#
# Brings single-post body copy toward the Figma design. Figma nodes 27:158 / 10:285
# (body) and 10:308 + line 10:309 (section heading).
#
# READING THE FIGMA FILE - the conversion factor is NOT uniform:
# GEOMETRY is scaled 0.925 (the mockup is drawn over a 1418px screenshot of a 1536
# viewport; the meta bar's 740px frame is the real 800px .container-800).
# TYPE is 1:1. Proof: the design's title is 70px/72px and the live title is 60px/72px -
# the LINE-HEIGHTS match exactly, which only holds at 1:1. Corroborated by the meta bar's
# text being bound to a real token (--static/body-medium/size: 14px), not a scaled value.
# So canvas font sizes are read literally here, while canvas widths are not.
#
# Body size deviates deliberately: the design says 13px/18px, which is below common
# long-form practice and ran ~77 characters per line in the design's own text. 15px/1.5
# keeps the design's intent (much smaller, much tighter than today's 18px/36px) while
# staying readable, and preserves a real 1.2x size step to the 18px h2. Same class of
# call as decisions D6/D7 in MODULES.md.
#
# SPECIFICITY - deliberately kept at the theme's own level, not above it:
# theme: .site-iron-main-generic p (0,1,1)
# here: :where(body.single-post.iron-post-type) .site-iron-main-generic p (0,1,1) - :where() adds 0
# This file is enqueued at priority 12 (theme = 11), so it wins on ORDER while staying
# beatable by the modules' own two-class rules (0,2,0). That matters: .iron-opmodel__title
# is a , and a (0,2,2) selector here would silently restyle every module's text.
--------------------------------------------------------------*/
:where(body.single-post.iron-post-type) .site-iron-main-generic p {
font-size: 0.9375rem; /* 15 */
line-height: 1.5;
}
/* The list itself, not just its items: the theme sizes BOTH, and the ul's own font-size is
what its em-based padding resolves against. Leaving the ul at 18px while the li reads
15px makes the two 1.2em offsets below compute to different numbers (21.6 vs 18), which
pushes the dot off the list's left edge. */
:where(body.single-post.iron-post-type) .site-iron-main-generic ul,
:where(body.single-post.iron-post-type) .site-iron-main-generic ol {
font-size: 0.9375rem; /* 15 */
}
/* Matched to the theme's own (0,1,2) list selector - a (0,1,1) rule would lose to it. */
:where(body.single-post.iron-post-type) .site-iron-main-generic ul li,
:where(body.single-post.iron-post-type) .site-iron-main-generic ol li {
font-size: 0.9375rem; /* 15 */
line-height: 1.5;
}
/*--------------------------------------------------------------
# Heading scale
#
# Rebalanced around the design's 18px h2. Without this, h3 (20px) and h4 (18px) are as big
# as or bigger than the h2 above them - an inverted hierarchy.
#
# The design only specifies the h2, so the rest is derived. Scaling everything by the
# design's own factor (h2 24 -> 18 = 0.75) works for h1 but collapses below it: h3 would
# land on 15px (identical to body), h4 on 13.5px, and h5/h6 on 10.5px - unreadable. So h1
# takes the 0.75, and the lower half is set deliberately to keep each step distinct and
# legible:
#
# h1 45 (0.75 x 60)
# h2 18 design - Reckless Neue + red rule, so it reads distinct from h3 despite the
# modest size gap
# h3 16
# h4 15 same size as body, separated by weight
# h5 13 uppercase red - an eyebrow, where small is idiomatic
# h6 13 uppercase
#
# rem (not px) to match the theme's own cr() output, so a reader who raises their browser
# font size still scales. Weight/tracking/line-height stay as the theme has them.
--------------------------------------------------------------*/
:where(body.single-post.iron-post-type) .site-iron-main-generic h1,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h1 {
font-size: 2.8125rem; /* 45 */
}
/* The theme steps h1 down at these widths; keep doing so, or 45px Reckless can overflow a
narrow column. Viewport queries here (not container) to mirror the theme's own heading
rules - the container-query approach is for the modules, which own their layout. */
@media (max-width: 1024px) {
:where(body.single-post.iron-post-type) .site-iron-main-generic h1,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h1 {
font-size: 2.25rem; /* 36 */
}
}
@media (max-width: 768px) {
:where(body.single-post.iron-post-type) .site-iron-main-generic h1,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h1 {
font-size: 1.75rem; /* 28 */
}
}
:where(body.single-post.iron-post-type) .site-iron-main-generic h3,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h3 {
font-size: 1rem; /* 16 */
}
:where(body.single-post.iron-post-type) .site-iron-main-generic h4,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h4 {
font-size: 0.9375rem; /* 15 */
}
:where(body.single-post.iron-post-type) .site-iron-main-generic h5,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h5,
:where(body.single-post.iron-post-type) .site-iron-main-generic h6,
:where(body.single-post.iron-post-type) .site-iron-main-generic .h6 {
font-size: 0.8125rem; /* 13 */
}
/*--------------------------------------------------------------
# List bullets
#
# The theme's bullet is a 10x10 PNG drawn as a background on ul li::before (empty content),
# absolutely positioned - so it does not move with the type the way a real list-marker
# would, and both of its offsets were tuned to the old 18px/36px body:
#
# top: 0.7em -> 0.7 x 18 = 12.6px, centring the 10px dot at 17.6 ~= the 18px text
# centre of a 36px line box.
#
# At 15px/22.5px that same 0.7em computes to 10.5px and centres the dot at 15.5 against a
# text centre of 11.25 - roughly 4px low. Both offsets are restated as formulas so they
# hold if the size changes again:
#
# top = (line-height - dot) / 2 -> centres the dot on the FIRST line
# left = -(indent) -> dot sits in the ul's padding
#
# Indent goes to 1.2em so the gap between dot and text stays 8px (1.2 x 15 - 10), the same
# gap the old 18px type had; at 1em it would have quietly tightened to 5px. 1.2em x 15px is
# also 18px - the exact indent the old 1em x 18px gave - so the list block does not shift.
#
# Specificity: the theme's ul li::before is (0,1,3) - one of the highest selectors it uses -
# so these match it exactly and win on load order. Key Takeaways kills its own bullet at
# (0,2,1), which still beats this, so its list is untouched.
--------------------------------------------------------------*/
:where(body.single-post.iron-post-type) .site-iron-main-generic ul {
padding-left: 1.2em;
}
:where(body.single-post.iron-post-type) .site-iron-main-generic ul li::before {
top: calc((1.5em - 10px) / 2);
left: -1.2em;
}
/*--------------------------------------------------------------
# Section heading (h2) - Figma 10:308 + line 10:309
#
# Design: Reckless Neue 18px / 21.047px, -0.54px (= -0.03em), #000, with a 28x2px #E60000
# rule 3.5px beneath it. ("Nimbus Roman D" in the file is Figma's substitute for Reckless
# Neue, not a real spec - the site has no Nimbus.) The rule colour is read from Figma's own
# exported asset, not assumed.
#
# The rule is an ::after rather than markup, so authors just write a normal H2 and every
# heading gets it - nothing to remember, and the h2 stays a real heading for "On This Page"
# to anchor to later.
#
# Spacing from the canvas: previous copy ends 1895 -> heading 1933 (38), rule bottom 1960.5
# -> next copy 1974 (13.5).
--------------------------------------------------------------*/
:where(body.single-post.iron-post-type) .site-iron-main-generic h2 {
margin: 38px 0 13.5px;
font-family: 'Reckless Neue', Georgia, serif;
font-size: 18px;
font-weight: 400;
line-height: 1.169;
letter-spacing: -0.03em;
color: #000;
}
:where(body.single-post.iron-post-type) .site-iron-main-generic h2::after {
content: '';
display: block;
width: 28px;
height: 2px;
margin-top: 3.5px;
background: var(--iron-red);
}
/*--------------------------------------------------------------
# Masthead byline - Figma 9:208 ("Author: {name}")
#
# Markup:
in .e-content-inner, right after the .e-title (single.php).
# This is the masthead, not a post-body module, but it is single-post-only and posts.css is
# already the single-post stylesheet - and per project convention iron-extensions owns the
# CSS, not iron-style.css or the SCSS build.
#
# Type is 1:1 from the canvas: 16 / 20, -0.5px, Graphik Semibold. The site enqueues a real
# 600-weight face ("Graphik Semibold", graphiksemibold-webfont), so font-weight:600 is the
# actual semibold rather than a synthesised bold.
#
# COLOUR FOLLOWS THE MASTHEAD, not hardcoded to the canvas's black. The masthead flips
# light/dark via .o-textcolor-light (_masthead.scss does this for .e-title/.e-descrip/
# .e-post-date). The canvas is black because that mock is a light-background masthead;
# defaulting to #000 and flipping to #fff on a dark one is the same rule the title obeys, so
# the byline is never invisible on a dark masthead.
--------------------------------------------------------------*/
.site-masthead-generic .e-content-inner .e-author {
margin: 0 0 0.5rem;
font-family: 'Graphik', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.5px;
color: #000;
}
.site-masthead-generic.o-textcolor-light .e-content-inner .e-author {
color: #fff;
}
/*--------------------------------------------------------------
# Share block inside the article
#
# Carried over from _global.scss, which hid this with
# `.site-iron-main-generic > .container-800 .kt_simple_share_container`. A post's content
# column is now `.container` (the standard page width - single.php), so that selector no
# longer matches and the guard would have been silently dropped by the width change.
#
# Re-stated against `.iron-article` rather than the new container class, which is the more
# honest target anyway: what must not appear is a share widget INSIDE the article, and the
# real one lives in the masthead's `.e-content-meta-actions`. Keyed to the container class it
# would also have covered the "Related Content" and subscribe blocks, which the original rule
# never touched.
#
# !important is the original's, not a new one: Kadence's own share styles are !important.
--------------------------------------------------------------*/
.iron-article .kt_simple_share_container {
display: none !important;
}