/* Theme Name: Tenzo Help Centre & Developer Portal Theme URI: https://tenzo.io Description: Unified theme for Tenzo Help Centre and Developer Portal. Supports knowledge base articles (BetterDocs), developer documentation pages, API reference (ReDoc), and the Card Creator guide. Author: Tenzo Author URI: https://tenzo.io Version: 4.7.5 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Private Text Domain: tenzo-helpcentre */ /* =========================== CSS Variables — Tenzo Brand =========================== */ :root { /* Primary brand — Figma "Light/Primary/Main" + secondary peaches */ --tenzo-orange: #FF8001; /* Light/Primary/Main */ --tenzo-orange-dark: #d96d00; --tenzo-orange-light: #FCF0E7; /* Light/Secondary/Main */ --tenzo-orange-peach: #FEE3D7; /* Light/Secondary/Light */ --tenzo-orange-tint-2: #FF9C5C; --tenzo-orange-tint-3: #FCB086; --tenzo-orange-tint-4: #FFCBA9; /* Neutral palette — Figma "Light/Text/*" + "Light/Background/*" */ --tenzo-black: #1D1B20; /* Light/Text/Primary */ --tenzo-text: #1D1B20; /* Light/Text/Primary */ --tenzo-text-mid: #4a4a4a; --tenzo-text-light: #666666; /* Light/Text/Secondary */ --tenzo-text-disabled: #929194; /* Light/Text/Disabled */ --tenzo-white: #ffffff; --tenzo-paper: #FDFDFD; /* Light/Background/Paper */ --tenzo-bg: #FCFCFC; /* Light/Background/Default */ --tenzo-stone: #EFEFEF; /* Light/Primary/Neutrals/12p */ --tenzo-light-stone: #FAFAFA; --tenzo-border: #EFEFEF; --tenzo-olive: #AFBCAC; /* Accent colors */ --tenzo-green: #0D6F6C; --tenzo-teal: #1BAFB6; --tenzo-yellow: #FDBA2C; --tenzo-pink: #FEB6E1; --tenzo-red: #FC3B4D; /* UI tokens */ --tenzo-radius: 12px; --tenzo-radius-lg: 20px; --tenzo-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); --tenzo-shadow-hover: 0 4px 12px rgba(253, 128, 35, 0.15); --tenzo-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.04); --tenzo-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tenzo-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* =========================== Base Styles =========================== */ html, body { overflow-x: hidden; max-width: 100vw; margin: 0; padding: 0; } body { font-family: var(--tenzo-font); color: var(--tenzo-text); background-color: var(--tenzo-bg); line-height: 1.6; } /* Thin, styled scrollbars site-wide */ * { scrollbar-width: thin; scrollbar-color: var(--tenzo-stone) transparent; } /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--tenzo-stone); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--tenzo-olive); } a { color: var(--tenzo-orange-dark); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--tenzo-orange); } /* =========================== Header — Figma NavBar (frame 33:312): bg #fcfcfc, 72px, 24px padding =========================== */ .site-header { background-color: var(--tenzo-bg); color: var(--tenzo-text); padding: 0 24px; height: 72px; position: sticky; top: 0; z-index: 1000; } .header-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; } .header-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .header-logo img { height: 27px; width: 86px; object-fit: contain; } .header-nav { display: flex; align-items: center; gap: 12px; } /* Nav link — Manrope Medium 14px, lineHeight 24, letterSpacing 0.4 */ .header-nav .nav-link { position: relative; color: var(--tenzo-text-light); /* #666 — inactive */ font-size: 14px; line-height: 24px; letter-spacing: 0.4px; font-weight: 500; padding: 4px 8px; transition: color 0.15s ease; } .header-nav .nav-link:hover { color: var(--tenzo-text); /* darker on hover */ } .header-nav .nav-link.active { color: var(--tenzo-text); /* #1d1b20 — active */ } .header-nav .nav-link.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--tenzo-orange); } /* =========================== Docs Archive — Hero (Figma frame 33:317) Borders top + bottom 0.5px #bdbdbd, padding 24px 120px, 184px tall. =========================== */ .docs-hero { background: var(--tenzo-bg); border-top: 0.5px solid #bdbdbd; border-bottom: 0.5px solid #bdbdbd; padding: 24px 120px; text-align: left; } .docs-hero-inner { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } /* H1 — Manrope Bold 30px, letterSpacing 0.25, lineHeight normal */ .docs-hero h1 { font-family: var(--tenzo-font-heading); font-size: 30px; font-weight: 700; color: var(--tenzo-text); margin: 0; letter-spacing: 0.25px; line-height: 1.2; } /* Subtitle — Manrope Regular 20px, color #666 */ .docs-hero-subtitle { font-size: 20px; font-weight: 400; color: var(--tenzo-text-light); margin: 0; line-height: 1.3; letter-spacing: 0.15px; max-width: 100%; } .docs-hero-search { width: 100%; } /* Search bar — grey-outlined component (shared by all 3 sections) */ .docs-hero-search .search-form, .docs-hero-search .searchform { max-width: 100%; position: relative; } .docs-hero-search input[type="text"], .docs-hero-search input[type="search"], .docs-hero-search #s { flex: 1; padding: 0.5rem 1rem 0.5rem 2.6rem; border: 1px solid transparent; border-radius: 8px; font-size: 0.9rem; line-height: 1.4; width: 100%; font-family: var(--tenzo-font); outline: none; background: rgba(0, 0, 0, 0.04); color: var(--tenzo-text); box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .docs-hero-search input[type="text"]::placeholder, .docs-hero-search input[type="search"]::placeholder, .docs-hero-search #s::placeholder { color: var(--tenzo-text-disabled); } .docs-hero-search input[type="text"]:focus, .docs-hero-search input[type="search"]:focus, .docs-hero-search #s:focus { border-color: var(--tenzo-text-disabled); background: var(--tenzo-white); } .docs-hero-search .search-form .search-icon, .docs-hero-search .searchform .search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tenzo-orange); pointer-events: none; } .docs-hero-search input[type="submit"], .docs-hero-search #searchsubmit { display: none; padding: 0.7rem 1.5rem; background: var(--tenzo-orange); color: var(--tenzo-white); border: 1px solid var(--tenzo-orange); border-radius: 0 var(--tenzo-radius) var(--tenzo-radius) 0; font-size: 0.95rem; font-weight: 600; font-family: var(--tenzo-font); cursor: pointer; transition: background 0.15s; } .docs-hero-search input[type="submit"]:hover, .docs-hero-search #searchsubmit:hover { background: var(--tenzo-orange-dark); } .docs-featured { background: var(--tenzo-bg); padding: 40px 120px 0; } .docs-featured-inner { max-width: 1040px; margin: 0 auto; } .docs-featured-heading { font-family: var(--tenzo-font-heading); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--tenzo-text); margin: 0 0 16px; } .docs-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .docs-featured-card { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); padding: 1.5rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.5rem; position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .docs-featured-card:hover { border-color: var(--tenzo-orange); box-shadow: var(--tenzo-shadow-card); } .docs-featured-card h3 { font-size: 1rem; font-weight: 600; color: var(--tenzo-text); margin: 0; padding-right: 1.5rem; } .docs-featured-card p { font-size: 0.88rem; color: var(--tenzo-text-light); margin: 0; line-height: 1.5; } .docs-featured-arrow { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--tenzo-orange); opacity: 0; transition: opacity 0.15s; } .docs-featured-card:hover .docs-featured-arrow { opacity: 1; } .docs-archive-main { max-width: 1100px; margin: 0 auto; padding: 2rem; } /* =========================== Hero / Search Section (legacy — used by index.php) =========================== */ .helpcentre-hero { background: var(--tenzo-bg); border-bottom: 1px solid var(--tenzo-border); padding: 3rem 2rem; text-align: center; color: var(--tenzo-text); } .helpcentre-hero h1 { font-family: var(--tenzo-font-heading); font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--tenzo-text); } .helpcentre-hero .search-form { max-width: 500px; margin: 0 auto; position: relative; } /* Shared search input style — used by hero, integration guides, search page */ .search-form .search-input { display: block; width: 100%; box-sizing: border-box; padding: 0.9rem 1.2rem; padding-right: 3rem; border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); font-size: 1rem; font-family: var(--tenzo-font); outline: none; background: var(--tenzo-white); } .search-form .search-input:focus { box-shadow: 0 0 0 3px rgba(253, 128, 35, 0.3); border-color: var(--tenzo-orange); } /* =========================== Category Grid =========================== */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .category-card { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); padding: 1.5rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } .category-card:hover { box-shadow: var(--tenzo-shadow-hover); transform: translateY(-2px); } .category-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--tenzo-dark); margin-bottom: 0.5rem; } .category-card p { font-size: 0.9rem; color: var(--tenzo-text-light); margin-bottom: 1rem; } .category-card .article-count { font-size: 0.8rem; color: var(--tenzo-text-light); } /* =========================== Article List =========================== */ .article-list { max-width: 900px; margin: 0 auto; padding: 2rem; } .article-list-item { display: flex; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--tenzo-border); } .article-list-item:last-child { border-bottom: none; } .article-list-item a { font-size: 1rem; color: var(--tenzo-text); font-weight: 500; } .article-list-item a:hover { color: var(--tenzo-orange-dark); } /* =========================== Article Content =========================== */ .article-content { max-width: 800px; margin: 0 auto; padding: 2rem; background: var(--tenzo-white); border-radius: var(--tenzo-radius); box-shadow: var(--tenzo-shadow); } .article-content h1 { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--tenzo-text); margin: 0 0 24px; padding-bottom: 0; border-bottom: none; letter-spacing: 0.25px; } .article-content h2 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--tenzo-text); margin: 32px 0 12px; letter-spacing: 0.15px; } .article-content h3 { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--tenzo-text); margin: 24px 0 8px; } .article-content img { max-width: 100%; height: auto; border-radius: var(--tenzo-radius); margin: 1rem 0; box-shadow: var(--tenzo-shadow); } .article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1rem; } .article-content li { margin-bottom: 0.4rem; } .article-content code { background: var(--tenzo-orange-light); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.9em; } .article-content pre { background: var(--tenzo-dark); color: var(--tenzo-white); padding: 1rem; border-radius: var(--tenzo-radius); overflow-x: auto; margin: 1rem 0; } .article-content pre code { background: none; padding: 0; color: inherit; } /* =========================== Breadcrumbs =========================== */ .breadcrumbs { max-width: 800px; margin: 1.5rem auto 0; padding: 0 2rem; font-size: 0.85rem; color: var(--tenzo-text-light); } .breadcrumbs a { color: var(--tenzo-text-light); } .breadcrumbs a:hover { color: var(--tenzo-orange-dark); } .breadcrumbs .separator { margin: 0 0.4rem; } /* =========================== Footer — minimal light =========================== */ .site-footer { background-color: var(--tenzo-white); border-top: 1px solid var(--tenzo-border); color: var(--tenzo-text-light); text-align: center; padding: 1.75rem 2rem; margin-top: 0; font-size: 0.85rem; } .footer-inner { max-width: 1180px; margin: 0 auto; } .footer-links { margin-bottom: 0.6rem; } .footer-links a { color: var(--tenzo-text-mid); text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: var(--tenzo-orange); } .footer-sep { margin: 0 0.5rem; opacity: 0.4; } .footer-copy { margin: 0; opacity: 0.65; font-size: 0.8rem; } /* =========================== Developer Portal — Hero (Figma 110:4898) Same shell as docs-hero: 0.5px #bdbdbd top/bottom borders, 24px×120px padding. =========================== */ .dev-hero { background: var(--tenzo-bg); border-top: 0.5px solid #bdbdbd; border-bottom: 0.5px solid #bdbdbd; padding: 24px 120px; color: var(--tenzo-text); } .dev-hero .dev-container { max-width: 1040px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 16px; } .dev-hero h1 { font-family: var(--tenzo-font-heading); font-size: 30px; font-weight: 700; margin: 0; color: var(--tenzo-text); letter-spacing: 0.25px; line-height: 1.2; } .dev-hero-search { position: relative; max-width: 100%; margin-top: 0; } .dev-hero-search .search-input { width: 100%; padding: 0.5rem 1rem 0.5rem 2.6rem; border: 1px solid transparent; border-radius: 8px; font-size: 0.9rem; line-height: 1.4; font-family: var(--tenzo-font); outline: none; background: rgba(0, 0, 0, 0.04); color: var(--tenzo-text); box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .dev-hero-search .search-input::placeholder { color: var(--tenzo-text-disabled); } .dev-hero-search .search-input:focus { border-color: var(--tenzo-text-disabled); background: var(--tenzo-white); } .dev-hero-search .search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tenzo-orange); pointer-events: none; } .dev-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; max-width: 1100px; margin: 0 auto; align-items: end; } .dev-hero-left h1 { font-family: var(--tenzo-font-heading); font-size: 2.4rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--tenzo-text); } /* Eyebrow "Developer Portal" — Manrope Bold 16px orange, plain text (Figma 110:4899) */ .dev-tag { display: inline-block; background: transparent; color: var(--tenzo-orange); font-size: 16px; line-height: 1.2; font-weight: 700; padding: 0; border-radius: 0; margin: 0; } /* Subtitle — Manrope Regular 20px to match docs-hero */ .dev-hero-subtitle { font-size: 20px; color: var(--tenzo-text-light); line-height: 1.3; letter-spacing: 0.15px; margin: 0; font-weight: 400; } .dev-hero-subtitle a { color: var(--tenzo-text-button, #331b00); text-decoration: underline; } .dev-hero-card { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); padding: 1.5rem; } .dev-hero-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--tenzo-text); margin: 0.5rem 0 0.75rem; } .dev-hero-card ul { list-style: none; padding: 0; margin: 0; } .dev-hero-card ul li { font-size: 0.9rem; color: var(--tenzo-text-mid); padding: 0.3rem 0; line-height: 1.5; } .dev-hero-card ul li strong { color: var(--tenzo-text); } .dev-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .dev-btn { display: inline-block; padding: 0.6rem 1.25rem; border: 2px solid var(--tenzo-border); border-radius: var(--tenzo-radius); font-size: 0.9rem; font-weight: 500; color: var(--tenzo-text); text-decoration: none; transition: all 0.2s ease; } .dev-btn:hover { border-color: var(--tenzo-orange); color: var(--tenzo-orange); box-shadow: var(--tenzo-shadow-hover); } .dev-btn-primary { background: var(--tenzo-orange); color: var(--tenzo-white); border-color: var(--tenzo-orange); } .dev-btn-primary:hover { background: var(--tenzo-orange-dark); border-color: var(--tenzo-orange-dark); color: var(--tenzo-white); } /* =========================== Developer Portal — Content =========================== */ .dev-portal-content { padding: 0; } .dev-container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; } .dev-section { margin-bottom: 2.5rem; } .dev-section h2 { font-family: var(--tenzo-font-heading); font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--tenzo-text); } .dev-info-card { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); padding: 1.25rem; } .dev-info-card h3 { font-size: 1rem; font-weight: 600; color: var(--tenzo-text); margin: 0 0 0.35rem; } .dev-info-card p { font-size: 0.88rem; color: var(--tenzo-text-light); margin: 0; line-height: 1.5; } /* =========================== Developer Portal — Cards =========================== */ /* Dev portal cards — Figma 110:4914 White bg, 1px #e9e9eb border, 12px radius, 168px height, 16px padding, 42x42 peach icon badge on the left. */ .dev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; } .dev-card { background: var(--tenzo-paper); border: 1px solid #e9e9eb; border-radius: 12px; padding: 16px; display: flex; gap: 16px; align-items: flex-start; text-decoration: none; box-shadow: 0 4px 12px -2px rgba(17, 24, 39, 0.04), 0 1px 2px 0 rgba(17, 24, 39, 0.04); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; position: relative; min-height: 168px; box-sizing: border-box; } .dev-card::before { content: ""; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background-color: #FCF0E7; /* Light/Secondary/Main */ background-repeat: no-repeat; background-position: center; background-size: 24px 24px; /* Default fallback icon — each .dev-card--* below overrides with a distinct Material Symbols (filled) icon, rendered in #1D1B20 Light/Primary/Neutrals/4p. */ background-image: url("data:image/svg+xml;utf8,"); } /* MCP Server — smart_toy (robot face) */ .dev-card--mcp::before { background-image: url("data:image/svg+xml;utf8,"); } /* Tenzo API — terminal */ .dev-card--api::before { background-image: url("data:image/svg+xml;utf8,"); } /* Schema — account_tree */ .dev-card--schema::before { background-image: url("data:image/svg+xml;utf8,"); } /* Send us a data export — cloud_upload */ .dev-card--export::before { background-image: url("data:image/svg+xml;utf8,"); } /* Auth Flow — vpn_key */ .dev-card--auth::before { background-image: url("data:image/svg+xml;utf8,"); } .dev-card:hover { border-color: var(--tenzo-orange); transform: translateY(-2px); box-shadow: var(--tenzo-shadow-hover); } .dev-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .dev-card h3 { font-family: var(--tenzo-font-heading); font-size: 16px; line-height: 24px; font-weight: 700; color: var(--tenzo-text); margin: 0; } .dev-card p { font-size: 14px; line-height: 22px; color: var(--tenzo-text-light); margin: 0; font-weight: 500; } .dev-card-link { display: inline-block; margin-top: auto; font-size: 14px; line-height: 22px; font-weight: 600; color: #331b00; } @media (max-width: 900px) { .dev-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dev-cards { grid-template-columns: 1fr; } .dev-card { min-height: 0; } } .dev-card-arrow { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--tenzo-orange); font-size: 1.2rem; opacity: 0; transition: opacity 0.2s ease; } .dev-card:hover .dev-card-arrow { opacity: 1; } .dev-contact { text-align: center; margin-top: 3rem; padding: 2rem; background: var(--tenzo-orange-light); border-radius: var(--tenzo-radius); font-size: 0.95rem; } /* =========================== Developer Documentation — Layout =========================== */ .dev-doc-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 72px); background: var(--tenzo-white); } /* Modifier — single-column layout when the sidebar is removed (e.g. MCP docs). Centres the main column at the same width as help articles. */ .dev-doc-layout--full { grid-template-columns: 1fr; } .dev-doc-layout--full .dev-doc-main { max-width: 880px; margin: 0 auto; padding: 2.5rem 2rem 3rem; } .dev-doc-sidebar { background: var(--tenzo-white); border-right: 1px solid #e0e0e0; padding: 16px; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; } /* Search box at the top — matches integration-guide sidebar */ .dev-doc-sidebar-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: rgba(0, 0, 0, 0.04); border-radius: 8px; color: #929194; margin-bottom: 16px; } .dev-doc-sidebar-search input { flex: 1; background: transparent; border: none; font-family: var(--tenzo-font); font-size: 14px; color: var(--tenzo-text); outline: none; } .dev-doc-sidebar-search input::placeholder { color: #929194; } .dev-doc-nav-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #929194; margin: 16px 0 6px; padding: 0 4px; } .dev-doc-nav-list { list-style: none; padding: 0; margin: 0; } .dev-doc-nav-list li { margin: 0; list-style: none; } .dev-doc-nav-list li a, .dev-doc-nav-item a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px 9px 4px; font-size: 14px; font-weight: 500; color: var(--tenzo-text); text-decoration: none; border-radius: 4px; } .dev-doc-nav-list li a:hover, .dev-doc-nav-item a:hover { background: #f4f4f4; } .dev-doc-nav-list li.current a, .dev-doc-nav-list li.is-current a, .dev-doc-nav-item.is-current a { background: #f0f0f0; color: var(--tenzo-orange); font-weight: 600; } .dev-doc-nav-list li svg, .dev-doc-nav-item svg { flex-shrink: 0; color: #929194; opacity: 0.8; } .dev-doc-toc-list { list-style: none; padding: 0; margin: 0; } .dev-doc-toc-list li a { display: block; padding: 0.25rem 0.5rem; font-size: 0.82rem; color: var(--tenzo-text-light); border-left: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .dev-doc-toc-list li a:hover, .dev-doc-toc-list li a.active { color: var(--tenzo-orange-dark); border-left-color: var(--tenzo-orange); } .dev-doc-toc-list .toc-h3 a { padding-left: 1.25rem; font-size: 0.8rem; } .dev-doc-main { padding: 32px 40px 64px; max-width: 956px; } .dev-doc-main .breadcrumbs { margin: 0 0 1rem; padding: 0; max-width: none; } /* =========================== API Reference (ReDoc) =========================== */ .api-reference-wrapper { margin-top: -3rem; /* Remove footer margin — ReDoc fills viewport */ } .api-reference-wrapper .site-footer { display: none; } #redoc-container { min-height: calc(100vh - 56px); } .api-error { max-width: 600px; margin: 4rem auto; text-align: center; padding: 2rem; } .api-error h2 { color: var(--tenzo-dark); } .api-error a { color: var(--tenzo-orange-dark); } /* =========================== Card Creator Guide =========================== */ .card-creator-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 56px); } .card-creator-sidebar { background: var(--tenzo-white); border-right: 1px solid var(--tenzo-border); padding: 1.5rem; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } .card-creator-main { padding: 1.5rem 3rem 3rem; max-width: 900px; } .card-creator-main .breadcrumbs { margin: 0 0 1rem; padding: 0; max-width: none; } /* Formula syntax highlighting */ .cc-fn { color: #FD8023; font-weight: 600; } .cc-col { color: #2196F3; } .cc-str { color: #4CAF50; } .cc-num { color: #FFB300; } /* Callout boxes for tips/warnings */ .article-content .callout, .article-content .info-box, .article-content .tip-box, .article-content .warning-box { padding: 1rem 1.25rem; border-radius: var(--tenzo-radius); margin: 1rem 0; border-left: 4px solid; } .article-content .info-box { background: #e8f7f7; border-color: var(--tenzo-teal); } .article-content .tip-box { background: #e6f2f1; border-color: var(--tenzo-green); } .article-content .warning-box { background: #FEF7E1; border-color: var(--tenzo-yellow); } /* Formula display boxes */ .article-content .formula, .article-content pre.formula { background: #1e1e32; color: #ffffff; border-left: 4px solid var(--tenzo-orange); padding: 0.75rem 1rem; font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.9em; margin: 0.75rem 0; border-radius: 0 var(--tenzo-radius) var(--tenzo-radius) 0; overflow-x: auto; } /* Result tables */ .article-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } .article-content table th { background: var(--tenzo-dark); color: var(--tenzo-white); padding: 0.6rem 1rem; text-align: left; font-weight: 600; } .article-content table td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--tenzo-border); } .article-content table tr:hover td { background: var(--tenzo-orange-light); } /* =========================== Developer Docs — Code & Content Styling Classes from the imported developer site HTML =========================== */ /* Code blocks — URLs, curl commands, HTTP requests */ .article-content .code-block { background: #1a1a2e; color: #e0e0e0; font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; font-size: 0.85rem; line-height: 1.6; padding: 1rem 1.25rem; border-radius: var(--tenzo-radius); margin: 0.75rem 0; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } /* JSON response blocks */ .article-content .json-response { background: #1a1a2e; color: #a8d8a8; font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; font-size: 0.85rem; line-height: 1.6; padding: 1rem 1.25rem; border-radius: var(--tenzo-radius); margin: 0.75rem 0; overflow-x: auto; white-space: pre-wrap; } /* Inline parameter names */ .article-content .parameter { background: var(--tenzo-orange-light); color: var(--tenzo-text); font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; font-size: 0.85em; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: 600; } /* Warning / highlight callout boxes — pale yellow per Figma MCP docs frame */ .article-content .warning, .article-content .highlight, .dev-doc-content .warning, .dev-doc-content .highlight { background: #FEF7E1; border-left: 4px solid var(--tenzo-yellow); padding: 1rem 1.25rem; border-radius: 0 var(--tenzo-radius) var(--tenzo-radius) 0; margin: 1rem 0; } .article-content .warning p, .article-content .highlight p { margin: 0.25rem 0; } /* Flow steps — numbered step cards */ .article-content .flow-step { background: var(--tenzo-white); padding: 1.5rem; border-radius: var(--tenzo-radius); border: 1px solid var(--tenzo-border); margin: 1.5rem 0; } /* Step number badges */ .article-content .step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--tenzo-orange); color: var(--tenzo-white); border-radius: 50%; font-size: 0.85rem; font-weight: 700; margin-right: 0.5rem; flex-shrink: 0; } /* Field groups — data field documentation cards */ .article-content .field-group { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); padding: 0.75rem 1rem; margin: 0.5rem 0; } .article-content .field-group h4 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; } .article-content .field-group .field-description { font-size: 0.85rem; color: var(--tenzo-text-mid); margin-top: 0.35rem; line-height: 1.5; } /* Format label badges in field headings */ .article-content .format-label { display: inline-block; background: var(--tenzo-stone); color: var(--tenzo-text-mid); font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; } /* Intro section styling */ .article-content .intro { font-size: 1.05rem; color: var(--tenzo-text-mid); line-height: 1.7; border-left: 4px solid var(--tenzo-orange); padding-left: 1rem; margin-bottom: 1.5rem; } /* Tag badges (e.g. "Developer Guide", "Technical Documentation") */ .article-content .tag { display: inline-block; background: var(--tenzo-orange); color: var(--tenzo-white); font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } /* Contact / CTA box */ .article-content .contact { background: var(--tenzo-stone); padding: 1.5rem; border-radius: var(--tenzo-radius); text-align: center; margin-top: 2rem; } /* Tenzo connect buttons container */ .article-content .tenzo-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; } .article-content .tenzo-buttons img { max-height: 48px; width: auto; } /* Centered images */ .article-content .centered-img { display: block; margin: 1rem auto; max-width: 100%; } /* =========================== Integration Guide Articles — Tighter Layout =========================== */ /* Title logo — integration's brandmark, sized to be readable */ .article-content .ig-title-logo { display: block; width: auto; height: auto; max-width: 200px; max-height: 64px; object-fit: contain; margin: 0 0 12px 0; box-shadow: none; border-radius: 0; float: none; } /* Key legend — Figma frame 83:1788 */ .article-content .ig-key { display: inline-flex; flex-wrap: wrap; gap: 12px; font-size: 14px; line-height: 20px; color: var(--tenzo-text); margin: 8px 0 24px; align-items: center; } /* Column logos in table headers — use max-height (not fixed height) so wide logos render at their natural ratio without being squashed. */ .article-content .ig-col-logo { height: auto; max-height: 42px; width: auto; max-width: 165px; object-fit: contain; vertical-align: middle; margin: 0; box-shadow: none; border-radius: 0; display: inline; } /* Mapping table — Figma frame 83:1885 / 83:1967 Header row 44px, body rows 52px, 0.5px dividers, 16px cell padding. No alternating row colours, no header background. */ /* Mapping + info tables wrapped in a rounded #bdbdbd container per Figma. */ .article-content .ig-mapping-table, .article-content .ig-info-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; margin: 24px 0; border: 1px solid #bdbdbd; border-radius: 8px; overflow: hidden; background: var(--tenzo-white); } .article-content .ig-mapping-table thead th { background: var(--tenzo-white); color: var(--tenzo-text); padding: 16px; text-align: left; vertical-align: middle; font-weight: 700; font-size: 18px; line-height: 1.2; border-bottom: 0.5px solid #bdbdbd; height: 72px; box-sizing: border-box; white-space: nowrap; } .article-content .ig-mapping-table thead th:first-child { color: var(--tenzo-orange); font-size: 28px; } /* Column-header images sit at the left of their cell. */ .article-content .ig-mapping-table thead th img.ig-col-logo { margin: 0 8px 0 0; display: inline-block; vertical-align: middle; } .article-content .ig-mapping-table tbody td, .article-content .ig-info-table td { padding: 14px 16px; border-bottom: 0.5px solid #bdbdbd; vertical-align: middle; font-size: 14px; line-height: 20px; color: var(--tenzo-text); background: transparent; } .article-content .ig-mapping-table tbody td:first-child { width: 42%; } .article-content .ig-mapping-table tbody tr:last-child td, .article-content .ig-info-table tr:last-child td { border-bottom: none; } .article-content .ig-mapping-table tbody tr:hover td { background: rgba(0, 0, 0, 0.02); } /* Status indicators */ .article-content .ig-yes { } .article-content .ig-no { opacity: 0.6; } .article-content .ig-wip { } .article-content .ig-info-table td { padding: 18px 16px; } .article-content .ig-info-table td:first-child { width: 42%; font-weight: 700; background: transparent; } /* Tighter article spacing for integration guides */ .dev-doc-content.article-content h2 { margin-top: 1.5rem; margin-bottom: 0.5rem; } .dev-doc-content.article-content p { margin-bottom: 0.5rem; } .dev-doc-content.article-content h3 { margin-top: 1rem; margin-bottom: 0.35rem; } /* =========================== Accordion — collapsible FAQ/troubleshooting sections =========================== */ .article-content .accordion { margin: 0.75rem 0; } .article-content .accordion-item { border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); margin-bottom: 0.5rem; overflow: hidden; } .article-content .accordion-item summary { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.92rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; background: var(--tenzo-light-stone); transition: background 0.15s; } .article-content .accordion-item summary:hover { background: var(--tenzo-stone); } .article-content .accordion-item summary::after { content: '+'; font-size: 1.2rem; font-weight: 400; color: var(--tenzo-text-light); flex-shrink: 0; margin-left: 1rem; transition: transform 0.2s; } .article-content .accordion-item[open] summary::after { content: '\2212'; } .article-content .accordion-item summary::-webkit-details-marker { display: none; } .article-content .accordion-item .accordion-body { padding: 0.75rem 1rem; font-size: 0.9rem; line-height: 1.6; } .article-content .accordion-item .accordion-body ol, .article-content .accordion-item .accordion-body ul { margin: 0.5rem 0; padding-left: 1.25rem; } .article-content .accordion-item .accordion-body li { margin-bottom: 0.25rem; } /* =========================== Setup Tabs — used on MCP Server docs =========================== */ .article-content .setup-tabs { margin: 1rem 0 1.5rem; } .article-content .setup-tab-bar { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--tenzo-border); margin-bottom: 0; } .article-content .setup-tab { padding: 0.5rem 1rem; border: none; background: none; font-family: var(--tenzo-font); font-size: 0.88rem; font-weight: 500; color: var(--tenzo-text-mid); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .article-content .setup-tab:hover { color: var(--tenzo-orange); } .article-content .setup-tab.active { color: var(--tenzo-orange); border-bottom-color: var(--tenzo-orange); } .article-content .setup-tab-panel { display: none; padding: 1rem 0 0.5rem; } .article-content .setup-tab-panel.active { display: block; } /* =========================== Card Creator Guide — Article Styles Scoped under .cc-article to avoid conflicts with other article content. =========================== */ .cc-article { --navy: #1A1A2E; --navy-mid: #22223a; --navy-light: #2d2d4a; --orange: #F47B20; --orange-light: #ffa04d; --white: #ffffff; --text-dark: #1a1a2e; --text-mid: #4a4a6a; --text-light: #8888aa; --border: #e2e2ee; --green: #2ecc71; --blue: #4a9eff; --red: #e74c3c; --yellow: #f1c40f; --card-bg: #ffffff; --code-bg: #1e1e32; } .cc-article .section { margin-bottom: 48px; scroll-margin-top: 72px; } .cc-article .section-title { font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; padding-bottom: 10px; border-bottom: 2px solid var(--orange); display: inline-block; } .cc-article .section-subtitle { font-size: 14px; color: var(--text-mid); margin-bottom: 20px; line-height: 1.5; } .cc-article h3.subsection { font-size: 15px; font-weight: 600; color: var(--text-dark); margin: 24px 0 10px; } /* Mockup UI */ .cc-article .mockup-wrapper { background: var(--navy); border-radius: 12px; padding: 20px; margin-bottom: 24px; } .cc-article .mockup-title { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; } .cc-article .mockup-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .cc-article .mockup-field { flex: 1; min-width: 180px; } .cc-article .mockup-label { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 5px; font-weight: 500; } .cc-article .mockup-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(244,123,32,0.4); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--white); font-family: 'Inter', monospace; width: 100%; } .cc-article .mockup-input .fn { color: var(--orange); font-weight: 600; } .cc-article .mockup-input .col { color: var(--blue); } .cc-article .mockup-input .str { color: var(--green); } .cc-article .mockup-input .num { color: #f8c471; } .cc-article .mockup-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,0.7); width: 100%; } .cc-article .mockup-toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .cc-article .mockup-toggle { width: 30px; height: 16px; background: var(--orange); border-radius: 8px; position: relative; } .cc-article .mockup-toggle::after { content: ''; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; background: white; border-radius: 50%; } .cc-article .mockup-toggle.off { background: rgba(255,255,255,0.2); } .cc-article .mockup-toggle.off::after { left: 2px; right: auto; } .cc-article .mockup-toggle-label { font-size: 12px; color: rgba(255,255,255,0.6); } /* Formula boxes */ .cc-article .formula-box { background: var(--code-bg); color: rgba(255,255,255,0.82); border-radius: 8px; padding: 14px 18px; font-family: 'Inter', monospace; font-size: 14px; margin: 12px 0; border-left: 3px solid var(--orange); line-height: 1.6; overflow-x: auto; } .cc-article .formula-box .fn { color: var(--orange); font-weight: 600; } .cc-article .formula-box .col { color: var(--blue); } .cc-article .formula-box .str { color: var(--green); } .cc-article .formula-box .num { color: #f8c471; } .cc-article .formula-box .cmt { color: rgba(255,255,255,0.35); font-style: italic; } .cc-article .formula-box .op { color: rgba(255,255,255,0.7); } .cc-article .formula-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-light); margin-bottom: 4px; } /* Result tables */ .cc-article .result-table-wrapper { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin: 12px 0 20px; } .cc-article .result-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cc-article .result-table th { background: #f7f7fb; padding: 9px 14px; text-align: left; font-weight: 600; color: var(--text-mid); font-size: 12px; border-bottom: 1px solid var(--border); } .cc-article .result-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-dark); } .cc-article .result-table tr:last-child td { border-bottom: none; } .cc-article .result-table tr.total td { background: #f7f7fb; font-weight: 600; } .cc-article .result-table .val-pos { color: var(--green); font-weight: 600; } .cc-article .result-table .val-neg { color: var(--red); font-weight: 600; } .cc-article .result-table .val-warn { color: var(--orange); font-weight: 600; } .cc-article .result-table .col-calc { background: rgba(74,158,255,0.04); } /* Info/tip/warning boxes */ .cc-article .tip-box, .cc-article .warning-box, .cc-article .info-box, .cc-article .real-world-box { border-radius: 8px; padding: 14px 18px; margin: 16px 0; font-size: 14px; line-height: 1.6; } .cc-article .tip-box { background: rgba(46,204,113,0.07); border-left: 3px solid var(--green); } .cc-article .warning-box { background: rgba(231,76,60,0.07); border-left: 3px solid var(--red); } .cc-article .info-box { background: rgba(74,158,255,0.07); border-left: 3px solid var(--blue); } .cc-article .real-world-box { background: rgba(244,123,32,0.07); border-left: 3px solid var(--orange); } .cc-article .tip-box strong, .cc-article .warning-box strong, .cc-article .info-box strong, .cc-article .real-world-box strong { display: block; margin-bottom: 4px; font-weight: 600; } /* Advanced panel */ .cc-article .advanced-panel { background: var(--navy); border-radius: 10px; padding: 22px 24px; margin: 16px 0; color: var(--white); } .cc-article .advanced-panel h4 { font-size: 14px; font-weight: 600; color: var(--orange); margin-bottom: 10px; } .cc-article .advanced-panel p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 10px; } /* Settings grid */ .cc-article .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; } .cc-article .setting-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; } .cc-article .setting-card h4 { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; } .cc-article .setting-card p { font-size: 12px; color: var(--text-mid); line-height: 1.5; } .cc-article .setting-card .tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; margin-bottom: 6px; } .cc-article .tag-orange { background: rgba(244,123,32,0.1); color: var(--orange); } .cc-article .tag-blue { background: rgba(74,158,255,0.1); color: var(--blue); } .cc-article .tag-green { background: rgba(46,204,113,0.1); color: var(--green); } /* Quick ref table */ .cc-article .quick-ref-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cc-article .quick-ref-table th { background: var(--navy); color: rgba(255,255,255,0.8); padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; } .cc-article .quick-ref-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .cc-article .quick-ref-table td code { background: var(--code-bg); color: var(--orange); padding: 2px 6px; border-radius: 4px; font-size: 12px; } .cc-article .quick-ref-table tr:last-child td { border-bottom: none; } .cc-article .quick-ref-table tr:hover td { background: rgba(244,123,32,0.03); } /* Steps */ .cc-article .steps { counter-reset: step; margin: 16px 0; } .cc-article .step { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; } .cc-article .step-num { flex-shrink: 0; width: 26px; height: 26px; background: var(--orange); color: white; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .cc-article .step-content { font-size: 13px; color: var(--text-mid); line-height: 1.6; padding-top: 3px; } .cc-article .step-content strong { color: var(--text-dark); } /* Inline code */ .cc-article code { background: rgba(74,158,255,0.08); color: #4a9eff; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-family: 'Inter', monospace; } /* Mistakes table */ .cc-article .mistakes-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cc-article .mistakes-table th { background: #fff5f5; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; color: var(--red); border-bottom: 2px solid rgba(231,76,60,0.2); } .cc-article .mistakes-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .cc-article .mistakes-table tr:last-child td { border-bottom: none; } .cc-article .mistakes-table .bad { color: var(--red); font-family: monospace; font-size: 12px; } .cc-article .mistakes-table .good { color: var(--green); font-family: monospace; font-size: 12px; } /* =========================== Integration Guides — Index Page =========================== */ /* Search icon inside search bar */ .search-form .search-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--tenzo-orange); pointer-events: none; } /* Ensure search-form has relative positioning for icon */ .search-form { position: relative; } /* Make category cards clickable when used as links */ a.category-card { text-decoration: none; display: block; } .ig-index { padding: 2rem 0 3rem; } /* Filter tabs */ .ig-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .ig-filter-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 100px; background: #F8DDC9; /* Light/Secondary/Grey */ font-family: var(--tenzo-font); font-size: 0.88rem; font-weight: 600; color: #1D1B20; /* Light/Text/Primary */ cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .ig-filter-btn:hover { background: #f3cdb1; } .ig-filter-btn.active { background: #FF9C5C; /* Light/Primary/Contrast */ border-color: #FF9C5C; color: #1D1B20; /* Light/Text/Primary */ } /* Counts inherit the label's font / colour / weight, displayed in (brackets) */ .ig-filter-count { font: inherit; color: inherit; opacity: 1; } /* Results info */ .ig-results-info { font-size: 0.85rem; color: var(--tenzo-text-light); margin-bottom: 1rem; } /* Card grid */ .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* Individual card */ .ig-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; position: relative; } .ig-card:hover { box-shadow: var(--tenzo-shadow-hover); transform: translateY(-2px); border-color: var(--tenzo-orange); } /* Logo area */ .ig-card-logo { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .ig-card-logo img { max-width: 48px; max-height: 48px; object-fit: contain; } .ig-card-initials { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; color: var(--tenzo-white); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; } /* Card body */ .ig-card-body { flex: 1; min-width: 0; } .ig-card-body h3 { font-size: 0.95rem; font-weight: 600; color: var(--tenzo-text); margin: 0 0 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-card-section { font-size: 0.78rem; color: var(--tenzo-text-light); } /* Arrow */ .ig-card-arrow { color: var(--tenzo-orange); font-size: 1.1rem; opacity: 0; transition: opacity 0.15s ease; flex-shrink: 0; } .ig-card:hover .ig-card-arrow { opacity: 1; } /* No results */ .ig-no-results { text-align: center; padding: 3rem 1rem; color: var(--tenzo-text-light); } /* =========================== Responsive =========================== */ @media (max-width: 768px) { .category-grid { grid-template-columns: 1fr; padding: 0 1rem; } .helpcentre-hero { padding: 2rem 1rem; } .helpcentre-hero h1 { font-size: 1.5rem; } .article-content { padding: 1.5rem 1rem; } .dev-doc-layout, .card-creator-layout { grid-template-columns: 1fr; } .dev-doc-sidebar, .card-creator-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--tenzo-border); } .dev-doc-main, .card-creator-main { padding: 1.5rem 1rem; } .dev-hero-grid { grid-template-columns: 1fr; } .dev-cards { grid-template-columns: 1fr; } .ig-grid { grid-template-columns: 1fr; } .ig-filters { gap: 0.35rem; } .ig-filter-btn { font-size: 0.8rem; padding: 0.4rem 0.75rem; } .docs-featured-grid { grid-template-columns: 1fr; } .site-header { padding: 0 1rem; } .header-logo img { height: 24px; } .header-nav { gap: 0; } .header-nav .nav-link { font-size: 0.75rem; padding: 0.4rem 0.4rem; } .dev-container { padding: 0 1rem; } .helpcentre-hero { padding: 2rem 1rem; } .ig-index { padding: 1.5rem 1rem 2rem; } .ig-grid { grid-template-columns: 1fr; gap: 0.5rem; } .ig-card { padding: 0.75rem; gap: 0.6rem; min-width: 0; } .ig-card-body h3 { white-space: normal; } .ig-card-logo { width: 36px; height: 36px; } .ig-card-logo img { max-width: 36px; max-height: 36px; } .ig-card-initials { width: 36px; height: 36px; font-size: 0.85rem; } .ig-card-body h3 { font-size: 0.82rem; } .ig-card-section { display: none; } .ig-card-arrow { display: none; } } @media (max-width: 420px) { .ig-grid { grid-template-columns: 1fr; } } /* =========================== Support CTA — Figma frame 110:5163 bg #fee3d7, padding 40px 36px, 20px radius, button #ff8001 + #331b00 text =========================== */ .support-cta { background: var(--tenzo-orange-peach); /* #fee3d7 */ border-radius: 20px; margin: 24px 120px 40px; max-width: 1040px; padding: 36px 40px; box-sizing: border-box; } @media (min-width: 1280px) { .support-cta { margin: 24px auto 40px; } } .support-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .support-cta-text { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 6px; } .support-cta-title { font-family: var(--tenzo-font-heading); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--tenzo-text); margin: 0; letter-spacing: -0.5px; } .support-cta-subtitle { margin: 0; font-size: 14px; line-height: 20px; color: var(--tenzo-text-light); max-width: 520px; } .support-cta-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: var(--tenzo-orange); color: #331b00; border-radius: 24px; font-size: 16px; line-height: 1; font-weight: 500; font-family: var(--tenzo-font); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .support-cta-btn::after { content: ""; width: 24px; height: 24px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .support-cta-btn:hover { background: var(--tenzo-orange-dark); color: #331b00; transform: translateY(-1px); } @media (max-width: 900px) { .support-cta { padding: 28px 24px; margin: 24px 24px 40px; } .support-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; } .support-cta-title { font-size: 20px; line-height: 28px; } } /* Inside the integration-guide single-article column, the CTA sits in the same 1fr grid track as the article + helpful-widget. Drop the global page-level margin/max-width so it spans the article column instead of centering against the full viewport. */ .ig-single-article .support-cta { margin: 24px 0 40px; max-width: none; } /* =========================== "Did this answer your question?" feedback bar Matches Figma node 50:119 — bg #f5f5f5, 16px bold heading, 42px emojis. =========================== */ .helpful-widget { margin: 3rem auto 0; padding: 2rem 1.5rem; background: #f5f5f5; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .helpful-widget-prompt { font-size: 1rem; font-weight: 700; color: var(--tenzo-text); margin: 0; font-family: var(--tenzo-font-heading); } .helpful-widget-options { display: inline-flex; gap: 2rem; } .helpful-widget-btn { border: none; background: transparent; cursor: pointer; font-size: 2.625rem; /* 42px per Figma */ line-height: 1; padding: 0; transition: transform 0.15s ease, filter 0.15s ease; filter: grayscale(0); } .helpful-widget-btn img.emoji { width: 42px !important; height: 42px !important; margin: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; display: inline-block !important; vertical-align: middle !important; } .helpful-widget-btn:hover:not(:disabled) { transform: scale(1.15); } .helpful-widget-btn:disabled { cursor: default; filter: grayscale(0.6); opacity: 0.55; } .helpful-widget-btn.selected, .helpful-widget-btn.selected:disabled { filter: grayscale(0); opacity: 1; transform: scale(1.1); } .helpful-widget-thanks { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--tenzo-orange-dark); font-weight: 500; } /* =========================== Related articles — divider row list with chevrons (Figma frame 72:247) Each row 68px tall, 24px horizontal padding, 0.5px divider between rows. =========================== */ .related-articles-divider { border: none; border-top: 1px solid #f1f1f1; margin: 40px 0 24px; } .related-articles-title { font-family: var(--tenzo-font-heading); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--tenzo-text); margin: 0 0 16px; } .related-articles-list { list-style: none; padding: 0; margin: 0; background: var(--tenzo-white); border-top: 0.5px solid #e9e9eb; border-bottom: 0.5px solid #e9e9eb; } .related-articles-row { margin: 0; padding: 0; border-bottom: 0.5px solid #e9e9eb; } .related-articles-row:last-child { border-bottom: none; } .related-articles-row a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; color: var(--tenzo-text); font-size: 16px; line-height: 24px; font-weight: 400; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; min-height: 68px; box-sizing: border-box; } .related-articles-row a:hover { background: var(--tenzo-light-stone); color: var(--tenzo-text); } .related-articles-text { flex: 1; min-width: 0; } .related-articles-chevron { flex-shrink: 0; color: var(--tenzo-text-light); transition: color 0.15s ease, transform 0.15s ease; } .related-articles-row a:hover .related-articles-chevron { color: var(--tenzo-orange); transform: translateX(2px); } /* =========================== FAQ page template =========================== */ .faq-page { background: var(--tenzo-bg); min-height: calc(100vh - 64px); padding-bottom: 0; } .faq-hero { background: linear-gradient(180deg, var(--tenzo-white) 0%, var(--tenzo-light-stone) 100%); border-bottom: 1px solid var(--tenzo-border); padding: 4rem 2rem 3rem; text-align: center; } .faq-hero h1 { font-family: var(--tenzo-font-heading); font-size: 2.5rem; font-weight: 700; color: var(--tenzo-text); margin: 0 0 0.6rem; letter-spacing: -0.02em; line-height: 1.1; } .faq-hero p { font-size: 1.05rem; color: var(--tenzo-text-mid); margin: 0; line-height: 1.5; } .faq-list { max-width: 820px; margin: 3rem auto 0; padding: 0 2rem; display: flex; flex-direction: column; gap: 0.6rem; } .faq-item { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); box-shadow: var(--tenzo-shadow-card); overflow: hidden; transition: border-color 0.15s ease; } .faq-item[open] { border-color: var(--tenzo-orange-tint-3); } .faq-item summary { padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1rem; font-weight: 600; color: var(--tenzo-text); transition: background 0.15s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--tenzo-orange); font-size: 1.4rem; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; } .faq-item[open] summary::after { content: "−"; } .faq-item summary:hover { background: var(--tenzo-light-stone); } .faq-answer { padding: 0 1.4rem 1.25rem; font-size: 0.95rem; line-height: 1.65; color: var(--tenzo-text-mid); } .faq-answer p:first-child { margin-top: 0; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ul, .faq-answer ol { padding-left: 1.25rem; margin: 0.5rem 0; } .faq-answer li { margin-bottom: 0.3rem; } @media (max-width: 768px) { .faq-hero { padding: 3rem 1.25rem 2rem; } .faq-hero h1 { font-size: 1.85rem; } .faq-list { padding: 0 1rem; } } /* =========================== Footer responsive =========================== */ @media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .footer-col-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .site-footer { padding: 2.5rem 1.25rem 1.25rem; } .footer-cols { grid-template-columns: 1fr; gap: 1.75rem; } } /* =========================== Header responsive — small screens =========================== */ /* Hamburger toggle — hidden on desktop, shown via the mobile @media below. */ .header-nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; padding: 0.5rem; margin: 0 0 0 auto; color: var(--tenzo-text); cursor: pointer; border-radius: 8px; } /* Open-state background (DS Light/Secondary/Neutrals/8p). */ .header-nav-toggle[aria-expanded="true"] { background: rgba(0, 0, 0, 0.08); } /* Pointer-capable devices only — iOS sticks :hover after tap, which kept the grey background visible after the menu closed (the "selected state never clears" bug from Rafael). */ @media (hover: hover) { .header-nav-toggle:hover { background: rgba(0, 0, 0, 0.08); } } @media (max-width: 768px) { .site-header { height: auto; min-height: 56px; } .header-inner { gap: 0.75rem; height: auto; min-height: 56px; flex-wrap: wrap; align-content: flex-start; } /* First row (logo + hamburger) stays fixed-height so the logo doesn't jump vertically when the nav opens on row 2. */ .header-logo, .header-nav-toggle { height: 56px; } .header-cta { height: 32px; padding: 0 0.85rem; font-size: 0.78rem; } .header-nav-toggle { display: inline-flex; } .header-nav { display: none; order: 99; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 0 0.75rem; border-top: 1px solid var(--tenzo-border); } .header-nav.is-open { display: flex; } .header-nav .nav-link { padding: 0.85rem 0.5rem; font-size: 1rem; } .header-nav .nav-link.active::after { left: 0; right: auto; width: 3px; top: 0.85rem; bottom: 0.85rem; height: auto; } } /* =========================== Docs hero responsive =========================== */ @media (max-width: 768px) { .docs-hero { padding: 2rem 1rem 1.5rem; } .docs-hero h1 { font-size: 2rem; } .docs-hero-subtitle { font-size: 1rem; } .docs-featured { padding: 2rem 1rem 1rem; } .docs-featured-grid { grid-template-columns: 1fr; } .dev-hero { padding: 1.5rem 1rem; } .support-cta { margin: 1.25rem 1rem 1.5rem; padding: 1.5rem 1.25rem; } } /* =========================== Developer Portal — What's new timeline =========================== */ .dev-section-subtitle { font-size: 0.95rem; color: var(--tenzo-text-mid); margin: 0 0 1.25rem; line-height: 1.5; } .dev-timeline { background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); padding: 0.5rem 1.5rem; } .dev-timeline-item { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--tenzo-border); } .dev-timeline-item:last-child { border-bottom: none; } .dev-timeline-date { font-size: 0.85rem; font-weight: 600; color: var(--tenzo-text-light); padding-top: 0.15rem; } .dev-timeline-body h3 { font-size: 1rem; font-weight: 700; color: var(--tenzo-text); margin: 0 0 0.25rem; } .dev-timeline-body p { font-size: 0.9rem; color: var(--tenzo-text-mid); margin: 0; line-height: 1.55; } .dev-timeline-body p a { color: #331B00; /* Light/Text/Button */ font-weight: 500; text-decoration: underline; } @media (max-width: 600px) { .dev-timeline-item { grid-template-columns: 1fr; gap: 0.4rem; } } /* =========================== Docs sections (popular topics, browse by topic) Figma frame 33:485 — 1040px wide content, 120px page padding =========================== */ .docs-section { background: var(--tenzo-bg); padding: 40px 120px 24px; } .docs-section + .docs-section { padding-top: 24px; } .docs-section-inner { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } /* Section heading — Manrope Bold 24px, lineHeight 32px */ .docs-section-heading { font-family: var(--tenzo-font-heading); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--tenzo-text); margin: 0; } /* =========================== Topic grid — "Browse by topic" =========================== */ .topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } .topic-card { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .topic-card:hover { border-color: var(--tenzo-orange); transform: translateY(-1px); } .topic-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--tenzo-orange-light); color: var(--tenzo-text); display: inline-flex; align-items: center; justify-content: center; } .topic-card-icon svg { width: 22px; height: 22px; } .topic-card-body { display: flex; flex-direction: column; min-width: 0; } .topic-card-title { font-size: 0.95rem; font-weight: 600; color: var(--tenzo-text); line-height: 1.25; } .topic-card-count { font-size: 0.82rem; color: var(--tenzo-text-light); margin-top: 0.15rem; } @media (max-width: 900px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .topic-grid { grid-template-columns: 1fr; } } /* =========================== Topic page (single doc category) — list of articles =========================== */ .topic-page-hero { background: var(--tenzo-white); border-bottom: 1px solid var(--tenzo-border); padding: 2.5rem 2rem 2rem; } .topic-page-hero-inner { max-width: 880px; margin: 0 auto; } .topic-breadcrumbs { font-size: 0.88rem; color: var(--tenzo-text-light); margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .topic-breadcrumbs a { color: var(--tenzo-text-light); } .topic-breadcrumbs a:hover { color: var(--tenzo-orange); } .topic-breadcrumbs .sep { color: var(--tenzo-text-light); opacity: 0.6; } .topic-page-hero h1 { font-family: var(--tenzo-font-heading); font-size: 2rem; font-weight: 700; color: var(--tenzo-text); margin: 0 0 0.4rem; letter-spacing: -0.02em; line-height: 1.15; } .topic-page-hero-desc { font-size: 1rem; color: var(--tenzo-text-mid); margin: 0; line-height: 1.5; } .topic-articles { background: var(--tenzo-bg); padding: 2rem; } .topic-articles-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; } .topic-article-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); color: var(--tenzo-text); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .topic-article-row::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .topic-article-row:hover { border-color: var(--tenzo-orange); transform: translateY(-1px); color: var(--tenzo-text); } .topic-article-row:hover::after { background-image: url("data:image/svg+xml;utf8,"); } /* =========================== Integration guide single article — centred, no sidebar =========================== */ /* Integration guide single-article page: sidebar + main column layout matching Figma 230:450 — 256px sidebar, 1px vertical divider, content column up to ~956px wide centred in the remaining space. */ .ig-page-layout { display: grid; grid-template-columns: 256px 1px 1fr; min-height: calc(100vh - 72px); background: var(--tenzo-white); } .ig-page-layout > .ig-sidebar { grid-column: 1; } .ig-page-layout::after { content: ""; grid-column: 2; background: #e0e0e0; } .ig-page-layout > .ig-single-article { grid-column: 3; } .ig-sidebar { background: var(--tenzo-white); padding: 16px 16px 24px; overflow-y: auto; position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 72px); } .ig-sidebar-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: rgba(0, 0, 0, 0.04); border-radius: 8px; color: #929194; margin-bottom: 8px; } .ig-sidebar-search input { flex: 1; background: transparent; border: none; font-family: var(--tenzo-font); font-size: 14px; color: var(--tenzo-text); outline: none; } .ig-sidebar-search input::placeholder { color: #929194; } .ig-sidebar-section { margin-top: 16px; } .ig-sidebar-section-label { margin: 0 0 6px; padding: 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #929194; text-transform: uppercase; } .ig-sidebar-list { list-style: none; margin: 0; padding: 0; } .ig-sidebar-item { list-style: none; } .ig-sidebar-item a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px 9px 4px; color: var(--tenzo-text); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 4px; } .ig-sidebar-item a:hover { background: #f4f4f4; } .ig-sidebar-item.is-current a { background: #f0f0f0; color: var(--tenzo-orange); font-weight: 600; } .ig-sidebar-chevron { flex-shrink: 0; color: #929194; opacity: 0.8; } /* Back link above the breadcrumb, per Figma. */ .ig-single-article .ig-back-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--tenzo-text); font-size: 14px; font-weight: 700; text-decoration: none; } .ig-single-article .ig-back-link:hover { color: var(--tenzo-orange); } .ig-single-article { max-width: 956px; margin: 0 auto; padding: 32px 40px 64px; background: var(--tenzo-white); box-sizing: content-box; } @media (max-width: 1024px) { .ig-page-layout { grid-template-columns: 1fr; } .ig-page-layout > .ig-sidebar, .ig-page-layout::after { display: none; } } /* Article body images — centred, capped at column width. JS sets a tighter per-image max based on naturalWidth/2 (compensates for retina captures). */ .ig-single-article .dev-doc-content img:not(.ig-title-logo):not(.ig-col-logo):not(.emoji), .ig-single-article .article-content img:not(.ig-title-logo):not(.ig-col-logo):not(.emoji), .dev-doc-content img:not(.emoji):not(.ig-title-logo):not(.ig-col-logo) { display: block; max-width: 100%; height: auto; margin: 16px auto; border-radius: 8px; } /* Inline column-header logos in mapping tables. Tall/square logos (eg Centegra) need vertical room or they end up looking tiny next to wide logos like Tenzo. */ .ig-single-article .ig-col-logo { max-height: 42px; width: auto; max-width: 165px; object-fit: contain; vertical-align: middle; margin: 0; border-radius: 0; } /* Centre any wrapping

(legacy Zendesk class) */ .ig-single-article .wysiwyg-text-align-center { text-align: center; } /* Legacy wysiwyg-color-black spans should inherit normal text color */ .ig-single-article .wysiwyg-color-black { color: inherit; } .ig-single-article .wysiwyg-underline { text-decoration: none; } .ig-single-article .topic-breadcrumbs { margin-bottom: 24px; } .ig-single-article .dev-doc-content, .ig-single-article .article-content { max-width: 1040px; margin: 0; padding: 0; } @media (max-width: 1240px) { .ig-single-article { padding: 32px 32px; } } @media (max-width: 768px) { .ig-single-article { padding: 24px 16px; } } /* =========================== Search results — mirrors landing layout =========================== */ .search-results-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; } .search-empty { max-width: 880px; margin: 1rem auto; font-size: 1rem; color: var(--tenzo-text-mid); } .search-empty a { color: var(--tenzo-orange-dark); text-decoration: none; } .search-empty a:hover { text-decoration: underline; } .search-pagination { max-width: 880px; margin: 1.5rem auto; text-align: center; } /* =========================== Article page — read-time pill + breadcrumbs =========================== */ .article-meta-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; background: var(--tenzo-light-stone); color: var(--tenzo-text-mid); border-radius: 999px; font-size: 0.82rem; font-weight: 500; margin-bottom: 1rem; } .article-meta-pill svg { width: 14px; height: 14px; } /* Hide BetterDocs's default category-archive layout (we render our own) */ body.tax-doc_category .betterdocs-category-grid-section, body.tax-doc_category .betterdocs-archive-area, body.tax-doc_category .betterdocs-content-area { display: none; } /* =========================== Single article — hide BetterDocs default chrome (header, sidebar, breadcrumb, search) =========================== */ body.single-docs .betterdocs-page-header, body.single-docs .betterdocs-sidebar, body.single-docs .betterdocs-toc-wrapper, body.single-docs .betterdocs-search-form, body.single-docs .betterdocs-searchform, body.single-docs .betterdocs-search-form-wrap, body.single-docs #betterdocs-breadcrumb, body.single-docs .betterdocs-breadcrumb, body.single-docs .betterdocs-breadcrumbs, body.single-docs .betterdocs-doc-stats, body.single-docs .betterdocs-doc-feedback, body.single-docs .betterdocs-feedback-form-wrapper, body.single-docs .betterdocs-content-share-wrapper, body.single-docs .docs-single-meta, body.single-docs .betterdocs-doc-share, body.single-docs .betterdocs-doc-still-stuck, body.single-docs .betterdocs-pre-next-nav, body.single-docs .betterdocs-prev-next-navigation, body.single-docs .docs-feedback, body.single-docs .docs-feedback-form, body.single-docs .docs-feeling, body.single-docs .docs-feeling-wrap, body.single-docs .docs-share, body.single-docs .docs-stuck, body.single-docs .docs-stuck-link, body.single-docs .docs-stuck-wrap, body.single-docs .docs-meta, body.single-docs .docs-meta-info, body.single-docs .betterdocs-doc-share-wrap, body.single-docs .doc-share-icon, body.single-docs .doc-share-icons, body.single-docs .betterdocs-still-stuck, body.single-docs .betterdocs-need-help, body.single-docs .prev-next-nav, body.single-docs .docs-nav, body.single-docs .docs-navigation, body.single-docs .docs-pagination, body.single-docs .betterdocs-entry-footer, body.single-docs .betterdocs-article-reactions, body.single-docs .betterdocs-social-share, body.single-docs .feedback-update-form, body.single-docs .feedback-form, body.single-docs .update-date, body.single-docs .betterdocs-category-grid-wrapper, body.single-docs .betterdocs-category-grid-inner-wrapper, body.single-docs .betterdocs-category-grid-section, body.single-docs .betterdocs-sidebar.betterdocs-shortcode, body.single-docs .betterdocs-sidebar-content, body.single-docs .betterdocs-category-sidebar, body.single-docs .sticky-toc-container, body.single-docs .betterdocs-toc, body.single-docs .toc-list { display: none !important; } /* Some themes render prev/next nav as a UL outside known classes - hide last UL in the entry-content when it follows our injected helpful widget. */ body.single-docs .helpful-widget ~ ul, body.single-docs .helpful-widget ~ nav, body.single-docs .helpful-widget ~ .betterdocs-prev-next, body.single-docs .helpful-widget ~ * ul.betterdocs-prev-next { display: none !important; } /* Hide BetterDocs's read-time chip — we render our own */ body.single-docs .betterdocs-doc-reading-time, body.single-docs .betterdocs-reading-time, body.single-docs .docs-meta-reading-time, body.single-docs .reading-time, body.single-docs .reading-time.betterdocs { display: none !important; } /* Hide BetterDocs print/PDF icon */ body.single-docs .betterdocs-print-pdf, body.single-docs .docs-print-pdf { display: none !important; } /* Single article — center the body content full-width, no sidebar, white bg */ body.single-docs { background: var(--tenzo-white) !important; } body.single-docs .betterdocs-wrapper, body.single-docs .betterdocs-single-wrapper, body.single-docs .betterdocs-content-wrapper { background: var(--tenzo-white) !important; display: block !important; max-width: 100% !important; } body.single-docs .betterdocs-content-area, body.single-docs #betterdocs-single-main, body.single-docs .betterdocs-doc-area { width: 100% !important; max-width: 880px !important; margin: 0 auto !important; padding: 2.5rem 2rem 3rem !important; background: var(--tenzo-white) !important; } body.single-docs .betterdocs-entry-content, body.single-docs #betterdocs-single-content { background: transparent !important; padding: 0 !important; border: none !important; } body.single-docs .betterdocs-entry-header { padding: 0 !important; background: transparent !important; border-bottom: none !important; text-align: left !important; } /* Article body — keep images inside column. Exclude WP emoji icons (.emoji) and any decorative images (.helpful-widget-btn img) that have their own size. */ body.single-docs .betterdocs-entry-content img:not(.emoji), body.single-docs .betterdocs-content img:not(.emoji), body.single-docs .article-content img:not(.emoji), body.single-docs #betterdocs-single-content img:not(.emoji), body.single-docs figure img:not(.emoji), body.single-docs .wp-block-image img:not(.emoji) { max-width: 100% !important; height: auto !important; width: auto !important; display: block; margin: 1rem auto; border-radius: var(--tenzo-radius); box-sizing: border-box; } body.single-docs figure, body.single-docs .wp-block-image { max-width: 100% !important; margin: 1rem 0 !important; } /* Tables in articles — allow horizontal scroll if too wide */ body.single-docs .betterdocs-entry-content, body.single-docs #betterdocs-single-content { overflow-wrap: break-word; word-wrap: break-word; } body.single-docs .betterdocs-entry-content table, body.single-docs #betterdocs-single-content table { display: block; overflow-x: auto; max-width: 100%; } /* iframes (videos etc.) responsive */ body.single-docs iframe { max-width: 100% !important; } /* Article title — sentence case, dark text */ body.single-docs h1.betterdocs-entry-title, body.single-docs #betterdocs-entry-title, body.single-docs .docs-single-title h1, body.single-docs h1.entry-title, body.single-docs .betterdocs-doc-title, body.single-docs .betterdocs-single-doc-title { font-family: var(--tenzo-font-heading) !important; font-size: 2rem !important; font-weight: 700 !important; color: var(--tenzo-text) !important; text-transform: none !important; text-align: left !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; margin: 0 0 1rem !important; border-bottom: none !important; padding-bottom: 0 !important; } /* =========================== Live search typeahead dropdown =========================== */ .search-typeahead { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--tenzo-white); border: 1px solid var(--tenzo-border); border-radius: var(--tenzo-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); max-height: 380px; overflow-y: auto; } .search-typeahead-item, .search-typeahead-more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; color: var(--tenzo-text); text-decoration: none; border-bottom: 1px solid var(--tenzo-border); font-size: 0.9rem; line-height: 1.35; } .search-typeahead-item:last-child, .search-typeahead-more:last-child { border-bottom: none; } .search-typeahead-item:hover, .search-typeahead-item.is-active, .search-typeahead-more:hover { background: var(--tenzo-orange-light, #fff1e6); color: var(--tenzo-text); } .search-typeahead-title { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-typeahead-meta { flex-shrink: 0; font-size: 0.75rem; color: var(--tenzo-text-light); text-transform: lowercase; } .search-typeahead-empty { padding: 0.9rem; font-size: 0.88rem; color: var(--tenzo-text-light); } .search-typeahead-more { font-weight: 600; color: var(--tenzo-orange-dark); font-size: 0.85rem; } /* =========================== Mobile padding overrides — placed at end of file so they win over the later-defined base .docs-section/.support-cta rules above. =========================== */ /* Cap any inline H1 image (older Zendesk guides put the POS logo inside

) so it doesn't render at its natural 500px size on desktop. */ .ig-single-article h1 img, .ig-single-article .wysiwyg-text-align-center img:not(.ig-col-logo) { max-width: 180px !important; height: auto !important; display: inline-block; vertical-align: middle; } /* Zendesk-imported integration guides wrap tables in
. Style the figure to match the modern .ig-mapping-table rounded-container look: bordered, 8px radius, sized to fit the column. */ .ig-single-article figure.wysiwyg-table, .ig-single-article .article-content figure { margin: 1.5rem 0; max-width: 100%; width: 100% !important; height: auto !important; overflow-x: auto; border: 1px solid #bdbdbd; border-radius: 8px; background: var(--tenzo-white); } .ig-single-article figure.wysiwyg-table > table { max-width: 100%; width: 100% !important; height: auto !important; border-collapse: separate; border-spacing: 0; background: transparent; /* The figure now provides the border/rounding — zero out the margin/border that the modern .ig-mapping-table rule sets, otherwise it shows as an empty strip above the first row inside the figure. */ margin: 0 !important; border: none !important; border-radius: 0 !important; } .ig-single-article figure.wysiwyg-table tr, .ig-single-article figure.wysiwyg-table td, .ig-single-article figure.wysiwyg-table th { height: auto !important; width: auto !important; background: transparent; } .ig-single-article figure.wysiwyg-table td { padding: 14px 16px !important; border-bottom: 0.5px solid #bdbdbd !important; border-right: none !important; border-left: none !important; border-top: none !important; vertical-align: middle !important; font-size: 14px; line-height: 20px; color: var(--tenzo-text); } .ig-single-article figure.wysiwyg-table tr:last-child td { border-bottom: none !important; } .ig-single-article figure.wysiwyg-table td:first-child { width: 42%; font-weight: 400; } /* Older guides sometimes wrap their inline "Tenzo + POS logo" comparison header in a

right under the H2. Constrain those logos. */ .ig-single-article .article-content p img.wysiwyg-image-resized, .ig-single-article .article-content p > img[alt*="logo"], .ig-single-article .article-content p > img[alt*="Logo"] { max-width: 140px !important; height: auto !important; vertical-align: middle; margin: 0 8px 0 0; } @media (max-width: 768px) { .docs-section { padding: 1.5rem 0.75rem 0.75rem; } .docs-section + .docs-section { padding-top: 0.5rem; } /* Integration-guide title image (the POS logo at the top of each guide) — Zendesk renders it via

; cap it on mobile so it doesn't dominate the screen. */ .ig-single-article h1 img, .ig-single-article .wysiwyg-text-align-center img { max-width: min(100%, 240px) !important; height: auto !important; margin: 0 auto; } /* Tighten paragraph-embedded inline logos (Tenzo + POS comparison header) */ .ig-single-article p img { max-width: min(100%, 140px) !important; height: auto !important; } /* Article body — tighten padding, shrink title, and prevent any wide element (long URL, pre, table) from forcing horizontal page scroll. */ body.single-docs { overflow-x: hidden; } /* BetterDocs sets `.betterdocs-content-wrapper { width:100%; padding:2.5em 1.5em }` with default box-sizing: content-box — i.e. wrapper width = viewport + 48px on mobile. Force border-box + zero outer padding so the wrapper fits the viewport. */ body.single-docs .betterdocs-wrapper, body.single-docs .betterdocs-single-wrapper, body.single-docs .betterdocs-content-wrapper { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } body.single-docs .betterdocs-content-area, body.single-docs #betterdocs-single-main, body.single-docs .betterdocs-doc-area { box-sizing: border-box !important; padding: 1.25rem 1rem 2rem !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } body.single-docs h1.betterdocs-entry-title, body.single-docs #betterdocs-entry-title, body.single-docs .docs-single-title h1, body.single-docs h1.entry-title, body.single-docs .betterdocs-doc-title, body.single-docs .betterdocs-single-doc-title { font-size: 1.5rem !important; line-height: 1.25 !important; } body.single-docs .betterdocs-entry-content h2, body.single-docs #betterdocs-single-content h2 { font-size: 1.25rem !important; } body.single-docs .betterdocs-entry-content h3, body.single-docs #betterdocs-single-content h3 { font-size: 1.1rem !important; } body.single-docs .betterdocs-entry-content, body.single-docs #betterdocs-single-content { font-size: 0.95rem; word-break: break-word; } /* Code / pre blocks scroll horizontally rather than overflow. */ body.single-docs .betterdocs-entry-content pre, body.single-docs #betterdocs-single-content pre, body.single-docs .betterdocs-entry-content code, body.single-docs #betterdocs-single-content code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } /* Tighten the topic breadcrumb pill above the title. */ body.single-docs .topic-breadcrumbs { font-size: 0.78rem; flex-wrap: wrap; } } /* Article body links (BetterDocs articles + integration guides) — use the Light/Text/Button token #331B00 with underline. !important because BetterDocs's bundled stylesheets load AFTER ours and override unstyled links to their default blue. */ body.single-docs .betterdocs-entry-content a, body.single-docs #betterdocs-single-content a, body.single-docs .betterdocs-content a, body.single-docs .article-content a, .ig-single-article .dev-doc-content a, .ig-single-article .article-content a { color: #331B00 !important; text-decoration: underline !important; } body.single-docs .betterdocs-entry-content a:hover, body.single-docs #betterdocs-single-content a:hover, body.single-docs .betterdocs-content a:hover, body.single-docs .article-content a:hover, .ig-single-article .dev-doc-content a:hover, .ig-single-article .article-content a:hover { color: #FF8001 !important; } /* Don't restyle anchor links inside the helpful widget or related articles row. */ body.single-docs .helpful-widget a, body.single-docs .related-articles-list a { color: inherit; text-decoration: none; }