/* ============================================================ TradMarket — HelpScout Docs Custom Stylesheet help.tradmarket.com Brand colors: Primary (forest green): #1e4c2f Primary light: #44be71 Primary dark: #1f211f Text: #121212 Text muted: #585858 Background: #ffffff Fonts (loaded via code — see README): Headings: Space Grotesk (600-700) Body: Inter (400-500) ============================================================ */ /* ── Global ──────────────────────────────────────────────────── */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #ffffff; color: #121212; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, a:hover, a:focus { color: #1e4c2f; } a:hover, a:focus { color: #44be71; } /* ── Navbar ──────────────────────────────────────────────────── */ .navbar .navbar-inner { background-color: #1e4c2f; background-image: none; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .navbar .brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #ffffff; padding: 12px 20px; } .navbar .brand:hover { color: #ffffff; } .navbar .nav li a { font-family: 'Inter', sans-serif; font-weight: 500; color: rgba(255, 255, 255, 0.8); transition: color 0.2s ease; } .navbar .nav li a:hover, .navbar .nav li a:focus { color: #ffffff; } .navbar .nav li.active a { color: #44be71; font-weight: 600; } /* Mobile navbar toggle */ .navbar .btn-navbar { background-color: #44be71; border-color: #44be71; } /* ── Search Banner ───────────────────────────────────────────── */ #docsSearch { background-color: #1e4c2f; background-image: none; border: none; padding: 40px 0; } #docsSearch h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #ffffff; font-size: 28px; } #searchBar .search-query { font-family: 'Inter', sans-serif; font-size: 16px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.3); padding: 12px 16px; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.036); transition: border-color 0.2s ease, box-shadow 0.2s ease; } #searchBar .search-query:focus { border-color: #44be71; box-shadow: 0 0 0 3px rgba(68, 190, 113, 0.2); outline: none; } #searchBar button { background-color: #44be71; border: none; border-radius: 0 8px 8px 0; color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 500; transition: background-color 0.2s ease; } #searchBar button:hover { background-color: #3aa864; } /* ── Category Cards ──────────────────────────────────────────── */ .category-list .category { background: #ffffff; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.036); padding: 24px; transition: box-shadow 0.2s ease, transform 0.15s ease; } .category-list .category:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .category-list .category h2, .category-list .category h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #1f211f; } .category-list .category a { color: #1e4c2f; } .category-list .category a:hover { color: #44be71; } .category-list .category .article-count { font-family: 'Inter', sans-serif; font-size: 13px; color: #585858; } /* ── Collections / Popular Articles ──────────────────────────── */ .twoCol .collection, .threeCol .collection { background: #ffffff; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.036); padding: 24px; } .most-pop-articles { font-family: 'Inter', sans-serif; } .most-pop-articles h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #1f211f; } .most-pop-articles .popArticles a { color: #1e4c2f; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; transition: color 0.2s ease; } .most-pop-articles .popArticles a:hover { color: #44be71; } /* ── Content Area ────────────────────────────────────────────── */ #contentArea { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: #121212; } .contentWrapper h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #1f211f; } /* ── Article Content ─────────────────────────────────────────── */ #fullArticle { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: #121212; } #fullArticle h1.title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #1f211f; margin-bottom: 16px; } #fullArticle h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #1f211f; margin-top: 32px; margin-bottom: 12px; } #fullArticle h2 a, #fullArticle h2 a:hover { color: #1e4c2f; } #fullArticle h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #1f211f; font-size: 18px; margin-top: 24px; margin-bottom: 8px; } #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; } #fullArticle a { color: #1e4c2f; text-decoration: underline; text-decoration-color: rgba(30, 76, 47, 0.3); text-underline-offset: 2px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } #fullArticle a:hover { color: #44be71; text-decoration-color: #44be71; } /* Callout boxes */ #fullArticle .callout, #fullArticle .callout-blue, #fullArticle .callout-yellow, #fullArticle .callout-red, #fullArticle .callout-green { border-radius: 8px; font-family: 'Inter', sans-serif; } /* ── Article List ────────────────────────────────────────────── */ .articleList { font-family: 'Inter', sans-serif; font-size: 15px; } .articleList a { color: #1e4c2f; line-height: 1.8; transition: color 0.2s ease; } .articleList a:hover { color: #44be71; } /* ── Sidebar ─────────────────────────────────────────────────── */ #sidebar .nav-list a { font-family: 'Inter', sans-serif; font-size: 14px; color: #1e4c2f; padding: 6px 12px; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; } #sidebar .nav-list a:hover { color: #44be71; background-color: rgba(68, 190, 113, 0.08); } #sidebar .nav-list .active a { color: #44be71; font-weight: 600; background-color: rgba(68, 190, 113, 0.1); } /* ── Article Footer ──────────────────────────────────────────── */ .articleFoot { font-family: 'Inter', sans-serif; font-size: 13px; color: #585858; border-top: 1px solid #e8e8e8; padding-top: 16px; margin-top: 32px; } .articleFoot time.lu { font-family: 'Inter', sans-serif; font-style: normal; color: #585858; } .articleFoot p { font-family: 'Inter', sans-serif; } /* ── Breadcrumbs ─────────────────────────────────────────────── */ .breadcrumb { font-family: 'Inter', sans-serif; font-size: 13px; } .breadcrumb a { color: #585858; } .breadcrumb a:hover { color: #1e4c2f; } /* ── Search Results ──────────────────────────────────────────── */ #serp-dd .result li a { font-family: 'Inter', sans-serif; color: #1e4c2f; } #serp-dd .result li.active a, #serp-dd .result li a:hover { color: #44be71; background-color: rgba(68, 190, 113, 0.08); } /* ── Footer ──────────────────────────────────────────────────── */ footer, .footer { font-family: 'Inter', sans-serif; font-size: 13px; color: #585858; } footer a, .footer a { color: #585858; } footer a:hover, .footer a:hover { color: #1e4c2f; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { #docsSearch { padding: 24px 0; } #docsSearch h1 { font-size: 22px; } .category-list .category { margin-bottom: 12px; } #fullArticle { font-size: 15px; } }