/* * Social Solved — landing page v2 (variant G). * * Extracted verbatim from projects/social-solved-lp-v2/index.html, which is the design * source of truth. ⚠️ Edit the mockup first, then re-extract — otherwise the two drift * and the mockup stops being a reliable preview. * * Colours sampled from content-launch.co 2026-09-24. The electric blue (#0100fe) is the * point: a muted navy reads as cheap, that saturation reads as "techy". * * The .flag preview bar is stripped on extraction — it exists only in the local mockup. */ :root{ /* Sampled from content-launch.co 2026-09-24 via getComputedStyle. Their blue is near-pure #0100FE, not a muted navy — the saturation is what reads as "techy" rather than "cheap". */ --bg:#010001; /* their body bg, rgb(1,0,1) */ --panel:#0a0a16; --ink:#ffffff; --muted:#969696; /* their secondary text, rgb(150,150,150) */ --accent:#0100fe; /* electric blue */ --accent-lit:#4747ff; /* their lighter stop */ --accent-ink:#ffffff; /* white on blue */ --line:rgba(255,255,255,.12); --col:560px; } *{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden} body{ background:var(--bg);color:var(--ink); font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* the glow behind the column — their signature */ .glow{position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(1100px 620px at 50% -8%,rgba(71,71,255,.50),transparent 72%), radial-gradient(760px 520px at 50% 34%,rgba(1,0,254,.18),transparent 70%), radial-gradient(900px 700px at 50% 104%,rgba(71,71,255,.16),transparent 68%); } .col{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:0 18px} /* ---- top ---- */ .brand{text-align:center;padding:30px 0 22px} .brand .mark{height:34px;width:auto;display:inline-block; filter:drop-shadow(0 0 18px rgba(1,0,254,.55))} /* ---- headline ---- */ h1{ text-align:center;font-size:clamp(26px,5.1vw,38px);line-height:1.14; font-weight:800;letter-spacing:-.022em;margin:0 0 24px;text-wrap:balance; } h1 .l2{display:block;margin-top:4px} .forwho{display:flex;align-items:center;justify-content:center;gap:9px; margin:0 auto 24px;max-width:max-content; padding:11px 18px;border-radius:999px; border:1px solid rgba(120,120,255,.45);background:rgba(1,0,254,.16); box-shadow:0 0 28px rgba(1,0,254,.20); font-size:14px;font-weight:700;color:#fff;letter-spacing:.005em; text-align:center;line-height:1.35} .forwho svg{flex:0 0 auto;width:17px;height:17px;stroke:#9fa5ff} @media (max-width:520px){ .forwho{font-size:12.5px;padding:10px 14px;gap:7px;white-space:nowrap} .forwho svg{width:15px;height:15px} } /* very narrow phones: let it shrink rather than wrap */ @media (max-width:360px){ .forwho{font-size:11.5px;padding:9px 12px} } /* ---- video ---- */ .vsl{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden; background:#000;border:1px solid rgba(120,120,255,.55); box-shadow:0 0 0 1px rgba(1,0,254,.3),0 0 60px rgba(1,0,254,.42); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:20px} .vsl .play{width:60px;height:60px;border-radius:999px;background:rgba(255,255,255,.94); display:flex;align-items:center;justify-content:center} .vsl .play::after{content:"";border-left:19px solid #000; border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px} .vsl .cap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8d90a0;font-weight:700} /* ---- logo bar ---- */ .trusted{text-align:center;font-size:11px;color:var(--muted);margin:18px 0 10px; letter-spacing:.05em} .logobelt{position:relative;overflow:hidden;max-width:100%;margin:0 0 22px; max-width:1040px;margin-left:auto;margin-right:auto; /* don't run edge-to-edge on desktop */ -webkit-mask-image:linear-gradient(90deg, transparent 0,rgba(0,0,0,.25) 6%,#000 22%,#000 78%,rgba(0,0,0,.25) 94%,transparent 100%); mask-image:linear-gradient(90deg, transparent 0,rgba(0,0,0,.25) 6%,#000 22%,#000 78%,rgba(0,0,0,.25) 94%,transparent 100%)} /* 16 logos x 120px slot = 1920px per set; track holds two sets */ /* 10 logos * (132px slot + 18px gap) = 1500px per set; track holds two sets */ .logotrack{display:flex;gap:18px;width:max-content;opacity:.7; animation:beltslide 38s linear infinite; will-change:transform} /* Files in logos/norm/ are ALREADY pure-white silhouettes on transparent — normalised offline because a CSS filter cannot rescue black artwork (Great Clips was #000: brightness() multiplies zero and stays zero). So: no grayscale/brightness here, just opacity. */ .logotrack img{width:132px;flex:0 0 132px;height:42px;object-fit:contain; object-position:center;opacity:.78;transition:opacity .2s ease; padding:0 6px} /* keeps full-width wordmarks off their own slot edges */ .logotrack img:hover{opacity:1} /* BP and Arcade Monsters are square/portrait marks; contain would shrink them to a sliver of the 118px slot, so give them the full height instead. */ .logotrack img[alt="BP"], .logotrack img[alt="Arcade Monsters"], .logotrack img[alt="Taco Bell"]{height:46px} @keyframes beltslide{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-1500px,0,0)} } @media (prefers-reduced-motion:reduce){.logotrack{animation:none}} /* ---- CTA ---- */ .cta{display:block;width:100%;border:0;color:#fff; background:linear-gradient(180deg,#4747ff 0%,#0100fe 100%); font-family:inherit;font-weight:900;font-size:16.5px;line-height:1; letter-spacing:.1em;text-transform:uppercase; padding:19px;border-radius:118px;cursor:pointer;font-family:inherit; box-shadow:0 0 0 1px rgba(120,120,255,.55), 0 0 42px rgba(1,0,254,.55), inset 0 1px 0 rgba(255,255,255,.28); transition:filter .16s ease,box-shadow .16s ease} .cta:hover{filter:brightness(1.14); box-shadow:0 0 0 1px rgba(150,150,255,.7),0 0 58px rgba(1,0,254,.75), inset 0 1px 0 rgba(255,255,255,.32)} .cta-wrap{margin:22px 0} /* ---- form panel ---- */ .formcard{background:#fff;color:#111;border-radius:14px;padding:24px;margin:26px 0; box-shadow:0 0 0 1px rgba(120,120,255,.35),0 0 44px rgba(1,0,254,.22)} .formcard h2{font-size:15px;margin:0 0 4px;font-weight:800;letter-spacing:-.01em} .formcard p{margin:0 0 16px;font-size:13px;color:#667085} .formcard label{display:block;font-size:12px;font-weight:700;margin:0 0 5px;color:#344054} .formcard .f{margin-bottom:13px} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .formcard label i{font-style:normal;color:#d92d20;margin-left:2px} .row2{display:block} .formcard textarea{ width:100%;padding:12px 13px;border:1px solid #d0d5dd;border-radius:9px; font-size:14px;font-family:inherit;color:#111;background:#fff; line-height:1.45;resize:none;overflow:hidden; min-height:44px;height:44px; /* one line — JS grows it as they type */ display:block;transition:height .1s ease} .formcard textarea:focus{outline:0;border-color:#4747ff; box-shadow:0 0 0 3px rgba(1,0,254,.18)} .formcard textarea::placeholder,.formcard input::placeholder{color:#98a2b3} .formcard input,.formcard select{ width:100%;padding:12px 13px;border:1px solid #d0d5dd;border-radius:9px; font-size:14px;font-family:inherit;color:#111;background:#fff} .formcard input:focus,.formcard select:focus{outline:0; border-color:#4747ff;box-shadow:0 0 0 3px rgba(1,0,254,.18)} /* radio groups — all options on show */ .rg{border:0;margin:0 0 16px;padding:0} .rg legend{font-size:12px;font-weight:700;color:#344054;padding:0;margin:0 0 7px} .rg .opt{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:6px; border:1px solid #d0d5dd;border-radius:9px;font-size:13.5px;color:#111; cursor:pointer;transition:border-color .12s ease,background .12s ease} .rg .opt:hover{border-color:#a9b1ff;background:#f7f8ff} .rg .opt input{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:#0100fe} .rg .opt:has(input:checked){border-color:#4747ff;background:#f2f3ff} .formcard .go{width:100%;border:0;padding:15px;color:#fff; background:linear-gradient(180deg,#4747ff 0%,#0100fe 100%); border-radius:118px;font-family:inherit;font-weight:900;font-size:15px;line-height:1; letter-spacing:.08em;text-transform:uppercase; cursor:pointer;font-family:inherit;margin-top:4px; box-shadow:0 0 26px rgba(1,0,254,.4),inset 0 1px 0 rgba(255,255,255,.26)} .formcard .go:hover{filter:brightness(1.12)} .formnote{text-align:center;font-size:11.5px;color:#667085;margin:10px 0 0} /* ---- validation states ---- */ .err{display:none;font-style:normal;font-size:11.5px;color:#d92d20;margin-top:5px; font-weight:600} .f.bad input{border-color:#f04438;background:#fffbfa} .f.bad input:focus{border-color:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.18)} .f.bad .err,.rg.bad .err{display:block} .rg.bad .opt{border-color:#fda29b} .f.ok input{border-color:#12b76a} /* ---- proof video carousel ---- */ .proofhead{text-align:center;font-size:12px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin:34px 0 14px} .carousel{position:relative;z-index:1;overflow:hidden;max-width:100%; margin:0 0 8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} /* ⚠️ The loop: the track holds the 6 tiles TWICE. Each half is 6*244 + 6*10 = 1524px wide, so translating by exactly -1524px lands set B where set A started — seamless, and unlike -50% it is unaffected by the flex gap. */ .track{display:flex;gap:10px;width:max-content; animation:slide 30s linear infinite; will-change:transform} .carousel:hover .track{animation-play-state:paused} /* Loop distance = 6 * (tile width + gap). Held in a variable so the mobile breakpoint can change it — a nested @keyframes of the same name does NOT override the top-level one. */ .track{--loop:-1524px} @keyframes slide{ from{transform:translate3d(0,0,0)} to{transform:translate3d(var(--loop),0,0)} } /* a tile = video, then a solid TAB beneath it carrying logo + name. Deliberately NOT overlaid on the footage: logos have inconsistent colour and got lost against the video. */ .clip{flex:0 0 auto;width:244px;display:flex;flex-direction:column;margin:0} .clip .vid{position:relative;aspect-ratio:9/16;border-radius:10px 10px 0 0; overflow:hidden;background:var(--panel);border:1px solid var(--line);border-bottom:0} .clip .vid video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .clip .tab{display:flex;align-items:center;gap:9px; padding:9px 10px;border:1px solid var(--line);border-top:0; border-radius:0 0 10px 10px;background:rgba(255,255,255,.055); height:78px;box-sizing:border-box} /* fixed: name + category + location */ .clip .tab img{height:20px;width:auto;max-width:42px;object-fit:contain;flex:0 0 auto; opacity:.92} .clip .tab .nolg{width:0;flex:0 0 auto} .clip .tab b{font-size:11.5px;font-weight:700;line-height:1.18;min-width:0;flex:1 1 auto} .clip .tab i{display:block;font-style:normal;font-weight:400;font-size:10.5px; color:#b9bccb;margin-top:3px;line-height:1.25} .clip .tab u{display:block;text-decoration:none;font-weight:400;font-size:10.5px; color:#8d90a0;margin-top:1px;line-height:1.25} /* ---- case study header ---- */ .casehead{text-align:center;margin:40px 0 20px} .casehead .eyebrow{display:inline-block;font-size:10.5px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:#9fa5ff; border:1px solid rgba(120,120,255,.38);border-radius:999px;padding:6px 14px; background:rgba(1,0,254,.14)} .casehead h2{font-size:clamp(22px,4.4vw,32px);line-height:1.16;font-weight:800; letter-spacing:-.022em;margin:14px 0 0;text-wrap:balance} /* ---- the numbers ---- */ .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0} .stat{border:1px solid rgba(120,120,255,.30);border-radius:14px;padding:22px 16px; text-align:center;background:rgba(255,255,255,.04); box-shadow:0 0 34px rgba(1,0,254,.16),inset 0 1px 0 rgba(255,255,255,.06)} .stat u{display:block;text-decoration:none;font-size:clamp(28px,6.6vw,40px); font-weight:800;letter-spacing:-.03em;line-height:1; color:#fff;text-shadow:0 0 26px rgba(120,120,255,.85)} .stat b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;margin-top:10px} .stat i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:5px; line-height:1.4} .statnote{text-align:center;font-size:12px;color:var(--muted);margin:14px 0 0} /* the raw analytics capture — the point is that it is unretouched */ .proofshot{margin:14px 0 0;border:1px solid rgba(120,120,255,.30);border-radius:12px; overflow:hidden;background:#fff;box-shadow:0 0 34px rgba(1,0,254,.16)} .proofshot img{display:block;width:100%;height:auto} .proofshot span{display:block;text-align:center;font-size:10.5px;letter-spacing:.04em; color:#667085;padding:8px 10px;background:#f4f5f7;border-top:1px solid #e4e7ec} @media (max-width:420px){ .stats{grid-template-columns:1fr} } /* ---- footer ---- */ footer{position:relative;z-index:1;margin-top:44px;padding:24px 18px 44px; border-top:1px solid var(--line);text-align:center} footer .links{font-size:12px;color:var(--muted);margin-bottom:14px} footer .links a{color:var(--muted);text-decoration:none;margin:0 7px} footer .disc{font-size:10px;color:#8d90a0;line-height:1.6;max-width:var(--col);margin:0 auto} @media (max-width:520px){ .logobelt{max-width:none} .clip{width:196px} .track{gap:8px;--loop:-1224px} /* 6*(196+8) */ } /* ═══════════════════════════════════════════════════════════════════════════════════════ * 4.8.10 · BRIDGE — the v2 design applied to the PLUGIN's form markup. * * ⚠️ WHY THIS BLOCK EXISTS. Everything above was extracted from the mockup, which styles * its own hand-written HTML: .formcard, .f, .rg, .go. The live form is rendered by * [brm_cck_qualify] from the field catalog and emits different classes — .brm-q (the * FORM), .brm-f (each question), .brm-opts, .brm-submit, .brm-help. Almost nothing * overlaps, so on first deploy the form rendered as raw unstyled inputs on a finished page. * * Rather than rewrite the renderer to match the mockup — which would fork the markup away * from /kit-qualify/ and leave two form designs to maintain — this maps the v2 look onto * the markup the plugin already produces. One renderer, one field catalog, two skins. * * ⚠️ `.brm-q` is the FORM and `.brm-f` is a question. They look alike; they are not the * same thing, and an earlier draft of this block styled the wrong one. * ═══════════════════════════════════════════════════════════════════════════════════════ */ /* The white card. */ .brm-landing-g2 form.brm-q{ background:#fff;color:#111;border-radius:14px;padding:24px;margin:26px 0; box-shadow:0 0 0 1px rgba(120,120,255,.35),0 0 44px rgba(1,0,254,.22)} .brm-landing-g2 form.brm-q label{ display:block;font-size:12px;font-weight:700;margin:0 0 5px;color:#344054} /* One question block = the mockup's .f */ .brm-landing-g2 .brm-f{margin-bottom:13px} .brm-landing-g2 .brm-help{margin:0 0 7px;font-size:12px;color:#667085;font-weight:400} .brm-landing-g2 form.brm-q input[type=text], .brm-landing-g2 form.brm-q input[type=email], .brm-landing-g2 form.brm-q input[type=tel], .brm-landing-g2 form.brm-q input[type=url]{ width:100%;padding:12px 13px;border:1px solid #d0d5dd;border-radius:9px; font-size:14px;font-family:inherit;color:#111;background:#fff} .brm-landing-g2 form.brm-q textarea{ width:100%;padding:12px 13px;border:1px solid #d0d5dd;border-radius:9px; font-size:14px;font-family:inherit;color:#111;background:#fff; line-height:1.45;resize:none;overflow:hidden; /* starts as one bar; brm-qstep.js grows it as they type */ min-height:44px;height:44px;display:block;transition:height .1s ease} .brm-landing-g2 form.brm-q input:focus, .brm-landing-g2 form.brm-q textarea:focus{ outline:0;border-color:#4747ff;box-shadow:0 0 0 3px rgba(1,0,254,.18)} .brm-landing-g2 form.brm-q input::placeholder, .brm-landing-g2 form.brm-q textarea::placeholder{color:#98a2b3} /* Radio groups — every option on show, no dropdowns. */ .brm-landing-g2 form.brm-q fieldset{border:0;margin:0 0 16px;padding:0} .brm-landing-g2 form.brm-q legend{ font-size:12px;font-weight:700;color:#344054;padding:0;margin:0 0 7px} .brm-landing-g2 .brm-opts label{ display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 6px; border:1px solid #d0d5dd;border-radius:9px;font-size:13.5px;color:#111; font-weight:400;cursor:pointer;transition:border-color .12s ease,background .12s ease} .brm-landing-g2 .brm-opts label:hover{border-color:#a9b1ff;background:#f7f8ff} .brm-landing-g2 .brm-opts input{ width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:#0100fe} .brm-landing-g2 .brm-opts label:has(input:checked){border-color:#4747ff;background:#f2f3ff} .brm-landing-g2 .brm-submit{ width:100%;border:0;padding:15px;color:#fff; background:linear-gradient(180deg,#4747ff 0%,#0100fe 100%); border-radius:118px;font-family:inherit;font-weight:900;font-size:15px;line-height:1; letter-spacing:.08em;text-transform:uppercase;cursor:pointer;margin-top:4px; box-shadow:0 0 26px rgba(1,0,254,.4),inset 0 1px 0 rgba(255,255,255,.26)} .brm-landing-g2 .brm-submit:hover{filter:brightness(1.12)} .brm-landing-g2 .brm-fine{text-align:center;font-size:11.5px;color:#667085;margin:10px 0 0} /* ⚠️ The honeypot stays invisible to people and present to bots. Never display:none — that is the one input a bot knows to skip. */ .brm-landing-g2 .brm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ═══════════════════════════════════════════════════════════════════════════════════════ * VSL — the player must FILL the frame. * * ⚠️ .vsl is a 16:9 box and also a padded flex column, which is right for the "not * uploaded yet" placeholder and wrong for a real player: the embed ends up letterboxed * with black bars above and below. Observed live 2026-10-05 — the video sat as a white * band in the middle of a black box. * * With a player present, the padding and flex centring are neutralised and the inner * element is absolutely positioned, so the video fills the frame edge to edge. * ═══════════════════════════════════════════════════════════════════════════════════════ */ .brm-landing-g2 .vsl:has(> div[id^="vidalytics_embed"]), .brm-landing-g2 .vsl:has(> video){padding:0;display:block} .brm-landing-g2 .vsl > div[id^="vidalytics_embed"], .brm-landing-g2 .vsl > video{position:absolute;inset:0;width:100%;height:100%} .brm-landing-g2 .vsl > div[id^="vidalytics_embed"] iframe, .brm-landing-g2 .vsl > div[id^="vidalytics_embed"] video{ position:absolute;inset:0;width:100%!important;height:100%!important} /* ⚠️ A carousel clip whose file has not been uploaded yet must not show a broken player. The poster/placeholder stays; an empty