/* ============================================================ DripFed — dark terminal sections with copper accents Clouds · funnel · pipes · machine stay structurally identical. Content sections translate /root/site's greyscale terminal report into a dark shade ramp: square corners, heavy ruled borders, flat stepped fills, monospace, ░▒▓█ block-glyph prefixes. Copper is the single accent. ============================================================ */ /* ==================== @font-face (self-hosted) ==================== Moonshine (by Crazynorm, personal-use license) — display face for the brand wordmark only. Subset to the lowercase glyphs in "dripfed" (+ space/punctuation), converted from the upstream TTF to WOFF2 (primary) and WOFF (legacy fallback). src path is relative to this stylesheet (css/ → ../fonts/). */ @font-face { font-family: 'Moonshine'; src: url('../fonts/moonshine.woff2') format('woff2'), url('../fonts/moonshine.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020, U+002C-002E, U+003A-003B, U+0064-0066, U+0069, U+0070, U+0072; } /* ============================================================ THEME SYSTEM Two palettes — dark (terminal) and light (paper) — bound to a single set of tokens. JS sets [data-theme] on ; a no-FOUC boot script in picks the initial value before paint. All colors everywhere flow through these variables, so flipping the attribute re-tints the whole page (CSS + SVG + canvas palettes) with one transition. Token glossary: --bg / --bg-elev page + raised surfaces --shade-0..4 terminal block-fill ramp (low→high) --ink / --ink-soft terminal text + dimmed text --grey-0..7 greyscale ramp (rain glyphs, etc.) --line / --line-soft inner cell rules --rule / --rule-hard outer panel rules --copper-* accent ramp (unchanged across themes) --copper-text foreground copper for text on page bg (copper-light on dark, copper-dark on light) --copper-sheen 5-stop accent gradient for borders --text / --text-dim body text + muted body text --cloud-puff / --cloud-eye cloud SVG fills/strokes --machine-housing / --machine-housing-light cream body grads --machine-viewport agent-screen backing color --reject-red diff/reject red --selection-fg ::selection text color --cta-text cta button label color --grid hero grid line color --shadow / --shadow-copper drop shadows ============================================================ */ :root { /* fonts are identical across themes */ --font-heading: 'Quicksand', sans-serif; /* brand wordmark only */ --font-brand: 'Moonshine', 'Quicksand', sans-serif; /* large hero wordmark */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* radii (hero/agent-screen only — sections are square) */ --radius: 18px; --radius-sm: 10px; --radius-xs: 6px; /* copper accent — the one constant across both themes. Light mode deepens copper slightly so it keeps its contrast on paper, but the hue is identical. */ --copper: #d4a373; --copper-light: #e6c89a; --copper-dark: #b07d4a; --copper-deep: #8b5e34; --copper-shadow: #6d4c41; } /* ---------- DARK (default) ---------- */ :root[data-theme="dark"] { --bg: #07070b; --bg-elev: #0e0e15; --bg-card: rgba(20, 20, 30, 0.62); --bg-card-strong: rgba(24, 24, 34, 0.78); --grey-0: #f3f3f7; --grey-1: #e7e7ee; --grey-2: #c3c6d0; --grey-3: #9aa0b4; --grey-4: #6d727f; --grey-5: #4a4d57; --grey-6: #2a2a34; --grey-7: #1a1a22; --shade-0: #121218; --shade-1: #18181f; --shade-2: #1e1e26; --shade-3: #26262f; --shade-4: #2e2e38; --ink: #e7e7ee; --ink-soft: #b4b4c0; --ink-mute: #767688; --line: #3a3a44; --line-soft: #2a2a34; --rule: #4a4a55; --rule-hard: #6a6a78; --copper-sheen: linear-gradient(90deg, #B07D4A, #D4A373 25%, #E6C89A 50%, #D4A373 75%, #B07D4A); --text: var(--grey-1); --text-dim: var(--grey-3); --text-mute: var(--grey-4); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --border-copper: rgba(212, 163, 115, 0.45); --grid: rgba(255, 255, 255, 0.05); --shadow: 0 10px 40px rgba(0, 0, 0, 0.45); --shadow-copper: 0 0 22px rgba(212, 163, 115, 0.22); /* SVG-bound tokens (see "SVG THEME BINDING" below) */ --cloud-puff-1: #e7e7ee; --cloud-puff-2: #c3c6d0; --cloud-puff-3: #9aa0b4; --cloud-eye: #1f1f28; --cloud-cheek: #d4a373; --machine-housing-top: #C2A68A; --machine-housing-mid: #B89878; --machine-housing-bot: #A6866A; --machine-housing-light-top: #D0B89A; --machine-housing-light-mid: #C2A68A; --machine-housing-light-bot: #B89878; --machine-housing-stroke: #8B6E52; /* The machine's CRT screen has four overlapping dark surfaces (the SVG backing rect, the .agent-screen HTML div, the .screen-diff overlay, and the .screen-result flash). They must read as one colour or a "strip with slightly different darkness" appears at the seams — especially visible mid theme-flip when one layer transitions slightly out of sync with another. All four bind to a single token; the -overlay and -result aliases exist only so future edits can refer to them by role without re-deriving the value, and can never drift from the backing colour. */ --machine-viewport: #121218; --machine-viewport-overlay: var(--machine-viewport); --machine-viewport-result: var(--machine-viewport); --diff-add-bg: rgba(212, 163, 115, 0.10); --diff-empty-bg: rgba(0, 0, 0, 0.25); /* Screen-local text tokens. The machine's CRT stays dark in both themes, so text on it must stay LIGHT in both themes — but the page-level --grey-* ramp inverts in light mode (dark text on light paper), which would render the screen's todo items and session lines invisible on the dark backing. These three tokens decouple screen text from the page ramp: in dark mode they alias the page greys (no change), and in light mode the :root [data-theme="light"] block below pins them to the same light values so the screen reads identically regardless of page theme. The machine is a physical object with its own dark surface; its text belongs to that surface, not to the page. */ --screen-text-bright: var(--grey-1); /* active todo, file names */ --screen-text-mid: var(--grey-2); /* pending todo, ctx lines */ --screen-text-dim: var(--grey-5); /* pending todo box glyph */ --reject-red: #c98a8a; --reject-red-bg: rgba(201, 138, 138, 0.08); --selection-fg: #000; --cta-text: #0a0a0f; --hero-glow-tl: var(--copper-dark); --hero-glow-br: var(--copper); /* Foreground text color for copper-emphasis text (KPI numbers, tier prices, table additions, link hovers). On dark, the pale cream-copper reads as a bright accent. The light theme overrides this to the deeper copper-dark for contrast on paper. */ --copper-text: var(--copper-light); } /* ---------- LIGHT (paper terminal) ---------- Warm paper background, dark ink, deepened copper accent. Shade ramp inverts to a light stepped grey ramp so the terminal block-fill rhythm survives the flip. */ :root[data-theme="light"] { --bg: #f4f0e8; --bg-elev: #faf7f0; --bg-card: rgba(255, 252, 246, 0.72); --bg-card-strong: rgba(255, 252, 246, 0.88); --grey-0: #1a1a22; --grey-1: #2a2a32; --grey-2: #3a3a44; --grey-3: #5a5a66; --grey-4: #7a7a86; --grey-5: #9a9aa6; --grey-6: #c3c6d0; --grey-7: #e7e7ee; /* shade ramp → paper ramp (low→high lightness) */ --shade-0: #f7f3eb; --shade-1: #efeae0; --shade-2: #e6e1d6; --shade-3: #ddd7ca; --shade-4: #d3ccbe; --ink: #1a1a22; --ink-soft: #4a4a55; --ink-mute: #7a7a86; --line: #c4bdae; --line-soft: #d3ccbe; --rule: #a89c8a; --rule-hard: #8b7e6a; /* copper sheen stays warm but the stops shift slightly so it reads on paper without going muddy. */ --copper-sheen: linear-gradient(90deg, #A66B3A, #C7905A 25%, #E0B07A 50%, #C7905A 75%, #A66B3A); --text: var(--grey-1); --text-dim: var(--grey-3); --text-mute: var(--grey-4); --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --border-copper: rgba(166, 107, 58, 0.45); --grid: rgba(0, 0, 0, 0.045); --shadow: 0 10px 40px rgba(60, 50, 30, 0.14); --shadow-copper: 0 0 22px rgba(166, 107, 58, 0.18); /* SVG-bound tokens — clouds go slate-on-cream, machine goes brushed aluminium (cool grey) so it doesn't read as a brown box on the paper bg. */ --cloud-puff-1: #ffffff; --cloud-puff-2: #f0ece2; --cloud-puff-3: #e0dccc; --cloud-eye: #2a2a32; --cloud-cheek: #c7905a; --machine-housing-top: #e8e4d8; --machine-housing-mid: #ded9ca; --machine-housing-bot: #cdc7b6; --machine-housing-light-top: #f0ece2; --machine-housing-light-mid: #e8e4d8; --machine-housing-light-bot: #ded9ca; --machine-housing-stroke: #a89c8a; /* Same single-token discipline as the dark block above. The light backing is marginally lighter (#1a1a22 vs #121218) so the dark copper-on-screen text keeps contrast on paper. The diff-cell tints are deepened + alpha-boosted vs dark so they still read against the lighter backing. */ --machine-viewport: #1a1a22; --machine-viewport-overlay: var(--machine-viewport); --machine-viewport-result: var(--machine-viewport); --diff-add-bg: rgba(166, 107, 58, 0.14); --diff-empty-bg: rgba(0, 0, 0, 0.30); /* Screen-local text tokens — PINNED to the same light values as the dark theme (not aliased to the page greys, which invert to dark values here and would vanish on the dark screen). The machine's CRT is its own dark surface in both themes, so its text stays light in both themes. See the dark block above for the full rationale. */ --screen-text-bright: #e7e7ee; --screen-text-mid: #c3c6d0; --screen-text-dim: #4a4d57; --reject-red: #a44a4a; --reject-red-bg: rgba(164, 74, 74, 0.08); --selection-fg: #fff; --cta-text: #fffaf0; --hero-glow-tl: #c7905a; --hero-glow-br: #e0b07a; /* Copper-emphasis text on paper. The pale --copper-light (#e6c89a) vanishes on #f4f0e8 — contrast ratio ~1.3:1. The deeper --copper-dark (#b07d4a) lands at ~4.6:1, clearing WCAG AA for large text (the only place this token is used is >=15px bold). SVG fills/strokes keep --copper-light (they read as warm metallic highlights, not text). */ --copper-text: var(--copper-dark); } /* legacy aliases kept for existing hero markup — map to the themed tokens so old references re-tint automatically. */ :root { --pipe: var(--copper); --pipe-dark: var(--copper-dark); --pipe-highlight: var(--copper-light); --pipe-shadow: var(--copper-deep); --pipe-deep: var(--copper-shadow); --text-light: var(--text-dim); } /* Scoped transition: applied to for ~400ms during a theme flip so colors crossfade instead of snapping. The class is added by the toggle handler and removed after the transition completes — it is NOT always-on, so normal interactions stay snappy. */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color 0.36s ease, border-color 0.36s ease, color 0.36s ease, fill 0.36s ease, stroke 0.36s ease, stop-color 0.36s ease, box-shadow 0.36s ease, outline-color 0.36s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition-duration: 0.01ms !important; } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text); background-color: var(--bg); line-height: 1.6; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; background: radial-gradient(circle at 15% -10%, rgba(212, 163, 115, 0.10), transparent 45%), radial-gradient(circle at 88% 8%, rgba(212, 163, 115, 0.07), transparent 50%), radial-gradient(circle at 50% 110%, rgba(139, 94, 52, 0.10), transparent 55%), var(--bg); } :root[data-theme="light"] body { background: radial-gradient(circle at 15% -10%, rgba(199, 144, 90, 0.12), transparent 45%), radial-gradient(circle at 88% 8%, rgba(199, 144, 90, 0.10), transparent 50%), radial-gradient(circle at 50% 110%, rgba(166, 107, 58, 0.10), transparent 55%), var(--bg); } /* ==================== BACKGROUND LAYERS ==================== */ /* Masked architectural grid (replaces the old cream circuit pattern) */ .bg-grid { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%); z-index: 0; } .bg-glow { position: fixed; pointer-events: none; width: 720px; height: 720px; border-radius: 50%; filter: blur(140px); opacity: 0.40; z-index: 0; } .bg-glow--copper-tl { top: -180px; left: -200px; background: var(--hero-glow-tl); } .bg-glow--copper-br { bottom: -220px; right: -180px; background: var(--hero-glow-br); opacity: 0.30; } header, main, footer { position: relative; z-index: 1; } /* ==================== CANVAS ==================== */ #particle-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none; } /* ==================== HERO ==================== */ .hero { position: relative; min-height: 100vh; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; text-align: center; gap: 2.5rem; padding: 1.5rem 32px 0; overflow: visible; } .hero-visual { position: relative; flex: 0 0 460px; width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 480px; padding-top: 1.5rem; } .clouds-container { position: absolute; inset: 0; z-index: 10; pointer-events: none; } .cloud { position: absolute; width: clamp(120px, 16vw, 220px); cursor: pointer; pointer-events: auto; will-change: transform; } .cloud--small { width: clamp(80px, 12vw, 160px); } .cloud:hover { filter: brightness(1.08); } .cloud-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); } /* Cloud SVG theme binding — puffs are the first 's circles (one of three pastel puffs per cloud), eyes/mouth are ellipses + the single Q-path, cheeks are the remaining circles outside the . Each fill/stroke is bound to a themed token so the clouds re-tint with the page. Opacities stay inline on the elements so they don't get overridden. */ .cloud-svg > g > circle { fill: var(--cloud-puff, var(--cloud-puff-1)); } .cloud--alt .cloud-svg > g > circle { fill: var(--cloud-puff, var(--cloud-puff-2)); } .cloud--dim .cloud-svg > g > circle { fill: var(--cloud-puff, var(--cloud-puff-3)); } .cloud-svg > g + ellipse, .cloud-svg > ellipse { fill: var(--cloud-eye); } .cloud-svg > g + path, .cloud-svg > path { stroke: var(--cloud-eye); } /* Cheeks (the two copper circles outside the puff ) */ .cloud-svg > circle { fill: var(--cloud-cheek); } :root[data-theme="light"] .cloud-svg { filter: drop-shadow(0 8px 18px rgba(60, 50, 30, 0.18)); } :root[data-theme="light"] .bg-glow--copper-br { opacity: 0.22; } /* Funnel */ .funnel-wrapper { position: relative; z-index: 5; width: min(288px, 27.2vw); margin-top: clamp(11rem, 16.25vh, 15rem); margin-left: 44px; filter: drop-shadow(0 20px 44px var(--hero-drop-shadow, rgba(0, 0, 0, 0.55))); } .funnel-svg { width: 100%; height: auto; display: block; overflow: visible; } /* Pipe overlay (connects funnel to machine across columns) */ #pipe-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 25; } /* Hero text (lives under the funnel in the left column). --hero-text-shift is set by alignHeroText() in js/canvas.js to bring the block's top edge level with the processing machine's top edge in the right column, giving the hero a horizontally symmetrical skyline across both columns. It defaults to 0px (natural flow under the funnel) until JS measures and sets it, and is cleared below the stack breakpoint (880px) where the hero becomes a single column and the alignment is meaningless. The transition smooths re-alignment on resize and font load; will-change keeps the translateY on its own compositor layer so the shift never thrashes layout in the hero's flex row. */ .hero-text { position: relative; z-index: 15; width: 100%; max-width: 460px; margin-top: 2.25rem; margin-left: 44px; text-align: left; transform: translateY(var(--hero-text-shift, 0px)); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .hero-text h1 { font-family: var(--font-heading); font-size: clamp(1.85rem, 3.6vw, 2.85rem); font-weight: 700; line-height: 1.18; margin-bottom: 0.9rem; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--grey-1) 0%, var(--copper-light) 50%, var(--grey-1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] .hero-text h1 { background: linear-gradient(90deg, var(--grey-1) 0%, #b87340 50%, var(--grey-1) 100%); -webkit-background-clip: text; background-clip: text; } .subtitle { font-size: clamp(0.95rem, 1.8vw, 1.1rem); color: var(--text-dim); margin-bottom: 1.5rem; max-width: 44ch; } .cta-button { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--cta-text); background: linear-gradient(135deg, var(--copper-light) 0%, var(--copper-dark) 100%); padding: 0.85rem 2rem; border-radius: 50px; text-decoration: none; border: none; cursor: pointer; letter-spacing: 0.02em; box-shadow: 0 6px 22px rgba(176, 125, 74, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.2s, box-shadow 0.2s; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212, 163, 115, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .cta-button:active { transform: translateY(0); } .cta-button--large { font-size: 1.1rem; padding: 1rem 2.5rem; } /* ==================== HERO RIGHT (wordmark + nav + machine) ==================== Right column of the hero. The brand wordmark sits at the very top, the nav bar directly beneath it, and the machine is pinned to the bottom of the column via margin-top:auto so the pipe still draws an L from funnel to machine. */ .hero-right { position: relative; z-index: 15; flex: 1 1 auto; width: 100%; max-width: 660px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 1.5rem; min-height: 480px; padding-top: clamp(2rem, 4vh, 3rem); } /* Top-right horizontal nav — terminal copper-on-dark */ .hero-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.70rem 2.48rem; padding: 1.06rem 1.95rem 1.24rem; border: 1px solid var(--rule); border-image: var(--copper-sheen) 1; background: var(--bg-nav, rgba(18, 18, 24, 0.55)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-mono); font-size: 1.38rem; letter-spacing: 0.04em; text-transform: lowercase; } :root[data-theme="light"] { --bg-nav: rgba(255, 252, 246, 0.72); } .hero-nav a { position: relative; color: var(--ink-soft); text-decoration: none; padding: 0.27rem 0.18rem; transition: color 0.18s ease; } .hero-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--copper-sheen); transform: scaleX(0); transform-origin: left center; transition: transform 0.22s ease; } .hero-nav a:hover, .hero-nav a:focus-visible { color: var(--copper-text); outline: none; } .hero-nav a:hover::after, .hero-nav a:focus-visible::after { transform: scaleX(1); } /* ==================== THEME TOGGLE ==================== A fixed top-right pill that mirrors the hero-nav's terminal aesthetic: copper-sheen border, mono lowercase. Inside is a sun/moon SVG that crossfades + rotates between themes. Stays reachable on scroll, honors reduced motion, keyboard-friendly. State is mirrored to aria-pressed/aria-label by JS so screen readers announce the active theme. */ .theme-toggle { position: fixed; top: 18px; right: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem 0.55rem; border: 1px solid var(--rule); border-image: var(--copper-sheen) 1; background: var(--bg-nav, rgba(18, 18, 24, 0.55)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: lowercase; color: var(--ink-soft); cursor: pointer; user-select: none; border-radius: 0; /* terminal = square corners */ transition: color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--copper-text); outline: none; transform: translateY(-1px); box-shadow: var(--shadow-copper); } .theme-toggle:active { transform: translateY(0); } /* Sun/moon icon — two SVG paths in one 24×24 viewBox. Both are always rendered; we crossfade + rotate the group so the sun rays fold away as the moon disc takes over. */ .theme-toggle__icon { width: 18px; height: 18px; flex-shrink: 0; overflow: visible; } .theme-toggle__sun, .theme-toggle__moon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.36s ease, transform 0.46s cubic-bezier(0.5, 0, 0.2, 1); transform-origin: 12px 12px; transform-box: fill-box; } .theme-toggle__sun { /* sun body + 8 rays drawn as a single path */ opacity: 1; transform: rotate(0) scale(1); } .theme-toggle__moon { /* crescent: a circle with a bite taken out */ opacity: 0; transform: rotate(-90deg) scale(0.6); } :root[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.6); } :root[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); } @media (prefers-reduced-motion: reduce) { .theme-toggle__sun, .theme-toggle__moon { transition-duration: 0.01ms; } .theme-toggle { transition-duration: 0.01ms; } } /* On the narrowest screens the label hides but the icon stays, so the toggle remains a clear affordance. */ @media (max-width: 520px) { .theme-toggle { top: 12px; right: 12px; padding: 0.45rem 0.7rem 0.5rem; font-size: 0.76rem; } .theme-toggle__label { display: none; } .theme-toggle__icon { width: 16px; height: 16px; } } /* ==================== BRAND WORDMARK ==================== Large "dripfed" wordmark rendered in Moonshine (a decorative connected-script display face). Sits directly under .hero-nav in the right column. Each letter is wrapped in a (see index.html) and tinted with its own pastel via the :nth-child rules below — the palette is borrowed from the blob character's skin tones (BLOB_COLORS in js/canvas.js). A subtle copper drop-shadow glow on the parent ties the wordmark to the page accent. letter-spacing is pulled in slightly so Moonshine's loop/tail strokes sit closer; the per-letter s still prevent the script from fully joining, which is the intended trade-off for keeping the rainbow palette. */ .brand-logo { font-family: var(--font-brand); font-weight: 400; font-size: clamp(5.25rem, 12vw, 9.75rem); line-height: 1.1; letter-spacing: -0.01em; text-transform: lowercase; text-align: right; align-self: flex-end; margin: 0; padding: 0; user-select: none; white-space: nowrap; color: var(--copper-text); filter: drop-shadow(0 0 18px rgba(212, 163, 115, 0.25)); } /* Per-letter pastel palette — borrowed from the blob character's skin tones (see BLOB_COLORS in js/canvas.js). Moonshine is a solid filled face, so `color` tints the glyph bodies directly and each letter reads as a solid coloured shape. The copper drop-shadow glow on the parent .brand-logo applies uniformly across all letters. In light mode the pastels deepen slightly so they keep their contrast on paper. */ .brand-logo span:nth-child(1) { color: var(--brand-d, #f4b0c4); } /* d — pink */ .brand-logo span:nth-child(2) { color: var(--brand-r, #a8d8a0); } /* r — green */ .brand-logo span:nth-child(3) { color: var(--brand-i, #80d0d0); } /* i — teal */ .brand-logo span:nth-child(4) { color: var(--brand-p, #a0c4e8); } /* p — blue */ .brand-logo span:nth-child(5) { color: var(--brand-f, #c4a8e0); } /* f — purple */ .brand-logo span:nth-child(6) { color: var(--brand-e, #f0e0a0); } /* e — yellow */ .brand-logo span:nth-child(7) { color: var(--copper); } /* d — copper */ :root[data-theme="light"] { --brand-d: #d97ba0; --brand-r: #6fb070; --brand-i: #4aa8a8; --brand-p: #6a98c8; --brand-f: #a080c4; --brand-e: #d0b060; } /* Processing machine (lower-right of hero) */ .machine-wrapper { position: relative; width: min(660px, 100%); margin-top: auto; filter: drop-shadow(0 20px 44px var(--hero-drop-shadow, rgba(0, 0, 0, 0.55))); } :root[data-theme="light"] { --hero-drop-shadow: rgba(60, 50, 30, 0.22); } .machine-svg { width: 100%; height: auto; display: block; overflow: visible; } /* ==================== AGENT SCREEN (machine viewport) ==================== Retinted to copper-on-dark to match the new theme. */ .agent-screen { width: 488px; height: 220px; overflow: hidden; position: relative; background: var(--machine-viewport); font-family: 'JetBrains Mono', monospace; color: var(--copper-light); font-size: 19px; line-height: 1.35; border-radius: 4px; box-sizing: border-box; padding: 5px 5px 4px; text-align: left; } .screen-split { display: flex; gap: 3px; height: 100%; } .screen-session { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; } .screen-todo { flex: 0 0 187px; min-width: 0; overflow: hidden; border-left: 1.5px solid rgba(212, 163, 115, 0.18); padding-left: 4px; display: flex; flex-direction: column; } .screen-header { font-size: 23px; font-weight: 700; color: var(--copper); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; border-bottom: 1px solid rgba(212, 163, 115, 0.22); padding-bottom: 2px; white-space: nowrap; overflow: hidden; } .session-lines { display: flex; flex-direction: column; gap: 0.5px; } .session-lines .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 19px; } .line-cmd .f-name { color: var(--screen-text-bright); } .line-tool .f-tool { color: var(--copper-light); } .line-ctx .f-ctx { color: var(--screen-text-mid); } .line-cursor { color: var(--copper-light); animation: cursor-blink 1s steps(1) infinite; } @keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .todo-list { display: flex; flex-direction: column; gap: 1.5px; } .todo-item { display: flex; gap: 3px; white-space: nowrap; overflow: hidden; font-size: 17px; line-height: 1.3; opacity: 0.60; align-items: baseline; } .todo-item[data-state="done"] { opacity: 0.80; text-decoration: line-through; } .todo-item[data-state="done"] .todo-box { color: var(--copper-light); } .todo-item[data-state="active"] { opacity: 1; color: var(--screen-text-bright); } .todo-item[data-state="active"] .todo-box { color: var(--screen-text-bright); animation: pulse-active 0.9s ease-in-out infinite alternate; } @keyframes pulse-active { from { opacity: 0.5; } to { opacity: 1; } } .todo-item[data-state="pending"] .todo-box { color: var(--screen-text-dim); } .todo-item[data-state="pending"] { color: var(--screen-text-mid); } .todo-box { flex-shrink: 0; width: 13px; text-align: center; } .todo-text { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; } /* Diff panel (full overlay) */ .screen-diff { position: absolute; inset: 0; background: var(--machine-viewport-overlay); padding: 5px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; border-radius: 4px; display: flex; flex-direction: column; } .screen-diff.is-visible { opacity: 1; transform: translateY(0); } .diff-header { font-size: 19px; font-weight: 700; color: var(--copper); margin-bottom: 3px; border-bottom: 1px solid rgba(212, 163, 115, 0.22); padding-bottom: 2px; white-space: nowrap; overflow: hidden; } .diff-cols-header { display: grid; grid-template-columns: 1fr 1fr; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey-5); padding-bottom: 2px; margin-bottom: 2px; border-bottom: 1px solid rgba(74, 77, 87, 0.4); } .diff-cols-header span:first-child { padding-left: 2px; } .diff-cols-header span:last-child { padding-left: 2px; border-left: 1px solid rgba(74, 77, 87, 0.4); } .diff-body { display: flex; flex-direction: column; gap: 1px; } .diff-row { display: grid; grid-template-columns: 1fr 1fr; } .diff-cell { white-space: nowrap; font-size: 17px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; padding: 1px 3px; } .diff-cell.diff-add { color: var(--copper-light); background: var(--diff-add-bg); border-left: 1px solid rgba(212, 163, 115, 0.35); } .diff-cell.diff-del { color: var(--reject-red); background: var(--reject-red-bg); } .diff-cell.diff-empty { background: var(--diff-empty-bg); border-left: 1px solid rgba(74, 77, 87, 0.3); } /* Result panel (flash overlay) */ .screen-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--machine-viewport-result); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; border-radius: 4px; font-size: 35px; font-weight: 700; text-align: center; font-family: var(--font-heading); } .screen-result.is-visible { opacity: 1; } .screen-result.result-accept { color: var(--copper-light); } .screen-result.result-changes { color: var(--screen-text-bright); } .screen-result.result-reject { color: var(--reject-red); } /* CRT scanlines */ .screen-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.10) 2px, rgba(0, 0, 0, 0.10) 4px ); border-radius: 4px; } /* ============================================================ CONTENT SECTIONS — dark terminal report Square corners · heavy ruled borders · flat stepped shades All monospace · ░▒▓█ copper glyphs · copper single accent ============================================================ */ main { max-width: 1280px; margin: 0 auto; padding: 0 32px 4rem; display: flex; flex-direction: column; gap: 28px; font-family: var(--font-mono); color: var(--ink); font-size: 20px; line-height: 1.7; } main section[id] { scroll-margin-top: 24px; } /* ---------- summary metrics (KPI band) ---------- Heavy outer frame, divided cells, stepped shade fills. */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--rule-hard); border-image: var(--copper-sheen) 1; background: var(--shade-0); } .metric { padding: 22px 24px; border-right: 2px solid var(--line); background: var(--shade-0); } .metric:nth-child(2) { background: var(--shade-1); } .metric:nth-child(3) { background: var(--shade-2); } .metric:nth-child(4) { background: var(--shade-3); } .metric:last-child { border-right: 0; } .metric__label { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; } .metric__label::before { content: "█ "; color: var(--copper-text); } .metric__value { margin-top: 12px; font-family: var(--font-mono); font-size: 40px; font-weight: 700; letter-spacing: -0.01em; color: var(--copper-text); } .metric__value .unit { font-size: 19px; font-weight: 400; color: var(--ink-soft); margin-left: 4px; } .metric__sub { margin-top: 8px; font-family: var(--font-mono); font-size: 16px; color: var(--ink-soft); } /* ---------- panels (header bar + body) ---------- */ .panel { border: 2px solid var(--rule); border-image: var(--copper-sheen) 1; background: var(--shade-0); padding: 0 0 20px; } .panel h2 { margin: 0; padding: 12px 18px; font-size: 25px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: var(--shade-3); border-bottom: 2px solid var(--rule); } .panel h2::before { content: "▓▒░ "; color: var(--copper-text); } .panel__note { margin: 14px 18px 16px; font-size: 20px; color: var(--ink-soft); } /* ---------- how it drips (3 divided cells inside panel) ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 18px 18px; border: 2px solid var(--line); background: var(--shade-0); } .step { padding: 18px 20px; border-right: 2px solid var(--line); background: var(--shade-0); } .step:nth-child(2) { background: var(--shade-1); } .step:nth-child(3) { background: var(--shade-2); } .step:last-child { border-right: 0; } .step__num { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); font-weight: 700; margin-bottom: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--copper); } .step__num::before { content: "█ "; color: var(--copper-text); } .step p { font-size: 17px; color: var(--ink-soft); line-height: 1.6; } /* ---------- feed categories (ruled block grid) ---------- The core "many categories" block — table-like cells. */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 18px 18px; border: 2px solid var(--line); background: var(--shade-0); } .cat { padding: 18px 20px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--shade-0); transition: background 0.15s ease; } .cat:nth-child(even) { background: var(--shade-1); } .cat:hover { background: var(--shade-3); } .cat:nth-child(3n) { border-right: 0; } .cat:nth-last-child(-n+3) { border-bottom: 0; } .cat__icon { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); font-weight: 700; margin-bottom: 10px; } .cat__icon::before { content: "█ "; color: var(--copper-text); } .cat p { font-size: 17px; color: var(--ink-soft); line-height: 1.5; } .cat__count { margin-top: 12px; font-size: 15px; color: var(--copper-text); letter-spacing: 0.08em; } /* ---------- integrations (.meta-style divided row) ---------- */ .integrations { display: flex; flex-wrap: wrap; gap: 0; margin: 0 18px 18px; border: 2px solid var(--rule); background: var(--shade-0); } .integration { display: flex; flex-direction: column; flex: 1 1 200px; padding: 14px 18px; border-right: 2px solid var(--line-soft); } .integration:last-child { border-right: 0; } .integration__mark { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); font-weight: 700; } .integration__mark::before { content: "▓ "; color: var(--copper-text); } .integration__sub { margin-top: 2px; font-size: 16px; color: var(--ink-soft); } /* ---------- pricing (metrics-style frame, featured = copper) ---------- */ .tiers { margin: 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tier { padding: 22px 24px 24px; border: 2px solid var(--line); background: var(--shade-0); display: flex; flex-direction: column; } .tier:nth-child(2) { background: var(--shade-1); } .tier:nth-child(3) { background: var(--shade-2); } /* featured: copper outline (no layout shift) + inset copper left bar */ .tier--featured { background: var(--shade-3); outline: 2px solid var(--copper); outline-offset: -2px; box-shadow: inset 6px 0 0 var(--copper); } .tier__tag { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; } .tier__tag::before { content: "▓ "; color: var(--line); } .tier--featured .tier__tag::before { color: var(--copper-text); } .tier__name { margin-top: 4px; font-size: 27px; font-weight: 700; color: var(--ink); } .tier__price { margin-top: 14px; font-family: var(--font-mono); font-size: 40px; font-weight: 700; letter-spacing: -0.01em; color: var(--copper-text); } .tier__price .unit { font-size: 17px; font-weight: 400; color: var(--ink-soft); margin-left: 4px; } .tier__features { list-style: none; margin: 18px 0 20px; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; } .tier__features li { font-size: 17px; color: var(--ink-soft); padding-left: 18px; position: relative; } .tier__features li::before { content: "█"; position: absolute; left: 0; top: 0; color: var(--copper-text); font-size: 13px; } /* square bordered buttons — no pills */ .tier__cta { display: block; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 16px; text-decoration: none; border: 2px solid var(--rule-hard); color: var(--ink); background: var(--shade-2); transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .tier__cta:hover { border-color: var(--copper); color: var(--copper-text); background: var(--shade-3); } .tier--featured .tier__cta { color: var(--cta-text); background: var(--copper); border-color: var(--copper); } .tier--featured .tier__cta:hover { background: var(--copper-light); border-color: var(--copper-light); } /* ---------- recent drips (data table) ---------- */ .table-wrap { overflow-x: auto; margin: 0 18px; } .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 17px; border: 2px solid var(--rule); } .data-table thead { background: var(--shade-4); } .data-table th, .data-table td { text-align: right; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .data-table th:first-child, .data-table td:first-child { text-align: left; } .data-table th { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; border-bottom: 2px solid var(--rule); } .data-table tbody tr:nth-child(even) { background: var(--shade-1); } .data-table tbody tr:hover { background: var(--shade-3); } .data-table tbody tr:hover td:first-child { color: var(--copper-text); } .data-table .col-add { color: var(--copper-text); } .data-table .col-del { color: var(--reject-red); } /* ---------- footer ---------- */ footer { padding: 16px 18px; border: 2px solid var(--rule); border-image: var(--copper-sheen) 1; background: var(--shade-1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--ink-soft); font-size: 16px; font-family: var(--font-mono); } footer a { color: var(--copper); text-decoration: none; } footer a:hover { color: var(--copper-text); } /* ---------- selection ---------- */ ::selection { background: var(--copper); color: var(--selection-fg); } /* ============================================================ SVG THEME BINDING Every stop and standalone fill/stroke in the inline SVGs (pipe overlay, funnel, machine, candy) is bound to a themed token here, so flipping [data-theme] re-tints the whole illustration without touching the markup. Stops are targeted by gradient id + nth-child; candy fills by element id. Opacities stay on the elements in the markup. ============================================================ */ /* Pipe overlay — copper sheen (horizontal + vertical variants) */ #p-copper-h stop:nth-child(1), #p-copper-v stop:nth-child(1) { stop-color: var(--copper-dark); } #p-copper-h stop:nth-child(2), #p-copper-v stop:nth-child(2) { stop-color: var(--copper); } #p-copper-h stop:nth-child(3), #p-copper-v stop:nth-child(3) { stop-color: var(--copper-light); } #p-copper-h stop:nth-child(4), #p-copper-v stop:nth-child(4) { stop-color: var(--copper); } #p-copper-h stop:nth-child(5), #p-copper-v stop:nth-child(5) { stop-color: var(--copper-dark); } /* Pipe overlay — dark copper collar */ #p-copper-dark-h stop:nth-child(1), #p-copper-dark-v stop:nth-child(1) { stop-color: var(--copper-deep); } #p-copper-dark-h stop:nth-child(2), #p-copper-dark-v stop:nth-child(2) { stop-color: var(--copper-shadow); } #p-copper-dark-h stop:nth-child(3), #p-copper-dark-v stop:nth-child(3) { stop-color: var(--copper-deep); } /* Pipe-elbow joint interior — the elbow is a instanced via . Its standalone fills (#6D4C41 center, #E6C89A sheen + bolt highlights) are copper-family accent colors that read correctly on both themes, so we let them stand. The collar + face-plate already re-tint via the #p-copper-dark-* / #p-copper-* gradients bound above. */ /* Pipe-segment highlight rects + drip */ #pipe-seg1-hi, #pipe-seg2-hi, #pipe-seg3-hi { fill: var(--copper-light); } #pipe-drip { fill: var(--copper-light); } /* Funnel — copper rim + dark rim + glass + liquid */ #copper-grad stop:nth-child(1) { stop-color: var(--copper-dark); } #copper-grad stop:nth-child(2) { stop-color: var(--copper); } #copper-grad stop:nth-child(3) { stop-color: var(--copper-light); } #copper-grad stop:nth-child(4) { stop-color: var(--copper); } #copper-grad stop:nth-child(5) { stop-color: var(--copper-dark); } #copper-dark stop:nth-child(1) { stop-color: var(--copper-deep); } #copper-dark stop:nth-child(2) { stop-color: var(--copper-shadow); } #copper-dark stop:nth-child(3) { stop-color: var(--copper-deep); } #glass-grad stop:nth-child(1) { stop-color: var(--grey-1); stop-opacity: 0.14; } #glass-grad stop:nth-child(2) { stop-color: var(--grey-2); stop-opacity: 0.10; } #glass-grad stop:nth-child(3) { stop-color: var(--grey-3); stop-opacity: 0.16; } #liquid-grad stop:nth-child(1) { stop-color: var(--copper); stop-opacity: 0.8; } #liquid-grad stop:nth-child(2) { stop-color: var(--copper-dark); stop-opacity: 0.9; } /* Funnel body stroke + inner rim highlight. The liquid body/surface fills are intentionally NOT pinned here — canvas.js drives them via the presentation `fill` attribute as the pool cycles through the "dripfed" logo palette (see updateFunnelSVG / cycleLogoColor in js/canvas.js). The SVG markup's literal fill="#D4A373" on those two elements remains as the no-JS fallback default. A CSS rule here would override the presentation attribute (per the SVG spec's cascade) and freeze the pool on a single colour. */ .funnel-svg path[fill="url(#glass-grad)"] { stroke: var(--grey-3); } .funnel-svg ellipse[rx="150"][ry="20"] { stroke: var(--copper-light); } /* Machine — copper trim + dark copper + housing + liquid */ #m-copper-grad stop:nth-child(1) { stop-color: var(--copper-dark); } #m-copper-grad stop:nth-child(2) { stop-color: var(--copper); } #m-copper-grad stop:nth-child(3) { stop-color: var(--copper-light); } #m-copper-grad stop:nth-child(4) { stop-color: var(--copper); } #m-copper-grad stop:nth-child(5) { stop-color: var(--copper-dark); } #m-copper-dark stop:nth-child(1) { stop-color: var(--copper-deep); } #m-copper-dark stop:nth-child(2) { stop-color: var(--copper-shadow); } #m-copper-dark stop:nth-child(3) { stop-color: var(--copper-deep); } #cream-grad stop:nth-child(1) { stop-color: var(--machine-housing-top); } #cream-grad stop:nth-child(2) { stop-color: var(--machine-housing-mid); } #cream-grad stop:nth-child(3) { stop-color: var(--machine-housing-bot); } #cream-grad-light stop:nth-child(1) { stop-color: var(--machine-housing-light-top); } #cream-grad-light stop:nth-child(2) { stop-color: var(--machine-housing-light-mid); } #cream-grad-light stop:nth-child(3) { stop-color: var(--machine-housing-light-bot); } #m-liquid-grad stop:nth-child(1) { stop-color: var(--copper); stop-opacity: 0.8; } #m-liquid-grad stop:nth-child(2) { stop-color: var(--copper-dark); stop-opacity: 0.9; } /* Machine — standalone fills/strokes (viewport, intake trim, lever pivots, lever-knob strokes, foot rivets, output chute candies, lever-label etch, housing stroke, viewport glare). Targeted by element + fill/stroke literal so we don't disturb geometry. */ .machine-svg rect[fill="#121218"] { fill: var(--machine-viewport); } .machine-svg rect[fill="#E6C89A"][opacity="0.5"] { fill: var(--copper-light); } .machine-svg rect[fill="url(#cream-grad)"] { stroke: var(--machine-housing-stroke); } .machine-svg circle[fill="#6D4C41"] { fill: var(--copper-shadow); } .machine-svg circle[fill="#E6C89A"][opacity="0.6"] { fill: var(--copper-light); } .machine-svg circle[fill="#E6C89A"][opacity="0.7"] { fill: var(--copper-light); } .machine-svg g.lever-labels { fill: var(--copper-deep); } .machine-svg rect[fill="#d4a373"][opacity="0.9"] { fill: var(--copper); } .machine-svg rect[fill="#e6c89a"][opacity="0.9"] { fill: var(--copper-light); } /* Viewport glare — stays a subtle white sheen in both themes (the viewport itself stays dark, so white reads on either bg). */ /* Lever knob copper-rim strokes */ .machine-svg g[id^="lever-"] circle[fill="url(#m-copper-grad)"] { stroke: var(--copper-deep); } /* Candy — ice cream cone */ #candy-icecream path[fill="#D4A373"] { fill: var(--copper); stroke: var(--copper-deep); } #candy-icecream line[stroke="#8B5E34"] { stroke: var(--copper-deep); } #candy-icecream circle[fill="#f0e6d8"] { fill: var(--candy-cream, #f0e6d8); stroke: var(--candy-cream-stroke, #c4b89a); } #candy-icecream circle[fill="#c98a8a"] { fill: var(--reject-red); stroke: var(--candy-cherry-stroke, #9a6a6a); } #candy-icecream path[stroke="#6d8a4a"] { stroke: var(--candy-stem, #6d8a4a); } /* Candy — lollipop */ #candy-lollipop rect[fill="#e7e7ee"] { fill: var(--candy-stick, #e7e7ee); stroke: var(--candy-stick-stroke, #b4b4c0); } #candy-lollipop circle[fill="#e7e7ee"] { fill: var(--candy-stick, #e7e7ee); stroke: var(--candy-stick-stroke, #b4b4c0); } #candy-lollipop path[stroke="#c98a8a"] { stroke: var(--reject-red); } #candy-lollipop path[stroke="#D4A373"] { stroke: var(--copper); } #candy-lollipop path[stroke="#e6c89a"] { stroke: var(--copper-light); } #candy-lollipop path[stroke="#6d8a4a"] { stroke: var(--candy-stem, #6d8a4a); } #candy-lollipop path[stroke="#9aa0b4"] { stroke: var(--grey-3); } #candy-lollipop path[stroke="#f0e6d8"] { stroke: var(--candy-cream, #f0e6d8); } #candy-lollipop ellipse[fill="#ffffff"] { fill: var(--candy-gloss, #ffffff); } /* Candy — cupcake */ #candy-cupcake path[fill="#D4A373"] { fill: var(--copper); stroke: var(--copper-deep); } #candy-cupcake line[stroke="#8B5E34"] { stroke: var(--copper-deep); } #candy-cupcake circle[fill="#f0e6d8"] { fill: var(--candy-cream, #f0e6d8); stroke: var(--candy-cream-stroke, #c4b89a); } #candy-cupcake circle[fill="#c98a8a"] { fill: var(--reject-red); stroke: var(--candy-cherry-stroke, #9a6a6a); } #candy-cupcake path[stroke="#6d8a4a"] { stroke: var(--candy-stem, #6d8a4a); } /* Light-mode candy tokens — the cream/cherry/stem are decorative food colors that read fine on either bg, but on paper the white lollipop stick + gloss would vanish. Nudge them to warm cream. */ :root[data-theme="light"] { --candy-stick: #f0ece2; --candy-stick-stroke: #c4bdae; --candy-gloss: #fff8e8; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 1024px) { .funnel-wrapper { width: min(256px, 32vw); } .machine-wrapper { width: min(604px, 100%); } .hero-nav { font-size: 1.27rem; gap: 0.53rem 1.77rem; padding: 0.88rem 1.60rem 1.06rem; } } @media (max-width: 880px) { .hero { flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.25rem; } .hero-visual, .hero-right { flex: 1 1 auto; width: 100%; max-width: 660px; min-height: auto; } .hero-visual { align-items: center; } .funnel-wrapper { margin-left: 0; margin-top: clamp(7rem, 10.25vh, 9rem); } /* Stacked layout: drop the cross-column alignment (JS also clears --hero-text-shift below this width, but pinning it here keeps the natural flow even if JS never runs). */ .hero-text { text-align: center; margin-left: 0; --hero-text-shift: 0px; } .subtitle { margin-left: auto; margin-right: auto; } .hero-right { align-items: center; gap: 1.25rem; } .hero-nav { justify-content: center; } .brand-logo { align-self: center; text-align: center; } .machine-wrapper { margin-top: 2rem; margin-left: auto; margin-right: auto; } main { padding: 0 20px 3rem; gap: 22px; } } @media (max-width: 768px) { .hero { padding: 1.5rem 1rem 2rem; min-height: auto; gap: 1rem; } .hero-visual { min-height: auto; } .funnel-wrapper { width: min(216px, 49.6vw); margin-top: clamp(6rem, 8.25vh, 7.5rem); } .machine-wrapper { width: min(517px, 100%); margin-top: 2rem; } .hero-text { margin-top: 1.75rem; } .brand-logo { font-size: clamp(3.75rem, 15vw, 5.625rem); } .cloud { width: clamp(100px, 28vw, 160px); } .cloud--small { width: clamp(70px, 18vw, 110px); } /* metrics → 2 cols */ .metrics { grid-template-columns: repeat(2, 1fr); } .metric { background: var(--shade-0); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); } .metric:nth-child(2) { background: var(--shade-1); } .metric:nth-child(3) { background: var(--shade-0); } .metric:nth-child(4) { background: var(--shade-1); } .metric:nth-child(2n) { border-right: 0; } .metric:nth-last-child(-n+2) { border-bottom: 0; } /* steps → 1 col */ .steps { grid-template-columns: 1fr; } .step { border-right: 0; border-bottom: 2px solid var(--line); background: var(--shade-0); } .step:nth-child(2) { background: var(--shade-1); } .step:nth-child(3) { background: var(--shade-0); } .step:last-child { border-bottom: 0; } /* cat-grid → 2 cols */ .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat:nth-child(3n) { border-right: 1px solid var(--line-soft); } .cat:nth-child(2n) { border-right: 0; } .cat:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); } .cat:nth-last-child(-n+2) { border-bottom: 0; } /* integrations stack */ .integration { flex: 1 1 100%; border-right: 0; border-bottom: 2px solid var(--line-soft); } .integration:last-child { border-bottom: 0; } /* tiers → 1 col */ .tiers { grid-template-columns: 1fr; } .tier { border: 2px solid var(--line); background: var(--shade-0); } .tier:nth-child(2) { background: var(--shade-1); } .tier:nth-child(3) { background: var(--shade-0); } .tier--featured { outline-offset: -2px; } } @media (max-width: 520px) { /* metrics → 1 col */ .metrics { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 2px solid var(--line); background: var(--shade-0); } .metric:nth-child(even) { background: var(--shade-1); } .metric:last-child { border-bottom: 0; } /* nav wraps onto two tidy rows on the narrowest screens */ .hero-nav { font-size: 1.24rem; gap: 0.45rem 1.42rem; padding: 0.80rem 1.33rem 0.88rem; } /* wordmark shrinks to fit the narrowest screens */ .brand-logo { font-size: clamp(3.125rem, 17.5vw, 4.375rem); } /* cat-grid → 1 col */ .cat-grid { grid-template-columns: 1fr; } .cat { border-right: 0; background: var(--shade-0); } .cat:nth-child(even) { background: var(--shade-1); } .cat:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); } .cat:last-child { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .line-cursor { animation: none; } .todo-item[data-state="active"] .todo-box { animation: none; } .screen-diff { transition: none; } .screen-result { transition: none; } animate.machine-anim, animateTransform.machine-anim, animateMotion.machine-anim { display: none !important; } }