/* ============================================================================= LeadShield Filter — /filter/index.html Dark-Side (data-theme="dark" on ) — Cyan dominant ============================================================================= */ /* ----------------------------------------------------------------------------- 1. BASE & LAYOUT --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } main { display: block; } /* Dot-grid background — signature of the Dark-Side */ body { background-color: var(--bg); position: relative; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 26px 26px; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); position: relative; z-index: 1; } section { position: relative; padding-block: var(--section-y); z-index: 1; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } /* ----------------------------------------------------------------------------- 2. TYPOGRAPHY HELPERS --------------------------------------------------------------------------- */ .label { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); margin: 0; } .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 56ch; } .section-head--center { margin-inline: auto; text-align: center; max-width: 64ch; } .section-head__num { margin-bottom: var(--space-2); } .section-head__title { font-family: var(--font-display); /* Syne on dark */ font-weight: var(--fw-black); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; color: var(--text-primary); text-wrap: balance; } .section-head__sub { font-size: var(--fs-18); line-height: var(--lh-normal); color: var(--text-muted); margin-top: var(--space-3); max-width: 60ch; } .section-head--center .section-head__sub { margin-inline: auto; } /* ----------------------------------------------------------------------------- 3. BUTTONS & LINKS --------------------------------------------------------------------------- */ .btn { --btn-bg: var(--accent); --btn-fg: #000; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.95rem 1.5rem 0.95rem 1.75rem; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); letter-spacing: -0.01em; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); will-change: transform; } .btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.25), 0 8px 24px -8px rgba(0, 229, 255, 0.3); } .btn:active { transform: translateY(0) scale(0.985); } .btn__arrow { transition: transform var(--dur-base) var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(3px); } .btn--cyan { --btn-bg: var(--accent); --btn-fg: #000; } .btn--outline { --btn-bg: transparent; --btn-fg: var(--accent); border-color: var(--accent); } .btn--outline:hover { background: rgba(0, 229, 255, 0.08); } .btn--big { padding: 1.25rem 2rem 1.25rem 2.25rem; font-size: var(--fs-18); border-radius: var(--radius-md); } .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); } .cta-row--center { justify-content: center; gap: var(--space-3); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--accent-ink); /* #00E5FF on dark */ border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap var(--dur-base) var(--ease-out); } .link-arrow:hover { gap: 0.85rem; } /* ----------------------------------------------------------------------------- 4. HEADER / NAV (Dark variant) --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(120%) blur(12px); -webkit-backdrop-filter: saturate(120%) blur(12px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 72px; } .header__logo { display: inline-flex; align-items: center; } .header__logo img { height: 32px; width: auto; } .header__nav { display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center; } .nav-link { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-16); color: var(--text-primary); position: relative; padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-out); } .nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: currentColor; transition: right var(--dur-base) var(--ease-out); } .nav-link:hover::after { right: 0; } .nav-link[data-path="sites"] { color: rgba(255, 107, 74, 0.85); font-weight: var(--fw-bold); } .nav-link[data-path="filter"] { color: var(--accent); font-weight: var(--fw-bold); } .nav-link[data-path="sites"]:hover { color: var(--accent-coral); } .nav-link[data-path="filter"]:hover { color: #00E5FF; } .nav-link[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 1px; } .nav-link[aria-current="page"]::after { display: none; } .nav-link--cta { padding: 0.5rem 1rem; background: var(--accent); color: #000; border-radius: var(--radius-sm); font-weight: var(--fw-bold); } .nav-link--cta::after { display: none; } .nav-link--cta:hover { background: #1FCDE5; } .header__menu { display: none; width: 36px; height: 36px; border: 0; background: transparent; padding: 0; cursor: pointer; flex-direction: column; gap: 5px; justify-content: center; align-items: center; } .header__menu span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .header__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .header__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ----------------------------------------------------------------------------- 5. HERO (Filter — Cyan, full-height) --------------------------------------------------------------------------- */ .hero { min-height: 90vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding-block: clamp(5rem, 10vw, 9rem); } .hero__ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 900px 700px at 15% 30%, rgba(0, 229, 255, 0.08), transparent 60%), radial-gradient(ellipse 600px 500px at 80% 70%, rgba(0, 229, 255, 0.06), transparent 65%); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; width: 100%; } .hero__body { max-width: 40rem; } .hero__pre { color: var(--accent); margin-bottom: var(--space-3); opacity: 0.8; } .hero__h1 { font-family: var(--font-display); /* Syne on dark */ font-weight: var(--fw-black); font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: 1.0; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 var(--space-3); text-wrap: balance; } .hero__h1-line { display: block; } .hero__h1-line--cyan { color: var(--accent); } .hero__sub { font-size: var(--fs-18); line-height: var(--lh-normal); color: var(--text-muted); max-width: 34rem; margin: 0; } /* Filter node visual — pipeline in hero */ .filter-hero-visual { display: flex; flex-direction: column; gap: 0; align-items: stretch; } .fhv-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); } .fhv-card__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); } .fhv-row { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); padding: 8px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); transition: border-color var(--dur-base) var(--ease-out); } .fhv-row--pass { background: rgba(0, 229, 255, 0.06); border-color: rgba(0, 229, 255, 0.18); } .fhv-row--reject { opacity: 0.4; } .fhv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fhv-dot--in { background: var(--text-muted); } .fhv-dot--pass { background: #4ECC57; box-shadow: 0 0 6px rgba(78, 204, 87, 0.5); } .fhv-dot--reject { background: rgba(255,255,255,0.2); } .fhv-dot--out { background: var(--accent); box-shadow: 0 0 8px rgba(0, 229, 255, 0.6); } .fhv-connector { display: flex; justify-content: center; align-items: center; padding: 4px 0; } .fhv-connector svg { color: var(--accent); opacity: 0.5; } .fhv-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: rgba(0, 229, 255, 0.06); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); } .fhv-result__text { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: var(--fw-medium); } .fhv-result__stat { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; } /* ----------------------------------------------------------------------------- 6. PROBLEM SECTION --------------------------------------------------------------------------- */ .problem { border-top: 1px solid var(--border); } .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: clamp(3rem, 6vw, 5rem); } .problem-card { padding: var(--space-4) var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: var(--space-2); } .problem-card__num { font-family: var(--font-mono); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--fw-bold); color: var(--text-faint); letter-spacing: -0.04em; line-height: 1; } .problem-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-primary); margin: 0; } .problem-card__body { color: var(--text-muted); font-size: var(--fs-16); line-height: var(--lh-relaxed); margin: 0; } /* ----------------------------------------------------------------------------- 7. HOW IT WORKS (3-Stufen Pipeline) --------------------------------------------------------------------------- */ .how { border-top: 1px solid var(--border); } .pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-2); align-items: start; margin-top: clamp(3rem, 6vw, 5rem); } .pipeline-step { position: relative; background: linear-gradient(180deg, rgba(15, 22, 35, 0.55), rgba(8, 14, 22, 0.45)) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 14px !important; padding: 22px 26px !important; min-height: 120px; display: flex !important; flex-direction: column !important; gap: 10px !important; isolation: isolate; overflow: hidden !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; transition: border-color 0.32s var(--ease-out), transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out) !important; } /* soft cyan glow from center on hover */ .pipeline-step::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(56, 201, 242, 0.08), transparent 65%); opacity: 0; transition: opacity 0.32s ease-out; } .pipeline-step:hover { border-color: rgba(56, 201, 242, 0.55) !important; box-shadow: 0 6px 28px rgba(56, 201, 242, 0.18), 0 0 0 1px rgba(56, 201, 242, 0.25) !important; transform: translateY(-2px) !important; } .pipeline-step:hover::before { opacity: 1; } .pipeline-step__num { font-family: 'DM Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--soc-cyan) !important; font-weight: var(--fw-bold); opacity: 1 !important; position: relative; z-index: 3; text-align: center; } .pipeline-step__title { font-family: var(--soc-display) !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: 0.005em !important; color: #fff !important; margin: 0; position: relative; z-index: 3; transition: color 0.28s, text-shadow 0.28s; } .pipeline-step__body { color: rgba(255, 255, 255, 0.65) !important; font-size: var(--fs-16); line-height: var(--lh-relaxed); margin: 0; position: relative; z-index: 3; } .pipeline-step__detail { font-family: 'DM Mono', monospace !important; font-size: 10.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.55) !important; opacity: 1 !important; margin-top: var(--space-1); position: relative; z-index: 3; transition: color 0.28s; } .pipeline-step:hover .pipeline-step__title { color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); } .pipeline-step:hover .pipeline-step__detail { color: rgba(255, 255, 255, 0.85) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); } .pipeline-arrow { display: flex; align-items: center; justify-content: center; align-self: center; color: var(--accent); opacity: 1; flex-shrink: 0; } .pipeline-arrow svg { filter: drop-shadow(0 0 6px rgba(56, 201, 242, 0.6)) drop-shadow(0 0 14px rgba(56, 201, 242, 0.35)); } /* ----------------------------------------------------------------------------- 8. INTEGRATIONS --------------------------------------------------------------------------- */ .integrations { border-top: 1px solid var(--border); } .integrations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); margin-top: clamp(3rem, 6vw, 5rem); } .integration-item { position: relative; background: linear-gradient(180deg, rgba(15, 22, 35, 0.55), rgba(8, 14, 22, 0.45)) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 14px !important; padding: 22px 26px !important; min-height: 120px; display: flex !important; flex-direction: column !important; gap: 10px !important; isolation: isolate; overflow: hidden !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; transition: border-color 0.32s var(--ease-out), transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out) !important; } /* soft cyan glow from center on hover */ .integration-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(56, 201, 242, 0.08), transparent 65%); opacity: 0; transition: opacity 0.32s ease-out; } .integration-item:hover { border-color: rgba(56, 201, 242, 0.55) !important; box-shadow: 0 6px 28px rgba(56, 201, 242, 0.18), 0 0 0 1px rgba(56, 201, 242, 0.25) !important; transform: translateY(-2px) !important; } .integration-item:hover::before { opacity: 1; } .integration-item__name { font-family: var(--soc-display) !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: 0.005em !important; color: #fff !important; position: relative; z-index: 3; transition: color 0.28s, text-shadow 0.28s; } .integration-item__sub { font-family: 'DM Mono', monospace !important; font-size: 10.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.55) !important; position: relative; z-index: 3; transition: color 0.28s; } .integration-item:hover .integration-item__name { color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); } .integration-item:hover .integration-item__sub { color: rgba(255, 255, 255, 0.85) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); } /* ─── INTEGRATION ANIMATIONS (per tool) ─── */ .integration-anim { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.28s ease-out; } .integration-item:hover .integration-anim { opacity: 1; } /* Soft vignette behind text so labels remain legible */ .integration-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, 0.0) 0%, rgba(5, 8, 13, 0.65) 70%, rgba(5, 8, 13, 0.85) 100%); opacity: 0; transition: opacity 0.28s ease-out; pointer-events: none; z-index: 2; } .integration-item:hover::after { opacity: 1; } /* ── GOOGLE — Four-color bars slide in from corners (Google brand colors) ── */ .int-goog-bar { position: absolute; width: 60px; height: 8px; border-radius: 4px; opacity: 0; } .int-goog-bar--1 { background: #4285F4; top: 12px; left: -70px; } .int-goog-bar--2 { background: #EA4335; top: 32px; right: -70px; } .int-goog-bar--3 { background: #FBBC04; bottom: 32px; left: -70px; } .int-goog-bar--4 { background: #34A853; bottom: 12px; right: -70px; } [data-integration="google"]:hover .int-goog-bar { animation: goog-slide 0.6s cubic-bezier(0.18, 0.9, 0.3, 1) forwards; } [data-integration="google"]:hover .int-goog-bar--1 { animation-delay: 0.0s; --tx: 82px; } [data-integration="google"]:hover .int-goog-bar--2 { animation-delay: 0.08s; --tx: -82px; } [data-integration="google"]:hover .int-goog-bar--3 { animation-delay: 0.16s; --tx: 82px; } [data-integration="google"]:hover .int-goog-bar--4 { animation-delay: 0.24s; --tx: -82px; } @keyframes goog-slide { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; transform: translateX(var(--tx)); } } /* ── MICROSOFT — Four squares assemble (Windows logo colors) ── */ .int-ms-square { position: absolute; width: 28px; height: 28px; opacity: 0; } .int-ms-square--1 { background: #F25022; top: 50%; left: 50%; transform: translate(-50%, -50%) translate(-80px, -80px) scale(0.5); } .int-ms-square--2 { background: #7FBA00; top: 50%; left: 50%; transform: translate(-50%, -50%) translate(80px, -80px) scale(0.5); } .int-ms-square--3 { background: #00A4EF; top: 50%; left: 50%; transform: translate(-50%, -50%) translate(-80px, 80px) scale(0.5); } .int-ms-square--4 { background: #FFB900; top: 50%; left: 50%; transform: translate(-50%, -50%) translate(80px, 80px) scale(0.5); } [data-integration="microsoft"]:hover .int-ms-square { animation: ms-assemble 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; } [data-integration="microsoft"]:hover .int-ms-square--1 { animation-delay: 0.0s; } [data-integration="microsoft"]:hover .int-ms-square--2 { animation-delay: 0.08s; } [data-integration="microsoft"]:hover .int-ms-square--3 { animation-delay: 0.16s; } [data-integration="microsoft"]:hover .int-ms-square--4 { animation-delay: 0.24s; } @keyframes ms-assemble { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) translate(-18px, -18px) scale(1); } } [data-integration="microsoft"]:hover .int-ms-square--2 { animation-name: ms-assemble-2; } @keyframes ms-assemble-2 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) translate(18px, -18px) scale(1); } } [data-integration="microsoft"]:hover .int-ms-square--3 { animation-name: ms-assemble-3; } @keyframes ms-assemble-3 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) translate(-18px, 18px) scale(1); } } [data-integration="microsoft"]:hover .int-ms-square--4 { animation-name: ms-assemble-4; } @keyframes ms-assemble-4 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) translate(18px, 18px) scale(1); } } /* ── SLACK — Chat messages pop in from bottom (Slack purple #4A154B) ── */ .int-slack-msg { position: absolute; left: 16px; width: 65%; height: 14px; background: #4A154B; border-radius: 7px; box-shadow: 0 2px 8px rgba(74, 21, 75, 0.6); opacity: 0; transform: translateY(20px); } .int-slack-msg--1 { bottom: 48px; } .int-slack-msg--2 { bottom: 28px; width: 52%; } .int-slack-msg--3 { bottom: 8px; width: 58%; } [data-integration="slack"]:hover .int-slack-msg { animation: slack-pop 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) forwards; } [data-integration="slack"]:hover .int-slack-msg--1 { animation-delay: 0.0s; } [data-integration="slack"]:hover .int-slack-msg--2 { animation-delay: 0.12s; } [data-integration="slack"]:hover .int-slack-msg--3 { animation-delay: 0.24s; } @keyframes slack-pop { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* ── HUBSPOT — Spinning gear with orbiting dots (HubSpot orange #FF7A59) ── */ .int-hub-gear { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; color: #FF7A59; transform: translate(-50%, -50%); } [data-integration="hubspot"]:hover .int-hub-gear { animation: hub-spin 2.4s linear infinite; } @keyframes hub-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .int-hub-dot { position: absolute; width: 8px; height: 8px; background: #FF7A59; border-radius: 50%; opacity: 0; } .int-hub-dot--1 { top: 50%; left: 50%; margin: -4px 0 0 -4px; } [data-integration="hubspot"]:hover .int-hub-dot { animation: hub-orbit 1.6s ease-in-out infinite; } [data-integration="hubspot"]:hover .int-hub-dot--1 { animation-delay: 0.0s; } [data-integration="hubspot"]:hover .int-hub-dot--2 { animation-delay: 0.53s; } [data-integration="hubspot"]:hover .int-hub-dot--3 { animation-delay: 1.06s; } @keyframes hub-orbit { 0%, 100% { opacity: 0; transform: translate(0, 0); } 10%, 90% { opacity: 1; } 50% { transform: translate(40px, -25px); } } /* ── PIPEDRIVE — Pipeline segments fill, ball rolls through (Pipedrive green #00A6A0) ── */ .int-pipe-seg { position: absolute; top: 50%; height: 12px; background: #00A6A0; border-radius: 6px; transform: translateY(-50%); width: 0; opacity: 0; } .int-pipe-seg--1 { left: 12px; } .int-pipe-seg--2 { left: 50%; transform: translate(-50%, -50%); } .int-pipe-seg--3 { right: 12px; } [data-integration="pipedrive"]:hover .int-pipe-seg { animation: pipe-fill 0.5s ease-out forwards; } [data-integration="pipedrive"]:hover .int-pipe-seg--1 { animation-delay: 0.0s; } [data-integration="pipedrive"]:hover .int-pipe-seg--2 { animation-delay: 0.2s; } [data-integration="pipedrive"]:hover .int-pipe-seg--3 { animation-delay: 0.4s; } @keyframes pipe-fill { 0% { width: 0; opacity: 0; } 20% { opacity: 1; } 100% { width: 26%; opacity: 1; } } .int-pipe-ball { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; background: #00A6A0; border-radius: 50%; box-shadow: 0 0 12px #00A6A0; transform: translate(-20px, -50%); opacity: 0; } [data-integration="pipedrive"]:hover .int-pipe-ball { animation: pipe-roll 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards; } @keyframes pipe-roll { 0% { opacity: 0; left: 0; } 5% { opacity: 1; } 100% { opacity: 1; left: calc(100% - 14px); } } /* ── WEBHOOK — Curly brackets fade in, code lines type in (Generic cyan) ── */ .int-hook-bracket { position: absolute; top: 50%; width: 16px; height: 70%; color: #38C9F2; transform: translateY(-50%); opacity: 0; } .int-hook-bracket--left { left: 14px; } .int-hook-bracket--right { right: 14px; } [data-integration="webhook"]:hover .int-hook-bracket { animation: hook-fade 0.4s ease-out forwards; } [data-integration="webhook"]:hover .int-hook-bracket--left { animation-delay: 0.0s; } [data-integration="webhook"]:hover .int-hook-bracket--right { animation-delay: 0.1s; } @keyframes hook-fade { to { opacity: 0.85; } } .int-hook-code { position: absolute; left: 38px; height: 3px; background: #38C9F2; border-radius: 2px; width: 0; opacity: 0; } .int-hook-code--1 { top: 35%; } .int-hook-code--2 { top: 50%; } .int-hook-code--3 { top: 65%; } [data-integration="webhook"]:hover .int-hook-code { animation: hook-type 0.5s ease-out forwards; } [data-integration="webhook"]:hover .int-hook-code--1 { animation-delay: 0.25s; } [data-integration="webhook"]:hover .int-hook-code--2 { animation-delay: 0.35s; } [data-integration="webhook"]:hover .int-hook-code--3 { animation-delay: 0.45s; } @keyframes hook-type { 0% { width: 0; opacity: 0; } 10% { opacity: 0.9; } 100% { width: calc(100% - 76px); opacity: 0.9; } } /* ----------------------------------------------------------------------------- 9. PRICING --------------------------------------------------------------------------- */ .pricing { border-top: 1px solid var(--border); isolation: isolate; position: relative; } .pricing::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(0, 229, 255, 0.04), transparent 70%); } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: 720px; margin-inline: auto; margin-top: clamp(3rem, 6vw, 5rem); } .filter-price-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; } .filter-price-card--main { border-color: rgba(0, 229, 255, 0.25); box-shadow: 0 0 32px -8px rgba(0, 229, 255, 0.12); } .filter-price-card__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border); } .filter-price-card__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); opacity: 0.8; margin-bottom: var(--space-1); } .filter-price-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); letter-spacing: var(--ls-snug); color: var(--text-primary); margin: 0; } .filter-price-card__price { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--text-muted); margin-top: var(--space-2); } .filter-price-card__price strong { font-size: var(--fs-32); font-family: var(--font-display); font-weight: var(--fw-black); letter-spacing: -0.03em; color: var(--text-primary); } .filter-price-card__body { padding: var(--space-3) var(--space-4) var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .price-feature { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-16); color: var(--text-muted); line-height: var(--lh-relaxed); } .price-feature::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); flex-shrink: 0; margin-top: 0.55em; opacity: 0.7; } /* ----------------------------------------------------------------------------- 10. CTA CLOSER --------------------------------------------------------------------------- */ .closer { position: relative; isolation: isolate; text-align: center; padding-block: var(--section-y-lg); overflow: hidden; border-top: 1px solid var(--border); } .closer__ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 800px 600px at 50% 50%, rgba(0, 229, 255, 0.06), transparent 65%); } .closer__pre { margin-bottom: var(--space-3); } .closer__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.5rem, 6vw, 5rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-primary); margin: 0; text-wrap: balance; } .closer__sub { font-size: var(--fs-18); color: var(--text-muted); margin-top: var(--space-3); max-width: 52ch; margin-inline: auto; line-height: var(--lh-normal); } .closer__email { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-14); color: var(--accent); margin-top: var(--space-4); opacity: 0.7; letter-spacing: 0.04em; } .closer__email:hover { opacity: 1; } /* ----------------------------------------------------------------------------- 11. FOOTER (Dark variant — uses bg-raised, not text-primary) --------------------------------------------------------------------------- */ .site-footer { background: var(--bg-raised); border-top: 1px solid var(--border); color: var(--text-muted); padding-block: var(--space-12) var(--space-6); position: relative; z-index: 1; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border); } .footer__logo { width: 160px; height: auto; margin-bottom: var(--space-3); /* dark variant logo — no invert needed */ } .footer__tag { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--text-primary); font-size: var(--fs-18); margin: 0 0 var(--space-3); max-width: 22rem; line-height: var(--lh-snug); } .footer__address { font-style: normal; font-size: var(--fs-14); color: var(--text-faint); line-height: var(--lh-relaxed); } .footer__head { color: var(--text-faint); margin-bottom: var(--space-3); } .footer__list { display: flex; flex-direction: column; gap: 0.75rem; } .footer__list a { color: var(--text-muted); font-size: var(--fs-16); transition: color var(--dur-base) var(--ease-out); } .footer__list a:hover { color: var(--accent); } .footer__micro { padding-top: var(--space-4); color: var(--text-faint); font-size: 11px; text-align: center; font-family: var(--font-mono); letter-spacing: var(--ls-wider); text-transform: uppercase; } /* ----------------------------------------------------------------------------- 12. REVEAL ANIMATIONS + BRIDGE OVERLAY --------------------------------------------------------------------------- */ .bridge-overlay { position: fixed; inset: 0; background: #090909; z-index: var(--z-modal); opacity: 0; pointer-events: none; display: none; } body.menu-open { overflow: hidden; } .js-on [data-anim="reveal-up"] { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--index, 0) * 90ms); } .js-on [data-anim="reveal-up"].is-revealed { opacity: 1; transform: translateY(0); } /* ----------------------------------------------------------------------------- 13. RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); } .pipeline { grid-template-columns: 1fr; } .pipeline-arrow { transform: rotate(90deg); padding-top: 0; padding-inline: 1rem; } .problem-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .header__nav { display: none; } .header__menu { display: inline-flex; } .header__nav--open { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--bg-surface); border-top: 1px solid var(--border); padding: var(--space-4) var(--container-pad) var(--space-6); z-index: var(--z-overlay); overflow-y: auto; animation: menuSlide var(--dur-base) var(--ease-out) both; } @keyframes menuSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .header__nav--open .nav-link { font-size: var(--fs-24); font-weight: var(--fw-bold); padding: 0.9rem 0; width: 100%; border-bottom: 1px solid var(--border); } .header__nav--open .nav-link:first-child { border-top: 1px solid var(--border); } .header__nav--open .nav-link--cta { margin-top: var(--space-4); width: auto; background: var(--accent); color: #000; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border: none; font-size: var(--fs-18); } .problem-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .integrations-grid { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } } @media (max-width: 420px) { .hero__h1 { font-size: clamp(2.5rem, 11vw, 4rem); } .integrations-grid { grid-template-columns: 1fr; } }