Zendesk Guide injects around the page template (no .hbs in this theme authors it). Opened and closed from any [data-chat-toggle] control, which in practice means the navbar button (src/header.js) — the one control on the page. (The search page's contact blades still build one too, src/searchResults.js, but that markup only renders for a brand with no home.support.card, which is no shipped brand. The support card's "Contact us" blade used to be one and is now an ordinary link to the ticket form.) That mount point is load-bearing. Because the host is a sibling of the header and the footer rather than an ancestor, "between the header and the footer" is simply "inside the host" — expressible as an absolutely positioned rail spanning the host, with the drawer sticky inside it. No geometry measuring, no scroll listener, and none of the inertial-scroll judder that comes from a fixed box chasing the chrome one frame late. The drawer stays in the DOM across close/open — it hides by transform, not by unmounting — so Assembled's iframe and the conversation inside it survive. That is also why the closed state must be un-hittable: `visibility: hidden` (transitioned so it only applies once the slide-out finishes) plus the `inert` attribute ChatDrawer.tsx sets. PERSISTENT, not overlay: while open the drawer takes its width out of the page rather than covering it — see the push block below. */ /* The width the drawer takes out of the page while open. `--chat-drawer-inset` is the live value: 0 when closed, and 0 at the full-screen breakpoint (where there is no room left to push into, so the drawer covers the page instead). ChatDrawer.tsx toggles .chat-drawer-pushed on ; keeping the switch on the root element is what lets every descendant inherit the inset. Anything doing full-bleed math off 100vw has to subtract it or it will overflow the narrowed page — styles/_page.scss's .browse-products viewport is the one such rule in the theme today. Grep --chat-drawer-inset before adding another. */ :root { /* $chat-drawer-width (styles/_content-width.scss) rather than a literal: the page layouts' breakpoints are derived from this width, so the two can't be allowed to drift. */ --chat-drawer-width: 440px; --chat-drawer-inset: 0px; } html.chat-drawer-pushed { --chat-drawer-inset: min(var(--chat-drawer-width), 100vw); } /* The host — the element renderChatDrawer mounted into, marked by that module so this stylesheet needs no knowledge of which element it turned out to be (the
landmark in practice, only as a degenerate fallback). Three jobs: 1. positioning context for the rail below; 2. `overflow-x: clip` so the closed drawer — parked a full width past the inline-end edge — can't extend the page or raise a scrollbar. `clip` and NOT `hidden`: hidden would make this a scroll container, which would re-anchor the sticky drawer to the host instead of the viewport and break the whole approach; 3. the push (below). The theme's one full-bleed rule (.browse-products, styles/_page.scss) sizes itself to 100vw minus the inset, so it lands exactly on the host's content box and is never the thing being clipped. */ .chat-drawer-host { position: relative; overflow-x: clip; transition: padding-inline-end 240ms ease; } /* The push. Padding rather than margin so the page background still paints behind the drawer during the slide; matched to the drawer's own 240ms so the two move together. Declared only under the pushed class, never as a `0px` base, so it can't clobber a padding somebody adds later — the transition sits on the base so closing animates too. Note what is NOT here any more: the header and footer needed an equal negative margin to escape the old padding. They are outside the host now, so they keep their full width for free. */ html.chat-drawer-pushed .chat-drawer-host { padding-inline-end: var(--chat-drawer-inset); } /* The rail: spans the host's full block size at its inline-end edge, and is the containing block the drawer sticks within. Out of flow, so page content is untouched — the host's padding is what actually makes room. pointer-events are off because the rail covers a strip of every page even while the drawer is closed; the drawer itself turns them back on. */ .chat-drawer-root { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(var(--chat-drawer-width), 100vw); pointer-events: none; } .chat-drawer { /* Sticky, not fixed. Two clamps come free, and they are exactly the two the old measuring code hand-computed: - it sticks at --hc-header-height, the strip the sticky header permanently occupies (styles/_header.scss), so it can never cover the header — and therefore never covers the toggle that closes it. - it can't ride past the host's bottom, which is where the footer begins. It can never cover the footer. Being compositor-driven, it also can't lag behind inertial scrolling. */ position: sticky; inset-block-start: var(--hc-header-height); /* Exactly the viewport below the header, at every scroll position — which is what keeps BOTH flex children (Assembled's iframe and the AI disclaimer under it) on screen from the first paint. - scrolled: top is the sticky offset, so the bottom edge lands on the fold for any value of the variable; - at scroll-top: the drawer is still at its unstuck position — the rail's top, i.e. immediately under the in-flow header — so the bottom edge lands on the fold precisely because the variable equals the real bar height. styles/_header.scss pins the bar to it with a min-block-size so that stays true. This is what the header being sticky bought: before it, the drawer had to assume nothing about the header's visible height, so a 100dvh box hung below the fold at the top of every page and the disclaimer was cut off until the reader scrolled. */ block-size: calc(100dvh - var(--hc-header-height)); /* Never taller than the rail, so a page shorter than the viewport gets a drawer that stops at the footer instead of overflowing past it. */ max-block-size: 100%; pointer-events: auto; display: flex; flex-direction: column; gap: 16px; /* Figma puts the drawer's content 33px in from every edge. Assembled already pads its own content 20px inside the iframe, so the drawer supplies only the remaining 13px. The disclaimer has no such inner padding and makes up the difference itself (below). */ padding: 13px; background: var(--color-base-100, #fff); /* Border only, no shadow — the drawer is flat in Figma. */ border-inline-start: 1px solid var(--colors-border-default, #e7e7e7); /* Above ordinary page content — which matters during the slide (the drawer travels over the page before the padding catches up) and at the full-screen breakpoint, where it genuinely overlays — but deliberately BELOW the header's dropdown / mega flyouts (--popover-z: 50), which drop down out of the header and across this strip. (The old fixed drawer sat at 100 and covered them; it had to, because it spanned the whole viewport.) `position: sticky` already opens a stacking context, so Assembled's own high z-index is trapped inside the drawer and can't escape past the header — the same guarantee the retired chat page bought with `isolation: isolate`. */ z-index: 20; transform: translateX(100%); visibility: hidden; transition: transform 240ms ease, visibility 0s linear 240ms; /* RTL: the drawer sits at the inline-end edge, so it slides out the other way. transform is physical, so the logical property can't do this. */ } [dir=rtl] .chat-drawer { transform: translateX(-100%); } .chat-drawer--open { transform: translateX(0); visibility: visible; transition: transform 240ms ease, visibility 0s linear 0s; } [dir=rtl] .chat-drawer--open { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .chat-drawer, .chat-drawer-host { transition: none; } } /* The drawer carries no chrome of its own — no title bar, no close button. The navbar toggle is the single open/close control, and the drawer sticks at --hc-header-height precisely so the pinned header holding that control is never covered. Assembled is embedded with data-disable-close-button, so it contributes none either. The drawer takes focus on open (tabIndex={-1} in ChatDrawer.tsx) since there is no control inside it to land on. That's a programmatic container focus, so suppress the ring — it would outline the whole panel for a move the user didn't make with the keyboard. */ .chat-drawer:focus { outline: none; } /* Holds the widget and the loading state that covers it while it arrives. It is the flex child that claims the drawer's free space (the widget itself just fills it), and the containing block the spinner centers in — so the spinner stays clear of the disclaimer, which is outside this box. */ .chat-drawer-body { position: relative; display: flex; flex: 1; min-block-size: 0; } /* Assembled injects its iframe here (data-embedded-container). Empty until the first open — the script is only fetched then — so it must hold its own space rather than collapse. */ .chat-drawer-widget { flex: 1; min-block-size: 0; /* Assembled's public_chat.html pins its own to the light theme whenever it runs in an iframe, whatever theme the embed passes, so its page background squares off light around a dark chat. Rounding and clipping the host trims that background to the chat's own shape. 25px has no step in the radius scale (it stops at 11px before the pill). */ border-radius: 25px; overflow: hidden; } .chat-drawer-widget iframe { inline-size: 100%; block-size: 100%; border: 0; } /* public-chat.js injects an `iframe.assembled-chat` rule with a box-shadow meant for its floating mode, and appends it to after this stylesheet — so a rule of equal specificity loses. The container class is what wins here, without reaching for !important. The drawer is flat in Figma; the iframe should read as part of it, not as a card inside it. */ .chat-drawer-widget iframe.assembled-chat { box-shadow: none; } /* While the widget has nothing worth showing — still loading, or in outage with the recovery poll running behind the message (ChatDrawer.tsx). `visibility`, deliberately not `display: none`: the host has to keep its layout box so Assembled measures the size it will actually be rendered at. A retry that laid out its iframe inside a zero-height container would come back sized wrong, and there is no second load event to fix it. */ .chat-drawer-widget--hidden { visibility: hidden; } /* Shown from the first open until Assembled's iframe has loaded (src/modules/chat-drawer/widgetSettled.ts), in place of the blank panel that span used to be. Deliberately NOT hc-components' Activity Indicator: that is a port of Rosetta's flipping square, which reads as Squarespace brand expression. What stands in for a third-party chat window should be anonymous, so this is a plain ring in the drawer's own border/muted colors. The fade is delayed rather than immediate — the Activity Indicator's documented rule, that a sub-second wait must never flash a spinner, holds for any loader. Doing it in CSS keeps it out of the component: `both` holds the from-state through the delay, so nothing paints for the first 100ms. */ .chat-drawer-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: chat-drawer-loading-in 120ms ease 100ms both; } /* The loading state's accessible name (ChatDrawer.tsx). Announced by the role="status" live region above, never drawn — the spinner is the visible half. Scoped to the drawer rather than added as a shared utility because the theme has no visually-hidden class to reuse; promote it if a second caller turns up. Out of flow, so it can't disturb the spinner's centering. The 1px box plus clip-path is the standard recipe: a zero-size or display:none element is dropped from the accessibility tree by some screen readers, so it has to occupy space and be clipped instead. */ .chat-drawer-loading-label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .chat-drawer-spinner { inline-size: 24px; block-size: 24px; border: 2px solid var(--colors-border-default, #e7e7e7); /* One side in the darker color is what makes the rotation legible. */ border-block-start-color: var(--colors-fg-muted, #5a5a5a); border-radius: 50%; animation: chat-drawer-spin 800ms linear infinite; } @keyframes chat-drawer-loading-in { from { opacity: 0; } to { opacity: 1; } } @keyframes chat-drawer-spin { to { transform: rotate(360deg); } } /* Reduced motion: hold the ring still rather than removing the only thing in the panel — it still reads as "something is coming". Matches the drawer's own transitions being dropped above. */ @media (prefers-reduced-motion: reduce) { .chat-drawer-spinner { animation: none; } } /* Shown when the widget failed to load, in place of the blank panel that used to be the whole failure experience. Positioned over the widget host exactly like the spinner — the host stays in the DOM so the recovery poll has a container to render into — which is why it needs an opaque background of its own rather than inheriting the drawer's. Not a shared component: nothing else in the theme has a panel-scoped outage state to share with, and the page-level announcement banner (src/announcementBanner.js) is styled and positioned for a site-wide notice. Centred and narrow-measured because it stands alone in a 440px column — a full-width paragraph in a box this narrow reads as a wall. */ .chat-drawer-outage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: var(--color-base-100, #fff); } /* Type comes from the Text component (.text.heading-sm); this only drops the margin a

carries, since the flex gap above owns the spacing. */ .chat-drawer-outage-title, .chat-drawer-outage-body { margin: 0; /* Narrow enough that the sentence doesn't read as a wall in a 440px column, wide enough that the default body copy doesn't leave a one-word last line. Brand copy will wrap differently — this is a comfortable measure, not a fit to one string. */ max-inline-size: 36ch; } .chat-drawer-outage-body { color: var(--colors-fg-muted, #5a5a5a); } /* The manual retry, under the CTA. Chrome and hover/focus states come from hc-components' IconButton (.btn.icon-btn.subtle.sm), which is transparent at rest — so at the `sm` default of 1em the glyph reads as a stray mark rather than a control. Two adjustments make it legible as one without making it compete with the CTA: - the glyph goes up to 18px in the 28px button, which is as large as it can be before it stops reading as secondary. The button box is left alone: at 28px it already clears the 24px minimum target size (WCAG 2.5.8); - it takes the body copy's muted color, so it reads as part of the message rather than as something floating under it. The IconButton's hover and focus states still bring it to full contrast on interaction. */ .chat-drawer-outage-retry { --icon-size: 18px; color: var(--colors-fg-muted, #5a5a5a); } /* AI disclaimer under the widget (window.brandConfig.chat.disclaimer). Type comes from the Text component (.text.body-sm, 12px); this only adds the centering + muted color the component doesn't carry. */ .chat-drawer-disclaimer { margin: 0; /* The 20px the iframe's content gets from Assembled, so the disclaimer sits on the same 33px inset as the widget above it. */ padding: 0 20px 20px; text-align: center; color: var(--colors-fg-muted, #5a5a5a); /* A link inside the disclaimer (the "Terms of Service" wording, carried in the copy itself) keeps the muted color of the sentence around it, so the underline is the only thing marking it as a link — it can't be dropped. */ } .chat-drawer-disclaimer a { color: inherit; text-decoration: underline; } /* ── Full-width (small viewports) ──────────────────────────────────────────── Two families of query, and both are needed. The width one covers a narrowed desktop window. The coarse-pointer pair is Rosetta's mobile-0 variant, which keys off DEVICE dimensions — a resized desktop window never matches it, and a phone in landscape never matches the width query. Repeated literally rather than via @variant because this stylesheet is unlayered (see the same copy in styles/_homepage.scss). 900px is deliberately ahead of the 801px fine-pointer boundary the navbar itself flips at (hc-components navbar.css), which this query used to mirror: the push leaves only (viewport - 440px) for the page, so anywhere in the 801–900px band the reader is left with ~360–460px of content — narrower than the mobile layout the same content gets on a phone. Better to cover the page than to squeeze it that far. The theme's header now keeps its tablet bar up to 1024px (styles/_header.scss), so the navbar is never in its desktop form while the drawer is full-screen. Either way the drawer is inset below the header at every size, so the navbar chat toggle (the only way to close it) stays reachable. The number lives in styles/_content-width.scss as $chat-drawer-fullscreen-max, because that is where the page layouts document what it means for them: below it the drawer stops narrowing the page, so their content-width breakpoints and the viewport agree again. */ @media (max-width: 900px), only screen and (pointer: coarse) and (orientation: portrait) and (max-device-height: 956px), only screen and (pointer: coarse) and (orientation: landscape) and (max-device-width: 956px) { /* Here the drawer goes back to covering the content instead of pushing it: at full width there is no page left to push into, and a push would drive the content to zero. Zeroing the inset (rather than the .chat-drawer-pushed class, which ChatDrawer.tsx sets regardless of viewport) also means crossing the breakpoint with the drawer already open just works — no resize listener. */ html.chat-drawer-pushed { --chat-drawer-inset: 0px; } /* The rail widens to the whole host; the drawer fills it. The rail is still scoped to the host, so the drawer stays below the header and above the footer at this size too — which is what keeps the navbar toggle (the only way to close the drawer) reachable. */ .chat-drawer-root { inline-size: 100%; } .chat-drawer { border-inline-start: 0; } } /* ── Admin apps ─────────────────────────────────────────────────────────────── The admin-only drawer: a left rail that opens onto a grid of admin tools and, once one is picked, hands the rail over to that tool. Mounted on by src/modules/admin-apps, which appends its own [data-rosetta][data-admin-app] container there — never inside a template, since it is chrome for the whole document. This file is the FRAME: the rail, the push it applies to the page, the title bar, the app grid and the resize handle. An app's own insides are its own file (the design editor's are styles/_design-editor.scss), so adding an app adds a partial rather than editing this one. HOW IT DIFFERS FROM THE CHAT DRAWER, and why. The chat drawer is deliberately inset between the header and the footer: it is sticky inside the

landmark so the sticky bar (which holds the only control that closes it) can never be covered. This one is the opposite by design — the design editor inside it exists to show a token change rippling through the ENTIRE page, header and footer included, so it is a fixed full-height rail beside all of it, and the page is pushed off the leading edge rather than squeezed between two pieces of chrome. Nothing about it is sticky. The push is padding on , so the header and footer — which are body's own children and outside the drawer's host in every other sense — move with the content instead of underlapping the rail. A sticky box is positioned within its parent's content box, so .site-header respects the padding for free and keeps its toggle reachable at every scroll position. The one body child that is NOT the page is Zendesk's #preview-bar-container — chrome for the preview session rather than content being previewed — so it is exempted from the push and left spanning the viewport; see the rule below the rail. */ /* Registered so it can be TRANSITIONED. Both moves the drawer makes — the push on and the preview bar's counter-push — are derived from this single animating value, which is what keeps them in lockstep: two separately transitioned properties would drift apart mid-animation and open (or close) a gap at the viewport edge for a couple of hundred milliseconds. That is not avoidable any other way here, because Zendesk sets `transition: margin .3s ease-in-out` inline on the preview bar and an inline declaration cannot be outrun from a stylesheet. */ @property --admin-apps-inset { syntax: ""; inherits: true; initial-value: 0px; } :root { /* Live width, driven by the resize handle (AdminApps.tsx writes it on the root element). The default matches DEFAULT_WIDTH in adminAppsState.ts; it only applies for the frame before React mounts. */ --admin-apps-width: 380px; /* 0 unless the drawer is open — the value every layout below subtracts. Kept separate from the width so a closed drawer costs the page nothing and no rule needs to know about the open class. */ --admin-apps-inset: 0px; /* On :root and unconditional, so the value eases back to 0 on close too — the open class is gone by then, and a transition declared under it would have been removed in the same style change that reset the value. */ transition: --admin-apps-inset 240ms ease; /* How far Zendesk's own viewport-pinned chrome — the signed-in navigation bar, the theme-preview bar — reaches down the viewport, written by src/modules/admin-apps/topInset.ts and consumed by the rail below. Deliberately NOT transitioned: it is measured live, so it already arrives as every frame of Zendesk's own minimize/expand animation, and easing it again would make the rail lag the bar it is clearing. 0 until the drawer mounts, and on a page with no such chrome. */ --admin-apps-top-inset: 0px; } html.admin-apps-open { /* Never wider than the viewport: at that point there is no page left to look at, which is the one thing the design editor exists to show. */ --admin-apps-inset: min(var(--admin-apps-width), 100vw); } body { padding-inline-start: var(--admin-apps-inset); } /* The rail. Fixed, not sticky: it spans the viewport at every scroll position, which is what makes this a side-by-side rather than a panel that drifts through the page. Above the sticky header (z-index: 40, styles/_header.scss) and the chat drawer (20, styles/_chat-drawer.scss) — those live inside the pushed page and never overlap the rail once the padding lands, but they DO overlap during the 240ms the padding takes to animate. Below #preview-bar-container (70), the one thing the rail is meant to slide under. */ .admin-apps-root { position: fixed; /* Starts below Zendesk's chrome rather than under it. Both bars paint above the rail on Zendesk's own z-indexes (the preview bar's is 2147483634), so a rail pinned to the viewport top puts .admin-apps-header — back, title and close — underneath them. On the RAIL, not on .admin-apps inside it: the panel is `block-size: 100%` of this box, so insetting here brings the panel, its shadow and the resize handle down together, where insetting the panel alone would leave the handle and the rail's own edge running up behind the bar. */ inset-block-start: var(--admin-apps-top-inset); inset-block-end: 0; inset-inline-start: 0; inline-size: min(var(--admin-apps-width), 100vw); z-index: 60; /* Closed, the rail is parked a full width off-screen and must not extend the page or raise a horizontal scrollbar. */ pointer-events: none; transform: translateX(-100%); visibility: hidden; transition: transform 240ms ease, visibility 0s linear 240ms; /* Physical, so RTL slides out the other way. */ } [dir=rtl] .admin-apps-root { transform: translateX(100%); } .admin-apps-root { /* Its own scheme, not the page's: a brand-wide dark brand declares color-scheme: dark for the document (its brand-head meta), which would darken the drawer's native controls, scrollbars and form fields while the editor has it light. The drawer's theme is the design editor's (design-editor/previewScope.ts stamps data-theme here). */ color-scheme: light; } .admin-apps-root[data-theme=dark] { color-scheme: dark; } html.admin-apps-open .admin-apps-root { pointer-events: auto; transform: translateX(0); visibility: visible; transition: transform 240ms ease, visibility 0s linear 0s; } /* Zendesk's theme-preview bar. It is a plain in-flow block that Zendesk's own script collapses by setting `height` and a negative `margin-top` on it, which means the push above reaches it like any other body child — and it should not: the bar belongs to the preview session, not to the page under test, so it stays anchored to the viewport at full width however wide the rail is. Undo exactly the push, no more. `100%` here is 's content box, i.e. the viewport minus the inset, so adding the inset back lands on the viewport width at every frame of the animation rather than only at the ends — nothing transient overhangs the trailing edge and raises a horizontal scrollbar. `position: relative` adds no offset; it is only there to make the z-index apply, and with it the bar (and everything Zendesk renders inside it) paints above the rail's 60 — so the drawer slides UNDER the bar instead of over it. */ #preview-bar-container { position: relative; z-index: 70; margin-inline-start: calc(-1 * var(--admin-apps-inset)); inline-size: calc(100% + var(--admin-apps-inset)); } @media (prefers-reduced-motion: reduce) { :root, .admin-apps-root { transition: none; } } /* ── Panel ─────────────────────────────────────────────────────────────────── */ .admin-apps { display: flex; flex-direction: column; block-size: 100%; /* The drawer keeps the page's own brand and is excluded from the design editor's overrides (see design-editor/previewScope.ts) — so these read the UNEDITED aliases and the panel stays legible no matter what the page has been retuned to. */ background: var(--colors-bg-base, #fff); color: var(--colors-fg-default, #0e0e0e); border-inline-end: 1px solid var(--colors-border-default, #e7e7e7); box-shadow: 8px 0 24px oklch(0% 0 0deg / 0.08); /* Set here rather than in an app's own file: the rail is narrow, and every app inside it inherits the same compact scale. */ font-size: 13px; } /* The one bar every app shares. Back (absent on the app grid), the app's title, and close — so backing out of an app never means hunting for a control the app happened to place somewhere else. */ .admin-apps-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-block-end: 1px solid var(--colors-border-default, #e7e7e7); } /* Takes the slack so the close button stays pinned to the trailing edge whether or not the back button is there. `min-inline-size: 0` lets a long app title ellipsize instead of pushing the close button out of a 280px rail. */ .admin-apps-title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-apps-close { display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; flex: none; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; } .admin-apps-close:hover { background: var(--colors-bg-default, #f2f2f2); } /* ── App grid (home) ───────────────────────────────────────────────────────── Scrolls in its own right, so a future list of apps longer than the rail behaves like the apps themselves do rather than clipping. */ .admin-apps-home { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; } /* Two columns, fixed — not auto-fit. The rail is resizable (280–720px), and an auto-fitting grid would reflow from one column to three while the user drags the edge: a launcher whose layout moves as you reach for it. Two is the count that fits at the narrowest width and still reads as a grid at the widest. */ .admin-apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } /* The
    /
  • is for semantics only; the tile is the whole item. */ .admin-apps-grid-item { display: flex; } .admin-apps-tile { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; /* Icon above a label, both centred, so the grid scans as a launcher rather than as a list of settings rows. */ padding: 16px 10px; border: 1px solid var(--colors-border-default, #e7e7e7); border-radius: 8px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .admin-apps-tile:hover { background: var(--colors-bg-default, #f2f2f2); border-color: var(--colors-border-emphasis, #b8b8b8); } .admin-apps-tile:focus-visible { outline: 2px solid var(--colors-fg-accent, #0862d1); outline-offset: 2px; } .admin-apps-tile-icon { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 8px; background: var(--colors-bg-default, #f2f2f2); color: var(--colors-fg-default, #0e0e0e); } .admin-apps-tile-title { /* A two-word title in a 280px rail's half-column wraps; keep it readable rather than clipped, and let the tile grow. */ line-height: 1.25; } .admin-apps-tile-doc { line-height: 1.3; } .admin-apps-empty { padding: 14px; } /* ── Resize handle ─────────────────────────────────────────────────────────── */ .admin-apps-resize { position: absolute; inset-block: 0; inset-inline-end: -3px; inline-size: 7px; cursor: col-resize; /* Above the panel's own content so a drag started on the edge is never stolen by a control sitting under it. */ z-index: 1; /* Invisible until reached for: a permanent divider beside the panel's own border reads as a rendering bug. */ background: transparent; touch-action: none; } .admin-apps-resize:hover, .admin-apps-resize:active { background: var(--colors-fg-accent, #0862d1); opacity: 0.35; } .admin-apps-resize { /* It is focusable (arrow keys resize the drawer), and an invisible control with focus on it is indistinguishable from focus having gone nowhere — so when it is reached by keyboard it shows itself. */ } .admin-apps-resize:focus-visible { background: var(--colors-fg-accent, #0862d1); opacity: 1; outline: none; } /* ── Header toggle ───────────────────────────────────────────────────────────── The button lives in templates/header.hbs (inside the admin guard, inside .navbar-actions) and is wired by src/adminAppsToggle.js. It takes the bar's own foreground and the same aria-pressed colour inversion .navbar-toggle-chat uses in styles/_header.scss, so it reads as part of the bar rather than as a bolted-on dev affordance. `order: 1` is what puts it to the RIGHT of the chat toggle (or the CTA, on a brand with no chatbot). Those are appended to .navbar-actions at runtime by src/header.js while this button is server-rendered, so DOM order alone would put it first — order sidesteps the race instead of trying to win it. Square, and sized off the .btn.lg beside it (--size-btn-lg, the same token Button's large size uses) so the two line up on the bar's centre line rather than one riding high. */ [data-rosetta] [data-navbar] .navbar-actions .navbar-toggle-admin { order: 1; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--size-btn-lg, 44px); block-size: var(--size-btn-lg, 44px); flex: none; padding: 0; border: 0; border-radius: var(--radius-box, 3px); background: none; color: var(--color-base-content, #fff); cursor: pointer; } [data-rosetta] [data-navbar] .navbar-actions .navbar-toggle-admin .hc-icon, [data-rosetta] [data-navbar] .navbar-actions .navbar-toggle-admin [class^=icon-] { --icon-size: 20px; } [data-rosetta] [data-navbar] .navbar-actions .navbar-toggle-admin:hover { background: oklch(from var(--color-base-content, #fff) l c h/12%); } [data-rosetta] [data-navbar] .navbar-actions .navbar-toggle-admin:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; } [data-rosetta] [data-navbar] .navbar-actions .navbar-toggle-admin[aria-pressed=true] { background: var(--color-base-content, #fff); color: var(--color-base-100, #0e0e0e); } /* ── Design editor ─────────────────────────────────────────────────────────── The insides of ONE admin app (src/modules/design-editor): the brand/theme scope bar, the token controls, the CSS view and the brand dialogs. Everything around it belongs to the drawer that hosts it — the rail, the push it applies to the page, the title bar with its back and close controls, and the resize handle are all in styles/_admin-apps.scss, and none of them are named here. So this file describes the tool and nothing about where it is mounted, which is what lets a second admin app land as a sibling partial rather than as an edit to this one. */ /* Fills the rail below the drawer's title bar. `min-block-size: 0` is load-bearing in a column flex container: without it this refuses to shrink below its content and the editor's own footer is pushed off the bottom of the viewport. Colour, border and shadow are the drawer's (.admin-apps) — an app paints its own contents, not the panel. */ .design-editor { display: flex; flex: 1; min-block-size: 0; flex-direction: column; } .design-editor-scopes, .design-editor-modes, .design-editor-search, .design-editor-footer { padding: 10px 14px; border-block-end: 1px solid var(--colors-border-default, #e7e7e7); } .design-editor-scopes { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Label, dropdown, "+", and (for a custom brand) the trash — four things in a rail that narrows to 280px, so the group takes the free space and the trigger is the one item allowed to give some back. Without `min-inline-size: 0` a flex item refuses to shrink below its content and the theme toggle on the other end of .design-editor-scopes gets pushed out of the panel. */ .design-editor-scope-group { display: flex; align-items: center; flex: 1; min-inline-size: 0; gap: 6px; } /* The scrolling middle. `min-block-size: 0` is load-bearing in a column flex container — without it the body refuses to shrink below its content and the footer is pushed off the bottom of the viewport. */ .design-editor-body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; } .design-editor-layer { padding: 12px 14px 4px; } .design-editor-layer-doc { margin: 2px 0 8px; } .design-editor-section-doc { margin: 0 0 8px; } .design-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-block-end: 0; border-block-start: 1px solid var(--colors-border-default, #e7e7e7); } .design-editor-actions { display: flex; gap: 6px; } /* ── Token rows ────────────────────────────────────────────────────────────── */ .design-editor-token { padding: 8px 0; border-block-start: 1px solid var(--colors-border-default, #e7e7e7); } .design-editor-token:first-of-type { border-block-start: 0; } /* A modified token gets a leading rule rather than a badge: the list is long and scanning for "what have I changed" should not mean reading it. */ .design-editor-token[data-modified] { margin-inline-start: -8px; padding-inline-start: 6px; border-inline-start: 2px solid var(--colors-fg-accent, #0862d1); } /* Color tokens put the name and the swatch on one line instead of stacking them — there are a lot of these rows, and the label alone rarely needs its own line. The swatch is a grid item in its own right (see ColorControl, which renders it as a sibling of the panel rather than wrapping both), so it stays put in the right-hand column when the panel opens below it instead of sliding down to sit under the swatch's old spot. */ .design-editor-token[data-color] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; } .design-editor-token[data-color] .design-editor-control-panel { grid-column: 1/-1; } .design-editor-token-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .design-editor-token-name { font-family: var(--font-sqsp-mono, monospace); font-size: 11px; word-break: break-all; } .design-editor-token-reset { flex: none; padding: 0; border: 0; background: none; color: var(--colors-fg-accent, #0862d1); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; } .design-editor-control { display: flex; flex-direction: column; gap: 6px; } .design-editor-control-row { display: flex; align-items: center; gap: 6px; } .design-editor-control-row > :last-child { flex: 1; min-inline-size: 0; } .design-editor-control-panel { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--colors-border-default, #e7e7e7); border-radius: 6px; } .design-editor-palette-swatch { flex: none; padding: 0; border: 1px solid var(--colors-border-default, #e7e7e7); border-radius: 4px; cursor: pointer; } .design-editor-palette { display: flex; flex-direction: column; gap: 6px; max-block-size: 220px; overflow-y: auto; } .design-editor-palette-ramp { display: flex; flex-direction: column; gap: 2px; } .design-editor-palette-swatches { display: flex; flex-wrap: wrap; gap: 3px; } .design-editor-palette-swatch { inline-size: 28px; block-size: 28px; display: flex; align-items: center; justify-content: center; } .design-editor-palette-swatch[aria-pressed=true] { outline: 2px solid var(--colors-fg-accent, #0862d1); outline-offset: 1px; } .design-editor-palette-swatch-label { font-size: 8px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; mix-blend-mode: difference; pointer-events: none; } /* ── CSS mode ──────────────────────────────────────────────────────────────── */ .design-editor-css { display: flex; flex-direction: column; gap: 8px; block-size: 100%; padding: 12px 14px; } .design-editor-css-hint { margin: 0; font-size: 11px; } /* CodeInput mounts a CodeMirror view, which sizes itself to its content unless told otherwise. Give it the remaining column height and let it scroll, so the editor fills the rail instead of collapsing to two lines when empty. */ .design-editor-code { flex: 1; min-block-size: 0; overflow: auto; border: 1px solid var(--colors-border-default, #e7e7e7); border-radius: 6px; } .design-editor-css-actions { display: flex; justify-content: flex-end; } /* ── Controls mode ─────────────────────────────────────────────────────────── */ /* Sits between the scrolling token list and the footer, always visible rather than scrolling away with the list — the same "Apply" gesture as the CSS view's, just outside the scroll container since Controls has no single flex-filling element to pin it to the bottom of like CodeInput does. */ .design-editor-controls-actions { display: flex; justify-content: flex-end; padding: 10px 14px; border-block-end: 1px solid var(--colors-border-default, #e7e7e7); } /* ── Brand dialogs ───────────────────────────────────────────────────────────── The "New brand" and "Delete brand" popups (src/modules/design-editor/ BrandDialogs.tsx). They cover the RAIL, not the viewport, and that is not a compromise made for lack of a portal — it is the only correct option here. The dialogs must live inside the drawer's own [data-rosetta][data-admin-app] subtree, because that is the one subtree the override stylesheet excludes and the preview's MutationObserver leaves alone; anywhere else they would inherit the user's in-progress overrides and could paint themselves unreadable. And .admin-apps-root carries a `transform` while open, which makes it a containing block for `position: fixed` — so a viewport-covering scrim isn't reachable from in here regardless. The panel is the modal's world, in other words, and the scrim says so. */ .design-editor-dialog-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; /* Above the drawer's resize handle (z-index 1) and every control in the panel. */ z-index: 2; } .design-editor-dialog-backdrop { position: absolute; inset: 0; background: oklch(0% 0 0deg / 0.4); } .design-editor-dialog { position: relative; display: flex; flex-direction: column; gap: 10px; inline-size: 100%; max-block-size: 100%; overflow-y: auto; padding: 14px; border-radius: 8px; /* Same unedited aliases the panel itself uses — see .design-editor. */ background: var(--colors-bg-base, #fff); color: var(--colors-fg-default, #0e0e0e); border: 1px solid var(--colors-border-default, #e7e7e7); box-shadow: 0 8px 24px oklch(0% 0 0deg / 0.18); } .design-editor-dialog-form { display: flex; flex-direction: column; gap: 10px; } .design-editor-dialog-hint { margin: 0; font-size: 11px; } .design-editor-dialog-hint code { font-family: var(--font-sqsp-mono, monospace); word-break: break-all; } .design-editor-dialog-actions { display: flex; justify-content: flex-end; gap: 6px; } /* ── Dynamic content inspector ──────────────────────────────────────────────── The insides of one admin app (src/modules/dc-inspector), plus the two things it puts on the PAGE while inspecting: the outline over the hovered element and the crosshair cursor. The drawer around the panel is styles/_admin-apps.scss. */ .dc-inspector { display: flex; flex: 1; min-block-size: 0; flex-direction: column; } .dc-inspector-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-block-end: 1px solid var(--colors-border-default, #e7e7e7); } /* The scrolling middle; `min-block-size: 0` lets it shrink inside the column flex container instead of pushing past the bottom of the rail. */ .dc-inspector-body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; } .dc-inspector-selection { margin: 0 0 10px; overflow-wrap: anywhere; } /* Where the text comes from, for an element no dc key renders. */ .dc-inspector-source { margin: 0 0 6px; } .dc-inspector-matches { margin: 0; padding: 0; list-style: none; } .dc-inspector-match { padding: 10px 0; border-block-start: 1px solid var(--colors-border-default, #e7e7e7); } .dc-inspector-match-key { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .dc-inspector-match-key code { min-inline-size: 0; font-family: var(--font-sqsp-mono, monospace); font-size: 12px; overflow-wrap: anywhere; } .dc-inspector-match-text { margin: 4px 0 6px; overflow-wrap: anywhere; } .dc-inspector-match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; } /* The links out of a match row sit in the row's text colour and only underline on hover or focus, so the pointer shows which one it is on and nothing else competes with the badge. */ .dc-inspector-zendesk-link, .dc-inspector-cms-link { color: inherit; text-decoration: none; } .dc-inspector-zendesk-link:hover, .dc-inspector-zendesk-link:focus-visible, .dc-inspector-cms-link:hover, .dc-inspector-cms-link:focus-visible { text-decoration: underline; } .dc-inspector-badge { padding: 1px 6px; border: 1px solid var(--colors-border-default, #e7e7e7); border-radius: 999px; } .dc-inspector-badge-exact { border-color: var(--colors-fg-accent, #0862d1); color: var(--colors-fg-accent, #0862d1); } /* A URL match: which attribute held the dc value. */ .dc-inspector-badge-url { color: var(--colors-fg-muted, #666); } /* "Text" and "URL" above their groups of matches. */ .dc-inspector-group-heading { margin: 10px 0 4px; } /* The outline over the hovered page element. Fixed and measured from the element's client rect, so it never affects the page's layout; it ignores the pointer so the element under it stays the event target. Just below the drawer's rail (z-index 60) and above the sticky header (40). */ .dc-inspector-highlight { position: fixed; z-index: 59; pointer-events: none; box-sizing: border-box; outline: 2px solid var(--colors-fg-accent, #0862d1); background: rgba(8, 98, 209, 0.08); } /* Every body child but the drawer, which keeps its own cursors. */ html.dc-inspector-picking body > :not(.admin-apps-root), html.dc-inspector-picking body > :not(.admin-apps-root) * { cursor: crosshair; } .request-form, .ck-body-wrapper { --ck-border-radius: var(--radius-sqsp-1, 3px); --ck-color-base-background: var(--color-base-100, #fff); --ck-color-base-border: var(--colors-border-default, #e0e0e0); --ck-color-base-text: var(--colors-fg-default, #0e0e0e); --ck-color-text: var(--colors-fg-default, #0e0e0e); --ck-color-focus-border: var(--colors-border-accent, #1170ff); --ck-color-toolbar-background: var(--color-base-100, #fff); --ck-color-toolbar-border: var(--colors-border-default, #e0e0e0); --ck-color-button-default-background: transparent; --ck-color-button-default-color: var(--colors-fg-default, #0e0e0e); --ck-color-button-default-hover-background: var(--color-base-200, #f6f6f6); --ck-color-button-default-active-background: var(--color-base-200, #f6f6f6); --ck-color-button-on-background: var(--color-base-200, #f6f6f6); --ck-color-button-on-hover-background: var(--color-base-200, #f6f6f6); --ck-color-button-on-color: var(--colors-fg-accent, #1170ff); --ck-color-dropdown-panel-background: var(--color-base-100, #fff); --ck-color-dropdown-panel-border: var(--colors-border-default, #e0e0e0); --ck-color-list-background: var(--color-base-100, #fff); } .request-form .ck.ck-editor { width: 100%; } .request-form .ck.ck-toolbar, .request-form .ck-content, .request-form .ck.ck-editor__editable { font-family: var(--font-sqsp-ui); } .request-form .ck.ck-editor__editable_inline { min-height: 132px; } .request-form [data-garden-id="forms.file_upload"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sqsp-2, 11px); width: 100%; padding: var(--spacing-sqsp-4, 22px) var(--spacing-sqsp-4, 22px) 26px; border: 1px dashed var(--color-base-500); border-radius: 8px; background: var(--color-base-100); color: var(--color-base-content); font-family: var(--font-sqsp-ui); font-size: 0.875rem; line-height: 22px; text-align: center; } @media (max-width: 768px) { .request-form [data-garden-id="forms.file_upload"] { font-size: 1rem; } } @media (max-width: 1208px) { html.chat-drawer-pushed .request-form [data-garden-id="forms.file_upload"] { font-size: 1rem; } } .request-form [data-garden-id="forms.file_upload"]:hover, .request-form [data-garden-id="forms.file_upload"]:active, .request-form [data-garden-id="forms.file_upload"]:focus-visible, .request-form [data-garden-id="forms.file_upload"][data-dragging] { border-color: var(--color-base-content-muted); background: var(--color-base-200); color: var(--color-base-content); } .request-form .attachments-dropzone__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-base-300); color: var(--color-base-content); } .request-form [data-garden-id="forms.input_label"], .request-form [data-garden-id="forms.input_hint"] { font-family: var(--font-sqsp-ui); font-size: 0.75rem; line-height: 16px; } .request-form [data-garden-id="forms.input_label"] { display: block; font-weight: 500; color: var(--color-base-content); } .request-form [data-garden-id="forms.input_hint"] { color: var(--color-base-content-muted); } .request-form [data-garden-id="forms.file"] { border-radius: var(--radius-sqsp-1, 3px); border-color: var(--colors-border-default, #e0e0e0); font-family: var(--font-sqsp-ui); } .search-hero .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-family: var(--font-sqsp-ui); font-size: 0.75rem; font-weight: 500; line-height: 16px; } .search-hero .breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--color-secondary-content) 72%, transparent); } .search-hero .breadcrumbs li + li::before { content: "/"; color: color-mix(in srgb, var(--color-secondary-content) 50%, transparent); } .search-hero .breadcrumbs a { color: var(--color-secondary-content); text-decoration: underline; text-underline-position: from-font; } .search-hero .breadcrumbs a:hover, .search-hero .breadcrumbs a:focus-visible { text-decoration: none; } .search-hero .breadcrumbs a[aria-current=page] { color: color-mix(in srgb, var(--color-secondary-content) 72%, transparent); text-decoration: none; pointer-events: none; cursor: default; } .request-page .breadcrumbs, .category-page .breadcrumbs, .section-page .breadcrumbs, .search-results-page .breadcrumbs, .article-page .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: var(--font-sqsp-ui); font-size: 0.75rem; font-weight: 500; line-height: 16px; } .request-page .breadcrumbs li, .category-page .breadcrumbs li, .section-page .breadcrumbs li, .search-results-page .breadcrumbs li, .article-page .breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--color-base-content-muted); } .request-page .breadcrumbs li + li::before, .category-page .breadcrumbs li + li::before, .section-page .breadcrumbs li + li::before, .search-results-page .breadcrumbs li + li::before, .article-page .breadcrumbs li + li::before { content: "/"; color: var(--color-base-400); } .request-page .breadcrumbs a, .category-page .breadcrumbs a, .section-page .breadcrumbs a, .search-results-page .breadcrumbs a, .article-page .breadcrumbs a { color: var(--color-base-content); text-decoration: underline; text-underline-position: from-font; } .request-page .breadcrumbs a:hover, .request-page .breadcrumbs a:focus-visible, .category-page .breadcrumbs a:hover, .category-page .breadcrumbs a:focus-visible, .section-page .breadcrumbs a:hover, .section-page .breadcrumbs a:focus-visible, .search-results-page .breadcrumbs a:hover, .search-results-page .breadcrumbs a:focus-visible, .article-page .breadcrumbs a:hover, .article-page .breadcrumbs a:focus-visible { text-decoration: none; } .request-page .breadcrumbs a[aria-current=page], .category-page .breadcrumbs a[aria-current=page], .section-page .breadcrumbs a[aria-current=page], .search-results-page .breadcrumbs a[aria-current=page], .article-page .breadcrumbs a[aria-current=page] { color: var(--color-base-content-muted); text-decoration: none; pointer-events: none; cursor: default; } .section-page .breadcrumbs li:last-child a, .search-results-page .breadcrumbs li:last-child a { color: var(--color-base-content-muted); text-decoration: none; pointer-events: none; cursor: default; } :root { --hc-nav-secondary-height: 0px; } :root:has(.nav-secondary) { --hc-nav-secondary-height: 77px; } .nav-secondary { position: sticky; inset-block-start: var(--hc-header-height); z-index: 10; display: flex; align-items: center; gap: 10px; min-block-size: 77px; padding: var(--spacing-sqsp-3) var(--spacing-sqsp-6); border-bottom: 1px solid var(--color-base-400); background: var(--color-base-100); } @media (max-width: 743px) { .nav-secondary { padding-inline: var(--spacing-sqsp-3); } } .nav-secondary > :first-child { flex: 1; min-width: 0; } .nav-secondary .breadcrumbs { flex-wrap: nowrap; min-width: 0; overflow: hidden; } .nav-secondary .breadcrumbs li { min-width: 0; padding-block: 8px; white-space: nowrap; } .nav-secondary .breadcrumbs a { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1024px) { .nav-secondary .breadcrumbs li:last-child:not(:first-child) { display: none; } } .nav-secondary-search { flex: 0 0 209px; min-width: 0; } @media (max-width: 1024px) { .nav-secondary-search { flex-basis: 212px; } } .search-results-page .nav-secondary-search { flex-basis: 438px; } @media (max-width: 1024px) { .search-results-page .nav-secondary-search { flex-basis: 225px; } } .nav-secondary-search .search { gap: var(--spacing-sqsp-1); min-height: 44px; padding: 0 var(--spacing-sqsp-2); background: var(--color-base-300); border-radius: var(--radius-sqsp-1); } .nav-secondary-search .search:focus-within { outline: 2px solid var(--color-base-content); outline-offset: 1px; } .nav-secondary-search .input-group { flex: 1; min-width: 0; width: auto; } .nav-secondary-search .input-icon { inset-inline-start: 0; width: 16px; height: 16px; color: var(--color-base-content); --icon-size: 100%; } .nav-secondary-search .input { min-height: 44px; padding-inline: calc(16px + var(--spacing-sqsp-1)) 0; border: 0; background: transparent; font-family: var(--font-sqsp-ui); font-size: 14px; line-height: 22px; color: var(--color-base-content); } .nav-secondary-search .input::placeholder { color: var(--color-base-content-muted); } .nav-secondary-search .input:focus, .nav-secondary-search .input:focus-visible { outline: none; box-shadow: none; } .nav-secondary-search .input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; } .nav-secondary-search .clear-button { display: none; align-items: center; justify-content: center; align-self: stretch; padding: 0; border: 0; background: none; color: var(--color-base-content); cursor: pointer; } .nav-secondary-search .search-has-value .clear-button { display: flex; } [data-rosetta][data-brand=scheduling] .nav-secondary-search .search { background: color-mix(in oklch, var(--color-secondary) 8%, var(--color-base-100)); } [data-rosetta][data-brand=scheduling] .nav-secondary-search .input-icon, [data-rosetta][data-brand=scheduling] .nav-secondary-search .input { color: var(--color-secondary); } .nav-secondary-search-toggle { display: none; } @media (max-width: 743px) { .nav-secondary[data-search-toggle] .nav-secondary-search-toggle { display: inline-flex; border-radius: var(--radius-sqsp-1); } .nav-secondary[data-search-toggle] .nav-secondary-search { display: none; } .nav-secondary[data-search-toggle][data-search-open] > :first-child, .nav-secondary[data-search-toggle][data-search-open] .nav-secondary-search-toggle { display: none; } .nav-secondary[data-search-toggle][data-search-open] .nav-secondary-search { display: block; flex: 1 1 auto; } } .article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .article-list-item { display: flex; align-items: center; gap: 8px; } .article-list-link { font-size: 1rem; line-height: 1.375; color: inherit; text-decoration: none; } .article-list-link:hover, .article-list-link:focus-visible { text-decoration: underline; } .category-page { background: var(--color-base-100); } .category-page-inner { max-width: 1152px; margin-inline: auto; padding: var(--spacing-sqsp-8, 44px) 0 77px; } .category-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sqsp-8, 44px); align-items: start; } @media (max-width: 900px) { .category-layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sqsp-4, 22px); } } @media (max-width: 1340px) { html.chat-drawer-pushed .category-layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sqsp-4, 22px); } } .category-heading { padding: var(--spacing-sqsp-2, 11px) 0; color: var(--color-base-content); } .category-title { margin: 0; font-family: var(--font-sqsp-ui); font-size: var(--text-sqsp-9, 40px); font-weight: 400; line-height: 44px; letter-spacing: -0.03em; } .category-description { display: none; max-width: 561px; margin: var(--spacing-sqsp-2, 11px) 0 0; font-family: var(--font-sqsp-ui); font-size: 1rem; font-weight: 500; line-height: 22px; color: var(--color-base-content-muted); } .category-sections .accordion-item { border-top: 1px solid var(--color-base-400); } .category-sections .accordion-item:last-child { border-bottom: 1px solid var(--color-base-400); } .category-sections .accordion-header { gap: 10px; padding: var(--spacing-sqsp-4, 22px) 0; } .category-sections .accordion-title { font-family: var(--font-sqsp-ui); font-size: var(--text-sqsp-6, 22px); font-weight: 500; line-height: 28px; letter-spacing: -0.02em; } .category-sections .accordion-icon .icon-chevron-large-down { position: absolute; inset: 0; --icon-size: 100%; } .category-sections .accordion-header[aria-expanded=true] .accordion-icon { transform: rotate(180deg); } .category-sections .accordion-body-content { padding-bottom: var(--spacing-sqsp-4, 22px); } .category-sections .accordion-header[aria-expanded=false] + .accordion-body .accordion-body-content { padding-bottom: 0; } .category-sections .article-list { gap: 0; } .category-sections .article-list-item { padding: var(--spacing-sqsp-2, 11px) 0; } .category-sections .article-list-link { font-family: var(--font-sqsp-ui); font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .category-sections .see-all-articles { margin: var(--spacing-sqsp-3, 16px) 0; --btn-bg: var(--color-base-300); --btn-border-color: var(--btn-bg); --btn-fg: var(--color-base-content); --btn-bg-hover: var(--color-base-400); --btn-border-hover: var(--btn-bg-hover); --btn-fg-hover: var(--btn-fg); } [data-rosetta][data-brand=scheduling] .category-title, [data-rosetta][data-brand=scheduling] .category-sections .accordion-header, [data-rosetta][data-brand=scheduling] .category-sections .article-list-link { color: var(--color-secondary); } [data-rosetta][data-brand=scheduling] .category-sections .see-all-articles { --btn-bg: var(--color-secondary); --btn-border-color: var(--btn-bg); --btn-fg: var(--color-secondary-content); --btn-bg-hover: color-mix(in oklch, var(--color-secondary) 85%, black); --btn-border-hover: var(--btn-bg-hover); --btn-fg-hover: var(--color-secondary-content); } .section-page, .search-results-page { background: var(--color-base-100); } .section-page-inner { max-width: 1152px; margin-inline: auto; padding: var(--spacing-sqsp-8, 44px) 0 77px; } .section-content { color: var(--color-base-content); } .section-title { margin: 0; font-family: var(--font-sqsp-ui); font-size: var(--text-sqsp-9, 40px); font-weight: 400; line-height: 44px; letter-spacing: -0.03em; } .section-page .section-list { list-style: none; margin: 33px 0 0; padding: 0; } .section-page .section-list-item a { display: inline-block; padding: var(--spacing-sqsp-2, 11px) 0; color: inherit; text-decoration: none; } .section-page .section-list-item a:hover, .section-page .section-list-item a:focus-visible { text-decoration: underline; } .section-page .article-list { gap: 0; margin-top: 33px; } .section-page .article-list-item { padding: var(--spacing-sqsp-2, 11px) 0; } .section-page .section-list-item a, .section-page .article-list-link { font-family: var(--font-sqsp-ui); font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .pagination, .pagination-list { display: flex; align-items: center; justify-content: center; gap: 24px; } .pagination { margin: 32px 0 0; } .pagination-list { margin: 0; padding: 0; list-style: none; } .pagination-prev-link, .pagination-next-link { display: inline-flex; gap: 4px; } .pagination-first, .pagination-last { display: none; } .pagination-prev-link, .pagination-next-link { color: inherit; font-size: 0.875rem; text-decoration: none; } .pagination-prev-link:hover, .pagination-prev-link:focus-visible, .pagination-next-link:hover, .pagination-next-link:focus-visible { text-decoration: underline; } [data-rosetta][data-brand=scheduling] .section-title, [data-rosetta][data-brand=scheduling] .section-content .section-list-item a, [data-rosetta][data-brand=scheduling] .section-content .article-list-link { color: var(--color-secondary); } .error-page { display: flex; justify-content: center; padding: 96px 24px 160px; } @media (max-width: 800px) { .error-page { padding: 64px 24px 96px; } } .error-page-content { max-width: 640px; text-align: center; } .error-page-content > * { margin: 0; } .error-page-title { margin-bottom: 48px; } .error-page-title::first-letter { text-transform: uppercase; } .error-page-content > h2 { margin-bottom: 24px; } .error-page-message { margin-bottom: 32px; }