/* Eo landing system — per-page accent via --accent on . * Type: Fraunces (display serif) + Inter (UI/body), loaded in base template. * Structure: dark hero with accent glow -> light content -> dark closing panel. */ :root { --ink: #202128; --ink-soft: #5a5b66; --paper: #f7f6f2; --card: #ffffff; --line: #e7e4dd; --dark: #101217; --dark-2: #16181f; --dark-line: rgba(255, 255, 255, 0.09); --dark-text: rgba(255, 255, 255, 0.92); --dark-text-soft: rgba(255, 255, 255, 0.62); --radius: 16px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --display: "Fraunces", Georgia, "Times New Roman", serif; --shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 8px 24px -12px rgba(20, 20, 30, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.65; font-size: 16.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; } h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 0.6em; } h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; } a { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); } .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px; border: 1.5px solid transparent; padding: 0.75em 1.6em; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; text-decoration: none; display: inline-block; text-align: center; } .btn:hover { transform: translateY(-1.5px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 65%); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 30px -8px color-mix(in srgb, var(--accent) 80%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-hero-ghost { background: rgba(255,255,255,0.06); color: var(--dark-text); border-color: rgba(255,255,255,0.22); backdrop-filter: blur(4px); } .btn-hero-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); } .btn-small { padding: 0.55em 1.25em; font-size: 0.92rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 65%); color: #fff; } .btn-large { font-size: 1.08rem; padding: 0.9em 2.2em; } .btn-block { width: 100%; } .btn-text { background: none; color: var(--dark-text-soft); padding: 0.5em 0.9em; font-size: 0.95rem; } .btn-text:hover { color: #fff; transform: none; } /* ── Top bar (dark, matches hero) ────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--dark) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--dark-line); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: baseline; text-decoration: none; } .brand-mark { font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.03em; color: #fff; } .topnav { display: flex; align-items: center; gap: 8px; } /* ── Hero (dark with accent glow + grain) ────────────────── */ .hero { position: relative; background: radial-gradient(900px 480px at 12% -12%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 65%), radial-gradient(1000px 560px at 95% 108%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), linear-gradient(180deg, var(--dark), var(--dark-2)); color: var(--dark-text); padding: 92px 0 104px; overflow: hidden; } .hero::after { /* film grain */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: center; } .hero h1 { color: #fff; } .sub { font-size: 1.14rem; color: var(--dark-text-soft); margin: 1.2em 0 1.8em; max-width: 33em; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .chips { list-style: none; display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 30px; } .chips li { font-size: 0.88rem; font-weight: 500; color: var(--dark-text-soft); display: flex; align-items: center; gap: 8px; } .chips li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, #fff); flex-shrink: 0; } /* ── Demo card (the "product screenshot") ────────────────── */ .demo { perspective: 1200px; } .demo-card { background: rgba(255, 255, 255, 0.055); border: 1px solid var(--dark-line); border-radius: 20px; padding: 18px 18px 16px; backdrop-filter: blur(10px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.08) inset; transform: rotateY(-4deg) rotateX(1.5deg); display: flex; flex-direction: column; gap: 12px; } .demo-head { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--dark-line); } .demo-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); } .demo-title { margin-left: auto; margin-right: auto; transform: translateX(-16px); font-size: 0.82rem; font-weight: 600; color: var(--dark-text-soft); letter-spacing: 0.02em; } .demo-msg { display: flex; gap: 10px; } .demo-msg p { font-size: 0.92rem; line-height: 1.55; } .demo-user { justify-content: flex-end; } .demo-user p { background: rgba(255, 255, 255, 0.92); color: #1b1c22; border-radius: 16px 16px 4px 16px; padding: 10px 15px; max-width: 82%; } .demo-eo p { background: color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,0.04)); color: var(--dark-text); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 16px 16px 16px 4px; padding: 11px 15px; } .demo-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 0.85rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); color: #fff; margin-top: 2px; box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 80%, transparent); } .demo-status { display: flex; align-items: center; gap: 9px; margin-top: 2px; padding: 9px 14px; border: 1px solid var(--dark-line); border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 0.82rem; font-weight: 500; color: var(--dark-text-soft); letter-spacing: 0.01em; } .pulse { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } /* ── Sections (light) ────────────────────────────────────── */ section { scroll-margin-top: 76px; } .how { padding: 96px 0 20px; } .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; } .steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px 26px; box-shadow: var(--shadow-card); } .step-num { font-family: var(--display); font-weight: 600; font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 16px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--paper))); -webkit-background-clip: text; background-clip: text; color: transparent; } .steps h3 { margin-bottom: 8px; } .steps p { color: var(--ink-soft); font-size: 0.96rem; } /* ── Probes (tracked capability cards) ───────────────────── */ .probes { padding: 76px 0 88px; } .probe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; } details.probe, details.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-card); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } details.probe:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } details.probe[open], details.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--accent) 35%, rgba(20,20,30,0.2)); } details summary { cursor: pointer; font-weight: 600; font-size: 1.04rem; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.05rem; font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); transition: transform .18s ease; } details[open] summary::after { transform: rotate(45deg); } details p { margin-top: 12px; color: var(--ink-soft); font-size: 0.97rem; } /* ── Pricing ─────────────────────────────────────────────── */ .pricing { padding: 20px 0 88px; } .section-note { color: var(--ink-soft); margin: -0.2em 0 0; } .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-top: 38px; } .tier-grid-single { grid-template-columns: minmax(0, 440px); justify-content: center; } .tier { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); } .tier-featured { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 22px 48px -20px color-mix(in srgb, var(--accent) 50%, transparent); } .tier-badge { position: absolute; top: -12px; left: 26px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 12px; } .tier .price { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--accent); line-height: 1.25; } .tier p:not(.price) { color: var(--ink-soft); font-size: 0.95rem; flex-grow: 1; } /* ── FAQ ─────────────────────────────────────────────────── */ .faq { padding: 20px 0 96px; } .faq .wrap { max-width: 800px; } details.faq-item { margin-top: 14px; } .faq h2 { margin-bottom: 0.4em; } /* ── Final CTA (dark panel echoing the hero) ─────────────── */ .final-cta { padding: 0 0 96px; } .final-panel { position: relative; overflow: hidden; background: radial-gradient(720px 380px at 80% -30%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%), radial-gradient(600px 320px at 8% 130%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%), linear-gradient(180deg, var(--dark), var(--dark-2)); border-radius: 26px; padding: 72px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .final-panel h2 { color: #fff; margin: 0; } .final-sub { color: var(--dark-text-soft); font-size: 0.95rem; margin-bottom: 12px; } /* ── Modal ───────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(14, 15, 20, 0.6); backdrop-filter: blur(3px); } .modal-card { position: relative; background: var(--card); border-radius: 20px; width: min(450px, calc(100vw - 40px)); padding: 36px 32px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.45); } .modal-card h3 { font-family: var(--display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; } .modal-x { position: absolute; top: 14px; right: 18px; border: none; background: none; font-size: 1.6rem; color: var(--ink-soft); cursor: pointer; line-height: 1; } .modal-sub { color: var(--ink-soft); margin: 10px 0 20px; font-size: 0.97rem; } .modal label { display: block; font-weight: 600; font-size: 0.9rem; margin: 15px 0 6px; } .modal .optional { font-weight: 400; color: var(--ink-soft); } .modal input, .modal select { width: 100%; font: inherit; padding: 0.7em 0.95em; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; } .modal input:focus, .modal select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .modal form .btn { margin-top: 22px; } .fine-print { font-size: 0.8rem; color: var(--ink-soft); margin-top: 14px; text-align: center; } /* ── Homepage ────────────────────────────────────────────── */ .home-hero { text-align: center; padding: 110px 0 96px; } .home-hero .sub { margin-left: auto; margin-right: auto; } .home-products { padding: 92px 0 100px; text-align: center; } .home-products h2 { margin-bottom: 1.2em; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; text-align: left; } .product-card { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; } .product-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); } .product-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--accent) 45%, rgba(20,20,30,0.25)); } .product-glyph { display: block; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 18px; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); } .product-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; } .product-card p { color: var(--ink-soft); margin: 8px 0 16px; font-size: 0.95rem; } .card-link { color: var(--accent); font-weight: 600; font-size: 0.93rem; } .card-link .arrow { display: inline-block; transition: transform .18s ease; } .product-card:hover .arrow { transform: translateX(4px); } /* ── Legal pages ─────────────────────────────────────────── */ .legal-body { max-width: 720px; padding-top: 64px; padding-bottom: 96px; } .legal-body h1 { font-size: 2.3rem; } .legal-date { color: var(--ink-soft); margin: 10px 0 30px; font-size: 0.9rem; } .legal-body h2 { font-size: 1.3rem; margin: 1.8em 0 0.5em; } .legal-body ul { padding-left: 1.3em; } .legal-body li { margin-bottom: 0.5em; } /* ── Footer ──────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); padding: 34px 0; } .footer-inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .footer-brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--ink); } .site-footer nav { display: flex; gap: 20px; flex-grow: 1; } .site-footer a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; } .site-footer a:hover { color: var(--ink); } .footer-copy { color: var(--ink-soft); font-size: 0.84rem; } /* ── Scroll reveal ───────────────────────────────────────── */ /* Hidden initial state only when JS is running (.js on ) — without JS, content must simply be visible. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .pulse { animation: none; } html { scroll-behavior: auto; } } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 880px) { .hero { padding: 56px 0 68px; } .hero-grid { grid-template-columns: 1fr; gap: 44px; } .demo { max-width: 460px; } .demo-card { transform: none; } .steps, .tier-grid { grid-template-columns: 1fr; } .probe-grid { grid-template-columns: 1fr; } .final-panel { padding: 56px 24px; } /* Pricing/FAQ stay visible on phones — most ad traffic is mobile and those clicks are the intent signal this whole system exists to measure. */ .btn-text { padding: 0.5em 0.55em; font-size: 0.9rem; } .btn-small { padding: 0.55em 1em; } }