— sometimes more than one (e.g. "@handle" AND a full URL as two example forms) —
so each becomes its own tinted pill rather than JS wrapping them into one box. */
#popup_servicos_home:has(> #helper) .lower_text {
display: block;
background: var(--color-bg-surface-tint);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-6);
margin: var(--space-3) 0 0;
font-size: var(--text-xs);
color: var(--color-text-brand-deep);
text-decoration: none;
}
#popup_servicos_home:has(> #helper) #botoes { display: block; margin-top: var(--space-6); }
#popup_servicos_home:has(> #helper) #botoes a {
display: block; width: 100%;
text-align: center;
border-radius: var(--radius-md);
padding: var(--space-6);
font-size: var(--text-sm); font-weight: var(--weight-bold);
box-shadow: none;
}
/* Shape 2 — the real add-to-cart link/post confirmation ("confira os dados do post"):
#link_preview is unique to this flow. All content (thumbnail, caption, stats, link)
is real scraped data already in the DOM (home.js popup_confirmacao_de_link()) — this
only restyles it, nothing here invents fields the real system doesn't provide. */
.ui-dialog:has(#popup_servicos_home > #link_preview) { border-top: 4px solid #6D28D9; }
#popup_servicos_home:has(> #link_preview) .close-btn {
top: -1px; right: -1px;
width: auto; height: auto;
background: none;
font-size: 20.8px;
}
.boom-popup-skin__head {
display: flex; align-items: center; gap: var(--space-3);
margin: 0 var(--space-9) var(--space-6) 0;
}
.boom-popup-skin__head h3.header { margin: 0; }
.boom-popup-skin__icon--warning { flex-shrink: 0; font-size: 23.4px; color: #F59E0B; }
#popup_servicos_home:has(> #link_preview) h3.header {
font: var(--weight-bold) var(--text-md) var(--font-body);
color: var(--color-text-primary);
}
#popup_servicos_home #link_preview {
position: relative;
}
/* Placeholder frame shown while the thumbnail is being fetched — home.js adds
.is-loading before calling getDataUri() and removes it once that call resolves
(success or failure). */
#popup_servicos_home #link_preview.is-loading:not(:has(img:not([hidden])))::before {
content: "Carregando imagem...";
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 16 / 10;
background: var(--color-bg-surface-tint);
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
font-size: var(--text-xs); color: var(--color-text-secondary);
}
/* Fallback frame shown once loading has finished without a usable image — either
there was no thumbnail_url at all, or getDataUri() failed/returned something
that wasn't a data:image/ URI. */
#popup_servicos_home #link_preview:not(.is-loading):not(:has(img:not([hidden])))::before {
content: "";
display: block; width: 100%; aspect-ratio: 16 / 10;
background: var(--color-bg-surface-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23B7B2C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center;
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
}
/* Explicit "the thumbnail existed but genuinely failed to load" state
(2026-07-19 user request) — home.js adds .boom-thumb-error once
getDataUri() has failed even after its one built-in retry, distinct from
the plain icon-only fallback above (which also covers the unrelated "no
thumbnail_url at all" case). Repeats the fallback rule's own
:not(:has(img:not([hidden]))) clause (redundant in practice — this class
is only ever set once the img is already confirmed hidden — but needed
so this selector's specificity (2 IDs, 3 classes/pseudo-classes, 1 type)
actually exceeds the plain fallback's (2 IDs, 2 classes/pseudo-classes,
1 type) instead of tying it: a bare ".boom-thumb-error:not(.is-loading)"
measured equal specificity to the rule above (the "img" type selector
buried inside :has() counts), which the source-order tiebreak alone
didn't reliably win — confirmed live, the plain icon rendered instead of
this text until the clause was added. Text comes from the
data-boom-thumb-error-text attribute (home.js sets it from
boomCoreAjax.i18n.imageLoadError), not hardcoded here, so it stays
translatable per the project's i18n rule. */
#popup_servicos_home #link_preview.boom-thumb-error:not(.is-loading):not(:has(img:not([hidden])))::before {
content: attr(data-boom-thumb-error-text);
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 16 / 10; box-sizing: border-box;
background: var(--color-bg-surface-tint);
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
padding: var(--space-5);
font-size: var(--text-xs); color: var(--color-text-secondary);
text-align: center;
}
#popup_servicos_home #link_preview img:not([hidden]) {
display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
}
#popup_servicos_home #link_preview > span.lower_text {
display: block;
font-size: var(--text-xs); color: var(--color-text-primary);
text-align: center; line-height: var(--leading-relaxed);
margin-bottom: var(--space-4);
}
/* @handle line — kept (it's the real post owner, useful context) but as a small
violet label rather than its own block row. Selector is class-based, not
parent-ID-scoped, since 2026-07-22: handle/caption/metrics are now three
independently-orderable pieces (see popup_confirmacao_de_link() in
home.js) rather than one fixed #emoji_container wrapper, so the handle's
position relative to its siblings varies by content type. */
#popup_servicos_home .link_preview_handle {
display: block;
text-align: center;
font-size: var(--text-xs); font-weight: var(--weight-semibold);
color: var(--color-text-brand-deep);
margin-bottom: var(--space-4);
}
#popup_servicos_home .metricas {
display: flex; justify-content: center; flex-wrap: wrap;
gap: var(--space-7);
margin-bottom: var(--space-6);
}
#popup_servicos_home .metricas span {
display: inline-flex !important; align-items: center; gap: 4px;
font-size: var(--text-2xs); color: var(--color-text-secondary);
}
#popup_servicos_home .metricas i { font-size: 15.6px; }
#popup_servicos_home .erro_scraper {
display: block; text-align: center;
font-size: var(--text-xs); font-weight: var(--weight-semibold);
color: var(--pink-500);
margin-bottom: var(--space-4);
}
#popup_servicos_home a.dados_da_previa {
display: block;
background: var(--color-bg-surface-tint);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-6);
margin-bottom: var(--space-6);
text-align: center;
font-size: var(--text-2xs); color: var(--color-text-brand-deep);
text-decoration: none;
word-break: break-all;
}
#popup_servicos_home:has(> #link_preview) #botoes {
display: flex; flex-direction: column; gap: var(--space-4);
margin-top: 0;
}
#popup_servicos_home:has(> #link_preview) #botoes a {
display: block; width: 100%;
text-align: center;
border-radius: var(--radius-md);
padding: var(--space-6);
font-size: var(--text-sm); font-weight: var(--weight-bold);
box-shadow: none;
}
/* #confirmo (primary, "confirmar e continuar") keeps the shared CTA gradient/shadow
from the generic #botoes a rule above; #nao_confirma here becomes the secondary
"mudar link" action — outlined, not filled, so the two aren't equally weighted.
Real DOM order is nao_confirma-then-confirmo; the design shows the primary
action first, so that's flipped visually here without touching the DOM. */
#popup_servicos_home:has(> #link_preview) #botoes #confirmo { order: 1; }
#popup_servicos_home:has(> #link_preview) #botoes #nao_confirma {
order: 2;
background: none; color: var(--color-text-brand-deep);
border: 1px solid var(--violet-300);
box-shadow: none;
}
/* Shape 3 — the generic "ATENÇÃO" + message + "CHAMAR SUPORTE" popup (home.js's
cria_popup_generico_com_mensagem_personalizada(): validation errors, link-not-
found, private profile, wrong media type, etc). Gated on a #botoes wa.me link,
unique to this flow (see boom.js skinGenericErrorPopup). Note: home.js's
mensagem string is wrapped in one outer , but often already contains its
own
tags (e.g. the "link not found" message + link + instruction) — the
browser auto-closes the outer
at the first nested one, so these end up as
sibling
elements directly under the popup, which is what the "> p" rule
below targets. */
.ui-dialog:has(#popup_servicos_home #botoes a[href*="wa.me"]) { border-top: 4px solid #6D28D9; }
#popup_servicos_home:has(#botoes a[href*="wa.me"]) .close-btn {
top: -1px; right: -1px;
width: auto; height: auto;
background: none;
font-size: 20.8px;
}
#popup_servicos_home:has(#botoes a[href*="wa.me"]) > p {
font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
}
#popup_servicos_home:has(#botoes a[href*="wa.me"]) > p:last-of-type { margin-bottom: 0; }
#popup_servicos_home:has(#botoes a[href*="wa.me"]) > p a {
color: var(--color-text-brand-deep); word-break: break-all;
}
#popup_servicos_home:has(#botoes a[href*="wa.me"]) #botoes {
display: flex; flex-direction: column; gap: var(--space-4);
margin-top: var(--space-6);
}
#popup_servicos_home:has(#botoes a[href*="wa.me"]) #botoes a {
display: block; width: 100%;
text-align: center;
border-radius: var(--radius-md);
padding: var(--space-6);
font-size: var(--text-sm); font-weight: var(--weight-bold);
box-shadow: none;
}
/* "chamar suporte" — WhatsApp-tinted so it reads as its own action, not a
second, equally-weighted "entendi / voltar". green-800-on-green-100 (not
white-on-#25D366) because white text on the raw WhatsApp green fails WCAG
contrast (~2:1) — this pairing is the same one already used for the
cart-added-popup's success icon and hits 8:1+. */
#popup_servicos_home:has(#botoes a[href*="wa.me"]) #botoes a.boom-popup-skin__btn--whatsapp {
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
background: var(--green-100); color: var(--green-800);
}
#popup_servicos_home:has(#botoes a[href*="wa.me"]) #botoes a.boom-popup-skin__btn--whatsapp:hover {
filter: none; background: var(--green-200); color: var(--green-800);
}
/* Loading state ("CARREGANDO INFORMAÇÕES DO LINK") shown briefly while the real
scraper AJAX call is in flight, before #link_preview exists. */
.ui-dialog:has(#popup_servicos_home > #carregando) { border-top: 4px solid #6D28D9; }
#popup_servicos_home #carregando {
display: flex; flex-direction: column; align-items: center;
gap: var(--space-5);
padding: var(--space-9) 0;
text-align: center;
}
#popup_servicos_home #carregando i { font-size: 28.6px; color: var(--color-text-brand); }
#popup_servicos_home #carregando #texto p { margin: 0; }
#popup_servicos_home #carregando #texto p:not(.boom-cart-added-popup__title) { font-size: var(--text-xs); color: var(--color-text-secondary); }
/* "adicionado ao carrinho!" popup (boom.js initCartAddedPopup) — a plain
theme-owned element, not a jQuery UI dialog. 3 states now (2026-07-19,
see boom.js's own doc comment): loading (shown the instant #confirmo is
clicked, via the 'adding_to_cart' body event) -> success ('added_to_cart')
or error ('boom_add_to_cart_error'). Only one .boom-cart-added-popup__state
is ever visible at a time, picked by the popup's own [data-state] — content
swaps in place instead of closing this popup and opening a different one.
Shares .boom-popup-backdrop with the jQuery UI popups above (see
initPopupBackdrop's anyDialogOpen check). */
.boom-cart-added-popup {
display: none;
position: fixed; z-index: 91;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 90%;
background: var(--color-bg-surface);
border-top: 4px solid #6D28D9;
border-radius: var(--radius-xl);
padding: var(--space-9) var(--space-8);
box-sizing: border-box;
box-shadow: var(--shadow-xl);
}
/* "adicionando no carrinho" (loading state) is just a spinner + one line of
text — noticeably smaller than the success/error states' icon+title+sub(+
buttons), so it gets its own bigger box rather than sharing the base size. */
.boom-cart-added-popup[data-state="loading"] {
width: 90%;
padding: var(--space-11) var(--space-9);
}
.boom-cart-added-popup.is-open { display: block; }
.boom-cart-added-popup__state {
display: none;
flex-direction: column; align-items: center; text-align: center; gap: var(--space-4);
}
.boom-cart-added-popup[data-state="loading"] .boom-cart-added-popup__state--loading,
.boom-cart-added-popup[data-state="success"] .boom-cart-added-popup__state--success,
.boom-cart-added-popup[data-state="error"] .boom-cart-added-popup__state--error {
display: flex;
}
/* Same visual convention as #popup_servicos_home/#cashboom_popup's .close-btn:
circular tinted badge, top-right corner. This popup is theme-built (not one
of home.js's jQuery UI dialogs), so it needs its own close affordance. */
.boom-cart-added-popup__close {
position: absolute; top: var(--space-4); right: var(--space-4);
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-pill);
background: var(--color-bg-surface-tint);
color: var(--color-text-secondary);
border: none; padding: 0; cursor: pointer;
}
.boom-cart-added-popup__close i { font-size: 16.9px; }
/* Hidden during the (normally sub-second) loading state — there's nothing to
cancel mid-request, and an X here just invites a tap that reads as "did it
work?" uncertainty rather than actually doing anything useful. */
.boom-cart-added-popup[data-state="loading"] .boom-cart-added-popup__close { display: none; }
.boom-cart-added-popup__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--green-100);
display: flex; align-items: center; justify-content: center;
}
.boom-cart-added-popup__icon i { font-size: 28.6px; color: var(--green-700); }
/* Error state reuses --color-*-warning (amber), not a new red/danger token —
this design system doesn't have one (see the upsell button's own green,
not red, for the deliberate reasoning against reaching for red here) and
amber is already the established "something needs attention" semantic
elsewhere (e.g. .boom-status-popup__row--warning). */
.boom-cart-added-popup__icon--error { background: var(--color-bg-warning); }
.boom-cart-added-popup__icon--error i { color: var(--color-text-warning); }
/* Loading state's spinner matches the icon circle's own size/tint so the 3
states don't visibly jump in height swapping between them — same
brand-tinted-circle treatment as .boom-cart-added-popup__icon, not a bare
spinner floating on its own. Motion is functional (real progress
indicator), not decorative — tokens.css's "no decorative looping
animation" rule is about ornamental motion, not this. */
.boom-cart-added-popup__spinner {
width: 44px; height: 44px;
border-radius: 50%;
border: 3px solid var(--color-bg-surface-tint);
border-top-color: var(--color-text-brand);
animation: boom-spin 0.7s linear infinite;
}
@keyframes boom-spin { to { transform: rotate(360deg); } }
.boom-cart-added-popup__title { font: var(--weight-bold) var(--text-base) var(--font-body); color: var(--color-text-brand-deep); }
.boom-cart-added-popup__sub { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.boom-cart-added-popup__btn {
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
width: 100%; margin-top: var(--space-3);
background: var(--color-bg-cta); color: #fff;
border: none; border-radius: var(--radius-md);
padding: var(--space-6); box-sizing: border-box;
font-size: var(--text-sm); font-weight: var(--weight-bold);
text-align: center; text-decoration: none;
cursor: pointer;
}
.boom-cart-added-popup__btn i { font-size: 15.6px; flex-shrink: 0; }
.boom-cart-added-popup__btn:hover { filter: brightness(1.05); color: #fff; }
/* "continuar comprando" / "ver carrinho" — secondary actions, outlined so
they aren't equally weighted against the primary "finalizar compra" CTA. */
.boom-cart-added-popup__btn--secondary {
background: none; color: var(--color-text-brand-deep);
border: 1px solid var(--violet-300);
}
.boom-cart-added-popup__btn--secondary:hover { filter: none; background: var(--color-bg-surface-tint); color: var(--color-text-brand-deep); }
/* "continuar comprando" — deliberately not the plain outline the other
secondary action gets: this is the upsell path (keep shopping), so it
gets a real fill rather than reading as the least important button on the
screen. History: --color-accent-pink originally (2026-07-17, read as a
"stop"/error red) → --green-700 (2026-07-19) → var(--color-bg-cta)
(2026-07-19, later same day, explicit user instruction) — now the same
violet CTA gradient "finalizar compra" uses, reading as an equally real
action rather than a muted secondary one. */
.boom-cart-added-popup__btn--upsell {
background: var(--color-bg-cta); color: #fff;
border: none;
}
.boom-cart-added-popup__btn--upsell:hover { filter: brightness(1.05); color: #fff; }
/* ---------- Status dos serviços / promoções da semana hub ---------- */
/* One bordered card holding both accordions, matching the mockup's tpl 248
wrapper (Boom Home.dc.html — accordion headers separated by border-top). */
.boom-hub {
border: var(--border-hairline);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
overflow: hidden;
}
/* Generic accordion hook — JS-driven via [data-boom-accordion]/[data-open]
(boom.js's existing DOMContentLoaded handler), CSS added here since this
is the first section to actually use it. Visual language (chevron rotate,
height reveal) mirrors the checkbox-driven #accordion-regras-info pattern
already established for "ver regras do serviço". */
.boom-hub__accordion + .boom-hub__accordion { border-top: var(--border-hairline); }
.boom-hub__acc-head {
display: flex; align-items: center; gap: var(--space-4);
width: 100%;
background: var(--color-bg-surface-tint);
border: none; margin: 0;
padding: 9px 13px;
cursor: pointer;
text-align: left;
font: inherit; color: inherit;
}
.boom-hub__acc-icon {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: var(--radius-sm);
background: var(--color-bg-surface);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
}
.boom-hub__acc-icon i { font-size: 16.9px; color: var(--color-text-brand); }
.boom-hub__acc-titles { display: flex; flex-direction: column; }
.boom-hub__acc-title {
font-size: var(--text-base); font-weight: var(--weight-black);
color: var(--color-text-brand-deep);
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.boom-hub__acc-title--flex { flex: 1 1 0%; }
.boom-hub__acc-sub { font-size: var(--text-2xs); color: var(--color-text-secondary); font-weight: var(--weight-medium); margin-top: 1px; }
.boom-hub__acc-head::after {
content: "";
flex-shrink: 0;
margin-left: auto;
width: 11px; height: 11px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1L5.5 5.5L10 1' stroke='%236D28D9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 7px;
transition: transform var(--duration-base) var(--ease-standard);
}
.boom-hub__accordion[data-open] .boom-hub__acc-head::after { transform: rotate(180deg); }
.boom-hub__acc-body {
max-height: 3000px; overflow: hidden; opacity: 1;
padding: var(--space-6) 13px 14px;
transition: max-height var(--duration-slow) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), padding var(--duration-slow) var(--ease-standard);
}
.boom-hub__accordion:not([data-open]) .boom-hub__acc-body {
max-height: 0; opacity: 0;
padding-top: 0; padding-bottom: 0;
}
/* Status ticker: one box per message type, each cycling its rows via a
JS-driven translateY on .boom-status-box__track (boom.js initStatusTicker,
translateY step must match this row's height). Layout matches Boom
Home.dc.html's own ticker markup (2026-07-25, values scaled 1.3x from
its 46px-tall row per this project's established mockup->live factor):
tag+date share one line (row-head, flex-start + gap - NOT space-between,
confirmed against the mockup's actual inline styles), title below on
its own line. Tag/title stay forced single-line (nowrap + ellipsis)
since this fixed-height cycling can't accommodate a variable row height
the way the popup's free-flowing list can. */
.boom-status-box {
border-radius: var(--radius-sm);
padding: 0 13px;
height: 60px;
overflow: hidden;
position: relative;
}
.boom-status-box + .boom-status-box { margin-top: 7.8px; }
.boom-status-box--success { background: var(--color-bg-success); border: var(--border-hairline); border-color: var(--color-border-success); }
.boom-status-box--warning { background: var(--color-bg-warning); border: var(--border-hairline); border-color: var(--color-border-warning); }
.boom-status-box__track { display: flex; flex-direction: column; transition: transform 0.6s var(--ease-standard); }
.boom-status-box__row {
height: 60px; flex-shrink: 0;
display: flex; align-items: center; gap: 9.1px;
}
.boom-status-box__row i { font-size: 18.2px; flex-shrink: 0; }
.boom-status-box__row-body { display: flex; flex-direction: column; gap: 2.6px; min-width: 0; }
.boom-status-box__row-head { display: flex; align-items: center; gap: 7.8px; }
.boom-status-box__row-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boom-status-box__row-text { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boom-status-box__row-date { font-size: 10.4px; opacity: 0.75; flex-shrink: 0; white-space: nowrap; }
.boom-status-box--success .boom-status-box__row { color: var(--color-text-success); }
.boom-status-box--warning .boom-status-box__row { color: var(--color-text-warning); }
.boom-status-box--success .boom-status-box__row-tag { background: var(--color-bg-success-strong); color: var(--color-text-success); }
.boom-status-box--warning .boom-status-box__row-tag { background: var(--color-bg-warning-strong); color: var(--color-text-warning); }
/* Promoções da semana carousel */
.boom-promo-scroll {
display: flex; gap: var(--space-5);
overflow-x: auto;
padding-bottom: 2px;
scroll-snap-type: x proximity;
cursor: grab;
}
.boom-promo-scroll:active { cursor: grabbing; }
.boom-promo-scroll.boom-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.boom-promo-scroll.boom-no-scrollbar::-webkit-scrollbar { display: none; }
/* Popup-only additions to .boom-promo-tile (base styling shared with the
on-page "promoções da semana" row, see that section's CSS above) — a
clickable services checklist and a weekend foot note, styled for the
same on-dark card background since these tiles are purple/dark here
too, not the popup's old plain-surface .boom-promo-card look. */
.boom-promo-tile__services-label {
font-size: 10.4px; font-weight: var(--weight-bold);
color: rgba(255,255,255,0.85);
margin: 11.7px 0 5.2px;
}
.boom-promo-tile__services {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 3.9px;
}
/* align-items:flex-start (not center, 2026-07-29) - center vertically
centers the checkmark against a wrapped 2-line service name's FULL
height, putting it roughly between the two lines instead of level with
the first one - reads as stray left-side space on line 1 and a misaligned
icon overall. flex-start keeps the icon level with the first line
regardless of how many lines the name wraps to. */
.boom-promo-tile__services li {
display: flex; align-items: flex-start; gap: 5.2px;
font-size: 10.4px; color: rgba(255,255,255,0.85);
}
.boom-promo-tile__services i { color: #fff; font-size: 11.7px; flex-shrink: 0; }
/* text-align:left explicit (2026-07-29) - the real cause of the "extra
left space" reported on long, wrapping service names: