/* ========================================================================= site.css — Design system for Thomas' portfolio hub + all 5 demos. Single source of truth. Extracted from the original support-agent demo. Calm SaaS look, now dual-theme (light + dark) driven by data-bf-theme on . The theme is shared with the marketing site via localStorage ("bf-theme"), so a demo opens in whatever mode the homepage was set to. ========================================================================= */ /* ---- Theme tokens ------------------------------------------------------- */ :root, :root[data-bf-theme="light"] { --indigo:#0d9488; --indigo-dark:#0f766e; --violet:#14b8a6; --ink:#17171b; --slate:#475569; --muted:#94a3b8; --line:#e2e8f0; --bg:#ffffff; --surface:#ffffff; --soft:#f8fafc; --bot-bubble:#f1f5f9; --ok:#16a34a; --ok-soft:#ecfdf5; --ok-ink:#15803d; --warn:#d97706; --warn-soft:#fffbeb; --warn-ink:#a16207; --danger:#dc2626; --danger-soft:#fef2f2; --danger-ink:#b91c1c; --info:#0e7490; --info-soft:#ecfeff; --info-ink:#0e7490; --pill-bg:#e6f4f1; --flash:#e6f4f1; --shadow:0 10px 40px rgba(15,23,42,.10); /* Portfolio bar (chrome, stays dark-on-light contrast in both themes) */ --bar-bg:#17171b; --bar-text:#ffffff; --bar-link:#5eead4; --bar-live:#a7f3d0; /* Paper: intrinsic document artifacts (invoice, letter) — stay light in both themes on purpose, like a doc viewer. Never remap these to --bg. */ --paper:#ffffff; --paper-ink:#17171b; --paper-slate:#475569; --paper-muted:#94a3b8; --paper-line:#e2e8f0; --on-accent:#ffffff; --r-sm:9px; --r-md:14px; --r-lg:20px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --wrap:1080px; } :root[data-bf-theme="dark"] { --indigo:#14b8a6; --indigo-dark:#0fcdb4; --violet:#5eead4; --ink:#ececea; --slate:#b4b4b0; --muted:#7c7c78; --line:rgba(255,255,255,0.10); --bg:#0a0a0b; --surface:#121214; --soft:#161619; --bot-bubble:#1a1a1e; --ok:#22c55e; --ok-soft:rgba(34,197,94,0.13); --ok-ink:#4ade80; --warn:#f59e0b; --warn-soft:rgba(245,158,11,0.13); --warn-ink:#fbbf24; --danger:#ef4444; --danger-soft:rgba(239,68,68,0.13); --danger-ink:#f87171; --info:#22d3ee; --info-soft:rgba(34,211,238,0.12); --info-ink:#67e8f9; --pill-bg:rgba(20,184,166,0.14); --flash:rgba(20,184,166,0.20); --shadow:0 16px 50px rgba(0,0,0,.55); --bar-bg:#141417; --bar-text:#ececea; --bar-link:#5eead4; --bar-live:#5eead4; /* Paper stays light in dark mode too. */ --paper:#ffffff; --paper-ink:#17171b; --paper-slate:#475569; --paper-muted:#94a3b8; --paper-line:#e2e8f0; --on-accent:#05231f; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} /* Form fields follow the theme (browser default would be white in dark mode) */ input,textarea,select{background-color:var(--surface);color:var(--ink);} input::placeholder,textarea::placeholder{color:var(--muted);} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;} .muted{color:var(--slate);} .center{text-align:center;} /* Portfolio bar — sits on top of EVERY demo page (injected by shell.js) */ .portfolio-bar{background:var(--bar-bg);color:var(--bar-text);font-size:13px;display:flex;align-items:center; justify-content:space-between;gap:12px;padding:8px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line);} .portfolio-bar a{color:var(--bar-link);font-weight:600;} .portfolio-bar a:hover{color:var(--bar-text);} .portfolio-bar .live{color:var(--bar-live);} /* Theme toggle injected into the bar by shell.js */ .portfolio-bar .bar-right{display:flex;align-items:center;gap:14px;} .bf-demo-toggle{font-family:var(--font);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--bar-text);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); border-radius:999px;padding:4px 11px;cursor:pointer;min-width:52px;line-height:1.4;} .bf-demo-toggle:hover{background:rgba(255,255,255,.15);} /* Nav */ nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--wrap);margin:0 auto;padding:20px 24px;} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;} .brand .logo{width:34px;height:34px;border-radius:var(--r-sm); background:linear-gradient(135deg,#0d9488,#14b8a6);display:grid;place-items:center;color:#fff;font-weight:800;} .nav-links{display:flex;gap:26px;color:var(--slate);font-weight:500;font-size:15px;align-items:center;} .nav-links a:hover{color:var(--indigo);} .avail{display:inline-flex;align-items:center;gap:7px;background:var(--ok-soft);color:var(--ok-ink); font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;} .avail .dot{width:8px;height:8px;border-radius:50%;background:#10b981;} @media(max-width:720px){.nav-links a:not(.avail){display:none;}} /* Buttons */ .btn-primary,.btn-ghost{padding:13px 24px;border-radius:var(--r-md);font-weight:600;font-size:15px; cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;} .btn-primary{background:var(--indigo);color:var(--on-accent);} .btn-primary:hover{background:var(--indigo-dark);} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);} .btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);} .btn-primary:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed;} /* Text bits */ .eyebrow{color:var(--indigo);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;} .pill{display:inline-block;background:var(--pill-bg);color:var(--indigo);font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;} /* Hero */ .hero{padding:64px 0 44px;} .hero h1{font-size:46px;line-height:1.1;letter-spacing:-1px;margin-bottom:18px;} .hero h1 .grad{background:linear-gradient(90deg,var(--indigo),var(--violet)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .hero p.sub{font-size:18px;color:var(--slate);max-width:620px;margin-bottom:26px;} @media(max-width:640px){.hero h1{font-size:34px;}} /* Sections + cards */ section.block{padding:52px 0;} h2.title{font-size:32px;letter-spacing:-.5px;margin-bottom:8px;} p.lead{color:var(--slate);font-size:16px;margin-bottom:28px;max-width:640px;} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;} .card-hover{transition:box-shadow .15s,transform .15s;} .card-hover:hover{box-shadow:var(--shadow);transform:translateY(-3px);} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;} @media(max-width:820px){.grid3,.grid2{grid-template-columns:1fr;}} /* Chips */ .chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600; padding:3px 10px;border-radius:999px;margin:3px 4px 3px 0;background:var(--soft);color:var(--slate);} .chip-ok{background:var(--ok-soft);color:var(--ok-ink);} .chip-warn{background:var(--warn-soft);color:var(--warn-ink);} .chip-danger{background:var(--danger-soft);color:var(--danger-ink);} .chip-info{background:var(--info-soft);color:var(--info-ink);} /* Status dot (traffic light) */ .status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;vertical-align:middle;} .status-dot.green{background:var(--ok);} .status-dot.yellow{background:var(--warn);} .status-dot.red{background:var(--danger);} /* Demo banner (gradient) */ .demo-banner{background:linear-gradient(90deg,#0d9488,#14b8a6);color:#fff;text-align:center; font-size:14px;font-weight:500;padding:9px 16px;} .demo-banner strong{font-weight:700;} /* Degraded note (quota fallback) */ .degraded-note{display:none;background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn-ink); font-size:13px;padding:10px 14px;border-radius:var(--r-sm);margin:12px 0;} .degraded-note.show{display:block;} /* KPI tile */ .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;} .kpi .k{color:var(--slate);font-size:13px;margin-bottom:6px;} .kpi .v{font-weight:800;font-size:24px;} /* Table */ .table{width:100%;border-collapse:collapse;font-size:14px;} .table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);} .table th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;} .table tbody tr:hover{background:var(--soft);} /* How-it-works diagram (CSS boxes + arrows — never an image) */ .diagram{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;} .diagram .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:14px 16px;min-width:140px;flex:1;text-align:center;} .diagram .step .ico{font-size:22px;margin-bottom:6px;} .diagram .step .lbl{font-size:13px;font-weight:600;color:var(--ink);} .diagram .arrow{display:grid;place-items:center;color:var(--muted);font-size:20px;padding:0 8px;} @media(max-width:720px){.diagram{flex-direction:column;}.diagram .arrow{transform:rotate(90deg);padding:6px 0;}} /* Source chip (clickable citation) */ .src-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600; padding:4px 10px;border-radius:999px;margin:3px 4px 0 0;background:var(--info-soft); color:var(--info-ink);border:none;cursor:pointer;} .src-chip:hover{background:var(--info-soft);filter:brightness(1.08);} /* Footer */ footer{text-align:center;color:var(--muted);font-size:13.5px;padding:40px 24px 50px; border-top:1px solid var(--line);margin-top:40px;} footer a{color:var(--indigo);}