/* Composer Agents — shared site stylesheet Header, footer, buttons, cards, glass system, animations, mobile menu, sticky CTA, FAQ accordion, contact form, pricing/demo popups. Load AFTER tokens.css. Pure CSS, no framework. */ * { box-sizing: border-box; } html, body { margin: 0; } /* Mobile browsers resize the viewport when the address bar hides/shows on scroll; if only carries the background, that resize can briefly expose 's own (white) canvas at the bottom edge until body's box catches up. Give html the same dark base so nothing ever shows through. */ html { background: var(--cw-c1); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--cw-font); background: radial-gradient(140% 100% at 50% -10%, #12293f 0%, #071322 45%, var(--cw-c1) 100%) !important; background-attachment: fixed !important; color: var(--cw-c3); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--cw-c2); } a:hover { color: var(--cw-c3); } /* ===================== BUTTONS ===================== */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-family: var(--cw-font); font-weight: var(--cw-weight-button); letter-spacing: var(--cw-button-tracking); text-transform: var(--cw-button-transform); text-decoration: none; line-height: 1; padding: 14px 26px; font-size: 13px; border-radius: var(--cw-radius); cursor: pointer; border: 2px solid transparent; transition: background var(--cw-dur) var(--cw-ease), color var(--cw-dur) var(--cw-ease), border-color var(--cw-dur) var(--cw-ease), transform 120ms var(--cw-ease); user-select: none; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.98); } .btn.btn-lg { padding: 18px 36px; font-size: 14px; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Glossy sheen — a soft diagonal highlight that sweeps across on hover. Applied via the shared .btn base so every variant gets it automatically; icon-only close/menu buttons (.cw-modal-close, .cw-nav-mobile-close, .cw-menu-btn) don't use .btn, so they're excluded by construction. */ .btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%); transform: skewX(-20deg); pointer-events: none; transition: left 0.65s var(--cw-ease); } .btn:hover::before { left: 130%; } .btn-ghost::before, .btn-ghost-dark::before, .btn-accent::before { background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%); } .btn-primary { background: var(--cw-c3); color: var(--cw-c1); border-color: var(--cw-c3); } .btn-primary:hover { background: var(--cw-c1); color: var(--cw-c3); } .btn-solid { background: var(--cw-c3); color: var(--cw-c1); border-color: var(--cw-c3); } .btn-solid:hover { background: var(--cw-c2); color: var(--cw-c3); border-color: var(--cw-c2); } .btn-ghost { background: transparent; color: var(--cw-c3); border-color: var(--cw-c3); } .btn-ghost:hover { background: var(--cw-c3); color: var(--cw-c1); } .btn-ghost-dark { background: transparent; color: var(--cw-c1); border-color: var(--cw-c1); } .btn-ghost-dark:hover { background: var(--cw-c2); color: var(--cw-c3); border-color: var(--cw-c2); } .btn-accent { background: transparent; color: var(--accent, var(--cw-c2)); border-color: var(--accent, var(--cw-c2)); } .btn-accent:hover { background: var(--accent, var(--cw-c2)); color: var(--cw-c3); } .btn-gold-solid { background: var(--cw-c2); color: var(--cw-c3); border-color: var(--cw-c2); } .btn-gold-solid:hover { background: var(--cw-c1); color: var(--cw-c3); border-color: var(--cw-c1); } .btn-navy-solid { background: var(--cw-c1); color: var(--cw-c3); border-color: var(--cw-c1); } .btn-navy-solid:hover { background: var(--cw-c2); color: var(--cw-c3); border-color: var(--cw-c2); } .btn-gold-invert { background: var(--cw-c2); color: var(--cw-c3); border-color: var(--cw-c2); } .btn-gold-invert:hover { background: var(--cw-c3); color: var(--cw-c1); border-color: var(--cw-c3); } /* ===================== HEADER ===================== */ .cw-header-fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 40; border-bottom: 1px solid transparent; background: transparent; transition: background-color 0.4s ease, border-color 0.4s ease, padding var(--cw-dur) var(--cw-ease); } .cw-header-fixed.cw-scrolled { background: rgba(0,10,22,0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,0.08); } .cw-header-pad { display: flex; align-items: center; justify-content: space-between; max-width: none; margin: 0; padding: 26px clamp(18px,3vw,44px); transition: padding var(--cw-dur) var(--cw-ease); gap: 20px; } .cw-header-fixed.cw-scrolled .cw-header-pad { padding: 12px clamp(18px,3vw,44px); } .cw-header-spacer { height: 88px; } .cw-logo-group { display: flex; align-items: baseline; gap: 8px; } .cw-logo-link { font-family: var(--cw-font); font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--cw-c3); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color var(--cw-dur) var(--cw-ease); } .cw-logo-link:hover { color: var(--cw-c2); } .cw-bycw { font-size: 10px; display: inline-flex; align-items: baseline; color: rgba(255,255,255,0.45); text-decoration: none; font-family: var(--cw-font); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; transition: color var(--cw-dur) var(--cw-ease); } .cw-bycw:hover, .cw-bycw:hover .cw-letter { color: var(--cw-c2); } .cw-bycw .cw-by-prefix { display: inline-block; } .cw-bycw .cw-letters { display: inline-flex; } /* each letter is individually collapsible */ .cw-bycw .cw-letter { display: inline-block; max-width: 24px; opacity: 1; white-space: pre; transform: translateY(0) translateX(0) rotate(0deg); transition: max-width 0.6s var(--cw-ease) var(--rd,0ms), opacity 0.5s ease var(--rd,0ms), transform 0.6s var(--cw-ease) var(--rd,0ms), color var(--cw-dur) var(--cw-ease); } /* on scroll (or when space is tight) every letter except .cw-keep collapses to 0 with a gust: translate up/sideways + rotate, staggered per letter */ .cw-header-fixed.cw-scrolled .cw-bycw .cw-letter:not(.cw-keep), .cw-header-fixed.cw-bycw-min .cw-bycw .cw-letter:not(.cw-keep) { max-width: 0; opacity: 0; transform: translateY(var(--ty,-16px)) translateX(var(--tx,4px)) rotate(var(--rot,12deg)); transition-delay: var(--d,0ms); } .cw-nav-desktop { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; } .cw-nav-link { display: inline-block; transform-origin: left center; font-family: var(--cw-font); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,0.6); transition: color var(--cw-dur) var(--cw-ease), transform var(--cw-dur) var(--cw-ease); } .cw-nav-link:hover, .cw-nav-link.active { color: #fff; transform: scale(1.08); } .cw-signin-btn { display: inline-flex; align-items: center; background: #fff; color: var(--cw-c1); font-family: var(--cw-font); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 9px 18px; border-radius: 10px; cursor: pointer; border: none; transition: background var(--cw-dur) var(--cw-ease), color var(--cw-dur) var(--cw-ease); white-space: nowrap; text-decoration: none; } .cw-signin-btn:hover { background: var(--cw-c2); color: #fff; } .cw-signin-btn .cw-signin-gold { color: var(--cw-c2); margin-left: 4px; transition: color var(--cw-dur) var(--cw-ease); } .cw-signin-btn:hover .cw-signin-gold { color: #fff; } .cw-signin-current { cursor: default; background: rgba(255,255,255,0.08); color: var(--cw-c3); } .cw-signin-current:hover { background: rgba(255,255,255,0.08); color: var(--cw-c3); } /* Mobile menu */ .cw-menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.18); color: var(--cw-c3); cursor: pointer; flex-shrink: 0; background: transparent; } /* Kept visually identical whether scrolled or not — no delayed color invert. */ .cw-menu-backdrop { position: fixed; inset: 0; background: rgba(0,10,22,0.55); z-index: 44; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .cw-menu-backdrop.open { opacity: 1; pointer-events: auto; } .cw-nav-mobile { position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw,300px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 64px 28px 28px; background: rgba(6,15,26,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 1px solid rgba(255,255,255,0.1); transform: translateX(100%); transition: transform 0.32s var(--cw-ease); z-index: 45; } .cw-nav-mobile.open { transform: translateX(0); } .cw-nav-mobile .cw-nav-link { font-size: 15px; padding: 14px 0; width: 100%; } .cw-nav-mobile-close { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; } .cw-nav-mobile-account { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 16px; width: 100%; } .cw-nav-mobile-login { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cw-font); } .cw-nav-mobile-login .cw-pill { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #fff; border: 2px solid #fff; border-radius: var(--cw-radius); padding: 9px 20px; background: none; transition: background var(--cw-dur) var(--cw-ease), color var(--cw-dur) var(--cw-ease); } .cw-nav-mobile-login .cw-pill:hover { background: var(--cw-c1); color: #fff; } .cw-nav-mobile-login .cw-sub { font-size: 10px; font-weight: 400; letter-spacing: 0.5px; color: rgba(255,255,255,0.45); } .cw-nav-mobile-brand { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 4px; } .cw-nav-mobile-brand .cw-name { font-family: var(--cw-font); font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--cw-c3); } .cw-nav-mobile-brand .cw-by { font-family: var(--cw-font); font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.45); } /* Desktop: this slot only ever holds the mobile hamburger (hidden here via .cw-menu-btn's own display:none), but as an empty flex child it still claimed space under justify-content:space-between, pushing the real nav away from the right edge. Remove it from flow entirely on desktop. */ .cw-header-mobile-menu-slot { display: none; } @media (max-width: 768px) { .cw-nav-desktop { display: none; } .cw-menu-btn { display: inline-flex; } .cw-header-pad { justify-content: flex-start; position: relative; padding: 16px 20px; } /* mobile: header does NOT shrink on scroll (only the hamburger inverts) */ .cw-header-fixed.cw-scrolled .cw-header-pad { padding: 16px 20px; } .cw-header-mobile-menu-slot { display: block; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } /* stacked, left-aligned brand: "Composer Agents" over "by composerworkflow.com" */ .cw-logo-group { flex-direction: column; align-items: flex-start; gap: 3px; } .cw-bycw { font-size: 8px; letter-spacing: 2.5px; color: rgba(255,255,255,0.5); } /* never collapse the brand on mobile — always full text, centered */ .cw-header-fixed.cw-scrolled .cw-bycw .cw-letter:not(.cw-keep), .cw-header-fixed.cw-bycw-min .cw-bycw .cw-letter:not(.cw-keep) { max-width: 24px; opacity: 1; transform: none; } } /* ===================== CONTACT (mobile stacking) ===================== */ @media (max-width: 760px) { .cw-contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .cw-contact-grid > div:nth-child(2) > div { position: static !important; } } /* ===================== HERO (mobile) ===================== */ @media (max-width: 768px) { /* Bring the hero up a bit so the video/content below it shows sooner without scrolling — the header spacer already clears the fixed header, this trims the hero's own extra top breathing room. */ .cw-hero-section { padding-top: max(16px, calc(clamp(56px,9vw,104px) - 40px)) !important; } } /* ===================== HERO CTA (mobile order) ===================== */ @media (max-width: 768px) { /* On mobile, "Discover our AI" sits on top and "Start for free" (with its "No credit card required" caption) drops below it. */ .cw-hero-cta { flex-direction: column-reverse; align-items: stretch; width: 100%; } .cw-hero-cta-primary { width: 100%; } .cw-hero-cta .btn { width: 100% !important; } /* Give the mobile carousel's "View details" room to breathe before the image below it, without pushing it as far down as the old 28px did. */ .cw-carousel-wrap { height: 430px !important; } .cw-carousel-sec { padding-bottom: 12px; } } /* ===================== STICKY MOBILE CTA ===================== */ .cw-sticky-cta { display: none; } @media (max-width: 768px) { .cw-sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgba(6,15,26,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,0.12); transition: transform 0.32s var(--cw-ease); } .cw-sticky-cta.hide-on-menu-open { transform: translateY(120%); } body.has-sticky-cta { padding-bottom: 78px; } } /* ===================== FOOTER ===================== */ .cw-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: clamp(48px,7vw,72px) clamp(18px,3vw,44px) 40px; background: #000a16; } .cw-footer-inner { max-width: none; margin: 0 auto; } /* Explicit columns instead of auto-fit: auto-fit's minmax(180px,1fr) drops to 2 columns in a ~550-700px middle zone, stranding the 3rd column (Agents) alone on its own row, left-anchored, with the rest of the row empty. Fixed breakpoints remove that dead zone: 3 even columns down to 640px, then a single stacked column below that. */ .cw-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } @media (max-width: 640px) { .cw-footer-grid { grid-template-columns: 1fr; } } .cw-footer-col-title { font-family: var(--cw-font); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--cw-c2); margin: 0; } .cw-footer-links { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .cw-footer-links a { font-family: var(--cw-font); font-size: 13px; font-weight: 400; letter-spacing: 1px; color: rgba(255,255,255,0.6); text-decoration: none; } .cw-footer-links a:hover { color: var(--cw-c3); } .cw-footer-brand-name { font-family: var(--cw-font); font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--cw-c3); } .cw-footer-tagline { font-family: var(--cw-font); font-size: 13px; font-weight: 400; letter-spacing: 1px; line-height: 1.7; color: rgba(255,255,255,0.55); margin: 16px 0 0; max-width: 280px; text-wrap: pretty; } .cw-footer-bottom { margin-top: clamp(40px,6vw,56px); padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px,4vw,48px); } .cw-footer-bottom-wordmark { font-family: var(--cw-font); font-size: clamp(20px,2.4vw,26px); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--cw-c3); white-space: nowrap; flex: none; } .cw-footer-bottom-text { font-family: var(--cw-font); font-size: 13px; font-weight: 400; letter-spacing: 1px; line-height: 1.7; color: rgba(255,255,255,0.55); margin: 0; max-width: 640px; text-wrap: pretty; } .cw-footer-bottom-nav { display: flex; align-items: center; gap: 20px; margin-top: 18px; } .cw-footer-bottom-nav a { font-family: var(--cw-font); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); text-decoration: none; } .cw-footer-bottom-nav a:hover { color: var(--cw-c3); } .cw-footer-copy { font-family: var(--cw-font); font-size: 12px; font-weight: 400; letter-spacing: 1.5px; color: rgba(255,255,255,0.4); margin: 18px 0 0; } .cw-footer-account-link { display: inline-block; margin-top: 14px; font-family: var(--cw-font); font-size: 12px; font-weight: 500; letter-spacing: 1px; color: rgba(255,255,255,0.5); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; } .cw-footer-account-link:hover { color: var(--cw-c3); } /* ===================== ANIMATIONS ===================== */ @keyframes cw-text-pop { 0% { opacity: 0; filter: blur(14px); } 100% { opacity: 1; filter: blur(0); } } @keyframes cw-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes cw-popup-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes cw-gradient-drift { 0% { background-position: 0% 50%, 50% 50%; } 50% { background-position: 100% 30%, 40% 60%; } 100% { background-position: 0% 50%, 50% 50%; } } @keyframes cw-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes cw-reveal-scale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } .cw-reveal { animation: cw-reveal 0.9s var(--cw-ease) both; animation-timeline: view(); animation-range: entry 0% cover 32%; } .cw-reveal-scale { animation: cw-reveal-scale 0.8s var(--cw-ease) both; animation-timeline: view(); animation-range: entry 0% cover 28%; } @media (prefers-reduced-motion: reduce) { .cw-reveal, .cw-reveal-scale { animation: none; opacity: 1; transform: none; } } /* Browsers without scroll-timeline (Firefox/Safari) would otherwise run these on page LOAD. Disable the CSS animation there and just show the element; enhance.js still reveals on scroll via IntersectionObserver. */ @supports not (animation-timeline: view()) { .cw-reveal, .cw-reveal-scale { animation: none; opacity: 1; transform: none; } } .cw-when { font-family: var(--cw-font); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin: 14px 0 0; } .cw-when.aiuto { color: var(--cw-aiuto); } .cw-when.presto { color: var(--cw-presto); } .cw-when.tempo { color: var(--cw-tempo); } .cw-when.voce { color: var(--cw-voce); } .cw-when.cecilia { color: var(--cw-cecilia); } .cw-when.guida { color: var(--cw-guida); } /* ===================== GLASS CARD ===================== */ .cw-glass-card { background: var(--cw-glass-fill); border: 1px solid var(--cw-glass-border); border-radius: var(--cw-radius); backdrop-filter: var(--cw-glass-blur); -webkit-backdrop-filter: var(--cw-glass-blur); box-shadow: var(--cw-card-shadow), var(--cw-card-inset); transition: border-color var(--cw-dur) var(--cw-ease); } /* Restrained hover: border brightens only, matching the rest of the site's hover language — no dramatic shadow escalation (that read as a "boxed panel" effect, especially where cards sit dense as on account/contact). */ .cw-glass-card:hover { border-color: var(--cw-glass-border-hover); } /* ===================== ICON TILE ===================== */ .cw-icon-tile { width: 64px; height: 64px; border-radius: var(--cw-radius); background: var(--cw-tile-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--cw-tile-shadow); } .cw-icon-tile img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--cw-dur) var(--cw-ease); } .cw-icon-tile:hover img { transform: scale(var(--cw-icon-hover-scale)); } /* ===================== POPUPS / MODALS ===================== */ .cw-modal-overlay { position: fixed; inset: 0; z-index: 60; background: var(--cw-scrim); backdrop-filter: var(--cw-scrim-blur); -webkit-backdrop-filter: var(--cw-scrim-blur); display: none; align-items: center; justify-content: center; padding: clamp(16px,4vw,48px); overflow-y: auto; } .cw-modal-overlay.open { display: flex; } /* 44x44 minimum touch target (was 36x36) — icon stays the same visual size, just more tappable padding around it. Shared by pricing + demo modals. */ .cw-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,10,22,0.6); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--cw-dur) var(--cw-ease), background var(--cw-dur) var(--cw-ease); } .cw-modal-close:hover { border-color: rgba(255,255,255,0.55); background: rgba(0,10,22,0.8); } .cw-pricing-sheet { position: relative; width: min(1100px,100%); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.16); /* Liquid glass: translucent base + drifting colour blobs, page blurred behind */ background: radial-gradient(60% 80% at 12% 8%, rgba(176,131,0,0.22), transparent 62%), radial-gradient(52% 72% at 88% 18%, rgba(47,139,160,0.20), transparent 60%), radial-gradient(66% 86% at 72% 98%, rgba(138,63,143,0.18), transparent 62%), rgba(8,17,29,0.55); background-size: 200% 200%, 220% 220%, 240% 240%, auto; -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); animation: cw-liquid-drift 20s ease-in-out infinite, cw-popup-in 0.4s var(--cw-ease) both; padding: clamp(28px,4vw,48px); max-height: 86vh; overflow-y: auto; } @keyframes cw-liquid-drift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } 50% { background-position: 100% 55%, 0% 65%, 25% 15%, 0 0; } 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } } @media (prefers-reduced-motion: reduce) { .cw-pricing-sheet { animation: cw-popup-in 0.4s var(--cw-ease) both; } } /* Modern thin scrollbar — only the drag track shows, inset from the edge so it never overlaps the panel's rounded corners. Firefox + WebKit. */ .cw-pricing-sheet { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; } .cw-pricing-sheet::-webkit-scrollbar { width: 6px; } .cw-pricing-sheet::-webkit-scrollbar-track { background: transparent; margin: 14px 0; } .cw-pricing-sheet::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 999px; } .cw-pricing-sheet::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.42); } /* Agent color is set inline per-open via --demo-ai-color (falls back to neutral white when unset, e.g. before JS assigns it). */ .cw-demo-sheet { position: relative; width: min(1200px,100%); aspect-ratio: 16/9; border-radius: var(--cw-radius); overflow: hidden; border: 1px solid var(--demo-ai-color, rgba(255,255,255,0.16)); box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px -16px var(--demo-ai-color, transparent); background: #000a16; transition: border-color 0.3s var(--cw-ease), box-shadow 0.3s var(--cw-ease); animation: cw-popup-in 0.4s var(--cw-ease) both; } @media (prefers-reduced-motion: reduce) { .cw-demo-sheet { animation: none; } } .cw-demo-sheet iframe { width: 100%; height: 100%; border: none; display: block; position: relative; z-index: 1; } /* Small agent-name pill, top-left — gives the modal context without adding a heavy header bar over the animation itself. */ .cw-demo-label { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-family: var(--cw-font); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: rgba(0,10,22,0.6); border: 1px solid var(--demo-ai-color, rgba(255,255,255,0.25)); border-radius: 999px; padding: 8px 14px 8px 10px; opacity: 0; transition: opacity 0.3s var(--cw-ease) 0.15s; pointer-events: none; } .cw-demo-sheet.is-ready .cw-demo-label { opacity: 1; } .cw-demo-label .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--demo-ai-color, #fff); } /* Loading state — shown until the iframe's own onload fires, so a heavy self-contained animation page never reads as a blank/broken modal. */ .cw-demo-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: #000a16; opacity: 1; transition: opacity 0.35s var(--cw-ease); } .cw-demo-sheet.is-ready .cw-demo-loading { opacity: 0; pointer-events: none; } .cw-demo-spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.18); border-top-color: var(--demo-ai-color, rgba(255,255,255,0.75)); animation: cw-spin 0.85s linear infinite; } @keyframes cw-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cw-demo-spinner { animation-duration: 1.6s; } } @media (max-width: 768px) { .cw-pricing-sheet { border-radius: 0; padding: 24px 20px 32px; width: 100%; max-height: 100vh; height: 100vh; } /* The 16/9 landscape shape only has enough absolute height to fit the demo animations' internal portrait-ish chat-panel content on wide (desktop) screens; on phones the panel gets clipped by the iframe's own overflow:hidden. Switch to a taller box so the whole animation is visible, scaled down like the desktop version instead of cropped. */ .cw-demo-sheet { aspect-ratio: unset; width: min(360px, 90vw); height: min(97vh, 800px); } } /* ===================== FAQ ===================== */ .cw-faq-cat { font-family: var(--cw-font); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cw-c2); margin: 0 0 6px; } .cw-faq-item { border-top: 1px solid rgba(255,255,255,0.1); } .cw-faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); } .cw-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 4px; font-family: var(--cw-font); font-size: 15px; font-weight: 500; letter-spacing: 0.3px; color: var(--cw-c3); } .cw-faq-q:hover { color: var(--cw-c2); } .cw-faq-icon { flex: none; width: 18px; height: 18px; position: relative; } .cw-faq-icon::before, .cw-faq-icon::after { content: ""; position: absolute; background: currentColor; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: transform var(--cw-dur) var(--cw-ease), opacity var(--cw-dur) var(--cw-ease); } .cw-faq-icon::before { width: 14px; height: 1.6px; } .cw-faq-icon::after { width: 1.6px; height: 14px; } .cw-faq-item.open .cw-faq-icon::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); } .cw-faq-a-wrap { overflow: hidden; max-height: 0; transition: max-height 320ms var(--cw-ease); } .cw-faq-item.open .cw-faq-a-wrap { max-height: 600px; } .cw-faq-a { font-family: var(--cw-font); font-size: 14px; font-weight: 400; letter-spacing: 0.3px; line-height: 1.75; color: rgba(255,255,255,0.65); margin: 0; padding: 0 4px 22px; max-width: 760px; } .cw-faq-search { width: 100%; font-family: var(--cw-font); font-size: 14px; color: var(--cw-c3); background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 14px 18px; outline: none; transition: border-color var(--cw-dur) var(--cw-ease); } .cw-faq-search::placeholder { color: rgba(255,255,255,0.35); } .cw-faq-search:focus { border-color: var(--cw-c2); } /* ===================== FORMS ===================== */ .cw-field { width: 100%; font-family: var(--cw-font); font-size: 14px; color: var(--cw-c3); background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 14px 16px; outline: none; transition: border-color var(--cw-dur) var(--cw-ease), background var(--cw-dur) var(--cw-ease); font-family: var(--cw-font); } .cw-field::placeholder { color: rgba(255,255,255,0.35); } .cw-field:focus { border-color: var(--cw-c2); background: rgba(255,255,255,0.08); } textarea.cw-field { resize: vertical; min-height: 140px; line-height: 1.6; } .cw-label { display: block; font-family: var(--cw-font); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 8px; } .cw-channel { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.08); } .cw-channel:first-child { border-top: none; } /* ===================== PRICING CARDS ===================== */ .cwp-locked { color: rgba(255,255,255,0.35); text-decoration: line-through; } .cwp-locked svg { stroke: rgba(255,255,255,0.28); }