/* * Page styles: the docs layout. Owned by the docs page agent. * * Loaded on the docs landing (/docs/), fs_doc articles, docs search * (functions.php page-CSS map) and, from page-support.php, on /support/. * Every rule is scoped to body.fs-docs-layout. * * Artboards: "Formsieve Docs Home.dc.html" (7a), "Formsieve Docs * Article.dc.html" (7), "Formsieve Support.dc.html" (8, header and footer), * "Formsieve Mobile Pages.dc.html" 13e (docs article) and 13f (support). * * 1. Page, header, footer * 2. Docs search box * 3. Docs landing: hero, "Start here" cards, topic links * 4. Article layout: navigation, "All docs pages" panel, "On this page" * 5. Article content: type, lists, tables, code, previous / next * 6. Search results * 7. Tablet and phone */ /* ------------------------------------------------------------------ */ /* 1. Page, header, footer */ /* ------------------------------------------------------------------ */ body.fs-docs-layout, body.fs-docs-layout #ajax-content-wrap, body.fs-docs-layout .container-wrap { background: var(--fs-white); } /* Salient gives overflow: hidden, which makes it a scroll container and turns off position: sticky for "On this page". (overflow-x: hidden) still keeps the page from scrolling sideways; clip does not create a scroll container. */ body.fs-docs-layout { overflow: visible; overflow-x: clip; } /* Hyphenated abbreviations ("WP-CLI") never break after the hyphen. */ body.fs-docs-layout .fs-doc-nowrap { white-space: nowrap; } /* Salient pads search and post pages; the docs layout sets its own spacing. */ body.fs-site.fs-docs-layout .container-wrap.fs-docs-page, body.fs-site.fs-docs-layout .container-wrap.fs-docs-page > .main-content { padding-top: 0; padding-bottom: 0; } body.fs-docs-layout .fs-docs-header { position: relative; z-index: 10; background: var(--fs-white); border-bottom: var(--fs-border); color: var(--fs-navy); } /* Same content box as Salient's .container: 1240 px at 1440 (1420 − 2 × 90). */ body.fs-docs-layout .fs-docs-header__inner { box-sizing: border-box; display: flex; align-items: center; gap: 32px; max-width: 1420px; margin: 0 auto; padding: 18px 90px; } body.fs-docs-layout a.fs-docs-brand { flex: none; gap: 12px; color: var(--fs-navy); text-decoration: none; } body.fs-docs-layout a.fs-docs-brand:hover { color: var(--fs-navy); } body.fs-docs-layout .fs-docs-brand .fs-brand__word { font-size: 22px; } body.fs-docs-layout .fs-docs-brand__pill { display: block; padding: 4px 12px; border-radius: var(--fs-radius-pill); background: var(--fs-lavender); color: var(--fs-navy); font-family: var(--fs-font-body); font-size: 14px; font-weight: 700; line-height: normal; } body.fs-docs-layout a.fs-docs-brand:focus-visible { border-radius: 12px; } body.fs-docs-layout .fs-docs-header .fs-docs-header__search { flex: 1 1 auto; max-width: 520px; margin-left: auto; } body.fs-docs-layout a.fs-docs-header__support { display: flex; flex: none; align-items: center; min-height: var(--fs-target); color: var(--fs-navy); font-size: 16px; font-weight: 700; line-height: normal; text-decoration: underline; } body.fs-docs-layout a.fs-docs-header__support:hover { color: var(--fs-violet); } body.fs-docs-layout a.fs-docs-header__support[aria-current="page"] { text-underline-offset: 6px; text-decoration-thickness: 2px; } /* Docs landing: no search in the header (the hero has it). */ body.fs-docs-layout .fs-docs-header--landing a.fs-docs-header__support { margin-left: auto; } /* Light footer: the disclaimer only. */ body.fs-docs-layout .fs-docs-footer { background: var(--fs-tint); border-top: var(--fs-border); color: var(--fs-navy); } body.fs-docs-layout .fs-docs-footer__inner { box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; max-width: 1420px; margin: 0 auto; padding: 40px 90px; font-size: 13px; line-height: 1.65; } body.fs-docs-layout .fs-docs-footer p { margin: 0; padding: 0; font-size: 13px; line-height: 1.65; } body.fs-docs-layout .fs-docs-footer .fs-docs-footer__disclaimer { max-width: 980px; } body.fs-docs-layout .fs-docs-footer .fs-docs-footer__meta { font-size: 14px; } body.fs-docs-layout .fs-docs-footer a { color: var(--fs-violet); } body.fs-docs-layout .fs-docs-footer a:hover { color: var(--fs-navy); } /* ------------------------------------------------------------------ */ /* 2. Docs search box (header 48 px; landing hero 60 px with shadow) */ /* ------------------------------------------------------------------ */ body.fs-docs-layout .fs-docs-search { display: flex; margin: 0; padding: 0; } body.fs-docs-layout .fs-docs-search input.fs-docs-search__input { flex: 1 1 auto; box-sizing: border-box; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 20px; border: var(--fs-border); border-radius: var(--fs-radius-pill); background: var(--fs-white); box-shadow: none; color: var(--fs-navy); font-family: var(--fs-font-body); font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: 0; outline: none; -webkit-appearance: none; appearance: none; } body.fs-docs-layout .fs-docs-search input.fs-docs-search__input::placeholder { color: #757575; opacity: 1; } body.fs-docs-layout .fs-docs-search input.fs-docs-search__input:focus, body.fs-docs-layout .fs-docs-search input.fs-docs-search__input:focus-visible { border-color: var(--fs-navy); border-radius: var(--fs-radius-pill); outline: 3px solid var(--fs-violet); outline-offset: 3px; } body.fs-docs-layout .fs-docs-search--hero { width: 640px; max-width: 100%; margin: 0 auto; } body.fs-docs-layout .fs-docs-search--hero input.fs-docs-search__input { height: 60px; padding: 0 26px; font-size: 18px; box-shadow: var(--fs-shadow-panel); } /* ------------------------------------------------------------------ */ /* 3. Docs landing */ /* ------------------------------------------------------------------ */ /* Hero: lavender block 40 px below the header, centred. */ body.fs-docs-layout .wpb_row.fs-docs-hero { margin-top: 40px; } body.fs-docs-layout .wpb_column.fs-docs-hero__col > .vc_column-inner > .wpb_wrapper { align-items: center; text-align: center; } body.fs-docs-layout .wpb_column.fs-docs-hero__col > .vc_column-inner > .wpb_wrapper > .fs-docs-search { align-self: stretch; } body.fs-docs-layout .fs-docs-hero__text > .wpb_wrapper { align-items: center; } body.fs-docs-layout .row .col .fs-docs-hero__title, body.fs-docs-layout .fs-docs-hero__title { font-family: var(--fs-font-display); font-size: 52px; font-weight: 800; line-height: 1.25; letter-spacing: -.035em; } body.fs-docs-layout .row .col p.fs-docs-hero__lead, body.fs-docs-layout p.fs-docs-hero__lead { max-width: 620px; font-size: 18px; line-height: 1.6; } /* "Start here". */ body.fs-docs-layout .row .col .fs-docs-start__title, body.fs-docs-layout .fs-docs-start__title { font-family: var(--fs-font-display); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: 0; } body.fs-docs-layout a.fs-docs-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 244px; padding: 32px 28px; border-radius: var(--fs-radius-card); background: var(--fs-violet); color: var(--fs-white); text-decoration: none; transition: box-shadow .15s ease; } body.fs-docs-layout a.fs-docs-card--violet, body.fs-docs-layout a.fs-docs-card--violet:hover { background: var(--fs-violet); color: var(--fs-white); } body.fs-docs-layout a.fs-docs-card--orange, body.fs-docs-layout a.fs-docs-card--orange:hover { background: var(--fs-orange); color: var(--fs-navy); } body.fs-docs-layout a.fs-docs-card--lime, body.fs-docs-layout a.fs-docs-card--lime:hover { background: var(--fs-lime); color: var(--fs-navy); } body.fs-docs-layout a.fs-docs-card--lavender, body.fs-docs-layout a.fs-docs-card--lavender:hover { background: var(--fs-lavender); color: var(--fs-navy); } body.fs-docs-layout a.fs-docs-card--pink, body.fs-docs-layout a.fs-docs-card--pink:hover { background: var(--fs-pink); color: var(--fs-navy); } body.fs-docs-layout a.fs-docs-card--tint, body.fs-docs-layout a.fs-docs-card--tint:hover { background: var(--fs-tint); color: var(--fs-navy); } body.fs-docs-layout a.fs-docs-card:hover { box-shadow: var(--fs-shadow-hover); } body.fs-docs-layout a.fs-docs-card:focus-visible { border-radius: var(--fs-radius-card); } body.fs-docs-layout .fs-docs-card__num { font-family: var(--fs-font-display); font-size: 40px; font-weight: 800; line-height: 1; } body.fs-docs-layout .fs-docs-card__title { font-family: var(--fs-font-display); font-size: 20px; font-weight: 700; line-height: 1.25; } body.fs-docs-layout .fs-docs-card__text { font-size: 16px; line-height: 1.5; } /* Topic links: four columns under a 2 px rule. */ body.fs-docs-layout .wpb_row.fs-docs-topics { border-top: var(--fs-border); } body.fs-docs-layout .wpb_text_column.fs-docs-links > .wpb_wrapper { display: flex; flex-direction: column; gap: 6px; } body.fs-docs-layout .row .col .fs-docs-links__title, body.fs-docs-layout .fs-docs-links__title { margin: 0 0 8px; font-family: var(--fs-font-display); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0; } body.fs-docs-layout .wpb_text_column.fs-docs-links ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } body.fs-docs-layout .wpb_text_column.fs-docs-links li { margin: 0; padding: 0; list-style: none; line-height: normal; } body.fs-docs-layout .wpb_text_column.fs-docs-links a { display: flex; align-items: center; min-height: 36px; color: var(--fs-violet); font-size: 16px; line-height: 1.3; text-decoration: underline; } body.fs-docs-layout .wpb_text_column.fs-docs-links a:hover { color: var(--fs-navy); } /* A topic with one page per product: the topic name, then one indented link per product (as in the docs navigation). */ /* Block, not flex (as the links are): the label may hold a .fs-doc-nowrap span. 8 + 20 + 8 = the links' 36 px rows. */ body.fs-docs-layout .wpb_text_column.fs-docs-links .fs-docs-links__group { display: block; box-sizing: border-box; min-height: 36px; padding: 8px 0; color: var(--fs-navy); font-size: 16px; line-height: 1.25; } body.fs-docs-layout .wpb_text_column.fs-docs-links ul.fs-docs-links__sub { margin: 0 0 0 2px; padding-left: 14px; border-left: 2px solid var(--fs-lavender); } /* ------------------------------------------------------------------ */ /* 4. Article layout */ /* ------------------------------------------------------------------ */ body.fs-docs-layout .fs-doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; gap: 56px; align-items: start; padding: 48px 0 96px; } body.fs-docs-layout .fs-doc-nav { grid-column: 1; grid-row: 1; } body.fs-docs-layout .fs-doc { grid-column: 2; grid-row: 1; } body.fs-docs-layout .fs-doc-toc { grid-column: 3; grid-row: 1; } body.fs-docs-layout .fs-doc-panel { display: none; } /* Sidebar navigation. */ body.fs-docs-layout .fs-doc-nav { font-size: 15px; } body.fs-docs-layout .fs-doc-nav ul.fs-doc-nav__list, body.fs-docs-layout .fs-doc-nav ul.fs-doc-nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } body.fs-docs-layout .fs-doc-nav li { margin: 0; padding: 0; list-style: none; line-height: normal; } body.fs-docs-layout .fs-doc-nav a.fs-doc-nav__link, body.fs-docs-layout .fs-doc-nav .fs-doc-nav__label { box-sizing: border-box; display: flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: var(--fs-radius-small); color: var(--fs-navy); font-size: 15px; line-height: 1.3; text-decoration: none; } body.fs-docs-layout .fs-doc-nav a.fs-doc-nav__link:hover { background: var(--fs-tint); color: var(--fs-navy); } body.fs-docs-layout .fs-doc-nav a.fs-doc-nav__link.is-current, body.fs-docs-layout .fs-doc-nav a.fs-doc-nav__link.is-current:hover { background: var(--fs-violet); color: var(--fs-white); font-weight: 700; } body.fs-docs-layout .fs-doc-nav a.fs-doc-nav__link:focus-visible { border-radius: var(--fs-radius-small); } /* A page that exists once per product: group label, one indented entry per product. */ body.fs-docs-layout .fs-doc-nav ul.fs-doc-nav__sub { margin: 2px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--fs-lavender); } body.fs-docs-layout .fs-doc-nav .fs-doc-nav__section { margin: 24px 0 8px; padding: 0 14px; font-family: var(--fs-font-display); font-size: 13px; font-weight: 700; line-height: normal; } /* "On this page". */ body.fs-docs-layout .fs-doc-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 48px); overflow-y: auto; padding-left: 20px; border-left: 2px solid var(--fs-lavender); font-size: 15px; } body.admin-bar.fs-docs-layout .fs-doc-toc { top: 56px; max-height: calc(100vh - 80px); } body.fs-docs-layout .fs-doc-toc .fs-doc-toc__title { margin: 0; padding: 0; font-family: var(--fs-font-display); font-size: 13px; font-weight: 700; line-height: normal; } body.fs-docs-layout .fs-doc-toc ul.fs-doc-toc__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } body.fs-docs-layout .fs-doc-toc li { margin: 0; padding: 0; list-style: none; line-height: normal; } body.fs-docs-layout .fs-doc-toc a.fs-doc-toc__link { display: flex; align-items: center; min-height: 32px; color: var(--fs-navy); font-size: 15px; line-height: 1.3; text-decoration: underline; } body.fs-docs-layout .fs-doc-toc a.fs-doc-toc__link:hover, body.fs-docs-layout .fs-doc-toc a.fs-doc-toc__link.is-active { color: var(--fs-violet); } body.fs-docs-layout .fs-doc-toc a.fs-doc-toc__link.is-active { font-weight: 700; } /* ------------------------------------------------------------------ */ /* 5. Article content */ /* ------------------------------------------------------------------ */ body.fs-docs-layout .fs-doc { display: flex; flex-direction: column; gap: 24px; min-width: 0; max-width: 720px; } body.fs-docs-layout .fs-doc__crumbs { font-size: 14px; line-height: normal; } body.fs-docs-layout .fs-doc__crumbs a { color: var(--fs-violet); } body.fs-docs-layout .fs-doc__crumbs a:hover { color: var(--fs-navy); } body.fs-docs-layout h1.fs-doc__title { margin: 0; font-family: var(--fs-font-display); font-size: 44px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; } body.fs-docs-layout .fs-doc__content { display: flex; flex-direction: column; gap: 24px; min-width: 0; font-size: 17px; line-height: 1.65; } body.fs-docs-layout .fs-doc__content > * { min-width: 0; margin: 0; } body.fs-docs-layout .fs-doc__content p { margin: 0; padding: 0; font-size: 17px; line-height: 1.65; } /* The first paragraph is the lead. */ body.fs-docs-layout .fs-doc__content > p:first-child { font-size: 18px; } body.fs-docs-layout .fs-doc__content a { color: var(--fs-violet); text-decoration: underline; overflow-wrap: anywhere; } body.fs-docs-layout .fs-doc__content a:hover { color: var(--fs-navy); } body.fs-docs-layout .fs-doc__content h2, body.fs-docs-layout .fs-doc__content h3, body.fs-docs-layout .fs-doc__content h4, body.fs-docs-layout .fs-doc__content h5, body.fs-docs-layout .fs-doc__content h6 { margin: 0; padding: 0; color: var(--fs-navy); font-family: var(--fs-font-display); font-weight: 700; line-height: 1.25; letter-spacing: 0; scroll-margin-top: 24px; } body.fs-docs-layout .fs-doc__content h2 { margin-top: 16px; font-size: 24px; } body.fs-docs-layout .fs-doc__content h3 { margin-top: 8px; font-size: 19px; } body.fs-docs-layout .fs-doc__content h4, body.fs-docs-layout .fs-doc__content h5, body.fs-docs-layout .fs-doc__content h6 { font-family: var(--fs-font-body); font-size: 17px; } body.fs-docs-layout .fs-doc__content strong { font-weight: 700; } body.fs-docs-layout .fs-doc__content ul, body.fs-docs-layout .fs-doc__content ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 0 22px; } body.fs-docs-layout .fs-doc__content ul { list-style: disc; } body.fs-docs-layout .fs-doc__content ol { list-style: decimal; } body.fs-docs-layout .fs-doc__content li { margin: 0; padding: 0; font-size: 17px; line-height: 1.6; } body.fs-docs-layout .fs-doc__content li > ul, body.fs-docs-layout .fs-doc__content li > ol { margin-top: 10px; } body.fs-docs-layout .fs-doc__content li > p + p { margin-top: 10px; } body.fs-docs-layout .fs-doc__content li::marker { color: var(--fs-navy); } /* Inline code and code blocks (lavender tint inset, IBM Plex Mono). */ body.fs-docs-layout .fs-doc__content code { display: inline; padding: 1px 4px; border-radius: 6px; background: var(--fs-tint); color: var(--fs-navy); font-family: var(--fs-font-mono); font-size: .84em; line-height: inherit; white-space: normal; overflow-wrap: break-word; } body.fs-docs-layout .fs-doc__content pre { overflow-x: auto; margin: 0; padding: 20px 22px; border: 0; border-radius: var(--fs-radius-inner); background: var(--fs-tint); color: var(--fs-navy); font-family: var(--fs-font-mono); font-size: 14px; line-height: 1.6; white-space: pre; tab-size: 4; } body.fs-docs-layout .fs-doc__content pre code { display: block; overflow: visible; padding: 0; border-radius: 0; background: none; font-size: inherit; line-height: inherit; white-space: pre; overflow-wrap: normal; } /* Code blocks and tables are focusable scroll regions (tabindex="0"). */ body.fs-docs-layout .fs-doc__content pre:focus-visible { border-radius: var(--fs-radius-inner); } /* Callout ("If the connection fails, …"): a Markdown blockquote. */ body.fs-docs-layout .fs-doc__content blockquote { margin: 0; padding: 20px 22px; border: 0; border-radius: var(--fs-radius-inner); background: var(--fs-tint); color: var(--fs-navy); font-size: 16px; line-height: 1.6; } body.fs-docs-layout .fs-doc__content blockquote::before { content: none; } body.fs-docs-layout .fs-doc__content blockquote p { font-size: 16px; line-height: 1.6; } body.fs-docs-layout .fs-doc__content hr { height: 0; margin: 8px 0; border: 0; border-top: 2px solid var(--fs-lavender); background: none; } /* Tables: 2 px navy frame, radius 20, lavender header, hairline rows. Tables fit the article column at every width; should one ever be wider, it scrolls inside its frame, and a shadow on the edge shows that more of it is off to that side (the white covers scroll with the content). */ body.fs-docs-layout .main-content .fs-doc-table { overflow-x: auto; border: var(--fs-border); border-radius: var(--fs-radius-inner); background: linear-gradient(to right, var(--fs-white) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local, linear-gradient(to left, var(--fs-white) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(21, 7, 53, .25), rgba(21, 7, 53, 0)) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(21, 7, 53, .25), rgba(21, 7, 53, 0)) right center / 12px 100% no-repeat scroll, var(--fs-white); } body.fs-docs-layout .main-content .fs-doc-table:focus-visible { border-radius: var(--fs-radius-inner); } body.fs-docs-layout .main-content .fs-doc-table table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; background: none; font-size: 15px; line-height: 1.45; } body.fs-docs-layout .main-content .fs-doc-table table thead tr { background: var(--fs-lavender); } body.fs-docs-layout .main-content .fs-doc-table table tbody tr { border-top: 1px solid var(--fs-line); background: none; } body.fs-docs-layout .main-content .fs-doc-table table tr th, body.fs-docs-layout .main-content .fs-doc-table table tr td { padding: 14px 18px; border: 0; background: none; color: var(--fs-navy); font-size: 15px; line-height: 1.45; text-align: left; vertical-align: top; } body.fs-docs-layout .main-content .fs-doc-table th { font-weight: 700; } body.fs-docs-layout .main-content .fs-doc-table table tr td:first-child { font-weight: 700; } body.fs-docs-layout .main-content .fs-doc-table .fs-doc-align-center { text-align: center; } body.fs-docs-layout .main-content .fs-doc-table .fs-doc-align-right { text-align: right; } /* Inline code in a cell wraps at its spaces ("string $provider_id"), so the columns share the article width; identifiers stay whole. */ body.fs-docs-layout .main-content .fs-doc-table code { font-size: 13px; white-space: normal; overflow-wrap: break-word; } /* Previous / next. */ body.fs-docs-layout .fs-doc-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 32px; padding-top: 24px; border-top: var(--fs-border); } body.fs-docs-layout a.fs-doc-pager__link { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: var(--fs-border); border-radius: var(--fs-radius-inner); color: var(--fs-navy); text-decoration: none; transition: box-shadow .15s ease; } body.fs-docs-layout a.fs-doc-pager__link:hover { color: var(--fs-navy); box-shadow: var(--fs-shadow-hover); } body.fs-docs-layout a.fs-doc-pager__link:focus-visible { border-radius: var(--fs-radius-inner); } body.fs-docs-layout a.fs-doc-pager__link--next { grid-column: 2; align-items: flex-end; text-align: right; } body.fs-docs-layout .fs-doc-pager__dir { font-size: 14px; line-height: normal; } body.fs-docs-layout .fs-doc-pager__title { font-family: var(--fs-font-display); font-size: 17px; font-weight: 700; line-height: 1.25; } /* ------------------------------------------------------------------ */ /* 6. Search results */ /* ------------------------------------------------------------------ */ body.fs-docs-layout .fs-doc-results__count { margin: 0; font-size: 17px; line-height: 1.65; } body.fs-docs-layout ol.fs-doc-results { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } body.fs-docs-layout .fs-doc-result { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 18px 22px; border: var(--fs-border); border-radius: var(--fs-radius-inner); list-style: none; transition: box-shadow .15s ease; } body.fs-docs-layout .fs-doc-result:hover { box-shadow: var(--fs-shadow-hover); } body.fs-docs-layout a.fs-doc-result__title { color: var(--fs-navy); font-family: var(--fs-font-display); font-size: 17px; font-weight: 700; line-height: 1.3; text-decoration: underline; } /* The title link covers the whole card (a target far above 44 px). */ body.fs-docs-layout a.fs-doc-result__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } body.fs-docs-layout .fs-doc-result:hover a.fs-doc-result__title, body.fs-docs-layout a.fs-doc-result__title:hover { color: var(--fs-violet); } body.fs-docs-layout p.fs-doc-result__summary { margin: 0; font-size: 15px; line-height: 1.55; } body.fs-docs-layout .fs-doc-result__summary mark { padding: 0 2px; border-radius: 4px; background: var(--fs-lavender); color: var(--fs-navy); } /* ------------------------------------------------------------------ */ /* 7. Tablet and phone */ /* ------------------------------------------------------------------ */ /* 1000–1339: navigation + article, no "On this page" (below 1340 the three columns leave the article too narrow for the reference tables). */ @media (max-width: 1339px) { body.fs-docs-layout .fs-doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } body.fs-docs-layout .fs-doc-toc { display: none; } } /* Narrow article (1000–1099) and tablets: slimmer cells keep the widest tables inside the column. */ @media (max-width: 1099px) { body.fs-docs-layout .main-content .fs-doc-table table tr th, body.fs-docs-layout .main-content .fs-doc-table table tr td { padding-left: 14px; padding-right: 14px; } } /* ≤ 999: the navigation becomes the "All docs pages" panel above the article. */ @media (max-width: 999px) { body.fs-docs-layout .fs-docs-header__inner, body.fs-docs-layout .fs-docs-footer__inner { padding-left: 40px; padding-right: 40px; } body.fs-docs-layout .fs-doc-layout { display: block; max-width: 720px; padding: 24px 0 72px; } body.fs-docs-layout .fs-doc-nav { display: none; } body.fs-docs-layout .fs-doc-panel { display: block; margin: 0 0 32px; border: var(--fs-border); border-radius: var(--fs-radius-node); } body.fs-docs-layout .fs-doc-panel__toggle { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; color: var(--fs-navy); font-size: 15px; font-weight: 700; line-height: normal; list-style: none; cursor: pointer; } body.fs-docs-layout .fs-doc-panel__toggle::-webkit-details-marker { display: none; } body.fs-docs-layout .fs-doc-panel__toggle:focus-visible { border-radius: 14px; outline-offset: 2px; } body.fs-docs-layout .fs-doc-panel__icon::before { content: "+"; font-size: 20px; font-weight: 700; line-height: 1; } body.fs-docs-layout .fs-doc-panel[open] .fs-doc-panel__icon::before { content: "\2212"; } body.fs-docs-layout .fs-doc-panel__nav { padding: 0 16px 12px; font-size: 15px; } body.fs-docs-layout .fs-doc-panel ul.fs-doc-nav__list, body.fs-docs-layout .fs-doc-panel ul.fs-doc-nav__sub { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } body.fs-docs-layout .fs-doc-panel ul.fs-doc-nav__sub { margin-left: 2px; padding-left: 14px; border-left: 2px solid var(--fs-lavender); } body.fs-docs-layout .fs-doc-panel li { margin: 0; padding: 0; list-style: none; line-height: normal; } body.fs-docs-layout .fs-doc-panel a.fs-doc-nav__link, body.fs-docs-layout .fs-doc-panel .fs-doc-nav__label { display: flex; align-items: center; min-height: 40px; color: var(--fs-navy); font-size: 15px; line-height: 1.3; } body.fs-docs-layout .fs-doc-panel a.fs-doc-nav__link { text-decoration: underline; } body.fs-docs-layout .fs-doc-panel a.fs-doc-nav__link:hover { color: var(--fs-violet); } body.fs-docs-layout .fs-doc-panel a.fs-doc-nav__link.is-current { color: var(--fs-violet); font-weight: 700; } body.fs-docs-layout .fs-doc-panel .fs-doc-nav__section { margin: 12px 0 4px; font-family: var(--fs-font-display); font-size: 13px; font-weight: 700; line-height: normal; } body.fs-docs-layout .fs-doc { max-width: none; } /* Landing. */ body.fs-docs-layout .wpb_row.fs-docs-start { --fs-grid-row-gap: 12px; } body.fs-docs-layout .wpb_row.fs-docs-start .fs-docs-start__head { margin-bottom: 12px !important; } body.fs-docs-layout a.fs-docs-card { min-height: 0; } body.fs-docs-layout .wpb_row.fs-docs-topics.fs-cols-4 .wpb_column { width: calc((100% - var(--fs-grid-gap)) / 2) !important; } body.fs-docs-layout .wpb_row.fs-docs-topics { --fs-grid-gap: 32px; --fs-grid-row-gap: 32px; } } /* Phones (13e / 13f). */ @media (max-width: 690px) { body.fs-docs-layout .fs-docs-header__inner { flex-wrap: wrap; gap: 12px; padding: 14px 20px; } body.fs-docs-layout a.fs-docs-brand { --d: 6px; --py: 22px; gap: 10px; } body.fs-docs-layout a.fs-docs-brand .fs-brand__mark { width: 24px; height: 29px; } body.fs-docs-layout .fs-docs-brand .fs-brand__word { font-size: 19px; } body.fs-docs-layout .fs-docs-brand__pill { padding: 3px 10px; font-size: 13px; } body.fs-docs-layout a.fs-docs-header__support { order: 2; margin-left: auto; font-size: 15px; } body.fs-docs-layout .fs-docs-header .fs-docs-header__search { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; } body.fs-docs-layout .fs-docs-search input.fs-docs-search__input { height: 46px; padding: 0 18px; } /* Support (13f): no search; the current-page link keeps a 44 px target without making the 29 px brand row taller. */ body.fs-docs-layout .fs-docs-header--support .fs-docs-header__search { display: none; } body.fs-docs-layout .fs-docs-header--support a.fs-docs-header__support { margin-top: -7.5px; margin-bottom: -7.5px; text-underline-offset: 5px; text-decoration-thickness: from-font; } body.fs-docs-layout .fs-docs-footer__inner { gap: 12px; padding: 28px 20px; } body.fs-docs-layout .fs-docs-footer p { font-size: 12px; line-height: 1.6; } body.fs-docs-layout .fs-docs-footer .fs-docs-footer__meta { font-size: 13px; } body.fs-docs-layout .fs-docs-footer a { color: var(--fs-navy); } /* Landing. */ body.fs-docs-layout .wpb_row.fs-docs-hero { margin-top: 12px; } body.fs-docs-layout .row .col .fs-docs-hero__title, body.fs-docs-layout .fs-docs-hero__title { font-size: 34px; letter-spacing: -.03em; } body.fs-docs-layout .row .col p.fs-docs-hero__lead, body.fs-docs-layout p.fs-docs-hero__lead { font-size: 16px; } body.fs-docs-layout .fs-docs-search--hero input.fs-docs-search__input { height: 52px; padding: 0 20px; font-size: 16px; box-shadow: var(--fs-shadow-small); } body.fs-docs-layout .row .col .fs-docs-start__title, body.fs-docs-layout .fs-docs-start__title { font-size: 20px; } body.fs-docs-layout a.fs-docs-card { gap: 8px; padding: 24px 22px; border-radius: var(--fs-radius-card); } body.fs-docs-layout .fs-docs-card__num { font-size: 34px; } body.fs-docs-layout .fs-docs-card__title { font-size: 18px; } body.fs-docs-layout .fs-docs-card__text { font-size: 15px; } body.fs-docs-layout .wpb_row.fs-docs-topics { --fs-grid-gap: 20px; --fs-grid-row-gap: 28px; } body.fs-docs-layout .wpb_row.fs-docs-topics.fs-grid > .row_col_wrap_12 { flex-direction: row; align-items: flex-start; } body.fs-docs-layout .wpb_text_column.fs-docs-links a { font-size: 15px; } /* Article (13e). */ body.fs-docs-layout .fs-doc-layout { padding: 16px 0 40px; } body.fs-docs-layout .fs-doc-panel { margin-bottom: 24px; } body.fs-docs-layout .fs-doc { gap: 18px; } body.fs-docs-layout .fs-doc__crumbs { font-size: 13px; } body.fs-docs-layout h1.fs-doc__title { font-size: 32px; } body.fs-docs-layout .fs-doc__content { gap: 18px; font-size: 16px; } body.fs-docs-layout .fs-doc__content p, body.fs-docs-layout .fs-doc__content > p:first-child { font-size: 16px; line-height: 1.65; } body.fs-docs-layout .fs-doc__content h2 { margin-top: 8px; font-size: 20px; } body.fs-docs-layout .fs-doc__content h3 { margin-top: 4px; font-size: 17px; } body.fs-docs-layout .fs-doc__content ul, body.fs-docs-layout .fs-doc__content ol { gap: 6px; padding-left: 20px; } body.fs-docs-layout .fs-doc__content li { font-size: 15px; line-height: 1.55; } body.fs-docs-layout .fs-doc__content li > ul, body.fs-docs-layout .fs-doc__content li > ol { margin-top: 6px; } body.fs-docs-layout .fs-doc__content pre { padding: 16px 18px; border-radius: var(--fs-radius-node); font-size: 13px; } /* Tables become one card per row (column name before each value). */ body.fs-docs-layout .main-content .fs-doc-table { overflow: visible; border: 0; border-radius: 0; background: none; } body.fs-docs-layout .main-content .fs-doc-table table, body.fs-docs-layout .main-content .fs-doc-table tbody, body.fs-docs-layout .main-content .fs-doc-table tr, body.fs-docs-layout .main-content .fs-doc-table table tr td { display: block; width: auto; } body.fs-docs-layout .main-content .fs-doc-table table { background: none; } body.fs-docs-layout .main-content .fs-doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body.fs-docs-layout .main-content .fs-doc-table tbody { display: flex; flex-direction: column; gap: 10px; } body.fs-docs-layout .main-content .fs-doc-table table tbody tr { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: var(--fs-border); border-radius: var(--fs-radius-node); } body.fs-docs-layout .main-content .fs-doc-table table tr td { padding: 0; font-size: 14px; line-height: 1.45; text-align: left; } body.fs-docs-layout .main-content .fs-doc-table table tr td:first-child { font-size: 16px; } body.fs-docs-layout .main-content .fs-doc-table code { white-space: normal; } body.fs-docs-layout .main-content .fs-doc-table table tr td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 700; } body.fs-docs-layout .fs-doc-pager { gap: 10px; margin-top: 12px; padding-top: 0; border-top: 0; } body.fs-docs-layout a.fs-doc-pager__link { gap: 2px; padding: 12px 14px; border-radius: var(--fs-radius-node); } body.fs-docs-layout .fs-doc-pager__dir { font-size: 13px; } body.fs-docs-layout .fs-doc-pager__title { font-family: var(--fs-font-body); font-size: 14px; line-height: normal; } body.fs-docs-layout .fs-doc-results__count { font-size: 16px; } body.fs-docs-layout .fs-doc-result { padding: 14px 16px; border-radius: var(--fs-radius-node); } }