/* * ═══════════════════════════════════════════════════════ * Modern Genius — HelpScout Docs Custom Stylesheet * help.mymoderngenius.com * ═══════════════════════════════════════════════════════ * * STEP 1 — Set these in HelpScout: * Manage → Docs → [Site] → Branding * * Header Background Color: #3d524e * Nav Text Color: #ffffff * Nav Active Color: #a8c5b0 * Link Color: #3d524e * Article Text Color: #374151 * Page Background Color: #ffffff * * STEP 2 — Add this CSS in HelpScout: * Manage → Docs → [Site] → Custom Code → Insert Code * Paste this entire file wrapped in tags. * * ALTERNATIVE — Host from Vercel: * Move this file to /public/helpscout.css, deploy, then enter * https://mymoderngenius.com/helpscout.css in Custom Stylesheet URL. * ═══════════════════════════════════════════════════════ */ /* ────────────────────────────────────── FONTS ────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* ────────────────────────────────────── BRAND VARIABLES ────────────────────────────────────── */ :root { --brand-dark: #3d524e; --brand-dark-hover: #2e4440; --brand-green: #6ca079; --brand-mint: #f0f7f3; --brand-gray: #e1e2e4; --text-primary: #111827; --text-body: #374151; --text-muted: #6b7280; --font-display: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --radius: 10px; --shadow-hover: 0 4px 16px rgba(61, 82, 78, 0.10); } /* ────────────────────────────────────── GLOBAL ────────────────────────────────────── */ body { font-family: var(--font-body); color: var(--text-body); background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--brand-dark); font-weight: 600; line-height: 1.3; } p { line-height: 1.75; } a { color: var(--brand-dark); transition: color 0.15s ease; } a:hover { color: var(--brand-green); } /* ────────────────────────────────────── HEADER / LOGO Header background + nav colors are set in HelpScout Branding settings (see STEP 1 above). CSS here handles logo sizing. ────────────────────────────────────── */ header img, .logo img, #logo img, .header-logo img { max-height: 40px; width: auto; } /* ────────────────────────────────────── SEARCH SECTION (homepage hero) ────────────────────────────────────── */ #docsSearch { background: #ffffff; border-bottom: 1px solid var(--brand-gray); padding: 64px 24px 56px; text-align: center; } #docsSearch h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--brand-dark); letter-spacing: -0.02em; margin-bottom: 24px; } #searchBar { max-width: 540px; margin: 0 auto; } #searchBar .search-query { font-family: var(--font-body); font-size: 0.9375rem; background: #ffffff; border: 1.5px solid var(--brand-gray); border-right: none; border-radius: 8px 0 0 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); color: var(--text-primary); padding: 10px 14px; } #searchBar .search-query::placeholder { color: var(--text-muted); } #searchBar .search-query:focus { border-color: var(--brand-green); outline: none; box-shadow: 0 0 0 3px rgba(108, 160, 121, 0.18); } #searchBar button { font-family: var(--font-body); font-weight: 500; font-size: 0.875rem; background: var(--brand-dark); border: 1.5px solid var(--brand-dark); color: #ffffff; border-radius: 0 8px 8px 0; padding: 10px 18px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } #searchBar button:hover { background: var(--brand-dark-hover); border-color: var(--brand-dark-hover); } /* ────────────────────────────────────── HOMEPAGE — COLLECTIONS A collection = one nav section (e.g. "Student & Parents") ────────────────────────────────────── */ .twoCol .collection, .threeCol .collection { background: #ffffff; border: 1px solid var(--brand-gray); border-radius: var(--radius); padding: 28px 24px; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .twoCol .collection:hover, .threeCol .collection:hover { border-color: var(--brand-green); box-shadow: var(--shadow-hover); } .twoCol .collection h2, .threeCol .collection h2, .collection h2, .collection-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--brand-dark); padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--brand-mint); } /* ────────────────────────────────────── HOMEPAGE — CATEGORY CARDS A category = group of articles within a collection ────────────────────────────────────── */ .category-list .category { background: #ffffff; border: 1px solid var(--brand-gray); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; transition: background 0.15s ease, border-color 0.15s ease; } .category-list .category:last-child { margin-bottom: 0; } .category-list .category:hover { background: var(--brand-mint); border-color: var(--brand-green); } .category-list h3, .category-list .category h3 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--brand-dark); margin-bottom: 2px; } .category-list .category p, .category-list .article-count { font-size: 0.8125rem; color: var(--text-muted); margin: 0; } .category-list .category a { color: var(--text-body); font-size: 0.9375rem; text-decoration: none; } .category-list .category a:hover { color: var(--brand-dark); text-decoration: underline; } /* ────────────────────────────────────── ARTICLE PAGES ────────────────────────────────────── */ #main-content, #fullArticle { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--text-body); } #fullArticle h1 { font-size: 1.75rem; letter-spacing: -0.02em; margin-bottom: 8px; } #fullArticle h2 { font-size: 1.25rem; margin-top: 2.25em; margin-bottom: 0.5em; padding-bottom: 8px; border-bottom: 1px solid var(--brand-gray); } #fullArticle h3 { font-size: 1.0625rem; margin-top: 1.75em; margin-bottom: 0.375em; } #fullArticle h4 { font-size: 0.9375rem; font-weight: 600; margin-top: 1.5em; } #fullArticle p { margin-bottom: 1em; } #fullArticle a { color: var(--brand-dark); text-decoration: underline; text-decoration-color: var(--brand-green); text-underline-offset: 2px; } #fullArticle a:hover { color: var(--brand-green); } /* Inline code */ #fullArticle code { font-size: 0.8125em; background: var(--brand-mint); border: 1px solid var(--brand-gray); border-radius: 4px; padding: 2px 6px; color: var(--brand-dark); } /* Code blocks */ #fullArticle pre { background: var(--brand-mint); border: 1px solid var(--brand-gray); border-radius: 8px; padding: 18px 22px; overflow-x: auto; margin: 1.5em 0; } #fullArticle pre code { background: none; border: none; padding: 0; font-size: 0.875em; } /* Tables */ #fullArticle table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 1.5em 0; border: 1px solid var(--brand-gray); border-radius: 8px; overflow: hidden; } #fullArticle th { background: var(--brand-mint); color: var(--brand-dark); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; text-align: left; padding: 10px 16px; border-bottom: 2px solid var(--brand-gray); } #fullArticle td { padding: 10px 16px; border-bottom: 1px solid var(--brand-gray); vertical-align: top; } #fullArticle tr:last-child td { border-bottom: none; } #fullArticle tr:nth-child(even) td { background: #fafafa; } /* Blockquotes */ #fullArticle blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 4px solid var(--brand-green); background: var(--brand-mint); border-radius: 0 8px 8px 0; color: var(--brand-dark); font-style: normal; } #fullArticle blockquote p { margin: 0; } /* Images */ #fullArticle img { max-width: 100%; border-radius: 8px; border: 1px solid var(--brand-gray); } /* Horizontal rules */ #fullArticle hr { border: none; border-top: 1px solid var(--brand-gray); margin: 2em 0; } /* ────────────────────────────────────── SIDEBAR ────────────────────────────────────── */ #sidebar .nav-list a { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; } #sidebar .nav-list a:hover, #sidebar .nav-list a.active { color: var(--brand-dark); font-weight: 500; } /* ────────────────────────────────────── FOOTER ────────────────────────────────────── */ footer, #site-footer, #footer { border-top: 1px solid var(--brand-gray); background: #ffffff; font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-muted); } footer a, #site-footer a, #footer a { color: var(--text-muted); text-decoration: none; } footer a:hover, #site-footer a:hover, #footer a:hover { color: var(--brand-dark); } /* ────────────────────────────────────── RESPONSIVE ────────────────────────────────────── */ @media (max-width: 768px) { #docsSearch { padding: 40px 20px 36px; } #docsSearch h1 { font-size: 1.5rem; } #searchBar { max-width: 100%; } #fullArticle h1 { font-size: 1.375rem; } #fullArticle h2 { font-size: 1.125rem; } }