/* GENERATED by build.py from _src/theme.base.* + parts/*. Do not edit here. */
/* ============================================================
ClipMe theme for the opus.pro mirror.
TWO VERSIONS, mirroring clipme.com exactly:
default -> DARK (clipme.com's :root / @theme block)
html.light -> LIGHT (clipme.com's html.light block)
Switch with ?theme=light / ?theme=dark, the toggle, or whatever
is remembered in localStorage under `clipme-theme`.
============================================================ */
/* ---------- DARK (default) ---------- */
/* ============================================================================
ClipMe theme overlay for the (OpusClip) Webflow mirror.
COLOR + TYPE ONLY. No layout, no geometry, no behavior — functionality is
identical to the original mirror.
Technique: Webflow re-declares its full token set on many component wrappers
(.a_autopilot_wrapper etc), so :root alone gets shadowed by the closer
definition. Overriding on * with !important is what actually wins everywhere.
Loaded AFTER the Webflow CSS.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
--cm-bg:#08080a; --cm-elev:#131316; --cm-elev2:#1b1b1f; --cm-border:#262630;
--cm-fg:#ffffff; --cm-muted:#9b9ba6; --cm-faint:#6b6b76;
--cm-red:#e63a55; --cm-red-soft:#ff5a73; --cm-live:#45e06a; --cm-radius:16px;
}
/* ---- 1. Accent tokens: every green / lime / gold / purple accent -> ClipMe red ---- */
*{
--new_green:#e63a55!important;
--ao_accent:#e63a55!important;
--accent--green-light:#ff5a73!important;
--accent--green-light-2:#ff5a73!important;
--lemon-green:#e63a55!important;
--medium-spring-green:#e63a55!important;
--yellow-green:#e63a55!important;
--bad15c:#e63a55!important;
--ao_orange:#e63a55!important;
--gold:#e63a55!important;
--yellow--400:#e63a55!important;
--playful-yellow:#ff5a73!important;
--opus-purple:#e63a55!important;
--opus-lake-blue:#e63a55!important;
--opus-light-blue:#ff5a73!important;
--opus-candy-blue:#ff5a73!important;
/* ---- 2. Surfaces: opus greys -> ClipMe blacks ---- */
--background--bg-background:#08080a!important;
--background--bg-popover:#131316!important;
--background--bg-accent:#1b1b1f!important;
--background--bg-input:#1b1b1f!important;
--background--bg-muted:#1b1b1f!important;
--background--bg-secondary:#1b1b1f!important;
--background--bg-secondary-80:#1b1b1fcc!important;
--bg--foreground:#131316!important;
--new_gray:#131316!important;
--opus-dark-bg:#08080a!important;
--ui--dark-primary:#131316!important;
--ui--border:#262630!important;
--ui--menu-background-blur:#08080ae6!important;
/* ---- 3. Text ---- */
--text--text-foreground:#ffffff!important;
--text--text-primary:#ffffff!important;
--text--text-secondary-foreground:#ffffff!important;
--text--text-muted-foreground:#9b9ba6!important;
--text--light-secondary:#9b9ba6!important;
--text--secondary:#9b9ba6!important;
--text--text-transparent:#6b6b76!important;
/* ---- 4. Status ---- */
--background--bg-success:#e63a55!important; /* CLIPME-FACTS: green reserved for the live-status dot only */
--text--text-success:#e63a55!important;
--background--bg-error:#e5484d!important; /* true error red, kept distinct */
--text--text-error:#e5484d!important;
}
/* ---- 5. Hardcoded lime/green hexes that bypass the token system ---- */
[style*="#d1ff53" i],[style*="#cce843" i],[style*="#c6fd7f" i],
[style*="#a6c03d" i],[style*="#bad15c" i]{ color:#e63a55!important; }
/* ---- 6. Type: Sora display, Inter body ----
The mirror sets Geistvf via `[data-font="geist"] *` + !important (specificity
0,1,0), which outranks a bare `h1`. We match that selector shape exactly so
equal specificity + later cascade position wins, then raise headings above it. */
html body[data-font="geist"], html body.a-ca_body,
html body[data-font="geist"] *, html body.a-ca_body *{
font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
}
[data-font="geist"] h1, [data-font="geist"] h2, [data-font="geist"] h3,
[data-font="geist"] h4, [data-font="geist"] h5,
.a-ca_body h1, .a-ca_body h2, .a-ca_body h3, .a-ca_body h4, .a-ca_body h5,
[data-font="geist"] [class*="_h1"], [data-font="geist"] [class*="_h2"],
[data-font="geist"] [class*="_h3"], [data-font="geist"] [class*="heading"],
[data-font="geist"] [class*="opus-font-h"], [data-font="geist"] [class*="opus-font-custom"],
html body[data-font="geist"] h1, html body[data-font="geist"] h2,
html body[data-font="geist"] h3, html body[data-font="geist"] h4,
html body[data-font="geist"] h5, html body.a-ca_body h1, html body.a-ca_body h2,
html body.a-ca_body h3, html body.a-ca_body h4, html body.a-ca_body h5,
html body [class*="opus-font-h"], html body [class*="opus-font-custom"]{
font-family:"Sora","Inter",system-ui,-apple-system,sans-serif!important;
letter-spacing:-.02em;
}
/* code / mono surfaces keep a mono face */
[data-font="geist"] code, [data-font="geist"] pre, .a-ca_body code, .a-ca_body pre{
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
}
/* ---- 7. Injected cl!pme wordmark. Specificity has to clear the
`html body[data-font="geist"] *` font rule above (0,1,2), and the colour is
pinned rather than currentColor -- inheriting from the nav rendered it white
on the white light palette, i.e. invisible. ---- */
html body .clipme-logo{
display:inline-flex; align-items:center; line-height:1; white-space:nowrap;
}
html body .clipme-logo .clipme-word{
font-family:"Sora","Inter",system-ui,sans-serif!important;
font-weight:800!important; font-size:1.55rem; letter-spacing:-.04em;
color:#ffffff!important;
}
html body .clipme-logo .clipme-bang{ color:#e63a55!important; }
/* ---- 20. LIGHT text colour. 1,768 elements were rendering white on the white
ground -- the palette flip changed backgrounds but text kept inheriting the
mirror's white. clipme.com sets `body { color: var(--color-fg) }` and lets it
inherit; same here. Colour only. ---- */
html body[data-font="geist"], html body.a-ca_body{ color:#ffffff!important; }
html body[data-font="geist"] *, html body.a-ca_body *{ color:inherit; }
/* explicit white utilities -> light foreground */
html body [class*="text-color-white"], html body .a_text-color-white,
html body .white-underline, html body .cta-text, html body .is-highlighted{
color:#ffffff!important;
}
html body [class*="text-color-grey"], html body [class*="a_text-color-grey"]{
color:#9b9ba6!important;
}
/* things that must stay their own colour */
html body .clipme-hl{ color:#e63a55!important; }
html body .clipme-logo .clipme-bang{ color:#e63a55!important; }
html body .clipme-logo .clipme-word{ color:#ffffff!important; }
html body .clipme-freecta-btn, html body .clipme-freecta-btn *{ color:#08080a!important; }
/* red buttons keep white labels */
html body .button.is-primary, html body .button.is-primary *,
html body [class*="btn_primary"], html body [class*="btn_primary"] *,
html body [class*="button_primary"], html body [class*="button_primary"] *{
color:#08080a!important;
}
/* ---- 9. Inline free CTA + risk-reversal microcopy ---- */
.clipme-freecta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:22px 0}
.clipme-freecta-btn{display:inline-flex;align-items:center;justify-content:center;
padding:13px 30px;border-radius:999px;background:#e63a55;
font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:15px;text-decoration:none}
.clipme-freecta-btn:hover{background:#ff5a73}
.clipme-freecta-note,.clipme-reassure{
color:#9b9ba6;font-family:"Inter",system-ui,sans-serif;font-size:12.5px;letter-spacing:.01em}
.clipme-reassure{margin-top:10px}
/* ---- 10. Smartbanner: its sizing script was never captured, so the logo SVG
rendered 1424px wide and shoved the hero ~2800px down. ClipMe has no app. ---- */
.smartbanner, .smartbanner_content, .smartbanner_logo { display:none!important; }
/* ---- 11/12. Nav + dropdowns. Webflow's nav JS was not captured, so the mobile
panel stayed open (5712px) and every dropdown rendered expanded (one 14,709px).
Collapsed, and driven from CSS :hover/:focus so the menus still WORK. ---- */
@media (min-width:992px){
.a-ca_navbar_menu_mobile_top{ display:none!important; }
.a-ca_navbar, .a-ca_navbar_fixed-wrapper, .a-ca_navbar_component,
.a-ca_navbar_container, .a-ca_navbar_menu, .a-ca_navbar_menu-wrapper{
height:auto!important; max-height:none!important;
}
.a-ca_navbar_dropdown{ position:relative!important; }
.a-ca_navbar_dropdown_list{
display:none!important; position:absolute!important; top:100%!important; left:0!important;
min-width:240px; max-height:70vh; overflow-y:auto;
background:#08080a!important; border:1px solid #262630!important;
border-radius:16px!important; padding:10px!important; z-index:9999!important;
box-shadow:0 18px 50px rgba(0,0,0,.10)!important;
}
.a-ca_navbar_dropdown:hover > .a-ca_navbar_dropdown_list,
.a-ca_navbar_dropdown:focus-within > .a-ca_navbar_dropdown_list,
.a-ca_navbar_dropdown_list.w--open{ display:block!important; }
.a-ca_navbar_dropdown_toggle{ height:auto!important; }
.a-ca_navbar_dropdown_toggle_arrow{
height:auto!important; width:12px!important; max-width:12px!important; flex:0 0 12px!important;
}
.a-ca_navbar_dropdown_toggle_arrow svg{ width:12px!important; height:12px!important; }
}
/* ---- 13. Testimonial avatars (third-party photos were replaced by initials) ---- */
.clipme-avatar{
width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
justify-content:center;background:#e63a55;color:#fff!important;
font-family:"Sora","Inter",system-ui,sans-serif;font-weight:700;font-size:18px;
letter-spacing:-.01em;flex:0 0 56px;
}
.clipme-handle{color:#9b9ba6;font-size:13px;font-weight:400}
/* ---- 14. Body ground: clipme.com light #08080a ---- */
html body[data-font="geist"], html body.a-ca_body{ background-color:#08080a!important; }
/* ---- 15. clipme.com light backdrop, verbatim from globals.css html.light
body::before. Fixed, pointer-events:none, z-index:-1 -- paints behind
everything, intercepts nothing, touches no animation. ---- */
html body[data-font="geist"]::before, html body.a-ca_body::before{
content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image:
radial-gradient(58% 44% at 50% 0%, rgba(230,58,85,.16) 0%, rgba(230,58,85,0) 70%),
radial-gradient(42% 34% at 82% 5%, rgba(230,58,85,.09) 0%, rgba(230,58,85,0) 60%),
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px;
background-position:center top, right top, center center, center center;
}
/* ---- 16. Surfaces + remaining off-palette Webflow tokens -> clipme.com light ---- */
*{
--background--bg-background:#08080a!important;
--background--bg-popover:#131316!important;
--background--bg-accent:#1b1b1f!important;
--background--bg-input:#1b1b1f!important;
--background--bg-muted:#1b1b1f!important;
--background--bg-secondary:#1b1b1f!important;
--background--bg-secondary-80:#1b1b1fcc!important;
--bg--foreground:#131316!important;
--new_gray:#131316!important;
--opus-dark-bg:#08080a!important;
--ui--dark-primary:#131316!important;
--ui--border:#262630!important;
--ui--menu-background-blur:#08080ae6!important;
--text--text-foreground:#ffffff!important;
--text--text-primary:#ffffff!important;
--text--text-secondary-foreground:#ffffff!important;
--text--text-muted-foreground:#9b9ba6!important;
--text--light-secondary:#9b9ba6!important;
--text--secondary:#9b9ba6!important;
--text--text-transparent:#6b6b76!important;
--bluish-black:#ffffff!important;
--web--web-panel:#131316!important;
--border--border-border:#262630!important;
--border--border-muted:#262630!important;
--border--border-foreground:#262630!important;
--border--border-primary:#262630!important;
--text--text-muted:#9b9ba6!important;
--gainsboro-2:#9b9ba6!important;
--white-smoke:#9b9ba6!important;
--white-smoke-2:#9b9ba6!important;
--white-smoke-search:#131316!important;
--white-smoke-quote:#131316!important;
--white-smoke-f1f3f6:#131316!important;
--light-greyish-black:#131316!important;
--light-steel-blue:#9b9ba6!important;
--text-light:#9b9ba6!important;
--background--bg-success:#e63a55!important;
--text--text-success:#e63a55!important;
}
/* ---- 17. Off-palette classes with no token behind them ---- */
html body .a-ca_navbar_link_tag{ color:#08080a!important; background-color:#e63a55!important; }
/* ---- 19. Clip cards carried white borders that vanish on white ---- */
html body [class*="clip"], html body [class*="_card"], html body [class*="video"]{
border-color:#262630;
}
html body [style*="border-color: rgb(255, 255, 255)" i]{ border-color:#ffffff!important; }
/* ---- 21. Activity ticker pill. Matches clipme.com's ActivityTicker styling:
rounded-full, border-border, bg-elev, text-xs text-muted, green dot, bold
handle, faint timestamp. The fade is on the pill only -- it adds no scroll
trigger and touches nothing else. ---- */
.clipme-ticker{
display:inline-flex; align-items:center; gap:8px;
border:1px solid #262630; background:#131316;
border-radius:999px; padding:6px 14px; margin-bottom:14px;
font-family:"Inter",system-ui,sans-serif; font-size:12.5px; line-height:1.2;
color:#9b9ba6!important; white-space:nowrap;
}
.clipme-ticker{ opacity:1; transform:none; }
/* The hero wrapper is a flex container and a Webflow rule forces display:flex
on its children, so the pill was being shrunk to 30px while its own content
measured ~112px. Pin it back to an auto-width inline-flex item. */
html body .clipme-ticker{
display:inline-flex!important;
flex:0 0 auto!important;
width:auto!important; max-width:none!important; min-width:0;
align-self:center;
}
html body .clipme-ticker > span{ display:inline!important; flex:0 0 auto; }
html body .clipme-ticker > .clipme-ticker-dot{ display:inline-block!important; }
.clipme-ticker.is-in{
/* enhancement only -- fill-mode:none so a paused/throttled animation can
never leave the pill stuck invisible at frame 0 */
animation:clipme-tick-in .45s ease none;
}
@keyframes clipme-tick-in{
/* transform only. Animating opacity meant a paused or throttled animation
could hold the pill at frame 0 and hide it entirely -- which is exactly
what happened in a backgrounded tab. Movement never gates visibility. */
from{ transform:translateY(3px); }
to { transform:translateY(0); }
}
.clipme-ticker-dot{
width:7px; height:7px; border-radius:50%; background:#45e06a;
box-shadow:0 0 0 3px rgba(69,224,106,.18); flex:0 0 7px;
}
.clipme-ticker-handle{ color:#ffffff!important; font-weight:600; }
.clipme-ticker-ago{ color:#6b6b76!important; }
@media (prefers-reduced-motion:reduce){
.clipme-ticker.is-in{ animation:none; }
}
/* ---------- LIGHT (html.light) ---------- */
html.light /* ============================================================================
ClipMe theme overlay for the (OpusClip) Webflow mirror.
COLOR + TYPE ONLY. No layout, html.light no geometry, html.light no behavior — functionality is
identical to the original mirror.
Technique: Webflow re-declares its full token set on many component wrappers
(.a_autopilot_wrapper etc), html.light so :root alone gets shadowed by the closer
definition. Overriding on * with !important is what actually wins everywhere.
Loaded AFTER the Webflow CSS.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
--cm-bg:#ffffff; --cm-elev:#f6f6f8; --cm-elev2:#eeeef1; --cm-border:#e4e4e9;
--cm-fg:#16161a; --cm-muted:#5f5f6a; --cm-faint:#9a9aa3;
--cm-red:#e63a55; --cm-red-soft:#ff5a73; --cm-live:#45e06a; --cm-radius:16px;
}
html.light /* ---- 1. Accent tokens: every green / lime / gold / purple accent -> ClipMe red ---- */
*{
--new_green:#e63a55!important;
--ao_accent:#e63a55!important;
--accent--green-light:#ff5a73!important;
--accent--green-light-2:#ff5a73!important;
--lemon-green:#e63a55!important;
--medium-spring-green:#e63a55!important;
--yellow-green:#e63a55!important;
--bad15c:#e63a55!important;
--ao_orange:#e63a55!important;
--gold:#e63a55!important;
--yellow--400:#e63a55!important;
--playful-yellow:#ff5a73!important;
--opus-purple:#e63a55!important;
--opus-lake-blue:#e63a55!important;
--opus-light-blue:#ff5a73!important;
--opus-candy-blue:#ff5a73!important;
/* ---- 2. Surfaces: opus greys -> ClipMe blacks ---- */
--background--bg-background:#ffffff!important;
--background--bg-popover:#f6f6f8!important;
--background--bg-accent:#eeeef1!important;
--background--bg-input:#eeeef1!important;
--background--bg-muted:#eeeef1!important;
--background--bg-secondary:#eeeef1!important;
--background--bg-secondary-80:#eeeef1cc!important;
--bg--foreground:#f6f6f8!important;
--new_gray:#f6f6f8!important;
--opus-dark-bg:#ffffff!important;
--ui--dark-primary:#f6f6f8!important;
--ui--border:#e4e4e9!important;
--ui--menu-background-blur:#ffffffe6!important;
/* ---- 3. Text ---- */
--text--text-foreground:#16161a!important;
--text--text-primary:#16161a!important;
--text--text-secondary-foreground:#16161a!important;
--text--text-muted-foreground:#5f5f6a!important;
--text--light-secondary:#5f5f6a!important;
--text--secondary:#5f5f6a!important;
--text--text-transparent:#9a9aa3!important;
/* ---- 4. Status ---- */
--background--bg-success:#e63a55!important; /* CLIPME-FACTS: green reserved for the live-status dot only */
--text--text-success:#e63a55!important;
--background--bg-error:#e5484d!important; /* true error red, kept distinct */
--text--text-error:#e5484d!important;
}
html.light /* ---- 5. Hardcoded lime/green hexes that bypass the token system ---- */
[style*="#d1ff53" i], html.light [style*="#cce843" i], html.light [style*="#c6fd7f" i], html.light [style*="#a6c03d" i], html.light [style*="#bad15c" i]{ color:#e63a55!important; }
html.light /* ---- 6. Type: Sora display, html.light Inter body ----
The mirror sets Geistvf via `[data-font="geist"] *` + !important (specificity
0, html.light 1, html.light 0), html.light which outranks a bare `h1`. We match that selector shape exactly so
equal specificity + later cascade position wins, html.light then raise headings above it. */
html body[data-font="geist"], html.light body.a-ca_body, html.light body[data-font="geist"] *, html.light body.a-ca_body *{
font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
}
html.light [data-font="geist"] h1, html.light [data-font="geist"] h2, html.light [data-font="geist"] h3, html.light [data-font="geist"] h4, html.light [data-font="geist"] h5, html.light .a-ca_body h1, html.light .a-ca_body h2, html.light .a-ca_body h3, html.light .a-ca_body h4, html.light .a-ca_body h5, html.light [data-font="geist"] [class*="_h1"], html.light [data-font="geist"] [class*="_h2"], html.light [data-font="geist"] [class*="_h3"], html.light [data-font="geist"] [class*="heading"], html.light [data-font="geist"] [class*="opus-font-h"], html.light [data-font="geist"] [class*="opus-font-custom"], html.light body[data-font="geist"] h1, html.light body[data-font="geist"] h2, html.light body[data-font="geist"] h3, html.light body[data-font="geist"] h4, html.light body[data-font="geist"] h5, html.light body.a-ca_body h1, html.light body.a-ca_body h2, html.light body.a-ca_body h3, html.light body.a-ca_body h4, html.light body.a-ca_body h5, html.light body [class*="opus-font-h"], html.light body [class*="opus-font-custom"]{
font-family:"Sora","Inter",system-ui,-apple-system,sans-serif!important;
letter-spacing:-.02em;
}
html.light /* code / mono surfaces keep a mono face */
[data-font="geist"] code, html.light [data-font="geist"] pre, html.light .a-ca_body code, html.light .a-ca_body pre{
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
}
html.light /* ---- 7. Injected cl!pme wordmark. Specificity has to clear the
`html body[data-font="geist"] *` font rule above (0, html.light 1, html.light 2), html.light and the colour is
pinned rather than currentColor -- inheriting from the nav rendered it white
on the white light palette, html.light i.e. invisible. ---- */
html body .clipme-logo{
display:inline-flex; align-items:center; line-height:1; white-space:nowrap;
}
html.light body .clipme-logo .clipme-word{
font-family:"Sora","Inter",system-ui,sans-serif!important;
font-weight:800!important; font-size:1.55rem; letter-spacing:-.04em;
color:#16161a!important;
}
html.light body .clipme-logo .clipme-bang{ color:#e63a55!important; }
html.light /* ---- 20. LIGHT text colour. 1, html.light 768 elements were rendering white on the white
ground -- the palette flip changed backgrounds but text kept inheriting the
mirror's white. clipme.com sets `body{ color: var(--color-fg) }
html.light ` and lets it
inherit; same here. Colour only. ---- */
html body[data-font="geist"], html.light body.a-ca_body{ color:#16161a!important; }
html.light body[data-font="geist"] *, html.light body.a-ca_body *{ color:inherit; }
html.light /* explicit white utilities -> light foreground */
html body [class*="text-color-white"], html.light body .a_text-color-white, html.light body .white-underline, html.light body .cta-text, html.light body .is-highlighted{
color:#16161a!important;
}
html.light body [class*="text-color-grey"], html.light body [class*="a_text-color-grey"]{
color:#5f5f6a!important;
}
html.light /* things that must stay their own colour */
html body .clipme-hl{ color:#e63a55!important; }
html.light body .clipme-logo .clipme-bang{ color:#e63a55!important; }
html.light body .clipme-logo .clipme-word{ color:#16161a!important; }
html.light body .clipme-freecta-btn, html.light body .clipme-freecta-btn *{ color:#ffffff!important; }
html.light /* red buttons keep white labels */
html body .button.is-primary, html.light body .button.is-primary *, html.light body [class*="btn_primary"], html.light body [class*="btn_primary"] *, html.light body [class*="button_primary"], html.light body [class*="button_primary"] *{
color:#ffffff!important;
}
html.light /* ---- 9. Inline free CTA + risk-reversal microcopy ---- */
.clipme-freecta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:22px 0}
html.light .clipme-freecta-btn{display:inline-flex;align-items:center;justify-content:center;
padding:13px 30px;border-radius:999px;background:#e63a55;
font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:15px;text-decoration:none}
html.light .clipme-freecta-btn:hover{background:#ff5a73}
html.light .clipme-freecta-note, html.light .clipme-reassure{
color:#5f5f6a;font-family:"Inter",system-ui,sans-serif;font-size:12.5px;letter-spacing:.01em}
html.light .clipme-reassure{margin-top:10px}
html.light /* ---- 10. Smartbanner: its sizing script was never captured, html.light so the logo SVG
rendered 1424px wide and shoved the hero ~2800px down. ClipMe has no app. ---- */
.smartbanner, html.light .smartbanner_content, html.light .smartbanner_logo{ display:none!important; }
html.light /* ---- 11/12. Nav + dropdowns. Webflow's nav JS was not captured, html.light so the mobile
panel stayed open (5712px) and every dropdown rendered expanded (one 14, html.light 709px).
Collapsed, html.light and driven from CSS :hover/:focus so the menus still WORK. ---- */
@media (min-width:992px){
.a-ca_navbar_menu_mobile_top{ display:none!important; }
html.light .a-ca_navbar, html.light .a-ca_navbar_fixed-wrapper, html.light .a-ca_navbar_component, html.light .a-ca_navbar_container, html.light .a-ca_navbar_menu, html.light .a-ca_navbar_menu-wrapper{
height:auto!important; max-height:none!important;
}
html.light .a-ca_navbar_dropdown{ position:relative!important; }
html.light .a-ca_navbar_dropdown_list{
display:none!important; position:absolute!important; top:100%!important; left:0!important;
min-width:240px; max-height:70vh; overflow-y:auto;
background:#ffffff!important; border:1px solid #e4e4e9!important;
border-radius:16px!important; padding:10px!important; z-index:9999!important;
box-shadow:0 18px 50px rgba(0,0,0,.10)!important;
}
html.light .a-ca_navbar_dropdown:hover > .a-ca_navbar_dropdown_list, html.light .a-ca_navbar_dropdown:focus-within > .a-ca_navbar_dropdown_list, html.light .a-ca_navbar_dropdown_list.w--open{ display:block!important; }
html.light .a-ca_navbar_dropdown_toggle{ height:auto!important; }
html.light .a-ca_navbar_dropdown_toggle_arrow{
height:auto!important; width:12px!important; max-width:12px!important; flex:0 0 12px!important;
}
html.light .a-ca_navbar_dropdown_toggle_arrow svg{ width:12px!important; height:12px!important; }
}
html.light /* ---- 13. Testimonial avatars (third-party photos were replaced by initials) ---- */
.clipme-avatar{
width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
justify-content:center;background:#e63a55;color:#fff!important;
font-family:"Sora","Inter",system-ui,sans-serif;font-weight:700;font-size:18px;
letter-spacing:-.01em;flex:0 0 56px;
}
html.light .clipme-handle{color:#5f5f6a;font-size:13px;font-weight:400}
html.light /* ---- 14. Body ground: clipme.com light #ffffff ---- */
html body[data-font="geist"], html.light body.a-ca_body{ background-color:#ffffff!important; }
html.light /* ---- 15. clipme.com light backdrop, html.light verbatim from globals.css html.light
body::before. Fixed, html.light pointer-events:none, html.light z-index:-1 -- paints behind
everything, html.light intercepts nothing, html.light touches no animation. ---- */
html body[data-font="geist"]::before, html.light body.a-ca_body::before{
content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image:
radial-gradient(58% 44% at 50% 0%, rgba(230,58,85,.07) 0%, rgba(230,58,85,0) 70%),
linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
background-size:100% 100%, 40px 40px, 40px 40px;
background-position:center top, center center, center center;
}
html.light /* ---- 16. Surfaces + remaining off-palette Webflow tokens -> clipme.com light ---- */
*{
--background--bg-background:#ffffff!important;
--background--bg-popover:#f6f6f8!important;
--background--bg-accent:#eeeef1!important;
--background--bg-input:#eeeef1!important;
--background--bg-muted:#eeeef1!important;
--background--bg-secondary:#eeeef1!important;
--background--bg-secondary-80:#eeeef1cc!important;
--bg--foreground:#f6f6f8!important;
--new_gray:#f6f6f8!important;
--opus-dark-bg:#ffffff!important;
--ui--dark-primary:#f6f6f8!important;
--ui--border:#e4e4e9!important;
--ui--menu-background-blur:#ffffffe6!important;
--text--text-foreground:#16161a!important;
--text--text-primary:#16161a!important;
--text--text-secondary-foreground:#16161a!important;
--text--text-muted-foreground:#5f5f6a!important;
--text--light-secondary:#5f5f6a!important;
--text--secondary:#5f5f6a!important;
--text--text-transparent:#9a9aa3!important;
--bluish-black:#16161a!important;
--web--web-panel:#f6f6f8!important;
--border--border-border:#e4e4e9!important;
--border--border-muted:#e4e4e9!important;
--border--border-foreground:#e4e4e9!important;
--border--border-primary:#e4e4e9!important;
--text--text-muted:#5f5f6a!important;
--gainsboro-2:#5f5f6a!important;
--white-smoke:#5f5f6a!important;
--white-smoke-2:#5f5f6a!important;
--white-smoke-search:#f6f6f8!important;
--white-smoke-quote:#f6f6f8!important;
--white-smoke-f1f3f6:#f6f6f8!important;
--light-greyish-black:#f6f6f8!important;
--light-steel-blue:#5f5f6a!important;
--text-light:#5f5f6a!important;
--background--bg-success:#e63a55!important;
--text--text-success:#e63a55!important;
}
html.light /* ---- 17. Off-palette classes with no token behind them ---- */
html body .a-ca_navbar_link_tag{ color:#ffffff!important; background-color:#e63a55!important; }
html.light /* ---- 19. Clip cards carried white borders that vanish on white ---- */
html body [class*="clip"], html.light body [class*="_card"], html.light body [class*="video"]{
border-color:#e4e4e9;
}
html.light body [style*="border-color: rgb(255, html.light 255, html.light 255)" i]{ border-color:#16161a!important; }
html.light /* ---- 21. Activity ticker pill. Matches clipme.com's ActivityTicker styling:
rounded-full, html.light border-border, html.light bg-elev, html.light text-xs text-muted, html.light green dot, html.light bold
handle, html.light faint timestamp. The fade is on the pill only -- it adds no scroll
trigger and touches nothing else. ---- */
.clipme-ticker{
display:inline-flex; align-items:center; gap:8px;
border:1px solid #e4e4e9; background:#f6f6f8;
border-radius:999px; padding:6px 14px; margin-bottom:14px;
font-family:"Inter",system-ui,sans-serif; font-size:12.5px; line-height:1.2;
color:#5f5f6a!important; white-space:nowrap;
}
html.light .clipme-ticker{ opacity:1; transform:none; }
html.light /* The hero wrapper is a flex container and a Webflow rule forces display:flex
on its children, html.light so the pill was being shrunk to 30px while its own content
measured ~112px. Pin it back to an auto-width inline-flex item. */
html body .clipme-ticker{
display:inline-flex!important;
flex:0 0 auto!important;
width:auto!important; max-width:none!important; min-width:0;
align-self:center;
}
html.light body .clipme-ticker > span{ display:inline!important; flex:0 0 auto; }
html.light body .clipme-ticker > .clipme-ticker-dot{ display:inline-block!important; }
html.light .clipme-ticker.is-in{
/* enhancement only -- fill-mode:none so a paused/throttled animation can
never leave the pill stuck invisible at frame 0 */
animation:clipme-tick-in .45s ease none;
}
@keyframes clipme-tick-in{
/* transform only. Animating opacity meant a paused or throttled animation
could hold the pill at frame 0 and hide it entirely -- which is exactly
what happened in a backgrounded tab. Movement never gates visibility. */
from{ transform:translateY(3px); }
html.light to{ transform:translateY(0); }
}
html.light .clipme-ticker-dot{
width:7px; height:7px; border-radius:50%; background:#45e06a;
box-shadow:0 0 0 3px rgba(69,224,106,.18); flex:0 0 7px;
}
html.light .clipme-ticker-handle{ color:#16161a!important; font-weight:600; }
html.light .clipme-ticker-ago{ color:#9a9aa3!important; }
@media (prefers-reduced-motion:reduce){ html.light .clipme-ticker.is-in{ animation:none; }
}
/* ---- Theme toggle button. Fixed, bottom-left, out of the layout flow.
Was bottom-right at z-index 99999 -- CTA rows and their risk-line
disclaimers ("free during beta - no card - watermark-free") also cluster
bottom-right throughout the page, so the always-on-top toggle regularly
sat over that text mid-scroll. Bottom-left has no competing fixed/sticky
element on any page in this mirror. ---- */
.clipme-theme-toggle{
position:fixed; left:18px; bottom:18px; z-index:99999;
padding:9px 18px; border-radius:999px; cursor:pointer;
font-family:"Inter",system-ui,sans-serif; font-size:13px; font-weight:600;
background:#e63a55; color:#fff!important; border:none;
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.clipme-theme-toggle:hover{ background:#ff5a73; }
/* ---- BUTTONS -> clipme.com. The mirror's primary CTA (.a-ca_button) rendered
white on white with white text -- invisible in the dark theme. clipme.com's
primary is a red pill with white text; secondaries are outlined. ---- */
/* .a-ca_button.is-outline is the SECONDARY modifier -- it stays outlined, so
every primary rule below excludes it. */
html body .a-ca_button:not(.is-outline),
html body .a-ca_button.is-navbar:not(.is-outline),
html body .a-ca_button.nav-utm:not(.is-outline),
html body a.a-ca_button:not(.is-outline), html body button.a-ca_button:not(.is-outline){
background-color:#e63a55!important;
border-color:#e63a55!important;
border-radius:999px!important;
}
html body .a-ca_button:not(.is-outline), html body .a-ca_button:not(.is-outline) *{ color:#ffffff!important; }
html body .a-ca_button:not(.is-outline):hover{ background-color:#ff5a73!important; border-color:#ff5a73!important; }
/* secondary / outline */
html body .a-ca_button_outline, html body .a-ca_button.is-outline{
background-color:transparent!important;
border:1px solid #262630!important;
border-radius:999px!important;
}
html body .a-ca_button_outline, html body .a-ca_button_outline *,
html body .a-ca_button.is-outline, html body .a-ca_button.is-outline *{ color:#ffffff!important; }
html body .a-ca_button_outline:hover, html body .a-ca_button.is-outline:hover{ border-color:#e63a55!important; }
html.light body .a-ca_button_outline, html.light body .a-ca_button.is-outline{ border:1px solid #e4e4e9!important; background-color:transparent!important; }
html.light body .a-ca_button_outline, html.light body .a-ca_button_outline *,
html.light body .a-ca_button.is-outline, html.light body .a-ca_button.is-outline *{ color:#16161a!important; }
html.light body .a-ca_button:not(.is-outline), html.light body .a-ca_button:not(.is-outline) *{ color:#ffffff!important; }
/* the smartbanner button is hidden with the banner, but keep it consistent */
html body .smartbanner_open-app{ background-color:#e63a55!important; border-color:#e63a55!important; }
/* ---- EYEBROW + TICKER SIZING ----
Eyebrow up, ticker pill down, so the hero reads eyebrow-first. ---- */
html body #hero-heading-v1 .opus-font-section-lg,
html body .opus-font-section-lg{
/* Continuous scale, not fixed steps. The previous 22 -> 16 -> 13px breakpoints fit at
exactly three widths and overflowed everywhere between them — at ~800px the line
was still nowrap at 16px and ran off the right edge mid-word. clamp() ties the size
to the viewport so one line always fits, and the two vw terms let it shrink further
on very narrow screens before wrapping is ever needed. */
font-size:clamp(10.5px, 2.9vw, 22px)!important;
font-weight:800!important;
letter-spacing:normal!important;
line-height:1.25!important;
white-space:nowrap!important;
max-width:100%!important;
overflow-wrap:normal!important;
}
@media (max-width:420px){
/* Below this a single line stops being legible at any size — let it wrap to two. */
html body .opus-font-section-lg{
font-size:12px!important; white-space:normal!important; text-wrap:balance;
}
}
/* ticker pill: smaller than the eyebrow so it reads as a secondary note */
html body .clipme-ticker{
font-size:11px!important;
padding:4px 11px!important;
gap:6px!important;
margin-bottom:10px!important;
}
html body .clipme-ticker-dot{
width:6px!important; height:6px!important; flex:0 0 6px!important;
box-shadow:0 0 0 2.5px rgba(69,224,106,.18)!important;
}
/* ---- ScoreboardHero, ported from clipme.com. Replaces the opus carousel in
.home0625_header_anim_swiper. Dark surface in both themes on purpose -- it is
a device/stream frame, and clipme.com renders it dark in light mode too. ---- */
.clipme-sh{ width:100%; display:flex; justify-content:center; }
.clipme-sh-frame{
width:100%; max-width:460px; position:relative; overflow:hidden;
border-radius:2rem; padding:16px;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
background:linear-gradient(160deg,#141416 0%,#0d0d0f 48%,#08080a 100%);
box-shadow:0 40px 90px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
outline:1px solid rgba(255,255,255,.10); outline-offset:-1px;
}
.clipme-sh-bar{
display:flex; align-items:center; justify-content:space-between; gap:8px;
border-radius:12px; padding:10px 14px;
background:rgba(255,255,255,.04); outline:1px solid rgba(255,255,255,.06); outline-offset:-1px;
}
.clipme-sh-barleft{ display:flex; align-items:center; gap:10px; min-width:0; }
.clipme-sh-live{
width:10px; height:10px; border-radius:50%; background:#45e06a; flex:0 0 10px;
box-shadow:0 0 0 0 rgba(69,224,106,.7); animation:clipme-sh-ping 1.8s ease-out infinite;
}
.clipme-sh-handle{ color:rgba(255,255,255,.40)!important; font-size:12.5px; }
.clipme-sh-watching{ color:rgba(255,255,255,.65)!important; font-size:12.5px; }
.clipme-sh-brand{ color:rgba(255,255,255,.35)!important; font-size:11px; letter-spacing:.04em; flex:0 0 auto; }
.clipme-sh-main{ margin-top:12px; display:flex; align-items:stretch; gap:12px; }
.clipme-sh-clipcol{ width:46%; flex:0 0 46%; position:relative; }
.clipme-sh-clip{
position:relative; border-radius:12px; overflow:hidden;
outline:1px solid rgba(255,255,255,.10); outline-offset:-1px;
transition:outline-color .3s ease, box-shadow .3s ease;
}
.clipme-sh-clip.is-spike{ outline-color:rgba(230,58,85,.70); box-shadow:0 0 0 3px rgba(230,58,85,.35); }
.clipme-sh-clip.is-clipped{ outline-color:rgba(69,224,106,.60); }
/* the portal's signature frame: white 9:16 shell, 1:1 crop centred inside */
.clipme-sh-shell{ position:relative; aspect-ratio:9/16; display:flex; align-items:center; justify-content:center; background:#fff; }
.clipme-sh-crop{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; }
.clipme-sh-poster,.clipme-sh-vidwrap video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clipme-sh-vidwrap video{ animation:clipme-sh-fade .55s ease; }
.clipme-sh-grad{ position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent 45%, rgba(0,0,0,.45)); }
.clipme-sh-chip{
position:absolute; left:8px; top:8px; border-radius:999px; padding:2px 9px;
font-size:10.5px; font-weight:700; line-height:1.5; opacity:0;
}
.clipme-sh-chip.is-clipping{ opacity:1; background:#e63a55; color:#fff!important; }
.clipme-sh-chip.is-clipped{ opacity:1; background:#45e06a; color:#0a1f0f!important; font-size:12px; animation:clipme-sh-pop .35s ease; }
.clipme-sh-posted{
position:absolute; left:6px; right:6px; bottom:6px; border-radius:6px;
background:rgba(0,0,0,.65); padding:4px 8px; text-align:center;
font-size:9.5px; color:rgba(255,255,255,.80)!important; opacity:0;
transition:opacity .3s ease; backdrop-filter:blur(4px);
}
.clipme-sh-scrub{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.15); }
.clipme-sh-scrubfill{ height:100%; width:0; background:#45e06a; }
.clipme-sh-chatcol{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.clipme-sh-chathead{
display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.30)!important;
}
.clipme-sh-chatstate.is-live{ color:#ff5a73!important; }
.clipme-sh-msgs{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; overflow:hidden; }
.clipme-sh-msg{ font-size:12px; line-height:1.25; animation:clipme-sh-msg .25s ease; color:rgba(255,255,255,.55)!important; }
.clipme-sh-msg.is-hype{ font-weight:600; color:rgba(255,255,255,.95)!important; }
.clipme-sh-colon{ color:rgba(255,255,255,.25)!important; }
.clipme-sh-velrow{
display:flex; align-items:center; justify-content:space-between; margin-top:8px;
font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.30)!important;
}
.clipme-sh-vel{ height:5px; border-radius:3px; background:rgba(255,255,255,.10); overflow:hidden; margin-top:4px; }
.clipme-sh-velfill{ height:100%; width:20%; background:#45e06a; transition:width .5s ease; }
.clipme-sh-caption{ margin-top:14px; text-align:center; font-size:15px; color:rgba(255,255,255,.92)!important; }
.clipme-sh-sub{ margin-top:6px; text-align:center; font-size:11px; color:rgba(255,255,255,.40)!important; }
.clipme-sh-dots{ margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; }
.clipme-sh-dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.20); transition:all .3s ease; }
.clipme-sh-dot.is-on{ width:22px; background:#45e06a; }
@keyframes clipme-sh-ping{ 0%{box-shadow:0 0 0 0 rgba(69,224,106,.7)} 70%{box-shadow:0 0 0 7px rgba(69,224,106,0)} 100%{box-shadow:0 0 0 0 rgba(69,224,106,0)} }
@keyframes clipme-sh-fade{ from{opacity:0} to{opacity:1} }
@keyframes clipme-sh-pop{ 0%{transform:scale(.8);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes clipme-sh-msg{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@keyframes clipme-sh-scrub{ from{width:0} to{width:100%} }
@media (max-width:600px){ .clipme-sh-frame{ padding:12px; border-radius:1.5rem; } .clipme-sh-caption{ font-size:13px; } }
@media (prefers-reduced-motion:reduce){
.clipme-sh-live,.clipme-sh-vidwrap video,.clipme-sh-msg,.clipme-sh-chip.is-clipped{ animation:none!important; }
.clipme-sh-scrubfill{ animation:none!important; }
}
/* ---- The mirrored cookie/consent banner covers the hero and belongs to
opus.pro's vendor stack, which was never captured -- it cannot be dismissed
and has no working consent logic behind it. Hidden. ---- */
#onetrust-consent-sdk, .onetrust-pc-dark-filter, #onetrust-banner-sdk,
[id*="onetrust"], [class*="ot-sdk"], [id*="cookie-banner"], [class*="cookie-banner"],
[class*="consent-banner"]{ display:none!important; }
html body{ overflow:auto!important; }
/* ---- Wide live-clipping panel. Replaces opus's baked workflow.avif.
Chat + velocity left · live stream centre · clips ejecting right.
Dark in both themes -- it is a stream device, not a page surface. ---- */
.clipme-wp{ width:100%; display:flex; justify-content:center; }
.clipme-wp-frame{
width:100%; max-width:1200px; border-radius:1.75rem; padding:18px;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
background:linear-gradient(160deg,#141416 0%,#0d0d0f 48%,#08080a 100%);
box-shadow:0 40px 90px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
outline:1px solid rgba(255,255,255,.10); outline-offset:-1px;
}
.clipme-wp-bar{
display:flex; align-items:center; justify-content:space-between; gap:8px;
border-radius:12px; padding:10px 15px; background:rgba(255,255,255,.04);
outline:1px solid rgba(255,255,255,.06); outline-offset:-1px;
}
.clipme-wp-barleft{ display:flex; align-items:center; gap:10px; min-width:0; }
.clipme-wp-live{
width:10px; height:10px; border-radius:50%; background:#45e06a; flex:0 0 10px;
animation:clipme-sh-ping 1.8s ease-out infinite;
}
.clipme-wp-handle{ color:rgba(255,255,255,.42)!important; font-size:12.5px; }
.clipme-wp-dim{ color:rgba(255,255,255,.65)!important; font-size:12.5px; }
.clipme-wp-brand{ color:rgba(255,255,255,.35)!important; font-size:11px; letter-spacing:.04em; }
.clipme-wp-body{
margin-top:14px; display:grid;
grid-template-columns:170px minmax(0,1fr) 240px; /* clips · stage · chat */
gap:18px; align-items:stretch;
}
.clipme-wp-col{ min-width:0; display:flex; flex-direction:column; }
.clipme-wp-railcol,.clipme-wp-chatcol{ justify-content:flex-start; }
.clipme-wp-label{
display:flex; align-items:center; justify-content:space-between; margin-bottom:7px;
font-size:10px; text-transform:uppercase; letter-spacing:.08em;
color:rgba(255,255,255,.30)!important;
}
.clipme-wp-state.is-live{ color:#ff5a73!important; }
/* left: chat */
.clipme-wp-msgs{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
justify-content:flex-end; gap:2px; overflow:hidden;
}
/* flex:0 0 auto is load-bearing. In a max-height flex column these lines shrink to fit
instead of overflowing, and squashed lines render on top of one another — the chat read
as a smear of overlapping text on mobile. */
.clipme-wp-msg{
flex:0 0 auto; font-size:11.5px; line-height:1.35;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
animation:clipme-sh-msg .25s ease; color:rgba(255,255,255,.55)!important;
}
.clipme-wp-msg.is-hype{ font-weight:600; color:rgba(255,255,255,.95)!important; }
.clipme-wp-colon{ color:rgba(255,255,255,.25)!important; }
.clipme-wp-vellabel{ margin-top:10px; margin-bottom:4px; }
.clipme-wp-vel{ height:5px; border-radius:3px; background:rgba(255,255,255,.10); overflow:hidden; }
.clipme-wp-velfill{ height:100%; width:20%; background:#45e06a; transition:width .5s ease; }
/* centre: the stream */
.clipme-wp-stage{
position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9;
outline:1px solid rgba(255,255,255,.10); outline-offset:-1px;
transition:outline-color .3s ease, box-shadow .3s ease; background:#000;
}
.clipme-wp-stage.is-spike{ outline-color:rgba(230,58,85,.70); box-shadow:0 0 0 3px rgba(230,58,85,.35); }
.clipme-wp-stage.is-clipped{ outline-color:rgba(69,224,106,.60); }
.clipme-wp-poster,.clipme-wp-vid video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clipme-wp-vid video{ animation:clipme-sh-fade .55s ease; }
.clipme-wp-stagegrad{ position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to bottom, rgba(0,0,0,.30), transparent 45%, rgba(0,0,0,.45)); }
.clipme-wp-chip{
position:absolute; left:10px; top:10px; border-radius:999px; padding:3px 10px;
font-size:11px; font-weight:700; opacity:0;
}
.clipme-wp-chip.is-clipping{ opacity:1; background:#e63a55; color:#fff!important; }
.clipme-wp-chip.is-clipped{ opacity:1; background:#45e06a; color:#0a1f0f!important; animation:clipme-sh-pop .35s ease; }
.clipme-wp-scrub{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.15); }
.clipme-wp-scrubfill{ height:100%; width:0; background:#45e06a; }
.clipme-wp-caption{ margin-top:10px; text-align:center; font-size:13.5px; color:rgba(255,255,255,.90)!important; }
/* right: clips ejecting */
.clipme-wp-count{ color:#45e06a!important; font-weight:700; }
.clipme-wp-rail{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.clipme-wp-dest{ margin-top:10px; text-align:center; font-size:10.5px; color:rgba(255,255,255,.45)!important; }
@keyframes clipme-wp-eject{ from{opacity:0; transform:translateX(14px) scale(.96)} to{opacity:1; transform:none} }
@media (max-width:1000px){
.clipme-wp-body{ grid-template-columns:120px minmax(0,1fr) 190px; gap:12px; }
}
@media (max-width:760px){
.clipme-wp-body{ grid-template-columns:1fr; }
.clipme-wp-railcol{ display:none; }
.clipme-wp-frame{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
.clipme-wp-live,.clipme-wp-vid video,.clipme-wp-msg,.clipme-wp-clip,.clipme-wp-chip.is-clipped{ animation:none!important; }
.clipme-wp-scrubfill{ animation:none!important; }
}
/* ---- wide-panel vertical balance. The side columns were as tall as
stage + caption, so chat bunched at the bottom under a void and the
velocity meter fell past the frame. Pin all three columns to the stage's
height and let each distribute inside it. ---- */
html body .clipme-wp-body{ align-items:start; }
html body .clipme-wp-stagecol{ display:flex; flex-direction:column; }
html body .clipme-wp-railcol, html body .clipme-wp-chatcol{
height:100%; display:flex; flex-direction:column;
}
/* the stage sets the height; side columns match it and stop before the caption */
html body .clipme-wp-body{ grid-template-rows:auto; }
html body .clipme-wp-chatcol .clipme-wp-msgs{
flex:1 1 auto; justify-content:flex-end; padding-bottom:2px;
}
html body .clipme-wp-vellabel{ margin-top:8px; }
html body .clipme-wp-chatcol .clipme-wp-vel{ margin-bottom:2px; }
/* clips fill downward from the label, no trailing gap */
html body .clipme-wp-rail{ flex:0 1 auto; }
html body .clipme-wp-dest{ margin-top:auto; padding-top:10px; }
/* denser chat so the column reads full rather than half-empty */
html body .clipme-wp-msg{ font-size:11px; line-height:1.45; }
/* ---- Live-feed cards, matching clipme.com: white 9:16 shell with the 1:1 crop
centred inside it, tap / look-ahead above, timecode / auto-cut below. ---- */
html body .clipme-wp-body{ grid-template-columns:118px minmax(0,1fr) 240px; }
html body .clipme-wp-rail{ gap:9px; }
.clipme-wp-clip{
position:relative; flex:0 0 auto; border-radius:9px; overflow:hidden;
animation:clipme-wp-eject .45s cubic-bezier(.2,.8,.2,1) both;
outline:1px solid rgba(255,255,255,.12); outline-offset:-1px;
}
/* Release the Webflow banner shape so the panel is not clipped to 154px. */
html body .clipme-wp-host{
aspect-ratio:auto!important; height:auto!important; max-height:none!important;
overflow:visible!important;
}
/* The white pill: clipme.com's own clip shell — a white 9:16 card with the crop set into
it, matching the "clipped ✓" card. This was tried once before as a flat white shell and
reverted because the crop floated in the middle and read as two white bars; the fix is
not to darken the shell but to give the crop more of the card and round the corners, so
it reads as a clip in a white frame rather than a letterbox. */
.clipme-wp-shell{
position:relative; aspect-ratio:9/16; background:#fff; overflow:hidden;
display:flex; align-items:center; justify-content:center;
border-radius:11px; padding:5px;
}
.clipme-wp-shell .clipme-wp-blur{ display:none; }
.clipme-wp-shell .clipme-wp-crop{ z-index:1; }
.clipme-wp-crop{
position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:7px;
}
.clipme-wp-crop img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sized to the "clipped ✓" pill above rather than the 7px they were: a rounded pill,
11px, real padding. At the old size the labels were legible only if you leaned in,
which defeats the point of labelling the mechanism at all. */
.clipme-wp-b{
position:absolute; font-family:"JetBrains Mono",ui-monospace,monospace;
font-size:9.5px; font-weight:700; line-height:1; padding:3px 8px; border-radius:999px;
background:#fff; color:#101014!important;
box-shadow:0 2px 8px -3px rgba(0,0,0,.75); white-space:nowrap;
}
.clipme-wp-b.ok{ background:#45e06a; color:#0a1f0f!important; }
.clipme-wp-b.cut{ background:#101014; color:rgba(255,255,255,.92)!important; }
.clipme-wp-b.bl{ background:rgba(10,10,12,.82); color:rgba(255,255,255,.88)!important; }
.clipme-wp-b.tl{ left:4px; top:4px; }
.clipme-wp-b.tr{ right:4px; top:4px; }
.clipme-wp-b.bl{ left:4px; bottom:4px; }
.clipme-wp-b.br{ right:4px; bottom:4px; }
/* The translucent variants that used to live here were declared after the pill rules
and quietly won, so the badges rendered in the old style on a white shell. */
@media (max-width:1000px){ html body .clipme-wp-body{ grid-template-columns:96px minmax(0,1fr) 190px; } }
/* ---- 23. MomentDetectionViz (clipme-theme.js momentViz). Replaces opus's Rive
"AI editor" container — the Rive runtime was never captured in this mirror, so
that slot rendered nothing. Canvas sizes to the box; colours are read from the
theme tokens at paint time, so it follows the light/dark toggle. ---- */
html body .clipme-md{
position:relative; width:100%; min-height:420px; aspect-ratio:3/4;
border-radius:var(--cm-radius,16px); overflow:hidden;
background:radial-gradient(120% 90% at 50% 0%, #17171d 0%, #08080a 70%);
border:1px solid #262630;
}
html body .clipme-md canvas{ display:block; width:100%; height:100%; }
html.light body .clipme-md{
background:radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f6f6f8 70%);
border-color:#e4e4e9;
}
@media (max-width:700px){ html body .clipme-md{ min-height:360px; } }
/* ---- 24. Prompt panel (clipme-theme.js promptPanel). Replaces opus's baked
ClipAnything.avif in the Prompt Mode slot. Populated on purpose: a real source,
a typed request, detected chips, a filmstrip that scans and locks one frame, and
a live clip count — the same density opus fills this slot with. ---- */
html body .clipme-pm{
position:relative; display:flex; flex-direction:column; gap:12px;
padding:22px; border-radius:var(--cm-radius,16px);
background:linear-gradient(180deg,#15151b 0%,#0b0b0e 100%);
border:1px solid #262630; min-height:420px;
font-family:"Inter",system-ui,sans-serif;
}
html body .clipme-pm-head{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9b9ba6}
html body .clipme-pm-live{
width:7px;height:7px;border-radius:50%;background:#45e06a;flex:0 0 auto;
box-shadow:0 0 0 0 rgba(69,224,106,.5); animation:clipmePmPulse 2.4s ease-out infinite;
}
@keyframes clipmePmPulse{0%{box-shadow:0 0 0 0 rgba(69,224,106,.45)}70%{box-shadow:0 0 0 7px rgba(69,224,106,0)}100%{box-shadow:0 0 0 0 rgba(69,224,106,0)}}
html body .clipme-pm-src{color:#fff!important;font-weight:600;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
html body .clipme-pm-dim{color:#6b6b76!important}
html body .clipme-pm-label{
font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b76!important;
font-family:"JetBrains Mono",ui-monospace,monospace; margin-top:4px;
}
html body .clipme-pm-field{
display:flex;align-items:center;gap:2px;min-height:46px;padding:12px 14px;
border:1px solid #2e2e3a;border-radius:11px;background:#101015;
font-size:15px;color:#fff!important;line-height:1.35;
}
html body .clipme-pm-caret{
display:inline-block;width:2px;height:17px;background:#e63a55;
animation:clipmePmCaret 1.05s step-end infinite;
}
@keyframes clipmePmCaret{0%,100%{opacity:1}50%{opacity:0}}
html body .clipme-pm-tags{display:flex;flex-wrap:wrap;gap:7px}
html body .clipme-pm-tag{
padding:5px 11px;border-radius:999px;border:1px solid #2e2e3a;background:#131319;
font-size:12px;color:#9b9ba6!important;
transition:background .28s cubic-bezier(.22,1,.36,1),border-color .28s,color .28s;
}
html body .clipme-pm-tag.on{
background:rgba(230,58,85,.16);border-color:#e63a55;color:#ff8fa0!important;
}
html body .clipme-pm-strip{
display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:2px;
}
html body .clipme-pm-cell{
position:relative;aspect-ratio:9/16;border-radius:7px;overflow:hidden;
background:#16161d;border:1px solid #24242e;
transition:border-color .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1);
}
/* Source frames are 440x248 (16:9) sitting in a 9:16 cell. The ![]()
had no
rules at all, so it rendered at natural size, top-aligned, leaving the bottom
half empty. Blur-pad instead: a scaled, blurred copy fills the cell, the real
frame sits full-width and centred on top. */
html body .clipme-pm-cell img,html body .clipme-pm-cell video{position:absolute;display:block}
/* Fill the whole 9:16 tile. The source is a 16:9 broadcast frame, so `cover` throws
away most of its width — biasing the crop above centre keeps faces in the tile
instead of chests, which is where the action sits in this footage. */
html body .clipme-pm-cell .fg{
inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 38%;
}
html body .clipme-pm-cell i{
position:absolute;inset:0;opacity:0;
background:linear-gradient(150deg,#2a2a36 0%,#3a2630 55%,#241d24 100%);
transition:opacity .34s ease;
}
html body .clipme-pm-cell.lit i{opacity:1}
html body .clipme-pm-cell.on{
border-color:#e63a55;transform:translateY(-3px);
box-shadow:0 0 0 1px #e63a55,0 8px 20px -10px rgba(230,58,85,.75);
}
html body .clipme-pm-foot{
margin-top:auto;padding-top:12px;border-top:1px solid #1e1e26;
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#9b9ba6!important;
}
html body .clipme-pm-count{color:#45e06a!important;font-weight:600;font-variant-numeric:tabular-nums}
html.light body .clipme-pm{background:linear-gradient(180deg,#ffffff 0%,#f6f6f8 100%);border-color:#e4e4e9}
html.light body .clipme-pm-field{background:#fff;border-color:#e4e4e9;color:#16161a!important}
html.light body .clipme-pm-src{color:#16161a!important}
html.light body .clipme-pm-tag{background:#f6f6f8;border-color:#e4e4e9;color:#5f5f6a!important}
html.light body .clipme-pm-tag.on{background:rgba(230,58,85,.1);border-color:#e63a55;color:#e63a55!important}
html.light body .clipme-pm-cell{background:#eeeef1;border-color:#e4e4e9}
html.light body .clipme-pm-cell i{background:linear-gradient(150deg,#dcdce4 0%,#f0dde2 55%,#e6e6ec 100%)}
html.light body .clipme-pm-foot{border-top-color:#e4e4e9}
@media (prefers-reduced-motion:reduce){
html body .clipme-pm-live,html body .clipme-pm-caret{animation:none}
html body .clipme-pm-cell,html body .clipme-pm-tag{transition:none}
}
/* ---- 25. Output fan (clipme-theme.js outputFan). The "Scale your creative output"
section was 1315px of copy with no visual. This shows the core claim as a mechanism:
one link in, the stream watched, 50-100 captioned vertical clips out. ---- */
html body .clipme-fan{
display:flex; flex-direction:column; gap:14px; margin-top:28px; padding:24px;
border:1px solid #262630; border-radius:var(--cm-radius,16px);
background:linear-gradient(180deg,#141419 0%,#0a0a0d 100%);
font-family:"Inter",system-ui,sans-serif;
}
html body .clipme-fan-in{
display:flex; align-items:center; gap:9px; padding:11px 14px;
border:1px solid #2e2e3a; border-radius:10px; background:#101015;
font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px;
}
html body .clipme-fan-dot{
width:7px;height:7px;border-radius:50%;background:#45e06a;flex:0 0 auto;
animation:clipmePmPulse 2.4s ease-out infinite;
}
html body .clipme-fan-url{color:#fff!important;font-weight:500}
html body .clipme-fan-state{margin-left:auto;color:#6b6b76!important;font-size:11.5px}
html body .clipme-fan-beam{position:relative;height:3px;border-radius:2px;background:#1c1c24;overflow:hidden}
html body .clipme-fan-beam i{
position:absolute;inset:0 100% 0 0;border-radius:2px;
background:linear-gradient(90deg,#e63a55,#ff5a73);
transition:inset 1s cubic-bezier(.4,0,.2,1);
}
html body .clipme-fan.scanning .clipme-fan-beam i{inset:0}
html body .clipme-fan-out{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
/* Resting state is VISIBLE, not opacity:0. Hiding the grid between cycles left a ~200px
black void every loop — the first frame a thumbnail or a skimming reader gets. The
slots now sit dim and empty (the shape is always there) and fill in as clips land. */
html body .clipme-fan-clip{
position:relative; aspect-ratio:9/16; border-radius:5px; overflow:hidden;
background:#131319; border:1px solid #1e1e26;
opacity:.32; transform:translateY(6px) scale(.97);
transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),
border-color .42s,background .42s;
}
html body .clipme-fan-clip.on{
opacity:1; transform:none; border-color:#33333f; background:#15151c;
}
/* The frame fills the tile: posters are 1080x1920, the tile is 9:16, so cover
crops nothing meaningful. Dim until the cell lights up, matching the existing
reveal. */
html body .clipme-fan-clip .clipme-fan-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transition:opacity .42s cubic-bezier(.22,1,.36,1);
}
html body .clipme-fan-clip.on .clipme-fan-img{opacity:1}
html body .clipme-fan-clip.on{background:#0d0d11}
/* Caption bar sits over the frame now, so it needs to read against video. */
html body .clipme-fan-clip .clipme-fan-cap{z-index:2;box-shadow:0 0 8px rgba(230,58,85,.55)}
html body .clipme-fan-clip .clipme-fan-cap{opacity:0;transition:opacity .3s ease .1s}
html body .clipme-fan-clip.on .clipme-fan-cap{opacity:.85}
html body .clipme-fan-clip .clipme-fan-cap{
position:absolute;left:12%;right:12%;bottom:14%;height:2px;border-radius:1px;
background:#e63a55;
}
html body .clipme-fan-foot{
padding-top:12px;border-top:1px solid #1e1e26;
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#9b9ba6!important;
}
html body .clipme-fan-n{color:#45e06a!important;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
html.light body .clipme-fan{background:linear-gradient(180deg,#fff 0%,#f6f6f8 100%);border-color:#e4e4e9}
html.light body .clipme-fan-in{background:#fff;border-color:#e4e4e9}
html.light body .clipme-fan-url{color:#16161a!important}
html.light body .clipme-fan-beam{background:#e9e9ee}
html.light body .clipme-fan-clip{background:#f0f0f4;border-color:#e8e8ee}
html.light body .clipme-fan-clip.on{border-color:#d5d5dd}
html.light body .clipme-fan-foot{border-top-color:#e4e4e9}
@media (max-width:760px){ html body .clipme-fan-out{grid-template-columns:repeat(6,1fr)} }
@media (prefers-reduced-motion:reduce){
html body .clipme-fan-clip,html body .clipme-fan-beam i{transition:none}
html body .clipme-fan-dot{animation:none}
}
/* ---- 26. MOBILE. Every injected component was composed at desktop width and only the
wide panel had a single 1000px breakpoint — at 400px its fixed 96px + 190px rails ate
a ~340px container, crushing the clip rail and clipping the chat text. These are the
real breakpoints for all six components. ---- */
@media (max-width:760px){
/* wide panel: drop to a single column, rails become horizontal strips */
html body .clipme-wp-body{
grid-template-columns:1fr!important; gap:12px;
}
/* The live bar wrapped onto three lines on a phone: handle, "— live · ClipMe is
watching" and the wordmark all competing for 375px. Shrink it, keep it on one line,
and let the handle take the slack rather than the label. */
html body .clipme-wp-bar{padding:8px 11px; gap:6px}
html body .clipme-wp-barleft{gap:7px; flex:1 1 auto; min-width:0}
html body .clipme-wp-handle{
font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
min-width:0;
}
html body .clipme-wp-dim{font-size:10.5px; white-space:nowrap; flex:0 0 auto}
html body .clipme-wp-brand{font-size:9.5px; flex:0 0 auto}
html body .clipme-wp-live{width:8px; height:8px; flex:0 0 8px}
html body .clipme-wp-railcol{order:2}
html body .clipme-wp-stagecol{order:1}
html body .clipme-wp-chatcol{order:3}
/* Side by side and filling the row. A fixed-width flex rail left a gap to the right
of two cards; a 4-up grid makes the cards share whatever width there is, so the row
reads full at any phone size instead of trailing off into empty space. */
html body .clipme-wp-rail{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
overflow:visible; padding-bottom:2px;
}
html body .clipme-wp-clip{flex:0 0 auto; width:100%}
html body .clipme-wp-msgs{max-height:120px; gap:3px}
/* nowrap, not normal: wrapping doubled each line's height inside a fixed-height
column and the overflow collided with the line above it. */
html body .clipme-wp-msg{font-size:11.5px; white-space:nowrap; flex:0 0 auto}
/* Four corner badges cannot sit two-per-row on a 96px tile — "tap" and
"look-ahead ✓" overlapped, as did the timecode and "auto-cut". Keep the two that
carry the mechanism and give the tile enough width to hold them. */
html body .clipme-wp-clip{width:100%}
html body .clipme-wp-b{font-size:8.5px; padding:2.5px 6px}
html body .clipme-wp-b.tl,
html body .clipme-wp-b.bl{display:none}
html body .clipme-wp-b.tr{left:4px; right:auto}
html body .clipme-wp-b.br{left:4px; right:auto}
/* prompt panel: fewer filmstrip cells so each stays legible */
html body .clipme-pm{padding:16px; min-height:0; gap:10px}
html body .clipme-pm-strip{grid-template-columns:repeat(5,1fr)}
html body .clipme-pm-cell:nth-child(n+6){display:none}
html body .clipme-pm-field{font-size:14px; min-height:42px}
/* reframe: shorter box so the subject and captions both fit */
html body .clipme-rf{aspect-ratio:4/5; min-height:340px}
html body .clipme-rf-subject{height:40%}
/* moment canvas */
html body .clipme-md{min-height:320px; aspect-ratio:4/5}
/* output fan: 6 across instead of 12 */
html body .clipme-fan{padding:16px; gap:11px}
html body .clipme-fan-out{grid-template-columns:repeat(6,1fr)}
html body .clipme-fan-in{font-size:11.5px; flex-wrap:wrap}
html body .clipme-fan-state{margin-left:0; width:100%}
html body .clipme-fan-foot{font-size:11px; line-height:1.5}
}
@media (max-width:460px){
html body .clipme-wp-rail{grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
html body .clipme-wp-clip{width:100%}
/* At 72px the "look-ahead ✓" pill measured 66px inside a 69px tile and hung 1px past
the edge. Shrink the type and drop the tick rather than let it clip. */
html body .clipme-wp-b{font-size:7.5px; padding:2px 5px}
html body .clipme-wp-b.tl,
html body .clipme-wp-b.bl{display:none}
html body .clipme-wp-b.tr,
html body .clipme-wp-b.br{left:3px; right:auto; max-width:calc(100% - 6px);
overflow:hidden; text-overflow:ellipsis}
html body .clipme-pm-strip{grid-template-columns:repeat(4,1fr)}
html body .clipme-pm-cell:nth-child(n+5){display:none}
html body .clipme-fan-out{grid-template-columns:repeat(4,1fr)}
html body .clipme-fan-clip:nth-child(n+9){display:none}
html body .clipme-ticker{font-size:11.5px}
}
/* ---- 27. Host slots must GROW around injected panels. .home0625_editing_item_visual
was sized for a fixed-aspect .avif — a fixed height with overflow hidden. The prompt
panel and reframe viz are taller, so the filmstrip was sliced mid-cell and the
"N clips ready" footer was cut off the bottom entirely. That read as a half-finished
animation; it was a clipped one. Let the slot size to its content. ---- */
/* The panels are position:absolute, so the HOST must keep an intrinsic height or it
collapses to 0 and the whole slot vanishes. Webflow's own ratio here is 1.47475
(measured 584x396 at 1280) — keep it rather than height:auto, which is what caused
the collapse when the panels went absolute. */
html body .home0625_editing_item_visual:has(.clipme-pm),
html body .home0625_editing_item_visual:has(.clipme-rf){
position:relative!important;
aspect-ratio:1.47475!important;
height:auto!important; min-height:0!important; max-height:none!important;
overflow:hidden!important; display:block!important;
}
/* Panels size to their content rather than asserting a height the slot must match. */
html body .clipme-pm{min-height:0}
html body .clipme-rf{aspect-ratio:auto; min-height:0; height:auto; padding-bottom:76%}
/* The reframe viz positions its children absolutely, so it needs a height from
somewhere — padding-bottom gives it an intrinsic ratio without a fixed pixel value. */
html body .clipme-fan{min-height:0}
/* ---- 29. The Prompt Mode / ReframeAnything slots are LANDSCAPE, measured 584x396 at
1280 and 348x236 at 768 — never portrait. .clipme-rf was asserting a portrait ratio
and rendering ~779px tall inside a 396px host with overflow:hidden, so roughly half
of it — the entire caption and language block, its whole payoff — was invisible on
the live page. Fill the host exactly instead of asserting a shape it does not have. */
html body .home0625_editing_item_visual{position:relative}
html body .clipme-rf,
html body .clipme-pm{
position:absolute!important; inset:0!important;
aspect-ratio:auto!important; padding-bottom:0!important;
min-height:0!important; height:auto!important; border-radius:inherit;
}
html body .clipme-pm{overflow:hidden}
/* At the 236px worst case the panel must shed rows rather than clip them. */
@media (max-width:900px){
html body .clipme-pm-label,
html body .clipme-pm-foot{display:none}
html body .clipme-pm{gap:8px;padding:14px}
}
html body .clipme-rf-caps{bottom:4%}
html body .clipme-rf-subject{top:5%;height:42%}
/* ---- 30. ReframeAnything: real landscape source + its real 9:16 crop, side by side,
matching the reference. Both are the same broadcast frame; the vertical is an actual
9:16 window centred on the subject, so the panel demonstrates the behaviour. ---- */
html body .clipme-rf{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
gap:clamp(8px,2.4%,22px); padding:clamp(12px,4%,28px);
border-radius:inherit; overflow:hidden;
background:radial-gradient(120% 100% at 30% 0%, #1a1a21 0%, #0a0a0d 72%);
}
html body .clipme-rf-src{position:relative; flex:0 1 46%; border-radius:9px; overflow:hidden; box-shadow:0 10px 30px -18px #000}
html body .clipme-rf-src img{display:block; width:100%; height:auto}
html body .clipme-rf-box{
position:absolute; left:50%; top:6%; width:31.8%; height:88%;
border:1.5px solid var(--cm-live,#45e06a); border-radius:4px;
box-shadow:0 0 14px -2px rgba(69,224,106,.55);
animation:clipmeRfTrack 5.2s cubic-bezier(.45,0,.25,1) infinite alternate;
}
@keyframes clipmeRfTrack{0%{left:42%}100%{left:56%}}
html body .clipme-rf-box .c{position:absolute;width:9px;height:9px;border:0 solid var(--cm-live,#45e06a)}
html body .clipme-rf-box .tl{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
html body .clipme-rf-box .tr{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
html body .clipme-rf-box .bl{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}
html body .clipme-rf-box .br{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
html body .clipme-rf-tag{
position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:4px;
background:rgba(0,0,0,.66);color:var(--cm-live,#45e06a)!important;
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;font-weight:600;letter-spacing:.05em;
}
html body .clipme-rf-dots{display:flex;flex-direction:row;gap:5px;flex:0 0 auto}
html body .clipme-rf-dots i{width:4px;height:4px;border-radius:50%;background:#3a3a46;transition:background .3s,transform .3s}
html body .clipme-rf-dots i.on{background:#e63a55;transform:scale(1.5)}
html body .clipme-rf-outcol{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 1 28%}
html body .clipme-rf-out{position:relative;width:100%;border-radius:10px;overflow:hidden;box-shadow:0 14px 36px -18px #000}
html body .clipme-rf-out img{display:block;width:100%;height:auto}
html body .clipme-rf-cap{
position:absolute;left:6%;right:6%;bottom:7%;text-align:center;
font-family:"Inter",system-ui,sans-serif;font-weight:800;
font-size:clamp(9px,1.5vw,13px);line-height:1.2;color:#fff!important;
text-shadow:0 2px 6px rgba(0,0,0,.92);
}
html body .clipme-rf-ratio{
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:#9b9ba6!important;
}
html.light body .clipme-rf{background:radial-gradient(120% 100% at 30% 0%, #fff 0%, #f2f2f5 72%)}
html.light body .clipme-rf-ratio{color:#5f5f6a!important}
@media (prefers-reduced-motion:reduce){ html body .clipme-rf-box{animation:none;left:50%} }
/* ---- 31. LIVE FEED band. clipme.com's real section, rebuilt: each card is one
creator's own broadcast frame, full-bleed 9:16, carrying the badge vocabulary the
wide panel uses (look-ahead / auto-cut) and that creator's real clip count, linked
to their published wall. Marquee pauses on hover so a card can actually be clicked.
Rebuilt 2026-09-18: the white shell and four 8.5px badges per card read as clutter
at 108px, the synthetic t=NNNs stamp and the "tap" chip were dropped, and creators
without a crisp frame of their own were removed rather than shown through an
upscaled still. ---- */
html body .clipme-cw{margin-top:30px;display:flex;flex-direction:column;gap:12px}
html body .clipme-cw-head{display:flex;align-items:center;gap:10px}
html body .clipme-cw-mark{
font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:19px;
letter-spacing:-.02em;color:#fff!important;
}
html body .clipme-cw-mark i{color:#e63a55!important;font-style:normal}
html body .clipme-cw-livedot{width:7px;height:7px;border-radius:50%;background:#e63a55;animation:clipmePmPulse 2.4s ease-out infinite}
html body .clipme-cw-kicker{
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
letter-spacing:.22em;color:#9b9ba6!important;
}
html body .clipme-cw-sub{
margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;
line-height:1.6;color:#9b9ba6!important;max-width:62ch;
}
html body .clipme-cw-sub b{color:#e63a55!important;font-weight:600}
html body .clipme-cw-track{
position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
html body .clipme-cw-row{display:flex;gap:14px;padding:8px 0 12px}
/* width:max-content belongs to the marquee track only. Unscoped it also hit the wall
page CTA column, pushing it ~105px past a phone viewport and clipping the copy. */
html body .clipme-cw-track .clipme-cw-row{width:max-content}
html body .clipme-cw-track.rolling .clipme-cw-row{animation:clipmeCwRoll 64s linear infinite}
html body .clipme-cw-track.rolling:hover .clipme-cw-row{animation-play-state:paused}
@keyframes clipmeCwRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html body .clipme-cw-card{
flex:0 0 auto;width:152px;aspect-ratio:9/16;display:block;position:relative;
text-decoration:none;border-radius:14px;overflow:hidden;background:#0c0d12;
border:1px solid rgba(255,255,255,.09);transform:translateZ(0);
transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s,border-color .3s;
}
html body .clipme-cw-card:hover{
transform:translateY(-6px);border-color:rgba(230,58,85,.55);
box-shadow:0 22px 44px -20px rgba(230,58,85,.65),0 0 0 1px rgba(230,58,85,.25);
}
html body .clipme-cw-shell{position:absolute;inset:0;display:block}
html body .clipme-cw-shell img,html body .clipme-cw-shell video{
width:100%;height:100%;object-fit:cover;display:block;background:#0c0d12;
transition:transform .7s cubic-bezier(.22,1,.36,1);
}
html body .clipme-cw-card:hover .clipme-cw-shell img,html body .clipme-cw-card:hover .clipme-cw-shell video{transform:scale(1.06)}
html body .clipme-cw-shell::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,8,12,.3) 0%,rgba(8,8,12,0) 26%,rgba(8,8,12,0) 50%,rgba(8,8,12,.94) 100%);
}
html body .clipme-cw-top{
position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;
align-items:center;gap:4px;z-index:2;
}
html body .clipme-cw-b,html body .clipme-cw-plat{
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;font-weight:600;
letter-spacing:.06em;padding:4px 6px;border-radius:6px;white-space:nowrap;line-height:1;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
html body .clipme-cw-plat{
display:inline-flex;align-items:center;gap:4px;background:rgba(10,10,14,.62);
color:#fff!important;text-transform:uppercase;
}
html body .clipme-cw-plat i{width:5px;height:5px;border-radius:50%;background:#45e06a;display:block;box-shadow:0 0 6px #45e06a}
html body .clipme-cw-plat.twitch i{background:#a970ff;box-shadow:0 0 6px #a970ff}
html body .clipme-cw-plat.youtube i{background:#ff3d3d;box-shadow:0 0 6px #ff3d3d}
html body .clipme-cw-b.look{background:rgba(69,224,106,.18);color:#5df08a!important}
html body .clipme-cw-b.clips{background:rgba(230,58,85,.22);color:#ff8a9a!important}
html body .clipme-cw-meta em.look{color:#5df08a!important;font-style:normal}
html body .clipme-cw-who{
position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
display:flex;flex-direction:column;gap:3px;
}
html body .clipme-cw-who b{
font-family:"Inter",system-ui,sans-serif;font-size:12.5px;font-weight:700;color:#fff!important;
letter-spacing:-.01em;line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.6);
}
html body .clipme-cw-meta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#b9b9c4!important;letter-spacing:.02em;display:flex;flex-direction:column;gap:1px;white-space:nowrap}
html body .clipme-cw-meta em{font-style:normal;color:#ff5c73!important;font-weight:600}
html body .clipme-cw-tail{
margin:6px 0 0;font-family:"Inter",system-ui,sans-serif;font-weight:800;
font-size:clamp(19px,3.4vw,30px);letter-spacing:-.02em;color:#fff!important;
}
html body .clipme-cw-tail span{
display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:400;
font-size:clamp(12px,1.8vw,15px);letter-spacing:0;color:#e63a55!important;margin-top:3px;
}
html.light body .clipme-cw-mark,html.light body .clipme-cw-tail{color:#16161a!important}
html.light body .clipme-cw-card{border-color:rgba(0,0,0,.12)}
@media (max-width:760px){
html body .clipme-cw-card{width:122px}
html body .clipme-cw-row{gap:10px}
html body .clipme-cw-track.rolling .clipme-cw-row{animation-duration:46s}
/* 122px minus 16px of inset leaves 106px for two chips: tighten both so the
look-ahead badge is never cut mid-word, and let it wrap under the platform
chip rather than overflow the card. */
html body .clipme-cw-top{flex-wrap:wrap;gap:3px}
html body .clipme-cw-b,html body .clipme-cw-plat{font-size:8px;letter-spacing:.02em;padding:3px 5px}
}
@media (prefers-reduced-motion:reduce){
html body .clipme-cw-track.rolling .clipme-cw-row{animation:none}
html body .clipme-cw-track{overflow-x:auto}
html body .clipme-cw-livedot{animation:none}
html body .clipme-cw-shell img,html body .clipme-cw-card{transition:none}
}
/* ---- 32. TYPE SCALE. Every heading on the mirror shipped at weight 600, and the
creators section h2 rendered at 12px — body size for a section title. clipme.com's
own headings are 800 weight, far larger, with tight tracking. This brings the whole
page onto that scale. Sizes are clamped so one rule covers every viewport instead of
the fixed step-breakpoints that overflowed between steps. ---- */
/* hero */
html body .home0625_header_text_h1{
font-size:clamp(31px,6.2vw,62px)!important;
font-weight:800!important;
letter-spacing:-.035em!important;
line-height:1.02!important;
text-wrap:balance;
}
/* section headings */
html body .opus-font-h3,
html body .opus-font-h3-old,
html body .home0625_cta_h,
html body .a_home1n_creators_h2,
html body .home0625_teams_h,
html body .home0625_partner_h{
font-size:clamp(27px,4.6vw,46px)!important;
font-weight:800!important;
letter-spacing:-.03em!important;
line-height:1.06!important;
text-wrap:balance;
}
/* feature-card headings */
html body .opus-font-h5,
html body .opus-font-h6{
font-size:clamp(19px,2.5vw,27px)!important;
font-weight:750!important;
letter-spacing:-.022em!important;
line-height:1.15!important;
}
/* eyebrows — red, spaced, small, the way clipme.com sets them */
html body .home0625_content_subtitle,
html body .opus-font-section-md{
font-family:"JetBrains Mono",ui-monospace,monospace!important;
font-size:clamp(10.5px,1.35vw,12.5px)!important;
font-weight:600!important;
letter-spacing:.19em!important;
text-transform:uppercase!important;
color:#e63a55!important;
}
/* body copy — bigger and calmer so the headings have something to sit against */
html body .opus-font-body-lg,
html body .opus-font-body,
html body .home0625_text p,
html body .home0625_editing_item_text p{
font-size:clamp(14.5px,1.75vw,18px)!important;
line-height:1.62!important;
}
/* footer headings stay small — they are labels, not section titles */
html body .a-ca_footer_h{
font-size:13.5px!important; font-weight:650!important; letter-spacing:.02em!important;
}
@media (max-width:520px){
html body .home0625_header_text_h1{letter-spacing:-.028em!important}
html body .opus-font-h3,
html body .a_home1n_creators_h2{letter-spacing:-.024em!important}
}
/* ---- 33. CTA. The button was absolutely positioned over the input, so at narrow
widths it sat on top of "Drop a Kick, Twitch or YouTube link" and both were
unreadable. Lay the row out with flex so the two elements can never collide, and
let it stack when there genuinely is not room. ---- */
html body .home0625_cta_input_wrapper{
display:flex!important; align-items:center; gap:8px; flex-wrap:wrap;
position:relative!important;
}
html body .home0625_cta_input{
flex:1 1 210px!important; min-width:0!important;
position:static!important; width:auto!important;
}
html body .home0625_cta_input_wrapper > a,
html body .home0625_cta_input_wrapper > button,
html body .home0625_cta_input_wrapper [class*="btn"],
html body .home0625_cta_input_wrapper [class*="button"]{
position:static!important; flex:0 0 auto!important;
right:auto!important; top:auto!important; transform:none!important;
white-space:nowrap;
}
@media (max-width:520px){
html body .home0625_cta_input_wrapper{flex-direction:column; align-items:stretch}
html body .home0625_cta_input_wrapper > a,
html body .home0625_cta_input_wrapper [class*="btn"]{width:100%; text-align:center}
}
/* ---- 34. Business logos stay retired. Chili Piper, Memphis Grizzlies, ZoomInfo,
Telefónica, NVIDIA, GitHub, iHeartMedia are opus's clients, not ours, and we have
no real business logos to put there yet. Borrowed social proof is worse than none.
2026-09-09: the CREATOR carousel is now un-hidden, because it is no longer
borrowed. All 19 slides are real ClipMe creators with their real shipped clip
counts read off public/clips (drewwwtv 197, soymausando 133, derinthehomeless 116,
bigmeech4life 98 …) and avatars cropped from their own wall posters, served
locally — not hotlinked from public.cdn.opus.pro like the originals were.
Counts are clips we produced, NOT follower counts, which we do not have and
must not invent. ---- */
/* 2026-09-09: BOTH rows are shown again. The creator row carries real ClipMe
creators with their real clip counts. The company row no longer carries
opus's clients (zoominfo, Memphis Grizzlies, Chili Piper, Univision, Audacy,
Visa) — it now carries the platforms ClipMe genuinely clips from and posts
to: Kick, Twitch, YouTube in; TikTok, Reels, Shorts out. That is a claim we
can stand behind, unlike borrowed customer logos. */
html body .a_home1n_customers_logos .a_nb-customer-stories_companies-slide-wrapper img{
height:26px; width:auto; opacity:.72; filter:none;
}
/* ---- 35. Merged output row. The fan now lives INSIDE the live panel's frame,
below the stage/chat body, so one card carries the whole story: the stream is
being watched, the moment locks, the clips come out. Its own channel row and
beam are removed at build time — the live bar above already says both. ---- */
html body .clipme-fan.is-merged{
margin:0; padding:14px 16px 16px; border:0; border-top:1px solid #1e1e26;
border-radius:0; background:transparent; box-shadow:none;
}
html body .clipme-fan.is-merged .clipme-fan-out{
grid-template-columns:repeat(8,1fr); gap:7px;
}
@media (max-width:900px){
html body .clipme-fan.is-merged .clipme-fan-out{grid-template-columns:repeat(6,1fr)}
html body .clipme-fan.is-merged .clipme-fan-clip:nth-child(n+7){display:none}
}
@media (max-width:600px){
html body .clipme-fan.is-merged .clipme-fan-out{grid-template-columns:repeat(4,1fr)}
html body .clipme-fan.is-merged .clipme-fan-clip:nth-child(n+5){display:none}
}
html body .clipme-fan.is-merged .clipme-fan-foot{
margin-top:12px; padding-top:10px;
}
/* ---- 35. Platform pills ------------------------------------------------------
Sized to clipme.com's trust strip, so the two sites state this the same way:
px-4 py-2 pill, 20px brand mark, 16px bold name, 10px uppercase badge, gap 10px.
Replaces the wordmark marquee that clipped its logos mid-letter. */
html body .clipme-plat{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:16px; padding:6px 0 2px;
}
html body .clipme-plat-pill{
display:inline-flex; align-items:center; gap:10px;
padding:8px 16px; border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.10);
transition:border-color .2s ease;
}
html body .clipme-plat-pill:hover{
border-color:color-mix(in srgb, var(--brand) 50%, transparent);
}
html body .clipme-plat-logo{
display:inline-flex; width:20px; height:20px; flex:0 0 20px;
}
html body .clipme-plat-logo svg{ width:100%; height:100%; display:block; }
html body .clipme-plat-name{
font-family:"Sora",system-ui,sans-serif; font-weight:700; font-size:16px;
color:#fff!important; letter-spacing:-.005em;
}
html body .clipme-plat-tag{
display:inline-flex; align-items:center;
font-family:"Sora",system-ui,sans-serif; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.04em;
padding:2px 8px; border-radius:999px;
background:rgba(255,255,255,.08); color:rgba(255,255,255,.55)!important;
white-space:nowrap;
}
html body .clipme-plat-tag.is-live{
background:rgba(83,252,24,.15); color:#53fc18!important;
}
/* Enter once, staggered — visible at rest so nothing waits on an observer to appear. */
html body .clipme-plat.anim .clipme-plat-pill{
opacity:0; transform:translateY(10px);
}
html body .clipme-plat.anim.in .clipme-plat-pill{
opacity:1; transform:none;
transition:opacity .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * .09s),
transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * .09s);
}
@media (max-width:760px){
html body .clipme-plat{ gap:10px; }
html body .clipme-plat-pill{ padding:7px 13px; gap:8px; }
html body .clipme-plat-name{ font-size:14px; }
html body .clipme-plat-logo{ width:18px; height:18px; flex:0 0 18px; }
}
@media (prefers-reduced-motion:reduce){
html body .clipme-plat.anim .clipme-plat-pill{ opacity:1; transform:none }
}
/* ---- 36. Merged output strip -------------------------------------------------
The clips-out rail used to be a third column beside the stage, and the "N clips from
one stream" fan was a separate section further down — the page told the same story
twice. The rail is gone; the panel now watches a stream above and hands the clips back
underneath, in one object. */
html body .clipme-wp-body{ grid-template-columns:minmax(0,1fr) 260px; }
html body .clipme-wp-out{
margin-top:16px; padding-top:15px;
border-top:1px solid rgba(255,255,255,.08);
}
html body .clipme-wp-outrow{
display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
}
html body .clipme-wp-outfoot{
margin-top:13px; text-align:center;
font-size:13.5px; color:rgba(255,255,255,.62)!important;
}
html body .clipme-wp-outn{
font-family:"JetBrains Mono",ui-monospace,monospace;
font-size:19px; font-weight:800; color:#45e06a!important; margin-right:5px;
}
@media (max-width:1000px){
html body .clipme-wp-body{ grid-template-columns:minmax(0,1fr) 200px; }
html body .clipme-wp-outrow{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:760px){
html body .clipme-wp-body{ grid-template-columns:minmax(0,1fr); }
html body .clipme-wp-outrow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
html body .clipme-wp-outfoot{ font-size:11.5px; }
html body .clipme-wp-outn{ font-size:16px; }
}
/* ---- 37. Desktop: clips column on the left ----------------------------------
Desktop only. Below 1001px the strip stays where it is, a horizontal row under the
stage — a narrow left column would squeeze both it and the stage on a phone.
Layout is areas rather than source order so nothing in the markup has to move. */
@media (min-width:1001px){
html body .clipme-wp-frame{
display:grid;
grid-template-columns:168px minmax(0,1fr);
grid-template-areas:"bar bar" "out body";
column-gap:18px; align-items:start;
}
html body .clipme-wp-bar{ grid-area:bar; }
html body .clipme-wp-body{ grid-area:body; margin-top:14px; }
html body .clipme-wp-out{
grid-area:out; margin-top:14px; padding-top:0;
border-top:0;
border-right:1px solid rgba(255,255,255,.08); padding-right:16px;
}
/* one clip per row, stacked down the column */
html body .clipme-wp-outrow{ grid-template-columns:minmax(0,1fr); gap:9px; }
html body .clipme-wp-outfoot{
text-align:left; font-size:12px; margin-top:12px; line-height:1.45;
}
html body .clipme-wp-outn{ font-size:17px; }
}
/* ---- 38. Three steps ----------------------------------------------------------
clipme.com's how-it-works section, matched: heading + sub, then three cards each led
by a wordless visual. Text-only cards were not the same section — the visuals are what
make it read as a process. Animations are ported from the live site's globals.css. */
html body .clipme-steps-sec{ padding:16px 0 8px; }
html body .clipme-steps-inner{ max-width:1180px; margin:0 auto; padding:0 24px; }
html body .clipme-steps-head{ max-width:640px; }
html body .clipme-steps-head h2{
font-family:"Sora",system-ui,sans-serif; font-weight:800;
font-size:40px; line-height:1.1; letter-spacing:-.02em;
color:#fff!important; margin:0;
}
html body .clipme-steps-head p{
margin:12px 0 0; font-size:18px; line-height:1.5;
color:rgba(255,255,255,.60)!important;
}
html body .clipme-steps{
margin-top:54px;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
html body .clipme-step{
background:rgba(255,255,255,.028);
border:1px solid rgba(255,255,255,.07);
border-radius:18px; padding:28px;
}
html body .clipme-step-n{
display:block; font-family:"JetBrains Mono",ui-monospace,monospace;
font-size:13px; font-weight:700; color:#e63a55!important;
}
html body .clipme-step-t{
font-family:"Sora",system-ui,sans-serif; font-weight:700; font-size:21px;
color:#fff!important; margin:12px 0 0; letter-spacing:-.01em;
}
html body .clipme-step-b{
font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.60)!important; margin:9px 0 0;
}
/* the visual panel at the top of each card */
html body .clipme-sv{
position:relative; height:118px; margin-bottom:24px;
border:1px solid rgba(255,255,255,.08); border-radius:13px; overflow:hidden;
display:flex; align-items:center; justify-content:center; background:#0b0b0e;
}
html body .clipme-sv-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; }
html body .clipme-sv-fade{ position:absolute; inset:0;
background:linear-gradient(90deg,#0b0b0e 0%, rgba(11,11,14,.7) 55%, transparent 100%); }
html body .clipme-sv-dots{ position:absolute; right:12px; top:12px; display:flex; gap:6px; z-index:3; }
html body .clipme-sv-dot{ width:8px; height:8px; border-radius:50%; display:block; }
html body .clipme-sv-bar{
position:relative; z-index:2; display:flex; align-items:center; gap:8px; width:80%;
padding:9px 12px; border-radius:999px;
border:1px solid rgba(255,255,255,.10); background:rgba(20,20,26,.9);
}
html body .clipme-sv-track{ position:relative; flex:1; height:8px; border-radius:999px;
background:rgba(255,255,255,.10); overflow:hidden; }
html body .clipme-sv-fill{ display:block; height:100%; border-radius:999px;
background:rgba(230,58,85,.7); animation:clipme-step-fill 2.8s ease-in-out infinite; }
@keyframes clipme-step-fill{ 0%{width:0} 55%{width:100%} 82%{width:100%} 100%{width:0} }
html body .clipme-sv-caret{ width:2px; height:14px; background:#e63a55;
animation:clipme-step-blink 1s steps(1) infinite; }
@keyframes clipme-step-blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
html body .clipme-sv-strip{ position:absolute; inset:0; display:flex; opacity:.4; }
html body .clipme-sv-strip img{ height:100%; flex:1; object-fit:cover; }
html body .clipme-sv-veil{ position:absolute; inset:0; background:rgba(11,11,14,.55); }
html body .clipme-sv-bars{ position:relative; z-index:2; display:flex; align-items:flex-end;
gap:3px; height:58px; }
html body .clipme-sv-b{ width:4px; border-radius:2px; background:#3a2c30; display:block; }
html body .clipme-sv-b.hot{ background:#e63a55; }
html body .clipme-sv-scan{ position:absolute; top:20px; bottom:20px; width:2px; z-index:3;
background:#e63a55; box-shadow:0 0 8px #e63a55; animation:clipme-step-scan 2.6s ease-in-out infinite; }
@keyframes clipme-step-scan{ 0%{left:8%} 50%{left:90%} 100%{left:8%} }
html body .clipme-sv-lock{ position:absolute; right:24%; top:12px; z-index:3;
border:1px solid #e63a55; background:rgba(230,58,85,.15); color:#fff!important;
border-radius:4px; padding:2px 6px; font-family:"JetBrains Mono",ui-monospace,monospace;
font-size:10px; font-weight:700; }
html body .clipme-sv-ship{ display:flex; align-items:center; gap:16px; }
html body .clipme-sv-phone{ position:relative; display:block; width:48px; height:80px;
border:1px solid rgba(255,255,255,.10); border-radius:7px; overflow:hidden; background:#14141a; }
html body .clipme-sv-phone img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html body .clipme-sv-shade{ position:absolute; left:0; right:0; bottom:0; height:50%;
background:linear-gradient(to top, rgba(0,0,0,.85), transparent); }
html body .clipme-sv-caps{ position:absolute; left:4px; right:4px; bottom:6px;
display:flex; flex-direction:column; gap:4px; }
html body .clipme-sv-cap{ display:block; height:6px; border-radius:999px; background:#e63a55;
transform-origin:left; animation:clipme-step-cap 1.9s ease-in-out infinite; }
html body .clipme-sv-cap2{ display:block; height:6px; width:66%; border-radius:999px;
background:rgba(255,255,255,.6); }
@keyframes clipme-step-cap{ 0%,100%{transform:scaleX(.2);opacity:.5} 50%{transform:scaleX(1);opacity:1} }
html body .clipme-sv-arrow{ color:rgba(255,255,255,.45)!important; font-size:13px; }
html body .clipme-sv-plats{ display:flex; flex-direction:column; gap:8px; }
html body .clipme-sv-plat{ display:flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,.10); background:#0b0b0e; }
html body .clipme-sv-plat i{ display:block; width:10px; height:10px; border-radius:50%;
animation:clipme-step-pulse 2s ease-in-out infinite; }
@keyframes clipme-step-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
html body .clipme-steps.anim .clipme-step{ opacity:0; transform:translateY(12px); }
html body .clipme-steps.anim.in .clipme-step{
opacity:1; transform:none;
transition:opacity .55s cubic-bezier(.22,1,.36,1) calc(var(--i) * .1s),
transform .55s cubic-bezier(.22,1,.36,1) calc(var(--i) * .1s);
}
@media (max-width:860px){
html body .clipme-steps{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:34px; }
html body .clipme-steps-inner{ padding:0 18px; }
html body .clipme-steps-head h2{ font-size:28px; }
html body .clipme-steps-head p{ font-size:15.5px; }
html body .clipme-step{ padding:20px; border-radius:15px; }
html body .clipme-step-t{ font-size:19px; }
html body .clipme-step-b{ font-size:14.5px; }
}
@media (prefers-reduced-motion:reduce){
html body .clipme-steps.anim .clipme-step{ opacity:1; transform:none }
html body .clipme-sv-fill,html body .clipme-sv-caret,html body .clipme-sv-scan,
html body .clipme-sv-cap,html body .clipme-sv-plat i{ animation:none }
html body .clipme-sv-fill{ width:100% }
}
/* ---- 39. ClipMe-for-teams visuals ---------------------------------------------
Replaces OpusClip's own product screenshots in the three "Scale your creative
output" cards — their editor, their folders UI, their API diagram with their logo
at the centre. Built in markup from our real output and the cl!pme mark. */
html body .clipme-tv{
position:relative; height:168px; margin-bottom:18px; border-radius:13px;
border:1px solid rgba(255,255,255,.08); background:#0b0b0e; overflow:hidden;
display:flex; align-items:center; justify-content:center; gap:14px;
}
/* 01 brand templates — a real clip wearing the brand wrap, next to the controls */
html body .clipme-tv-clip{
position:relative; width:76px; height:132px; border-radius:8px; overflow:hidden;
border:1px solid rgba(255,255,255,.12); flex:0 0 76px; background:#000;
}
html body .clipme-tv-clip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html body .clipme-tv-strip{
position:absolute; left:0; right:0; bottom:0; height:19px; background:#000;
display:flex; align-items:center; justify-content:space-between; padding:0 5px;
}
html body .clipme-tv-strip b{ font-family:"Sora",system-ui,sans-serif; font-weight:800;
font-size:8px; color:#fff!important; letter-spacing:-.02em; }
html body .clipme-tv-strip b i{ color:#e63a55!important; font-style:normal; }
html body .clipme-tv-strip em{ font-family:"JetBrains Mono",ui-monospace,monospace;
font-style:normal; font-size:5px; color:rgba(255,255,255,.75)!important; }
html body .clipme-tv-panel{ display:flex; flex-direction:column; gap:7px; }
html body .clipme-tv-row{
display:flex; align-items:center; gap:7px; font-size:10.5px;
color:rgba(255,255,255,.72)!important;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
border-radius:7px; padding:5px 9px; min-width:118px;
}
html body .clipme-tv-row .sw{ width:12px; height:12px; border-radius:3px; flex:0 0 12px; display:block; }
html body .clipme-tv-row .sw-font{ background:rgba(255,255,255,.12); font-size:7px; font-weight:800;
display:flex; align-items:center; justify-content:center; color:#fff!important; }
html body .clipme-tv-row .sw-logo{ background:#000; font-size:7px; font-weight:800;
display:flex; align-items:center; justify-content:center; color:#fff!important; }
html body .clipme-tv-row .sw-logo b{ color:#e63a55!important; }
/* 02 team workspace — our own wall queue, not their folders */
html body .clipme-tv-team{ flex-direction:column; align-items:stretch; padding:16px 18px; gap:7px; justify-content:center; }
html body .clipme-tv-head{ font-size:10.5px; color:rgba(255,255,255,.42)!important; margin-bottom:2px; }
html body .clipme-tv-folder{
display:flex; align-items:center; gap:9px; font-size:12px;
color:rgba(255,255,255,.80)!important;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
border-radius:9px; padding:8px 11px;
}
html body .clipme-tv-folder.on{ border-color:rgba(230,58,85,.45); background:rgba(230,58,85,.10); }
html body .clipme-tv-folder .fi{ width:11px; height:9px; border-radius:2px;
background:rgba(255,255,255,.35); flex:0 0 11px; display:block; }
html body .clipme-tv-folder.on .fi{ background:#e63a55; }
html body .clipme-tv-folder em{ margin-left:auto; font-style:normal;
font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
color:rgba(255,255,255,.45)!important; }
html body .clipme-tv-who{
position:absolute; font-size:9.5px; font-weight:700; border-radius:999px;
padding:3px 9px; color:#fff!important;
}
html body .clipme-tv-who1{ right:16px; top:44px; background:#e63a55; }
html body .clipme-tv-who2{ right:38px; bottom:30px; background:#5a6cff; }
/* 03 workflow — the cl!pme mark at the centre, our platforms around it */
html body .clipme-tv-flow{ position:relative; }
html body .clipme-tv-core{
position:relative; z-index:2; width:62px; height:62px; border-radius:50%;
background:#000; border:1px solid rgba(255,255,255,.16);
display:flex; align-items:center; justify-content:center;
font-family:"Sora",system-ui,sans-serif; font-weight:800; font-size:13px;
color:#fff!important; letter-spacing:-.03em;
}
html body .clipme-tv-core i{ color:#e63a55!important; font-style:normal; }
html body .clipme-tv-node{
position:absolute; width:27px; height:27px; border-radius:8px;
border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
display:flex; align-items:center; justify-content:center;
}
html body .clipme-tv-node i{ width:10px; height:10px; border-radius:50%; display:block; }
html body .clipme-tv-node.in0{ left:24%; top:18%; }
html body .clipme-tv-node.in1{ left:16%; top:48%; }
html body .clipme-tv-node.in2{ left:24%; bottom:18%; }
html body .clipme-tv-node.out0{ right:24%; top:18%; }
html body .clipme-tv-node.out1{ right:16%; top:48%; }
html body .clipme-tv-node.out2{ right:24%; bottom:18%; }
@media (max-width:860px){
html body .clipme-tv{ height:150px; }
html body .clipme-tv-row{ min-width:104px; font-size:10px; }
}
/* ---- 40. Nav dropdown repair --------------------------------------------------
Three of the four nav dropdowns came out of the capture with collapsed grid tracks —
"How it works" resolved to `0px 0px 0px`, so every link squeezed to 24px wide and the
titles stacked on top of one another. Features survived at ~253px per column, which is
what the others should have been. Widths restored to match it; nothing else about the
nav is touched. */
html body ._0625_navbar_solutions-dropdown_content,
html body ._0625_navbar_resources-dropdown_content{
grid-template-columns:minmax(0,1fr) 1px 240px!important;
column-gap:26px; align-items:start;
}
html body ._0625_navbar_solutions-dropdown_links{
grid-template-columns:repeat(3,minmax(158px,1fr))!important;
column-gap:22px; row-gap:18px;
}
html body ._0625_navbar_resources-dropdown_links{
grid-template-columns:repeat(2,minmax(158px,1fr))!important;
column-gap:22px; row-gap:18px;
}
html body ._0625_navbar_solutions-dropdown_featured,
html body ._0625_navbar_resources-dropdown_featured{
grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px;
}
html body ._0905_navbar_business-dropdown_content{
grid-template-columns:repeat(2,minmax(210px,1fr))!important; gap:14px;
}
/* the links themselves had collapsed to a 24px column */
html body ._0625_navbar_solutions-dropdown_links > a,
html body ._0625_navbar_resources-dropdown_links > a{
min-width:0; width:auto;
}
html body ._0625_navbar_solutions-dropdown_link_title,
html body ._0625_navbar_resources-dropdown_link_title{ white-space:nowrap; }
html body ._0625_navbar_solutions-dropdown_link_text,
html body ._0625_navbar_resources-dropdown_link_text{
white-space:normal; line-height:1.4;
}
/* give the panels room to hold those columns */
/* The real constraint was the panel, not the grid: every dropdown list is
.a-ca_navbar_dropdown_list with min-width:240px, so a 220px featured column left the
links track resolving to 0px however wide its own columns were declared. Widened per
menu via :has(), so the small menus (See demos, language) keep their narrow panel. */
html body .a-ca_navbar_dropdown_list:has(._0625_navbar_solutions-dropdown_content){
min-width:860px!important;
}
html body .a-ca_navbar_dropdown_list:has(._0625_navbar_resources-dropdown_content){
min-width:660px!important;
}
html body .a-ca_navbar_dropdown_list:has(._0905_navbar_business-dropdown_content){
min-width:480px!important;
}
@media (max-width:991px){
/* The three :has() width rules above carry !important and no media query, so they
outranked the mobile reset - a 860px panel inside a 390px viewport. Same selectors,
same !important, later in source: this wins. */
html body .a-ca_navbar_dropdown_list:has(._0625_navbar_solutions-dropdown_content),
html body .a-ca_navbar_dropdown_list:has(._0625_navbar_resources-dropdown_content),
html body .a-ca_navbar_dropdown_list:has(._0905_navbar_business-dropdown_content){
min-width:0!important; width:100%!important; max-width:100vw!important;
}
html body ._0625_navbar_solutions-dropdown_content,
html body ._0625_navbar_resources-dropdown_content{
grid-template-columns:minmax(0,1fr)!important;
}
html body ._0625_navbar_solutions-dropdown_links,
html body ._0625_navbar_resources-dropdown_links{
grid-template-columns:minmax(0,1fr)!important;
}
html body ._0905_navbar_business-dropdown_content{ grid-template-columns:minmax(0,1fr)!important; }
html body .a-ca_navbar_dropdown_list{ min-width:0!important; }
}
/* ---- 41. "Built for ." ------------------------------------------------
The line shipped as "Built for IRL. Not podcasts." IRL is genuinely the hard case
no other clipper handles, so the first half was true — but the second half disowned
a market that has its own live page on clipme.com, and read as a boast rather than
a claim. Cycling the noun makes the same point (purpose-built per audience, not a
generic repurposer) across every audience we actually serve.
The slot sizes itself off a hidden GHOST holding the longest word, rather than a
pixel width JS measured once. A measured width is only correct at the width it was
measured at: the first build locked 217px, and at 267px the heading wrapped around
a slot wider than the line it sat on and dropped the word off the row entirely.
A ghost in normal flow re-sizes with the font at every breakpoint for free.
The slot then MORPHS to each word rather than standing at the width of the longest
one: parked at "streamers" width, a three-letter word like IRL sat marooned in the
middle with a full stop stranded an inch to its right. Width is written in px only
for the length of one swap and handed straight back to the ghost, so a resize still
self-corrects. ------------------------------------------------------------------ */
html body .clipme-bf{
display:inline-block; position:relative; max-width:100%;
vertical-align:baseline; text-align:center;
transition:width .26s ease;
}
@media (prefers-reduced-motion:reduce){
html body .clipme-bf{ transition:none; }
}
html body .clipme-bf-ghost{
visibility:hidden; pointer-events:none; white-space:nowrap;
}
html body .clipme-bf-word{
position:absolute; inset:0 0 auto 0; white-space:nowrap;
transition:opacity .26s ease, transform .26s ease;
will-change:opacity, transform;
}
html body .clipme-bf-word.is-out{ opacity:0; transform:translateY(-.24em); }
html body .clipme-bf-word.is-in { opacity:0; transform:translateY(.24em); }
@media (prefers-reduced-motion:reduce){
html body .clipme-bf-word{ transition:none; }
html body .clipme-bf-word.is-out,
html body .clipme-bf-word.is-in{ opacity:1; transform:none; }
}
/* ---- 42. Dropdown destination pages -------------------------------------------
Every item in Features / How it works / Resources pointed at a URL that 404'd, or
at opus.pro. These pages are the destinations, built from clipme.com's own live
copy — the persona answer, intro and benefit list come straight out of seo-data.js
rather than being re-written here, so the mirror cannot drift from the real site.
The chrome (head, nav, footer) is lifted verbatim from an existing mirror page, so
only this content column needs styling. ------------------------------------- */
html body .clipme-pg{ padding:96px 24px 120px; background:var(--cm-bg,#08080a); }
html body .clipme-pg-wrap{ max-width:760px; margin:0 auto; }
html body .clipme-pg-eyebrow{
font-size:13px; letter-spacing:.12em; text-transform:uppercase;
color:var(--cm-red-soft,#ff5a73); margin:0 0 14px; font-weight:600;
}
html body .clipme-pg-h1{
font-size:clamp(34px,5.4vw,58px); line-height:1.04; letter-spacing:-.02em;
font-weight:800; color:var(--cm-fg,#fff); margin:0 0 26px; text-wrap:balance;
}
/* The answer block is the 40–60 word lead an answer engine lifts. It is visually
the largest body text on the page for the same reason it is first. */
html body .clipme-pg-answer{
font-size:clamp(17px,2.1vw,21px); line-height:1.55; color:var(--cm-fg,#fff);
margin:0 0 30px; padding-left:18px; border-left:3px solid var(--cm-red,#e63a55);
}
html body .clipme-pg-intro{
font-size:17px; line-height:1.68; color:var(--cm-muted,#9b9ba6); margin:0 0 34px;
}
html body .clipme-pg-cta{
display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 44px;
}
html body .clipme-pg-btn{
display:inline-block; background:var(--cm-red,#e63a55); color:#fff!important;
font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px;
text-decoration:none; min-height:48px; line-height:20px;
}
html body .clipme-pg-note{ font-size:14px; color:var(--cm-faint,#6b6b76); }
html body .clipme-pg-h2{
font-size:15px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
color:var(--cm-faint,#6b6b76); margin:0 0 16px;
}
html body .clipme-pg-benefits{ list-style:none; margin:0 0 48px; padding:0;
display:grid; gap:12px; }
html body .clipme-pg-benefits li{
position:relative; padding:16px 18px 16px 46px; border-radius:var(--cm-radius,16px);
background:var(--cm-elev,#131316); border:1px solid var(--cm-border,#262630);
color:var(--cm-fg,#fff); font-size:16px; line-height:1.5;
}
html body .clipme-pg-benefits li::before{
content:""; position:absolute; left:18px; top:50%; width:10px; height:10px;
margin-top:-5px; border-radius:50%; background:var(--cm-live,#45e06a);
}
html body .clipme-pg-related{ display:flex; flex-wrap:wrap; gap:10px; }
html body .clipme-pg-related a{
display:inline-block; padding:10px 16px; border-radius:999px; font-size:14px;
min-height:44px; line-height:24px;
background:var(--cm-elev2,#1b1b1f); border:1px solid var(--cm-border,#262630);
color:var(--cm-fg,#fff)!important; text-decoration:none;
}
html body .clipme-pg-related a:hover{ border-color:var(--cm-red,#e63a55); }
@media (max-width:640px){
html body .clipme-pg{ padding:64px 18px 88px; }
}
/* ---- 36. Kick stream loadout. Kick's page is player-left / chat-right with a
meta strip under the player. The panel was clips|stage|chat three-up, which
read like a dashboard rather than a stream. Rail is retired here — the merged
output row below already shows clips out, so keeping both said it twice. ---- */
html body .clipme-wp-body{
grid-template-columns:minmax(0,1fr) 300px; /* player · chat sidebar */
gap:14px;
}
html body .clipme-wp-railcol{ display:none; }
/* meta strip: avatar, channel, category pills, LIVE */
html body .clipme-wp-meta{
display:flex; align-items:center; gap:10px; margin-top:10px;
padding-top:10px; border-top:1px solid #1b1b22;
}
html body .clipme-wp-avatar{
width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 34px;
border:2px solid #53fc18; /* Kick green, as a platform mark only */
background:#1b1b22;
}
html body .clipme-wp-metatext{ min-width:0; flex:1 1 auto; }
html body .clipme-wp-title{
font-weight:700; font-size:13px; color:#f7f7f9!important;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body .clipme-wp-tags{ display:flex; gap:5px; margin-top:4px; }
html body .clipme-wp-pill{
font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;
padding:2px 7px; border-radius:99px; letter-spacing:.06em;
background:rgba(83,252,24,.12); color:#53fc18!important; border:1px solid rgba(83,252,24,.3);
}
html body .clipme-wp-pill.is-ghost{
background:transparent; color:#9b9ba6!important; border-color:#2c2c36;
}
html body .clipme-wp-livebadge{
font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; font-weight:700;
letter-spacing:.1em; padding:3px 8px; border-radius:4px;
background:#e63a55; color:#fff!important; flex:0 0 auto;
}
/* chat reads like Kick's sidebar: dense, left-aligned, coloured handles */
html body .clipme-wp-chatcol{
background:#0c0c10; border:1px solid #1b1b22; border-radius:10px; padding:10px;
}
html body .clipme-wp-msgs{ text-align:left; font-size:12px; line-height:1.5; }
@media (max-width:900px){
html body .clipme-wp-body{ grid-template-columns:minmax(0,1fr); }
html body .clipme-wp-chatcol{ display:none; }
}
/* ---- 43. Destination-page imagery + motion --------------------------------------
The 14 dropdown pages shipped as text only. Everything below is real ClipMe media —
published clips out of clips/feed and the creator avatars in assets/creators — never
stock and never another company's clients.
The fan is three 9:16 tiles: the middle one plays, the outer two are stills turned
back, so the eye lands on the moving one. A scan line crosses the middle tile on a
slow cycle — that is the product's own gesture, the cut being found, and it is the
only motion allowed to be conspicuous.
Reveals start VISIBLE and are only hidden once JS has claimed them, so a page with
no JS still shows its whole body rather than a column of blanks. ---------------- */
html body .clipme-pg-wrap.has-visual{ max-width:1180px; }
@media (min-width:1000px){
html body .clipme-pg-wrap.has-visual{
display:grid; grid-template-columns:minmax(0,1fr) 396px; gap:64px; align-items:start;
}
html body .clipme-pg-wrap.has-visual > *{ grid-column:1; }
html body .clipme-pg-wrap.has-visual > .clipme-pg-visual{
grid-column:2; grid-row:1 / span 5; position:sticky; top:104px;
}
}
html body .clipme-pg-visual{ margin:0 0 44px; }
/* --- the three-tile fan ---
Sized in percentages of the column and overlapped with negative margins. Fixed
pixel widths added up to 428px inside a 396px column, so the tiles collided and
the outer two ended up behind the middle one instead of fanned around it. */
html body .clipme-fan{
position:relative; display:flex; justify-content:center; align-items:center;
padding:16px 10px 10px; min-height:300px; overflow:visible;
/* the host stylesheet sets flex-direction:column on containers in this region, so
the three tiles stacked down the column instead of fanning across it */
flex-direction:row!important; flex-wrap:nowrap!important;
}
html body .clipme-fan-t{
position:relative; aspect-ratio:9/16; border-radius:14px;
overflow:hidden; background:var(--cm-elev,#131316);
border:1px solid var(--cm-border,#262630);
box-shadow:0 22px 44px rgba(0,0,0,.55);
flex:0 0 auto;
}
html body .clipme-fan-t img,
html body .clipme-fan-t video{
width:100%; height:100%; object-fit:cover; display:block;
}
html body .clipme-fan-t.side{ width:27%; opacity:.6; z-index:1; }
html body .clipme-fan-t.l{ transform:rotate(-8deg); margin-right:-5%; }
html body .clipme-fan-t.r{ transform:rotate(8deg); margin-left:-5%; }
html body .clipme-fan-t.mid{
width:40%; z-index:3; animation:clipme-float 6.5s ease-in-out infinite;
}
@keyframes clipme-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
/* the cut being found */
html body .clipme-fan-scan{
position:absolute; left:0; right:0; height:2px; top:0; z-index:4;
background:linear-gradient(90deg,transparent,var(--cm-live,#45e06a),transparent);
box-shadow:0 0 14px 2px rgba(69,224,106,.55);
animation:clipme-scan 5.2s cubic-bezier(.6,0,.35,1) infinite;
}
@keyframes clipme-scan{
0%,12% { top:0; opacity:0 }
18% { opacity:1 }
62% { top:100%; opacity:1 }
70%,100% { top:100%; opacity:0 }
}
html body .clipme-fan-badge{
position:absolute; z-index:5; left:50%; bottom:-4px; transform:translateX(-50%);
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
background:rgba(8,8,10,.92); border:1px solid var(--cm-border,#262630);
border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600;
color:var(--cm-fg,#fff); backdrop-filter:blur(6px); max-width:100%;
}
html body .clipme-fan-badge i{
width:7px; height:7px; border-radius:50%; background:var(--cm-live,#45e06a);
animation:clipme-pulse 1.7s ease-in-out infinite; flex:0 0 auto;
}
@keyframes clipme-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
/* --- who it already ran on --- */
html body .clipme-proof{ margin:26px 0 0; text-align:center; }
html body .clipme-proof-row{ display:flex; justify-content:center; padding-left:11px; }
html body .clipme-proof-row img{
width:38px; height:38px; border-radius:50%; object-fit:cover; margin-left:-11px;
border:2px solid var(--cm-bg,#08080a); background:var(--cm-elev,#131316);
}
html body .clipme-proof-cap{
margin:12px 0 0; font-size:13px; color:var(--cm-faint,#6b6b76); line-height:1.5;
}
html body .clipme-proof-cap b{ color:var(--cm-muted,#9b9ba6); font-weight:600; }
/* --- platforms --- */
html body .clipme-pg-plats{
display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:22px 0 0;
}
html body .clipme-pg-plats span{
display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
color:var(--cm-muted,#9b9ba6); background:var(--cm-elev,#131316);
border:1px solid var(--cm-border,#262630); border-radius:999px; padding:6px 12px;
}
html body .clipme-pg-plats img{ width:14px; height:14px; display:block; }
/* --- scroll reveals: only applied once JS is running --- */
html body .clipme-reveal{
opacity:0; transform:translateY(16px);
transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
html body .clipme-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
html body .clipme-fan-t.mid{ animation:none; }
html body .clipme-fan-scan{ display:none; }
html body .clipme-fan-badge i{ animation:none; }
html body .clipme-reveal{ transition:none; opacity:1; transform:none; }
}
@media (max-width:999px){
html body .clipme-pg-visual{ margin:8px 0 40px; }
html body .clipme-fan{ min-height:300px; }
}
/* ---- 108. Long-form body: the unstyled half of every page -----------------------
Census of one persona page: 6 bare , 21 bare
, 4 bare
, 1 bare
inside .clipme-pg-wrap. None carry a class, so nothing in this stylesheet reached
them and the browser default was the design. Two consequences were visible:
* every bare h2 computed margin-bottom:0, so the paragraph welded itself to the
heading - the headline and its first line were touching on every long page.
* every text node computed max-width:none, so prose ran the full 1180px wrap.
At 17px that is ~150 characters a line, roughly double a readable measure.
Scoped with :not([class]) on purpose. The wrap mixes themed elements (.clipme-pg-h2,
.clipme-pg-answer, .clipme-pg-intro) with these bare ones; matching bare elements
only means the existing, deliberate treatments are left exactly as they are.
Scoped to prose position as well (2026-09-18): bare elements are matched only as
direct children of the wrap or inside a bare under it. Unscoped, these
rules reached every ported card grid (use-case cards, autopilot cards, wall steps,
hub cards) and stacked 40px heading margins inside 18px-padded cards. */
html body .clipme-pg-wrap > h2:not([class]),
html body .clipme-pg-wrap > section:not([class]) h2:not([class]){
font-size:clamp(26px,3.6vw,38px);
line-height:1.1;
letter-spacing:-.022em;
margin:64px 0 18px;
max-width:20ch;
text-wrap:balance;
}
html body .clipme-pg-wrap > h3:not([class]),
html body .clipme-pg-wrap > section:not([class]) h3:not([class]){
font-size:clamp(19px,2.2vw,23px);
line-height:1.25;
letter-spacing:-.012em;
margin:40px 0 12px;
text-wrap:balance;
}
/* Measure. 68ch keeps a 17px line near 65-75 characters, which is the band long-form
actually reads at - the wrap stays 1180px for the tables and visuals that need it. */
html body .clipme-pg-wrap > p:not([class]),
html body .clipme-pg-wrap > section:not([class]) p:not([class]),
html body .clipme-pg-wrap > ul:not([class]),
html body .clipme-pg-wrap > section:not([class]) ul:not([class]),
html body .clipme-pg-wrap > ol:not([class]),
html body .clipme-pg-wrap > section:not([class]) ol:not([class]){
max-width:68ch;
}
html body .clipme-pg-wrap > p:not([class]),
html body .clipme-pg-wrap > section:not([class]) p:not([class]){
font-size:17px;
line-height:1.68;
margin:0 0 20px;
opacity:.9;
}
html body .clipme-pg-wrap > ul:not([class]),
html body .clipme-pg-wrap > section:not([class]) ul:not([class]),
html body .clipme-pg-wrap > ol:not([class]),
html body .clipme-pg-wrap > section:not([class]) ol:not([class]){
margin:0 0 26px;
padding-left:22px;
}
html body .clipme-pg-wrap > ul:not([class]) li,
html body .clipme-pg-wrap > section:not([class]) ul:not([class]) li,
html body .clipme-pg-wrap > ol:not([class]) li,
html body .clipme-pg-wrap > section:not([class]) ol:not([class]) li{
font-size:17px;
line-height:1.62;
margin-bottom:9px;
opacity:.9;
}
html body .clipme-pg-wrap > ul:not([class]) li::marker,
html body .clipme-pg-wrap > section:not([class]) ul:not([class]) li::marker{ color:var(--color-red,#e63046); }
/* A heading that opens a block should not also inherit the 64px lead-in. */
html body .clipme-pg-wrap > section > div > h2:not([class]):first-child,
html body .clipme-pg-wrap > h2:not([class]):first-child,
html body .clipme-pg-wrap > section:not([class]) h2:not([class]):first-child{ margin-top:0; }
html body .clipme-pg-wrap > table:not([class]),
html body .clipme-pg-wrap > section:not([class]) table:not([class]){ margin:0 0 34px; }
@media (max-width:700px){
html body .clipme-pg-wrap > h2:not([class]),
html body .clipme-pg-wrap > section:not([class]) h2:not([class]){ margin:44px 0 14px; max-width:none; }
html body .clipme-pg-wrap > h3:not([class]),
html body .clipme-pg-wrap > section:not([class]) h3:not([class]){ margin:30px 0 10px; }
html body .clipme-pg-wrap > p:not([class]),
html body .clipme-pg-wrap > section:not([class]) p:not([class]),
html body .clipme-pg-wrap > ul:not([class]) li,
html body .clipme-pg-wrap > section:not([class]) ul:not([class]) li,
html body .clipme-pg-wrap > ol:not([class]) li,
html body .clipme-pg-wrap > section:not([class]) ol:not([class]) li{ font-size:16px; }
}
/* ---- 109. Interactive polish: motion where the page is actually touched ---------
The theme already carries 33 keyframes and 71 animation rules, but they live in the
built widgets. Everything the reader actually moves a cursor over - table rows, the
step accordions, body links, list items - had no state at all, and the long-form
column had no reveal (see the selector note in clipme-theme.js). Motion here is
restricted to opacity, colour and small transforms so nothing reflows on hover.
The floating theme toggle is also dealt with: fixed at z-index 99999 it sat directly
on top of body copy - it was covering an