/* Lino Labs — shared design tokens Dark-first. Lino blue pops on dark. Light mode is a toggle. */ :root { /* Brand */ --lino-blue: #4D8BFF; /* slightly brighter so it pops on dark */ --lino-blue-deep: #1F6FEB; --lino-blue-soft: rgba(77, 139, 255, 0.14); --lino-blue-glow: rgba(77, 139, 255, 0.32); /* Dark surfaces (default) */ --paper: #0B0D11; /* page bg */ --paper-2: #0F1218; /* card bg */ --paper-3: #161A22; /* elevated */ --ink: #F3F5F9; /* primary text */ --ink-2: #C5CCD8; /* secondary text */ --muted: #8A93A4; /* tertiary */ --line: #1F242E; /* dividers */ --line-2: #2A2F3B; --ok: #4ADE80; --warn: #FBBF24; --idle: #6B7280; --danger: #F87171; --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.45); --shadow-blue: 0 6px 28px var(--lino-blue-glow); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; color-scheme: dark; } /* Light theme overrides — applied when */ html[data-theme="light"] { --lino-blue: #1F6FEB; --lino-blue-deep: #0B4ED1; --lino-blue-soft: #E8F0FE; --lino-blue-glow: rgba(31, 111, 235, 0.18); --paper: #FFFFFF; --paper-2: #F7F8FA; --paper-3: #FFFFFF; --ink: #0A0A0B; --ink-2: #1C1C1F; --muted: #6B7280; --line: #E5E7EB; --line-2: #D7DBE3; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(10,10,11,0.06); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: var(--lino-blue); text-decoration: none; } a:hover { text-decoration: underline; } .code, code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-3); color: var(--ink-2); padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; } /* Title bar — present on every Lino Labs HTML doc */ .lino-titlebar { background: #06080C; color: var(--ink); padding: 14px 28px; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--lino-blue); position: sticky; top: 0; z-index: 50; } html[data-theme="light"] .lino-titlebar { background: #0A0A0B; color: #FFFFFF; } .lino-titlebar .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--lino-blue); display: inline-block; box-shadow: 0 0 0 3px rgba(77,139,255,0.28); } .lino-titlebar .crumbs { font-weight: 600; letter-spacing: 0.2px; font-size: 14px; } .lino-titlebar .crumbs a { color: inherit; } .lino-titlebar .crumbs .sep { color: var(--muted); margin: 0 8px; } .lino-titlebar .crumbs .accent { color: var(--lino-blue); } .lino-titlebar .spacer { flex: 1; } .lino-titlebar .stamp { font-family: var(--mono); font-size: 12px; color: #8A93A4; } /* Theme toggle in title bar */ .theme-toggle { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-radius: 999px; cursor: pointer; letter-spacing: 0.5px; text-transform: uppercase; transition: border-color 0.15s, color 0.15s, background 0.15s; } .theme-toggle:hover { border-color: var(--lino-blue); color: var(--lino-blue); } .lino-titlebar .theme-toggle { color: #C5CCD8; } /* Layout */ .wrap { max-width: 1180px; margin: 0 auto; padding: 28px; } .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .lino-titlebar { padding: 12px 16px; } .wrap { padding: 18px; } } /* Cards */ .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card h2, .card h3 { margin-top: 0; color: var(--ink); } .card.accent { border-color: var(--lino-blue); box-shadow: var(--shadow-blue); } .card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Status pills */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.3px; text-transform: uppercase; } .pill.shipped { background: rgba(74,222,128,0.14); color: var(--ok); } .pill.building { background: var(--lino-blue-soft); color: var(--lino-blue); } .pill.exploring { background: rgba(251,191,36,0.14); color: var(--warn); } .pill.idea { background: #1A1F29; color: var(--muted); } html[data-theme="light"] .pill.idea { background: #F1F3F5; } .pill.killed { background: rgba(248,113,113,0.14); color: var(--danger); } .pill.live { background: var(--lino-blue); color: #FFFFFF; } /* Checklist */ .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { padding: 8px 0; border-bottom: 1px dashed var(--line); display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .checklist li:last-child { border-bottom: 0; } .checklist input[type=checkbox] { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--lino-blue); cursor: pointer; } .checklist .done { color: var(--muted); text-decoration: line-through; } .checklist .item-label { flex: 1; min-width: 200px; } .checklist .item-actions { display: flex; gap: 6px; align-items: center; } /* Dashboard tiles */ .tile { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; color: var(--ink); position: relative; } .tile:hover { transform: translateY(-2px); border-color: var(--lino-blue); box-shadow: var(--shadow-blue); text-decoration: none; } .tile .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; } .tile .name { font-size: 20px; font-weight: 700; color: var(--ink); } .tile .sub { font-size: 13px; color: var(--ink-2); } .tile .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 8px; gap: 8px; flex-wrap: wrap; } .tile-actions { display: flex; gap: 6px; margin-top: 8px; } /* Section header */ .section-h { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; } .section-h h2 { margin: 0; font-size: 18px; letter-spacing: 0.2px; color: var(--ink); } .section-h .bar { flex: 1; height: 1px; background: var(--line); } .section-h .count { font-family: var(--mono); font-size: 12px; color: var(--muted); } /* Thesis banner */ .thesis { background: linear-gradient(135deg, #06080C 0%, #0C1426 100%); color: var(--ink); border-radius: var(--radius); padding: 24px 28px; border: 1px solid var(--line); position: relative; overflow: hidden; box-shadow: var(--shadow-blue); } .thesis::before { content: ""; position: absolute; inset: -1px; border-left: 4px solid var(--lino-blue); pointer-events: none; } .thesis h1 { margin: 0 0 6px; font-size: 22px; color: var(--ink); } .thesis p { margin: 0; color: var(--ink-2); max-width: 720px; } .thesis .klip-mark { color: var(--lino-blue); font-weight: 700; } /* Callout */ .callout { background: var(--lino-blue-soft); border-left: 4px solid var(--lino-blue); padding: 14px 18px; border-radius: var(--radius-sm); margin: 14px 0; font-size: 14px; color: var(--ink); } .callout.warn { background: rgba(251,191,36,0.10); border-color: var(--warn); } .callout.muted { background: var(--paper-3); border-color: var(--idle); } /* Tables / kv */ .kv { width: 100%; border-collapse: collapse; font-size: 14px; } .kv td { padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); } .kv td:first-child { color: var(--muted); width: 32%; } /* Footer */ .lino-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 32px 0 48px; font-family: var(--mono); } /* Action buttons: [open ↗] and [copy → ⌘] */ .actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--paper-3); color: var(--ink-2); cursor: pointer; text-decoration: none !important; letter-spacing: 0.3px; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn:hover { border-color: var(--lino-blue); color: var(--lino-blue); background: var(--paper-2); } .btn.primary { border-color: var(--lino-blue); color: var(--lino-blue); } .btn.primary:hover { background: var(--lino-blue-soft); } .btn .glyph { opacity: 0.7; } .btn.copied { border-color: var(--ok); color: var(--ok); } .btn.copied .glyph { opacity: 1; } /* Random-idea button (big call-to-action variant) */ .btn-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--lino-blue); color: #FFFFFF; border: 1px solid var(--lino-blue); font-family: var(--font); font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-blue); transition: transform 0.15s, box-shadow 0.15s, background 0.15s; letter-spacing: 0.2px; } .btn-cta:hover { transform: translateY(-1px); background: var(--lino-blue-deep); } .btn-cta.copied { background: var(--ok); border-color: var(--ok); } /* Remaining-work block — surfaces near top of each status page */ .remaining { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--lino-blue); border-radius: var(--radius); padding: 18px 22px; margin: 20px 0 24px; } .remaining h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); letter-spacing: 0.2px; } .remaining .src { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 10px; } .remaining .checklist li { font-size: 14px; } /* ---------- Launcher (local daemon) ---------- */ /* Toast for fallback messaging */ .lino-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--ink); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.18); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 9999; pointer-events: none; } .lino-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Launcher-live pill in the title bar (only shown when daemon answers /health) */ .launcher-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--line); letter-spacing: 0.3px; text-transform: lowercase; } .launcher-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } body[data-launcher="live"] .launcher-status { color: var(--ok); border-color: var(--ok); } body[data-launcher="live"] .launcher-status::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); } /* ---------- Floating toolkit (for pages without the full Lino chrome) ---- Self-contained, lives top-right, dismissible. Used on: - umbrella status / sub pages (already have full styles) - external app HTML pages that link out from the dashboard Heavy use of !important so this survives hostile host styles (e.g. bpm/pitch.html with global fonts + black bg). */ .lino-toolkit { position: fixed !important; top: 14px !important; right: 14px !important; z-index: 2147483646 !important; /* just below toast */ display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 8px !important; background: rgba(11, 13, 17, 0.92) !important; color: #F3F5F9 !important; border: 1px solid rgba(77, 139, 255, 0.35) !important; border-radius: 999px !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4) !important; font: 500 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif !important; letter-spacing: 0.2px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; max-width: calc(100vw - 28px) !important; } .lino-toolkit.lino-toolkit-collapsed { padding: 6px !important; } .lino-toolkit .ltk-mark { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #6B7280 !important; flex: 0 0 auto !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.04) !important; } body[data-launcher="live"] .lino-toolkit .ltk-mark { background: #4ADE80 !important; box-shadow: 0 0 8px #4ADE80, 0 0 0 2px rgba(74,222,128,0.18) !important; } .lino-toolkit .ltk-label { color: #C5CCD8 !important; text-transform: lowercase !important; padding-right: 4px !important; white-space: nowrap !important; } .lino-toolkit.lino-toolkit-collapsed .ltk-label, .lino-toolkit.lino-toolkit-collapsed .ltk-btn, .lino-toolkit.lino-toolkit-collapsed .ltk-sep { display: none !important; } .lino-toolkit .ltk-sep { width: 1px !important; height: 14px !important; background: rgba(255,255,255,0.12) !important; flex: 0 0 auto !important; } .lino-toolkit .ltk-btn { appearance: none !important; -webkit-appearance: none !important; background: rgba(77, 139, 255, 0.14) !important; color: #F3F5F9 !important; border: 1px solid rgba(77, 139, 255, 0.5) !important; border-radius: 999px !important; padding: 5px 10px !important; font: inherit !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important; } .lino-toolkit .ltk-btn:hover { background: rgba(77, 139, 255, 0.28) !important; border-color: #4D8BFF !important; color: #FFFFFF !important; } .lino-toolkit .ltk-btn.ltk-btn-soft { background: transparent !important; border-color: rgba(255,255,255,0.18) !important; color: #C5CCD8 !important; font-weight: 500 !important; padding: 5px 9px !important; } .lino-toolkit .ltk-btn.ltk-btn-soft:hover { border-color: rgba(255,255,255,0.4) !important; color: #FFFFFF !important; } .lino-toolkit .ltk-btn.ltk-copied, .lino-toolkit .ltk-btn.ltk-launched { background: rgba(74, 222, 128, 0.18) !important; border-color: #4ADE80 !important; color: #FFFFFF !important; } .lino-toolkit .ltk-close { background: transparent !important; border: none !important; color: #8A93A4 !important; cursor: pointer !important; padding: 2px 4px !important; font-size: 14px !important; line-height: 1 !important; } .lino-toolkit .ltk-close:hover { color: #FFFFFF !important; } @media (max-width: 520px) { .lino-toolkit .ltk-label { display: none !important; } .lino-toolkit { gap: 4px !important; padding: 5px 6px !important; } } body[data-launcher="live"] .launcher-status .label-offline { display: none; } body:not([data-launcher="live"]) .launcher-status .label-live { display: none; } /* Launch button — distinct from .btn but visually compatible */ .btn[data-launch] { /* keep base .btn styling; add a subtle play-triangle accent on hover */ } .btn[data-launch] .glyph { color: var(--lino-blue); } .btn[data-launch]:hover .glyph { color: var(--lino-blue-bright, var(--lino-blue)); } /* --------------------------------------------------------------- Future-app hero — shared across all future-apps/*.html. Each app sets --hero-from / --hero-to for its accent gradient, and a data-watermark="" attribute for the giant ghost text. --------------------------------------------------------------- */ .app-hero { background: linear-gradient(135deg, var(--hero-from, #1F6FEB) 0%, var(--hero-to, #0B4ED1) 100%); color: #FFFFFF; padding: 32px 28px; border-radius: var(--radius); margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } .app-hero::after { content: attr(data-watermark); position: absolute; right: -10px; bottom: -34px; font-size: 180px; font-weight: 900; color: rgba(255,255,255,0.07); letter-spacing: -8px; pointer-events: none; } .app-hero h1 { margin: 0; font-size: 36px; letter-spacing: -0.6px; position: relative; color: #FFFFFF; } .app-hero .tag { font-family: var(--mono); font-size: 13px; color: var(--hero-tag, #E8D2A8); position: relative; } .app-hero p { color: var(--hero-body, #F1E2C4); max-width: 720px; margin: 8px 0 0; position: relative; }