/* ═══════════════════════════════════════════════════════════════════════ Buildhaus v4 · cookie banner + sticky CTA + form consent Injected via v4-telemetry.js. Loaded once per page. ═══════════════════════════════════════════════════════════════════════ */ /* ─── Cookie banner ─────────────────────────────────────────────────── */ .bh-cookie-banner { position: fixed; left: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 60; background: #0E1714; color: #FAFAF8; border-radius: 14px; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; box-shadow: 0 20px 60px -16px rgba(0,0,0,0.5); opacity: 0; transform: translateY(20px); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-width: 900px; margin: 0 auto; } .bh-cookie-banner.is-visible { opacity: 1; transform: translateY(0); } .bh-cookie-text { font-family: "Inter", -apple-system, system-ui, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.5; flex: 1 1 320px; } .bh-cookie-text a { color: #FBDC11; text-decoration: none; border-bottom: 1px solid rgba(251, 220, 17, 0.4); } .bh-cookie-text a:hover { border-bottom-color: #FBDC11; } .bh-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; } .bh-cookie-btn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; padding: 10px 16px; border-radius: 999px; background: #FBDC11; color: #111C18; border: 0; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .bh-cookie-btn:hover { transform: translateY(-1px); } .bh-cookie-btn-secondary { background: transparent; color: rgba(250, 250, 248, 0.7); border: 1px solid rgba(250, 250, 248, 0.3); } .bh-cookie-btn-secondary:hover { color: #FAFAF8; border-color: rgba(250, 250, 248, 0.6); } /* ─── Sticky CTA (long-scroll project hook) ─────────────────────────── */ /* Injected by v4-telemetry.js as a direct child of , so no ancestor stacking context (hero, work cards, cream band, sections, the depth canvas) can trap it. The z-index is pushed to the top of the stack so the widget ALWAYS sits in front of everything on the page until the visitor dismisses it with the x. 2147483647 is the max 32-bit int, the practical ceiling, so nothing can render above it. */ .bh-sticky-cta { position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 2147483647; background: #FAFAF8; color: #111C18; border-radius: 16px; padding: 20px 22px 20px 26px; display: flex; align-items: center; gap: 28px; box-shadow: 0 16px 48px -12px rgba(17, 28, 24, 0.28), 0 0 0 1px rgba(17, 28, 24, 0.08); opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; max-width: min(480px, calc(100vw - 32px)); } .bh-sticky-cta.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .bh-sticky-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .bh-sticky-eyebrow { font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: #111C18; white-space: nowrap; } .bh-sticky-meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17, 28, 24, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bh-sticky-primary { display: inline-flex; align-items: center; gap: 8px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: -0.005em; color: #FAFAF8; background: #111C18; text-decoration: none; padding: 11px 18px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; } .bh-sticky-primary:hover { background: #314095; transform: translateY(-1px); } .bh-sticky-arrow { transition: transform 0.2s ease; } .bh-sticky-primary:hover .bh-sticky-arrow { transform: translateX(3px); } /* Close moved to the top-right corner of the card so it's not jammed into the action row. Smaller, lighter, gets out of the way. */ .bh-sticky-close { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: rgba(17, 28, 24, 0.35); font-size: 16px; line-height: 1; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; } .bh-sticky-close:hover { color: #111C18; background: rgba(17, 28, 24, 0.05); } /* Mobile (<=760px): the floating sticky card is intentionally suppressed. The "always-reachable contact" requirement is still met on phones, just not by a floating widget: the nav drawer carries "Let's Talk" (-> /contact) and the in-flow pivot footer carries "Start a project". Both are persistent and tappable, so the call is never out of reach. A floating card on a narrow viewport only covers the content the user is reading, so it is removed here by design (pre-existing behaviour, not a regression of the clip/sticky/seam work). Desktop keeps the floating widget at the top of the z-stack. */ @media (max-width: 760px) { .bh-sticky-cta { display: none !important; } } /* ─── Form messages + consent line ──────────────────────────────────── */ .form-message { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 400; line-height: 1.5; } .form-message[data-kind="success"] { background: rgba(251, 220, 17, 0.15); color: #111C18; border: 1px solid rgba(251, 220, 17, 0.6); } .form-message[data-kind="error"] { background: rgba(220, 50, 50, 0.08); color: #111C18; border: 1px solid rgba(220, 50, 50, 0.35); } .consent-line { display: flex; gap: 10px; align-items: flex-start; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: rgba(17, 28, 24, 0.65); margin-top: 16px; } .consent-line input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; accent-color: #111C18; } .consent-line a { color: #111C18; text-decoration: none; border-bottom: 1px solid rgba(17, 28, 24, 0.4); } .consent-line a:hover { border-bottom-color: #111C18; } @media (prefers-reduced-motion: reduce) { .bh-cookie-banner, .bh-sticky-cta { transition: opacity 0.2s ease; transform: none; } .bh-sticky-cta.is-visible, .bh-cookie-banner.is-visible { transform: none; } }