/* Doink Compass page styles. Loaded only by compass.php (referenced
via in its ). Was previously inline in the template;
extracted to a per-page CSS file so it's cacheable separately and
so the template HTML reads cleaner. */
/* Compass page chrome — applied on top of the base site styles to give
the page more visual structure. Three layers:
1. Hero block treatment (subtle tint + left accent stripe + larger type)
2. Section header treatment (small accent bar prefix on each h3)
3. Per-archetype color tints matching the chart's quadrant fills
for unmistakable visual association
*/
.compass-hero {
padding: 18px 22px;
background: #fdf5ee;
border-left: 4px solid var(--color-accent, #d4500a);
border-radius: 0 var(--radius) var(--radius) 0;
margin-bottom: 32px;
}
.compass-hero h2 {
font-size: 1.6rem;
margin-top: 0;
margin-bottom: 10px;
}
.compass-hero p {
margin-bottom: 0;
}
.compass-section-heading {
position: relative;
padding-left: 14px;
margin-top: 8px;
margin-bottom: 14px;
}
.compass-section-heading::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.18em;
width: 4px;
border-radius: 2px;
background: var(--color-accent, #d4500a);
}
/* Horizontal dividers between major sections. Applied to every
that has a compass-section-heading inside it, so the
reader gets a clean visual break between the conceptual sections
without us having to remember to add a divider on each one
individually. The hero, chart, and kicker-picker sections live
above this level (no h3 inside them), so they don't get dividers
— preserving the tight intro flow. */
section:has(> .compass-section-heading) {
border-top: 1px solid var(--color-border, #e0e0e0);
padding-top: 24px;
margin-top: 32px !important;
}
/* Full Field section: force a print page break before it so the
card chrome and the chart inside it land on the same printed
page. Without this, the section's section-divider treatment
plus the card's labWidgetCard chrome can land at the bottom of
one page while the chart body gets pushed to the next, leaving
an empty card box on the previous page. Screen-only viewers
see no effect from this rule. */
@media print {
section.compass-full-field {
break-before: page;
page-break-before: always;
}
}
/* Per-archetype block color tints — mirror chart quadrant fills so
a reader looking at, say, the green sage corner on the chart sees
the same green sage in the corresponding archetype block. The
accent stripe color is a saturated version of the same hue. */
.archetype-block.q-tr { /* Bank-Shot Syndicate (top-right, olive/khaki) */
background: #f5f1e0 !important;
border-left: 4px solid #8a7a30 !important;
}
.archetype-block.q-tl { /* Precision Opportunists (top-left, sage) */
background: #ebf3ed !important;
border-left: 4px solid #5a7a6a !important;
}
.archetype-block.q-bl { /* Doink Deserters (bottom-left, cool dusty) */
background: #eeeae8 !important;
border-left: 4px solid #8a5a65 !important;
}
.archetype-block.q-br { /* Magnetic Cursed (bottom-right, peach) */
background: #f7e6da !important;
border-left: 4px solid #a85c3a !important;
}
/* Tint h4 headers within each archetype to match the accent stripe */
.archetype-block.q-tr h4 { color: #6a5e25; }
.archetype-block.q-tl h4 { color: #3f5e50; }
.archetype-block.q-bl h4 { color: #6e4750; }
.archetype-block.q-br h4 { color: #874929; }
/* Print styles, scoped to the Compass page.
Goals: suppress nav/breadcrumb/interactive bits that don't translate
to paper, keep each chart whole on a single printed page, keep each
archetype block (text + inset) together, and aggressively tighten
spacing so the four archetype blocks don't each occupy a full page
on their own. */
@media print {
/* Honor the colored backgrounds from the chrome layer above so the
archetype tints + hero stripe survive PDF generation. Without
these properties most browsers strip backgrounds in print. */
*, *::before {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Suppress chrome and interactive elements */
.public-header,
.public-nav,
.breadcrumb,
.doinkapp-footer,
footer,
form,
button,
.btn,
.compass-kicker-picker {
display: none !important;
}
/* Suppress figcaptions in print — the surrounding prose already
explains chart context, and on paper the figcaption is just
costing vertical space. */
.lab-widget-figcaption,
figcaption {
display: none !important;
}
/* Tighten the body — print stylesheets default to white */
body, .public-main {
background: #fff !important;
color: #000 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Tighten paragraphs — screen line-height of 1.6 is luxurious on
paper. 1.35 reads cleanly without crowding. */
main p {
line-height: 1.35 !important;
margin-top: 6px !important;
}
/* Section-level spacing: shrink screen margins (32-48px) to print-
appropriate (10-14px). Section header spacing also tightens. */
main section {
margin-bottom: 14px !important;
margin-top: 14px !important;
padding-top: 0 !important;
}
/* Preserve the structural section-divider treatment in print
for sections that have a compass-section-heading inside.
Without this, all printed sections look identical and the
"this is where Reading begins / where Methodology begins"
wayfinding is lost on paper. Tighter padding than screen
since print breathing room is at a premium. */
main section:has(> .compass-section-heading) {
border-top: 1px solid #555 !important;
padding-top: 8px !important;
margin-top: 12px !important;
}
main section:first-of-type {
margin-top: 0 !important;
}
main h2, main h3, main h4 {
margin-top: 8px !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
}
/* Hero stays compact in print but keeps the accent stripe */
.compass-hero {
padding: 8px 12px !important;
margin-bottom: 12px !important;
}
/* Archetype blocks: dense packing. Drops the heavy inline padding
and margin so two archetype blocks can sit comfortably on one
printed page. The break-inside: avoid below still keeps each
block whole — but smaller blocks mean the whole-block rule no
longer forces a single block to monopolize a page. */
.archetype-block {
padding: 8px 10px !important;
margin-top: 4px !important;
margin-bottom: 0 !important;
}
/* Keep each chart's SVG card from splitting across pages. The
main featured chart and the Full Field chart each need their
own page; the four archetype blocks should be packable. */
figure,
.archetype-block {
break-inside: avoid;
page-break-inside: avoid;
}
/* Headings should stay with the content that follows them */
h2, h3, h4 {
break-after: avoid;
page-break-after: avoid;
}
/* Don't let an empty section leave a ghost border behind */
section:empty {
display: none;
}
}