/* * Shared public-site runtime styles — the SAME file for every tenant/page (served * from the app, browser-cached), so served pages don't inline it. Loaded render-blocking * in so [data-aos] elements are hidden before first paint (no reveal flash). * * Scroll-reveal: designs mark elements data-aos; we hide then reveal on scroll. The * reveal matches BOTH conventions (.aos-animate that classic AOS uses AND .in that some * designs ship) with !important, so a design's own reveal CSS can't win a specificity war * and leave content stuck hidden. A JS safety net (runtime.js) guarantees visibility. */ /* * Editor visibility toggle: an element the operator hid in the editor carries the plain * `hidden` attribute. The HTML default (display:none) can be overridden by a design that * sets `display` on that element, so enforce it here — !important guarantees a hidden * element stays hidden on the published site regardless of the design's own CSS. */ [hidden] { display: none !important; } [data-aos] { opacity: 0; transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1); transition-delay: var(--aos-delay, 0ms); will-change: opacity, transform; } [data-aos="fade-up"] { transform: translateY(28px); } [data-aos="fade-down"] { transform: translateY(-28px); } [data-aos="fade-left"] { transform: translateX(28px); } [data-aos="fade-right"] { transform: translateX(-28px); } [data-aos="zoom-in"] { transform: scale(.94); } [data-aos="fade"] { transform: none; } [data-aos].aos-animate, [data-aos].in { opacity: 1 !important; transform: none !important; will-change: auto; } @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Smooth in-page scrolling (hero scroll-down / back-to-top anchors), motion-safe. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* * Horizontal-overflow guard: no published site may side-scroll on mobile (imported * designs often ship decorative elements hanging past the viewport edge). * * BODY-ONLY, and MUST stay body-only: while html's overflow is `visible`, body's * overflow PROPAGATES to the viewport (css-overflow-3) — so this clip blocks * side-scroll at the viewport, body itself never becomes a scroll container * (position:sticky headers keep sticking), and — critically — a design's own JS * scroll-lock (`document.body.style.overflow='hidden'` while a mobile menu is * open, the standard pattern) still reaches the viewport. ANY html-level overflow * value kills that propagation: the design's scroll-lock then applies to the body * ELEMENT, body becomes the sticky header's scroll container, and open mobile * menus detach from the viewport (verified in headless Chromium). * `clip` (not `hidden`) so no scroll container is created even before propagation. * (Older Safari drops `clip` and keeps prior behaviour — a safe no-op.) */ body { overflow-x: clip; } /* * Baseline styles for schema-rendered form islands on `plain` pages (imported / * creative designs load no utility framework, so FormRenderer emits these semantic * hooks instead of Tailwind classes). Mobile-first single-column stack; themed via * the site's CSS variables; scoped under .zar-form so no design rules collide. */ .zar-form .zar-form-step { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; } .zar-form .zar-form-legend { font-size: 1.125rem; font-weight: 600; margin-bottom: .75rem; } .zar-form .zar-form-field { display: block; margin: 0 0 1rem; } .zar-form .zar-form-label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 500; } .zar-form .zar-form-input { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: .5rem .75rem; border: 1px solid var(--border, #cbd5e1); border-radius: .5rem; background: var(--surface, #fff); color: inherit; font: inherit; font-size: max(16px, 1em); /* prevents iOS input-focus zoom */ } .zar-form .zar-form-check { width: 1rem; height: 1rem; } .zar-form .zar-form-submit { display: inline-block; border: 0; border-radius: .5rem; background: var(--primary, #2563eb); color: #fff; padding: .625rem 1.5rem; font-weight: 600; cursor: pointer; } @media (max-width: 640px) { .zar-form .zar-form-submit { width: 100%; } } /* * Facet filter chips (SearchList islands). We OWN these buttons (data-zar-facet-btn stamped * server-side) and give the SELECTED chip a reliable cue keyed off aria-pressed — because a * bespoke facet bar rarely styles our selection hook, so without this a picked category shows * no change. The cue is ADDITIVE and palette-independent: a primary-tinted fill + inset ring + * weight, and it NEVER forces a text colour (a forced white would vanish on a light --primary) * or restyles the UNSELECTED chip (which would flatten a design's own pill fill). It is NOT * !important, so a design that does style its active chip still wins; this is the fallback for * the common design that doesn't. The "All" chip is re-baselined to the unselected template * server-side (SearchList::renderRegionFacets), so it can't stay lit — exactly one chip lights. */ [data-zar-facet-btn] { cursor: pointer; -webkit-tap-highlight-color: transparent; /* no grey flash on tap */ touch-action: manipulation; /* no 300ms delay / accidental double-tap zoom */ } [data-zar-facet-btn][aria-pressed="true"] { border-color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--primary, #2563eb); /* visible even where color-mix is unsupported */ font-weight: 600; } /* * Comment section (SiteComments islands on detail pages). Themed entirely via the * site's CSS variables (with neutral fallbacks) and scoped under .zar-comments so * it matches any design without colliding with it. Inputs reuse the .zar-form * baseline above (the form wrapper also carries .zar-form). */ .zar-comments { margin-top: 3rem; max-width: 100%; box-sizing: border-box; } /* * The AUTO-INJECTED slot (DetailRenderer appends it at the end of an authored * template's
, OUTSIDE the design's own container) needs its own centered, * padded reading column + a divider — otherwise it renders full-bleed and flush * left. A marker the designer placed inside their own container doesn't carry * this class and just fills its parent. */ .zar-comments-slot { display: block; width: 100%; max-width: 48rem; margin-inline: auto; padding: 2.5rem 1.5rem 4rem; border-top: 1px solid var(--border, #e2e8f0); } .zar-comments-title { font-size: 1.375rem; font-weight: 700; margin: 0 0 1.25rem; } .zar-comments-empty { color: var(--text-muted, #64748b); margin: 0 0 1.5rem; } .zar-comments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; } .zar-comments-list--nested { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--border, #e2e8f0); } .zar-comment { display: flex; gap: .75rem; min-width: 0; } .zar-comment--pending { opacity: .72; } .zar-comment-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #2563eb) 25%, transparent); } .zar-comment-main { flex: 1; min-width: 0; } .zar-comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .zar-comment-author { font-weight: 600; } .zar-comment-time { font-size: .78rem; color: var(--text-muted, #64748b); } .zar-comment-badge { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); color: var(--text-muted, #64748b); } /* Amber mixed with the theme's own text colour so it stays readable on light AND dark sites. */ .zar-comment-badge--pending { color: color-mix(in srgb, #b45309 55%, currentColor); background: rgba(217, 119, 6, .14); } .zar-comment-body { margin-top: .3rem; line-height: 1.6; overflow-wrap: anywhere; } .zar-comment-reply { margin-top: .4rem; border: 0; background: none; padding: 0; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--primary, #2563eb); font-family: inherit; } .zar-comment-reply:hover { text-decoration: underline; } .zar-comments-more { margin-top: 1.25rem; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; padding: .5rem 1.25rem; border-radius: 999px; border: 1px solid var(--border, #e2e8f0); background: var(--surface, transparent); color: inherit; } .zar-comments-form { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border, #e2e8f0); } .zar-comments-form-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; } .zar-comments-fields { display: grid; gap: 0 1rem; } @media (min-width: 640px) { .zar-comments-fields { grid-template-columns: 1fr 1fr; } } .zar-comments-textarea { min-height: 6.5rem; resize: vertical; } .zar-comments-notice { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: .6rem; font-size: .9rem; border-left: 3px solid var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent); } .zar-comments-replying { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .85rem; background: color-mix(in srgb, currentColor 6%, transparent); } .zar-comments-replying button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline; color: var(--text-muted, #64748b); } .zar-comments-error { color: var(--error, #dc2626); margin-top: .6rem; font-size: .9rem; } /* Simple rich-text editor (contenteditable + 3-button toolbar). */ .zar-comments-editor { border: 1px solid var(--border, #cbd5e1); border-radius: .5rem; overflow: hidden; background: var(--surface, #fff); } .zar-comments-toolbar { display: flex; gap: .25rem; padding: .3rem .4rem; border-bottom: 1px solid var(--border, #e2e8f0); } .zar-comments-toolbar button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; min-width: 1.9rem; padding: .2rem .45rem; border-radius: .35rem; font-size: .85rem; line-height: 1.2; } .zar-comments-toolbar button:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .zar-comments-rich { border: 0 !important; border-radius: 0 !important; min-height: 6rem; outline: none; } .zar-comments-rich:focus { box-shadow: none; } .zar-comment-body ul, .zar-comment-body ol { padding-left: 1.25rem; margin: .35rem 0; } .zar-comment-body p { margin: .35rem 0; } .zar-comment-body a { color: var(--primary, #2563eb); text-decoration: underline; } .zar-comment-body blockquote { border-left: 3px solid var(--border, #e2e8f0); margin: .4rem 0; padding-left: .75rem; color: var(--text-muted, #64748b); } .zar-comment-body code { font-family: ui-monospace, monospace; font-size: .88em; background: color-mix(in srgb, currentColor 8%, transparent); padding: .1em .35em; border-radius: .3rem; } /* Emoji reaction chips. */ .zar-comment-reactions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; } .zar-comment-reaction { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; font: inherit; font-size: .85rem; line-height: 1; color: inherit; border: 1px solid var(--border, #e2e8f0); background: none; border-radius: 999px; padding: .28rem .55rem; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .zar-comment-reaction:hover { background: color-mix(in srgb, currentColor 6%, transparent); } .zar-comment-reaction[aria-pressed="true"] { border-color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent); box-shadow: inset 0 0 0 1px var(--primary, #2563eb); } .zar-comment-reaction-count { font-size: .75rem; font-weight: 600; } /* Author edit/delete controls + tombstone. */ .zar-comment-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; margin-top: .4rem; } .zar-comment-actions .zar-comment-reply { margin-top: 0; } .zar-comment-actionlink { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--text-muted, #64748b); } .zar-comment-actionlink:hover { text-decoration: underline; } .zar-comment-actionlink--danger { color: var(--error, #dc2626); } .zar-comment-confirm { font-size: .82rem; color: var(--text-muted, #64748b); display: inline-flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; } .zar-comment-editwrap { margin-top: .4rem; } .zar-comment-editactions { display: flex; gap: .75rem; align-items: center; margin-top: .6rem; } .zar-comment-editactions .zar-form-submit { padding: .4rem 1rem; font-size: .85rem; } .zar-comment-tombstone { margin: .1rem 0 0; font-size: .9rem; font-style: italic; color: var(--text-muted, #64748b); } .zar-comment-avatar--gone { opacity: .45; } .zar-comments-closed { margin-top: 2rem; padding: .9rem 1.1rem; border-radius: .6rem; font-size: .92rem; border: 1px dashed var(--border, #e2e8f0); color: var(--text-muted, #64748b); }