/* Site-wide layout chrome: theme overrides, sticky header (.ih-nav), footer social, print. Extracted from Views/Shared/_Layout.cshtml — keep edits here, not inline. */ :root[data-theme="dark"] { --text-primary: #f3f4f6; --text-secondary: #d1d5db; --bg-primary: #030712; --bg-secondary: #0f172a; --bg-tertiary: #111827; --border-color: #1f2937; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --text-primary: #f3f4f6; --text-secondary: #d1d5db; --bg-primary: #030712; --bg-secondary: #0f172a; --bg-tertiary: #111827; --border-color: #1f2937; } } html[data-theme="dark"] body, html[data-theme="dark"] .navbar, html[data-theme="dark"] .footer { background-color: var(--bg-primary) !important; } @media (prefers-color-scheme: dark) { html[data-theme="auto"] body, html[data-theme="auto"] .navbar, html[data-theme="auto"] .footer { background-color: var(--bg-primary) !important; } } /* === Site header (mirrors the landing-page nav design) ============ Self-contained — uses scoped --ihnav-* tokens so it doesn't collide with the rest of the layout's older palette. Light/dark switches via the same data-theme attribute the rest of the page already responds to. */ .ih-nav { /* The bg/blur tokens fall back to the landing page's pastel green by default. Pages with their own palette (checklist, blog) opt-in by setting --ih-page-bg + --ih-page-bg-blur on the body element so the header re-tints to match the page. */ --ihnav-bg-page: var(--ih-page-bg, #eef1e8); --ihnav-bg-blur: var(--ih-page-bg-blur, rgba(238, 241, 232, 0.88)); --ihnav-ink: var(--ih-page-ink, #1f2a1e); --ihnav-ink-2: var(--ih-page-ink-2, #3e4b3c); --ihnav-rule-2: var(--ih-page-rule-2, rgba(31, 42, 30, 0.08)); --ihnav-rule-3: var(--ih-page-rule-3, rgba(31, 42, 30, 0.12)); --ihnav-rule-4: var(--ih-page-rule-4, rgba(31, 42, 30, 0.18)); --ihnav-tint-soft: var(--ih-page-tint-soft, rgba(31, 42, 30, 0.05)); position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; color: var(--ihnav-ink); font-family: 'Figtree', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } html[data-theme="dark"] .ih-nav { --ihnav-bg-page: var(--ih-page-bg, #141a13); --ihnav-bg-blur: var(--ih-page-bg-blur, rgba(20, 26, 19, 0.82)); --ihnav-ink: var(--ih-page-ink, #ecefe5); --ihnav-ink-2: var(--ih-page-ink-2, #c2cab9); --ihnav-rule-2: var(--ih-page-rule-2, rgba(236, 239, 229, 0.09)); --ihnav-rule-3: var(--ih-page-rule-3, rgba(236, 239, 229, 0.14)); --ihnav-rule-4: var(--ih-page-rule-4, rgba(236, 239, 229, 0.20)); --ihnav-tint-soft: var(--ih-page-tint-soft, rgba(236, 239, 229, 0.05)); } .ih-nav.scrolled { background: var(--ihnav-bg-blur); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--ihnav-rule-2); } .ih-nav-inner { max-width: 1240px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; } .ih-nav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .ih-nav-logo img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 3px var(--ihnav-rule-4)); } .ih-nav-logo-name { /* Match the blog hub's heading typeface — Bricolage Grotesque is the wordmark across editorial surfaces. Falls back to a geometric sans on pages that haven't loaded it. */ font-family: 'Bricolage Grotesque', 'Figtree', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1; } .ih-nav-links { display: flex; gap: 32px; align-items: center; font-size: 16px; color: var(--ihnav-ink-2); list-style: none; padding: 0; margin: 0; } .ih-nav-links a { color: inherit; text-decoration: none; } .ih-nav-links a:hover { color: var(--ihnav-ink); } .ih-nav-links a.active { color: var(--ihnav-ink); font-weight: 600; } .ih-nav-actions { display: flex; gap: 10px; align-items: center; } /* Header search popover — a magnifier icon (per-page opt-in via ViewData["HeaderSearch"]) opens the unified search below the header. */ .ih-nav-searchwrap { position: relative; display: flex; align-items: center; } .ih-nav-search-pop { position: absolute; top: calc(100% + 14px); right: 0; width: 340px; max-width: calc(100vw - 24px); z-index: 60; } .ih-nav-search-pop .usearch { margin: 0; max-width: none; } .ih-nav-search-pop .usearch-input { padding: 10px 14px 10px 40px; font-size: 14.5px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); } .ih-nav-search-pop .usearch-icon { top: 11px; left: 13px; width: 16px; height: 16px; } .ih-nav-search-pop .usearch-results { left: 0; right: 0; width: auto; } .ih-nav-icon-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ihnav-rule-3); background: transparent; color: var(--ihnav-ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease; } .ih-nav-icon-btn:hover { background: var(--ihnav-tint-soft); } .ih-nav-cta { display: inline-flex; align-items: center; gap: 7px; padding: 12px 20px; border-radius: 999px; background: var(--ihnav-ink); color: var(--ihnav-bg-page); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; } .ih-nav-cta:hover { opacity: .92; } .ih-nav-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ihnav-rule-3); background: transparent; color: var(--ihnav-ink); cursor: pointer; padding: 0; place-items: center; } .ih-nav-toggle svg { width: 18px; height: 18px; } @media (max-width: 880px) { .ih-nav-inner { padding: 14px 20px; gap: 10px; } .ih-nav-actions { gap: 8px; } .ih-nav-logo { gap: 8px; } .ih-nav-logo img { width: 30px; height: 30px; } .ih-nav-logo-name { font-size: 18px; } .ih-nav-icon-btn, .ih-nav-toggle { width: 36px; height: 36px; } .ih-nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ihnav-bg-blur); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--ihnav-rule-2); padding: 12px 0; } .ih-nav-links.is-open { display: flex; } .ih-nav-links a { padding: 14px 24px; font-size: 17px; color: var(--ihnav-ink); } .ih-nav-toggle { display: grid; } .ih-nav-cta { padding: 9px 14px; font-size: 14px; } } /* === Footer "Follow" social icons ============================== The footer is dark in both themes (styles.css), so the icons inherit the footer's white-ish link color via currentColor and hover to a light tint of the brand green for legibility. */ .footer-section .footer-follow-head { margin-top: 18px; } .footer-social { display: flex; gap: 14px; align-items: center; } .footer-social a { display: inline-flex; color: rgba(255, 255, 255, 0.8); transition: color 0.2s; } .footer-social a:hover { color: #8fce8b; } .footer-social svg { width: 20px; height: 20px; display: block; } /* Print: drop the site chrome on every _Layout page — printed checklists, guides, and articles should be content-only (the checklist print view re-adds its own logo + kicker for the fridge PDF). */ @media print { .ih-nav, .footer { display: none !important; } }