/* ============================================================================ RoundUp Knowledge Base — support.roundupece.com surface ---------------------------------------------------------------------------- DELIBERATELY NOT _shared.css. The marketing pages are cream, blob-backed and display-typed because they are selling; the knowledge base is a utility the reader arrives at mid-problem, so it reads as documentation: white ground, a persistent sidebar, a denser type scale and hairline structure instead of shadows. Brand colour survives as accent only (the wordmark, the track colours, links) so it is unmistakably RoundUp without pretending to be the homepage. Load AFTER the Sora webfont; this file assumes it. Brand hexes are copied from marketing/roundup/tokens.json (Brand Kit v1.1) — change them there first, then mirror here. ========================================================================= */ :root { /* Brand accents (from tokens.json) */ --yellow: #FFC857; --rose: #E8586D; --lavender: #B499D4; --teal: #A7E4E4; --pink: #F498B5; --ink: #2A1633; /* KB-specific neutrals — cooler and lighter than the cream marketing ground */ --kb-bg: #FFFFFF; --kb-sunken: #F7F6F9; --kb-card: #FFFFFF; --kb-text: #241A2B; --kb-muted: #6B6274; --kb-faint: #928A9B; --kb-line: #E7E3EC; --kb-line-soft: #F0EDF3; /* Track accent — overridden per audience on */ --track: var(--lavender); --track-ink: #5B4A7A; --track-wash: #F4F0FA; --radius: 14px; --radius-sm: 10px; --maxw: 1240px; } body[data-track="families"] { --track: var(--rose); --track-ink: #A83349; --track-wash: #FDF0F2; } body[data-track="directors"] { --track: var(--lavender); --track-ink: #5B4A7A; --track-wash: #F4F0FA; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { font-family: 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--kb-bg); color: var(--kb-text); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--track-ink); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Skip link (a11y: the sidebar is long) ---------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 600; font-size: 14px; } .skip:focus { left: 0; text-decoration: none; } /* ---------- Top bar ---------- */ .kb-top { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--kb-line); } .kb-top .row { max-width: var(--maxw); margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 20px; } .kb-top .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .kb-top .brand img { height: 30px; display: block; } .kb-top .brand .kb-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-faint); padding-left: 11px; border-left: 1px solid var(--kb-line); } .kb-top .spacer { flex: 1; } .kb-top .top-links { display: flex; gap: 22px; align-items: center; } .kb-top .top-links a { color: var(--kb-muted); font-size: 14px; font-weight: 500; } .kb-top .top-links a:hover { color: var(--kb-text); text-decoration: none; } @media (max-width: 860px) { .kb-top .row { padding: 12px 20px; gap: 12px; } .kb-top .top-links a { display: none; } .kb-top .top-links a.keep { display: inline; } } /* ---------- Layout: sidebar + content ---------- */ .kb-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 56px; align-items: start; } .kb-shell.no-side { grid-template-columns: minmax(0, 1fr); } @media (max-width: 940px) { .kb-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 20px; } .kb-side { display: none; } } .kb-side { position: sticky; top: 86px; padding: 40px 0 60px; max-height: calc(100vh - 86px); overflow-y: auto; scrollbar-width: thin; } .kb-side::-webkit-scrollbar { width: 6px; } .kb-side::-webkit-scrollbar-thumb { background: var(--kb-line); border-radius: 3px; } .kb-side .group + .group { margin-top: 26px; } .kb-side a + .group-h, .kb-side .soon + .group-h { margin-top: 26px; } .kb-side .group-h { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--kb-faint); margin: 0 0 10px; padding: 0 12px; } .kb-side a { display: block; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--kb-muted); font-size: 14.5px; font-weight: 500; line-height: 1.4; } .kb-side a:hover { background: var(--kb-sunken); color: var(--kb-text); text-decoration: none; } .kb-side a[aria-current="page"] { background: var(--track-wash); color: var(--track-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--track); } .kb-side .soon { display: block; padding: 7px 12px; font-size: 14.5px; color: var(--kb-faint); } .kb-side .soon::after { content: "soon"; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kb-faint); border: 1px solid var(--kb-line); border-radius: 999px; padding: 1px 6px; } .kb-main { padding: 40px 0 96px; min-width: 0; } /* ---------- Breadcrumb ---------- */ .crumb { font-size: 13px; color: var(--kb-faint); margin: 0 0 18px; } .crumb a { color: var(--kb-muted); } .crumb .sep { padding: 0 7px; } /* ---------- Hero (KB home) ---------- */ .kb-hero { border-bottom: 1px solid var(--kb-line); background: radial-gradient(760px 300px at 12% -40%, rgba(180,153,212,.20), transparent 70%), radial-gradient(620px 260px at 88% -20%, rgba(255,200,87,.22), transparent 70%), var(--kb-bg); } .kb-hero .inner { max-width: var(--maxw); margin: 0 auto; padding: 68px 32px 60px; } @media (max-width: 860px) { .kb-hero .inner { padding: 46px 20px 40px; } } .kb-hero h1 { font-size: 40px; line-height: 1.15; letter-spacing: -.022em; font-weight: 600; margin: 0 0 12px; max-width: 660px; } @media (max-width: 860px) { .kb-hero h1 { font-size: 30px; } } .kb-hero p.lede { font-size: 18px; color: var(--kb-muted); margin: 0; max-width: 620px; } /* ---------- Search / filter ---------- */ .kb-search { margin: 30px 0 0; max-width: 560px; position: relative; } .kb-search input { width: 100%; height: 50px; padding: 0 18px 0 46px; border: 1px solid var(--kb-line); border-radius: var(--radius); background: #fff; color: var(--kb-text); font-family: inherit; font-size: 15.5px; box-shadow: 0 1px 2px rgba(42,22,51,.04); } .kb-search input:focus { outline: none; border-color: var(--track); box-shadow: 0 0 0 3px var(--track-wash); } .kb-search svg { position: absolute; left: 16px; top: 16px; pointer-events: none; } .kb-search .hint { font-size: 12.5px; color: var(--kb-faint); margin: 8px 2px 0; } .no-results { display: none; padding: 28px 4px; color: var(--kb-muted); font-size: 15px; } .no-results.show { display: block; } /* ---------- Track cards (the two audiences) ---------- */ .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 56px; } @media (max-width: 760px) { .tracks { grid-template-columns: 1fr; } } .track-card { display: block; padding: 28px; border: 1px solid var(--kb-line); border-radius: var(--radius); background: var(--kb-card); color: inherit; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; } .track-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 28px rgba(42,22,51,.08); } .track-card .pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--c); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; } .track-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; margin: 0 0 8px; } .track-card p { margin: 0 0 16px; color: var(--kb-muted); font-size: 15px; } .track-card .go { font-size: 14px; font-weight: 600; color: var(--c); } /* ---------- Article list ---------- */ .sec-h { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kb-faint); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--kb-line-soft); } .art-list { display: grid; gap: 10px; margin: 0 0 48px; } .art { display: flex; align-items: baseline; gap: 14px; padding: 15px 18px; border: 1px solid var(--kb-line); border-radius: var(--radius); background: var(--kb-card); color: inherit; transition: border-color .14s ease, background .14s ease; } a.art:hover { text-decoration: none; border-color: var(--track); background: var(--track-wash); } .art .t { font-weight: 600; font-size: 15.5px; flex-shrink: 0; } .art .d { color: var(--kb-muted); font-size: 14px; min-width: 0; } @media (max-width: 640px) { .art { flex-direction: column; gap: 4px; } } .art.disabled { opacity: .55; } .art.disabled .t::after { content: "soon"; margin-left: 9px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kb-faint); border: 1px solid var(--kb-line); border-radius: 999px; padding: 1px 6px; } /* ---------- Article body ---------- */ .article { max-width: 760px; } .article h1 { font-size: 34px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0 0 12px; } @media (max-width: 860px) { .article h1 { font-size: 27px; } } .article .sub { font-size: 17.5px; color: var(--kb-muted); margin: 0 0 10px; } .article .meta { font-size: 12.5px; color: var(--kb-faint); margin: 0 0 34px; padding-bottom: 20px; border-bottom: 1px solid var(--kb-line); } .article h2 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; margin: 46px 0 14px; scroll-margin-top: 90px; } .article h3 { font-size: 17px; font-weight: 600; margin: 30px 0 10px; scroll-margin-top: 90px; } .article p { margin: 0 0 16px; } .article ul, .article ol { margin: 0 0 16px; padding-left: 22px; } .article li { margin-bottom: 9px; } .article li > ul, .article li > ol { margin-top: 9px; } .article strong { font-weight: 600; } .article hr { border: 0; border-top: 1px solid var(--kb-line); margin: 44px 0; } /* Steps — numbered, for setup walkthroughs */ ol.steps { list-style: none; padding: 0; counter-reset: step; margin: 0 0 24px; } ol.steps > li { position: relative; padding: 0 0 22px 46px; counter-increment: step; border-left: 1px solid var(--kb-line); margin-left: 15px; } ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } ol.steps > li::before { content: counter(step); position: absolute; left: -15px; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--track-wash); color: var(--track-ink); border: 1px solid var(--track); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } ol.steps > li > .st { font-weight: 600; display: block; margin-bottom: 4px; } /* Callouts */ .note { border: 1px solid var(--kb-line); border-left: 3px solid var(--track); background: var(--kb-sunken); border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 22px; font-size: 15px; } .note .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--track-ink); margin-bottom: 6px; } .note p:last-child { margin-bottom: 0; } .note.warn { border-left-color: var(--rose); background: #FDF0F2; } .note.warn .lbl { color: #A83349; } /* Code + config values */ code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: var(--kb-sunken); border: 1px solid var(--kb-line-soft); border-radius: 5px; padding: 1.5px 5px; word-break: break-word; } pre { background: #1E1726; color: #EDE8F2; border-radius: var(--radius); padding: 18px 20px; overflow-x: auto; margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; } pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } /* Field tables — the shape IdP setup docs need */ .article table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14.5px; } .article th, .article td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--kb-line); vertical-align: top; } .article th { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--kb-faint); border-bottom-color: var(--kb-line); } .article td code { white-space: nowrap; } .tbl-scroll { overflow-x: auto; margin: 0 0 24px; } .tbl-scroll table { margin: 0; } /* ---------- Footer ---------- */ .kb-foot { border-top: 1px solid var(--kb-line); background: var(--kb-sunken); padding: 44px 0 40px; margin-top: 40px; } .kb-foot .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } @media (max-width: 860px) { .kb-foot .inner { padding: 0 20px; } } .kb-foot .who { display: flex; align-items: center; gap: 11px; } .kb-foot .who img { height: 24px; } .kb-foot .who span { font-size: 13px; color: var(--kb-muted); } .kb-foot .links { display: flex; gap: 20px; flex-wrap: wrap; } .kb-foot .links a { font-size: 13px; color: var(--kb-muted); font-weight: 500; } /* ---------- Still stuck / contact ---------- */ .stuck { border: 1px solid var(--kb-line); border-radius: var(--radius); background: var(--kb-card); padding: 26px 28px; margin: 48px 0 0; } .stuck h2 { font-size: 19px; font-weight: 600; margin: 0 0 6px; } .stuck p { margin: 0 0 14px; color: var(--kb-muted); font-size: 15px; } .stuck .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff !important; font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 999px; } .stuck .btn:hover { text-decoration: none; opacity: .92; }