/* ============================================================ DSM AI Lab — Hero A/B experiment (variant B) ------------------------------------------------------------ Activated only when is set by ab-variant.js (URL ?variant=b, or the floating A/B toggle). All rules are scoped under [data-ab="b"] so variant A is never affected. ============================================================ */ /* ── Floating A/B toggle (present in both variants) ── */ .ab-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line, #18181b); border-radius: 9999px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); box-shadow: 4px 4px 0 rgba(0, 0, 0, .06); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; user-select: none; } .ab-toggle span.ab-toggle-label { display: inline-flex; align-items: center; padding: .4rem .7rem; color: #71717a; border-right: 1px solid rgba(0, 0, 0, .08); } .ab-toggle a { display: inline-flex; align-items: center; padding: .4rem .85rem; color: #71717a; text-decoration: none; transition: background .2s, color .2s; } .ab-toggle a[aria-current="true"] { background: #09090b; color: #fff; } .ab-toggle a:not([aria-current="true"]):hover { color: #09090b; } /* ── Variant B hero block (injected by JS) ── */ .ab-b-hero { width: 100%; display: none; /* shown only under [data-ab="b"] */ flex-direction: column; align-items: flex-start; text-align: left; padding-bottom: 2.5rem; margin-bottom: 3rem; border-bottom: 1px solid #18181b; } :root[data-ab="b"] .ab-b-hero { display: flex; } /* Hide the original (variant A) header when B is active */ :root[data-ab="b"] [data-ab-header] { display: none !important; } .ab-b-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: #71717a; display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; } .ab-b-eyebrow::before { content: ""; width: 26px; height: 1px; background: #18181b; display: inline-block; } .ab-b-headline { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .96; letter-spacing: -.02em; font-weight: 500; color: #09090b; margin: 0 0 1.4rem; max-width: 15ch; } .ab-b-headline em { font-style: normal; color: #c0504d; /* --dsm-red, used sparingly for the accent word */ } .ab-b-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 300; line-height: 1.6; color: #52525b; max-width: 46ch; margin: 0 0 2.2rem; } .ab-b-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .ab-b-cta { display: inline-flex; align-items: center; gap: .5rem; font-family: 'JetBrains Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; padding: .85rem 1.6rem; border: 1px solid #18181b; border-radius: 9999px; transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s; } .ab-b-cta-primary { background: #09090b; color: #fafafa; box-shadow: 4px 4px 0 rgba(0, 0, 0, .08); } .ab-b-cta-primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(0, 0, 0, .12); } .ab-b-cta-secondary { background: transparent; color: #09090b; } .ab-b-cta-secondary:hover { background: rgba(0, 0, 0, .04); } .ab-b-metric { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: #a1a1aa; text-transform: uppercase; text-align: right; line-height: 1.5; } .ab-b-metric b { display: block; font-size: 15px; font-weight: 500; color: #09090b; letter-spacing: 0; } @media (max-width: 767px) { .ab-b-metric { display: none; } .ab-b-cta { width: 100%; justify-content: center; } .ab-toggle { bottom: 12px; right: 12px; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .ab-b-cta, .ab-toggle a { transition: none; } .ab-b-cta-primary:hover { transform: none; } }