/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #0a0d20 #16234a #f7f8fd #4a5ae8 #2458c7 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f7f8fd; --surface: #fbfcfe; --surface-2: #ebecf2; --border: #d6d7de; --border-strong: #b0b2bb; --ink: #16234a; --muted: #676e86; --accent: #4a5ae8; --accent-hover: #3f4dc5; --accent-ink: #ffffff; --accent-text: #2458c7; --accent-strong: #4453d5; --accent-soft: #dfe2fa; --accent-border: #a9b1f4; --success: #15803d; --success-ink: #ffffff; --success-soft: #dceae6; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #efe4e0; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f0dee2; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #080917; --surface: #21222e; --surface-2: #141523; --border: #2b2b37; --border-strong: #52535d; --ink: #f7f8fd; --muted: #9798a1; --accent: #4a5ae8; --accent-hover: #6573eb; --accent-ink: #ffffff; --accent-text: #6573ec; --accent-strong: #717eee; --accent-soft: #171b45; --accent-border: #262d75; --success: #15803d; --success-ink: #ffffff; --success-soft: #0b231f; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2e1914; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2f0d18; --danger-strong: #d16969; } /* ==================================================================== * app.css — AI SaaS OS landing page. * A single, static marketing page. Retunes the shared system toward a * premium SaaS-launch look (soft radial washes, generous whitespace, * condensed heavy headlines built from the one font we have) and then * writes the page-specific furniture design.css has no opinion about: * the hero, the dashboard mock, the chat/live-activity cards. * ==================================================================== */ :root { --radius-lg: 20px; --shadow-raised: 0 24px 60px -20px color-mix(in srgb, var(--ink) 28%, transparent); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- page ground: soft lavender / cyan radial washes, never strong --- */ body { background: radial-gradient(60% 46% at 12% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%), radial-gradient(55% 42% at 88% 8%, color-mix(in srgb, var(--accent-text) 10%, transparent), transparent 60%), radial-gradient(50% 60% at 50% 45%, color-mix(in srgb, var(--accent-strong) 6%, transparent), transparent 70%), var(--canvas); background-attachment: fixed; } /* ---- header: minimal, airy, no chrome ------------------------------- */ .shell-plain .topbar { border-bottom: none; background: transparent; backdrop-filter: none; padding: var(--s-7) clamp(var(--s-4), 8vw, 100px) var(--s-2); min-height: auto; } .brand-mark { background: linear-gradient(135deg, var(--accent-text), var(--accent-strong)); width: 32px; height: 32px; font-weight: var(--fw-semi); } .brand-name { background: linear-gradient(90deg, var(--ink), var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: var(--fw-semi); letter-spacing: var(--track-tight); } .lang-pill summary { display: inline-flex; align-items: center; gap: var(--s-1); height: 36px; padding-inline: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); font-size: var(--t-sm); font-weight: var(--fw-medium); cursor: pointer; list-style: none; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .lang-pill summary::-webkit-details-marker { display: none; } .lang-pill summary:hover { color: var(--ink); border-color: var(--border-strong); } .lang-pill .icon { width: 16px; height: 16px; } .lang-pill .menu { min-width: 140px; } /* ==================================================================== * hero * ==================================================================== */ .hero { text-align: center; padding-block: var(--s-9) var(--s-6); max-width: 840px; margin-inline: auto; } .script-line { font-style: italic; font-weight: var(--fw-medium); color: var(--accent-text); letter-spacing: var(--track-tight); margin: 0; line-height: var(--lh-snug); } .script-line { font-size: clamp(16px, 2.2vw, 20px); } .script-line-2 { font-size: clamp(18px, 2.6vw, 24px); font-weight: var(--fw-semi); color: var(--accent-strong); margin-top: var(--s-1); } .hero-title { margin: var(--s-5) 0 0; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.04; font-size: clamp(32px, 6vw, 60px); background: linear-gradient(120deg, var(--ink) 10%, var(--accent-text) 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-title small { display: block; font-size: 0.56em; font-weight: var(--fw-semi); letter-spacing: 0; margin-top: var(--s-2); } .hero-sub { margin: var(--s-5) auto 0; max-width: 640px; font-style: italic; font-size: clamp(15px, 1.9vw, 18px); color: var(--muted); line-height: var(--lh); } .hero-sub strong { color: var(--accent-text); font-weight: var(--fw-semi); font-style: normal; } /* ==================================================================== * dashboard mock * ==================================================================== */ .dashboard-wrap { padding-block: var(--s-8) var(--s-9); text-align: center; } .dashboard-mock { position: relative; margin-inline: auto; width: min(100%, 980px); border-radius: var(--radius-lg); border: 1.5px solid var(--accent-border); box-shadow: var(--shadow-raised); background: var(--surface); overflow: hidden; text-align: left; transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); } .dashboard-mock:hover { transform: translateY(-2px); box-shadow: var(--shadow-2xl); } .dash-topbar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: var(--surface-2); border-bottom: 1px solid var(--border); } .dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); } .dash-dot.red { background: var(--danger); } .dash-dot.yellow { background: var(--warning); } .dash-dot.green { background: var(--success); } .dash-url { margin-inline: auto; font-size: var(--t-xs); color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px var(--s-4); } .dash-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 380px; } .dash-sidebar { padding: var(--s-4) var(--s-3); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .dash-sidebar > * + * { margin-top: var(--s-4); } .dash-brand { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semi); font-size: var(--t-sm); color: var(--ink); } .dash-brand-mark { width: 22px; height: 22px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent-text), var(--accent-strong)); color: var(--accent-ink); display: grid; place-items: center; font-size: var(--t-xs); font-weight: var(--fw-semi); } .dash-search { display: flex; align-items: center; gap: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px var(--s-2); color: var(--muted); font-size: var(--t-xs); background: var(--canvas); } .dash-search .icon { width: 14px; height: 14px; flex: 0 0 auto; } .dash-nav { display: flex; flex-direction: column; } .dash-nav > * + * { margin-top: 2px; } .dash-nav-item { font-size: var(--t-xs); color: var(--muted); padding: 6px var(--s-2); border-radius: var(--radius-sm); } .dash-nav-item.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: var(--fw-medium); } .dash-main { padding: var(--s-4) var(--s-5); min-width: 0; } .dash-toolbar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); } .dash-toolbar h3 { margin: 0; font-size: var(--t-sm); color: var(--ink); } .dash-toolbar span { font-size: var(--t-xs); color: var(--muted); } .dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); } .dash-stat { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); } .dash-stat-label { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); margin-bottom: 4px; } .dash-stat-value { display: block; font-size: var(--t-lg); font-weight: var(--fw-semi); color: var(--ink); } .dash-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .dash-panel { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); } .dash-panel-label { display: block; font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--ink); margin-bottom: var(--s-2); } .dash-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; } .dash-bar { flex: 1 1 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-text)); opacity: 0.85; } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent-ink) 90%, transparent); background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, var(--accent-strong) 30%)); display: grid; place-items: center; box-shadow: 0 12px 30px color-mix(in srgb, var(--danger) 45%, transparent); cursor: pointer; transition: transform var(--dur-2) var(--ease); } .play-btn:hover { transform: translate(-50%, -50%) scale(1.06); } .play-btn svg { margin-left: 4px; color: var(--accent-ink); } .dash-side-tab { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 8px; height: 90px; border-radius: 6px 0 0 6px; background: var(--danger); opacity: 0.85; } .watch-caption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--muted); } /* ==================================================================== * "scale your business" heading * ==================================================================== */ .scale-heading { text-align: center; padding-top: var(--s-9); max-width: 900px; margin-inline: auto; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.1; font-size: clamp(24px, 4.4vw, 42px); background: linear-gradient(100deg, var(--ink) 10%, var(--accent-text) 60%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .scale-sub { text-align: center; margin: var(--s-4) auto 0; max-width: 620px; font-size: clamp(15px, 1.8vw, 18px); color: var(--muted); } .scale-sub strong { color: var(--accent-text); font-weight: var(--fw-semi); } /* ==================================================================== * pill tabs — override the default underline tabs with a rounded look * ==================================================================== */ .demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: var(--s-7) var(--s-2) var(--s-6); border: none; overflow: visible; } .demo-tabs .tab { flex: 0 0 auto; height: auto; padding: 10px var(--s-4); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: var(--t-sm); font-weight: var(--fw-medium); } .demo-tabs .tab::after { display: none; } .demo-tabs .tab:hover { border-color: var(--accent-border); color: var(--ink); } .demo-tabs .tab[aria-selected="true"] { background: linear-gradient(100deg, var(--accent-text), var(--accent), var(--accent-strong)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); } /* ==================================================================== * activity demo — chat card + live activity card * ==================================================================== */ .activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; } .demo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .demo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .chat-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: linear-gradient(100deg, var(--accent-text), var(--accent), var(--accent-strong)); color: var(--accent-ink); } .chat-ai-icon { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent-ink) 25%, transparent); display: grid; place-items: center; font-weight: var(--fw-semi); font-size: var(--t-sm); flex: 0 0 auto; } .chat-head-title { font-weight: var(--fw-semi); } .chat-body { padding: var(--s-6); } .chat-bubble { background: var(--surface-2); border-radius: var(--radius); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--ink); max-width: 92%; } .chat-response { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--t-sm); font-weight: var(--fw-medium); } .chat-checklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; } .chat-checklist > * + * { margin-top: var(--s-2); } .chat-checklist li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink); } .chat-checklist .icon { color: var(--success); flex: 0 0 auto; } .live-card { padding: var(--s-6); } .live-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); font-weight: var(--fw-semi); } .live-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-1); } .live-head h3 { margin: 0; font-size: var(--t-xl); color: var(--ink); } .live-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent-border); color: var(--accent-text); border-radius: var(--radius-pill); padding: 3px var(--s-3); font-size: var(--t-xs); font-weight: var(--fw-semi); letter-spacing: var(--track-caps); text-transform: uppercase; flex: 0 0 auto; } .live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); } .progress-track { margin-top: var(--s-4); height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-text), var(--accent)); transition: width var(--dur-3) var(--ease-out); } .progress-note { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--muted); } .activity-list { margin-top: var(--s-5); display: flex; flex-direction: column; } .activity-list > * + * { margin-top: var(--s-3); } .activity-item { display: flex; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--accent-border); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); } .activity-item.is-pending { opacity: 0.55; border-style: dashed; background: var(--surface); } .activity-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--success-soft); color: var(--success-strong); } .activity-item.is-pending .activity-icon { background: var(--surface-2); color: var(--muted); } .activity-main { min-width: 0; } .activity-title-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .activity-title-row strong { font-size: var(--t-sm); color: var(--ink); } .activity-badge { font-size: var(--t-xs); font-weight: var(--fw-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--accent-border); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 1px var(--s-2); } .activity-desc { margin: 2px 0 0; font-size: var(--t-xs); color: var(--muted); } .activity-footer { margin-top: var(--s-5); text-align: center; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink); border-top: 1px solid var(--border); padding-top: var(--s-4); } /* ==================================================================== * CTA * ==================================================================== */ .cta-section { text-align: center; padding-block: var(--s-9); } .cta-text { max-width: 560px; margin-inline: auto; font-size: clamp(16px, 2vw, 19px); color: var(--ink); } .cta-text strong { color: var(--accent-text); } .cta-arrow { margin: var(--s-4) auto; color: var(--accent-text); animation: cta-bounce 1.8s var(--ease) infinite; } @media (prefers-reduced-motion: reduce) { .cta-arrow { animation: none; } } @keyframes cta-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .cta-button { display: inline-flex; align-items: center; gap: var(--s-2); width: min(300px, 80vw); height: 58px; justify-content: center; border-radius: 16px; background: linear-gradient(100deg, var(--accent-text), var(--accent-strong)); color: var(--accent-ink); font-weight: var(--fw-semi); font-size: var(--t-lg); box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 45%, transparent); border: none; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 20px 44px color-mix(in srgb, var(--accent) 55%, transparent); } .cta-script { margin-top: var(--s-4); font-style: italic; color: var(--muted); font-size: var(--t-sm); } /* ==================================================================== * footer + video modal * ==================================================================== */ .site-footer { text-align: center; padding-block: var(--s-11) var(--s-9); } .site-footer a { color: var(--muted); text-decoration: underline; font-size: var(--t-sm); } .video-modal .modal-body { padding: 0; } .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ==================================================================== * responsive * ==================================================================== */ @media (max-width: 860px) { .activity-grid { grid-template-columns: minmax(0, 1fr); } .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .shell-plain .topbar { padding: var(--s-5) var(--s-4) var(--s-2); flex-wrap: wrap; } .dash-body { grid-template-columns: minmax(0, 1fr); } .dash-sidebar { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); } .dash-nav { flex-direction: row; flex-wrap: wrap; } .dash-nav-item { white-space: nowrap; } .dash-panels { grid-template-columns: minmax(0, 1fr); } .play-btn { width: 58px; height: 58px; } .hero-title { letter-spacing: -0.02em; } }