/* Minimal helpers layered on theme.css — visual language stays the original theme. */ /* Kill sideways scroll without turning into the scroll container (overflow-x: hidden forces overflow-y: auto, which steals scrolling from the root — breaking window.scrollY listeners and making position: fixed unreliable on mobile). clip clips without creating a scroller. */ body { overflow-x: hidden; overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Home grid tiles converted from JS overlays to real links */ a.sidebar-item-wrapper { text-decoration: none; } a.sidebar-item-wrapper h2 { text-decoration: none; } /* The original theme positioned the home split via JS (SPA slide logic). Pin it with CSS instead, since pages are now real URLs. */ @media (min-width: 992px) { #baseContent { left: 0; top: 0; } #gridNav { right: 0; top: 0; } } /* Recreate the original SPA open/close animation across real page loads: home panels slide in on load (and back-nav), slide out on tile click (JS in index.html), and inner-page content slides in like the old overlay. */ @media (prefers-reduced-motion: no-preference) { #baseContent { animation: xenInLeft 0.55s ease-out both; } #gridNav { animation: xenInRight 0.55s ease-out both; } .page-content { animation: xenPageIn 0.5s ease-out both; } .sticky-area .bg-holder, .sticky-area .page-title { animation: xenFadeIn 0.6s ease-out both; } } @keyframes xenInLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } @keyframes xenInRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes xenPageIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } } @keyframes xenFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes xenPageOut { to { opacity: 0; transform: translateX(40px); } } /* --- Cross-document View Transitions (Chrome/Edge/Safari) --- Used purely as a seam: both snapshots stay static, so the swap between pages never flashes white. All visible motion stays with the original panel/content animations above and the manual slide in xen-nav.js — animating the snapshots as well would double the motion and flicker. Browsers without support just navigate normally. */ @view-transition { navigation: auto; } ::view-transition-image-pair(root) { isolation: auto; } ::view-transition-old(root), ::view-transition-new(root) { display: block; mix-blend-mode: normal; animation: none; } /* Floating fixed controls must not ride inside the root snapshot: there they're anchored to the snapshot containing block (the window, not the layout viewport) and paint offset or clipped while the transition runs. Naming them captures each as its own correctly-anchored snapshot. */ a.sticky-area .btn-close { view-transition-name: xen-close; } .xen-theme-toggle { view-transition-name: xen-theme-toggle; } #xen-chat-fab { view-transition-name: xen-chat-fab; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } } /* The manual card slide/exit driven by xen-nav.js. Snappier than the theme's 0.6s default. */ #baseContent { transition: left 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important; } #gridNav { transition: right 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important; } body.xen-exit .page-content { animation: xenPageOut 0.32s cubic-bezier(0.4, 0, 1, 1) both; } @media (prefers-reduced-motion: reduce) { #baseContent, #gridNav { transition: none !important; } body.xen-exit .page-content { animation: none; } } /* Sidebar close/back area on content pages is now a link home */ a.sticky-area { display: block; text-decoration: none; } a.sticky-area .page-title { color: #fff; } a.sticky-area:hover .page-title { color: #fff; text-decoration: none; } /* Make the close control read clearly as "back" on every screen size. */ a.sticky-area .btn-close { top: calc(env(safe-area-inset-top) + 16px); right: calc(env(safe-area-inset-right) + 16px); margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1; background: #fff !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .24) !important; transition: transform .2s ease, box-shadow .2s ease !important; } a.sticky-area .btn-close img { display: block; width: 20px; height: 20px; margin: 0; transform: none !important; transform-origin: center; } a.sticky-area .btn-close .times { filter: invert(1); opacity: .88; } /* On phones the title bar is shorter than the close circle, so the button used to hang half off the purple band onto the page background. Keep the bar tall enough to contain it fully. */ @media (max-width: 991.98px) { a.sticky-area { min-height: calc(env(safe-area-inset-top) + 76px); } } .sticky-area:hover .btn-close img.times { transform: none !important; opacity: .88; } a.sticky-area:hover .btn-close, a.sticky-area:focus-visible .btn-close { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0, 0, 0, .32) !important; } a.sticky-area:focus-visible { outline: 3px solid #2c7be5; outline-offset: -3px; } a.sticky-area::after { content: "Back to home"; position: fixed; top: calc(env(safe-area-inset-top) + 1.45rem); right: calc(env(safe-area-inset-right) + 4.75rem); z-index: 9999; padding: .42rem .68rem; border-radius: .3rem; background: rgba(20, 29, 45, .94); color: #fff; font: 600 .72rem/1.2 Raleway, sans-serif; letter-spacing: .03em; white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } a.sticky-area:hover::after, a.sticky-area:focus-visible::after { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { a.sticky-area .btn-close { animation: xenCloseArrive .45s .3s ease-out both; } a.sticky-area .btn-close::after { content: ""; position: absolute; inset: -1px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; animation: xenClosePulse 1s .8s ease-out 2; pointer-events: none; } @media (max-width: 991.98px) { a.sticky-area::after { animation: xenBackHint 3.4s .55s ease both; } } } @keyframes xenCloseArrive { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } } @keyframes xenClosePulse { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } } @keyframes xenBackHint { 0%, 100% { opacity: 0; transform: translateX(8px); } 12%, 78% { opacity: 1; transform: none; } } /* Visible page hierarchy for visitors and search engines. */ .xen-breadcrumb { margin: 0 0 2rem; text-align: left; } .xen-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; list-style: none; } .xen-breadcrumb li { color: #667085; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .xen-breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: #98a2b3; } .xen-breadcrumb a { color: #1769c2; text-decoration: underline; text-underline-offset: 2px; } .xen-breadcrumb a:hover { color: #1a68d1; } /* Portfolio images carry intrinsic dimensions to prevent layout shift. Keep their rendered height proportional when w-100 shrinks the width. */ .sortable-container .sortable-item img { height: auto; } /* Named work with factual scope summaries; no unverified outcome claims. */ .xen-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; text-align: left; } .xen-proof-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #d8e2ef; border-radius: .45rem; box-shadow: 0 10px 28px rgba(20,29,45,.08); } .xen-proof-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .xen-proof-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem; } .xen-proof-card-kicker { margin: 0 0 .45rem; color: #1769c2; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .xen-proof-card h3 { margin-bottom: .55rem; font-size: 1.05rem; } .xen-proof-card p { margin-bottom: 1rem; color: #667085; font-size: .88rem; line-height: 1.55; } .xen-proof-card a { margin-top: auto; color: #1769c2; font-size: .78rem; font-weight: 700; text-decoration: none !important; } .xen-proof-card a:hover { color: #141d2d; text-decoration: underline !important; } .xen-proof-note { color: #667085; font-size: .78rem; line-height: 1.55; } @media (max-width: 767.98px) { .xen-proof-grid { grid-template-columns: 1fr; } } /* Page footer flows after content instead of absolute-bottom (multi-page layout). The theme reserved bottom padding on .page-content for the old absolute footer; inline now, that leaves a white band below/around the footer. */ .page-footer.xen-flow { position: relative; } .page-content { padding-bottom: 0 !important; } .page-content > section:last-of-type { padding-bottom: 3rem !important; } .page-footer.xen-flow a { color: rgba(255,255,255,.85); } .page-footer.xen-flow a:hover { color: #fff; } /* Year-one total line on pricing cards */ .xen-year1 { font-size: 0.8rem; color: #667085; border-top: 1px dashed #d8e2ef; padding-top: 0.6rem; margin: 0.75rem 1.5rem 0; } /* FAQ (native details, styled to match card language) */ .xen-faq details { border: 1px solid #d8e2ef; border-radius: 0.25rem; padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: #fff; text-align: left; } .xen-faq summary { font-weight: 600; cursor: pointer; outline-offset: 4px; } .xen-faq details[open] summary { margin-bottom: 0.5rem; } /* Honeypot */ .xen-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; } /* Scroll-down indicator on the home hero (desktop only) */ .xen-scroll { flex-direction: column; align-items: center; margin-top: 2rem; text-decoration: none; color: #9aa3af; transition: opacity 0.3s ease, color 0.2s ease; } .xen-social { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .xen-scroll:hover { text-decoration: none; color: #2c7be5; } .xen-scroll.is-hidden { opacity: 0; pointer-events: none; } .xen-mouse { width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 14px; position: relative; } .xen-mouse::before { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; background: currentColor; border-radius: 2px; animation: xenWheel 1.6s ease-in-out infinite; } .xen-scroll-label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.55rem; } @keyframes xenWheel { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 70% { opacity: 1; transform: translateY(13px); } 100% { opacity: 0; transform: translateY(13px); } } @media (prefers-reduced-motion: reduce) { .xen-mouse::before { animation: none; top: 12px; } } /* Prominent home-page entry point into the live assistant. */ .xen-ai-entry { max-width: 42rem; margin: 1.35rem auto 1.1rem; padding: 0; text-align: left; background: transparent; border: 0; box-shadow: none; } .xen-ai-entry-label { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .55rem; line-height: 1.25; } .xen-ai-entry-kicker { display: inline-flex; align-items: center; margin: 0; padding: .3rem .58rem; color: #1769c2; background: rgba(44,123,229,.08); border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .xen-ai-entry-title { color: #526173; font-size: .75rem; font-weight: 600; } .xen-ai-entry-row { display: flex; align-items: center; min-width: 0; min-height: 3.65rem; padding: .34rem; overflow: hidden; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#9b75d0,#2c7be5,#55c6bc) border-box; border: 1px solid transparent; border-radius: 999px; box-shadow: 0 12px 32px rgba(20,29,45,.12); transition: box-shadow .2s ease, transform .2s ease; } .xen-ai-entry-row::before { content: "\2726"; flex: 0 0 auto; margin-left: .85rem; color: #7564cc; font-size: 1rem; } .xen-ai-entry-row:focus-within { box-shadow: 0 14px 38px rgba(44,123,229,.2), 0 0 0 4px rgba(117,100,204,.1); transform: translateY(-1px); } .xen-ai-entry-row input { flex: 1; min-width: 0; padding: .75rem .75rem; color: #141d2d; background: transparent; border: 0; outline: 0; font: inherit; font-size: .86rem; } .xen-ai-entry-row input::placeholder { color: #7c8796; opacity: 1; } .xen-ai-entry-row button { flex: 0 0 auto; align-self: stretch; min-width: 6.75rem; padding: .65rem 1rem; color: #fff; background: linear-gradient(135deg,#7564cc,#2c7be5); border: 0; border-radius: 999px; box-shadow: 0 5px 14px rgba(44,123,229,.25); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } .xen-ai-entry-row button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(44,123,229,.32); } .xen-ai-entry-row button:focus-visible { outline: 3px solid #141d2d; outline-offset: 2px; } .xen-ai-entry-hint { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem 1rem; margin: .55rem 0 0; color: #667085; font-size: .64rem; line-height: 1.35; } .xen-ai-entry-hint span + span::before { content: "\2022"; margin-right: 1rem; color: #a7b0bc; } .xen-hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: 1.15rem 0 .9rem; } .xen-hero-action, .xen-hero-action-link { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.05rem; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .xen-hero-action:hover, .xen-hero-action-link:hover { transform: translateY(-1px); text-decoration: none; } .xen-hero-action-primary { color: #fff; background: #141d2d; box-shadow: 0 7px 18px rgba(20,29,45,.18); } .xen-hero-action-primary:hover { color: #fff; background: #2c7be5; box-shadow: 0 9px 22px rgba(44,123,229,.22); } .xen-hero-action-secondary { color: #1a5f38; background: #fff; border: 1px solid #cad5e2; } .xen-hero-action-secondary::before { content: ""; width: .46rem; height: .46rem; background: #25d366; border-radius: 50%; box-shadow: 0 0 0 3px rgba(37,211,102,.12); } .xen-hero-action-secondary:hover { color: #174f31; border-color: #8fd8aa; } .xen-hero-action-link { padding-right: .3rem; padding-left: .3rem; color: #526173; } .xen-hero-action-link:hover { color: #2c7be5; } .xen-ai-entry-dark { max-width: 46rem; margin: 2rem 0 1.35rem; } .xen-ai-entry-dark .xen-ai-entry-kicker { color: #c8f04b; background: rgba(200,240,75,.1); } .xen-ai-entry-dark .xen-ai-entry-title { color: #9aa3af; } .xen-ai-entry-dark .xen-ai-entry-row { background: linear-gradient(#12151a,#12151a) padding-box, linear-gradient(135deg,#c8f04b,#59636f) border-box; box-shadow: 0 14px 36px rgba(0,0,0,.32); } .xen-ai-entry-dark .xen-ai-entry-row::before { color: #c8f04b; } .xen-ai-entry-dark .xen-ai-entry-row:focus-within { box-shadow: 0 16px 40px rgba(0,0,0,.38), 0 0 0 4px rgba(200,240,75,.1); } .xen-ai-entry-dark .xen-ai-entry-row input { color: #f2f3f5; } .xen-ai-entry-dark .xen-ai-entry-row input::placeholder { color: #7f8996; } .xen-ai-entry-dark .xen-ai-entry-row button { color: #1a2005; background: #c8f04b; box-shadow: 0 5px 16px rgba(200,240,75,.16); } .xen-ai-entry-dark .xen-ai-entry-row button:hover { box-shadow: 0 7px 20px rgba(200,240,75,.22); } .xen-ai-entry-dark .xen-ai-entry-hint { color: #8c96a3; } .xen-ai-entry-dark .xen-ai-entry-hint span + span::before { color: #59636f; } .xen-v2-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; } .xen-v2-actions .btn { margin: 0; padding: .72rem 1.15rem; } /* Live AI service guide */ #xen-chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1080; display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .65rem 1rem; color: #fff; background: #141d2d; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; box-shadow: 0 12px 30px rgba(20,29,45,.28); font: 700 .82rem/1 Raleway, sans-serif; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } #xen-chat-fab[hidden] { display: none !important; } #xen-chat-fab:hover { background: #2c7be5; box-shadow: 0 15px 34px rgba(44,123,229,.3); transform: translateY(-2px); } .xen-chat-fab-icon { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; color: #2c7be5; background: #fff; border-radius: 50%; font-size: .8rem; } #xen-chat-fab:hover .xen-chat-fab-icon { color: #7564cc; } #xen-chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 1090; display: flex; flex-direction: column; width: min(440px, calc(100vw - 40px)); height: min(680px, calc(100vh - 40px)); overflow: hidden; color: #141d2d; background: rgba(255,255,255,.98); border: 1px solid rgba(154,173,199,.48); border-radius: 22px; box-shadow: 0 24px 70px rgba(20,29,45,.3); backdrop-filter: blur(18px); animation: xenChatIn .24s cubic-bezier(.2,.8,.2,1) both; } #xen-chat-panel[hidden] { display: none !important; } @keyframes xenChatIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } #xen-chat-head { position: relative; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 1rem 1.1rem; border-bottom: 1px solid #e7edf5; } .xen-chat-identity { display: flex; align-items: center; gap: .7rem; } .xen-chat-avatar, .xen-msg-avatar { display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(135deg,#7564cc,#2c7be5); border-radius: 50%; font: 700 .72rem/1 Raleway, sans-serif; box-shadow: 0 5px 14px rgba(44,123,229,.22); } .xen-chat-avatar { width: 2.25rem; height: 2.25rem; } .xen-msg-avatar { width: 1.55rem; height: 1.55rem; margin-top: .1rem; font-size: .58rem; } #xen-chat-head strong { display: block; font-size: .92rem; line-height: 1.2; } #xen-chat-head small { display: flex; align-items: center; gap: .35rem; margin-top: .22rem; color: #748194; font-size: .66rem; line-height: 1; } #xen-chat-head small i { width: .42rem; height: .42rem; background: #25c26e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(37,194,110,.12); } #xen-chat-close { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; padding: 0; color: #526173; background: #f3f6fa; border: 0; border-radius: 50%; font: 400 1.35rem/1 Arial, sans-serif; cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease; } #xen-chat-close:hover { color: #141d2d; background: #e8eef6; transform: rotate(4deg); } #xen-chat-body { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; background: linear-gradient(180deg,#f9fbfd 0%,#f5f8fc 100%); } #xen-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7d2e1 transparent; } .xen-msg-row { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .85rem; } .xen-msg-row-user { justify-content: flex-end; } .xen-msg { max-width: 84%; padding: .72rem .85rem; border-radius: 15px; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .xen-msg-assistant { color: #243047; background: #fff; border: 1px solid #e0e7f0; border-top-left-radius: 5px; box-shadow: 0 5px 15px rgba(20,29,45,.05); } .xen-msg-user { color: #fff; background: #141d2d; border-bottom-right-radius: 5px; box-shadow: 0 5px 14px rgba(20,29,45,.13); } .xen-msg-loading { display: flex; align-items: center; gap: .28rem; min-width: 3.2rem; min-height: 2.4rem; } .xen-msg-loading i { width: .38rem; height: .38rem; background: #8290a2; border-radius: 50%; animation: xenChatDot 1.1s ease-in-out infinite; } .xen-msg-loading i:nth-child(2) { animation-delay: .14s; } .xen-msg-loading i:nth-child(3) { animation-delay: .28s; } @keyframes xenChatDot { 0%, 65%, 100% { opacity: .35; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-3px); } } .xen-chat-recommendation { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .75rem; padding: .75rem; color: #141d2d; background: linear-gradient(135deg,#f5f2ff,#eef7ff); border: 1px solid #d5d4f2; border-radius: 12px; text-decoration: none !important; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .xen-chat-recommendation:hover { color: #141d2d; border-color: #7564cc; box-shadow: 0 8px 18px rgba(117,100,204,.12); transform: translateY(-1px); } .xen-chat-recommendation span { min-width: 0; } .xen-chat-recommendation small { display: block; margin-bottom: .2rem; color: #7564cc; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .xen-chat-recommendation strong { display: block; font-size: .73rem; line-height: 1.35; } .xen-chat-recommendation b { display: grid; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; place-items: center; color: #fff; background: #7564cc; border-radius: 50%; } .xen-scope-invite { display: grid; gap: .4rem; } .xen-scope-invite > strong { font-size: .78rem; } .xen-scope-invite > span { color: #66758a; font-size: .72rem; line-height: 1.45; } .xen-scope-start { width: 100%; margin-top: .25rem; padding: .62rem .7rem; color: #fff; background: linear-gradient(135deg,#7564cc,#2c7be5); border: 0; border-radius: 10px; font: 700 .68rem/1.2 Raleway, sans-serif; cursor: pointer; box-shadow: 0 7px 16px rgba(44,123,229,.18); } .xen-scope-start:hover { transform: translateY(-1px); } .xen-scope-start:disabled { opacity: .55; cursor: default; transform: none; } .xen-scope-row { margin-left: 2.05rem; } .xen-scope-form, .xen-scope-summary { width: min(100%, 340px); padding: .9rem; color: #243047; background: #fff; border: 1px solid #dce5f0; border-radius: 16px; box-shadow: 0 8px 22px rgba(20,29,45,.08); } .xen-scope-form-head { display: grid; gap: .2rem; margin-bottom: .75rem; } .xen-scope-form-head small, .xen-scope-summary-head small { color: #7564cc; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .xen-scope-form-head strong, .xen-scope-summary-head strong { font-size: .82rem; line-height: 1.35; } .xen-scope-form > label, .xen-scope-fields label { display: grid; gap: .3rem; margin: 0 0 .65rem; color: #56657a; font-size: .62rem; font-weight: 700; } .xen-scope-form input, .xen-scope-form textarea, .xen-scope-form select { width: 100%; min-width: 0; padding: .62rem .65rem; color: #243047; background: #f8fafc; border: 1px solid #d4deea; border-radius: 9px; outline: 0; font: 400 .72rem/1.35 Raleway, sans-serif; resize: vertical; } .xen-scope-form input:focus, .xen-scope-form textarea:focus, .xen-scope-form select:focus { border-color: #7564cc; box-shadow: 0 0 0 3px rgba(117,100,204,.1); } .xen-scope-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .xen-scope-form > p { margin: -.05rem 0 .65rem; color: #8290a2; font-size: .56rem; line-height: 1.45; } .xen-scope-form > button { width: 100%; padding: .7rem; color: #fff; background: #141d2d; border: 0; border-radius: 10px; font: 700 .68rem/1.2 Raleway, sans-serif; cursor: pointer; } .xen-scope-form > button:hover { background: #2c7be5; } .xen-scope-summary { display: grid; gap: .65rem; } .xen-scope-summary-head { display: grid; gap: .18rem; padding-bottom: .65rem; border-bottom: 1px solid #e6ecf3; } .xen-scope-summary > p { margin: 0; font-size: .7rem; line-height: 1.5; } .xen-scope-summary dl { display: grid; gap: .38rem; margin: 0; } .xen-scope-summary dl div { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; } .xen-scope-summary dt { color: #718096; font-size: .58rem; font-weight: 600; } .xen-scope-summary dd { margin: 0; color: #243047; font-size: .6rem; font-weight: 800; text-align: right; } .xen-scope-note { padding: .55rem .6rem; color: #59677a; background: #f5f7fb; border-radius: 9px; font-size: .58rem !important; } .xen-scope-page-link { color: #2c7be5; font-size: .62rem; font-weight: 800; text-decoration: none; } .xen-scope-edit { justify-self: start; padding: 0; color: #718096; background: transparent; border: 0; border-bottom: 1px solid currentColor; font: 600 .58rem/1.4 Raleway, sans-serif; cursor: pointer; } #xen-chat-starters { flex: 0 0 auto; padding: 0 1rem 1rem 3.05rem; } #xen-chat-starters[hidden] { display: none; } #xen-chat-starters > p { margin: 0 0 .45rem; color: #8290a2; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } #xen-chat-starters > div { display: flex; flex-wrap: wrap; gap: .4rem; } #xen-chat-starters button { padding: .48rem .65rem; color: #48566a; background: #fff; border: 1px solid #d7e0eb; border-radius: 999px; font: 600 .68rem/1.25 Raleway, sans-serif; cursor: pointer; transition: color .18s ease, border-color .18s ease, transform .18s ease; } #xen-chat-starters button:hover { color: #2c7be5; border-color: #8ab8f5; transform: translateY(-1px); } #xen-chat-composer { flex: 0 0 auto; padding: .8rem 1rem .65rem; background: #fff; border-top: 1px solid #e7edf5; } #xen-chat-form { display: flex; align-items: center; gap: .5rem; padding: .32rem; background: #f5f8fc; border: 1px solid #d7e0eb; border-radius: 999px; transition: border-color .18s ease, box-shadow .18s ease; } #xen-chat-form:focus-within { border-color: #7564cc; box-shadow: 0 0 0 3px rgba(117,100,204,.1); } #xen-chat-input { flex: 1; min-width: 0; padding: .62rem .35rem .62rem .75rem; color: #141d2d; background: transparent; border: 0; outline: 0; font: inherit; font-size: .8rem; } #xen-chat-input::placeholder { color: #8b97a7; } #xen-chat-send { display: grid; flex: 0 0 auto; width: 2.35rem; height: 2.35rem; place-items: center; padding: 0; color: #fff; background: linear-gradient(135deg,#7564cc,#2c7be5); border: 0; border-radius: 50%; box-shadow: 0 5px 12px rgba(44,123,229,.22); font-size: 1rem; cursor: pointer; transition: transform .18s ease, opacity .18s ease; } #xen-chat-send:hover { transform: translateY(-1px); } #xen-chat-send:disabled { opacity: .45; cursor: wait; transform: none; } #xen-chat-composer > p { margin: .45rem .5rem 0; color: #8b97a7; font-size: .58rem; line-height: 1.35; text-align: center; } #xen-chat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; flex: 0 0 auto; padding: .7rem 1rem 1rem; background: #fff; } #xen-chat-actions a { display: flex; align-items: center; justify-content: center; min-height: 2.65rem; padding: .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-align: center; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; } #xen-chat-actions a:hover { text-decoration: none; transform: translateY(-1px); } .xen-chat-action-primary { color: #fff; background: #14733c; border: 1px solid #14733c; } .xen-chat-action-primary:hover { color: #fff; background: #0e5b2e; } .xen-chat-action-secondary { color: #243047; background: #fff; border: 1px solid #cfd9e6; } .xen-chat-action-secondary:hover { color: #2c7be5; border-color: #8ab8f5; } @media (max-width: 767.98px) { body.xen-chat-open { overflow: hidden; } #xen-chat-panel { right: 0; bottom: 0; width: 100%; height: min(88dvh, 760px); max-height: calc(100dvh - env(safe-area-inset-top)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 55px rgba(20,29,45,.28); animation-name: xenChatSheetIn; } @keyframes xenChatSheetIn { from { opacity: .7; transform: translateY(100%); } to { opacity: 1; transform: none; } } #xen-chat-head { padding-top: .85rem; } #xen-chat-head::before { content: ""; position: absolute; top: .42rem; left: 50%; width: 2.5rem; height: .22rem; background: #d2dae5; border-radius: 999px; transform: translateX(-50%); } #xen-chat-log { padding: .85rem; } #xen-chat-starters { padding-right: .85rem; padding-bottom: .85rem; padding-left: 2.9rem; } #xen-chat-composer { padding-right: .85rem; padding-left: .85rem; } #xen-chat-actions { padding-right: .85rem; padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); padding-left: .85rem; } .xen-scope-row { margin-left: 0; } .xen-scope-form, .xen-scope-summary { width: 100%; } } /* Readability and keyboard focus. */ .text-muted, .text-600 { color: #667085 !important; } .btn-success { background-color: #14733c; border-color: #14733c; color: #fff; } .btn-success:hover, .btn-success:focus { background-color: #0e5b2e; border-color: #0e5b2e; color: #fff; } .page-content p a:not(.btn), main > section p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; } #xen-chat-fab:focus-visible, #xen-chat-close:focus-visible, #xen-chat-send:focus-visible, .xen-scope-start:focus-visible, .xen-scope-form button:focus-visible, .xen-scope-edit:focus-visible { outline: 3px solid #141d2d; outline-offset: 3px; } @media (max-width: 575.98px) { .xen-breadcrumb { margin-bottom: 1.35rem; } .xen-ai-entry { margin-top: 1.1rem; } .xen-ai-entry-label { align-items: flex-start; } .xen-ai-entry-title { display: none; } .xen-ai-entry-row { min-height: 3.35rem; padding: .28rem; } .xen-ai-entry-row::before { display: none; } .xen-ai-entry-row input { padding: .68rem .35rem .68rem .75rem; font-size: .78rem; } #xen-home-ai-prompt::placeholder { font-size: 0; } #xen-home-ai-prompt::-webkit-input-placeholder { font-size: 0; } #xen-home-ai-prompt::-moz-placeholder { font-size: 0; } #xen-home-ai-prompt:-ms-input-placeholder { font-size: 0; } #xen-home-ai-prompt::placeholder { color: transparent; } #xen-home-ai-prompt { background: transparent; } .xen-ai-entry:not(.xen-ai-entry-dark) .xen-ai-entry-row:has(#xen-home-ai-prompt)::after { content: "What task wastes your time?"; position: absolute; left: .75rem; right: 3.8rem; color: #7c8796; font-size: .76rem; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xen-ai-entry:not(.xen-ai-entry-dark) .xen-ai-entry-row:has(#xen-home-ai-prompt:focus)::after, .xen-ai-entry:not(.xen-ai-entry-dark) .xen-ai-entry-row:has(#xen-home-ai-prompt:not(:placeholder-shown))::after { display: none; } .xen-ai-entry-row { position: relative; } .xen-ai-entry-row button { min-width: 3.05rem; width: 3.05rem; padding: .62rem; font-size: .85rem; } .xen-ai-button-label { display: none; } .xen-ai-entry-hint { gap: .35rem .65rem; font-size: .59rem; } .xen-ai-entry-hint span + span::before { margin-right: .65rem; } .xen-hero-actions { gap: .5rem; margin-top: 1rem; } .xen-hero-action, .xen-hero-action-link { padding: .68rem .85rem; font-size: .71rem; } .xen-v2-actions { gap: .5rem; } .xen-v2-actions .btn { padding: .68rem .9rem; font-size: .82rem; } #xen-chat-fab { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 0; font-size: 1.05rem; } #xen-chat-fab .xen-chat-label { display: none; } .xen-chat-fab-icon { width: 1.75rem; height: 1.75rem; margin: auto; } #xen-chat-starters > div { flex-direction: column; align-items: flex-start; } #xen-chat-starters button { max-width: 100%; text-align: left; } .xen-scope-fields { grid-template-columns: 1fr; gap: 0; } } /* Simple pricing add-on table in theme tones */ .xen-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .xen-table th, .xen-table td { border: 1px solid #d8e2ef; padding: 0.6rem 0.9rem; text-align: left; } .xen-table th { background: #f9fafd; } .xen-table-wrap { overflow-x: auto; }