/* ========================================================= Sajilo AI — Design system Dark canvas · cream ink · ember accent · mono detail ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* surfaces — dark theme (default) */ --bg: #0B0E14; --bg-elev: #11151D; --bg-card: #161B25; --bg-deeper: #070A10; --rule: #232A36; --rule-soft: #1A2029; --rule-strong: #3A4150; /* ink (text) */ --fg: #E8EBF2; --fg-strong: #FFFFFF; --fg-dim: #B4B8C2; --fg-muted: #7A7E8A; --fg-faint: #4D525E; /* brand — derived from logo (deep indigo → cyan-blue gradient) */ --ember: #2E72E5; /* primary accent — kept var name for back-compat */ --ember-soft: rgba(46,114,229,0.14); --ember-deep: #1F4FB8; --ember-glow: rgba(46,114,229,0.35); --cyan: #3DBCF0; /* secondary accent — bright cyan from logo top */ --cyan-soft: rgba(61,188,240,0.16); --live: #4FD18A; /* status / pulse — green */ --live-soft: rgba(79,209,138,0.16); --warning: #F5C26B; --danger: #E5654A; /* type */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* scale */ --fs-mega: clamp(48px, 8vw, 108px); --fs-hero: clamp(40px, 6vw, 80px); --fs-h1: clamp(36px, 4.4vw, 60px); --fs-h2: clamp(28px, 3.2vw, 44px); --fs-h3: clamp(22px, 2.2vw, 30px); --fs-h4: 20px; --fs-body: 17px; --fs-sm: 15px; --fs-xs: 13px; --fs-micro: 11px; --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.55; --lh-loose: 1.7; --tr-caps: 0.14em; --tr-tight: -0.02em; --tr-display: -0.035em; /* layout */ --container: 1280px; --gutter: 32px; /* radii — small, technical */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; /* motion */ --ease: cubic-bezier(0.2, 0, 0.15, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); } /* ===================================================== LIGHT THEME — applied when ===================================================== */ [data-theme="light"] { --bg: #F7F6F1; --bg-elev: #FFFFFF; --bg-card: #FFFFFF; --bg-deeper: #EDEBE3; --rule: #E0DDD2; --rule-soft: #ECE9DE; --rule-strong: #B8B5A8; --fg: #15181F; --fg-strong: #000000; --fg-dim: #3C414A; --fg-muted: #6B6F78; --fg-faint: #9FA2AA; --ember: #1F58CC; --ember-soft: rgba(31,88,204,0.10); --ember-deep: #143F94; --ember-glow: rgba(31,88,204,0.25); --cyan: #1E94C9; --cyan-soft: rgba(30,148,201,0.12); --live: #2F9C5A; --live-soft: rgba(47,156,90,0.12); --warning: #B17C1F; --danger: #C04A2E; } [data-theme="light"] body { color-scheme: light; } [data-theme="light"] ::selection { color: #FFFFFF; } /* ============================ reset / base */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; color-scheme: dark; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tr-display); line-height: var(--lh-tight); color: var(--fg-strong); } p { margin: 0; } ::selection { background: var(--ember); color: #FFFFFF; } /* ============================ utility */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--ember); display: inline-block; } .mono { font-family: var(--font-mono); } .display { font-family: var(--font-display); letter-spacing: var(--tr-display); line-height: var(--lh-tight); } .muted { color: var(--fg-muted); } .dim { color: var(--fg-dim); } .ember { color: var(--ember); } .live { color: var(--live); } .divider { height: 1px; background: var(--rule); width: 100%; } /* ============================ NAV */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule-soft); } .topbar-inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-strong); font-size: 18px; } .brand-mark { width: 32px; height: 32px; position: relative; flex: none; display: inline-block; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-wordmark { display: inline-block; line-height: 1; } .brand-tag { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); letter-spacing: var(--tr-caps); text-transform: uppercase; border-left: 1px solid var(--rule); padding-left: 10px; margin-left: 4px; } .nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: nowrap; } .nav a { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--fg-dim); padding: 8px 10px; border-radius: var(--r-sm); position: relative; transition: color .15s var(--ease), background .15s var(--ease); white-space: nowrap; } .nav a:hover { color: var(--fg-strong); background: var(--bg-card); } .nav a.active { color: var(--fg-strong); background: var(--bg-card); } .nav a.active::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: var(--ember); } .nav a .num { color: var(--fg-faint); margin-right: 6px; } .nav-cta { margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; white-space: nowrap; } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--fg-dim); transition: all .15s var(--ease); flex: none; margin-left: 8px; } .theme-toggle:hover { color: var(--ember); border-color: var(--rule-strong); background: var(--bg-card); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .moon { display: none; } .theme-toggle .sun { display: inline; } [data-theme="light"] .theme-toggle .sun { display: none; } [data-theme="light"] .theme-toggle .moon { display: inline; } .status-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.02em; white-space: nowrap; } /* ---- Hamburger ---- */ .nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--fg); } .nav-toggle:hover { background: var(--bg-card); border-color: var(--rule-strong); } .nav-toggle svg { width: 18px; height: 18px; } /* Responsive nav breakpoints */ @media (max-width: 1180px) { .brand-tag { display: none; } .status-pill { display: none; } .nav a { padding: 7px 8px; font-size: 11.5px; } .nav a .num { display: none; } .nav-cta { margin-left: 8px; padding-left: 12px; } } @media (max-width: 1100px) { .nav-toggle { display: inline-flex; } .nav-cta { display: none; } .theme-toggle { margin-left: auto; } .nav { position: fixed; inset: 56px 0 auto 0; top: 64px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-elev); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 24px 20px; transform: translateY(-110%); transition: transform .25s var(--ease); z-index: 49; } .nav.open { transform: translateY(0); box-shadow: 0 24px 40px -20px rgba(0,0,0,0.5); } .nav a { font-size: 14px; padding: 14px 12px; border-bottom: 1px solid var(--rule-soft); border-radius: 0; } .nav a:last-child { border-bottom: none; } .nav a.active::before { left: 0; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); width: 2px; height: 18px; } .nav a .num { display: inline; } } @media (max-width: 760px) { .page-meta .right > span:not(#kclock) { display: none; } } .status-pill .dot { width: 7px; height: 7px; background: var(--live); border-radius: 50%; box-shadow: 0 0 0 0 rgba(139,229,107,0.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(139,229,107,0.6); } 70% { box-shadow: 0 0 0 8px rgba(139,229,107,0); } 100% { box-shadow: 0 0 0 0 rgba(139,229,107,0); } } /* ============================ Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; transition: all .15s var(--ease); cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--ember); color: #FFFFFF; } .btn-primary:hover { background: var(--ember-deep); transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--ember-glow); } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--rule-strong); } .btn-secondary:hover { background: var(--bg-card); border-color: var(--fg-muted); } .btn-ghost { background: transparent; color: var(--fg-dim); padding: 10px 0; } .btn-ghost:hover { color: var(--ember); } .btn .arrow { display: inline-block; transition: transform .2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ============================ Section scaffolding */ section { position: relative; } .section { padding: 96px 0; border-bottom: 1px solid var(--rule-soft); } .section-tight { padding: 56px 0; } .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; margin-bottom: 56px; align-items: end; } .section-head .lead h2 { font-size: var(--fs-h2); font-weight: 500; } .section-head .desc { color: var(--fg-dim); font-size: var(--fs-body); max-width: 56ch; line-height: var(--lh-body); } .section-num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); letter-spacing: var(--tr-caps); margin-bottom: 14px; } @media (max-width: 760px) { .section { padding: 64px 0; } .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; } } /* ============================ Cards */ .card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 28px; position: relative; overflow: hidden; transition: border-color .2s var(--ease), background .2s var(--ease); } .card:hover { border-color: var(--rule-strong); } .card-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--fg-strong); } .card .kicker { font-family: var(--font-mono); font-size: 11px; color: var(--ember); letter-spacing: var(--tr-caps); text-transform: uppercase; margin-bottom: 10px; } /* ============================ Footer */ .foot { background: var(--bg-deeper); border-top: 1px solid var(--rule-soft); padding: 64px 0 28px; color: var(--fg-dim); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .foot h5 { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: var(--tr-caps); text-transform: uppercase; margin-bottom: 14px; font-weight: 500; } .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; } .foot a:hover { color: var(--ember); } .foot-bot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-soft); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.02em; } .foot-tag { font-family: var(--font-display); font-size: 14px; color: var(--fg); letter-spacing: var(--tr-tight); } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } /* ============================ Shared chip / tag */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 100px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.02em; } .chip-live { border-color: rgba(139,229,107,0.35); color: var(--live); background: var(--live-soft); } .chip-ember { border-color: rgba(255,106,44,0.35); color: var(--ember); background: var(--ember-soft); } /* ============================ Terminal mini-component */ .term { background: var(--bg-deeper); border: 1px solid var(--rule); border-radius: var(--r-md); font-family: var(--font-mono); font-size: 12.5px; overflow: hidden; } .term-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--rule); background: var(--bg-card); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; } .term-bar .lights { display: flex; gap: 5px; } .term-bar .lights span { width: 9px; height: 9px; border-radius: 50%; background: #2A2F39; } .term-body { padding: 16px 18px; color: var(--fg-dim); line-height: 1.6; } .term-body .prompt { color: var(--ember); } .term-body .agent { color: var(--live); } .term-body .key { color: #F5C26B; } .term-body .muted { color: var(--fg-faint); } .cursor::after { content: "▍"; color: var(--ember); margin-left: 1px; animation: blink 1.2s step-start infinite; } @keyframes blink { 50% { opacity: 0; } } /* ============================ Grid helpers */ .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================ Background grid (subtle dot/line scaffold) */ .bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--rule-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.6), transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.6), transparent 70%); opacity: 0.55; } /* ============================ Page label (very top) */ .page-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-faint); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); padding: 10px 0; } .page-meta .wrap { display: flex; justify-content: space-between; gap: 24px; } .page-meta .crumbs span:nth-child(odd) { color: var(--fg-dim); } .page-meta .crumbs .sep { color: var(--fg-faint); padding: 0 8px; } .page-meta .right { display: flex; gap: 18px; } /* ============================ Hero scaffolding */ .hero { position: relative; padding: 80px 0 100px; overflow: hidden; } .hero h1 { font-size: var(--fs-hero); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; max-width: 18ch; color: var(--fg-strong); } .hero .lede { color: var(--fg-dim); font-size: 19px; line-height: 1.55; max-width: 56ch; margin-top: 28px; } .hero .ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in { opacity: 1; transform: none; }