/* ============================================================ Clyde landing page Dark + purple to match the app's brand. ============================================================ */ :root { --bg: #0a0a10; --bg-alt: #0f0f17; --bg-card: #14141d; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #f0f0f5; --text-dim: #8a8a99; --text-faint: #5a5a6a; --purple: #bf5af2; --purple-bright: #d99cff; --purple-deep: #7b2eb8; --green: #34c759; --green-bright: #5ee884; --blue: #4a90e2; --blue-bright: #7ab8ff; --radius: 12px; --radius-lg: 18px; --shadow-glow: 0 0 60px rgba(191, 90, 242, 0.18); --max-width: 1100px; } * { box-sizing: border-box; } html { /* Smooth scroll for in-page anchor links. Only set on the root * element — applying it to `body` as well triggers Safari quirks * where the smooth animation gets dropped on some anchor jumps. */ scroll-behavior: smooth; /* Offset anchor scroll targets by the sticky nav height so a * clicked section lands BELOW the nav instead of being hidden * underneath it. Without this, the smooth scroll works but the * section header ends up clipped under the sticky bar and the * user perceives it as a broken jump. */ scroll-padding-top: 80px; /* The base page background lives on `html`, not `body`, so the * ambient light layer below can paint on top of it and still sit * BEHIND everything in . If the colour were on body * instead, body's own paint would cover the ambient ::before. */ background: var(--bg); } /* Page-level ambient light. * * Lives on `html::before` (not `body::before`) so it sits behind * every descendant of without any z-index gymnastics. Fixed * position pins it to the viewport, so it stays visible as the * user scrolls, giving the whole page a cohesive "mood lighting" * feel that shows through every section with a transparent * background (hero, showcase, how, support). * * Sections that use a solid `bg-alt` slab (features, install) * intentionally cover this layer so they keep their distinct * visual blocks, but their top/bottom edges fade into the ambient * via a gradient mask so the transitions aren't hard cuts. */ html::before { content: ""; position: fixed; inset: 0; /* Ambient gradients use `farthest-corner` sizing (the default for * radial-gradient when no explicit shape/size is given) and scale * automatically to the viewport, so they can't clip at the edges * regardless of window size or aspect ratio. * * Two layers stacked: * 1. Dominant purple halo from top-centre, which gives the page * its core mood-lighting feel and spotlights the hero mascot. * 2. Three secondary accents (purple counter-glow top-right, * blue on the left mid, green bottom-right) that paint a * low-contrast aurora across the rest of the page so the * background reads as "alive" rather than flat. * * Opacities intentionally sit at the edge of perception — strong * enough to give the page character, subtle enough not to compete * with content. Earlier revisions undershot this and the page * looked flat; revisions before that overshot and produced visible * seams at the viewport edges. */ background: radial-gradient(at 50% 0%, rgba(191, 90, 242, 0.28) 0%, transparent 55%), radial-gradient(at 85% 15%, rgba(156, 63, 224, 0.14) 0%, transparent 50%), radial-gradient(at 20% 55%, rgba(74, 144, 226, 0.14) 0%, transparent 50%), radial-gradient(at 75% 75%, rgba(52, 199, 89, 0.10) 0%, transparent 50%); pointer-events: none; z-index: 0; } html, body { margin: 0; padding: 0; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body { /* Transparent so `html::before`'s ambient layer can show through. */ background: transparent; position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } a:hover { color: var(--purple-bright); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px); background: rgba(10, 10, 16, 0.72); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; } .brand-mark { display: inline-block; width: 22px; height: 22px; background-image: url('img/clyde.svg'); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; } .nav nav { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--text-dim); } .nav nav a.ghost { border: 1px solid var(--border-strong); padding: 6px 14px; border-radius: 8px; color: var(--text); transition: all 0.18s; } .nav nav a.ghost:hover { border-color: var(--purple); background: rgba(191, 90, 242, 0.08); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: 100px 24px 120px; text-align: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; /* Focused mascot spotlight. Two stacked layers: * 1. A tight, bright halo (500 × 400) right over the mascot. * 2. A wider, softer falloff (1000 × 700) to blend into the * surrounding ambient layer. * Both centred at 50% 0% (hero top, midline) so the gradient * radiates down around the pixel-art character without any * visible cutoff. Hero's own `overflow: hidden` clips the * bottom of the falloff, which is fine because the page-level * `html::before` ambient takes over from there. */ background: radial-gradient(ellipse 500px 400px at 50% 0%, rgba(217, 156, 255, 0.22) 0%, transparent 60%), radial-gradient(ellipse 1000px 700px at 50% 0%, rgba(191, 90, 242, 0.18) 0%, transparent 65%); pointer-events: none; } .hero-content { position: relative; max-width: 720px; margin: 0 auto; } .hero-mascot { display: flex; justify-content: center; margin-bottom: 32px; } .sprite-wrapper { position: relative; width: 144px; height: 144px; display: flex; align-items: center; justify-content: center; } .sprite-glow { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(191, 90, 242, 0.4) 0%, transparent 70%); filter: blur(20px); animation: glow-pulse 3s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .sprite-clyde { position: relative; width: 128px; height: 128px; background-image: url('img/clyde.svg'); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; animation: sprite-bob 4s ease-in-out infinite; } @keyframes sprite-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } h1 { font-size: 64px; font-weight: 800; margin: 0 0 20px; letter-spacing: -0.02em; line-height: 1.05; } .gradient-text { background: linear-gradient(135deg, var(--purple-bright) 0%, var(--purple) 50%, var(--blue-bright) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tagline { font-size: 22px; color: var(--text); margin: 0 0 14px; font-weight: 500; } .subtagline { font-size: 16px; color: var(--text-dim); margin: 0 0 40px; max-width: 540px; margin-left: auto; margin-right: auto; } .cta-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; } .cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 12px; background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(191, 90, 242, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 0.18s, box-shadow 0.18s; } .cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(191, 90, 242, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); color: #fff; } .cta-icon { font-size: 18px; font-weight: 700; } .cta-secondary { display: inline-flex; align-items: center; /* Matches `.cta-primary` so icon + text buttons (e.g. "☕ Buy * me a coffee" in the Support section) stay visually aligned * with their primary counterparts. Text-only secondary buttons * (e.g. "See how it works" in the hero) are unaffected — gap * only applies between flex items. */ gap: 10px; padding: 14px 24px; border-radius: 12px; border: 1px solid var(--border-strong); color: var(--text); font-weight: 500; font-size: 15px; transition: all 0.18s; } .cta-secondary:hover { border-color: var(--purple); background: rgba(191, 90, 242, 0.08); color: var(--text); } .cta-meta { font-size: 13px; color: var(--text-faint); margin: 12px 0 0; } /* ============================================================ SHOWCASE — interactive screenshot tabs ============================================================ */ .showcase { padding: 120px 0 100px; position: relative; overflow: hidden; } /* Removed: `.showcase::before` used to layer a localised purple * accent at 80% 0% (top-right of the section) on top of the global * ambient. Because the ::before is scoped to the showcase's own box * via `inset: 0` + parent's `overflow: hidden`, it produced a faint * horizontal "onset line" on the right side of the page exactly at * the hero/showcase boundary — where the local purple tint suddenly * started. The global `html::before` ambient layer already provides * the mood lighting the page needs, so there's no reason to keep a * per-section duplicate. */ .showcase .container { position: relative; } .showcase-tabs { margin-top: 56px; } /* Hide the underlying radio inputs — labels do the visual work. */ .showcase-tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .showcase-tablist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; } .showcase-tab { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; user-select: none; } .showcase-tab:hover { background: rgba(191, 90, 242, 0.06); border-color: var(--border-strong); transform: translateY(-2px); } .showcase-tab-num { font-size: 22px; font-weight: 800; color: var(--text-faint); font-variant-numeric: tabular-nums; transition: color 0.2s; } .showcase-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .showcase-tab-text strong { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; } .showcase-tab-text em { font-size: 11px; font-style: normal; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Active tab — driven by the matching :checked radio. */ #tab-expanded:checked ~ .showcase-tablist label[for="tab-expanded"], #tab-widget:checked ~ .showcase-tablist label[for="tab-widget"], #tab-menubar:checked ~ .showcase-tablist label[for="tab-menubar"] { background: linear-gradient(135deg, rgba(191, 90, 242, 0.14) 0%, rgba(74, 144, 226, 0.10) 100%); border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple), 0 12px 32px rgba(191, 90, 242, 0.18); } #tab-expanded:checked ~ .showcase-tablist label[for="tab-expanded"] .showcase-tab-num, #tab-widget:checked ~ .showcase-tablist label[for="tab-widget"] .showcase-tab-num, #tab-menubar:checked ~ .showcase-tablist label[for="tab-menubar"] .showcase-tab-num { color: var(--purple-bright); } /* Keyboard focus ring — radios are visually hidden but still focusable. */ .showcase-tabs > input[type="radio"]:focus-visible + .showcase-tablist label, #tab-expanded:focus-visible ~ .showcase-tablist label[for="tab-expanded"], #tab-widget:focus-visible ~ .showcase-tablist label[for="tab-widget"], #tab-menubar:focus-visible ~ .showcase-tablist label[for="tab-menubar"] { outline: 2px solid var(--purple-bright); outline-offset: 3px; } .showcase-panels { position: relative; } .showcase-panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); animation: showcase-fade 0.45s ease both; } @keyframes showcase-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #tab-expanded:checked ~ .showcase-panels .showcase-panel-expanded, #tab-widget:checked ~ .showcase-panels .showcase-panel-widget, #tab-menubar:checked ~ .showcase-panels .showcase-panel-menubar { display: grid; } .showcase-copy h3 { font-size: 28px; font-weight: 800; margin: 0 0 16px; letter-spacing: -0.01em; line-height: 1.15; color: var(--text); } .showcase-copy p { font-size: 15px; line-height: 1.65; color: var(--text-dim); margin: 0 0 20px; } .showcase-copy p strong { color: var(--text); font-weight: 600; } .showcase-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .showcase-bullets li { position: relative; padding-left: 22px; font-size: 13px; color: var(--text-dim); } .showcase-bullets li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--purple-bright) 0%, var(--blue-bright) 100%); box-shadow: 0 0 12px rgba(191, 90, 242, 0.5); } .showcase-image { position: relative; display: flex; align-items: center; justify-content: center; } .showcase-image::before { content: ""; position: absolute; inset: -20px; background: radial-gradient(ellipse, rgba(191, 90, 242, 0.18) 0%, transparent 70%); filter: blur(40px); pointer-events: none; } .showcase-image img { position: relative; max-width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); } .showcase-image-menubar { padding: 60px 0; } .showcase-image-menubar img { max-width: 80%; } /* ============================================================ FEATURES ============================================================ */ .features { padding: 120px 0; /* Vertical gradient that fades in from transparent at top and * out at bottom so the solid `bg-alt` slab blends into the * surrounding ambient layer. Replaces the earlier hard * `background: var(--bg-alt)` + top/bottom borders, which * produced visible horizontal seams at the section boundaries * once the page-level ambient layer was introduced. */ background: linear-gradient( to bottom, transparent 0%, var(--bg-alt) 100px, var(--bg-alt) calc(100% - 100px), transparent 100% ); } .section-header { text-align: center; margin-bottom: 60px; } .section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--purple-bright); font-weight: 700; margin: 0 0 12px; } .section-header h2 { font-size: 40px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.15; } .section-sub { font-size: 16px; color: var(--text-dim); max-width: 580px; margin: 0 auto; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: all 0.2s; } .feature:hover { border-color: var(--border-strong); transform: translateY(-2px); } .feature-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 18px; font-weight: 700; } .icon-bolt { background: rgba(191, 90, 242, 0.15); color: var(--purple-bright); } .icon-bolt::before { content: '⚡'; } .icon-bell { background: rgba(74, 144, 226, 0.15); color: var(--blue-bright); } .icon-bell::before { content: '🔔'; font-size: 16px; } .icon-stack { background: rgba(52, 199, 89, 0.15); color: var(--green-bright); } .icon-stack::before { content: '☰'; font-size: 22px; } .icon-keys { background: rgba(255, 255, 255, 0.06); color: var(--text); } .icon-keys::before { content: '⌘'; } .icon-shield { background: rgba(191, 90, 242, 0.15); color: var(--purple-bright); } .icon-shield::before { content: '🛡'; font-size: 16px; } .icon-source { background: rgba(74, 144, 226, 0.15); color: var(--blue-bright); } .icon-source::before { content: '<>'; font-size: 14px; } .feature h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--text); } .feature p { font-size: 14px; color: var(--text-dim); margin: 0; line-height: 1.6; } kbd { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 6px; font-family: -apple-system, monospace; font-size: 12px; font-weight: 600; color: var(--text); } /* ============================================================ HOW IT WORKS ============================================================ */ .how { padding: 120px 0; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } .how-step { text-align: center; padding: 32px 24px; } .how-capsule { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px; font-size: 18px; font-weight: 800; font-feature-settings: "tnum"; margin-bottom: 24px; } .capsule-sprite { width: 18px; height: 18px; background-image: url('img/clyde.svg'); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; } .capsule-ready { background: linear-gradient(180deg, rgba(94, 232, 132, 0.30) 0%, rgba(45, 166, 76, 0.20) 100%); color: var(--green-bright); box-shadow: 0 0 16px rgba(52, 199, 89, 0.35), inset 0 0 0 0.5px rgba(94, 232, 132, 0.5); } .capsule-working { background: linear-gradient(180deg, rgba(217, 156, 255, 0.32) 0%, rgba(156, 63, 224, 0.22) 100%); color: var(--purple-bright); box-shadow: 0 0 18px rgba(191, 90, 242, 0.4), inset 0 0 0 0.5px rgba(217, 156, 255, 0.55); animation: capsule-pulse 2s ease-in-out infinite; } .capsule-attention { background: linear-gradient(180deg, rgba(122, 184, 255, 0.34) 0%, rgba(37, 99, 212, 0.22) 100%); color: var(--blue-bright); box-shadow: 0 0 20px rgba(74, 144, 226, 0.5), inset 0 0 0 0.5px rgba(122, 184, 255, 0.6); animation: capsule-pulse-fast 1.2s ease-in-out infinite; } @keyframes capsule-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(191, 90, 242, 0.4), inset 0 0 0 0.5px rgba(217, 156, 255, 0.55); } 50% { box-shadow: 0 0 28px rgba(191, 90, 242, 0.6), inset 0 0 0 0.5px rgba(217, 156, 255, 0.75); } } @keyframes capsule-pulse-fast { 0%, 100% { box-shadow: 0 0 20px rgba(74, 144, 226, 0.5), inset 0 0 0 0.5px rgba(122, 184, 255, 0.6); } 50% { box-shadow: 0 0 32px rgba(74, 144, 226, 0.75), inset 0 0 0 0.5px rgba(122, 184, 255, 0.8); } } .how-step h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; } .how-step p { font-size: 14px; color: var(--text-dim); margin: 0; } /* ============================================================ INSTALL ============================================================ */ .install { padding: 120px 0; /* Same fade-in/fade-out treatment as `.features` so the bg-alt * slab blends into the ambient layer at both edges. */ background: linear-gradient( to bottom, transparent 0%, var(--bg-alt) 100px, var(--bg-alt) calc(100% - 100px), transparent 100% ); } .install-card { max-width: 640px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 48px; } .install-card ol { margin: 0 0 24px; padding: 0 0 0 20px; font-size: 15px; color: var(--text); } .install-card li { margin-bottom: 14px; line-height: 1.7; } .install-card li::marker { color: var(--purple-bright); font-weight: 700; } .install-card code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 13px; color: var(--purple-bright); } .install-card a { color: var(--purple-bright); border-bottom: 1px solid rgba(191, 90, 242, 0.3); } .install-meta { font-size: 13px; color: var(--text-faint); margin: 0; padding-top: 16px; border-top: 1px solid var(--border); } /* ============================================================ SUPPORT ============================================================ */ .support { padding: 120px 0; /* Same fade-in/fade-out slab treatment as `.features` and * `.install` so the section reads as a distinct block against * the ambient layer instead of visually dissolving into it. */ background: linear-gradient( to bottom, transparent 0%, var(--bg-alt) 100px, var(--bg-alt) calc(100% - 100px), transparent 100% ); } .support-card { max-width: 720px; margin: 0 auto; padding: 40px; /* Was `var(--surface)` which is not defined anywhere, so the * card rendered with a transparent background and the contents * floated directly on top of the section slab. Use the same * `--bg-card` (#14141d) that `.install-card` and * `.showcase-panel` use so every card on the page has matching * body colour. */ background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; text-align: center; } .support-blurb { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0 0 28px 0; } .support-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; } .support-meta { font-size: 13px; color: var(--text-faint); margin: 0; padding-top: 16px; border-top: 1px solid var(--border); } @media (max-width: 720px) { .support { padding: 56px 0; } .support-card { padding: 28px; } .support-buttons { flex-direction: column; } .support-buttons .cta-primary, .support-buttons .cta-secondary { width: 100%; justify-content: center; } } /* ============================================================ FOOTER ============================================================ */ footer { padding: 60px 0 40px; border-top: 1px solid var(--border); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; } .footer-nav { display: flex; gap: 24px; font-size: 14px; color: var(--text-dim); } .footer-meta { font-size: 12px; color: var(--text-faint); margin: 0; } /* ============================================================ RESPONSIVE ============================================================ */ /* ============================================================ REDUCED MOTION Respect users who've turned animations off at the OS level. ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Disable every animation + transform-y. Keep colour transitions on hover for affordance. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media (max-width: 760px) { .nav nav { gap: 16px; font-size: 13px; } .nav nav a:not(.ghost):not([href*="github"]) { display: none; } h1 { font-size: 44px; } .tagline { font-size: 18px; } .subtagline { font-size: 15px; } .hero { padding: 70px 24px 90px; } .section-header h2 { font-size: 30px; } .features, .how, .install { padding: 80px 0; } .feature-grid { grid-template-columns: 1fr; } .how-grid { grid-template-columns: 1fr; } .showcase { padding: 80px 0 60px; } .showcase-tablist { grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; } .showcase-tab { padding: 14px 18px; } .showcase-tab-num { font-size: 18px; } .showcase-panel { grid-template-columns: 1fr; gap: 32px; padding: 28px; } .showcase-copy h3 { font-size: 22px; } .showcase-image-menubar { padding: 20px 0; } .showcase-image-menubar img { max-width: 100%; } .install-card { padding: 28px; } .cta-row { flex-direction: column; } .cta-primary, .cta-secondary { width: 100%; justify-content: center; } }