/* ============================================================================ HELP-CENTER-2026-09-09 — shared stylesheet for /help/* --------------------------------------------------------------------------- Design tokens, nav, footer and font stack are lifted verbatim from /faq (which itself inherits resources.html) so the help centre is visually indistinguishable from the rest of epocra.com. Do not fork the tokens — if the site palette changes, this file should be updated to match. WHY A SHARED FILE, when every other page on the site inlines its CSS: the rest of the site is a handful of one-off pages where inlining wins on first paint. The help centre is a set of many near-identical pages that visitors read several of in a row, so one cacheable stylesheet beats re-sending ~14 KB of identical CSS per article. The font @font-face block lives here too, and each page preloads the latin woff2 directly so the font fetch still starts from the HTML, not from this sheet. ========================================================================= */ /* ---- fonts (self-hosted, mirrors the inlined block on /faq) ------------- */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/static/fonts/dm-sans-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/static/fonts/dm-sans-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(/static/fonts/dm-sans-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-ascii.woff2) format('woff2'); unicode-range: U+20-7e; } /* ---- tokens ------------------------------------------------------------ */ :root { --purple:#7c3aed; --purple-light:#a78bfa; --purple-faint:#f5f3ff; --purple-deep:#5b21b6; --ink:#0f0f14; --body:#3d3d4e; --muted:#5f5f70; --border:#e8e8ee; --surface:#fafafc; --white:#fff; --amber-bg:#fffbeb; --amber-border:#fde68a; --amber-text:#92400e; --green-bg:#f0fdf4; --green-border:#bbf7d0; --green-text:#15803d; --max:1120px; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink);line-height:1.6; -webkit-font-smoothing:antialiased;} /* ---- nav (verbatim from /faq) ------------------------------------------ */ nav.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.85);backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);} .nav-inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;} .nav-logo{font-size:22px;font-weight:800;letter-spacing:-0.8px;color:var(--purple);text-decoration:none;} .nav-links{display:flex;align-items:center;gap:36px;} .nav-links a{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s;} .nav-links a:hover{color:var(--ink);} .nav-links a.current{color:var(--ink);} .nav-cta{font-size:14px!important;font-weight:600!important;color:var(--white)!important;background:var(--ink);padding:8px 20px;border-radius:8px;transition:background .2s;} .nav-cta:hover{background:#2a2a3a!important;} .nav-burger{display:none;background:none;border:none;padding:10px;cursor:pointer;margin:0;} .nav-burger span{display:block;width:22px;height:2px;background:#0f0f14;margin:5px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease;transform-origin:center;} .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-burger.open span:nth-child(2){opacity:0;} .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);padding:12px 20px 20px;flex-direction:column;gap:2px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,0.04);} .mobile-menu.open{display:flex;} .mobile-menu a{padding:14px 16px;font-size:16px;font-weight:500;color:#0f0f14;text-decoration:none;border-radius:8px;} .mobile-menu a:active{background:#fafafc;} .mobile-menu .nav-cta{text-align:center;margin-top:12px;padding:14px 16px!important;font-size:16px!important;} /* ---- hub hero + search ------------------------------------------------- */ .hc-hero{padding:76px 32px 34px;text-align:center;} .hc-eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--purple);margin-bottom:14px;} .hc-hero h1{font-size:42px;font-weight:800;letter-spacing:-1.1px;line-height:1.1;margin-bottom:14px;} .hc-hero p{font-size:17px;color:var(--body);max-width:540px;margin:0 auto;line-height:1.65;} .hc-searchwrap{max-width:560px;margin:30px auto 0;position:relative;} .hc-search{width:100%;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--ink); background:var(--white);border:1px solid var(--border);border-radius:12px; padding:15px 18px 15px 46px;transition:border-color .18s,box-shadow .18s;} .hc-search::placeholder{color:var(--muted);} .hc-search:focus{outline:none;border-color:var(--purple-light);box-shadow:0 0 0 4px var(--purple-faint);} .hc-search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--muted); pointer-events:none;display:flex;} .hc-noresults{display:none;text-align:center;color:var(--muted);font-size:15px;padding:40px 0 10px;} .hc-noresults.show{display:block;} .hc-noresults strong{color:var(--ink);} /* ---- hub sections + cards ---------------------------------------------- */ .hc-wrap{max-width:var(--max);margin:0 auto;padding:0 32px;} .hc-sec{margin-bottom:54px;scroll-margin-top:80px;} .hc-sec.hidden{display:none;} .hc-sec-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--purple);margin-bottom:6px;} .hc-sec-desc{font-size:14.5px;color:var(--muted);margin-bottom:20px;} .hc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;} .hc-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:24px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;} .hc-card:hover{border-color:var(--purple-light);transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.07);} .hc-card.hidden{display:none;} .hc-card-icon{font-size:26px;margin-bottom:13px;display:block;line-height:1;} .hc-card h3{font-size:16.5px;font-weight:700;margin-bottom:7px;letter-spacing:-.2px;} .hc-card p{font-size:14px;color:var(--body);line-height:1.65;} .hc-card-count{display:block;margin-top:13px;font-size:12px;font-weight:600;color:var(--purple);} /* ---- quick-nav table ---------------------------------------------------- */ .hc-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;margin-bottom:54px;} .hc-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px;} .hc-table th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px; color:var(--muted);background:var(--surface);padding:13px 20px;border-bottom:1px solid var(--border);} .hc-table td{padding:14px 20px;border-bottom:1px solid var(--border);color:var(--body);vertical-align:top;} .hc-table tr:last-child td{border-bottom:none;} .hc-table a{color:var(--purple);font-weight:600;text-decoration:none;white-space:nowrap;} .hc-table a:hover{text-decoration:underline;} /* ---- support callout ---------------------------------------------------- */ .hc-cta{background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:36px 30px;text-align:center;margin-bottom:76px;} .hc-cta h2{font-size:23px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;} .hc-cta p{font-size:15px;color:var(--body);margin-bottom:20px;line-height:1.65;max-width:480px;margin-left:auto;margin-right:auto;} .hc-cta .btn{display:inline-block;background:var(--purple);color:#fff;text-decoration:none; font-size:15px;font-weight:600;padding:12px 26px;border-radius:10px;transition:background .2s;} .hc-cta .btn:hover{background:#6d28d9;} .hc-cta .btn.ghost{background:transparent;color:var(--purple);border:1px solid var(--border);margin-left:8px;} .hc-cta .btn.ghost:hover{background:var(--purple-faint);border-color:var(--purple-light);} /* ============================================================================ ARTICLE PAGES ========================================================================= */ .doc{max-width:var(--max);margin:0 auto;padding:0 32px;display:grid; grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start;} /* ---- sidebar ------------------------------------------------------------ */ .doc-side{position:sticky;top:88px;padding:38px 0 60px;max-height:calc(100vh - 88px);overflow-y:auto;} .doc-side::-webkit-scrollbar{width:6px;} .doc-side::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;} /* Group blocks. The label used to be MUTED grey above near-black article links, which inverted the hierarchy — the heading was the faintest thing in its own group and read as a caption on the row above rather than a header for the rows below. Two changes fix it: the label is now the darkest text in the block, and a hairline above each group turns the rail into visible blocks instead of one continuous list. */ .doc-side-group{margin:0;padding:21px 0 7px;} .doc-side-group + .doc-side-group{border-top:1px solid var(--border);} .doc-side-home{padding-top:0;} /* Purple, not ink: /faq and the hub already label their categories with small uppercase purple, so the rail borrows the convention the rest of the site already teaches. It also puts the label on a different axis from the article rows entirely — hue, not just weight — which is what stops the two reading as the same kind of thing. The current article stays legible against it because it carries a filled pill, not merely a colour. */ .doc-side-group > span{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase; letter-spacing:1.4px;color:var(--purple);margin-bottom:12px;} /* Heading for the list. Only earns its place on mobile, where the nav sits below the article and needs to announce itself; on desktop the rail is self-evident and a title would just be noise above it. */ .doc-side-title{display:none;} /* ---- search at the top of the rail -------------------------------------- Sized down from the hub's hero search so it reads as a tool attached to the list rather than a second hero. It filters the rail in place; there is no submit and no navigation. */ .doc-side-searchwrap{position:relative;margin:0 0 18px -11px;} .doc-side-search{width:calc(100% + 11px);font-family:'DM Sans',sans-serif;font-size:13.5px; color:var(--ink);background:var(--white);border:1px solid var(--border);border-radius:9px; padding:9px 10px 9px 32px;transition:border-color .18s,box-shadow .18s;} .doc-side-search::placeholder{color:var(--muted);} .doc-side-search:focus{outline:none;border-color:var(--purple-light); box-shadow:0 0 0 3px var(--purple-faint);} /* Safari paints its own clear affordance on type=search; the Escape key and an empty box both already restore the list, so hide it for a consistent box. */ .doc-side-search::-webkit-search-decoration, .doc-side-search::-webkit-search-cancel-button{-webkit-appearance:none;} .doc-side-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%); color:var(--muted);pointer-events:none;display:flex;} /* Shown in place of the list when a query matches nothing. */ .doc-side-empty{display:none;font-size:13px;color:var(--muted);line-height:1.55; padding:2px 0 6px;} .doc-side-empty.show{display:block;} .doc-side-empty a{color:var(--purple);font-weight:600;text-decoration:none;} .doc-side-empty a:hover{text-decoration:underline;} .doc-side a{display:block;font-size:14px;color:var(--body);text-decoration:none;padding:6px 11px; margin-left:-11px;border-radius:7px;line-height:1.45;transition:background .15s,color .15s;} .doc-side a:hover{background:var(--surface);color:var(--ink);} .doc-side a.current{background:var(--purple-faint);color:var(--purple-deep);font-weight:600;} /* ---- expandable article items ------------------------------------------- Each article is a
whose summary is the article link and whose contents are that article's own

s. The current article ships `open`. The caret is drawn on the summary rather than on the link, so the whole row is a toggle target while the link itself still navigates (help.js keeps a click on the link from also toggling the row open on the way out). */ .doc-side-item{margin:0;} .doc-side-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:6px;border-radius:7px;margin-left:-11px; transition:background .15s;} .doc-side-item > summary::-webkit-details-marker{display:none;} .doc-side-item > summary:hover{background:var(--surface);} /* The link already carries the row's padding; strip its hover so the summary owns the highlight and the two do not fight over the same rectangle. */ .doc-side-item > summary > a{flex:1;margin-left:0;} .doc-side-item > summary > a:hover{background:transparent;} .doc-side-item > summary:hover > a{color:var(--ink);} .doc-side-item > summary:hover > a.current{color:var(--purple-deep);} .doc-side-caret{flex:none;width:16px;height:16px;margin-right:5px;position:relative; opacity:.45;transition:transform .18s ease,opacity .15s;} .doc-side-caret::before{content:'';position:absolute;left:4px;top:4px;width:6px;height:6px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(-45deg);} .doc-side-item[open] > summary .doc-side-caret{transform:rotate(90deg);opacity:.75;} .doc-side-item > summary:hover .doc-side-caret{opacity:.8;} /* Section list. The rule down the left edge ties the sections to their parent article and stops the rail reading as one long undifferentiated list. */ .doc-side-sections{list-style:none;margin:2px 0 6px;padding:0 0 0 12px; border-left:1px solid var(--border);} .doc-side-sections li{margin:0;} .doc-side-sections a{font-size:13px;color:var(--muted);padding:5px 10px;margin-left:-1px; line-height:1.4;} .doc-side-sections a:hover{color:var(--ink);background:var(--surface);} /* Set by help.js as you scroll the article you are on. */ .doc-side-sections a.active{color:var(--purple-deep);font-weight:600;background:var(--purple-faint);} /* ---- article body -------------------------------------------------------- */ .doc-main{padding:38px 0 84px;min-width:0;} .crumb{font-size:13px;color:var(--muted);margin-bottom:18px;} .crumb a{color:var(--muted);text-decoration:none;} .crumb a:hover{color:var(--purple);} .crumb span{margin:0 7px;opacity:.5;} .doc-main h1{font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.18;margin-bottom:14px;} .doc-lead{font-size:17px;color:var(--body);line-height:1.65;margin-bottom:34px;max-width:66ch;} .doc-body{max-width:68ch;} .doc-body h2{font-size:21px;font-weight:700;letter-spacing:-.35px;margin:40px 0 12px;scroll-margin-top:84px;} .doc-body h2:first-child{margin-top:0;} .doc-body h3{font-size:16.5px;font-weight:700;margin:28px 0 9px;scroll-margin-top:84px;} .doc-body p{font-size:15.5px;line-height:1.75;color:var(--body);margin-bottom:15px;} .doc-body strong{color:var(--ink);font-weight:600;} .doc-body a{color:var(--purple);font-weight:600;text-decoration:none;} .doc-body a:hover{text-decoration:underline;} .doc-body ul,.doc-body ol{margin:0 0 16px;padding-left:22px;} .doc-body li{font-size:15.5px;line-height:1.75;color:var(--body);margin-bottom:7px;} .doc-body li::marker{color:var(--purple-light);} .doc-body code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:14px;font-weight:600; background:var(--purple-faint);color:var(--purple-deep);padding:2px 7px;border-radius:5px; white-space:nowrap;} .doc-body hr{border:none;border-top:1px solid var(--border);margin:36px 0;} /* numbered steps */ .steps{list-style:none;counter-reset:step;padding:0;margin:0 0 22px;} .steps li{counter-increment:step;position:relative;padding-left:42px;margin-bottom:17px;} .steps li::before{content:counter(step);position:absolute;left:0;top:1px;width:27px;height:27px; background:var(--purple-faint);color:var(--purple-deep);border-radius:50%; font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;} .steps li strong{display:block;color:var(--ink);margin-bottom:2px;} /* callouts */ .note{border:1px solid var(--border);border-left:3px solid var(--purple);background:var(--surface); border-radius:0 11px 11px 0;padding:16px 20px;margin:22px 0;} .note p{margin:0;font-size:14.5px;line-height:1.7;} .note p + p{margin-top:9px;} .note-label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px; color:var(--purple);margin-bottom:5px;} .note.warn{border-left-color:#d97706;background:var(--amber-bg);border-color:var(--amber-border);} .note.warn .note-label{color:var(--amber-text);} .note.good{border-left-color:#16a34a;background:var(--green-bg);border-color:var(--green-border);} .note.good .note-label{color:var(--green-text);} /* carrier / code table */ .doc-body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:22px 0; border:1px solid var(--border);border-radius:11px;overflow:hidden;} .doc-body th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px; color:var(--muted);background:var(--surface);padding:12px 16px;border-bottom:1px solid var(--border);} .doc-body td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--body);} .doc-body tr:last-child td{border-bottom:none;} /* Links that leave the help centre open in a new tab (see externalise_main in build_help.py) so the sidebar is never lost. Mark them, so the reader knows before clicking rather than after a tab appears. Scoped to .doc, so the site header and footer are unaffected. */ .doc a[target="_blank"]::after{content:'\2197';font-size:.82em;margin-left:3px; opacity:.55;display:inline-block;vertical-align:baseline;} .doc .doc-related a[target="_blank"]::after{margin-left:4px;} .doc-side a[target="_blank"]::after{opacity:.4;} /* path breadcrumb inside prose, e.g. Settings > SIP Credentials */ .path{font-weight:600;color:var(--ink);white-space:nowrap;} .path em{font-style:normal;color:var(--muted);margin:0 5px;font-weight:400;} /* ---- article footer ------------------------------------------------------ */ .doc-foot{margin-top:52px;padding-top:30px;border-top:1px solid var(--border);} .doc-foot h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px; color:var(--muted);margin-bottom:14px;} .doc-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:34px;} .doc-related a{display:block;border:1px solid var(--border);border-radius:11px;padding:15px 17px; text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink);transition:border-color .2s,background .2s;} .doc-related a:hover{border-color:var(--purple-light);background:var(--purple-faint);} .doc-related a span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:3px;line-height:1.5;} .doc-help{background:var(--surface);border:1px solid var(--border);border-radius:13px; padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .doc-help p{margin:0;font-size:14.5px;color:var(--body);} .doc-help strong{display:block;color:var(--ink);font-size:15.5px;font-weight:700;margin-bottom:3px;} .doc-help a{background:var(--purple);color:#fff;text-decoration:none;font-size:14px;font-weight:600; padding:10px 20px;border-radius:9px;white-space:nowrap;transition:background .2s;} .doc-help a:hover{background:#6d28d9;} /* ---- footer (verbatim from /faq) ---------------------------------------- */ footer{border-top:1px solid var(--border);padding:48px 32px;} .footer-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;} .footer-logo{font-size:18px;font-weight:800;letter-spacing:-0.6px;color:var(--purple);} .footer-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;} .footer-links a{font-size:13px;color:var(--muted);text-decoration:none;} .footer-links a:hover{color:var(--ink);} .footer-copy{font-size:13px;color:var(--muted);} /* ---- responsive ---------------------------------------------------------- */ @media(max-width:900px){ /* A 236px sticky rail has nowhere to live on a phone. The nav is FIRST in the DOM (so screen readers and keyboard users meet the navigation before the article, as on desktop), and `order` moves it visually below the article so a reader who tapped through to an article lands on the article rather than on a full-screen list of every other one. The list stays fully expanded — there is no disclosure state that can render blank, and no JavaScript in the path of the site's own navigation. */ .doc{grid-template-columns:1fr;gap:0;} .doc-main{order:1;padding:26px 0 34px;} .doc-side{order:2;position:static;max-height:none;overflow:visible; border:1px solid var(--border);border-radius:12px;padding:0;margin:0 0 46px;} .doc-side-inner{padding:18px;} .doc-side-title{display:block;font-size:15px;font-weight:700;color:var(--ink); margin-bottom:16px;} .doc-side-group:last-child{margin-bottom:0;} .doc-side a{padding:9px 11px;} } @media(max-width:768px){ .nav-links{display:none;} .nav-burger{display:block;} .hc-hero{padding:56px 20px 26px;} .hc-hero h1{font-size:30px;} .hc-wrap,.doc{padding:0 20px;} .hc-cards{grid-template-columns:1fr;} .doc-main h1{font-size:27px;} .doc-lead{font-size:16px;} .doc-help{flex-direction:column;align-items:flex-start;} .footer-inner{flex-direction:column;gap:20px;text-align:center;} } /* (Nothing here any more. This used to hide the sidebar's summary on desktop, back when the whole rail was one
that CSS forced open. The rail is a plain