/* Kiteware platform design tokens. * * IDENTICAL copies of this file are vendored in both repos — update both in * the same change (see PLATFORM.md): * dataline: web/src/styles/kiteware-theme.css (mapped into Tailwind) * waas: apps/frontend/static/css/kiteware-theme.css (consumed as vars) * * One platform, two products: shared near-black surfaces, shared type, one * brand gradient. Each product keeps its own accent — indigo = Kiteware * Cloud (kiteware.com), teal = Kiteware Web (web.kiteware.com). */ :root { /* Neutrals — near-black console surfaces */ --kw-surface-0: #0a0a0b; /* page background */ --kw-surface-1: #101013; /* cards */ --kw-surface-2: #13131a; /* elevated cards, inputs */ --kw-border: #1f1f23; --kw-border-strong: #2a2a35; /* Text */ --kw-text: #e6e9ef; --kw-text-muted: #8a92a3; /* Kiteware Cloud accent (indigo) */ --kw-cloud-50: #eef2ff; --kw-cloud-100: #e0e7ff; --kw-cloud-200: #c7d2fe; --kw-cloud-300: #a5b4fc; --kw-cloud-400: #818cf8; --kw-cloud-500: #6366f1; --kw-cloud-600: #4f46e5; --kw-cloud-700: #4338ca; --kw-cloud-800: #3730a3; --kw-cloud-900: #312e81; --kw-cloud-950: #1e1b4b; /* Kiteware Web accent (teal) */ --kw-web: #5eead4; --kw-web-ink: #042f2e; /* text on a teal fill */ /* Status — one hue set for both products. Base (400-level) for dots and * inline status text on dark surfaces, `-strong` (500) for solid fills * and buttons, `-soft` (300) for text inside chips, `-chip-*` for the * translucent badge chips both dashboards render (waas `.tag`, dataline * `StatusBadge`). Status UI must use these — no raw status hexes. */ --kw-ok: #4ade80; --kw-ok-strong: #22c55e; --kw-ok-soft: #86efac; --kw-ok-chip-bg: rgba(20, 83, 45, 0.4); --kw-ok-chip-border: rgba(22, 101, 52, 0.5); --kw-warn: #fbbf24; --kw-warn-strong: #f59e0b; --kw-warn-soft: #fcd34d; --kw-warn-chip-bg: rgba(120, 53, 15, 0.4); --kw-warn-chip-border: rgba(146, 64, 14, 0.5); --kw-danger: #f87171; --kw-danger-strong: #ef4444; --kw-danger-soft: #fca5a5; --kw-danger-chip-bg: rgba(127, 29, 29, 0.4); --kw-danger-chip-border: rgba(153, 27, 27, 0.5); /* Shape & type */ --kw-radius: 10px; --kw-header-height: 64px; --kw-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kw-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Brand mark: the platform gradient sweeps Web-teal into Cloud-indigo */ --kw-brand-gradient: linear-gradient( 135deg, var(--kw-web), var(--kw-cloud-400) 55%, var(--kw-cloud-500) ); } /* Brand lockup — "[gradient mark] Kiteware ". Every Kiteware * header renders its brand with these two classes so the lockup is * pixel-identical across products: * * * Kiteware Web * */ .kw-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--kw-text); font-family: var(--kw-font-sans); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; } .kw-brand-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--kw-brand-gradient); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35); } /* Product accent — a page (or the ) declares which product it belongs * to and every `.kw-*` control below picks up that accent. The platform * (kiteware.com root) uses the Cloud indigo. */ :root, .kw-product-cloud { --kw-accent: var(--kw-cloud-500); --kw-accent-hover: var(--kw-cloud-400); --kw-accent-ink: #ffffff; --kw-accent-soft: var(--kw-cloud-300); } .kw-product-web { --kw-accent: var(--kw-web); --kw-accent-hover: #99f6e4; --kw-accent-ink: var(--kw-web-ink); --kw-accent-soft: var(--kw-web); } /* Site chrome — the public/marketing header and footer. kiteware.com is the * single marketing site for every product; product dashboards render the * same header shell so moving between kiteware.com and a dashboard never * changes the frame. Markup: * *

* * Kiteware * * *

*/ .kw-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: var(--kw-header-height); padding: 8px 24px; border-bottom: 1px solid var(--kw-border); background: rgba(10, 10, 11, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--kw-font-sans); } .kw-nav__links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; } .kw-nav__links a { color: var(--kw-text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.15s ease; } .kw-nav__links a:hover, .kw-nav__links a.kw-nav__active { color: var(--kw-text); } @media (max-width: 640px) { .kw-nav__links a.kw-nav__hide-sm { display: none; } } /* Buttons used by the site chrome and marketing pages. */ .kw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; min-height: 44px; border-radius: 8px; border: 1px solid transparent; font-family: var(--kw-font-sans); font-size: 0.95rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; } .kw-btn:active { transform: translateY(1px); } .kw-btn--primary { background: var(--kw-accent); color: var(--kw-accent-ink) !important; } .kw-btn--primary:hover { background: var(--kw-accent-hover); } .kw-btn--ghost { border-color: var(--kw-border-strong); color: var(--kw-text) !important; background: transparent; } .kw-btn--ghost:hover { border-color: var(--kw-text-muted); } .kw-btn--sm { padding: 8px 14px; min-height: 36px; font-size: 0.9rem; } .kw-btn--lg { padding: 16px 24px; min-height: 52px; font-size: 1.05rem; } /* Footer. Four columns on wide screens, stacked on narrow. */ .kw-footer { margin-top: 40px; padding: 48px 24px 32px; border-top: 1px solid var(--kw-border); color: var(--kw-text-muted); font-family: var(--kw-font-sans); font-size: 0.9rem; } .kw-footer__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-width: 1100px; margin: 0 auto 24px; } .kw-footer h4 { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kw-text-muted); } .kw-footer a { display: block; padding: 6px 0; color: var(--kw-text-muted); text-decoration: none; } .kw-footer a:hover { color: var(--kw-text); } .kw-footer .kw-brand { margin-bottom: 8px; } .kw-footer__tagline { margin: 0; font-size: 0.85rem; } .kw-footer__legal { margin: 0; text-align: center; font-size: 0.8rem; } .kw-footer__legal a { display: inline; padding: 0; }