/* ══════════════════════════════════════════════════════════════════
GROWTH EDGE — RESOURCE SHARED STYLESHEET
resource-shared.css · v2.0
For all Growth Edge downloadable resources:
PDF guides · workbooks · facilitation tools · diagnostic tools
HOW TO LINK (paste into ):
──────────────────────────────────────────────────────────────────
FONT SYSTEM:
──────────────────────────────────────────────────────────────────
Libre Baskerville — display headings, cover title, part titles
Source Serif 4 — body text, lead paragraphs, callout quotes
DM Sans — labels, eyebrows, UI elements, small caps
TYPICAL PAGE STRUCTURE:
──────────────────────────────────────────────────────────────────
screen-only branded bar
…
floating PDF button
…
…
cover page
…
interior page
prints on every page
COMPONENTS:
──────────────────────────────────────────────────────────────────
.part-header Section opener (eyebrow + title + subtitle)
.callout Terracotta left-border italic quote block
.callout-navy Navy left-border info block
.presence-block Strong terracotta featured block
.reframe-block Navy tinted reframe/insight block
.reflection-block Numbered reflection questions
.diag-block Selectable diagnostic rows
.approach-block Selectable approach cards
.compare-grid Two-column before/after comparison
.final-check Section summary / closing block
.go-deeper Bordered contact/CTA block (print-safe)
.response-area Lined text input area
.divider Horizontal rule
.interactive-note Gold-border usage instruction bar
.page-number Hardcoded page number (Chrome-reliable)
PRINT RULES:
──────────────────────────────────────────────────────────────────
- Background: var(--paper) / #fff — no dark fills anywhere
- No solid dark backgrounds on large blocks (ink waste, warping)
- Tints and borders only: navy-light, accent-light, section-bg
- .page-break starts a new page — .part-header does NOT (page-number sits between them)
- break-inside: avoid on all component blocks
- CSS page counters unreliable in Chrome — use .page-number
with hardcoded numbers on each page instead
- .video-embed-block hidden on print via display:none
══════════════════════════════════════════════════════════════════ */
/* ── DESIGN TOKENS ── */
:root {
--ink: #1a1714;
--paper: #faf8f4;
--warm-mid: #6b6258;
--light: #9a9088;
--accent: #b5432a;
--accent-light: #f0e8e4;
--gold: #c9943a;
--gold-light: #fdf6e8;
--navy: #1e3a5f;
--navy-light: #e8eef5;
--rule: #ddd8ce;
--section-bg: #f5f2ec;
/* Font families */
--font-display: 'Libre Baskerville', Georgia, serif;
--font-body: 'Source Serif 4', 'Georgia', serif;
--font-ui: 'DM Sans', system-ui, sans-serif;
}
/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
font-size: 15px;
line-height: 1.75;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* ══════════════════════════════════════════════════════════════════
RESOURCE HEADER
Lightweight branded bar — screen only, hidden on print.
══════════════════════════════════════════════════════════════════ */
.resource-header {
background: var(--paper);
border-bottom: 1px solid var(--rule);
padding: 13px calc(50% - 332px);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.resource-header-brand {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
}
.resource-header-title {
font-family: var(--font-ui);
font-size: 12px;
color: var(--warm-mid);
font-weight: 400;
text-align: center;
flex: 1;
padding: 0 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-header-back {
font-family: var(--font-ui);
font-size: 12px;
color: var(--warm-mid);
text-decoration: none;
flex-shrink: 0;
transition: color 0.15s;
}
.resource-header-back:hover { color: var(--accent); }
/* ══════════════════════════════════════════════════════════════════
PRINT BUTTON & TOAST
Floating bottom-right. Hidden on print.
══════════════════════════════════════════════════════════════════ */
.print-bar {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 200;
}
.print-btn {
background: var(--navy);
color: #fff;
border: none;
border-radius: 6px;
padding: 12px 22px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-ui);
cursor: pointer;
letter-spacing: 0.5px;
box-shadow: 0 4px 16px rgba(30,58,95,0.25);
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.print-btn:hover { background: #152b47; }
.save-toast {
position: fixed;
bottom: 76px;
right: 24px;
z-index: 200;
background: var(--ink);
color: #fff;
font-size: 12px;
padding: 8px 14px;
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
font-family: var(--font-ui);
}
.save-toast.show { opacity: 1; }
/* ══════════════════════════════════════════════════════════════════
COVER PAGE
Full first page. Gradient bar top, byline anchored bottom.
══════════════════════════════════════════════════════════════════ */
.cover {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 72px 48px 40px;
max-width: 760px;
margin: 0 auto;
position: relative;
background: var(--paper);
}
.cover::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cover-eyebrow {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
margin-bottom: 24px;
}
.cover-title {
font-family: var(--font-display);
font-size: clamp(34px, 6vw, 54px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.5px;
margin-bottom: 8px;
color: var(--ink);
}
.cover-title em {
font-style: italic;
color: var(--accent);
display: block;
}
.cover-subtitle {
font-family: var(--font-body);
font-size: clamp(15px, 2vw, 18px);
color: var(--warm-mid);
font-weight: 300;
font-style: italic;
margin-bottom: 36px;
margin-top: 16px;
max-width: 520px;
line-height: 1.55;
}
.cover-rule-line {
width: 60px;
height: 3px;
background: var(--gold);
margin-bottom: 28px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cover-desc {
font-family: var(--font-body);
font-size: 15px;
color: var(--warm-mid);
line-height: 1.8;
max-width: 520px;
font-weight: 300;
margin-bottom: 32px;
}
.cover-use-when {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 40px;
}
.cover-use-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-ui);
font-size: 13px;
color: var(--warm-mid);
line-height: 1.5;
}
.cover-use-item::before {
content: '—';
color: var(--accent);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.cover-byline {
border-top: 1px solid var(--rule);
padding-top: 20px;
margin-top: auto;
}
.cover-byline-name {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--warm-mid);
font-weight: 500;
}
.cover-byline-email {
font-family: var(--font-ui);
font-size: 12px;
color: var(--warm-mid);
margin-top: 4px;
}
.cover-byline-email a {
color: var(--warm-mid);
text-decoration: none;
}
/* ══════════════════════════════════════════════════════════════════
INTERIOR PAGES
══════════════════════════════════════════════════════════════════ */
.page {
max-width: 760px;
margin: 0 auto;
padding: 56px 48px 48px;
background: var(--paper);
position: relative;
}
.page::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.page-number { display: none; } /* deprecated */
.page-num-print { display: none; } /* deprecated */
.page-num-top { display: none; } /* shown only on print */
@media print {
.page-num-top {
display: block;
text-align: right;
font-family: 'DM Sans', sans-serif;
font-size: 9px;
color: #aaa;
letter-spacing: 1px;
margin-bottom: 4px;
page-break-after: avoid;
}
}
/* ══════════════════════════════════════════════════════════════════
BODY TYPOGRAPHY
══════════════════════════════════════════════════════════════════ */
.page p {
font-family: var(--font-body);
margin-bottom: 18px;
font-size: 15px;
line-height: 1.8;
color: var(--ink);
}
.page p.lead {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.75;
color: var(--warm-mid);
font-weight: 300;
font-style: italic;
}
.page h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
margin: 32px 0 12px;
color: var(--ink);
letter-spacing: -0.2px;
}
.page ul, .page ol {
font-family: var(--font-body);
padding-left: 20px;
margin-bottom: 18px;
}
.page li {
font-size: 15px;
line-height: 1.75;
margin-bottom: 6px;
color: var(--ink);
}
/* ══════════════════════════════════════════════════════════════════
PART HEADER
Opens each major section. Always starts a new print page.
══════════════════════════════════════════════════════════════════ */
.part-header {
margin: 0 0 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.part-number {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
margin-bottom: 6px;
}
.part-title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--ink);
letter-spacing: -0.3px;
}
.part-subtitle {
font-family: var(--font-body);
font-size: 14px;
color: var(--warm-mid);
margin-top: 8px;
font-style: italic;
font-weight: 300;
}
/* ══════════════════════════════════════════════════════════════════
CALLOUT BLOCKS
══════════════════════════════════════════════════════════════════ */
.callout {
background: var(--section-bg);
border-left: 4px solid var(--accent);
padding: 20px 24px;
margin: 28px 0;
border-radius: 0 6px 6px 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.callout p {
font-family: var(--font-body);
font-style: italic;
font-size: 16.5px;
line-height: 1.65;
margin: 0;
color: var(--ink);
}
.callout-navy {
background: var(--navy-light);
border-left: 4px solid var(--navy);
padding: 18px 22px;
margin: 20px 0;
border-radius: 0 6px 6px 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.callout-navy p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.7;
margin: 0;
color: var(--ink);
}
/* ══════════════════════════════════════════════════════════════════
PRESENCE / FEATURED BLOCK
══════════════════════════════════════════════════════════════════ */
.presence-block {
background: var(--accent-light);
border-left: 6px solid var(--accent);
border-top: 3px solid var(--accent);
padding: 28px 32px;
margin: 32px 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.presence-eyebrow {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 12px;
}
.presence-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
color: var(--ink);
margin-bottom: 14px;
line-height: 1.3;
}
.presence-block p {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.8;
color: var(--ink);
margin-bottom: 12px;
}
.presence-block p:last-child {
font-style: italic;
font-size: 15px;
color: var(--accent);
margin-bottom: 0;
}
/* ══════════════════════════════════════════════════════════════════
REFRAME BLOCK
══════════════════════════════════════════════════════════════════ */
.reframe-block {
background: var(--navy-light);
border: 1px solid var(--navy);
border-left: 5px solid var(--navy);
border-radius: 0 8px 8px 0;
padding: 22px 26px;
margin: 24px 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.reframe-label {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--navy);
font-weight: 600;
margin-bottom: 14px;
}
.reframe-block p {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.8;
color: var(--ink);
margin-bottom: 10px;
}
.reframe-block p:last-child { margin-bottom: 0; }
/* ══════════════════════════════════════════════════════════════════
REFLECTION BLOCK
══════════════════════════════════════════════════════════════════ */
.reflection-block {
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
margin: 24px 0;
}
.reflection-header {
background: var(--gold);
color: var(--ink);
padding: 10px 20px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.reflection-q {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 20px;
border-bottom: 1px solid var(--rule);
}
.reflection-q:last-child { border-bottom: none; }
.reflection-q-num {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
line-height: 1.2;
min-width: 24px;
}
.reflection-q-text {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.65;
color: var(--ink);
padding-top: 2px;
flex: 1;
}
/* ══════════════════════════════════════════════════════════════════
RESPONSE AREAS
══════════════════════════════════════════════════════════════════ */
.response-area {
width: 100%;
border: none;
border-bottom: 1px solid var(--rule);
background: repeating-linear-gradient(
transparent, transparent 27px,
var(--rule) 27px, var(--rule) 28px
);
min-height: 84px;
padding: 10px 20px;
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
resize: vertical;
outline: none;
line-height: 28px;
transition: all 0.2s;
}
.response-area:focus {
background: #fff;
border-bottom: 2px solid var(--accent);
}
.response-area::placeholder {
color: #ccc;
font-style: italic;
}
/* ══════════════════════════════════════════════════════════════════
DIAGNOSTIC BLOCK
Header: navy-light tint, no solid fill.
══════════════════════════════════════════════════════════════════ */
.diag-block {
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
margin: 24px 0;
}
.diag-header {
background: var(--navy-light);
border-bottom: 2px solid var(--navy);
color: var(--navy);
padding: 12px 20px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-row {
display: flex;
border-bottom: 1px solid var(--rule);
cursor: pointer;
transition: background 0.15s;
}
.diag-row:last-child { border-bottom: none; }
.diag-row:hover { background: #fdf9f7; }
.diag-row.selected { background: var(--accent-light); }
.diag-label {
width: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--section-bg);
border-right: 1px solid var(--rule);
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--accent);
transition: all 0.15s;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-row.selected .diag-label {
background: var(--accent);
color: #fff;
}
.diag-content { flex: 1; padding: 14px 18px; }
.diag-content strong {
font-family: var(--font-ui);
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.diag-content span {
font-family: var(--font-body);
font-size: 13px;
color: var(--warm-mid);
line-height: 1.55;
}
.diag-tick {
width: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--rule);
}
.tick-box {
width: 20px;
height: 20px;
border: 2px solid var(--rule);
border-radius: 4px;
transition: all 0.15s;
position: relative;
}
.diag-row:hover .tick-box { border-color: var(--accent); }
.diag-row.selected .tick-box {
background: var(--accent);
border-color: var(--accent);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-row.selected .tick-box::after {
content: '✓';
position: absolute;
color: #fff;
font-size: 12px;
font-weight: 700;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.diag-summary {
display: none;
background: var(--section-bg);
border: 1px solid var(--rule);
border-top: 3px solid var(--accent);
padding: 16px 20px;
margin-top: -1px;
border-radius: 0 0 6px 6px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-summary.show { display: block; }
.diag-summary-label {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 8px;
}
.diag-summary p {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--ink);
line-height: 1.65;
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════
APPROACH CARDS
══════════════════════════════════════════════════════════════════ */
.approach-block {
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
margin: 14px 0;
transition: border-color 0.2s;
}
.approach-block.chosen { border-color: var(--navy); }
.approach-header {
display: flex;
align-items: center;
gap: 14px;
background: var(--section-bg);
padding: 12px 18px;
border-bottom: 1px solid var(--rule);
border-left: 5px solid var(--accent);
transition: border-left-color 0.2s;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.approach-block.chosen .approach-header { border-left-color: var(--navy); }
.approach-num {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--accent);
line-height: 1;
flex-shrink: 0;
transition: color 0.2s;
}
.approach-block.chosen .approach-num { color: var(--navy); }
.approach-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
.approach-body { padding: 16px 20px; }
.approach-body p {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--warm-mid);
margin-bottom: 10px;
line-height: 1.7;
}
.approach-body p:last-child { margin-bottom: 0; }
.approach-action {
background: var(--section-bg);
border-top: 1px solid var(--rule);
padding: 12px 20px;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
line-height: 1.65;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.approach-action-label {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 6px;
}
.approach-select-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: var(--navy-light);
border-top: 1px solid var(--rule);
cursor: pointer;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.approach-select-row input[type="checkbox"] {
accent-color: var(--navy);
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
}
.approach-select-row label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
}
.chosen-summary {
display: none;
background: var(--navy-light);
border: 2px solid var(--navy);
border-radius: 8px;
padding: 20px 24px;
margin: 20px 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.chosen-summary.show { display: block; }
.chosen-summary-label {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--navy);
font-weight: 700;
margin-bottom: 10px;
}
.chosen-summary ul { list-style: none; padding: 0; }
.chosen-summary ul li {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--ink);
padding: 4px 0 4px 18px;
position: relative;
}
.chosen-summary ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--navy);
font-weight: 700;
}
/* ══════════════════════════════════════════════════════════════════
COMPARE GRID
Right column: navy-light tint, no solid fill.
══════════════════════════════════════════════════════════════════ */
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 24px 0;
}
.compare-card {
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
}
.compare-card-header {
padding: 10px 16px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.compare-card-header.left {
background: var(--section-bg);
color: var(--warm-mid);
border-bottom: 3px solid var(--rule);
}
.compare-card-header.right {
background: var(--navy-light);
color: var(--navy);
border-bottom: 3px solid var(--navy);
}
.compare-card-body { padding: 14px 16px; }
.compare-card-body ul { list-style: none; padding: 0; margin: 0; }
.compare-card-body ul li {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.6;
color: var(--warm-mid);
padding: 5px 0 5px 18px;
position: relative;
border-bottom: 1px solid var(--rule);
}
.compare-card-body ul li:last-child { border-bottom: none; }
.compare-card-body ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--accent);
}
.compare-card-header.right + .compare-card-body ul li::before {
color: var(--navy);
}
/* ══════════════════════════════════════════════════════════════════
FINAL CHECK
══════════════════════════════════════════════════════════════════ */
.final-check {
background: var(--section-bg);
border: 1px solid var(--rule);
border-top: 4px solid var(--navy);
border-radius: 0 0 8px 8px;
padding: 28px 32px;
margin: 32px 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.final-check h3 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
margin-top: 0;
margin-bottom: 12px;
}
.final-check > p {
font-family: var(--font-body);
font-size: 14px;
color: var(--warm-mid);
margin-bottom: 16px;
line-height: 1.7;
}
/* ══════════════════════════════════════════════════════════════════
GO DEEPER / CTA BLOCK
Print-safe: navy border + navy-light tint. No dark fill.
══════════════════════════════════════════════════════════════════ */
.go-deeper {
border: 2px solid var(--navy);
border-top: 5px solid var(--navy);
border-radius: 8px;
background: var(--navy-light);
padding: 32px 36px;
margin: 36px 0 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.go-deeper-eyebrow {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--navy);
font-weight: 700;
margin-bottom: 10px;
}
.go-deeper h3 {
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
color: var(--ink);
margin: 0 0 12px;
}
.go-deeper p {
font-family: var(--font-body);
font-size: 14px;
color: var(--warm-mid);
line-height: 1.75;
margin-bottom: 24px;
}
.go-deeper-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 32px;
}
.go-deeper-label {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px;
}
.go-deeper-value {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.go-deeper-value a {
color: var(--accent);
text-decoration: none;
}
.go-deeper-value a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════
MISC
══════════════════════════════════════════════════════════════════ */
.divider {
border: none;
border-top: 1px solid var(--rule);
margin: 36px 0;
}
.interactive-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 28px;
background: var(--gold-light);
border-left: 4px solid var(--gold);
padding: 14px 18px;
border-radius: 0 6px 6px 0;
font-family: var(--font-ui);
font-size: 12px;
color: var(--warm-mid);
line-height: 1.55;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Video: visible on screen, hidden on print */
.video-embed-block { margin: 28px 0 32px; }
.page-footer {
border-top: 1px solid var(--rule);
padding: 12px 0 4px;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 40px;
}
.page-footer-brand {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--light);
font-weight: 500;
}
.page-footer-num {
font-family: var(--font-ui);
font-size: 10px;
color: var(--light);
}
.print-footer-fixed { display: none; }
.page-break { page-break-before: always; }
/* ══════════════════════════════════════════════════════════════════
PRINT STYLES
══════════════════════════════════════════════════════════════════ */
@media print {
@page {
margin: 14mm 16mm 20mm;
size: A4;
}
body {
background: #fff;
font-size: 12.5px;
line-height: 1.55;
}
/* Hide screen-only elements */
.resource-header,
.print-bar,
.save-toast,
.approach-select-row,
.video-embed-block,
.interactive-note,
.page-footer,
.cover-icon { display: none !important; }
/* Cover */
.cover {
min-height: 0;
padding: 32px 40px 28px;
page-break-after: always;
background: #fff !important;
}
.cover-title { font-size: 38px; }
.cover-subtitle { font-size: 14px; margin-bottom: 20px; margin-top: 10px; }
.cover-rule-line { margin-bottom: 18px; }
.cover-desc { font-size: 13px; margin-bottom: 20px; }
.cover-use-when { margin-bottom: 24px; gap: 8px; }
.cover-use-item { font-size: 12px; }
.cover-byline { padding-top: 14px; }
/* Interior pages */
.page {
padding: 48px 40px 24px;
background: #fff !important;
}
/* Page breaks */
.page-break { page-break-before: always; }
.part-header {
page-break-before: avoid;
page-break-after: avoid;
margin-bottom: 18px;
padding-bottom: 10px;
}
/* Tighten spacing */
.page p { margin-bottom: 8px; }
.page h3 { margin: 16px 0 6px; }
.divider { margin: 14px 0; }
.callout { margin: 10px 0; padding: 12px 16px; }
.callout-navy { margin: 8px 0; padding: 10px 14px; }
.presence-block { margin: 12px 0; padding: 14px 18px; }
.reflection-block { margin: 10px 0; }
.reflection-q { padding: 8px 14px; }
.diag-block { margin: 12px 0; }
.go-deeper { padding: 14px 20px; margin: 12px 0 0; }
.final-check { padding: 14px 20px; margin: 12px 0; }
.chosen-summary { padding: 12px 16px; margin: 10px 0; }
.compare-grid { gap: 8px; margin: 12px 0; }
/* Keep blocks together */
.approach-block,
.reflection-block,
.diag-block,
.compare-grid,
.presence-block,
.reframe-block,
.callout,
.callout-navy,
.final-check,
.chosen-summary,
.go-deeper { break-inside: avoid; }
/* Response lines */
.response-area {
background: repeating-linear-gradient(
transparent, transparent 27px,
#ddd8ce 27px, #ddd8ce 28px
) !important;
border: none !important;
min-height: 70px;
resize: none;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Colour accuracy */
.diag-row.selected {
background: #f0e8e4 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-row.selected .diag-label {
background: #b5432a !important;
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-row.selected .tick-box {
background: #b5432a !important;
border-color: #b5432a !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.reflection-header,
.diag-header,
.diag-summary.show,
.chosen-summary.show,
.presence-block,
.reframe-block,
.callout,
.callout-navy,
.compare-card-header,
.go-deeper,
.final-check,
.approach-header,
.approach-action {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.diag-summary.show,
.chosen-summary.show { display: block; }
/* Fixed footer on every printed page */
.print-footer-fixed {
display: flex !important;
position: fixed;
bottom: 0; left: 0; right: 0;
justify-content: space-between;
align-items: center;
border-top: 2px solid var(--gold);
padding: 5px 16mm;
font-size: 9.5px;
color: var(--warm-mid);
font-family: 'DM Sans', sans-serif;
background: #fff;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ══════════════════════════════════════════════════════════════════
WANT TO GO DEEPER — plain last-page contact block
Standard across all guides. Use on the final page.
Pair with margin-top to push to bottom when page has space above.
══════════════════════════════════════════════════════════════════ */
.want-to-go-deeper {
border-top: 1px solid var(--rule);
padding-top: 20px;
}
.want-to-go-deeper-label {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--warm-mid);
margin-bottom: 10px;
}
.want-to-go-deeper-text {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--warm-mid);
line-height: 1.6;
margin-bottom: 14px;
}
/* ══════════════════════════════════════════════════════════════════
MOBILE
Hidden print button + desktop-only note on small screens.
Handled here so every guide gets it automatically.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.print-bar { display: none !important; }
.desktop-only-note { display: block !important; }
}
.desktop-only-note { display: none; }
/* ══════════════════════════════════════════════════════════════════
GUIDE AUTHOR BOX
Screen version + print-only final page.
Paste _guide-author-box.html snippet into every guide before
the print footer div.
══════════════════════════════════════════════════════════════════ */
/* Screen version */
.guide-author-box {
max-width: 680px;
margin: 72px auto 48px;
padding: 0 24px;
}
.guide-author-inner {
display: flex;
gap: 24px;
align-items: flex-start;
background: #fdf7f5;
border-left: 3px solid #b5432a;
border-radius: 0 8px 8px 0;
padding: 28px 28px 28px 24px;
}
.guide-author-photo {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
margin-top: 2px;
}
.guide-author-name {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 16px;
font-weight: 700;
color: #1a1714;
margin-bottom: 8px;
}
.guide-author-body {
font-size: 15px;
color: #6b6258;
line-height: 1.75;
margin-bottom: 8px;
}
.guide-author-body:last-child { margin-bottom: 0; }
.guide-author-links {
font-size: 13px;
font-weight: 600;
margin-top: 4px;
}
.guide-author-link {
color: #b5432a;
text-decoration: none;
font-weight: 600;
}
.guide-author-link:hover { text-decoration: underline; }
@media (max-width: 540px) {
.guide-author-inner { flex-direction: column; gap: 16px; }
}
/* Hide screen version on print */
@media print { .guide-author-box { display: none; } }
/* Print-only version */
.guide-author-print { display: none; }
@media print {
.guide-author-print {
display: block;
page-break-before: always;
padding: 48px 48px 0;
}
.guide-author-print-inner {
display: flex;
gap: 20px;
align-items: flex-start;
border-left: 3px solid #b5432a;
padding-left: 20px;
margin-bottom: 24px;
}
.guide-author-print-photo {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.guide-author-print-name {
font-size: 15px;
font-weight: 700;
color: #1a1714;
margin-bottom: 6px;
}
.guide-author-print-body {
font-size: 12px;
color: #6b6258;
line-height: 1.7;
margin-bottom: 6px;
}
.guide-author-print-url {
font-size: 12px;
color: #b5432a;
font-weight: 600;
}
}