/* preservemy.world - Hero A/B test, Variant B * Loaded on every page but only takes effect when carries the * `variant-b` class (added by hero-variant-b.js when ?variant=b is set). * Variant A (default) is untouched, so this file is inert otherwise. * * Variant B intent vs. Variant A: * - A: left-aligned editorial headline, two equal ghost CTAs. * - B: centered, tighter column with a solid accent primary CTA * ("Preserve a memory") + a quiet secondary link. Action-first. */ /* Center the scroll-track hero copy (the primary, first panel). */ body.variant-b .hero-door-panel.is-active { justify-content: center; text-align: center; } body.variant-b .hero-door-panel.is-active .hero-copy { width: min(760px, 100%); margin-inline: auto; } body.variant-b .hero-door-panel.is-active .hero-copy p { max-width: 560px; margin-inline: auto; } body.variant-b .hero-door-panel.is-active .hero-actions { justify-content: center; } /* Center the carousel first-slide copy too, so the opening frame matches. */ body.variant-b .hero-slide.is-active .hero-slide-copy { left: 50%; right: auto; transform: translateX(-50%); text-align: center; width: min(760px, calc(100% - var(--pad-x) * 2)); } body.variant-b .hero-slide.is-active .hero-slide-copy p { margin-inline: auto; } body.variant-b .hero-slide.is-active .hero-slide-copy .hero-actions { justify-content: center; } /* Solid accent primary CTA - the visual anchor of Variant B. */ body.variant-b .btn.variant-cta, .btn.variant-cta { background: var(--mint); color: var(--ink); border-color: var(--mint); font-weight: 500; } body.variant-b .btn.variant-cta:hover, .btn.variant-cta:hover { background: var(--white); color: var(--ink); border-color: var(--white); } /* Quiet secondary link (underlined, no box) sits under the primary CTA. */ body.variant-b .hero-actions .variant-link { align-self: center; min-height: auto; padding: 12px 4px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 4px; } body.variant-b .hero-actions .variant-link:hover { color: var(--white); background: transparent; } /* Small badge above the headline to signal the reframed pitch. */ body.variant-b .variant-badge { display: inline-block; margin: 0 0 18px; padding: 6px 12px; border: 1px solid rgba(143, 219, 187, 0.5); border-radius: 999px; color: var(--mint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } /* Tiny fixed A/B switcher so the toggle is discoverable + testable. * Neutral, bottom-left, out of the way of the scroll hint (which is centered). */ .variant-switch { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(7, 22, 28, 0.6); backdrop-filter: blur(6px); font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .variant-switch a { padding: 3px 8px; border-radius: 999px; color: inherit; } .variant-switch a.is-active { background: var(--mint); color: var(--ink); } @media (max-width: 720px) { .variant-switch { transform: scale(0.9); transform-origin: left bottom; } }