/* ========================================================================== BRAND PUSH — released 2026-09-08, previously behind ?mp=preview Everything here hangs off body.mp-v2, a class the theme always prints. The selectors are unchanged from the preview build, so what shipped is exactly what was approved, at exactly the same specificity — nothing was rewritten on the way out. KILL SWITCH: delete the mp-v2 line in inc/brand-push.php and every rule below stops applying at once, with no other file touched. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PROMPT CENTER — the gold pill shows the brand name without a tap. Live, the name is folded to max-width:0 and only unfolds on the bolt. That hid the brand on every one of the 16k cards. Here the name is always up, the pill sizes to its content and the three icon buttons take the rest. -------------------------------------------------------------------------- */ body.mp-v2 .pc-quick { flex: 0 1 auto; cursor: pointer; transition: background .18s ease, border-color .18s ease; } /* The pill wore one gold whatever brand it pointed at. Border, fill and arrow now all read --tool-ink, the brand colour already lifted until it clears 4.5:1 on this card, so PornWorks is orange, ClothOff salmon, AiNudez neutral grey. */ body.mp-v2 .pc-quick { border-color: color-mix(in srgb, var(--tool-ink, #ffcf33) 70%, transparent); background: color-mix(in srgb, var(--tool-ink, #ffcf33) 17%, transparent); } body.mp-v2 .pc-quick:hover { border-color: color-mix(in srgb, var(--tool-ink, #ffcf33) 92%, transparent); background: color-mix(in srgb, var(--tool-ink, #ffcf33) 23%, transparent); } body.mp-v2 .pc-quick-tg, body.mp-v2 .pc-quick-nm { color: #fff; } body.mp-v2 .pc-quick-nm { max-width: 150px; opacity: 1; visibility: visible; padding: 0 9px 0 4px; text-overflow: ellipsis; transition: none; } body.mp-v2 .pc-quick-tg { width: 28px; } body.mp-v2 .pc-quick.pc-quick-copied { background: rgba(52, 211, 153, .22); border-color: rgba(52, 211, 153, .55); } body.mp-v2 .pc-quick.pc-quick-copied .pc-quick-nm, body.mp-v2 .pc-quick.pc-quick-copied .pc-quick-tg { color: #34d399; } @media (max-width: 520px) { body.mp-v2 .pc-quick-nm { max-width: 96px; font-size: 11px; } } /* -------------------------------------------------------------------------- 2. PROMPT GENERATOR — "Copy & try on ". Live, the lead brand under a fresh prompt is a bare name with an arrow, and the user has to copy first, then click. Here the button does both, so the prompt is already on the clipboard when the tool opens. -------------------------------------------------------------------------- */ body.mp-v2 .prompt-suggestion-cta { font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .78; margin-right: .45em; } /* -------------------------------------------------------------------------- 3. GENERATOR — two lines, narrower, and lit at rest. Two things were wrong. The label ran on one long line, and everything from line 1698 of prompt-generator.css lives inside @media (max-width: 768px) — so the bold 60% brand fill only ever existed on mobile, and a global preview rule outranked it and dimmed the one place it worked. This rule is the same on both widths and brighter than either was, because a phone has no hover and the resting state is all it ever gets. The tint uses --brand-ink, the colour lifted until it clears 4.5:1, so AiNudez (#000000) becomes neutral glass instead of a black hole. Text stays white: on a 40% brand ground, brand-coloured text is the unreadable option. -------------------------------------------------------------------------- */ body.mp-v2 .prompt-suggestions { max-width: 330px; } body.mp-v2 .prompt-suggestion-tool.prompt-suggestion-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 9px; width: -moz-fit-content; width: fit-content; min-width: 190px; max-width: 100%; margin: 0 auto; padding: .7rem 1.5rem; border: 1px solid color-mix(in srgb, var(--brand-ink, #ffffff) 64%, transparent); border-left-width: 1px; border-radius: 12px; background: linear-gradient(150deg, color-mix(in srgb, var(--brand-ink, #ffffff) 42%, transparent) 0%, color-mix(in srgb, var(--brand-ink, #ffffff) 19%, transparent) 100%), rgba(var(--glass-rgb), .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 26px -10px color-mix(in srgb, var(--brand-ink, #ffffff) 90%, transparent); color: #fff; } body.mp-v2 .prompt-suggestion-tool::before { background: none; } /* Line one. flex-basis 100% is what breaks the row. */ body.mp-v2 .prompt-suggestion-lead .prompt-suggestion-cta { flex: 0 0 100%; margin: 0; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); opacity: 1; } /* Line two. */ body.mp-v2 .prompt-suggestion-lead .prompt-suggestion-tool-name { font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; color: #fff; } body.mp-v2 .prompt-suggestion-lead .prompt-suggestion-tool-arrow { font-size: 1.05rem; opacity: 1; color: #fff; } body.mp-v2 .prompt-suggestion-tool.prompt-suggestion-lead:hover { background: linear-gradient(150deg, color-mix(in srgb, var(--brand-ink, #ffffff) 56%, transparent) 0%, color-mix(in srgb, var(--brand-ink, #ffffff) 28%, transparent) 100%), rgba(var(--glass-rgb), .5); border-color: color-mix(in srgb, var(--brand-ink, #ffffff) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 30px -10px color-mix(in srgb, var(--brand-ink, #ffffff) 100%, transparent); transform: translateY(-1px); } /* The runners-up keep their quiet underline treatment, just tinted. */ body.mp-v2 .prompt-suggestion-tool.prompt-suggestion-alt-item { color: color-mix(in srgb, var(--brand-ink, #ffffff) 68%, rgba(255, 255, 255, .55)); } body.mp-v2 .prompt-suggestion-tool.prompt-suggestion-alt-item:hover { color: var(--brand-ink, #ffffff); } /* -------------------------------------------------------------------------- 4. PROSE LINKS — the house gold, plus a card on hover. Violet was borrowed from the Prompt Center and teal was a colour the site does not own. Gold is madeprompt's own accent, it is the most evident thing that can sit in white prose on this ground, and inside an article there is no gold pill for it to be confused with. Colour alone still does not say where a link goes, so on hover the link opens a small card with the cover, the title and one line of the page on the other side. Desktop only: on a phone a tap has to mean "go". -------------------------------------------------------------------------- */ body.mp-v2 { --prose-link: #ffc83d; --prose-line: rgba(255, 200, 61, .45); } body.mp-v2 .xrated-lab-single-article-content a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 1px 3px; margin: 0 -3px; border-radius: 4px; transition: background .18s ease, color .18s ease, text-decoration-color .18s ease; } body.mp-v2 .xrated-lab-single-article-content a:hover { color: #ffdf94; background: rgba(255, 200, 61, .13); text-decoration-color: #ffdf94; } /* The card itself. */ .mp-lp { position: absolute; z-index: 99998; width: 300px; max-width: calc(100vw - 24px); overflow: hidden; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(20, 20, 24, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 46px -14px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; } .mp-lp.mp-lp-below { transform: translateY(-6px); } .mp-lp.mp-lp-on { opacity: 1; transform: translateY(0); } .mp-lp-shot { display: block; line-height: 0; background: rgba(255, 255, 255, .04); } /* display:block above outranks the browser's own [hidden] rule, so say it again. */ .mp-lp-shot[hidden] { display: none; } /* Crop from the top, not the middle: these are portrait brand shots and a centre crop cut every face off at the chin. */ .mp-lp-shot img { width: 100%; height: 132px; display: block; object-fit: cover; object-position: center top; } /* No picture is a state, not a failure: a gold hairline where the image would be. */ .mp-lp-noshot { border-top: 2px solid #ffc83d; } .mp-lp-noshot .mp-lp-body { padding-top: 13px; } .mp-lp-body { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 13px; } .mp-lp-kind { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffc83d; } .mp-lp-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; } .mp-lp-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); } @media (prefers-reduced-motion: reduce) { .mp-lp { transition: opacity .16s ease; transform: none; } .mp-lp.mp-lp-on { transform: none; } } /* -------------------------------------------------------------------------- 5. PROMPT CENTER — brand colour as a light glass wash inside the box. The first attempt put a saturated edge and a drop glow on the card; against 24 dark cards that read as an alarm, not an accent. This tints the card's own glass instead, which lights it without shouting. :active is there because a phone has no hover and a tap should still show something. Still a hover, not a resting state: 85% of the 16,094 cards map to PornWorks and another 6% to ClothOff (#fe7301 and #fc9667, the same orange), so a permanent tint would paint the whole library one colour. -------------------------------------------------------------------------- */ body.mp-v2 .pc-card { transition: background .22s ease, border-color .22s ease; } body.mp-v2 .pc-card:hover, body.mp-v2 .pc-card:active { background: linear-gradient(165deg, color-mix(in srgb, var(--card-ink, #ffcf33) 12%, transparent) 0%, color-mix(in srgb, var(--card-ink, #ffcf33) 3%, transparent) 100%), var(--pc-glass); border-color: color-mix(in srgb, var(--card-ink, #ffcf33) 32%, transparent); } /* -------------------------------------------------------------------------- 6. MOBILE — the lead button was out of proportion. Full-bleed at 190px minimum inside a 330px panel left it looking like a banner rather than a button. On a phone the panel and the button both come in, and the type steps down with them. -------------------------------------------------------------------------- */ @media (max-width: 768px) { body.mp-v2 .prompt-suggestions { max-width: 268px; } body.mp-v2 .prompt-suggestion-tool.prompt-suggestion-lead { min-width: 0; padding: .55rem 1.2rem; border-radius: 11px; gap: 0 8px; } body.mp-v2 .prompt-suggestion-lead .prompt-suggestion-cta { font-size: 8.5px; letter-spacing: .14em; } body.mp-v2 .prompt-suggestion-lead .prompt-suggestion-tool-name { font-size: .94rem; } body.mp-v2 .prompt-suggestion-lead .prompt-suggestion-tool-arrow { font-size: .95rem; } } /* -------------------------------------------------------------------------- 7. COMMUNITY PROMPTS on the generator page. The same component as the Prompt Center hub under a different prefix (cp- instead of pc-), so it gets the same two changes: the brand name up without a tap, and the brand colour washing the card on hover. -------------------------------------------------------------------------- */ body.mp-v2 .cp-quick { cursor: pointer; transition: background .18s ease, border-color .18s ease; } /* The pill wore one gold whatever brand it pointed at. Border, fill and arrow now all read --tool-ink, the brand colour already lifted until it clears 4.5:1 on this card, so PornWorks is orange, ClothOff salmon, AiNudez neutral grey. */ body.mp-v2 .cp-quick { border-color: color-mix(in srgb, var(--tool-ink, #ffcf33) 70%, transparent); background: color-mix(in srgb, var(--tool-ink, #ffcf33) 17%, transparent); } body.mp-v2 .cp-quick:hover { border-color: color-mix(in srgb, var(--tool-ink, #ffcf33) 92%, transparent); background: color-mix(in srgb, var(--tool-ink, #ffcf33) 23%, transparent); } body.mp-v2 .cp-quick-tg, body.mp-v2 .cp-quick-nm { color: #fff; } body.mp-v2 .cp-quick-nm { max-width: 150px; opacity: 1; visibility: visible; padding: 0 9px 0 4px; text-overflow: ellipsis; transition: none; } body.mp-v2 .cp-quick-tg { width: 28px; } body.mp-v2 .cp-quick.cp-quick-copied { background: rgba(52, 211, 153, .22); border-color: rgba(52, 211, 153, .55); } body.mp-v2 .cp-quick.cp-quick-copied .cp-quick-nm, body.mp-v2 .cp-quick.cp-quick-copied .cp-quick-tg { color: #34d399; } body.mp-v2 .cp-card { transition: background .22s ease, border-color .22s ease; } body.mp-v2 .cp-card:hover, body.mp-v2 .cp-card:active { border-color: color-mix(in srgb, var(--card-ink, #ffcf33) 32%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--card-ink, #ffcf33) 12%, transparent) 0%, color-mix(in srgb, var(--card-ink, #ffcf33) 3%, transparent) 100%), var(--pc-glass, rgba(255, 255, 255, .04)); } @media (max-width: 520px) { body.mp-v2 .cp-quick-nm { max-width: 96px; font-size: 11px; } } /* -------------------------------------------------------------------------- 8. THE PROMPT TEXT SPILLING OUT OF THE CARD. Live bug, not a preview one: identical markup is served to visitors. .cp-card-text carries flex-grow:1 alongside -webkit-line-clamp:4. The cards sit in a grid, so a short card is stretched to the height of the tallest one in its row and flex-grow hands that extra height to the text block. Once the block is taller than four lines, overflow:hidden has nothing left to clip: the ellipsis stays drawn at line four and lines five to seven show anyway. Dropping flex-grow lets the clamp measure content again, and it also picks up the three-line clamp the mobile rule already sets. margin-top:auto on the footer keeps the buttons on the bottom edge, which is the only thing flex-grow was really buying. -------------------------------------------------------------------------- */ body.mp-v2 .cp-card-text { flex-grow: 0; } body.mp-v2 .cp-card-footer { margin-top: auto; } /* -------------------------------------------------------------------------- 9. THE CARDS SPILLING OUT SIDEWAYS. My doing, and here is the arithmetic. .community-prompts-grid is repeat(auto-fill, minmax(300px, 1fr)). Putting the brand name up added 150px of nowrap, non-shrinking content to the footer: padding 40 + date 75 + 3 buttons 102 + gaps 24 + pill 190 = 431px 431 does not fit in a 300px column, so every card overflowed its track and dragged the whole grid past the page. Giving the actions their own full-width row fixes it properly — the name gets real space instead of being squeezed — and it matches the hub, whose action row is already full width. -------------------------------------------------------------------------- */ body.mp-v2 .cp-card { min-width: 0; } body.mp-v2 .cp-card-footer { flex-wrap: wrap; row-gap: .6rem; } body.mp-v2 .cp-card-date { flex: 0 0 100%; } body.mp-v2 .cp-card-actions { flex: 0 0 100%; justify-content: space-between; min-width: 0; } /* Belt and braces: nothing in the pill may refuse to shrink. */ body.mp-v2 .cp-quick, body.mp-v2 .pc-quick { min-width: 0; } body.mp-v2 .cp-quick-nm, body.mp-v2 .pc-quick-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; } /* -------------------------------------------------------------------------- 10. IMAGE TO PROMPT — the same button as the generator. Two pages, one moment: the prompt is written, the only thing left is to run it. The generator now does that in one click, so this does too, and it wears the same clothes — two lines, glass with the brand tint, sized to content. The tint reads --btn, which madeprompt_brand_card_vars() already swaps for neutral glass when a brand colour is too dark to survive on this ground. -------------------------------------------------------------------------- */ body.mp-v2 .i2p-lead-btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 9px; width: -moz-fit-content; width: fit-content; min-width: 190px; max-width: 100%; padding: .7rem 1.5rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--btn, #12a06b) 64%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--btn, #12a06b) 42%, transparent) 0%, color-mix(in srgb, var(--btn, #12a06b) 19%, transparent) 100%), rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 26px -10px color-mix(in srgb, var(--btn, #12a06b) 90%, transparent); color: #fff; font-size: 1.06rem; font-weight: 700; } body.mp-v2 .i2p-lead-cta { flex: 0 0 100%; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } body.mp-v2 .i2p-lead-ar { font-size: 1.05rem; color: #fff; } body.mp-v2 .i2p-lead-btn:hover { filter: none; transform: translateY(-1px); border-color: color-mix(in srgb, var(--btn, #12a06b) 88%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--btn, #12a06b) 56%, transparent) 0%, color-mix(in srgb, var(--btn, #12a06b) 28%, transparent) 100%), rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 30px -10px color-mix(in srgb, var(--btn, #12a06b) 100%, transparent); } @media (max-width: 768px) { body.mp-v2 .i2p-lead-btn { min-width: 0; padding: .55rem 1.2rem; border-radius: 11px; font-size: .94rem; } body.mp-v2 .i2p-lead-cta { font-size: 8.5px; letter-spacing: .14em; } body.mp-v2 .i2p-lead-ar { font-size: .95rem; } }