/* ========================================================================== Compass lead magnet — interactive "try Compass" overlay experience. Ported from the finished React/Tailwind prototype to the site's native stack (Eleventy + vanilla CSS). All styles are scoped under .clm so they never collide with application.css. Design tokens come straight from the build brief: enterprise-warm-neutral surface, ink text, Voxpopme purple as ACCENT ONLY, green for confirmations. Mobile fixes: Full-width viewport constraint, flex-shrink on text elements, explicit width+box-sizing on all container sections. ========================================================================== */ .clm { /* Primary palette */ --ink: #0F172A; --ink-slate: #1E293B; --surface: #FAFAF9; --surface-2: #F4F4F5; --border: #E7E5E4; --border-soft: #D6D3D1; /* Text */ --text-1: #0F172A; --text-2: #334155; --text-3: #475569; --text-4: #64748B; --text-mute: #94A3B8; /* Voxpopme brand — accent only */ --purple: #95569E; --purple-deep: #341C4C; --purple-darker:#2A1640; --purple-tint: #F4F0F8; --purple-lav: #D4B5DC; /* Green — confirmations / pro tips */ --green: #58B999; --green-deep: #3F8E72; --green-tint: #F0FAF6; --green-soft: #D6F0E4; position: relative; font-family: "Poppins", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } .clm *, .clm *::before, .clm *::after { box-sizing: border-box; } /* ── Overlay shell ──────────────────────────────────────────────────────── */ /* .siteBody has `contain: paint` which makes it a containing block for any position:fixed descendant — trapping the overlay inside the content box instead of the viewport. Remove it unconditionally for any page that loads this CSS. `:has()` is not supported on all mobile browsers so we can't rely on the conditional selector alone. This file only loads on pages that explicitly include the overlay, so the override is safe. */ .siteBody { contain: none; } .clm-overlay { position: fixed; /* contain:none is removed from .siteBody above and JS reparents the overlay to , so inset:0 pins to the viewport. Avoid 100vw — it includes the scrollbar width and can exceed the visible viewport, causing horizontal scroll on some browsers. */ inset: 0; /* .siteWrapper has position:relative + z-index:9999999, creating a stacking context that paints above anything below that value. Use 10000000 to clear it. */ z-index: 10000000; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: #FAFAF9; display: block; } .clm-overlay[hidden] { display: none; } /* Never let inner content force horizontal scroll. */ .clm { width: 100%; max-width: 100%; overflow-x: hidden; } .clm-overlay__close { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid var(--border); background: #fff; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } .clm-overlay__close:hover { opacity: 0.85; } /* ── Layout primitives ──────────────────────────────────────────────────── */ .clm-main { max-width: 1152px; /* max-w-6xl */ margin: 0 auto; padding: 48px 24px; } @media (min-width: 768px) { .clm-main { padding: 80px 48px; } } .clm [hidden] { display: none !important; } /* ── Top nav ────────────────────────────────────────────────────────────── */ .clm-nav { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); max-width: 1152px; margin: 0 auto; } @media (min-width: 768px) { .clm-nav { padding: 20px 48px; } } .clm-nav__brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; cursor: pointer; } .clm-nav__brand:hover { opacity: 0.8; } .clm-nav__brand img { height: 24px; width: auto; } .clm-nav__cta { font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 8px; background: var(--ink); color: #fff; border: 0; cursor: pointer; margin-left: auto; } .clm-nav__cta:hover { opacity: 0.9; } /* ── Generic bits ───────────────────────────────────────────────────────── */ .clm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 9999px; border: 1px solid var(--border); background: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 28px; } .clm-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--green); } .clm-dot--live { animation: clm-pulse 2s ease-in-out infinite; } .clm-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); margin: 0 0 12px; } .clm-icon { width: 1em; height: 1em; flex-shrink: 0; } /* ── Step 1: hero + form ────────────────────────────────────────────────── */ .clm-hero { display: flex; justify-content: center; gap: 40px; } .clm-h1 { font-weight: 800; /* Sized so the longest line ("Be the person") fits the hero column without wrapping at every desktop width down to the 768px breakpoint. */ font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 28px; } .clm-h1 em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; color: var(--purple); } /* Mobile: spans flow inline and wrap naturally (the trailing space inside each span keeps words separated). Desktop: each span becomes its own non-wrapping line, producing exactly three lines. */ .clm-h1__line { display: inline; } @media (min-width: 768px) { .clm-h1__line { display: block; white-space: nowrap; } } .clm-lead { font-size: 20px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; } .clm-sub { font-size: 16px; line-height: 1.6; color: var(--text-4); margin: 0 0 32px; } .clm-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14px; color: var(--text-3); } .clm-trust__item { display: flex; align-items: center; gap: 8px; } .clm-trust__item .clm-icon { color: var(--green); width: 16px; height: 16px; } /* Purple form card — the ONE full-saturation brand moment */ .clm-card { position: relative; overflow: hidden; border-radius: 16px; padding: 32px; background: linear-gradient(155deg, #4A2A6B 0%, #341C4C 55%, #2A1640 100%); box-shadow: 0 30px 80px -20px rgba(52, 28, 76, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06) inset; } @media (min-width: 768px) { .clm-card { padding: 36px; } } .clm-card__glow { position: absolute; top: -80px; right: -80px; width: 256px; height: 256px; border-radius: 9999px; pointer-events: none; background: radial-gradient(circle, rgba(149, 86, 158, 0.5) 0%, transparent 70%); } .clm-card__inner { position: relative; } .clm-card__step { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 14px; } .clm-card__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple-lav); } .clm-card h2 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 6px; } .clm-card__sub { font-size: 14px; color: rgba(255,255,255,0.65); margin: 0 0 28px; } .clm-fields { display: flex; flex-direction: column; gap: 16px; } .clm-field__label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.06em; text-transform: uppercase; } .clm-field--dark .clm-field__label { color: rgba(255,255,255,0.75); } /* Work-email validation message — light red that reads on the dark purple card */ .clm-field__error { font-size: 12px; line-height: 1.4; margin: 8px 0 0; color: #FCA5A5; } .clm-input, .clm-select { width: 100%; padding: 12px 14px; border-radius: 8px; font-size: 14px; font-family: inherit; transition: border-color 0.15s; border: 1px solid; } .clm-input:focus, .clm-select:focus { outline: none; } .clm-input--dark, .clm-select--dark { color: #fff; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); backdrop-filter: blur(4px); } .clm-input--dark::placeholder { color: rgba(255,255,255,0.3); } .clm-input--dark:focus, .clm-select--dark:focus { border-color: rgba(255,255,255,0.4); } .clm-select--dark option { color: var(--ink); } /* Light field (used if form ever rendered on light bg) */ .clm-input--light { color: var(--ink); border-color: var(--border-soft); background: #fff; } .clm-submit { width: 100%; margin-top: 24px; padding: 14px; border-radius: 8px; border: 0; font-size: 14px; font-weight: 600; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); cursor: not-allowed; } .clm-submit[data-valid="true"] { background: #fff; color: var(--purple-deep); cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4); } .clm-submit[data-valid="true"]:hover { opacity: 0.95; } .clm-micro { font-size: 12px; text-align: center; margin-top: 16px; color: rgba(255,255,255,0.5); } /* ── Step 2: scenario picker ────────────────────────────────────────────── */ .clm-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--text-4); margin-bottom: 40px; font-family: inherit; } .clm-back:hover { opacity: 0.7; } .clm-banner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9999px; margin-bottom: 24px; background: var(--green-tint); border: 1px solid var(--green); font-size: 12px; font-weight: 500; color: var(--green-deep); } .clm-banner .clm-icon { width: 14px; height: 14px; } .clm-step-head { margin-bottom: 48px; max-width: 42rem; } .clm-step-head h2 { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; } @media (min-width: 768px) { .clm-step-head h2 { font-size: 36px; } } .clm-step-head p { font-size: 16px; color: var(--text-3); max-width: 36rem; margin: 0; } @media (min-width: 768px) { .clm-step-head p { font-size: 18px; } } /* Cards stack full-width at every breakpoint (matches the reference design). */ .clm-picker-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } /* Horizontal 3-up on desktop (matches homepage front doors). Stays vertical on mobile. */ @media (min-width: 768px) { .clm-picker-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .clm-scenario { text-align: left; cursor: pointer; font-family: inherit; border-radius: 16px; padding: 28px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; transition: transform 0.2s, box-shadow 0.2s; } .clm-scenario:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.25); } .clm-scenario__head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .clm-scenario__badge { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--purple-tint); color: var(--purple); } .clm-scenario__badge .clm-icon { width: 20px; height: 20px; } .clm-scenario__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); } .clm-scenario__eyebrow { font-size: 12px; font-weight: 500; margin: 0 0 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); } .clm-scenario h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 0 0 16px; } .clm-scenario__desc { font-size: 14px; line-height: 1.6; color: var(--text-3); margin: 0 0 24px; } .clm-compare { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; flex-grow: 1; } .clm-compare__box { border-radius: 8px; padding: 12px; border: 1px solid; } .clm-compare__box p { margin: 0; } .clm-compare__box .clm-compare__label { font-size: 12px; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .clm-compare__box .clm-compare__text { font-size: 12px; line-height: 1.5; } .clm-without { border-color: var(--surface-2); background: var(--surface); } .clm-without .clm-compare__label { color: var(--text-mute); } .clm-without .clm-compare__text { color: var(--text-4); } .clm-with { border-color: var(--green-soft); background: var(--green-tint); } .clm-with .clm-compare__label { color: var(--green-deep); } .clm-with .clm-compare__text { color: var(--ink); } .clm-scenario__foot { padding-top: 16px; border-top: 1px solid var(--surface-2); display: flex; align-items: center; justify-content: space-between; } .clm-scenario__foot .clm-foot-label { font-size: 12px; font-weight: 500; color: var(--text-mute); } .clm-scenario__foot .clm-foot-cta { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; transition: gap 0.2s; } .clm-scenario:hover .clm-foot-cta { gap: 10px; } /* ── Step 3: prompt typewriter / Step 4: response — shared Compass mock ──── */ .clm-stage { max-width: 48rem; margin: 0 auto; } .clm-stage__head { text-align: center; margin-bottom: 32px; } .clm-stage__head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; } @media (min-width: 768px) { .clm-stage__head h2 { font-size: 30px; } } .clm-mock__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--ink); border: 1px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0; } .clm-mock__id { display: flex; align-items: center; gap: 12px; flex-shrink: 1; min-width: 0; } .clm-mock__id .clm-icon { color: #fff; width: 16px; height: 16px; } .clm-mock__name { color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 1; min-width: 0; } .clm-mock__sep { color: rgba(255,255,255,0.3); font-size: 12px; } .clm-mock__ws { color: rgba(255,255,255,0.6); font-size: 12px; } .clm-mock__status { display: flex; align-items: center; gap: 8px; } .clm-mock__status span:last-child { color: rgba(255,255,255,0.6); font-size: 12px; } .clm-mock__try { background: none; border: 0; cursor: pointer; font-family: inherit; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 500; transition: color 0.15s; flex-shrink: 1; min-width: 0; white-space: normal; word-break: break-word; } .clm-mock__try:hover { color: #fff; } .clm-mock__body { padding: 32px; background: #fff; min-height: 280px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 16px 16px; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .clm-mock__body { padding: 40px; } } .clm-mock__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 16px; } .clm-promptbox { border-radius: 12px; padding: 20px; min-height: 120px; border: 1px solid var(--border); background: var(--surface); } .clm-promptbox p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; } @media (min-width: 768px) { .clm-promptbox p { font-size: 18px; } } .clm-cursor { display: inline-block; width: 2px; height: 20px; margin-left: 2px; vertical-align: middle; background: var(--ink); animation: clm-pulse 1s steps(2) infinite; } .clm-searching { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-4); } .clm-bounce { display: flex; gap: 4px; } .clm-bounce span { width: 6px; height: 6px; border-radius: 9999px; background: var(--ink); animation: clm-bounce 1s infinite; } .clm-bounce span:nth-child(2) { animation-delay: 0.15s; } .clm-bounce span:nth-child(3) { animation-delay: 0.3s; } /* ── Step 4: response body ──────────────────────────────────────────────── */ .clm-response { opacity: 0; transition: opacity 0.7s; } .clm-response[data-visible="true"] { opacity: 1; } .clm-response__shell { background: #fff; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 16px 16px; overflow: hidden; } .clm-bubble-wrap { padding: 32px 32px 0; display: flex; justify-content: flex-end; } @media (min-width: 768px) { .clm-bubble-wrap { padding: 32px 40px 0; } } .clm-bubble { padding: 12px 20px; border-radius: 16px 16px 4px 16px; max-width: min(32rem, 100%); overflow-wrap: break-word; background: var(--ink); color: #fff; font-size: 14px; line-height: 1.6; } .clm-resp { padding: 32px; color: var(--ink); } @media (min-width: 768px) { .clm-resp { padding: 32px 40px; } } .clm-resp__stack > * + * { margin-top: 28px; } .clm-resp__summary-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); margin: 0 0 12px; } .clm-resp__summary { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 0; } .clm-receipts-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--green-tint); color: var(--green-deep); font-size: 12px; font-weight: 500; } .clm-receipts-badge .clm-icon { width: 12px; height: 12px; } .clm-answer { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 24px; } .clm-answer__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 12px; } .clm-answer__head { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 0 0 16px; } .clm-answer__head .clm-accent { color: var(--purple); } .clm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; } /* Brief: stat callouts cramped on mobile — stack to 2 cols */ @media (max-width: 480px) { .clm-stats { grid-template-columns: repeat(2, 1fr); } } .clm-stat { border-radius: 8px; padding: 12px; border: 1px solid var(--border); background: #fff; } .clm-stat--hl { border-color: var(--purple); } .clm-stat__n { font-size: 24px; font-weight: 800; line-height: 1; margin: 0 0 6px; color: var(--ink); } .clm-stat--hl .clm-stat__n { color: var(--purple); } .clm-stat__l { font-size: 12px; line-height: 1.3; color: var(--text-4); margin: 0; } .clm-resp h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 12px; } .clm-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .clm-findings li { display: flex; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--text-2); } .clm-findings .clm-bullet { flex-shrink: 0; } .clm-bullet--purple { color: var(--purple); } .clm-bullet--green { color: var(--green); } .clm-bullet--alert { color: #E11D48; } /* Receipt / video quote — purple left border (an approved purple usage) */ .clm-receipt { border-radius: 12px; border-left: 2px solid var(--purple); background: var(--surface); padding: 20px; } .clm-receipt__row { display: flex; gap: 16px; } @media (max-width: 560px) { .clm-receipt__row { flex-direction: column; } } .clm-receipt__quote { font-size: 14px; line-height: 1.6; font-style: italic; color: var(--ink); margin: 0 0 12px; } .clm-receipt__attr { font-size: 12px; font-weight: 500; color: var(--text-4); margin: 0; } .clm-receipt__btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .clm-chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1px solid #CBD5E1; color: var(--text-2); background: transparent; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } .clm-chip:hover { background: #fff; } .clm-chip .clm-icon { width: 12px; height: 12px; } /* Video thumbnail */ .clm-thumb { position: relative; border-radius: 8px; overflow: hidden; flex-shrink: 0; width: 120px; height: 120px; border: 0; padding: 0; cursor: pointer; transition: transform 0.2s; } .clm-thumb:hover { transform: scale(1.05); } .clm-thumb svg.clm-thumb__portrait { position: absolute; inset: 0; width: 100%; height: 100%; } .clm-thumb__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 100%); } .clm-thumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .clm-thumb__play span { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s; } .clm-thumb:hover .clm-thumb__play span { transform: scale(1.1); } .clm-thumb__dur { position: absolute; bottom: 6px; right: 6px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); } .clm-thumb__rec { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.55); } .clm-thumb__rec span { width: 4px; height: 4px; border-radius: 9999px; background: #FF4444; } /* Deliverables */ .clm-deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 480px) { .clm-deliverables { grid-template-columns: 1fr; } } .clm-deliverable { border-radius: 8px; padding: 16px; border: 1px solid var(--border); background: #fff; } .clm-deliverable__icon { font-size: 18px; margin: 0 0 8px; } .clm-deliverable__title { font-weight: 700; font-size: 14px; color: var(--ink); margin: 0 0 4px; } .clm-deliverable__body { font-size: 12px; line-height: 1.4; color: var(--text-4); margin: 0; } /* Driver bars */ .clm-driver { display: flex; align-items: center; gap: 12px; padding: 6px 0; } .clm-driver__rank { font-size: 12px; font-weight: 700; width: 24px; color: var(--text-mute); } .clm-driver__label { font-size: 14px; flex: 1; color: var(--text-2); } .clm-driver__track { width: 128px; height: 6px; border-radius: 9999px; overflow: hidden; background: var(--surface-2); } .clm-driver__fill { height: 100%; border-radius: 9999px; background: var(--ink); } .clm-driver__pct { font-size: 12px; font-weight: 600; width: 32px; text-align: right; color: var(--text-3); } .clm-driver--hl .clm-driver__rank, .clm-driver--hl .clm-driver__label, .clm-driver--hl .clm-driver__pct { color: var(--purple); } .clm-driver--hl .clm-driver__label { font-weight: 600; } .clm-driver--hl .clm-driver__fill { background: var(--purple); } /* Slide mock */ .clm-slide-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } .clm-slide { aspect-ratio: 16 / 9; padding: 32px; background: var(--ink); display: flex; flex-direction: column; justify-content: space-between; } .clm-slide__num { color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .clm-slide__title { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; } .clm-slide__body { color: rgba(255,255,255,0.7); font-size: 14px; margin: 0; } .clm-slide__foot { color: rgba(255,255,255,0.4); font-size: 12px; margin: 0; } .clm-slide-note { font-size: 12px; color: var(--text-mute); margin: 8px 0 0; } /* Push-back box — green left border */ .clm-pushback { border-left: 2px solid var(--green); background: var(--green-tint); padding: 16px; } .clm-pushback__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 4px; } .clm-pushback p:last-child { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; } /* Unlock row */ .clm-unlock { border-radius: 8px; padding: 16px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .clm-unlock__left { display: flex; align-items: center; gap: 12px; } .clm-unlock__left .clm-icon { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; } .clm-unlock__left p { font-size: 14px; color: var(--text-2); margin: 0; } .clm-unlock__btn { background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; } .clm-unlock__btn .clm-icon { width: 14px; height: 14px; } /* Bottom CTA strip */ .clm-bottomcta { border-top: 1px solid var(--border); background: var(--surface); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; justify-content: space-between; } @media (min-width: 768px) { .clm-bottomcta { flex-direction: row; align-items: center; padding: 32px 40px; } } .clm-bottomcta__title { font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 4px; } .clm-bottomcta__sub { font-size: 14px; color: var(--text-3); margin: 0; } .clm-bottomcta__btn { padding: 12px 20px; border-radius: 8px; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--ink); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .clm-bottomcta__btn:hover { opacity: 0.9; } .clm-bottomcta__btn .clm-icon { width: 16px; height: 16px; } /* ── Gate modal ─────────────────────────────────────────────────────────── */ .clm-gate { position: fixed; inset: 0; z-index: 9200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); } .clm-gate[hidden] { display: none; } .clm-gate__dialog { border-radius: 16px; padding: 32px; max-width: 28rem; width: 100%; background: #fff; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.4); } @media (min-width: 768px) { .clm-gate__dialog { padding: 40px; } } .clm-gate__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .clm-gate__icon .clm-icon { width: 20px; height: 20px; color: #fff; } .clm-gate__dialog h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; } .clm-gate__body { font-size: 16px; line-height: 1.6; color: var(--text-3); margin: 0 0 24px; } .clm-gate__micro { font-size: 12px; color: var(--text-mute); margin: 0 0 20px; } .clm-gate__btns { display: flex; gap: 12px; } .clm-gate__btns > * { flex: 1; } .clm-gate__keep { padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; border: 1px solid var(--border); color: var(--ink); background: #fff; cursor: pointer; } .clm-gate__keep:hover { background: var(--surface); } .clm-gate__book { padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--ink); cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; } .clm-gate__book:hover { opacity: 0.9; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .clm-footer { border-top: 1px solid var(--border); background: #fff; padding: 32px 24px; margin-top: 48px; } @media (min-width: 768px) { .clm-footer { padding: 32px 48px; } } .clm-footer__inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; justify-content: space-between; font-size: 12px; color: var(--text-mute); } @media (min-width: 768px) { .clm-footer__inner { flex-direction: row; align-items: center; } } .clm-footer__legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .clm-footer__links { display: flex; gap: 24px; } /* ── Mobile overrides (≤ 480px) ─────────────────────────────────────────── */ @media (max-width: 480px) { /* Prevent any child from causing horizontal scroll */ .clm-overlay { overflow-x: hidden; width: 100%; } .clm { width: 100%; box-sizing: border-box; } .clm-main { width: 100%; box-sizing: border-box; } /* Tighter nav */ .clm-nav { padding: 14px 16px; box-sizing: border-box; max-width: 100%; } .clm-nav__brand span { font-size: 15px; } .clm-nav__cta { display: none; } /* gate CTA still available in response strip */ /* CTA is hidden on mobile, so push the close button to the right edge. */ .clm-overlay__close { margin-left: auto; } /* Tighter main canvas */ .clm-main { padding: 28px 16px; } /* Scenario picker: hide comparison boxes, tighten spacing, ensure fit */ .clm-compare { display: none; } .clm-picker-grid { width: 100%; box-sizing: border-box; } .clm-scenario { padding: 20px; box-sizing: border-box; width: 100%; } /* Form card */ .clm-card { padding: 20px; box-sizing: border-box; width: 100%; } /* Mock UI bar: hide workspace name so bar doesn't overflow */ .clm-mock__sep, .clm-mock__ws { display: none; } .clm-mock__bar { padding: 12px 16px; } .clm-mock__try { font-size: 11px; } /* Mock body */ .clm-mock__body { padding: 20px 16px; box-sizing: border-box; width: 100%; } .clm-stage { width: 100%; box-sizing: border-box; } .clm-bubble-wrap { padding: 20px 16px 0; box-sizing: border-box; width: 100%; } .clm-resp { padding: 20px 16px; box-sizing: border-box; width: 100%; } /* Driver bars — make track fluid so the row doesn't overflow */ .clm-driver { gap: 8px; } .clm-driver__track { width: auto; flex: 1; min-width: 0; } /* Slide mock — smaller title so it doesn't overflow the aspect-ratio box */ .clm-slide { padding: 20px; } .clm-slide__title { font-size: 18px; } /* Bottom CTA strip */ .clm-bottomcta { padding: 24px 16px; } /* Footer */ .clm-footer { padding: 24px 16px; } } /* ── Animations (respect reduced motion) ────────────────────────────────── */ @keyframes clm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes clm-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-25%); } } @media (prefers-reduced-motion: reduce) { .clm-dot--live, .clm-cursor, .clm-bounce span { animation: none !important; } .clm-scenario, .clm-thumb, .clm-response { transition: none !important; } }