/* * Baralho de produtos (home) + compositor de cartão (home e /pedido/{slug}). * * Estrutura: .product-deck > .deck-tabs + .deck-stage > .deck-card > .composer * - Sem JavaScript (sem a classe `js` no ): os cards aparecem um abaixo * do outro e o formulário mostra os 3 passos em sequência. * - Com JavaScript: os cards ficam empilhados. product-deck.js só escreve * data-depth em cada card (0 = frente); toda a aparência da pilha é daqui. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .composer [hidden] { display: none !important; } .section-lede { text-align: center; color: var(--muted); max-width: 560px; margin: -16px auto 28px; line-height: 1.5; } /* ---------- abas ---------- */ .product-deck { max-width: 1000px; margin: 0 auto; } .deck-tabs { display: none; } .js .deck-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; } .deck-tab { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .deck-tab:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .deck-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .deck-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); } .deck-tab-name { font-weight: 600; font-size: 0.92em; white-space: nowrap; } .deck-tab-price { font-size: 0.78em; opacity: 0.8; } @media (max-width: 720px) { .js .deck-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 2px 8px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; } .js .deck-tabs::-webkit-scrollbar { display: none; } .deck-tab { flex-shrink: 0; } } /* ---------- pilha de cards ---------- */ .deck-stage { --deck-step: 18px; /* quanto cada card de trás aparece abaixo do da frente */ display: grid; gap: 28px; } .deck-card, .composer-solo { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 30px; box-shadow: 0 18px 50px color-mix(in srgb, var(--fg) 12%, transparent); scroll-margin-top: 24px; } .js .deck-stage { gap: 0; padding-bottom: calc(var(--deck-step) * 3 + 14px); } .js .deck-card { grid-area: 1 / 1; transform-origin: 50% 100%; /* a base fica fixa: cada card de trás "espia" por baixo */ /* Estado padrão = fundo da pilha (depth ≥ 4): some atrás dos outros. */ z-index: 1; opacity: 0; transform: translateY(calc(var(--deck-step) * 3)) scale(0.9); cursor: pointer; } .js .deck-card[data-depth="0"] { z-index: 6; opacity: 1; transform: none; cursor: default; } .js .deck-card[data-depth="1"] { z-index: 5; opacity: 1; transform: translateY(var(--deck-step)) scale(0.972); } .js .deck-card[data-depth="2"] { z-index: 4; opacity: 0.94; transform: translateY(calc(var(--deck-step) * 2)) scale(0.944); } .js .deck-card[data-depth="3"] { z-index: 3; opacity: 0.85; transform: translateY(calc(var(--deck-step) * 3)) scale(0.916); } /* Só anima depois da primeira pintura (product-deck.js põe .is-ready). */ .js .is-ready .deck-card { transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.4s ease; } /* Card de trás: mostra só a tirinha da base, com o nome do produto e a cor do tema. */ .js .deck-card:not([data-depth="0"]) .composer { opacity: 0; visibility: hidden; } .js .is-ready .deck-card .composer { transition: opacity 0.3s ease 0.1s, visibility 0s linear 0s; } .js .is-ready .deck-card:not([data-depth="0"]) .composer { transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .js .deck-card::before { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 4px; height: calc(var(--deck-step) - 6px); line-height: calc(var(--deck-step) - 6px); text-align: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); pointer-events: none; } .js .deck-card::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--gift-bg-1), var(--gift-bg-2)); pointer-events: none; } .js .deck-card[data-depth="0"]::before, .js .deck-card[data-depth="0"]::after { display: none; } .js .deck-card:not([data-depth="0"]):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* Cards de trás ficam invisíveis: não gasta animação neles. */ .js .deck-card:not([data-depth="0"]) .gift-decor span { animation-play-state: paused; } /* ---------- compositor ---------- */ .composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: 40px; align-items: start; } .composer-form-col { min-width: 0; } .composer-head { text-align: center; } .composer-eyebrow { margin: 0 0 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .composer-title { margin: 0; font-size: 1.7rem; line-height: 1.15; } .composer-price { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; vertical-align: middle; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .composer-lede { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; } .composer-stepcount { margin: 22px 0 10px; text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .composer-stepper { list-style: none; display: flex; justify-content: center; align-items: center; margin: 0 0 24px; padding: 0; } .composer-stepper li { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); } .composer-stepper li + li::before { content: ""; width: 26px; height: 1px; margin: 0 10px; background: var(--border); } .composer-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--fg) 8%, transparent); transition: background 0.2s ease, color 0.2s ease; } .composer-stepper li[aria-current="step"] { color: var(--fg); } .composer-stepper li[aria-current="step"] .composer-dot { color: #fff; background: var(--accent); } .composer-stepper li.is-done { cursor: pointer; } .composer-stepper li.is-done .composer-dot { color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); } /* Sem JS não há passos: tudo aparece de uma vez. */ html:not(.js) .composer-stepcount, html:not(.js) .composer-stepper, html:not(.js) .composer-next, html:not(.js) .composer-prev, html:not(.js) .composer-summary-live { display: none; } .composer-form { display: grid; gap: 16px; } .composer-step { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; } .js .composer-step { display: none; } .js .composer[data-step="1"] .composer-step[data-step="1"], .js .composer[data-step="2"] .composer-step[data-step="2"], .js .composer[data-step="3"] .composer-step[data-step="3"] { display: grid; } .composer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .composer-field { display: grid; gap: 6px; min-width: 0; } .composer-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .composer-label b { color: var(--accent); } .composer-label small { font-size: 1em; font-weight: 500; letter-spacing: 0; text-transform: none; } .composer-field input[type="text"], .composer-field input[type="email"], .composer-field textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, var(--surface)); border: 1px solid var(--border); border-radius: 12px; } .composer-field input:focus, .composer-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .composer-field input[aria-invalid="true"], .composer-field textarea[aria-invalid="true"] { border-color: #c62828; } .composer-field textarea { min-height: 130px; resize: vertical; } .composer-field input[type="file"] { font-size: 0.85rem; color: var(--muted); } .composer-counter { justify-self: end; margin: -30px 26px 0 0; /* longe da alça de redimensionar do textarea */ font-size: 0.7rem; color: var(--muted); pointer-events: none; } .composer-summary { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; } .composer-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 0.9rem; border-bottom: 1px solid var(--border); } .composer-summary dt { color: var(--muted); } .composer-summary dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; } .composer-summary > .composer-total { border-bottom: 0; background: color-mix(in srgb, var(--accent) 8%, transparent); } .composer-total dd { font-size: 1.05rem; color: var(--accent); } .composer-note { margin: 0; font-size: 0.82rem; color: var(--muted); } .composer-actions { display: flex; gap: 12px; margin-top: 4px; } .composer-actions button { font-family: inherit; font-size: 0.95em; font-weight: 600; cursor: pointer; background: none; border: 1px solid transparent; } .composer-actions .btn-cta { border: 0; background: var(--accent); } .composer-actions .btn-cta:hover { background: var(--accent-dark); } .composer-actions .btn-ghost { border-color: var(--border); } .composer-next, .composer-submit { flex: 1; text-align: center; } .composer-submit:disabled { opacity: 0.7; cursor: progress; } .composer-prev { display: none; } .js .composer:not([data-step="1"]) .composer-prev { display: inline-block; } .js .composer-submit { display: none; } .js .composer[data-step="3"] .composer-submit { display: inline-block; } .js .composer[data-step="3"] .composer-next { display: none; } /* ---------- prévia ao vivo ---------- */ .composer-preview { min-width: 0; } .composer-stage { --stage-bg: linear-gradient(160deg, var(--gift-bg-1), var(--gift-bg-2)); --card-bg: color-mix(in srgb, var(--gift-accent) 34%, transparent); --card-fg: var(--gift-fg); --card-accent: var(--gift-fg); position: relative; overflow: hidden; padding-bottom: 20px; border: 1px solid color-mix(in srgb, #fff 10%, transparent); border-radius: 26px; background: var(--stage-bg); } /* Palco com WebGL: não recorta o canvas com cantos arredondados (o canvas é transparente, então nada vaza) — o recorte de uma camada que muda a cada quadro custa GPU. A chuva de emojis do fallback recorta a si mesma. */ .composer-stage.is-3d { overflow: visible; } .composer-stage.is-3d .gift-decor { border-radius: 26px 26px 0 0; } .theme-rosa-3d .composer-stage { --stage-bg: radial-gradient(120% 90% at 50% 12%, #4a0f1c 0%, #1a0509 55%, #0b0305 100%); --card-bg: rgba(12, 10, 11, 0.94); --card-fg: #f6eaea; --card-accent: #c9a26a; } .composer-visual { position: relative; height: 300px; } .composer-visual canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; /* rolar a página na vertical continua funcionando sobre a rosa */ } .composer-visual canvas:active { cursor: grabbing; } .composer-visual .gift-decor { position: absolute; } .composer-visual .gift-decor span { top: -30px; font-size: 1.4rem; opacity: 0.7; animation-name: composer-decor-fall; } @keyframes composer-decor-fall { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(170px) translateX(18px) rotate(180deg); } 100% { transform: translateY(360px) translateX(-18px) rotate(360deg); } } .composer-hero { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 50px; font-size: 5.5rem; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.3)); pointer-events: none; } .composer-spin { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--card-fg); cursor: pointer; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; opacity: 0.75; transition: opacity 0.2s ease, background 0.2s ease; } .composer-spin:hover, .composer-spin:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.55); } .composer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 60px; color: var(--card-fg); font-size: 0.85rem; opacity: 0.85; pointer-events: none; } .composer-spinner { width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: composer-spin 0.9s linear infinite; } @keyframes composer-spin { to { transform: rotate(360deg); } } .composer-card { position: relative; margin: -72px 16px 0; padding: 22px 24px 24px; color: var(--card-fg); background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } .composer-card-to { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--card-accent); overflow-wrap: anywhere; } .composer-card-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; } .composer-card-title em { font-style: italic; } .composer-rule { width: 44px; height: 1px; margin: 0 0 14px; border: 0; background: color-mix(in srgb, var(--card-fg) 40%, transparent); } .composer-photo { display: block; width: 100%; max-height: 120px; margin: 0 0 12px; object-fit: cover; border-radius: 12px; } .composer-quote { display: -webkit-box; margin: 0; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.45; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .composer-quote::before { content: "\201C"; } .composer-quote::after { content: "\201D"; } .composer-quote.is-placeholder, .composer-card-to .is-placeholder, .composer-card-title .is-placeholder { opacity: 0.6; } .composer-caption { margin: 14px 4px 0; text-align: center; font-size: 0.85rem; line-height: 1.45; color: var(--muted); } .composer-credit { margin: 8px 4px 0; text-align: center; font-size: 0.7rem; line-height: 1.4; color: var(--muted); opacity: 0.85; } .composer-credit a { color: inherit; } /* ---------- página avulsa /pedido/{slug} ---------- */ .composer-page { max-width: 1000px; margin: 0 auto; padding: 8px 16px 56px; } /* ---------- telas menores ---------- */ @media (max-width: 860px) { .composer { grid-template-columns: 1fr; gap: 24px; } .composer-preview { order: -1; /* a rosa/prévia aparece primeiro, compacta, e o formulário logo abaixo */ } .composer-visual { height: 230px; } .composer-card { margin-top: -58px; } .deck-card, .composer-solo { padding: 20px 16px; border-radius: 22px; } .deck-stage { --deck-step: 12px; } } @media (max-width: 520px) { .composer-row { grid-template-columns: 1fr; } .composer-stepper li + li::before { width: 14px; margin: 0 6px; } .composer-stepname { display: none; /* só os números nas telas estreitas; o nome do passo ativo vem abaixo */ } .composer-stepper li[aria-current="step"] .composer-stepname { display: inline; } } @media (prefers-reduced-motion: reduce) { .js .is-ready .deck-card, .js .is-ready .deck-card .composer, .composer-dot, .deck-tab { transition: none !important; } .composer-spinner { animation-duration: 2.4s; } }