/* ============================================================ PEBBLE — marketing site (Dark + Light themes) Toggle via [data-theme="dark"|"light"] on . Default tokens (in :root) define the dark theme; the `[data-theme="light"]` block at the bottom overrides them. ============================================================ */ @import url("https://rsms.me/inter/inter.css"); @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=VT323&family=JetBrains+Mono:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&display=swap"); :root { --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --max-w: 1200px; --max-w-narrow: 920px; --t-fast: .15s; --t-med: .25s; --bg: #050505; --bg-card: #0a0a0c; --bg-card-2: #0e0e10; --bg-tint: rgba(255,255,255,0.03); --bg-tint-2: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.14); --text: #fafafa; --text-2: #a0a0a8; --text-3: #6a6a72; --text-4: #44444a; --c1: #f5d061; --c2: #aef0d4; --c3: #7be3f4; --c4: #87a9ff; --c5: #c4a5ff; --c6: #ff8a6e; --accent: #a78bfa; --accent-2: #d4c4ff; --gradient: linear-gradient(135deg, #a78bfa 0%, #d4c4ff 50%, #fafafa 100%); --gradient-soft: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(135,169,255,0.08)); --success: #4ade80; --success-bg: rgba(74,222,128,0.10); --warn: #f87171; --warn-bg: rgba(248,113,113,0.10); --font-display: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --tracking: -0.2px; --tracking-tight: -0.55px; --tracking-tighter: -1.1px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-display); font-feature-settings: "cv11", "ss01", "ss03"; font-size: 15.5px; line-height: 1.55; letter-spacing: var(--tracking); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ""; position: fixed; inset: -10% 0 auto 0; height: 800px; background: radial-gradient(ellipse 1000px 500px at 50% 0%, rgba(167,139,250,0.16), transparent 60%); pointer-events: none; z-index: -1; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; letter-spacing: var(--tracking); } ::selection { background: rgba(167,139,250,0.35); color: var(--text); } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; } /* NAV */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(5,5,5,0.72); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid transparent; transition: border-color var(--t-fast); } .nav.scrolled { border-bottom-color: var(--border); } .nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 22px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: var(--tracking-tight); } /* Yes Clicky cursor mark — replaces the legacy gradient pebble dot. A CSS mask-image clips the brand violet-to-peach gradient into the cursor shape. Soft drop-shadow gives the same lift the box-shadow used to give the pebble circle. */ .brand-mark { width: 26px; height: 26px; background: linear-gradient(135deg, #a78bfa 0%, #d4c4ff 55%, #ff8a6e 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 5L7 24L12 20L15.5 28L18.5 26.5L15 19L22 19Z' stroke='black' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 5L7 24L12 20L15.5 28L18.5 26.5L15 19L22 19Z' stroke='black' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 4px 10px rgba(167, 139, 250, 0.35)); flex-shrink: 0; } .brand-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--text-2); } .nav-links a { transition: color var(--t-fast); } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 10px; } @media (max-width: 860px) { .nav-links { display: none; } } .theme-toggle { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 3px; } .th-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: transparent; border: 0; padding: 5px 11px; border-radius: 7px; letter-spacing: -0.1px; transition: background var(--t-fast), color var(--t-fast); } .th-btn:hover { color: var(--text); } .th-btn[aria-pressed="true"] { background: rgba(255,255,255,0.10); color: var(--text); } /* BUTTONS */ .btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); } .btn-primary { background: linear-gradient(135deg, #fff 0%, #d4c4ff 50%, #a78bfa 100%); color: #0a0a0c; box-shadow: 0 0 0 1px rgba(167,139,250,0.30), 0 12px 28px -8px rgba(167,139,250,0.45); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(167,139,250,0.45), 0 16px 32px -4px rgba(167,139,250,0.50); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--bg-tint); } .btn-quiet { background: transparent; color: var(--text-2); height: 36px; padding: 0 14px; } .btn-quiet:hover { color: var(--text); background: var(--bg-tint); } .btn-lg { height: 48px; padding: 0 24px; font-size: 15.5px; border-radius: 12px; } .btn .arrow { transition: transform .15s; } .btn:hover .arrow { transform: translateX(3px); } /* HERO — left-aligned copy with the beam descending on the right. */ .hero { padding: 56px 0 60px; text-align: left; position: relative; overflow: hidden; } .hero > .container { position: relative; z-index: 2; } /* Copy column — eyebrow + headline + sub + CTA + meta. Boxed at ~600px so the right half of the hero is clear for the descending beam, same composition as Huly. The dashboard mock OUTSIDE this wrapper stays centered + full-width below. */ .hero-copy { max-width: 620px; margin: 0; text-align: left; /* Sit above the beam layers so the eyebrow chip + headline gradient read crisply even where the beam's diffuse violet wash touches the bottom-left of the copy. */ position: relative; z-index: 3; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-2); margin-bottom: 28px; } .eyebrow-pill { display: inline-block; padding: 2px 9px; background: var(--accent); color: #0a0a0c; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .hero h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: var(--tracking-tighter); font-weight: 800; margin: 0 0 22px; } .hero h1 .grad, .section-head h2 .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-sub { font-size: clamp(17px, 2vw, 20px); color: var(--text-2); max-width: 560px; margin: 0 0 36px; } .hero-ctas { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); margin-bottom: 56px; } .hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); } .hero-meta .check { color: var(--success); display: inline-flex; align-items: center; gap: 5px; } /* DASHBOARD MOCK */ .dash-wrap { position: relative; max-width: 1140px; margin: 0 auto; } .dash-wrap::before { content: ""; position: absolute; /* Extended upward (top: -8% instead of 4%) so the ambient violet wash reaches into the space above the frame — that's where the beam's bloom lands, so the two effects blend seamlessly instead of reading as separate gradients meeting at a hard edge. */ inset: -8% 0% -8% 0%; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(167,139,250,0.30), transparent 70%), radial-gradient(ellipse 40% 30% at 50% 0%, rgba(212,196,255,0.25), transparent 65%); filter: blur(60px); z-index: -1; } .browser { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; text-align: left; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.04); } .browser-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card-2); } .dots { display: flex; gap: 7px; } .dots span { width: 11px; height: 11px; border-radius: 50%; background: #2a2a30; } .dots span:nth-child(1) { background: #ff6058; } .dots span:nth-child(2) { background: #ffbd2e; } .dots span:nth-child(3) { background: #28c941; } .url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text-3); font-family: var(--font-mono); max-width: 420px; margin: 0 auto; } .url .lock { color: var(--success); } .url strong { color: var(--text-2); font-weight: 500; } .dash { display: grid; grid-template-columns: 220px 1fr; min-height: 540px; } .dash-side { background: var(--bg-card-2); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; } .dash-side .site-picker { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; } .site-fav { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #a78bfa, #d4c4ff); display: grid; place-items: center; color: #0a0a0c; font-size: 11px; font-weight: 700; } .site-picker .name { font-size: 13.5px; font-weight: 500; } .site-picker .live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--success); font-variant-numeric: tabular-nums; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(74,222,128,0.55); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.55); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } .side-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); padding: 12px 10px 4px; font-weight: 600; } .dash-side a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); } .dash-side a:hover { background: rgba(255,255,255,0.04); color: var(--text); } .dash-side a.active { background: rgba(255,255,255,0.06); color: var(--text); position: relative; } .dash-side a.active::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 2px; } .dash-side a .num { margin-left: auto; font-size: 11px; color: var(--text-3); background: var(--bg-tint); padding: 1px 6px; border-radius: 5px; font-family: var(--font-mono); } .dash-main { padding: 22px 24px 26px; } .dash-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .dash-toolbar h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: var(--tracking-tight); } .dash-toolbar h3 small { font-weight: 400; color: var(--text-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; margin-left: 10px; } .dash-toolbar .spacer { flex: 1; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text-2); } .chip:hover { color: var(--text); border-color: var(--border-strong); } /* ===== Friendly greeting headline + stat pills ===== */ .dash-greeting { margin-bottom: 18px; } .dash-greeting h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); } .dash-greeting h3 strong { color: var(--success); font-weight: 700; } .dash-greeting-grad { background: linear-gradient(135deg, #a78bfa, #d4c4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .dash-greeting-pills { display: flex; flex-wrap: wrap; gap: 6px; } .dash-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; } .dash-pill strong { color: var(--text-2); font-weight: 700; } /* ===== Aurora metric tiles ===== Five pastel-gradient tiles arranged in a 5-up row. Each variant gets its own radial-gradient backdrop — same colour rotation as the production .pebble-metric-card. Dark ink reads on every gradient in both themes; the tile IS the brightness. */ .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; } .metric { position: relative; padding: 14px 16px 14px; border-radius: 14px; overflow: hidden; isolation: isolate; } .metric .label { position: relative; z-index: 1; font-size: 11px; font-weight: 600; color: rgba(26, 20, 13, 0.72); letter-spacing: 0.02em; margin-bottom: 6px; } .metric .value { position: relative; z-index: 1; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #1a140d; font-variant-numeric: tabular-nums; } .metric .delta-chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 9px; background: rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 11px; font-weight: 600; color: #0c6b46; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(26, 20, 13, 0.04); } .metric .delta-chip--down { color: #8a2a2a; } /* Inner sheen + hairline edge — keeps every tile from looking flat. */ .metric--aurora::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18); z-index: 0; } /* Aurora gradient backdrops — peach / blue / mint / amber / lavender. */ .metric--aurora-1 { background: radial-gradient(120% 120% at 0% 0%, #ffd2c2 0%, #ffb1a3 40%, #f3a3c6 80%, #b388ff 110%); } .metric--aurora-2 { background: radial-gradient(120% 120% at 100% 0%, #bff0ff 0%, #9dd3ff 40%, #b3b3ff 80%, #d6a8ff 110%); } .metric--aurora-3 { background: radial-gradient(120% 120% at 50% 0%, #c8f6e1 0%, #a0e8c8 40%, #8ad9d6 80%, #7cb9ff 110%); } .metric--aurora-4 { background: radial-gradient(120% 120% at 0% 100%, #fff1c2 0%, #ffd980 40%, #ffb56b 80%, #ff7e5f 110%); } .metric--aurora-5 { background: radial-gradient(120% 120% at 100% 100%,#e2d6ff 0%, #c4a5ff 40%, #b388ff 80%, #7c5cff 110%); } /* ===== "Yes Clicky noticed..." card strip ===== Three observation cards sandwiched between the metrics and the chart. Each tone (good / info / cosmic) keys off a CSS variable that drives the background tint + border tone. */ .dash-noticed { margin-bottom: 18px; } .dash-noticed-head { margin: 0 0 8px; padding: 0 2px; } .dash-noticed-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; background: linear-gradient(135deg, #f5d061, #aef0d4 50%, #7be3f4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .dash-noticed-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dash-noticed-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; border: 1px solid; min-width: 0; } .dash-noticed-card[data-tone="good"] { background: rgba(124, 208, 200, 0.08); border-color: rgba(124, 208, 200, 0.25); } .dash-noticed-card[data-tone="info"] { background: rgba(135, 169, 255, 0.10); border-color: rgba(135, 169, 255, 0.28); } .dash-noticed-card[data-tone="cosmic"] { background: rgba(196, 165, 255, 0.10); border-color: rgba(196, 165, 255, 0.30); } .dash-noticed-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } .dash-noticed-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; letter-spacing: -0.005em; } .dash-noticed-sub { font-size: 11.5px; color: var(--text-2); line-height: 1.4; } .chart-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 8px; margin-bottom: 18px; } .chart-svg { width: 100%; height: 220px; display: block; } .chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); padding: 4px 4px 0; font-family: var(--font-mono); } /* ===== Right Now orb panel ===== Live visitor count on the left, pulsing teal orb with satellite dots on the right. Mirrors RightNowOrb.tsx in the real app. */ .dash-rightnow { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px 20px; margin-bottom: 18px; } .dash-rightnow-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } .dash-rightnow-icon { color: #7cd0c8; font-size: 8px; } .dash-rightnow-label { color: var(--text-2); } .dash-rightnow-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; } .dash-rightnow-left { min-width: 0; } .dash-rightnow-count { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: clamp(64px, 8vw, 112px); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; } .dash-rightnow-sub { font-size: 13px; color: var(--text-3); margin-top: 8px; } .dash-rightnow-from { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); } .dash-rightnow-from-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; opacity: 0.7; min-width: 36px; } .dash-rightnow-from-city { color: var(--text-2); font-weight: 600; } .dash-rightnow-from-dot { opacity: 0.5; } .dash-rightnow-from-path { color: var(--text-3); } .dash-rightnow-orb-wrap { position: relative; width: 220px; height: 200px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-rightnow-orb { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; } .dash-rightnow-ring { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #7cd0c8; transform: translate(-50%, -50%) scale(1); opacity: 0; animation: dash-orb-ring 2.6s ease-out infinite; } .dash-rightnow-ring.r1 { animation-delay: 0s; } .dash-rightnow-ring.r2 { animation-delay: 0.65s; } .dash-rightnow-ring.r3 { animation-delay: 1.30s; } .dash-rightnow-ring.r4 { animation-delay: 1.95s; } @keyframes dash-orb-ring { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; border-width: 2px; } 10% { opacity: 0.55; } 100% { transform: translate(-50%, -50%) scale(6); opacity: 0; border-width: 0.5px; } } .dash-rightnow-core { position: relative; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #aef0d4, #7cd0c8 60%, #5b8a7c); box-shadow: 0 0 0 4px rgba(124, 208, 200, 0.18), 0 0 24px rgba(124, 208, 200, 0.55); z-index: 2; } .dash-rightnow-dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; margin: -5px 0 0 -5px; animation: dash-orb-dot-float 4.5s ease-in-out infinite; z-index: 3; box-shadow: 0 0 8px currentColor; } @keyframes dash-orb-dot-float { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } @media (prefers-reduced-motion: reduce) { .dash-rightnow-ring, .dash-rightnow-dot { animation: none; } } .breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .bd-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 8px; } .bd-card h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.5px; font-weight: 600; } .bd-row { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 8px; font-size: 13px; border-radius: 6px; overflow: hidden; } .bd-row .bar { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(167,139,250,0.18), rgba(167,139,250,0.04)); border-radius: 6px; } .bd-row > * { position: relative; z-index: 1; } .bd-row .icon { width: 16px; display: grid; place-items: center; } .bd-row .label { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-row .val { color: var(--text-2); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; } /* ===== Dashboard mock responsive cascade ===== 1100→920px: 5 metric tiles wrap to 3-up (still spacious) 920→640px: drop the sidebar, metrics go 2-up, breakdown stacks 640px ↓: Right Now orb stacks vertically, noticed cards 1-col */ @media (max-width: 1100px) { .metrics { grid-template-columns: repeat(3, 1fr); } .dash-noticed-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px) { .dash { grid-template-columns: 1fr; } .dash-side { display: none; } .metrics { grid-template-columns: repeat(2, 1fr); } .breakdown { grid-template-columns: 1fr; } } @media (max-width: 640px) { .metrics { grid-template-columns: repeat(2, 1fr); } .dash-noticed-strip { grid-template-columns: 1fr; } .dash-rightnow-body { grid-template-columns: 1fr; text-align: left; } .dash-rightnow-orb-wrap { margin: 0 auto; } .dash-greeting h3 { font-size: 16px; } } /* TRUST */ .trust { padding: 64px 0 32px; text-align: center; } .trust-label { font-size: 13px; color: var(--text-3); margin-bottom: 26px; } .trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px 52px; opacity: 0.7; } .trust-row .logo { font-size: 17px; font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; } /* SECTIONS */ section { padding: 96px 0; } .section-head { text-align: center; margin-bottom: 56px; } .section-tag { display: inline-block; padding: 4px 12px; background: rgba(167,139,250,0.12); color: var(--accent); border: 1px solid rgba(167,139,250,0.25); font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 999px; margin-bottom: 16px; } .section-head h2 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: var(--tracking-tighter); line-height: 1.05; font-weight: 800; margin: 0 0 16px; max-width: 760px; margin-left: auto; margin-right: auto; } .section-head p { font-size: 17.5px; color: var(--text-2); max-width: 580px; margin: 0 auto; } /* BENTO */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; } .bento-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 26px; overflow: hidden; transition: transform var(--t-med), border-color var(--t-med); } .bento-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 40% at 20% 0%, rgba(167,139,250,0.08), transparent 60%); pointer-events: none; } .bento-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } .bc-span-3 { grid-column: span 3; } .bc-span-2 { grid-column: span 2; } .bento-card .b-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--accent); background: rgba(167,139,250,0.10); border: 1px solid rgba(167,139,250,0.20); padding: 3px 10px; border-radius: 999px; margin-bottom: 16px; font-weight: 500; } .bento-card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: var(--tracking-tight); font-weight: 700; } .bento-card p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; } .art-script { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; background: var(--bg); color: #d8d8e0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; position: relative; } .art-script .copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 3px 8px; font-size: 11px; font-family: var(--font-display); } .art-script .copy-btn:hover { background: rgba(255,255,255,0.10); } .art-script .tag-c { color: #c4a5ff; } .art-script .attr-c { color: #fbbf24; } .art-script .str-c { color: #aef0d4; } .art-cookies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .cookie-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text-3); font-family: var(--font-mono); text-decoration: line-through; text-decoration-color: var(--warn); text-decoration-thickness: 1.5px; } .cookie-pill .x { color: var(--warn); } .art-live { margin-top: 18px; padding: 16px; background: var(--bg); border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .live-big { font-size: 38px; font-weight: 800; letter-spacing: var(--tracking-tighter); font-variant-numeric: tabular-nums; line-height: 1; color: var(--text); } .art-live .meta { color: var(--text-3); font-size: 12px; } .art-live .live-spark { margin-left: auto; display: flex; align-items: flex-end; gap: 3px; height: 36px; } .art-live .live-spark span { width: 4px; background: var(--accent); border-radius: 2px; opacity: .85; animation: barpulse 1.4s ease-in-out infinite; } @keyframes barpulse { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } } .art-goals { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; } .goal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; } .goal .check { width: 16px; height: 16px; border-radius: 50%; background: var(--success); color: #0a0a0c; display: grid; place-items: center; font-size: 10px; font-weight: 700; } .goal .name { flex: 1; } .goal .count { color: var(--text-3); font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .art-share { margin-top: 18px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); } .art-share .lock { color: var(--success); } .art-share .pill { margin-left: auto; font-family: var(--font-display); font-size: 11px; background: var(--success-bg); color: var(--success); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(74,222,128,0.30); } .art-reports { margin-top: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .email-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 6px 0; border-bottom: 1px solid var(--border); } .email-row:last-child { border-bottom: 0; } .email-row .from { width: 60px; color: var(--text); font-weight: 500; } .email-row .preview { color: var(--text-3); } .bento-art-dark { margin-top: 20px; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 12.5px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; } .bento-art-dark .muted { color: var(--text-3); } .bento-art-dark .accent { color: var(--accent-2); } @media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bc-span-3, .bc-span-2 { grid-column: span 2; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bc-span-3, .bc-span-2 { grid-column: span 1; } } /* PRIVACY */ .privacy { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .privacy-grid h2 { font-size: clamp(30px, 4vw, 46px); margin: 0 0 18px; letter-spacing: var(--tracking-tighter); line-height: 1.05; font-weight: 800; } .privacy-grid p { color: var(--text-2); font-size: 17px; line-height: 1.6; margin: 0 0 14px; } .compliance-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 500; } .badge .check { color: var(--success); } .privacy-illo { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 26px; } .fingerprint-card { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); margin-bottom: 14px; } .fingerprint-card .row { display: flex; padding: 4px 0; border-bottom: 1px dashed var(--border); } .fingerprint-card .row:last-child { border-bottom: 0; } .fingerprint-card .row .k { width: 110px; color: var(--text-2); } .fingerprint-card .row .v { text-decoration: line-through; text-decoration-color: var(--warn); } .fingerprint-card .row.kept .v { text-decoration: none; color: var(--text); } .fp-result { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--success-bg); border: 1px solid rgba(74,222,128,0.30); border-radius: 12px; color: var(--success); font-weight: 500; } .fp-result .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--success); color: #0a0a0c; display: grid; place-items: center; } @media (max-width: 840px) { .privacy-grid { grid-template-columns: 1fr; gap: 32px; } } /* COMPARISON */ .compare-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .compare-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border); } .compare-row:last-child { border-bottom: 0; } .compare-row.head { background: var(--bg-tint); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); } .compare-row .feat { color: var(--text); font-weight: 500; font-size: 15px; } .compare-row .col-ga { color: var(--text-3); font-size: 14px; } .compare-row .col-pebble { color: var(--text); font-size: 14px; } .compare-row .yes { color: var(--success); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .compare-row .no { color: var(--warn); display: inline-flex; align-items: center; gap: 6px; } .compare-row.head .col-pebble { color: var(--accent); } @media (max-width: 720px) { .compare-row { grid-template-columns: 1.4fr 1fr 1fr; padding: 12px 16px; font-size: 13px; } } /* PRICING */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; } .price-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 26px; display: flex; flex-direction: column; position: relative; } .price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(167,139,250,0.30), 0 20px 50px -20px rgba(167,139,250,0.40); background: linear-gradient(180deg, rgba(167,139,250,0.05) 0%, var(--bg-card) 60%); } .price-card .tier { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .price-card.featured .tier { color: var(--accent); } .price-card .tier-tag { display: inline-block; padding: 2px 8px; background: var(--accent); color: #0a0a0c; border-radius: 999px; font-size: 10.5px; letter-spacing: 0.5px; } .price-card .price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .price-card .price .amount { font-size: 48px; font-weight: 800; letter-spacing: var(--tracking-tighter); line-height: 1; } .price-card .price .unit { color: var(--text-3); font-size: 14px; } .price-card .sub { color: var(--text-2); font-size: 14px; margin-bottom: 22px; min-height: 40px; } .price-card .cta { margin-bottom: 22px; } .price-card .cta .btn { width: 100%; } .price-card hr { margin: 0 0 18px; border: 0; border-top: 1px solid var(--border); } .price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: var(--text-2); } .price-card ul li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; } .price-card ul li .check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: grid; place-items: center; font-size: 11px; margin-top: 1px; } .price-card.featured ul li .check { background: rgba(167,139,250,0.12); color: var(--accent); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-note { text-align: center; margin-top: 28px; color: var(--text-3); font-size: 14px; } /* ============================================================ FOUNDER'S NOTE ------------------------------------------------------------ Single-column letter-style block replacing the (fake) testimonial grid. Centered, narrow column for readability; subtle violet accent bar on the left so it reads as a quote without needing quote marks. Signature row at the bottom mirrors the testimonial-card author layout so when real testimonials land later they sit naturally below this note. ============================================================ */ .founder-note { max-width: 680px; margin: 0 auto; padding: 36px 36px 32px; position: relative; background: linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, rgba(167, 139, 250, 0.02) 100%); border: 1px solid rgba(167, 139, 250, 0.18); border-radius: var(--r-xl); /* Soft violet rim-light — ties the section to the cosmic hero beam above so it doesn't feel like a separate page. */ box-shadow: 0 1px 0 rgba(167, 139, 250, 0.08) inset, 0 0 60px -20px rgba(167, 139, 250, 0.22); } .founder-note > .section-tag { /* Override the centered .section-head treatment — here the tag sits flush-left as a single accent above the body. */ margin-bottom: 18px; } .founder-note-body { font-size: 16.5px; line-height: 1.65; color: var(--text-2); letter-spacing: -0.005em; margin: 0 0 18px; } .founder-note-body em { font-style: italic; color: var(--text); background: linear-gradient(135deg, #a78bfa, #d4c4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; } .founder-note-sig { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--border); } .founder-note-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #0a0a0c; background: linear-gradient(135deg, #a78bfa 0%, #d4c4ff 50%, #ff8a6e 100%); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45), 0 4px 12px -4px rgba(167, 139, 250, 0.45); flex-shrink: 0; } .founder-note-meta { display: flex; flex-direction: column; gap: 2px; } .founder-note-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .founder-note-role { font-size: 13px; color: var(--text-3); } @media (max-width: 640px) { .founder-note { padding: 28px 22px 24px; border-radius: var(--r-xl); } .founder-note-body { font-size: 15.5px; } } /* FAQ */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; padding: 22px 0; font-size: 17px; font-weight: 600; color: var(--text); text-align: left; } .faq-q .toggle { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tint); display: grid; place-items: center; flex-shrink: 0; transition: transform var(--t-med), background var(--t-fast); color: var(--text); } .faq-item.open .faq-q .toggle { transform: rotate(45deg); background: var(--accent); color: #0a0a0c; } .faq-a { display: none; padding: 0 0 22px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; max-width: 640px; } .faq-item.open .faq-a { display: block; } /* CTA BAND */ .cta-band { margin: 0 28px 80px; padding: 64px 32px; background: linear-gradient(135deg, #0a0a0c 0%, #14101e 100%); border: 1px solid var(--border-strong); border-radius: var(--r-2xl); text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(167,139,250,0.30), transparent 50%), radial-gradient(ellipse at bottom left, rgba(123,227,244,0.18), transparent 50%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { font-size: clamp(32px, 4.4vw, 52px); margin: 0 0 14px; letter-spacing: var(--tracking-tighter); font-weight: 800; line-height: 1.05; } .cta-band p { color: var(--text-2); max-width: 480px; margin: 0 auto 28px; font-size: 17px; } /* FOOTER */ .footer { padding: 56px 0 40px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 40px; } .footer-brand p { color: var(--text-2); font-size: 14px; max-width: 280px; margin: 12px 0 0; } .footer h5 { margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); font-weight: 600; } .footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .footer ul a { color: var(--text-2); font-size: 14px; } .footer ul a:hover { color: var(--text); } .footer-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13px; flex-wrap: wrap; gap: 12px; } .footer-meta .built { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-tint); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; font-size: 12px; } .footer-meta .built .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================ ✦ TRIAL CALLOUT — the headline 7-day offer above the tier grid ============================================================ */ .trial-callout { max-width: 1080px; margin: 0 auto 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 22px 28px; border-radius: var(--r-2xl); background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(123,227,244,0.05) 60%, rgba(174,240,212,0.06)), var(--bg-card); border: 1px solid rgba(167,139,250,0.22); box-shadow: 0 0 0 1px rgba(167,139,250,0.08), 0 20px 50px -28px rgba(167,139,250,0.30); } .trial-callout-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--gradient); color: #0a0a0c; font-size: 22px; font-weight: 800; flex-shrink: 0; } .trial-callout-body { min-width: 0; } .trial-callout-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; font-weight: 600; } .trial-callout-title { font-size: 18px; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text); margin-bottom: 4px; } .trial-callout-sub { font-size: 14px; color: var(--text-2); line-height: 1.45; } @media (max-width: 760px) { .trial-callout { grid-template-columns: 1fr; text-align: left; } .trial-callout .btn { width: 100%; justify-content: center; } } /* ============================================================ ☀ LIGHT THEME — variable override (Inter font, same shapes) ---------------------------------------------------------- Just a token swap. Everything that currently reads `var(--bg)`, `var(--text)`, etc. flips to the light palette automatically — no component-by-component overrides like the old pixel-art retro theme needed. ============================================================ */ [data-theme="light"] { --bg: #fafaf7; --bg-card: #ffffff; --bg-card-2: #f7f6f1; --bg-tint: rgba(0,0,0,0.03); --bg-tint-2: rgba(0,0,0,0.06); --border: rgba(20,18,12,0.10); --border-strong:rgba(20,18,12,0.20); --text: #0a0a0c; --text-2: #5a5a66; --text-3: #80808b; --text-4: #b4b4be; /* Keep the brand accents — they read against light bg too */ --accent: #7c5cff; --accent-2: #b69fff; --gradient: linear-gradient(135deg, #7c5cff 0%, #b69fff 50%, #1a1a1a 100%); --gradient-soft: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(135,169,255,0.05)); --success: #10b981; --success-bg: rgba(16,185,129,0.10); --warn: #e84418; --warn-bg: rgba(232,68,24,0.08); } /* Tweaks where the dark-mode trick doesn't translate cleanly: */ [data-theme="light"] body::before { /* Soft lavender wash at top instead of the dark-mode glow */ background: radial-gradient(ellipse 1000px 500px at 50% 0%, rgba(124,92,255,0.10), transparent 60%); } [data-theme="light"] ::selection { background: rgba(124,92,255,0.20); color: #0a0a0c; } [data-theme="light"] .dots span { background: #d4d0c5; } [data-theme="light"] .dots span:nth-child(1) { background: #ff6058; } [data-theme="light"] .dots span:nth-child(2) { background: #ffbd2e; } [data-theme="light"] .dots span:nth-child(3) { background: #28c941; } [data-theme="light"] .nav { background: rgba(250,250,247,0.82); } /* Primary button on light bg — invert so it stays the standout CTA */ [data-theme="light"] .btn-primary { background: linear-gradient(135deg, #1a1a1a 0%, #3a2f60 50%, #7c5cff 100%); color: #fafafa; box-shadow: 0 0 0 1px rgba(124,92,255,0.30), 0 12px 28px -8px rgba(124,92,255,0.35); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 0 0 1px rgba(124,92,255,0.45), 0 16px 32px -4px rgba(124,92,255,0.40); } /* Code blocks need a dark surface in light mode so the syntax tinting reads */ [data-theme="light"] .art-script, [data-theme="light"] .bento-art-dark, [data-theme="light"] .art-live { background: #14121f; color: #fafafa; border-color: rgba(124,92,255,0.20); } [data-theme="light"] .art-script .copy-btn { background: rgba(255,255,255,0.08); color: #fafafa; border-color: rgba(255,255,255,0.12); } [data-theme="light"] .art-live .meta { color: #a0a0a8; } [data-theme="light"] .live-big { color: #fafafa; } /* CTA band — keep its dark-aurora look in light mode too. The contrast is the whole point of this section: it lifts off the page. */ [data-theme="light"] .cta-band { background: linear-gradient(135deg, #14121f 0%, #1f1730 100%); border-color: rgba(124,92,255,0.30); } [data-theme="light"] .cta-band h2 { color: #fafafa; } [data-theme="light"] .cta-band p { color: #c4c4cc; } /* Theme-toggle active state needs a visible-on-light background. */ [data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); } [data-theme="light"] .th-btn[aria-pressed="true"] { background: #ffffff; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } /* Trial callout — soften the violet wash so it doesn't blast in light mode */ [data-theme="light"] .trial-callout { background: linear-gradient(135deg, rgba(124,92,255,0.06), rgba(123,227,244,0.04) 60%, rgba(174,240,212,0.04)), #ffffff; border-color: rgba(124,92,255,0.18); box-shadow: 0 0 0 1px rgba(124,92,255,0.06), 0 12px 28px -16px rgba(124,92,255,0.20); } /* ============================================================ HERO FORM — "Add my website" CTA ---------------------------------------------------------- Replaces the previous two-button hero (Start trial · See features) with an inline domain field + coral Yes Clicky-peach submit. Reduces first-touch friction to one input + one button, and the domain the visitor types carries through to /signup?domain=… so by the time their account exists the system already knows which site they want to track. ============================================================ */ .hero-form { /* Flush-left under the headline now that the hero is left-aligned. */ margin: 0 0 18px; max-width: 460px; display: flex; flex-direction: column; gap: 10px; text-align: left; } .hero-form-input { position: relative; display: flex; align-items: center; height: 52px; padding: 0 16px 0 46px; border-radius: 12px; background: var(--bg-tint); border: 1px solid var(--border); transition: border-color var(--t-fast), background var(--t-fast); } .hero-form-input:focus-within { /* Match the brand CTA — purple ring on focus, not coral. */ border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15); } .hero-form-globe { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; } .hero-form-input input { flex: 1; height: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font-family: inherit; font-size: 15.5px; letter-spacing: -0.1px; padding: 0; } .hero-form-input input::placeholder { color: var(--text-3); } .hero-form-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px; border: 0; /* Yes Clicky brand violet — matches the nav "Start trial" CTA, the "showing off" word in the headline, and the metric-card gradient. Solid (not gradient) so the CTA reads as one decisive action. */ background: var(--accent); color: #0a0a0c; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.15px; cursor: pointer; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45), 0 12px 32px -10px rgba(167, 139, 250, 0.65), 0 4px 12px -2px rgba(167, 139, 250, 0.35); transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .hero-form-btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.55), 0 16px 36px -8px rgba(167, 139, 250, 0.75), 0 6px 16px -2px rgba(167, 139, 250, 0.45); } .hero-form-btn:active { transform: translateY(0); } .hero-form-btn .arrow { transition: transform var(--t-fast); } .hero-form-btn:hover .arrow { transform: translateX(3px); } .hero-form-note { text-align: left; font-size: 13px; color: var(--text-3); letter-spacing: -0.1px; } /* Retro theme — match the Mac System 7 chrome on the new form. */ /* ============================================================ 🌌 HERO ENERGY BEAM — cosmic god-ray ---------------------------------------------------------- Total rewrite (was clip-path trapezoid cones, which produced visible geometric edges no matter how much we blurred them). New approach: everything is a STACKED RADIAL GRADIENT with heavy blur, so there are no hard edges anywhere. The cone shape comes from positioning each ellipse's center BELOW the container — we only see the top half of the ellipse, which naturally widens as it descends toward the visible bottom. Eleven layers, back → front: 1. .hero-beam-nebula — deep blue/violet cosmic dust, the "starless night sky" feel behind it 2. .hero-beam-halo-far — widest, softest outer cone halo 3. .hero-beam-halo-mid — narrower middle halo, brighter 4. .hero-beam-halo-near — tight inner halo, brightest violet 5. .hero-beam-veil — wispy white haze at the very top, fades the beam in from the "sky" (no hard top edge → "rays through clouds parting") 6. .hero-beam-core — thin bright crystalline white streak 7. .hero-beam-burst — starburst at the impact point with horizontal + vertical rays (the "cosmic explosion" detail) 8. .hero-beam-ghost — three lens-flare ghosts along the beam axis (classic optical artifact that sells the "real beam of light" illusion) 9. .hero-beam-envelope — wide horizontal halo that wraps the dashboard frame All animations ride the same 5s heartbeat. The .dash-wrap halo (further down) joins the same beat. */ /* Beam horizontal position — tunable via CSS variable so the responsive media query can re-center on phones. */ .hero-beam { --beam-x: 64%; /* right-of-center, like Huly */ position: absolute; inset: -120px 0 -60px 0; pointer-events: none; z-index: 1; overflow: hidden; } /* Layer 1 — deep cosmic nebula. Provides the dark blue/violet "starless sky" backdrop that the brighter beam layers cut into. Three radial blobs at slightly different positions give it depth + slow drift makes it feel alive without distracting. */ .hero-beam-nebula { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 55% at calc(var(--beam-x) - 4%) 20%, rgba(35, 22, 88, 0.85), transparent 55%), radial-gradient(ellipse 55% 50% at calc(var(--beam-x) + 6%) 55%, rgba(75, 50, 165, 0.62), transparent 60%), radial-gradient(ellipse 80% 45% at var(--beam-x) 100%, rgba(140, 105, 230, 0.42), transparent 70%); filter: blur(50px); animation: pebble-beam-drift 24s ease-in-out infinite alternate; } @keyframes pebble-beam-drift { 0% { transform: translate3d(-1.5%, 0, 0) scale(1); opacity: 0.9; } 50% { transform: translate3d(1.5%, -1%, 0) scale(1.04); opacity: 1; } 100% { transform: translate3d(-1%, 0.5%, 0) scale(1.02); opacity: 0.92; } } /* Layers 2-4 — three concentric halos forming the cone shape. GEOMETRY TRICK: each ellipse is anchored at vertical position ~78-95% (close to the bottom of the container) with vertical radius ~75-95%. That means the ellipse's TOP edge sits high in the container but is narrow at that point (only the top sliver of the ellipse is visible there). As we descend, more of the ellipse's horizontal radius is exposed → natural taper. No clip-path needed; the gradient is the shape. */ .hero-beam-halo-far, .hero-beam-halo-mid, .hero-beam-halo-near { position: absolute; inset: 0; pointer-events: none; } .hero-beam-halo-far { /* Widest outer halo — diffuse purple cone */ background: radial-gradient( ellipse 32% 85% at var(--beam-x) 78%, rgba(180, 150, 255, 0.40) 0%, rgba(140, 110, 230, 0.28) 25%, rgba(110, 80, 200, 0.16) 50%, rgba(80, 55, 170, 0.06) 75%, transparent 95% ); filter: blur(45px); animation: pebble-beam-breathe 5s ease-in-out infinite; } .hero-beam-halo-mid { /* Mid halo — brighter lavender, tighter */ background: radial-gradient( ellipse 15% 88% at var(--beam-x) 80%, rgba(220, 200, 255, 0.65) 0%, rgba(180, 150, 255, 0.45) 22%, rgba(140, 110, 230, 0.22) 55%, transparent 85% ); filter: blur(28px); animation: pebble-beam-breathe 5s ease-in-out infinite; } .hero-beam-halo-near { /* Inner halo — brightest, almost white */ background: radial-gradient( ellipse 6% 92% at var(--beam-x) 82%, rgba(255, 255, 255, 0.75) 0%, rgba(220, 200, 255, 0.55) 25%, rgba(180, 150, 255, 0.28) 60%, transparent 90% ); filter: blur(14px); animation: pebble-beam-breathe 5s ease-in-out infinite; } @keyframes pebble-beam-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* Layer 5 — top veil. A wispy white haze at the very top of the beam that fades the cone in from the "sky" instead of having a hard top edge. Critical for the "rays parting clouds" feel. */ .hero-beam-veil { position: absolute; top: 0; left: var(--beam-x); width: 240px; height: 180px; transform: translateX(-50%); background: radial-gradient( ellipse 100% 100% at 50% 100%, rgba(255, 255, 255, 0.35) 0%, rgba(220, 200, 255, 0.20) 30%, rgba(180, 150, 255, 0.08) 60%, transparent 90% ); filter: blur(18px); mix-blend-mode: screen; } /* Layer 6 — the bright crystalline core. A thin vertical white streak that runs the full height of the container. Uses a linear-gradient fade at top + bottom so there's no hard edge. Tall + thin radial gradient gives the inner glow halo without needing a separate element. */ .hero-beam-core { position: absolute; top: 0; bottom: 0; left: var(--beam-x); width: 4px; transform: translateX(-50%); background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 4%, rgba(255, 255, 255, 0.95) 14%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(240, 232, 255, 0.9) 88%, rgba(220, 200, 255, 0.55) 96%, rgba(255, 255, 255, 0) 100% ); filter: blur(1px); box-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 18px rgba(220, 200, 255, 0.95), 0 0 40px rgba(180, 150, 255, 0.7), 0 0 90px rgba(140, 110, 230, 0.45); animation: pebble-beam-flicker 5s ease-in-out infinite; } @keyframes pebble-beam-flicker { 0%, 100% { opacity: 0.9; filter: blur(1px); } 25% { opacity: 0.97; filter: blur(1.2px); } 50% { opacity: 1; filter: blur(1.5px); } 75% { opacity: 0.95; filter: blur(1.1px); } } /* Layer 7 — impact starburst. THIS is the "god-like" detail. Where the beam meets the dashboard, light explodes outward in multiple directions — a horizontal anamorphic streak PLUS diagonal/vertical rays radiating from the contact point. Stacking multiple radial gradients with different aspect ratios simulates the multi-pointed lens flare you get when bright light hits a real camera lens. */ .hero-beam-burst { position: absolute; left: var(--beam-x); bottom: 240px; width: 1600px; height: 220px; transform: translateX(-50%); background: /* Central white-hot core of the impact */ radial-gradient(ellipse 8% 60% at 50% 50%, rgba(255, 255, 255, 0.95), transparent 70%), /* Horizontal anamorphic streak (long thin) */ radial-gradient(ellipse 55% 4% at 50% 50%, rgba(255, 255, 255, 0.85), transparent 75%), /* Wider horizontal halo bleed */ radial-gradient(ellipse 70% 18% at 50% 50%, rgba(220, 200, 255, 0.55), transparent 80%), /* Vertical sun-rays — short but punchy */ radial-gradient(ellipse 4% 90% at 50% 50%, rgba(255, 255, 255, 0.6), transparent 70%), /* Big soft bloom underneath everything */ radial-gradient(ellipse 45% 45% at 50% 50%, rgba(212, 196, 255, 0.50), rgba(167, 139, 250, 0.20) 50%, transparent 80%); filter: blur(6px); mix-blend-mode: screen; animation: pebble-beam-burst 5s ease-in-out infinite; } @keyframes pebble-beam-burst { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.94); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } } /* Layer 8 — lens-flare ghosts. Small circular highlights spaced along the beam axis. Classic optical artifact you see in photography when bright light passes through multiple lens elements. Three ghosts at different sizes + opacities, evenly staggered down the beam path. THIS is what gives the cosmic feel — without it the beam reads as "CSS gradient"; with it, it reads as "I'm looking at a real beam of light through a camera." */ .hero-beam-ghost { position: absolute; left: var(--beam-x); border-radius: 50%; transform: translateX(-50%); mix-blend-mode: screen; filter: blur(8px); pointer-events: none; } .hero-beam-ghost--1 { top: 22%; width: 60px; height: 60px; background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(212, 196, 255, 0.25) 50%, transparent 75%); animation: pebble-beam-ghost 5s ease-in-out infinite; } .hero-beam-ghost--2 { top: 42%; width: 90px; height: 90px; background: radial-gradient(circle, rgba(220, 200, 255, 0.45), rgba(167, 139, 250, 0.20) 50%, transparent 75%); animation: pebble-beam-ghost 5s ease-in-out infinite 0.4s; } .hero-beam-ghost--3 { top: 62%; width: 130px; height: 130px; background: radial-gradient(circle, rgba(255, 255, 255, 0.40), rgba(212, 196, 255, 0.18) 50%, transparent 75%); animation: pebble-beam-ghost 5s ease-in-out infinite 0.8s; } @keyframes pebble-beam-ghost { 0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(0.92); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.08); } } /* Layer 9 — envelope. Wide horizontal halo that wraps the dashboard top edge, finishing the "beam supercharging the product" effect. Sits BELOW the burst (further down in the container) so the bright burst hits the dashboard top + this softer wash extends the glow outward to the dashboard's left/right edges. */ .hero-beam-envelope { position: absolute; left: var(--beam-x); bottom: 80px; width: 1500px; height: 480px; transform: translateX(-50%); background: radial-gradient( ellipse 65% 35% at 50% 30%, rgba(255, 255, 255, 0.28) 0%, rgba(220, 200, 255, 0.22) 22%, rgba(167, 139, 250, 0.14) 48%, rgba(124, 92, 220, 0.06) 70%, transparent 85% ); filter: blur(40px); mix-blend-mode: screen; animation: pebble-beam-envelope 5s ease-in-out infinite; } @keyframes pebble-beam-envelope { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.03); } } /* Responsive: on phones, re-center the beam (no room for a left copy column + offset beam) and constrain layer widths so the shape still reads at narrow viewports. */ @media (max-width: 880px) { .hero { text-align: center; } .hero-copy { max-width: 640px; margin: 0 auto; text-align: center; } .hero h1 { margin-left: auto; margin-right: auto; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-form { margin-left: auto; margin-right: auto; } .hero-form-note { text-align: center; } .hero-meta { justify-content: center; } .hero-beam { --beam-x: 50%; inset: -80px 0 -40px 0; } .hero-beam-burst { width: 130%; } .hero-beam-envelope { width: 130%; } .dash-wrap::after { background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(212, 196, 255, 0.45) 30%, transparent 75%), radial-gradient(ellipse 80% 100% at 50% 50%, rgba(167, 139, 250, 0.22), transparent 70%); } } /* Accessibility — kill the animations for users who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .hero-beam-nebula, .hero-beam-halo-far, .hero-beam-halo-mid, .hero-beam-halo-near, .hero-beam-core, .hero-beam-burst, .hero-beam-ghost, .hero-beam-envelope { animation: none; } } /* ============================================================ ✨ DASHBOARD ENERGY WRAP — the beam-charged halo ---------------------------------------------------------- The beam (above) drops straight down. Where it hits the dashboard, that energy needs somewhere to GO — otherwise the beam reads as "passing through" instead of "charging it." So we wrap the dashboard frame in two layered halos: 1. .dash-wrap::after — a violet glow ring that hugs the frame edges, pulsing in lockstep with the beam (same 5s heartbeat). When the beam pumps, the dashboard "brightens from the inside". 2. .dash-wrap::before — the soft ambient violet wash behind the dashboard (defined earlier in this file). We extend its inset upward here so it visually catches the bloom coming down from the beam. The two halos are at different blurs/sizes so they don't compete: tight crisp rim on ::after, wide soft wash on ::before. ============================================================ */ .dash-wrap::after { content: ""; position: absolute; /* Slight negative inset = the halo extends just outside the browser frame, hugging it like rim-light. The opaque .browser sits on top at z-index 1, so we don't need to mask the center — only the corona around the edges shows through. */ inset: -6px; border-radius: 22px; /* Two-stage gradient: bright violet spot at the TOP-RIGHT corner (~64% horizontally, matching the beam's --beam-x offset), with a prismatic spectrum bleeding into the right edge — coral → pink → lavender — exactly like the Huly reference. The left side of the frame stays subtle so the headline + CTA next to the dashboard don't drown in glow. */ background: /* Bright top bloom where the beam meets the dashboard. */ radial-gradient(ellipse 50% 45% at 64% 0%, rgba(255, 255, 255, 0.65), rgba(212, 196, 255, 0.45) 30%, transparent 75%), /* Prismatic right-edge rim — three colour stops at the right side, masked into a vertical streak. */ radial-gradient(ellipse 25% 70% at 100% 50%, rgba(255, 138, 110, 0.45), transparent 65%), radial-gradient(ellipse 18% 50% at 100% 35%, rgba(245, 168, 197, 0.50), transparent 70%), radial-gradient(ellipse 18% 60% at 100% 75%, rgba(196, 165, 255, 0.55), transparent 70%), /* Wide ambient violet wash behind everything. */ radial-gradient(ellipse 80% 100% at 50% 50%, rgba(167, 139, 250, 0.20), transparent 70%); box-shadow: /* Stronger top-right glow (where the beam lands) than the rest. */ 20px 0 60px rgba(255, 138, 110, 0.20), 0 0 30px rgba(167, 139, 250, 0.40), 0 0 80px rgba(167, 139, 250, 0.28), 0 0 140px rgba(167, 139, 250, 0.16); filter: blur(3px); opacity: 0.92; z-index: 0; pointer-events: none; animation: pebble-dash-halo 5s ease-in-out infinite; } .dash-wrap .browser { position: relative; z-index: 1; } /* Synced to the beam's 5s heartbeat — when the beam pumps, the halo pumps with it, so the whole composition reads as one pulse. */ @keyframes pebble-dash-halo { 0%, 100% { opacity: 0.7; filter: blur(2.5px); box-shadow: 16px 0 50px rgba(255, 138, 110, 0.15), 0 0 24px rgba(167, 139, 250, 0.32), 0 0 60px rgba(167, 139, 250, 0.20), 0 0 110px rgba(167, 139, 250, 0.10); } 50% { opacity: 1; filter: blur(3.5px); box-shadow: 24px 0 80px rgba(255, 138, 110, 0.30), 0 0 40px rgba(212, 196, 255, 0.65), 0 0 100px rgba(167, 139, 250, 0.40), 0 0 180px rgba(167, 139, 250, 0.22); } } @media (prefers-reduced-motion: reduce) { .dash-wrap::after { animation: none; } } /* Light mode: tone the beam way down (it's a dark-mode-native effect) and lighten the prismatic edge so the whole hero doesn't feel washed-out on a pale background. Selectors updated for the new god-ray layer names. */ [data-theme="light"] .hero-beam-nebula { background: radial-gradient(ellipse 50% 60% at 64% 20%, rgba(135, 169, 255, 0.22), transparent 60%), radial-gradient(ellipse 70% 55% at 68% 70%, rgba(196, 165, 255, 0.18), transparent 65%); } [data-theme="light"] .hero-beam-halo-far { opacity: 0.30; } [data-theme="light"] .hero-beam-halo-mid { opacity: 0.40; } [data-theme="light"] .hero-beam-halo-near { opacity: 0.55; } [data-theme="light"] .hero-beam-veil { opacity: 0.30; } [data-theme="light"] .hero-beam-core { background: linear-gradient( to bottom, rgba(135, 169, 255, 0) 0%, rgba(135, 169, 255, 0.7) 20%, rgba(123, 100, 200, 0.65) 70%, rgba(135, 169, 255, 0) 100% ); box-shadow: 0 0 8px rgba(135, 169, 255, 0.7), 0 0 24px rgba(167, 139, 250, 0.5), 0 0 60px rgba(167, 139, 250, 0.3); } [data-theme="light"] .hero-beam-burst { opacity: 0.45; } [data-theme="light"] .hero-beam-ghost { opacity: 0.4; } [data-theme="light"] .hero-beam-envelope { opacity: 0.45; } [data-theme="light"] .dash-wrap::after { opacity: 0.55; } /* Retro theme: no beam at all — it would compete with the System-7 palette. Just hide the layers cleanly. */