PAGE_LABEL

HEADLINE_LINE_ONE
HEADLINE_LINE_TWO

DECK_SENTENCE

PROOF_ONE PROOF_TWO PROOF_THREE
PRIMARY_LABEL SECONDARY_LABEL

Tally Body — Video Hero Prompt

Paste everything between the two rules into a fresh chat, fill in THE BRIEF, and you get back one complete hero block ready to paste into Squarespace.

Fill in only the eight lines under THE BRIEF. Leave the rest exactly as written — every line below it is there because the live site broke without it at some point.

You are building a page hero for Tally Body LLC (tallybody.com), a Chicago personal-training and physique-coaching business. The site runs on Squarespace and page code is pasted into a Code Block or Page Header Code Injection.

There is exactly one hero design on this site and you are not redesigning it. You are re-skinning a known, working block with new copy and a new clip. Match the spec below to the pixel.

THE BRIEF — fill these in

  • Page / URL: …

  • What the page is for, in a sentence: …

  • Who lands on it: …

  • YouTube clip id: …

  • Primary button: label → destination

  • Secondary button: label → destination (or "none")

  • Proof line: three to five short labels (or "none")

  • Status plate: e.g. COMING SOON (or "none")

Write the eyebrow, headline and deck yourself in Tally Body's voice — do not ask me for copy. Give me the finished block, then list the copy choices you made so I can push back on any of them.

THE DESIGN — do not change these numbers

Tokens. --tb-black #050505, --tb-white #ffffff, --tb-text rgba(255,255,255,0.76), --tb-dim rgba(255,255,255,0.52), --tb-red #d71f2b, --tb-red-deep #b5121e, --tb-shell min(calc(100% - 48px), 1440px). Font stack is Arial, Helvetica, sans-serif throughout — no webfonts, no Squarespace font stack.

The section. <section class="tb-pagehero tb-pagehero--video">. Both classes, always. Base: position:relative; display:flex; align-items:flex-end; min-height:clamp(460px,62vh,640px); overflow:hidden; isolation:isolate; background:#090909. The --video modifier overrides to align-items:center; min-height:clamp(560px,92vh,1000px); background:#000, and sets .tb-pagehero__inner padding to clamp(64px,8vh,112px) 0. .tb-pagehero__inner is width:var(--tb-shell); margin-inline:auto.

The player. .tb-hero-video — absolute, inset:0, z-index:-2, overflow:hidden, background:#000, carrying data-yt="<clip id>" and aria-hidden="true". Inside it, one <img class="tb-hero-video__poster"> at https://i.ytimg.com/vi/<id>/maxresdefault.jpg with an onerror that falls back once to hqdefault.jpg, alt="", loading="eager", decoding="async", fetchpriority="high". No grade filter on the footage — the panel does the contrast work.

The frame. An inline script reads data-yt, returns early on prefers-reduced-motion, and only then builds .tb-hero-video__frame: title="Tally Body", tabindex="-1", aria-hidden="true", allow="autoplay; encrypted-media; picture-in-picture", frameborder="0", and on load adds .is-playing to fade it from opacity 0 to 1 over 700ms. Src is https://www.youtube-nocookie.com/embed/<id>?autoplay=1&mute=1&loop=1&playlist=<id>&controls=0&disablekb=1&fs=0&rel=0&iv_load_policy=3&playsinline=1&modestbranding=1. Sizing: top/left:50%; width:calc(240px + 100vw); height:calc(135px + 56.25vw); min-width:calc(240px + 177.78vh); min-height:calc(240px + 100vh); transform:translate(-50%,-50%); pointer-events:none.

The panel. .tb-hero-panel — --tb-panel-max:860px, max-width:var(--tb-panel-max), padding:clamp(30px,3.4vw,54px) clamp(26px,3.2vw,52px) clamp(34px,3.6vw,56px), background:rgba(5,5,5,0.9), border-top:4px solid var(--tb-red), box-shadow:0 30px 70px rgba(0,0,0,0.42). Its h1 is clamp(40px,5.4vw,84px) / -0.06em / 0.9, uppercase, font-weight:500. Deck: max-width:640px; margin-top:24px. Proof: margin-top:34px. Button row: margin-top:32px.

Contents of the panel, in order. Optional red status plate → eyebrow (<p class="tb-eyebrow">, 10px/800/0.2em uppercase, red 34x2 rule before it) → <h1> with an id the section's aria-labelledby points at → deck (.tb-pagehero__deck, sentence case) → proof line (.tb-pagehero__proof, white 9px labels with 3px red dots between, no dot after the last) → .tb-btn-row with a red .tb-btn--primary first and a .tb-btn--ghost second.

Buttons. min-width:190px; min-height:58px, justify-content:space-between, 11px/800/0.11em uppercase, arrow glyph in a <span aria-hidden="true"> at 17px. Two buttons maximum. Arrows carry meaning: &#8595; scrolls down this page, &#8594; goes elsewhere, &#8593; scrolls up, &#8599; submits.

