/* Seasonal checklist region page (incl. print styles). Extracted from Views/Checklist/Region.cshtml — keep edits here, not inline. */ /* Re-tint the shared header to match this page's parchment surface via the --ih-page-* contract defined in _Layout.cshtml. */ body { --ih-page-bg: #f5efe3; --ih-page-bg-blur: rgba(245, 239, 227, 0.88); } html[data-theme="dark"] body { --ih-page-bg: #14110d; --ih-page-bg-blur: rgba(20, 17, 13, 0.82); } /* Light palette is the default — applied directly to .checklist-shell so it always wins over the host theme variables. */ .checklist-shell { --bg: #f5efe3; --bg-warm: #ebe2cf; --ink: #1f1a14; --ink-soft: #4a413a; --ink-muted: #8a7f73; --rule: #d8cdb6; --forest: #2d4a36; --terra: #c87c4f; --terra-dk: #a8613a; --slate: #3b6b8a; --butter: #e8c96d; --spring: #7ea473; --summer: #c87c4f; --fall: #a8613a; --winter: #3b6b8a; --check-bg: transparent; --check-border:#1f1a14; --meta-bg: rgba(31, 26, 20, 0.06); --cell-bg: #fbf6ea; background: var(--bg); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; width: 100%; box-sizing: border-box; padding-top: 1px; /* break margin-collapse with the navbar */ } /* Dark palette — kicked in by the site's theme toggle in the navbar (sets data-theme="dark" on ) or by system preference when the toggle is on auto. The forest-green CTA blocks intentionally use the same colors in both themes since they always sit on a dark backdrop. */ html[data-theme="dark"] .checklist-shell { --bg: #14110d; --bg-warm: #1d1915; --ink: #f0e9da; --ink-soft: #c8bda9; --ink-muted: #8a8170; --rule: #2e2820; --forest: #5e9176; --terra: #e0936a; --terra-dk: #d97a48; --slate: #6b9bbb; --butter: #f0d27a; --spring: #6f9466; --summer: #c87c4f; --fall: #b76e3f; --winter: #4d83a7; --check-border:#c8bda9; --meta-bg: rgba(240, 233, 218, 0.08); --cell-bg: #221d17; } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .checklist-shell { --bg: #14110d; --bg-warm: #1d1915; --ink: #f0e9da; --ink-soft: #c8bda9; --ink-muted: #8a8170; --rule: #2e2820; --forest: #5e9176; --terra: #e0936a; --terra-dk: #d97a48; --slate: #6b9bbb; --butter: #f0d27a; --spring: #6f9466; --summer: #c87c4f; --fall: #b76e3f; --winter: #4d83a7; --check-border:#c8bda9; --meta-bg: rgba(240, 233, 218, 0.08); --cell-bg: #221d17; } } .checklist-shell *, .checklist-shell *::before, .checklist-shell *::after { box-sizing: border-box; } /* Host /css/styles.css applies global rules to
for the landing page: 96px padding, plus a scroll-reveal `section:not(.hero) { opacity:0; transform: translateY(10px) }` that's only flipped on by JS adding a `.visible` class. Without that JS path, our season blocks render fully transparent. Force them visible and reset the collar. */ .checklist-shell section, .checklist-shell section:not(.hero) { padding: 0; overflow: visible; position: static; opacity: 1 !important; transform: none !important; transition: none; } .checklist-shell .display { font-family: "Bricolage Grotesque", "Inter", sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; } .checklist-shell .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .checklist-shell .page { max-width: 720px; margin: 0 auto; padding: 0 28px 80px; } @media (min-width: 480px) { .checklist-shell .page { padding: 0 44px 96px; } } @media (min-width: 720px) { .checklist-shell .page { padding: 0 64px 96px; } } .checklist-shell .head { padding: 32px 0 28px; text-align: center; border-bottom: 1px solid var(--rule); margin-bottom: 40px; } /* The house icon and the "Hank's Home Guide" kicker only render on the printed PDF — on screen we lean on the navbar's logo and the region chip so the lede stays clean. The print stylesheet flips them back on. */ .checklist-shell .head img.house, .checklist-shell .head .kicker { display: none; } .checklist-shell .head img.house { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 12px; } .checklist-shell .head .kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--terra-dk); text-transform: uppercase; margin-bottom: 8px; } .checklist-shell .head h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: clamp(36px, 9vw, 54px); line-height: 1; margin: 0 0 16px; letter-spacing: -0.02em; color: var(--ink); } .checklist-shell .head .sub { font-size: 16px; color: var(--ink-soft); max-width: 520px; margin: 0 auto; } /* Region chip doubles as the "change region" entry point — clicking it lands you back on the catalog. Colors are locked dark-on-cream in both themes (the same trick we use for .rules + .pitch-cta) so the "Change" hint stays readable when --ink/--bg invert in dark. */ .checklist-shell .head .region-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 8px 6px 14px; background: #1f1a14; color: #f5efe3; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 120ms, transform 120ms; } .checklist-shell .head .region-chip:hover { background: var(--terra-dk); color: #f5efe3; transform: translateY(-1px); } .checklist-shell .head .region-chip .change-hint { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(245, 239, 227, 0.18); color: #e8c96d; font-size: 10px; letter-spacing: 0.12em; } .checklist-shell .head .region-chip .change-hint svg { width: 10px; height: 10px; } .checklist-shell .print-hint { text-align: center; font-size: 13px; color: var(--ink-muted); margin-top: 16px; } .checklist-shell .print-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 18px; background: var(--forest); color: var(--bg); border: none; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; } .checklist-shell .print-btn:hover { background: var(--terra-dk); color: #fff; } .checklist-shell .print-btn svg { width: 16px; height: 16px; } .checklist-shell .change-region { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--terra-dk); text-decoration: underline; } .checklist-shell .change-region:hover { color: var(--ink); } .checklist-shell .season { margin-bottom: 48px; break-inside: avoid; } .checklist-shell .season-head { position: relative; padding: 24px 24px 22px; color: #fafaf5; margin-bottom: 24px; border-radius: 6px; break-after: avoid-page; } .checklist-shell .season-head.spring { background: var(--spring); } .checklist-shell .season-head.summer { background: var(--summer); } .checklist-shell .season-head.fall { background: var(--fall); } .checklist-shell .season-head.winter { background: var(--winter); } /* Safety block: locked-dark background. --ink would invert to cream in dark theme, leaving the (also cream) text invisible. The serious "always-on safety" feel works better as a constant near-black. */ .checklist-shell .season-head.safety { background: #1f1a14; } .checklist-shell .season-head .m { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; opacity: 0.82; text-transform: uppercase; } .checklist-shell .season-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 40px; line-height: 1; margin: 8px 0 8px; letter-spacing: -0.02em; color: inherit; } .checklist-shell .season-head .tagline { font-size: 14px; opacity: 0.92; line-height: 1.45; } .checklist-shell .season-head.safety h2 { color: var(--butter); } .checklist-shell .task { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; padding: 18px 4px 20px; border-bottom: 1px solid var(--rule); break-inside: avoid; cursor: pointer; } .checklist-shell .task:hover h3 { color: var(--terra-dk); } .checklist-shell .task:last-child { border-bottom: none; } .checklist-shell .check { margin-top: 3px; width: 22px; height: 22px; border: 2px solid var(--check-border); border-radius: 4px; background: var(--check-bg); cursor: pointer; flex-shrink: 0; padding: 0; position: relative; } /* Checked state — forest background with a centered SVG tick. We use a data-URL background instead of two-border-rotate-45 because the rotation trick lands a quarter-pixel off-center at most sizes; SVG anchors to the box center exactly. */ .checklist-shell .check.checked { background: var(--forest) url("data:image/svg+xml;utf8,") center / 70% no-repeat; border-color: var(--forest); } .checklist-shell .check.checked::after { content: none; } .checklist-shell .task-body { min-width: 0; } .checklist-shell .task h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--ink); } .checklist-shell .task .desc { font-size: 15px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.45; } .checklist-shell .meta { display: flex; flex-wrap: wrap; gap: 6px 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .checklist-shell .meta span { display: inline-block; padding: 4px 8px; background: var(--meta-bg); border-radius: 3px; color: var(--ink-soft); } .checklist-shell .why-line { font-size: 14px; color: var(--ink-soft); font-style: italic; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--terra); line-height: 1.4; } /* Forest-green CTA block. Text color is locked to cream regardless of theme — in dark mode `--bg` resolves to a near-black warm brown that becomes unreadable on the lighter forest tint we use there. Padding matches .pitch-inner so the two CTA blocks share visual rhythm. NOTE: selector must include `section.rules` so its specificity beats the host scroll-reveal override `.checklist-shell section:not(.hero)` (which zeroes section padding). Same trick used by .pitch via .pitch-inner. */ .checklist-shell section.rules { background: var(--forest); color: #f5efe3; padding: 24px 20px; border-radius: 6px; margin: 40px 0 32px; break-inside: avoid; } .checklist-shell .rules h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 32px; margin: 0 0 20px; letter-spacing: -0.01em; color: var(--butter); } .checklist-shell .rules ol { margin: 0; padding: 0; list-style: none; counter-reset: rules; } .checklist-shell .rules li { counter-increment: rules; padding: 14px 0 14px 48px; position: relative; font-size: 16px; line-height: 1.5; border-bottom: 1px solid rgba(245, 239, 227, 0.15); color: rgba(245, 239, 227, 0.92); } .checklist-shell .rules li:last-child { border-bottom: none; } .checklist-shell .rules li::before { content: counter(rules, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 600; color: var(--butter); } .checklist-shell .rules li b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 4px; color: #fff; } .checklist-shell .pitch { margin: 48px 0 32px; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; break-inside: avoid; } .checklist-shell .pitch-inner { padding: 40px 32px; } .checklist-shell .pitch-kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra-dk); margin-bottom: 12px; } .checklist-shell .pitch-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: clamp(28px, 7vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--ink); } .checklist-shell .pitch-h .accent { color: var(--forest); } .checklist-shell .pitch-lead { font-size: 16px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 24px; } .checklist-shell .pitch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 24px; } .checklist-shell .pitch-cell { background: var(--cell-bg); border: 1px solid var(--rule); padding: 16px 14px; text-align: center; border-radius: 4px; } .checklist-shell .pitch-num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 32px; line-height: 1; color: var(--forest); letter-spacing: -0.02em; } .checklist-shell .pitch-lbl { font-size: 11px; color: var(--ink-muted); margin-top: 6px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; font-family: "JetBrains Mono", monospace; } .checklist-shell .pitch-bullets { list-style: none; padding: 0; margin: 0 0 28px; } .checklist-shell .pitch-bullets li { font-size: 15px; line-height: 1.45; color: var(--ink-soft); padding: 10px 0 10px 28px; position: relative; border-bottom: 1px dashed var(--rule); } .checklist-shell .pitch-bullets li:last-child { border-bottom: none; } /* Forest pill with a centered white tick — same SVG-background trick as the task .check.checked above, scaled to the 18px box. */ .checklist-shell .pitch-bullets li::before { content: ''; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 4px; background: var(--forest) url("data:image/svg+xml;utf8,") center / 70% no-repeat; } .checklist-shell .pitch-bullets li::after { content: none; } .checklist-shell .pitch-bullets li b { color: var(--ink); font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 17px; display: block; margin-bottom: 2px; letter-spacing: -0.01em; } /* CTA panel inside the app pitch. On screen the QR is hidden in favor of a tappable "Download the app" button; the print stylesheet flips the visibility back so the printed PDF carries the QR for offline handouts. */ .checklist-shell .pitch-cta { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; background: var(--forest); /* Lock to cream so contrast holds in both themes — see .rules note. */ color: #f5efe3; padding: 24px 26px 26px; border-radius: 6px; } .checklist-shell .pitch-qr { display: none; /* shown only in print — see @media print below */ background: #fff; padding: 8px; border-radius: 4px; text-align: center; } .checklist-shell .pitch-qr img { display: block; width: 120px; height: 120px; } .checklist-shell .pitch-qr-lbl { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.1em; } .checklist-shell .pitch-url-kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--butter); } .checklist-shell .pitch-url { display: inline-block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 28px; line-height: 1; margin: 6px 0 8px; letter-spacing: -0.02em; color: #fff; word-break: break-all; text-decoration: none; } .checklist-shell .pitch-url:hover { color: var(--butter); } .checklist-shell .pitch-url-sub { font-size: 13px; opacity: 0.85; margin-bottom: 14px; } /* Yellow pill, locked-dark text. Both --butter and --ink shift in dark mode (yellow stays yellow, ink becomes cream) — without locking the text we'd land on cream-on-yellow which is unreadable. The button is always "yellow chip with near-black text" by design. */ .checklist-shell .pitch-app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; background: var(--butter); color: #1f1a14; border: none; border-radius: 999px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; transition: transform 120ms, background 120ms; } .checklist-shell .pitch-app-btn:hover { background: #fff; color: #1f1a14; transform: translateY(-1px); } .checklist-shell .pitch-app-btn svg { color: #1f1a14; } .checklist-shell .pitch-app-btn svg { width: 16px; height: 16px; } .checklist-shell .footnote { text-align: center; padding: 24px 0 0; color: var(--ink-muted); font-size: 13px; } /* Breadcrumbs — sit above the header, small, semantic. Help SEO (BreadcrumbList rich result) and orient the reader. */ .checklist-shell .crumbs { font-size: 12px; color: var(--ink-muted); padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 6px 8px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; } .checklist-shell .crumbs a { color: var(--terra-dk); text-decoration: none; } .checklist-shell .crumbs a:hover { text-decoration: underline; } .checklist-shell .crumbs span[aria-current="page"] { color: var(--ink); } /* TOC — sticky-ish chip row right under the header, jumps to seasons. */ .checklist-shell .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding-bottom: 8px; } .checklist-shell .toc a { display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; background: var(--cell-bg); transition: border-color 120ms, color 120ms; } .checklist-shell .toc a:hover { border-color: var(--ink); color: var(--ink); } /* FAQ section — native
for zero-JS toggle behavior, styled to match the other content blocks. */ .checklist-shell .faq { margin: 48px 0 32px; } .checklist-shell .faq-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--ink); } .checklist-shell .faq-item { border-bottom: 1px solid var(--rule); padding: 16px 0; } .checklist-shell .faq-item:last-child { border-bottom: none; } .checklist-shell .faq-item summary { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .checklist-shell .faq-item summary::-webkit-details-marker { display: none; } .checklist-shell .faq-item summary::after { content: '+'; font-family: "JetBrains Mono", monospace; font-size: 22px; color: var(--terra-dk); transition: transform 200ms; } .checklist-shell .faq-item[open] summary::after { transform: rotate(45deg); } .checklist-shell .faq-item p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } /* Related-regions footer — internal-link block for crawl coverage. */ .checklist-shell .related { margin: 48px 0 24px; } .checklist-shell .related-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--ink); } .checklist-shell .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 600px) { .checklist-shell .related-grid { grid-template-columns: repeat(4, 1fr); } } .checklist-shell .related-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cell-bg); border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: var(--ink); transition: border-color 120ms, transform 120ms; } .checklist-shell .related-card:hover { border-color: var(--ink); transform: translateY(-1px); color: var(--ink); } .checklist-shell .related-code { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 11px; background: var(--ink); color: var(--bg); padding: 4px 7px; border-radius: 3px; min-width: 32px; text-align: center; } .checklist-shell .related-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } @media (min-width: 820px) { .checklist-shell .head h1 { font-size: 64px; } } @media print { @page { size: letter; margin: 0.5in; } html, body, .checklist-shell { background: #fff !important; font-size: 11pt; color: #000; } .navbar, .footer, .nav-toggle, .nav-menu { display: none !important; } .checklist-shell .page { max-width: 100%; padding: 0; } .checklist-shell .no-print, .checklist-shell .print-btn, .checklist-shell .print-hint, .checklist-shell .change-region { display: none !important; } .checklist-shell .head { padding-top: 0; border-bottom: 2px solid #000; } .checklist-shell .head h1 { font-size: 28pt; color: #000 !important; } /* Logo + kicker are screen-hidden but printed — restore them. */ .checklist-shell .head img.house { display: block !important; } .checklist-shell .head .kicker { display: block !important; } .checklist-shell .season { page-break-inside: auto; margin-bottom: 24pt; } .checklist-shell .season-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #fff !important; border-radius: 4px; } .checklist-shell .season-head h2 { font-size: 22pt; } .checklist-shell .task { padding: 10pt 0; page-break-inside: avoid; } .checklist-shell .task h3 { font-size: 14pt; } .checklist-shell .check { width: 16pt; height: 16pt; border: 1.5pt solid #000 !important; background: #fff !important; } .checklist-shell .check.checked { background: #fff !important; } .checklist-shell .check.checked::after { display: none; } .checklist-shell .rules { -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-inside: avoid; } .checklist-shell .pitch { -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-before: always; page-break-inside: avoid; border: 1.5pt solid #000; } .checklist-shell .pitch-cta { -webkit-print-color-adjust: exact; print-color-adjust: exact; grid-template-columns: auto 1fr; gap: 20px; } /* Print swap: QR back in, screen-only download button out. */ .checklist-shell .pitch-qr { display: block !important; } .checklist-shell .pitch-app-btn { display: none !important; } .checklist-shell .pitch-h { font-size: 22pt; } .checklist-shell .pitch-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .checklist-shell .meta span { background: #f0ebe0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }