/* ========================================================= Salt FAQ – Help Scout theme Based on salt-custom.scss + Jenson8 tokens in ========================================================= */ /* ---------- Derived tokens from your :root + Salt SCSS ---------- */ :root { /* keep your J8 tokens, add some Salt-flavoured helpers */ --salt-bg-top: rgba(245, 245, 245, 1); --salt-bg-mid: rgba(255, 201, 181, 1); --salt-bg-bottom: rgba(254, 254, 220, 1); --salt-dark-purple: #33293B; --salt-light-purple: #DDB7FD; --salt-link-purple: hsl(273, 66%, 54%); --salt-card-bg: rgba(255, 255, 255, 0.50); --salt-card-border: #dedede; --salt-radius: 1rem; /* ~16px */ --salt-radius-lg: 1.25rem; --salt-shadow-soft: 0 18px 40px rgba(0,0,0,0.08); --content-max: 1200px; } /* ========================================================= Base canvas ========================================================= */ html, body { min-height: 100%; background: linear-gradient( to bottom, var(--salt-bg-top) 0%, var(--salt-bg-mid) 50%, var(--salt-bg-bottom) 100% ); color: var(--j8-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: "Parabolica", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* allow for fixed navbar height */ body { padding-top: 80px; } /* ========================================================= Global links ========================================================= */ a, .contentWrapper a, .most-pop-articles .popArticles a { color: var(--salt-link-purple); text-decoration: none; transition: color .18s ease, text-decoration-color .18s ease; } a:hover, .contentWrapper a:hover, .most-pop-articles .popArticles a:hover { color: var(--salt-dark-purple); text-decoration: underline; text-decoration-color: var(--salt-dark-purple); text-underline-offset: 2px; } /* ========================================================= Navbar (Help Scout #mainNav) ========================================================= */ #mainNav.navbar { position: fixed; inset-inline: 0; top: 0; z-index: 1000; } #mainNav .navbar-inner { background: transparent; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 8px 26px rgba(0,0,0,0.08); padding-block: 10px; } /* logo sizing */ #mainNav .brand img { max-height: 30px; width: auto; } /* nav links */ #mainNav .brand, #mainNav .nav li a, #mainNav .icon-private-w { color: var(--j8-ink) !important; font-weight: 500; margin-bottom: 5px; font-family: "Parabolica", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } #mainNav .nav li a { padding-top: 6px !important; padding-bottom: 6px !important; line-height: 20px !important; } /* hide little dropdown carets */ #mainNav .nav li a b.caret { display: none; } /* hover / active state */ #mainNav .nav li a:hover, #mainNav .nav .active a, #mainNav .nav .active a:hover, #mainNav .nav .active a:focus { color: var(--salt-link-purple) !important; } /* mobile burger */ .btn.btn-navbar .icon-bar { background: var(--j8-ink); } /* ========================================================= Search bar – centre card like Salt meeting form ========================================================= */ #docsSearch { margin-bottom: 40px; margin-top: 20px; padding: 40px 0 24px; background: transparent; border-bottom: none !important; } #searchBar { max-width: 720px; margin: 0 auto; padding: 22px 24px; border-radius: var(--salt-radius-lg); background: rgba(255, 255, 255, 0.92); box-shadow: var(--salt-shadow-soft); display: flex; align-items: center; gap: 12px; } /* search input */ #searchBar input.search-query { background: var(--j8-surface); border: 1px solid var(--j8-line); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding-top: 0; padding-bottom: 0; height: 44px; /* matches button height */ line-height: 44px; /* keeps text vertically centred */ font-size: 16px; outline: none; font-family: "Inter", ui-sans-serif; } #searchBar input.search-query:focus { border-color: var(--salt-link-purple); box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.25); } /* search button – Salt style */ #searchBar button[type="submit"] { background: var(--salt-link-purple); color: #fff; border: 0; border-radius: 999px; height: 40px; /* same as input */ padding: 0 28px; /* horizontal only */ justify-content: center; font-weight: 500; font-family: "Inter", ui-sans-serif; box-shadow: 0 2px 2px rgba(110, 33, 90, 0.35); display: inline-flex; align-items: center; gap: 8px; margin-right: 28px; margin-bottom: 2px; transition: transform .12s ease, box-shadow .18s ease, background .18s ease; } /* hide old icon inside button */ #searchBar button[type="submit"] i.icon-search { display: none; } #searchBar button[type="submit"]:hover { transform: translateY(-1px); } #searchBar button[type="submit"]:active { transform: translateY(0); box-shadow: none; } /* typeahead drop-down */ #serp-dd { border-radius: var(--salt-radius); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } #serp-dd .result > li.active, #serp-dd .result a:hover { background: var(--salt-light-purple); } /* ========================================================= Layout container ========================================================= */ #contentArea.container-fluid { max-width: var(--content-max) !important; margin: 0 auto !important; } /* ========================================================= Home collections (threeCol) – match meeting cards ========================================================= */ .threeCol.row-fluid { margin-top: 10px; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 20px; } /* each collection behaves like a semi-transparent card */ .threeCol .collection { flex: 1 1 280px; background: var(--salt-card-bg); border-radius: var(--salt-radius-lg); border: 1px solid var(--salt-card-border); box-shadow: var(--salt-shadow-soft); padding: 18px 18px 16px; position: relative; display: flex; flex-direction: column; transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease, border-color .25s ease, background .25s ease; } #collection-253::before { content: ""; display: block; width: 80px; height: 80px; background-image: url("https://j8-knowledge-base-assets.s3.eu-west-2.amazonaws.com/guide.png"); background-size: contain; background-repeat: no-repeat; background-position: center; align-self: center !important; margin-bottom: 12px; } #collection-249::before { content: ""; display: block; width: 80px; height: 80px; background-image: url("https://j8-knowledge-base-assets.s3.eu-west-2.amazonaws.com/pricing.png"); background-size: contain; background-repeat: no-repeat; background-position: center; align-self: center !important; margin-bottom: 12px; } #collection-245::before { content: ""; display: block; width: 80px; height: 80px; background-image: url("https://j8-knowledge-base-assets.s3.eu-west-2.amazonaws.com/data.png"); background-size: contain; background-repeat: no-repeat; background-position: center; align-self: center !important; margin-bottom: 12px; } /* header text */ .threeCol .collection-head h2 { margin: 0 0 4px; font: 2000 1.1rem/1.25 "Parabolica", "Inter", ui-sans-serif; letter-spacing: -0.02em; font-weight: 550; color: var(--j8-ink); } .threeCol .collection-head h2 a { color: inherit; text-decoration: none; } .threeCol .collection-head h2 a:hover { color: var(--j8-ink); } .threeCol .collection-head p { margin: 0 0 12px; color: var(--j8-muted); font: 400 0.9rem/1.4 "Inter", ui-sans-serif; } /* popular article links inside card */ .threeCol .collection-body .popArticles { list-style: none; margin: 0; padding: 6px; align-items: left; } .threeCol .collection-body .popArticles li { margin: 0; } .threeCol .collection-body .popArticles li a { display: flex; align-items: left; gap: 8px; padding: 6px 8px 4px 0; text-decoration: none; color: var(--salt-link-purple); font: 500 0.9rem/1.4 "Inter", ui-sans-serif; } /* hide old doc icon */ .threeCol .collection-body .popArticles li a i.icon-article-doc { display: none; } /* hover behaviour – slight lift */ .threeCol .collection:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 24px 50px rgba(0,0,0,0.20); border-color: rgba(126, 40, 103, 0.65); background: rgba(255, 255, 255, 0.95); } .threeCol .collection-body .popArticles li a:hover span { text-decoration: underline; text-decoration-color: var(--salt-link-purple); text-underline-offset: 2px; } /* ========================================================= Category pages – article list ========================================================= */ .articleList { list-style: none; padding: 0; margin: 2rem auto 4rem; max-width: 820px; display: flex; flex-direction: column; gap: 10px; } .articleList li { margin: 0 !important; background: rgba(255,255,255,0.92); border: 1px solid var(--j8-line); border-radius: var(--salt-radius); box-shadow: var(--salt-shadow-soft); padding: 7px 10px; position: relative; transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease, border-color .25s ease, background .25s ease; } .articleList li a { display: block; padding-left: 5rem; text-decoration: none; color: var(--j8-ink); font: 500 0.98rem/1.5 "Inter", ui-sans-serif; } /* hide any icon */ .articleList li a i { display: none !important; } .articleList li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); border-color: rgba(255,69,206,0.6); } .articleList li a:hover { color: var(--salt-link-purple); text-decoration: underline; text-underline-offset: 2px; } /* category heading */ #categoryHead { text-align: left; margin-bottom: 1.5rem; } #categoryHead h1 { color: var(--j8-ink); font: 900 clamp(1.8rem, 4vw, 2.4rem)/1.2 "Parabolica", "Inter", ui-sans-serif; letter-spacing: -0.02em; } #categoryHead p.descrip { color: var(--j8-muted); font: 400 1rem/1.5 "Inter", ui-sans-serif; } /* ========================================================= Article page ========================================================= */ #fullArticle .title { color: var(--j8-ink); font: 900 clamp(2rem, 4vw, 2.7rem)/1.2 "Parabolica", "Inter", ui-sans-serif; letter-spacing: -0.02em; margin-bottom: 2.4rem; } /* Make article content card match home collection boxes */ #main-content .contentWrapper { background: var(--salt-card-bg) !important; border-radius: var(--salt-radius-lg) !important; border: 1px solid var(--salt-card-border) !important; box-shadow: var(--salt-shadow-soft) !important; max-width: 1000px; width: 100%; margin: 0; padding: 32px 38px !important; /* roomier than collection boxes */ margin-top: 20px !important; /* remove legacy Help Scout chrome */ border-top: none !important; border-bottom: none !important; } /* Remove legacy Help Scout article chrome (borders, shadows, inset box) */ #fullArticle, .contentWrapper, .article-content, #main-content.span9 { background: none !important; border: none !important; box-shadow: none !important; outline: none !important; } /* Salt-style underline rule */ #fullArticle .title::after { content: ""; display: block; width: 140px; height: 3px; border-radius: 999px; margin-top: 18px; background: linear-gradient( 90deg, var(--salt-dark-purple), var(--salt-link-purple) ); } /* body typography */ #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color: var(--j8-ink); font-family: "Inter", ui-sans-serif; } #fullArticle { margin-bottom: 80px; } /* primary buttons (if present in content) */ #fullArticle a.button, .contentWrapper .button, .btn.btn-primary { background: var(--salt-light-purple) !important; border: 0 !important; color: #fff !important; border-radius: 999px !important; padding: 10px 18px !important; box-shadow: 0 8px 20px rgba(255,69,206,0.35) !important; font-family: "Inter", ui-sans-serif; } #fullArticle a.button:hover, .contentWrapper .button:hover, .btn.btn-primary:hover { background: #e12ebb !important; } /* tables and blockquotes */ #fullArticle table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--j8-line); border-radius: var(--salt-radius); overflow: hidden; background: rgba(255,255,255,0.96); } #fullArticle h3 { font-weight: 500 !important; font-size: large; font-family: "Parabolica", "Inter", ui-sans-serif; margin-top: 32px; } #fullArticle table th, #fullArticle table td { padding: 10px 12px; border-bottom: 1px solid var(--j8-line); } #fullArticle blockquote { border-left: 4px solid var(--salt-link-purple); background: var(--j8-surface); color: var(--j8-ink); padding: 12px 16px; border-radius: 10px; } #fullArticle hr { border: none !important; /* remove all Help Scout defaults */ border-top: 1px solid #D0D6DB !important; /* your preferred divider colour */ margin: 32px 0 !important; margin-top: 64px !important; } /* optional: hide "Was this helpful" footer */ .articleFoot { display: none !important; } /* widen main column / hide sidebar if present */ #sidebar, .lp #sidebar, .chrome #sidebar { display: none !important; } .span9 { width: 100% !important; max-width: 1000px !important; margin: 0 auto !important; float: none !important; } .container, .container-fluid { max-width: 1200px !important; } #main-content.span9 { float: none !important; margin: 0 auto !important; width: 100% !important; max-width: 1200px !important; } #main-content .contentWrapper { margin-left: 0 !important; margin-right: 0 !important; } #contentArea.container-fluid { padding-left: 0 !important; padding-right: 0 !important; } /* Center the article/collection wrapper */ #main-content.span9 { float: none !important; margin: 0 auto !important; width: 100% !important; max-width: 1140px !important; /* adjust to taste */ } #main-content .contentWrapper { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 50px; } #contentArea.container-fluid { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================= Footer ========================================================= */ footer.center { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.7); padding: 26px 16px 32px; color: var(--j8-muted); font-family: "Inter", ui-sans-serif; background: transparent; text-align: center; } footer.center a { color: var(--salt-link-purple); } footer.center a:hover { color: var(--salt-dark-purple); } /* ========================================================= Beacon polish ========================================================= */ #beacon-container .BeaconFabButtonFrame { --pulse-background: var(--salt-dark-purple) !important; } #beacon-container .BeaconLauncherFrame, #beacon-container iframe[title="Toggle Customer Support"] { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.25)); } /* misc text helpers */ .muted, .text-muted { color: var(--j8-muted) !important; }