Breakpoints. At 820px: --video goes align-items:flex-end, inner padding 104px 0 88px, panel --tb-panel-max:100%. At 600px: --tb-shell:calc(100% - 32px), --video min-height 620px, inner padding 96px 0 72px, panel padding 26px 22px 30px, panel h1 clamp(34px,10vw,48px), button row becomes a 2-column grid and buttons drop to min-height:54px, font-size:9px. Under prefers-reduced-motion: all transitions to 0.01ms and .tb-hero-video__frame { display:none !important }.

THE HOUSE RULES — these are what break the live site

  1. No document wrapper. Output starts at <style> and ends at </script>. No DOCTYPE, html, head, body, metaor title. A wrapper makes the browser hoist the widget out of #siteWrapper.

  2. One block. Style, markup and scripts in a single fenced code block, and paste the full code into the chat as well as any file. Never split CSS from markup across two blocks, and never deliver as "add this after that line" patches.

  3. No demo scaffolding. No body {} rule, no filler div, no preview copy of the site header. Everything you emit renders live.

  4. Scope everything to .tb-page so nothing leaks into Squarespace's own styles or the header/footer widgets.

  5. COLOR LOCK last. End the stylesheet with a block that restates every colour with !important on h1, .tb-eyebrow, .tb-btn, .tb-pagehero__deck, .tb-pagehero__proof and anything else you add. Squarespace colours h1–h6, p, a and label site-wide and beats plain inheritance — without the lock the hero renders black-on-black live. If you change a colour, change it in both the base rule and the lock, or the lock's !important wins and nothing appears to happen.

  6. loading="eager" on every image. loading="lazy" is broken in this site's pasted page code — lazy images never load at all.

  7. Use the www.tallybody.com host in every link and JSON-LD @id. Bare tallybody.com makes Google read two different organisations.

  8. Never hard-code a year anywhere. Anything dated computes itself from new Date() so it can never go stale.

  9. Red flags sit above a picture, never on it.

KNOWN QUIRKS — leave them alone unless I ask

  • .tb-page p { margin: 0 } scores (0,1,1) and beats any single-class <p> rule such as .tb-eyebrow { margin: 0 0 25px }. The tight eyebrow-to-H1 gap is that quirk and it is site-wide. To give a <p> a margin, write the rule as .tb-page .tb-eyebrow { … }.

  • A Squarespace Code Block sits in the centred content wrapper (~1587px of a 1725px window), so hero code pasted there starts ~69px in from each edge. If I say the code is going in a Code Block, include the full-bleed escape: measure getBoundingClientRect() against documentElement.clientWidth (not 100vw — that includes the scrollbar), apply negative margins with Math.floor (rounding up overshoots and creates a pixel of sideways scroll), re-run on resize, and guard it with a window flag so a second copy on the page cannot run twice. It measures 0 and does nothing in Page Header Code Injection, so it is safe either way.

  • Squarespace's native video upload returns a player, not a file URL, so <video src> is not an option — the YouTube iframe above is the sanctioned route. mute=1 is what makes autoplay legal; loop=1 is ignored without playlist=<same id>.

  • display:none does not stop a download. Suppressing the clip on phones only saves data if the src is withheld and attached by script after the media query passes.

  • YouTube's maxresdefault.jpg is only 480x360-class quality. If I give you a real exported still on the Squarespace CDN, use that instead — CDN files live at images.squarespace-cdn.com/content/v1/6a870e140b1bea6bb8e4eaa5/<uuid>/<file> and take ?format=1500w.

THE VOICE

Direct, warm, unhyped. Plain sentences, no exclamation marks, no hustle language, no "unlock your potential". Say the honest thing including when it is inconvenient. Headlines are short, uppercase, and usually break over two lines. The deck is one sentence, occasionally two, in sentence case. The brand's own lines to stay consistent with: "Everyone deserves someone in their corner." / "Build strength. Transform your body. Become unstoppable." / "The first step is a conversation, not a commitment."

OUTPUT

One fenced code block, <style> first and </script> last, then a short list of the copy decisions you made and anything I still need to check before publishing (clip id, button destinations, a real poster still).

Reference facts, if you need them

Founded 2018, Chicago — Lakeview. Founder Angelique competed in four bodybuilding competitions with two wins; NASM Corrective Exercise Specialist. Contact: liqueantigone@gmail.com, (773) 497-2499. Live URLs: /, /services, /personal-training, /nutrition-coaching, /bodybuilding-coaching, /online-coaching, /transformations, /about, /apply, /resources-blog, /terms-conditions, /payments-client-portal.

Clip ids already in use: Home KRPEMevRXqo · Personal Training UD17h7vHnqI · Bodybuilding Ws-wPwODsHQ · Nutrition WggBtlnABq4 · Online DOmk9RNcZdY · Services xvqpMhQdgz8 · Resources c4kv4oUUd24 · Transformations bnrj29sDzLU.