/* ==========================================================================
RW TOOLS — field-manual design system.
These are not blog posts. They are reference pages a man opens mid-problem.
Reference points: aviation quick-reference cards, equipment manuals.
Type-led, numbered, precise. No stock photography anywhere.
========================================================================== */
/* ---- 1. kill the generic photo hero on tool pages ---------------------- */
body.rw-tool-page #theme-top-section,
body.rw-tool-page .thrv_header ~ .section-background { display: none !important; }
/* ---- 2. the masthead ---------------------------------------------------- */
.rw-mast {
margin: 0 0 56px;
padding: 72px 24px 56px;
background: #0b0f14;
color: #fff;
margin-left: calc(50% - 50vw + 8px);
margin-right: calc(50% - 50vw + 8px);
width: calc(100vw - 16px);
border-bottom: 3px solid #ffaa00;
}
.rw-mast__in { max-width: 1040px; margin: 0 auto; }
.rw-mast__kicker {
font: 700 .72rem/1 Inter, sans-serif; letter-spacing: .22em;
text-transform: uppercase; color: #ffaa00; margin: 0 0 22px;
display: flex; gap: 14px; align-items: center;
}
.rw-mast__kicker::after {
content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.18);
}
.rw-mast__name {
font: 800 clamp(2.6rem, 7.4vw, 5.2rem)/0.94 Inter, sans-serif;
letter-spacing: -.035em; margin: 0 0 24px; color: #fff;
text-transform: none;
}
.rw-mast__line {
font: 400 clamp(1.05rem, 2.1vw, 1.42rem)/1.45 Inter, sans-serif;
color: #b9c6d2; margin: 0; max-width: 46ch;
}
/* the metadata strip — what a manual tells you before the procedure */
.rw-mast__meta {
display: flex; flex-wrap: wrap; gap: 0; margin: 40px 0 0;
border-top: 1px solid rgba(255,255,255,.14);
}
.rw-mast__meta div {
flex: 1 1 150px; padding: 18px 20px 0 0;
}
.rw-mast__meta dt {
font: 700 .66rem/1 Inter, sans-serif; letter-spacing: .16em;
text-transform: uppercase; color: #7f8fa0; margin: 0 0 7px;
}
.rw-mast__meta dd {
font: 700 1.06rem/1.3 Inter, sans-serif; color: #fff; margin: 0;
font-variant-numeric: tabular-nums;
}
/* ---- 3. numbered sections ---------------------------------------------- */
body.rw-tool-page .tcb-post-content { counter-reset: rwsec; }
body.rw-tool-page .tcb-post-content h2 {
counter-increment: rwsec;
position: relative;
font: 800 clamp(1.5rem, 3vw, 2.05rem)/1.18 Inter, sans-serif !important;
letter-spacing: -.02em;
color: #0b0f14 !important;
margin: 76px 0 22px !important;
padding-top: 26px;
border-top: 2px solid #0b0f14;
max-width: 760px;
}
body.rw-tool-page .tcb-post-content h2::before {
content: counter(rwsec, decimal-leading-zero);
display: block;
font: 800 .78rem/1 Inter, sans-serif;
letter-spacing: .18em; color: #ffaa00; margin-bottom: 12px;
}
body.rw-tool-page .tcb-post-content h2::after { display: none !important; }
/* ---- 4. reading column + type scale ------------------------------------ */
body.rw-tool-page .tcb-post-content > p,
body.rw-tool-page .rw-tool-article > p,
body.rw-tool-page .tcb-post-content ul,
body.rw-tool-page .tcb-post-content ol,
body.rw-tool-page .tcb-post-content blockquote {
max-width: 760px; margin-left: auto; margin-right: auto;
}
body.rw-tool-page .tcb-post-content p {
font-size: 1.12rem !important; line-height: 1.68 !important; color: #23303d !important;
}
/* the lead paragraph, straight after the card */
body.rw-tool-page .rw-card + p {
font-size: 1.36rem !important; line-height: 1.5 !important;
color: #0b0f14 !important; font-weight: 500;
}
/* ---- 5. pull quotes break the column ----------------------------------- */
body.rw-tool-page .tcb-post-content blockquote {
border: 0 !important; background: none !important;
padding: 10px 0 10px 28px !important;
border-left: 3px solid #ffaa00 !important;
margin-block: 44px !important;
}
body.rw-tool-page .tcb-post-content blockquote p {
font: 600 clamp(1.2rem,2.4vw,1.55rem)/1.4 Inter, sans-serif !important;
color: #0b0f14 !important; letter-spacing: -.012em;
}
body.rw-tool-page .tcb-post-content blockquote::before { display: none !important; }
/* ---- 6. lists read as procedure, not prose ----------------------------- */
body.rw-tool-page .tcb-post-content ul li,
body.rw-tool-page .tcb-post-content ol li {
font-size: 1.08rem; line-height: 1.6; color: #23303d;
padding-left: 6px; margin-bottom: 12px;
}
body.rw-tool-page .tcb-post-content ul li::marker { color: #ffaa00; }
body.rw-tool-page .tcb-post-content ol li::marker { color: #ffaa00; font-weight: 800; }
@media (max-width: 720px) {
.rw-mast { padding: 48px 20px 36px; }
.rw-mast__meta div { flex-basis: 50%; }
body.rw-tool-page .tcb-post-content h2 { margin-top: 54px !important; }
}
@media print { .rw-mast { background:#fff!important; color:#000!important; border-bottom:2px solid #000; } }
/* ---- 7. the masthead h2 is a title, not a numbered section -------------- */
body.rw-tool-page .tcb-post-content h2.rw-mast__name {
counter-increment: none !important;
font: 800 clamp(2.6rem, 7.4vw, 5.2rem)/0.94 Inter, sans-serif !important;
letter-spacing: -.035em !important;
color: #fff !important;
margin: 0 0 24px !important;
padding-top: 0 !important;
border-top: 0 !important;
max-width: none !important;
}
body.rw-tool-page .tcb-post-content h2.rw-mast__name::before { content: none !important; }
/* ---- 8. full-bleed without the scrollbar overflow ---------------------- */
body.rw-tool-page { overflow-x: hidden; }
.rw-mast {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
}
/* 100vw includes the scrollbar, so a full-bleed block always overhangs by its
width. `overflow-x: clip` on the root stops the scroll without breaking
position:sticky further up the page (overflow:hidden would). */
html:has(body.rw-tool-page), body.rw-tool-page { overflow-x: clip; }
/* ---- 9. FIX: the breakout was landing 20px off centre -------------------
`.tcb-post-content` carries margin-left/right:50px inside a 1060px shell,
so the reading column sits 20px right of the viewport centre. The
`calc(50% - 50vw)` breakout measures from the column, so the masthead was
pulled to x=20 on the left and past the right edge — a white strip down
the left side and a clipped right edge. Centre the column and the
breakout is exact. -------------------------------------------------- */
body.rw-tool-page .tcb-post-content {
margin-left: auto !important;
margin-right: auto !important;
}
/* ---- 10. FIX: dark type on dark panels ---------------------------------
Section 4 sets `.tcb-post-content p { color:#23303d !important }` for the
light reading column. The masthead and the reference card are dark panels
built out of , so their text was rendering #23303d on #0b0f14 — the
kicker and the promise line were effectively invisible. Restate the panel
colours at matching-or-greater specificity. ------------------------- */
body.rw-tool-page .tcb-post-content .rw-mast__kicker { color: #ffaa00 !important; }
body.rw-tool-page .tcb-post-content .rw-mast__line { color: #c3d0dc !important; }
body.rw-tool-page .tcb-post-content .rw-mast__name { color: #fff !important; }
body.rw-tool-page .tcb-post-content .rw-card__eyebrow { color: #ffaa00 !important; }
body.rw-tool-page .tcb-post-content .rw-card__line { color: #fff !important; }
body.rw-tool-page .tcb-post-content .rw-card__note { color: #9fb0c0 !important; }
body.rw-tool-page .tcb-post-content .rw-card__note strong { color: #fff !important; }
body.rw-tool-page .tcb-post-content .rw-card li,
body.rw-tool-page .tcb-post-content .rw-card li span { color: #e8edf2 !important; }
body.rw-tool-page .tcb-post-content .rw-card__n { color: #ffaa00 !important; }
/* ---- 11. FIX: the real cause of the off-centre breakout -----------------
`.section-content` carries padding-left:80px / padding-right:40px — a
leftover sidebar gutter. That pushes the reading column 20px right of the
viewport centre, and `calc(50% - 50vw)` measures from the column, so the
masthead landed at x=20 with a strip of page showing down its left edge.
The 50px side margins on `.tcb-post-content` come from an ID-level theme
rule, so this equalises the padding instead of fighting it. `.rw-mast` was
also content-box, adding its 24px padding on top of 100vw. ---------- */
body.rw-tool-page #theme-content-section .section-content {
padding-left: 60px !important;
padding-right: 60px !important;
}
.rw-mast { box-sizing: border-box; }
@media (max-width: 860px) {
body.rw-tool-page #theme-content-section .section-content {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
body.rw-tool-page .tcb-post-content .rw-mast { box-sizing: border-box !important; }
/* ---- 12. FIX: 52px of white between the header and the masthead --------
The theme stacks padding-top down the chain — .main-container 20px,
#theme-content-section 12px, .section-content 20px — which is right for a
page that opens with a headline, and wrong for one that opens with a
full-bleed black panel. The masthead butts the header. --------------- */
body.rw-tool-page #content .main-container,
body.rw-tool-page #theme-content-section,
body.rw-tool-page #theme-content-section .section-content { padding-top: 0 !important; }
/* ---- 13. the opening paragraph: where the tool was proven under fire ---
Sits between the masthead and the reference card. Larger than body copy so
the page opens on a story, not on a spec sheet. --------------------- */
body.rw-tool-page .tcb-post-content .rw-open {
max-width: 760px; margin: 0 auto 44px !important;
border-left: 3px solid #ffaa00; padding-left: 26px;
}
body.rw-tool-page .tcb-post-content .rw-open p {
font-family: "Source Serif 4", Georgia, serif !important;
font-size: 1.2rem !important; line-height: 1.58 !important;
color: #16212c !important; margin: 0 0 1.05em !important;
}
body.rw-tool-page .tcb-post-content .rw-open p:last-child { margin-bottom: 0 !important; }
/* the third beat is the hinge — it carries the weight of the other two */
body.rw-tool-page .tcb-post-content .rw-open p:last-child { font-weight: 600; }
@media (max-width: 720px) {
body.rw-tool-page .tcb-post-content .rw-open p { font-size: 1.08rem !important; }
body.rw-tool-page .tcb-post-content .rw-open { padding-left: 18px; }
}
/* ---- 14. FIX: wpautop wraps the markers in empty
-----
Each one is a 15px line plus margins sitting above the masthead, which on a
phone reads as a white band between the header and the black panel. */
body.rw-tool-page .tcb-post-content p:empty { display: none !important; }
body.rw-tool-page .tcb-post-content { margin-top: 0 !important; }
/* ---- 15. the tool's own icon, beside its name in the masthead ----------
Same eleven glyphs the Mindset Tools menu uses, so the page a man lands on
is marked the way the thing he clicked was. */
.rw-mast__head { display: flex; align-items: center; gap: 22px; margin: 0 0 24px; }
.rw-mast__head .rw-mast__name { margin: 0 !important; }
.rw-mast__ico {
flex: none; display: block; color: #ffaa00;
width: clamp(38px, 5.4vw, 66px); height: clamp(38px, 5.4vw, 66px);
}
.rw-mast__ico svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@media (max-width: 720px) {
.rw-mast__head { gap: 14px; }
.rw-mast__ico { width: 34px; height: 34px; }
}
@media print { .rw-mast__ico { color: #000 !important; } }
/* ---- 16. FIX: the tool icon read low against the title -----------------
`align-items:center` centres the icon on the h2's LINE BOX, but the visible
capitals sit in the upper part of that box — line-height is .94 and there is
descender space below the baseline with nothing in it. Measured at 1440px:
icon centre 347, cap-height centre 328, so it hung 19px low.
The offset is expressed in em of the icon's own size, not in pixels, so it
holds across the clamp() as the title and icon scale together. 0.28em of a
66px icon is the 18.5px correction. */
.rw-mast__ico {
font-size: clamp(38px, 5.4vw, 66px);
width: 1em; height: 1em;
transform: translateY(-0.28em);
}
@media (max-width: 720px) {
.rw-mast__ico { font-size: 34px; transform: translateY(-0.24em); }
}