/* ========================================================================== File SQL — landing page Editor-themed, mono-typography. Dark by default; supports [data-theme]. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens Structural tokens (spacing, radii, fonts, motion, accent) live on :root and are the same in both themes. Palette tokens live on :root[data-theme='dark'] and :root[data-theme='light'] so the whole site can be re-themed by flipping one attribute on . NOTE: The VS Code walkthrough mockups (.ui-window, .mockup) are always dark — they represent VS Code's own Dark+ editor UI and would look wrong re-coloured to light. Only the surrounding page chrome themes. -------------------------------------------------------------------------- */ :root { /* Brand accent — sampled+adjusted from media/file-sql-icon.png (Milo). Warm amber, distinct from DuckDB yellow. Same in both themes. */ --accent: #ffb454; --accent-strong: #ffc06f; --accent-soft: rgba(255, 180, 84, 0.14); --accent-ring: rgba(255, 180, 84, 0.35); /* Dark ink on amber — always the same because amber never changes. */ --btn-primary-ink: #14181d; /* DuckDB yellow — footer credit pill ONLY. Do not use elsewhere. */ --duckdb: #fff000; /* Syntax highlight colours for the mock code (mockups stay dark). */ --syn-keyword: #ffb454; --syn-string: #a5e5a1; --syn-num: #79c0ff; --syn-fn: #d2a8ff; --syn-comment: #6e7681; --syn-op: #ff7b72; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* Fonts */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Sizes */ --fs-xs: 0.78rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; /* Layout */ --wrap-max: 1120px; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* Dark theme — the default. Also applied for [data-theme='dark']. */ :root, :root[data-theme='dark'] { color-scheme: dark; /* Palette — GitHub dark base */ --bg: #0d1117; --bg-elev: #10151d; --surface: #161b22; --surface-2: #1c2129; --border: #30363d; --border-strong: #3b424b; /* Text */ --text: #e6edf3; --muted: #7d8590; --muted-2: #99a1ac; /* Chrome surfaces that depend on theme */ --header-bg: rgba(13, 17, 23, 0.7); --header-bg-stuck: rgba(13, 17, 23, 0.88); --grid-line: rgba(230, 237, 243, 0.025); --copy-btn-hover-bg: #232932; --footer-shade: rgba(0, 0, 0, 0.3); --snippet-bg: #0b0f15; /* Shadows */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-mockup: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border); } /* Light theme — GitHub-light-inspired palette. Chrome only; mockups stay dark. */ :root[data-theme='light'] { color-scheme: light; --bg: #ffffff; --bg-elev: #f6f8fa; --surface: #f6f8fa; --surface-2: #eaeef2; --border: #d0d7de; --border-strong: #afb8c1; --text: #1f2328; --muted: #59636e; --muted-2: #656d76; --header-bg: rgba(255, 255, 255, 0.78); --header-bg-stuck: rgba(255, 255, 255, 0.92); --grid-line: rgba(15, 20, 25, 0.05); --copy-btn-hover-bg: #eaeef2; --footer-shade: rgba(15, 20, 25, 0.04); --snippet-bg: #eef1f5; --shadow-1: 0 1px 2px rgba(15, 20, 25, 0.06); --shadow-2: 0 8px 24px rgba(15, 20, 25, 0.08); --shadow-mockup: 0 30px 80px -20px rgba(15, 20, 25, 0.2), 0 0 0 1px var(--border); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; background-color: var(--bg); /* Subtle graph-paper pattern — CSS only, no image */ background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px), radial-gradient( ellipse 60% 40% at 50% 0%, rgba(255, 180, 84, 0.08), transparent 70% ); background-size: 32px 32px, 32px 32px, 100% 100%; transition: background-color 200ms var(--ease), color 200ms var(--ease); background-position: -1px -1px, -1px -1px, 0 0; background-attachment: fixed; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-strong); text-decoration: none; transition: color 120ms var(--ease); } a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } h1, h2, h3 { margin: 0 0 var(--sp-4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } kbd { display: inline-block; padding: 1px 6px; font-family: var(--font-mono); font-size: 0.78em; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; vertical-align: baseline; } pre, code { font-family: var(--font-mono); font-size: 0.92em; } pre { margin: 0; white-space: pre; overflow-x: auto; } /* Global focus ring — visible, on-brand */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; padding: var(--sp-2) var(--sp-4); background: var(--accent); color: #0d1117; font-weight: 600; z-index: 999; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--sp-5); } .section { padding: var(--sp-9) 0; } @media (max-width: 720px) { .section { padding: var(--sp-8) 0; } } .section-title { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: var(--sp-3); } .section-lede { color: var(--muted); text-align: center; max-width: 40rem; margin: 0 auto var(--sp-7); font-size: var(--fs-lg); } /* -------------------------------------------------------------------------- 4. Header / nav -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease), background 200ms var(--ease); } .site-header.is-stuck { border-bottom-color: var(--border); background: var(--header-bg-stuck); } .header-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; } .brand:hover { color: var(--text); text-decoration: none; } .brand-mark { flex: none; } .site-nav { display: flex; align-items: center; gap: var(--sp-5); } .site-nav a { color: var(--muted-2); font-size: var(--fs-sm); font-weight: 500; } .site-nav a:hover { color: var(--text); text-decoration: none; } .site-nav .btn { margin-left: var(--sp-2); } @media (max-width: 640px) { .site-nav a:not(.btn) { display: none; } } /* Theme toggle — round icon button in the header. Sun/moon swap via CSS based on the [data-theme] attribute on . */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--muted-2); background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: color 150ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease); } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text); background: var(--surface); border-color: var(--border-strong); outline: none; } .theme-toggle svg { display: block; width: 18px; height: 18px; } /* Dark theme shows the sun (click to go light); light shows the moon. */ :root[data-theme='dark'] .theme-toggle .icon-moon, :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; } :root[data-theme='dark'] .theme-toggle .icon-sun, :root:not([data-theme='light']) .theme-toggle .icon-sun { display: block; } :root[data-theme='light'] .theme-toggle .icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .icon-moon { display: block; } @media (max-width: 640px) { .theme-toggle { width: 32px; height: 32px; } .theme-toggle svg { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.75rem 1.25rem; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; text-align: center; transition: transform 120ms var(--ease), background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease); white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #14181d; border-color: var(--accent); box-shadow: 0 6px 20px -8px var(--accent-ring); } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #14181d; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-sm { padding: 0.4rem 0.85rem; font-size: var(--fs-sm); border-radius: var(--r-sm); } .btn-lg { padding: 1rem 1.75rem; font-size: var(--fs-lg); } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { padding: var(--sp-8) 0 var(--sp-9); } .hero-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; } @media (max-width: 1080px) { .hero-wrap { grid-template-columns: 1fr; gap: var(--sp-7); } } .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 10px; margin: 0 0 var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-2); background: var(--accent-soft); border: 1px solid rgba(255, 180, 84, 0.22); border-radius: 999px; letter-spacing: 0.02em; } .eyebrow .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); } .headline { font-family: var(--font-mono); font-size: clamp(1.9rem, 2.4vw + 1rem, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: var(--sp-5); text-wrap: balance; } .headline .accent { color: var(--accent); } .subhead { font-size: var(--fs-lg); color: var(--muted-2); max-width: 34rem; margin-bottom: var(--sp-6); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); } .hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin: 0; } /* -------------------------------------------------------------------------- 7. VS Code mockup (pure CSS, no image) -------------------------------------------------------------------------- */ .mockup { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-mockup); font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.6; transform: perspective(1600px) rotateX(1.5deg); transition: transform 400ms var(--ease); } .mockup::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 180, 84, 0.35), rgba(255, 180, 84, 0) 40%, rgba(255, 180, 84, 0) 60%, rgba(121, 192, 255, 0.2) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .mockup { transform: none; } } .mockup-titlebar { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; background: #10151d; border-bottom: 1px solid var(--border); } .lights { display: inline-flex; gap: 6px; } .light { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .light-red { background: #ff5f56; } .light-yellow { background: #ffbd2e; } .light-green { background: #27c93f; } .mockup-title { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.02em; } .mockup-tabs { display: flex; align-items: stretch; background: #0e131a; border-bottom: 1px solid var(--border); } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: var(--fs-xs); color: var(--muted-2); border-right: 1px solid var(--border); } .tab-active { background: var(--surface); color: var(--text); border-top: 2px solid var(--accent); padding-top: 6px; } .tab-close { margin-left: 4px; color: var(--muted); font-size: 1rem; line-height: 1; } .tab-spacer { flex: 1; } .mockup-editor { display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; background: var(--surface); min-height: 168px; } .gutter { display: flex; flex-direction: column; align-items: flex-end; padding-right: 10px; color: #4a5361; font-size: 0.78rem; line-height: 1.6; user-select: none; } .gutter span { line-height: 1.6; } .code { padding: 0 16px 0 8px; color: var(--text); min-height: 1.6em; } .code code { display: block; white-space: pre; } /* Typewriter caret (JS toggles class on parent) */ .code.typewriter-active #typewriter::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: caret 900ms steps(2, end) infinite; } @keyframes caret { 50% { opacity: 0; } } /* SQL token colors */ .tok-keyword { color: var(--syn-keyword); font-weight: 500; } .tok-string { color: var(--syn-string); } .tok-num { color: var(--syn-num); } .tok-fn { color: var(--syn-fn); } .tok-comment { color: var(--syn-comment); font-style: italic; } .tok-op { color: var(--syn-op); } .tok-muted { color: var(--muted); } /* --- Hero mockup toolbar (Run button + hint + rows/timing meta) -------- Same visual language as the real File SQL query panel: green Run button, Ctrl+Enter hint on the left, row count on the right. Kept slightly larger than the walkthrough mockups so it reads as the hero showcase. */ .mockup-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #10151d; border-bottom: 1px solid var(--border); color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-xs); overflow: hidden; } .mockup-toolbar .run-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #369655; color: #ffffff; border: 0; border-radius: 3px; font-size: var(--fs-xs); font-weight: 600; cursor: default; pointer-events: none; } .mockup-toolbar .tb-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mockup-toolbar .tb-meta { display: inline-flex; gap: 6px; align-items: center; color: var(--muted-2); font-family: var(--font-mono); white-space: nowrap; } /* --- Hero mockup results — reuse the extension-styled .ui-results grid, but nudge it a bit larger so it holds its own inside the hero. */ .mockup-results-wrap { border-top: 1px solid var(--border); } .mockup .ui-results { font-size: 12.5px; font-family: var(--font-mono); } .mockup .ui-results th, .mockup .ui-results td { padding: 7px 14px; } .mockup .ui-results th { font-family: var(--font-sans); font-size: 12.5px; color: #d4d4d4; background: #252526; font-weight: 600; } .mockup .ui-results .c-idx { width: 38px; color: var(--muted); text-align: center; background: rgba(0, 0, 0, 0.18); font-family: var(--font-mono); } .mockup .ui-results .c-num { text-align: right; color: var(--syn-num); } /* Narrow-screen tuning so the hero mockup stays legible without a horizontal page scroll on phones. */ @media (max-width: 520px) { .mockup-toolbar { font-size: 10.5px; padding: 6px 10px; gap: 6px; } .mockup-toolbar .tb-hint { display: none; } .mockup .ui-results { font-size: 11px; } .mockup .ui-results th, .mockup .ui-results td { padding: 5px 10px; } } /* -------------------------------------------------------------------------- 8. Demo video -------------------------------------------------------------------------- */ .video-frame { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at center, rgba(255, 180, 84, 0.08), transparent 60%), var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .demo-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bg); } /* Play-button overlay — video does NOT autoplay; user clicks to play. */ .video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; padding: 0; border: 0; background: radial-gradient( ellipse at center, rgba(13, 17, 23, 0.15) 0%, rgba(13, 17, 23, 0.55) 60%, rgba(13, 17, 23, 0.75) 100% ); color: var(--text); font: inherit; cursor: pointer; transition: background 200ms var(--ease), opacity 250ms var(--ease); z-index: 2; } .video-play:hover, .video-play:focus-visible { background: radial-gradient( ellipse at center, rgba(13, 17, 23, 0.05) 0%, rgba(13, 17, 23, 0.45) 60%, rgba(13, 17, 23, 0.7) 100% ); outline: none; } .video-play-circle { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: #14181e; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.65), 0 0 0 6px rgba(255, 180, 84, 0.18), 0 0 0 14px rgba(255, 180, 84, 0.08); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); } .video-play-circle svg { /* nudge the play triangle so it looks optically centred */ transform: translateX(3px); } .video-play:hover .video-play-circle, .video-play:focus-visible .video-play-circle { transform: scale(1.06); box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(255, 180, 84, 0.28), 0 0 0 16px rgba(255, 180, 84, 0.12); } .video-play-label { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .video-frame.is-playing .video-play { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .video-play, .video-play-circle { transition: none; } .video-play:hover .video-play-circle, .video-play:focus-visible .video-play-circle { transform: none; } } /* -------------------------------------------------------------------------- 9. Formats grid -------------------------------------------------------------------------- */ .format-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } @media (max-width: 900px) { .format-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .format-grid { grid-template-columns: 1fr; } } .format-card { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease); will-change: transform; min-width: 0; } .format-card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--surface-2); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 180, 84, 0.12); } @media (prefers-reduced-motion: reduce) { .format-card { transition: none; } .format-card:hover { transform: none; } } .format-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); margin-bottom: var(--sp-4); } .format-name { font-family: var(--font-mono); font-size: var(--fs-lg); margin: 0 0 var(--sp-2); color: var(--text); } .format-desc { font-size: var(--fs-sm); color: var(--muted-2); margin: 0; } /* -------------------------------------------------------------------------- 10. Features -------------------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } @media (max-width: 820px) { .feature-grid { grid-template-columns: 1fr; } } .feature { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); position: relative; overflow: hidden; min-width: 0; } .feature::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0.7; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); margin-bottom: var(--sp-4); } .feature-title { font-family: var(--font-mono); font-size: var(--fs-xl); margin-bottom: var(--sp-3); color: var(--text); letter-spacing: -0.02em; } .feature-desc { color: var(--muted-2); font-size: var(--fs-base); margin: 0; } /* -------------------------------------------------------------------------- 11. How it works -------------------------------------------------------------------------- */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } } .step { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; min-width: 0; } .step-num { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent); margin-bottom: var(--sp-3); letter-spacing: 0.1em; } .step-title { font-family: var(--font-mono); font-size: var(--fs-lg); margin-bottom: var(--sp-2); } .step-desc { color: var(--muted-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); flex: 1; } .snippet { background: var(--snippet-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-size: 0.82rem; overflow-x: auto; } .snippet code { font-size: inherit; } /* -------------------------------------------------------------------------- 11b. Walkthrough mockups — pure-CSS reproductions of real VS Code UI. Same technique as the hero .mockup: no images, no external assets. Each .ui-window is a self-contained frame styled to look like VS Code Dark+, with a subtle amber outer glow to tie into the brand palette. -------------------------------------------------------------------------- */ /* --- Shared window frame ------------------------------------------------- */ .walk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .walk-item--full { grid-column: 1 / -1; } @media (max-width: 820px) { .walk-grid { grid-template-columns: 1fr; gap: var(--sp-6); } } .walk-item { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .walk-cap { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-1); color: var(--muted-2); font-size: var(--fs-sm); line-height: 1.5; } .walk-cap em { color: var(--accent); font-style: normal; font-weight: 600; } .walk-cap kbd { font-family: var(--font-mono); font-size: 0.78em; padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--text); } .walk-num { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; border: 1px solid rgba(255, 180, 84, 0.35); line-height: 1; } .ui-window { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 180, 84, 0.06); font-family: var(--font-sans); font-size: 12px; color: #cccccc; min-width: 0; } .ui-window::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 180, 84, 0.28), rgba(255, 180, 84, 0) 40%, rgba(255, 180, 84, 0) 60%, rgba(121, 192, 255, 0.14) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .ui-titlebar { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 12px; background: #10151d; border-bottom: 1px solid var(--border); min-height: 28px; } .ui-title { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .ui-menubar { display: inline-flex; gap: 14px; font-size: 11px; color: #b0b6be; } .ui-menubar span { white-space: nowrap; } .ui-body { display: flex; background: #1e1e1e; /* VS Code default dark editor bg */ min-height: 260px; } /* --- Activity bar (shared) ---------------------------------------------- */ .ui-activity { flex: none; width: 40px; background: #181c22; border-right: 1px solid #0f1319; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .ab-icon { width: 22px; height: 22px; border-radius: 4px; background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)) no-repeat center / 14px 2px, linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)) no-repeat center / 14px 2px; background-position: center 7px, center 13px; opacity: 0.55; } .ab-active { opacity: 1; box-shadow: inset 2px 0 0 var(--accent); border-radius: 0; } /* ---------------- Mockup 1: Explorer + context menu -------------------- */ .ui-body--explorer { position: relative; } .ui-explorer { flex: 1; min-width: 0; background: #181c22; padding: 8px 0; font-family: var(--font-sans); position: relative; } .ui-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px 8px; color: #8a929a; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .ui-panel-header .dots { letter-spacing: 0; font-size: 12px; } .ui-folder, .ui-file { display: flex; align-items: center; gap: 6px; padding: 3px 14px 3px 10px; color: #cccccc; font-size: 12px; white-space: nowrap; } .ui-folder .chev { color: #8a929a; font-size: 10px; width: 12px; } .ui-file { padding-left: 32px; } .ui-file .file-dot { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #4ec9b0, #1e7f6a); flex: none; } .ui-file.selected { background: rgba(255, 255, 255, 0.06); outline: 1px solid rgba(255, 255, 255, 0.15); } .ui-context { position: absolute; top: 46px; left: 130px; min-width: 260px; background: #252526; border: 1px solid #454545; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); padding: 4px 0; z-index: 2; font-size: 12px; } .ctx-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px; color: #cccccc; gap: 24px; white-space: nowrap; } .ctx-item.is-hover { background: var(--accent); color: #14181d; font-weight: 600; } .ctx-item.is-hover .ctx-kbd { color: #14181d; opacity: 0.75; } .ctx-kbd { color: #8a929a; font-size: 11px; font-family: var(--font-mono); } .ctx-sep { height: 1px; background: #3a3a3a; margin: 4px 8px; } /* ---------------- Mockup 2: Quick Pick --------------------------------- */ .ui-body--quickpick { min-height: 260px; align-items: flex-start; justify-content: center; padding: 26px 20px; } .qp { width: 100%; max-width: 460px; background: #252526; border: 1px solid #454545; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); overflow: hidden; } .qp-input { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #3c3c3c; border-bottom: 1px solid #1c1c1c; min-height: 28px; } .qp-placeholder { color: #b0b6be; font-size: 12px; } .qp-caret { display: inline-block; width: 1px; height: 14px; background: #cccccc; margin-left: 2px; animation: qp-blink 1s steps(2) infinite; } @keyframes qp-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .qp-caret { animation: none; } } .qp-list { padding: 4px 0; } .qp-option { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 4px 10px; padding: 6px 12px; color: #cccccc; font-size: 12px; } .qp-option.is-selected { /* Amber to match the context-menu 'Open with File SQL' highlight in Mockup 1 — both mockups tell the same story: "this is the action". */ background: var(--accent); color: #14181d; font-weight: 600; } .qp-icon { display: inline-flex; align-items: center; justify-content: center; color: #cccccc; } .qp-option.is-selected .qp-icon { color: #14181d; } .qp-title { font-weight: 500; } .qp-desc { color: #8a929a; font-size: 11px; grid-column: 3; justify-self: end; text-align: right; } .qp-option.is-selected .qp-desc { color: rgba(20, 24, 29, 0.7); } @media (max-width: 460px) { .qp-option { grid-template-columns: 20px 1fr; } .qp-desc { grid-column: 2; justify-self: start; text-align: left; } } /* ---------------- Mockup 3: Full query editor -------------------------- */ .ui-window--editor { font-size: 11.5px; } .ui-body--editor { min-height: 440px; align-items: stretch; } .ui-tables { flex: none; width: 220px; background: #181c22; border-right: 1px solid #0f1319; font-size: 12px; overflow: hidden; } .ui-tables .ui-panel-header { padding: 6px 10px 6px 14px; text-transform: none; letter-spacing: 0; font-size: 11px; color: #cccccc; } .panel-actions { display: inline-flex; gap: 6px; color: #8a929a; font-size: 12px; } .panel-actions .pa { display: inline-block; width: 14px; text-align: center; } .tbl-item { display: flex; align-items: center; gap: 6px; padding: 3px 10px; color: #cccccc; white-space: nowrap; } .tbl-item .chev { color: #8a929a; font-size: 10px; width: 12px; } .tbl-file-dot { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #4ec9b0, #1e7f6a); flex: none; } .tbl-name { color: #e6edf3; } .tbl-badge { color: #8a929a; font-size: 10px; font-family: var(--font-mono); margin-left: 4px; } .tbl-close { margin-left: auto; color: #8a929a; font-size: 13px; line-height: 1; } .tbl-cols { list-style: none; margin: 0; padding: 0 0 4px; } .tbl-cols li { display: flex; align-items: center; gap: 8px; padding: 2px 10px 2px 28px; color: #cccccc; font-size: 12px; white-space: nowrap; } .col-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #4ec9b0; background: linear-gradient(90deg, #4ec9b0 50%, transparent 50%); flex: none; } .col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .col-type { color: #8a929a; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; } .ui-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #1e1e1e; } .ui-editor-tabs { display: flex; background: #181c22; border-bottom: 1px solid #0f1319; } .ui-editor-tabs .tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: #8a929a; border-right: 1px solid #0f1319; white-space: nowrap; } .ui-editor-tabs .tab-active { background: #1e1e1e; color: #ffffff; border-top: 2px solid var(--accent); padding-top: 4px; } .tab-dot { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #4ec9b0, #1e7f6a); } .ui-editor-tabs .tab-close { color: #8a929a; font-size: 13px; line-height: 1; } .ui-editor-toolbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #181c22; border-bottom: 1px solid #0f1319; color: #8a929a; font-size: 11px; overflow: hidden; flex-wrap: wrap; } .run-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: #369655; color: #ffffff; border: 0; border-radius: 3px; font-size: 11px; font-weight: 600; cursor: default; pointer-events: none; } .tb-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-meta { display: inline-flex; gap: 12px; align-items: center; color: #8a929a; white-space: nowrap; } .tb-warn { display: inline-flex; align-items: center; gap: 4px; color: #d9a441; } .ui-code { margin: 0; padding: 12px 14px; background: #1e1e1e; color: #d4d4d4; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; white-space: pre; border-bottom: 1px solid #0f1319; min-height: 88px; overflow: hidden; } .ui-code .ln { display: inline-block; width: 28px; color: #4a5361; text-align: right; padding-right: 12px; user-select: none; } .ui-results-wrap { overflow-x: auto; background: #1e1e1e; border-top: 1px solid #0f1319; } .ui-results { width: 100%; border-collapse: collapse; font-size: 11.5px; color: #cccccc; font-family: var(--font-mono); } .ui-results th, .ui-results td { padding: 5px 12px; text-align: left; border-bottom: 1px solid #2b2b2b; border-right: 1px solid #2b2b2b; white-space: nowrap; } .ui-results th { background: #252526; color: #d4d4d4; font-weight: 600; font-family: var(--font-sans); font-size: 12px; position: sticky; top: 0; } .ui-results .c-idx { color: #8a929a; text-align: center; width: 34px; background: rgba(0, 0, 0, 0.15); } .ui-results tbody tr:hover td { background: rgba(255, 255, 255, 0.03); } /* Editor-mockup responsive: on narrow screens allow horizontal scroll for the whole editor body so proportions stay VS-Code-like. */ @media (max-width: 720px) { .ui-body--editor { min-height: 380px; } .ui-tables { width: 180px; } .ui-code { font-size: 11.5px; padding: 10px 12px; } .ui-results th, .ui-results td { padding: 4px 10px; } } @media (max-width: 520px) { .ui-body--editor { min-height: 340px; } .ui-tables { width: 148px; } .tbl-cols li { padding-left: 20px; font-size: 11px; } .col-type { display: none; } .ui-editor-toolbar { font-size: 10px; padding: 5px 8px; gap: 6px; } .tb-hint { display: none; } } /* -------------------------------------------------------------------------- 11c. Walkthrough mockups — LIGHT THEME palette Same VS-Code-inspired UI, re-coloured to the VS Code Light+ palette. Only applies inside the walkthrough grid (.walk-grid …). The HERO mockup (.mockup) is intentionally NOT re-themed and stays dark — think of it as a code screenshot embedded in the page. Note: We keep the amber highlight for 'Open with File SQL' and the green Run button + parquet file-icon gradient as-is; those are brand/status colours and read fine on both light and dark. -------------------------------------------------------------------------- */ :root[data-theme='light'] .walk-grid .ui-window { color: #3b3b3b; box-shadow: 0 24px 60px -24px rgba(15, 20, 25, 0.18), 0 0 0 1px rgba(255, 180, 84, 0.08); } :root[data-theme='light'] .walk-grid .ui-window::after { background: linear-gradient( 135deg, rgba(255, 180, 84, 0.32), rgba(255, 180, 84, 0) 40%, rgba(255, 180, 84, 0) 60%, rgba(9, 105, 218, 0.18) ); } /* Window chrome — titlebar and menubar */ :root[data-theme='light'] .walk-grid .ui-titlebar { background: #e5e5e5; border-bottom-color: #d0d0d0; } :root[data-theme='light'] .walk-grid .ui-title { color: #424242; } :root[data-theme='light'] .walk-grid .ui-menubar { color: #3b3b3b; } /* Editor body + activity bar + sidebar (Light Modern-ish) */ :root[data-theme='light'] .walk-grid .ui-body { background: #ffffff; } :root[data-theme='light'] .walk-grid .ui-activity { background: #f3f3f3; border-right-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ab-icon { background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) no-repeat center / 14px 2px, linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) no-repeat center / 14px 2px; background-position: center 7px, center 13px; opacity: 0.6; } :root[data-theme='light'] .walk-grid .ab-active { opacity: 1; } /* Mockup 1: Explorer + right-click context menu */ :root[data-theme='light'] .walk-grid .ui-explorer { background: #f3f3f3; } :root[data-theme='light'] .walk-grid .ui-panel-header { color: #616161; } :root[data-theme='light'] .walk-grid .ui-folder, :root[data-theme='light'] .walk-grid .ui-file { color: #3b3b3b; } :root[data-theme='light'] .walk-grid .ui-folder .chev { color: #616161; } :root[data-theme='light'] .walk-grid .ui-file.selected { background: rgba(0, 0, 0, 0.06); outline-color: rgba(0, 0, 0, 0.12); } :root[data-theme='light'] .walk-grid .ui-context { background: #ffffff; border-color: #c8c8c8; box-shadow: 0 8px 24px rgba(15, 20, 25, 0.18); } :root[data-theme='light'] .walk-grid .ctx-item { color: #3b3b3b; } :root[data-theme='light'] .walk-grid .ctx-kbd { color: #616161; } :root[data-theme='light'] .walk-grid .ctx-sep { background: #e5e5e5; } /* .ctx-item.is-hover keeps its amber highlight — already reads on both themes */ /* Mockup 2: Quick Pick */ :root[data-theme='light'] .walk-grid .qp { background: #ffffff; border-color: #c8c8c8; box-shadow: 0 12px 30px rgba(15, 20, 25, 0.18); } :root[data-theme='light'] .walk-grid .qp-input { background: #ffffff; border-bottom-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .qp-placeholder { color: #6e6e6e; } :root[data-theme='light'] .walk-grid .qp-caret { background: #3b3b3b; } :root[data-theme='light'] .walk-grid .qp-option { color: #3b3b3b; } /* .qp-option.is-selected keeps its amber highlight — reads on both themes and matches the context-menu highlight in Mockup 1. */ :root[data-theme='light'] .walk-grid .qp-icon { color: #3b3b3b; } :root[data-theme='light'] .walk-grid .qp-desc { color: #616161; } /* Mockup 3: Query Editor — tables sidebar */ :root[data-theme='light'] .walk-grid .ui-tables { background: #f3f3f3; border-right-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ui-tables .ui-panel-header { color: #3b3b3b; } :root[data-theme='light'] .walk-grid .panel-actions { color: #616161; } :root[data-theme='light'] .walk-grid .tbl-item { color: #3b3b3b; } :root[data-theme='light'] .walk-grid .tbl-item .chev { color: #616161; } :root[data-theme='light'] .walk-grid .tbl-name { color: #1a1a1a; } :root[data-theme='light'] .walk-grid .tbl-badge, :root[data-theme='light'] .walk-grid .tbl-close, :root[data-theme='light'] .walk-grid .col-type { color: #616161; } :root[data-theme='light'] .walk-grid .tbl-cols li { color: #3b3b3b; } /* Mockup 3: Query Editor — editor pane, tabs, toolbar */ :root[data-theme='light'] .walk-grid .ui-editor { background: #ffffff; } :root[data-theme='light'] .walk-grid .ui-editor-tabs { background: #ececec; border-bottom-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ui-editor-tabs .tab { color: #616161; border-right-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ui-editor-tabs .tab-active { background: #ffffff; color: #1a1a1a; } :root[data-theme='light'] .walk-grid .ui-editor-tabs .tab-close { color: #616161; } :root[data-theme='light'] .walk-grid .ui-editor-toolbar { background: #f3f3f3; border-bottom-color: #e5e5e5; color: #616161; } :root[data-theme='light'] .walk-grid .tb-meta { color: #616161; } :root[data-theme='light'] .walk-grid .tb-warn { color: #996f16; } /* Mockup 3: Query Editor — code and syntax (VS Code Light+ palette, scoped to the walkthrough editor mockup only so the hero stays dark) */ :root[data-theme='light'] .walk-grid .ui-code { background: #ffffff; color: #24292f; border-bottom-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ui-code .ln { color: #a0a0a0; } :root[data-theme='light'] .walk-grid .ui-code .tok-keyword { color: #0000ff; } :root[data-theme='light'] .walk-grid .ui-code .tok-string { color: #a31515; } :root[data-theme='light'] .walk-grid .ui-code .tok-num { color: #098658; } :root[data-theme='light'] .walk-grid .ui-code .tok-fn { color: #795e26; } :root[data-theme='light'] .walk-grid .ui-code .tok-comment { color: #008000; } :root[data-theme='light'] .walk-grid .ui-code .tok-op { color: #1a1a1a; } /* Mockup 3: Query Editor — results grid */ :root[data-theme='light'] .walk-grid .ui-results-wrap { background: #ffffff; border-top-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ui-results { color: #3b3b3b; } :root[data-theme='light'] .walk-grid .ui-results th, :root[data-theme='light'] .walk-grid .ui-results td { border-bottom-color: #e5e5e5; border-right-color: #e5e5e5; } :root[data-theme='light'] .walk-grid .ui-results th { background: #ececec; color: #1a1a1a; } :root[data-theme='light'] .walk-grid .ui-results .c-idx { color: #6e6e6e; background: rgba(0, 0, 0, 0.04); } :root[data-theme='light'] .walk-grid .ui-results tbody tr:hover td { background: rgba(0, 0, 0, 0.03); } /* -------------------------------------------------------------------------- 7b. HERO mockup — LIGHT THEME palette Same VS Code Light+ treatment as the walkthrough (11c). Kept in a separate block because the hero mockup uses .mockup / .mockup-* selectors (not .ui-*). The rest of the .mockup rules already use themed tokens (--surface, --border, --text, --muted, --accent), so only the hardcoded dark colours need per-theme overrides here. -------------------------------------------------------------------------- */ :root[data-theme='light'] .mockup { color: #3b3b3b; } :root[data-theme='light'] .mockup::after { background: linear-gradient( 135deg, rgba(255, 180, 84, 0.32), rgba(255, 180, 84, 0) 40%, rgba(255, 180, 84, 0) 60%, rgba(9, 105, 218, 0.18) ); } /* Titlebar & tabs */ :root[data-theme='light'] .mockup-titlebar { background: #e5e5e5; } :root[data-theme='light'] .mockup-title { color: #424242; } :root[data-theme='light'] .mockup-tabs { background: #ececec; } :root[data-theme='light'] .mockup-tabs .tab { color: #616161; } :root[data-theme='light'] .mockup-tabs .tab-active { background: #ffffff; color: #1a1a1a; } :root[data-theme='light'] .mockup-tabs .tab-close { color: #616161; } /* Editor pane */ :root[data-theme='light'] .mockup-editor { background: #ffffff; } :root[data-theme='light'] .mockup .gutter { color: #a0a0a0; } :root[data-theme='light'] .mockup .code { color: #24292f; } /* SQL syntax — Light+ palette, scoped to the hero mockup only */ :root[data-theme='light'] .mockup .tok-keyword { color: #0000ff; } :root[data-theme='light'] .mockup .tok-string { color: #a31515; } :root[data-theme='light'] .mockup .tok-num { color: #098658; } :root[data-theme='light'] .mockup .tok-fn { color: #795e26; } :root[data-theme='light'] .mockup .tok-comment { color: #008000; } :root[data-theme='light'] .mockup .tok-op { color: #1a1a1a; } :root[data-theme='light'] .code.typewriter-active #typewriter::after { background: #0000ff; } /* Toolbar (Run button stays green — status colour reads on both themes) */ :root[data-theme='light'] .mockup-toolbar { background: #f3f3f3; color: #616161; } :root[data-theme='light'] .mockup-toolbar .tb-meta { color: #616161; } /* Results grid */ :root[data-theme='light'] .mockup-results-wrap { background: #ffffff; } :root[data-theme='light'] .mockup .ui-results { color: #3b3b3b; } :root[data-theme='light'] .mockup .ui-results th { background: #ececec; color: #1a1a1a; } :root[data-theme='light'] .mockup .ui-results td { border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; } :root[data-theme='light'] .mockup .ui-results .c-idx { color: #6e6e6e; background: rgba(0, 0, 0, 0.04); } :root[data-theme='light'] .mockup .ui-results .c-num { color: #098658; } /* -------------------------------------------------------------------------- 12. Install CTA -------------------------------------------------------------------------- */ .install-cta { text-align: center; position: relative; } .install-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 60% at 50% 40%, rgba(255, 180, 84, 0.08), transparent 70% ); pointer-events: none; } .install-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } .install-wrap .section-title { margin-bottom: var(--sp-2); } .install-wrap .section-lede { margin-bottom: var(--sp-4); } .copy-row { width: 100%; max-width: 32rem; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); } .copy-label { color: var(--muted); font-size: var(--fs-sm); } .copy-field { display: flex; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); } .copy-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .copy-input { flex: 1; min-width: 0; padding: 12px 14px; background: transparent; color: var(--text); border: 0; font-family: var(--font-mono); font-size: var(--fs-sm); outline: none; } .copy-input:focus { outline: none; } .copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--surface-2); color: var(--text); border: 0; border-left: 1px solid var(--border); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background 120ms var(--ease), color 120ms var(--ease); } .copy-btn:hover { background: var(--copy-btn-hover-bg); } .copy-btn .check-icon { display: none; } .copy-btn.is-copied { color: var(--btn-primary-ink); background: var(--accent); } .copy-btn.is-copied .copy-icon { display: none; } .copy-btn.is-copied .check-icon { display: inline-block; } .copy-status { min-height: 1.2em; font-size: var(--fs-xs); color: var(--muted); } /* -------------------------------------------------------------------------- 13. Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: var(--sp-7) 0 var(--sp-6); margin-top: var(--sp-6); background: linear-gradient(180deg, transparent, var(--footer-shade)); } .footer-wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; } @media (max-width: 820px) { .footer-wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .footer-brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: center; } .footer-nav a { color: var(--muted-2); font-size: var(--fs-sm); } .footer-nav a:hover { color: var(--text); text-decoration: none; } .footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-xs); color: var(--muted); } @media (max-width: 820px) { .footer-meta { align-items: center; } } .footer-meta a { color: var(--muted-2); } .footer-meta a:hover { color: var(--text); text-decoration: none; } /* DuckDB pill — ONLY place --duckdb appears. */ .duckdb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--duckdb); background: rgba(255, 240, 0, 0.08); border: 1px solid rgba(255, 240, 0, 0.35); border-radius: 999px; letter-spacing: 0.02em; } .duckdb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--duckdb); box-shadow: 0 0 6px rgba(255, 240, 0, 0.6); } /* Light theme: pure yellow text on white is unreadable — use a deep amber for the label but keep the yellow dot as a brand visual signal. */ :root[data-theme='light'] .duckdb-pill { color: #7a5b00; background: rgba(255, 240, 0, 0.16); border-color: rgba(190, 150, 0, 0.45); } :root[data-theme='light'] .duckdb-dot { box-shadow: 0 0 6px rgba(190, 150, 0, 0.7); } /* -------------------------------------------------------------------------- 14. Reduced motion — kill decorative animations -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }