/* Sprint Mode — Shared Shell CSS v1 Injected by _worker.js on every HTML page. All classes prefixed sm- to avoid collisions. */ /* ─── Design Tokens ─── */ :root { --sm-bg: hsl(210, 20%, 98%); --sm-text: hsl(0, 0%, 9%); --sm-text-muted: hsl(220, 9%, 40%); --sm-text-faint: hsl(220, 9%, 65%); --sm-border: hsl(214, 32%, 91%); --sm-card: hsl(0, 0%, 100%); --sm-accent: hsl(221, 83%, 53%); --sm-accent-hover: hsl(221, 83%, 45%); --sm-accent-10: hsla(221, 83%, 53%, 0.1); --sm-studios: hsl(262, 60%, 55%); --sm-studios-10: hsla(262, 60%, 55%, 0.1); --sm-mode: hsl(35, 92%, 50%); --sm-mode-10: hsla(35, 92%, 50%, 0.1); --sm-hub: hsl(221, 83%, 53%); --sm-hub-10: hsla(221, 83%, 53%, 0.1); --sm-pai: hsl(160, 84%, 39%); --sm-pai-10: hsla(160, 84%, 39%, 0.1); --sm-capital: hsl(152, 69%, 40%); --sm-capital-10: hsla(152, 69%, 40%, 0.1); --sm-radius: 0.75rem; --sm-header-h: 56px; --sm-subnav-h: 40px; } [data-theme="dark"] { --sm-bg: hsl(224, 18%, 8%); --sm-text: hsl(210, 17%, 90%); --sm-text-muted: hsl(215, 12%, 60%); --sm-text-faint: hsl(215, 10%, 42%); --sm-border: hsl(220, 14%, 20%); --sm-card: hsl(222, 16%, 13%); --sm-accent-10: hsla(221, 83%, 53%, 0.14); --sm-studios-10: hsla(262, 60%, 55%, 0.14); --sm-mode-10: hsla(35, 92%, 50%, 0.14); --sm-hub-10: hsla(221, 83%, 53%, 0.14); --sm-pai-10: hsla(160, 84%, 39%, 0.14); --sm-capital-10: hsla(152, 69%, 40%, 0.14); } /* ─── Hide existing topbars (Worker adds data-sm-shell to ) ─── */ [data-sm-shell] .topbar { display: none !important; } [data-sm-shell] body > .theme-toggle { display: none !important; } /* ─── Full-bleed fix: header/subnav/footer must stretch even in flex bodies ─── */ .sm-header, .sm-subnav, .sm-footer, .sm-search-overlay { align-self: stretch; width: 100%; flex-shrink: 0; } /* ─── Header ─── */ .sm-header { position: sticky; top: 0; z-index: 9000; background: var(--sm-card); border-bottom: 1px solid var(--sm-border); font-family: 'Noto Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } .sm-header-inner { max-width: 960px; margin: 0 auto; height: var(--sm-header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 16px; } .sm-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--sm-text); flex-shrink: 0; } .sm-logo-icon { width: 30px; height: 30px; background: var(--sm-accent-10); border-radius: 7px; display: flex; align-items: center; justify-content: center; } .sm-logo-icon svg { width: 16px; height: 16px; color: var(--sm-accent); } .sm-logo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; } .sm-header-right { display: flex; align-items: center; gap: 10px; } /* Search trigger */ .sm-search-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--sm-border); border-radius: 8px; background: var(--sm-bg); color: var(--sm-text-faint); font-family: inherit; font-size: 13px; cursor: pointer; transition: border-color 0.2s; white-space: nowrap; } .sm-search-trigger:hover { border-color: var(--sm-accent); color: var(--sm-text-muted); } .sm-search-trigger svg { width: 14px; height: 14px; flex-shrink: 0; } .sm-search-trigger kbd { font-family: inherit; font-size: 11px; padding: 1px 5px; border: 1px solid var(--sm-border); border-radius: 4px; background: var(--sm-card); color: var(--sm-text-faint); line-height: 1.4; } @media (max-width: 600px) { .sm-search-trigger span, .sm-search-trigger kbd { display: none; } .sm-search-trigger { padding: 6px 8px; } } /* CTA */ .sm-cta { display: inline-flex; align-items: center; padding: 7px 16px; background: var(--sm-accent); color: #fff; border: none; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .sm-cta:hover { background: var(--sm-accent-hover); } @media (max-width: 480px) { .sm-cta { padding: 7px 10px; font-size: 12px; } } /* Theme toggle */ .sm-theme-btn { width: 34px; height: 34px; border: 1px solid var(--sm-border); border-radius: 7px; background: var(--sm-card); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; flex-shrink: 0; padding: 0; } .sm-theme-btn:hover { border-color: var(--sm-accent); } .sm-theme-btn svg { width: 15px; height: 15px; color: var(--sm-text-muted); } .sm-theme-btn .sm-icon-sun { display: none; } .sm-theme-btn .sm-icon-moon { display: block; } [data-theme="dark"] .sm-theme-btn .sm-icon-sun { display: block; } [data-theme="dark"] .sm-theme-btn .sm-icon-moon { display: none; } /* ─── Sub-nav ─── */ .sm-subnav { background: var(--sm-card); border-bottom: 1px solid var(--sm-border); font-family: 'Noto Sans', system-ui, -apple-system, sans-serif; position: sticky; top: var(--sm-header-h); z-index: 8999; } .sm-subnav-inner { max-width: 960px; margin: 0 auto; height: var(--sm-subnav-h); display: flex; align-items: center; padding: 0 20px; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sm-subnav-inner::-webkit-scrollbar { display: none; } .sm-subnav-label { font-size: 13px; font-weight: 600; color: var(--sm-text); white-space: nowrap; margin-right: 8px; } .sm-subnav-label.is-studios { color: var(--sm-studios); } .sm-subnav-label.is-mode { color: var(--sm-mode); } .sm-subnav-label.is-hub { color: var(--sm-hub); } .sm-subnav a { font-size: 13px; color: var(--sm-text-muted); text-decoration: none; white-space: nowrap; padding: 4px 10px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .sm-subnav a:hover { color: var(--sm-text); background: var(--sm-accent-10); } .sm-subnav-dot { color: var(--sm-text-faint); font-size: 11px; } /* ─── Search Overlay ─── */ .sm-search-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.35); font-family: 'Noto Sans', system-ui, -apple-system, sans-serif; } [data-theme="dark"] .sm-search-overlay { background: rgba(0,0,0,0.6); } .sm-search-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; padding-top: min(20vh, 140px); } .sm-search-modal { width: 90%; max-width: 580px; background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; } [data-theme="dark"] .sm-search-modal { box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .sm-search-input-wrap { display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--sm-border); } .sm-search-input-wrap svg { width: 16px; height: 16px; color: var(--sm-text-faint); flex-shrink: 0; } .sm-search-input { flex: 1; border: none; background: none; padding: 14px 12px; font-family: inherit; font-size: 15px; color: var(--sm-text); outline: none; } .sm-search-input::placeholder { color: var(--sm-text-faint); } .sm-search-esc { font-size: 11px; padding: 2px 6px; border: 1px solid var(--sm-border); border-radius: 4px; color: var(--sm-text-faint); background: var(--sm-bg); cursor: pointer; flex-shrink: 0; } .sm-search-results { max-height: 360px; overflow-y: auto; } .sm-search-results:empty { display: none; } .sm-sr-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--sm-border); text-decoration: none; color: inherit; transition: background 0.12s; } .sm-sr-item:last-child { border-bottom: none; } .sm-sr-item:hover, .sm-sr-item.is-active { background: var(--sm-accent-10); } .sm-sr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; } .sm-sr-title { font-size: 14px; font-weight: 600; color: var(--sm-text); } .sm-sr-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; } .sm-sr-badge[data-cat="blog"] { background: var(--sm-accent-10); color: var(--sm-accent); } .sm-sr-badge[data-cat="service"] { background: var(--sm-studios-10); color: var(--sm-studios); } .sm-sr-badge[data-cat="tech"] { background: var(--sm-mode-10); color: var(--sm-mode); } .sm-sr-badge[data-cat="studios"] { background: var(--sm-studios-10); color: var(--sm-studios); } .sm-sr-badge[data-cat="mode"] { background: var(--sm-mode-10); color: var(--sm-mode); } .sm-sr-badge[data-cat="hub"] { background: var(--sm-hub-10); color: var(--sm-hub); } .sm-sr-badge[data-cat="page"] { background: var(--sm-accent-10); color: var(--sm-accent); } .sm-sr-excerpt { font-size: 13px; color: var(--sm-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sm-sr-empty { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--sm-text-faint); } .sm-search-results mark { background: hsla(221, 83%, 53%, 0.15); color: var(--sm-text); border-radius: 2px; padding: 0 1px; } .sm-search-footer { padding: 8px 16px; border-top: 1px solid var(--sm-border); font-size: 11px; color: var(--sm-text-faint); display: flex; gap: 12px; } .sm-search-footer kbd { font-family: inherit; font-size: 10px; padding: 1px 4px; border: 1px solid var(--sm-border); border-radius: 3px; background: var(--sm-bg); } /* ─── Footer ─── */ .sm-footer { border-top: 1px solid var(--sm-border); padding: 28px 20px; text-align: center; font-family: 'Noto Sans', system-ui, -apple-system, sans-serif; } .sm-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; } .sm-footer-links a { font-size: 13px; color: var(--sm-text-muted); text-decoration: none; transition: color 0.15s; } .sm-footer-links a:hover { color: var(--sm-text); } .sm-footer-copy { font-size: 12px; color: var(--sm-text-faint); letter-spacing: 0.3px; } /* ─── Utility: hide old footer on pages that have one ─── */ [data-sm-shell] body > .footer, [data-sm-shell] .container > .footer { display: none !important; } /* Revenue/blog page footers */ [data-sm-shell] .main + .footer, [data-sm-shell] p.footer { display: none !important; } /* ─── Homepage + Landing: fix body padding so header sits at top ─── */ body[data-sm-page="home"], body[data-sm-page="landing"] { padding-top: 0 !important; } /* Hide redundant centered hero logo (header has the logo now) */ body[data-sm-page="home"] .container > .logo, body[data-sm-page="landing"] .container > .logo { display: none !important; } /* Give h1 breathing room now that logo is gone */ body[data-sm-page="home"] .container > h1, body[data-sm-page="landing"] .container > h1 { margin-top: 40px; } /* ─── Chat Widget ─── */ /* FAB button */ .sm-chat-fab { position: fixed; bottom: 20px; right: 20px; z-index: 9500; width: 52px; height: 52px; border-radius: 50%; background: var(--sm-accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; font-family: 'Noto Sans', system-ui, -apple-system, sans-serif; } .sm-chat-fab:hover { background: var(--sm-accent-hover); transform: scale(1.05); box-shadow: 0 6px 24px rgba(0,0,0,0.22); } .sm-chat-fab svg { width: 22px; height: 22px; } .sm-chat-fab-icon { display: flex; align-items: center; justify-content: center; } .sm-chat-fab .sm-chat-fab-close { display: none; } .sm-chat-fab.is-open .sm-chat-fab-open { display: none; } .sm-chat-fab.is-open .sm-chat-fab-close { display: flex; } /* Chat panel */ .sm-chat-panel { display: none; position: fixed; bottom: 84px; right: 20px; z-index: 9500; width: 380px; max-height: calc(100vh - 120px); background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.15); flex-direction: column; overflow: hidden; font-family: 'Noto Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } [data-theme="dark"] .sm-chat-panel { box-shadow: 0 12px 48px rgba(0,0,0,0.4); } .sm-chat-panel.is-open { display: flex; } @media (max-width: 440px) { .sm-chat-panel { width: calc(100vw - 16px); right: 8px; bottom: 80px; max-height: calc(100vh - 100px); border-radius: 14px; } .sm-chat-fab { bottom: 16px; right: 16px; width: 48px; height: 48px; } .sm-chat-fab svg { width: 20px; height: 20px; } } /* Header */ .sm-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sm-border); flex-shrink: 0; } .sm-chat-header-left { display: flex; align-items: center; gap: 10px; } .sm-chat-avatar { width: 32px; height: 32px; background: var(--sm-accent-10); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .sm-chat-avatar svg { width: 16px; height: 16px; color: var(--sm-accent); } .sm-chat-header-title { font-size: 14px; font-weight: 600; color: var(--sm-text); line-height: 1.2; } .sm-chat-header-sub { font-size: 11px; color: var(--sm-text-faint); } .sm-chat-close { width: 30px; height: 30px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s; padding: 0; } .sm-chat-close:hover { background: var(--sm-accent-10); } .sm-chat-close svg { width: 16px; height: 16px; color: var(--sm-text-muted); } /* Messages area */ .sm-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; max-height: 400px; } /* Message bubbles */ .sm-chat-msg { display: flex; } .sm-chat-msg-bot { justify-content: flex-start; } .sm-chat-msg-user { justify-content: flex-end; } .sm-chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; color: var(--sm-text); word-wrap: break-word; overflow-wrap: break-word; } .sm-chat-msg-bot .sm-chat-bubble { background: var(--sm-bg); border-bottom-left-radius: 4px; } .sm-chat-msg-user .sm-chat-bubble { background: var(--sm-accent); color: #fff; border-bottom-right-radius: 4px; } /* Links in bot messages */ .sm-chat-msg-bot .sm-chat-bubble a { color: var(--sm-accent); text-decoration: underline; text-decoration-color: var(--sm-accent-10); text-underline-offset: 2px; } .sm-chat-msg-bot .sm-chat-bubble a:hover { text-decoration-color: var(--sm-accent); } /* Typing indicator */ .sm-chat-typing { display: flex; gap: 4px; padding: 12px 14px; } .sm-chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sm-text-faint); animation: sm-typing 1.2s ease-in-out infinite; } .sm-chat-typing-dot:nth-child(2) { animation-delay: 0.2s; } .sm-chat-typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes sm-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Input area */ .sm-chat-input-wrap { display: flex; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--sm-border); gap: 8px; flex-shrink: 0; } .sm-chat-input { flex: 1; border: 1px solid var(--sm-border); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 13.5px; color: var(--sm-text); background: var(--sm-bg); outline: none; resize: none; max-height: 96px; line-height: 1.45; transition: border-color 0.2s; } .sm-chat-input:focus { border-color: var(--sm-accent); } .sm-chat-input::placeholder { color: var(--sm-text-faint); } .sm-chat-send { width: 36px; height: 36px; border: none; background: var(--sm-accent); color: #fff; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, opacity 0.2s; flex-shrink: 0; padding: 0; } .sm-chat-send:hover { background: var(--sm-accent-hover); } .sm-chat-send:disabled { opacity: 0.4; cursor: default; } .sm-chat-send svg { width: 16px; height: 16px; }