/* ========================================================== Laço | estilos da página do convidado Cada tipo de evento define só --destaque-base (no body); as variações claras e escuras são calculadas a partir dela. ========================================================== */ :root { --fundo: #FBF7F5; --superficie: #FFFFFF; --texto: #2E2729; --texto-suave: #6F6467; --linha: #EADFDB; --marca: #B04A66; --destaque-base: #B04A66; --sobre-destaque: #FFFFFF; --erro: #B3261E; --raio: 14px; --fonte-titulo: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif; --fonte-script: 'Pinyon Script', 'Great Vibes', 'Brush Script MT', cursive; --fonte-texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color-scheme: light; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } html { scroll-padding-top: env(safe-area-inset-top, 0px); } [hidden] { display: none !important; } /* Impede a página de "arrastar" para os lados no celular */ html, body { overflow-x: hidden; overflow-x: clip; } body { overscroll-behavior-x: none; } /* Temas por tipo de evento */ [data-tema="casamento"] { --destaque-base: #5F6D4B; } /* verde-sálvia */ [data-tema="cha-bebe"] { --destaque-base: #4C6E82; } /* azul acinzentado */ [data-tema="aniversario"] { --destaque-base: #85587A; } /* malva */ body, [data-tema] { --destaque: var(--destaque-base); --destaque-escuro: color-mix(in srgb, var(--destaque-base) 78%, black); --destaque-suave: color-mix(in srgb, var(--destaque-base) 13%, var(--superficie)); } /* Modo escuro (segue o sistema, ou força com data-theme no ) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fundo: #1C191A; --superficie: #262223; --texto: #F3EDED; --texto-suave: #BBAFB2; --linha: #3B3436; --sobre-destaque: #1C191A; --erro: #F2B8B5; color-scheme: dark; } :root:not([data-theme="light"]) :is(body, [data-tema]) { --destaque: color-mix(in srgb, var(--destaque-base) 62%, white); --destaque-escuro: color-mix(in srgb, var(--destaque-base) 48%, white); --destaque-suave: color-mix(in srgb, var(--destaque-base) 26%, var(--superficie)); } } :root[data-theme="dark"] { --fundo: #1C191A; --superficie: #262223; --texto: #F3EDED; --texto-suave: #BBAFB2; --linha: #3B3436; --sobre-destaque: #1C191A; --erro: #F2B8B5; color-scheme: dark; } :root[data-theme="dark"] :is(body, [data-tema]) { --destaque: color-mix(in srgb, var(--destaque-base) 62%, white); --destaque-escuro: color-mix(in srgb, var(--destaque-base) 48%, white); --destaque-suave: color-mix(in srgb, var(--destaque-base) 26%, var(--superficie)); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; } img, svg { max-width: 100%; } a { color: var(--destaque-escuro); text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Carregando / erro ---------- */ .tela-estado { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 2rem 1.25rem; text-align: center; color: var(--texto-suave); } .tela-estado h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--texto); } .tela-estado p { margin: 0; max-width: 28rem; } .laco-pulsando { width: 84px; color: var(--marca); } .laco-pulsando svg { display: block; width: 100%; height: auto; animation: pulsar 1.4s ease-in-out infinite; } @keyframes pulsar { 50% { transform: scale(.88); opacity: .6; } } .btn[aria-busy="true"] { cursor: progress; opacity: .75; } /* ---------- Barra do protótipo ---------- */ .demo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem clamp(1rem, 4vw, 2.5rem); background: var(--superficie); border-bottom: 1px dashed var(--linha); font-size: .85rem; color: var(--texto-suave); } .demo-opcoes { display: flex; flex-wrap: wrap; gap: .35rem; } .demo-opcoes button, .demo-restaurar { font: inherit; cursor: pointer; border-radius: 999px; padding: .3rem .8rem; border: 1px solid var(--linha); background: transparent; color: var(--texto); } .demo-opcoes button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); } .demo-restaurar { margin-left: auto; color: var(--texto-suave); } .demo-link { font-weight: 600; color: var(--texto); } /* ---------- Capa: o convite ---------- */ .convite { padding: clamp(0rem, 4vw, 2.75rem) clamp(0rem, 3vw, 1.5rem) 0; } .convite-cartao { position: relative; isolation: isolate; overflow: hidden; max-width: 40rem; margin: 0 auto; padding: clamp(5.5rem, 18vw, 9rem) clamp(1rem, 6vw, 3.5rem) clamp(2rem, 5vw, 2.75rem); background: var(--superficie); text-align: center; box-shadow: 0 1px 2px rgb(40 30 30 / .05), 0 18px 48px -18px rgb(40 30 30 / .18); } /* Folhagens */ .folhas { position: absolute; top: -14px; z-index: -1; width: clamp(140px, 38%, 250px); pointer-events: none; } .folhas svg { display: block; width: 100%; height: auto; overflow: visible; } .folhas-esq { left: -18px; } .folhas-dir { right: -18px; transform: scaleX(-1); } .folha-escura { fill: var(--destaque); opacity: .88; } .folha-media { fill: color-mix(in srgb, var(--destaque) 70%, var(--superficie)); opacity: .85; } .folha-clara { fill: color-mix(in srgb, var(--destaque) 42%, var(--superficie)); opacity: .8; } .veia { fill: none; stroke: var(--superficie); stroke-width: 1.3; stroke-linecap: round; opacity: .5; } .caule { fill: none; stroke: var(--destaque-escuro); stroke-width: 1.4; opacity: .7; } .folha-fundo { position: absolute; z-index: -2; left: 50%; top: 56%; width: min(600px, 130%); transform: translate(-50%, -50%) rotate(-24deg); color: var(--destaque); opacity: .045; pointer-events: none; } .folha-fundo svg { display: block; width: 100%; height: auto; } .folhas svg { animation: brotar 1.1s ease-out both; } @keyframes brotar { from { opacity: 0; transform: translateY(-8px) rotate(-2deg); } } /* Texto do convite */ .monograma { margin: 0 0 1.6rem; font-family: var(--fonte-titulo); font-weight: 500; line-height: .9; font-size: clamp(3.6rem, 13vw, 5.4rem); letter-spacing: -.02em; color: var(--destaque-escuro); } .monograma span + span { position: relative; top: .24em; margin-left: -.14em; font-size: .8em; } .citacao { margin: 0 auto 1.6rem; max-width: 26rem; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.15rem; line-height: 1.5; white-space: pre-line; } .convite-chamada { margin: 0 auto; max-width: 30rem; font-family: var(--fonte-titulo); font-variant: small-caps; font-weight: 600; font-size: clamp(1.15rem, 3.4vw, 1.4rem); letter-spacing: .07em; line-height: 1.35; } .convite-nomes { margin: .5rem 0 1.4rem; font-family: var(--fonte-script); font-weight: 400; letter-spacing: 0; font-size: clamp(2.8rem, 11vw, 4.6rem); line-height: 1.2; color: var(--destaque-escuro); overflow-wrap: anywhere; } .convite-quando { display: inline-flex; margin: 0; border-top: 1.5px solid var(--texto); border-bottom: 1.5px solid var(--texto); font-family: var(--fonte-titulo); font-size: clamp(.95rem, 4.1vw, 1.5rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; } .convite-quando span { padding: .3rem clamp(.55rem, 3vw, 1.6rem); } .convite-quando span + span { border-left: 1.5px solid var(--texto); } .convite-local { margin: 1.15rem 0 .1rem; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; } .convite-endereco { margin: 0; font-size: .95rem; color: var(--texto-suave); } .convite-contagem { margin: 1.1rem 0 0; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.2rem; color: var(--destaque-escuro); } /* Atalhos com ícones */ .convite-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 1rem clamp(.4rem, 2vw, 1.25rem); margin: 2.25rem 0 0; } .atalho { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .4rem .2rem; border: 0; background: none; cursor: pointer; font: inherit; color: var(--destaque-escuro); text-decoration: none; } .atalho svg { width: clamp(2.5rem, 9vw, 3.1rem); height: clamp(2.5rem, 9vw, 3.1rem); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .atalho span { font-family: var(--fonte-titulo); font-variant: small-caps; font-weight: 600; font-size: clamp(.76rem, 2.8vw, 1.05rem); letter-spacing: .02em; line-height: 1.2; hyphens: auto; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .atalho:hover svg { transform: translateY(-3px); } html { scroll-behavior: smooth; } /* ---------- Conteúdo ---------- */ main { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } .mensagem { max-width: 36rem; margin: clamp(3rem, 7vw, 4.5rem) auto; text-align: center; } .mensagem blockquote { margin: 0; font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(1.3rem, 2.8vw, 1.6rem); line-height: 1.5; } .assinatura { margin: 1rem 0 0; color: var(--texto-suave); } .lista-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; } .lista-topo h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.5rem); font-variant: small-caps; letter-spacing: .04em; } .lista-resumo { margin: 0; color: var(--texto-suave); } .filtros { margin: 1.25rem 0 1.75rem; display: grid; gap: .85rem; } .chips { display: flex; flex-wrap: wrap; gap: .45rem; } .chip { font: inherit; font-size: .95rem; cursor: pointer; padding: .45rem 1rem; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--texto); } .chip:hover { border-color: var(--destaque); } .chip[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); } .filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; } .busca { flex: 1 1 16rem; max-width: 24rem; } .busca input, .campo input, .campo textarea, .campo select { width: 100%; font: inherit; color: var(--texto); padding: .65rem .85rem; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--superficie); } .busca input:focus, .campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--destaque); } .so-disponiveis { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; } .so-disponiveis input { width: 1.1rem; height: 1.1rem; accent-color: var(--destaque); } /* ---------- Cards de presente ---------- */ .grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); } .presente { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; } .presente-imagem { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--destaque-suave); font-size: 3.6rem; } .presente.esgotado .presente-imagem > :first-child { filter: grayscale(.7); opacity: .55; } .presente-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Etiqueta de presente com o preço */ .etiqueta { position: absolute; top: .9rem; left: .75rem; padding: .3rem .8rem .3rem 1.45rem; font-family: var(--fonte-texto); font-size: .95rem; font-weight: 700; background: var(--superficie); color: var(--texto); clip-path: polygon(.75rem 0, 100% 0, 100% 100%, .75rem 100%, 0 50%); border-radius: 0 6px 6px 0; transform: rotate(-4deg); transform-origin: left center; } .etiqueta::before { content: ""; position: absolute; left: .62rem; top: 50%; width: .38rem; height: .38rem; margin-top: -.19rem; border-radius: 50%; background: var(--destaque-suave); } .etiqueta small { font-weight: 500; font-size: .8rem; color: var(--texto-suave); } /* Faixa de fita quando o presente já foi escolhido */ .faixa { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: .4rem 1rem; background: var(--destaque); color: var(--sobre-destaque); font-size: .9rem; font-weight: 700; text-align: center; } .presente-corpo { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.15rem; } .presente-corpo h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; } .presente-categoria { margin: 0; font-size: .87rem; color: var(--texto-suave); } .presente-descricao { margin: .15rem 0 0; font-size: .93rem; } .presente-qtd { margin: .35rem 0 0; font-size: .92rem; } .progresso { height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; } .progresso span { display: block; height: 100%; background: var(--destaque); border-radius: 3px; } .presente-acoes { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } .link-loja { font-size: .93rem; } .vazio { padding: 2rem 0; color: var(--texto-suave); } /* ---------- Botões ---------- */ .btn { font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; padding: .6rem 1.2rem; border-radius: 999px; border: 1.5px solid transparent; transition: background-color .15s, border-color .15s; } .btn-principal { background: var(--destaque); color: var(--sobre-destaque); } .btn-principal:hover:not([disabled]) { background: var(--destaque-escuro); } .btn-secundario { background: transparent; color: var(--texto); border-color: var(--linha); } .btn-secundario:hover { border-color: var(--destaque); } .btn[disabled] { cursor: not-allowed; background: var(--linha); color: var(--texto-suave); } /* ---------- Presença e mural ---------- */ .acoes-finais { margin: clamp(3.5rem, 8vw, 5.5rem) 0 3rem; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .acao h2 { margin: 0 0 .35rem; font-size: 1.9rem; font-variant: small-caps; letter-spacing: .04em; } .acao > p { margin: 0 0 1rem; color: var(--texto-suave); } .contagem-presenca { font-weight: 500; color: var(--texto) !important; } .mural { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: 1rem; } .mural li { padding-left: 1rem; border-left: 3px solid var(--destaque); } .mural p { margin: 0; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.2rem; line-height: 1.45; } .mural span { font-size: .88rem; color: var(--texto-suave); } .mural .mural-vazio { border: 0; padding: 0; color: var(--texto-suave); } .rodape { padding: 2rem 1rem 2.5rem; text-align: center; font-size: .9rem; color: var(--texto-suave); border-top: 1px solid var(--linha); } .marca { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.3rem; color: var(--marca); } a.marca { text-decoration: none; } a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ---------- Janela (modal) ---------- */ .modal { width: min(31rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: 18px; background: var(--superficie); color: var(--texto); } .modal[open] { animation: surgir .2s ease-out; } @keyframes surgir { from { opacity: 0; transform: translateY(10px) scale(.98); } } .modal::backdrop { background: rgb(22 14 17 / .55); } .modal-conteudo { padding: 1.5rem; } .modal-conteudo h2 { margin: 0; font-size: 1.7rem; line-height: 1.15; } .modal-presente { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; } .modal-presente p { margin: .2rem 0 0; color: var(--texto-suave); } .modal-icone { flex: none; width: 4rem; height: 4rem; border-radius: 12px; display: grid; place-items: center; font-size: 2.1rem; background: var(--destaque-suave); overflow: hidden; } .modal-icone img { width: 100%; height: 100%; object-fit: cover; } .bloco { margin: 0 0 1.1rem; } .bloco p { margin: 0; } .bloco-titulo { font-weight: 700; font-size: .92rem; margin-bottom: .25rem !important; } .lista-lojas { margin: 0; padding-left: 1.1rem; } .campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; } .campo label { font-weight: 600; font-size: .95rem; } .campo textarea { resize: vertical; } .nota { font-size: .88rem; color: var(--texto-suave); margin: 0 0 .75rem; } .aviso-erro { color: var(--erro); font-weight: 500; margin: 0; min-height: 1.2em; } .total-cota { margin: -.25rem 0 1rem; } .passos { margin: 1rem 0; padding-left: 1.25rem; } .passos li { margin-bottom: .3rem; } .pix-caixa { background: var(--destaque-suave); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; } .pix-chave { font-size: 1.05rem; font-weight: 700; word-break: break-all; margin: .1rem 0 .2rem !important; } .pix-caixa .btn { margin-top: .6rem; background: var(--superficie); } .modal-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; } .modal-obrigado { text-align: center; } .modal-obrigado svg { width: 96px; height: auto; color: var(--destaque); margin-bottom: .5rem; } .modal-obrigado p { margin: .75rem 0 0; } .modal-obrigado .modal-acoes { justify-content: center; } .manual-texto { white-space: pre-line; margin: 1rem 0 0; } /* ---------- Aviso rápido ---------- */ .toast { position: fixed; left: 50%; z-index: 10; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 150%); max-width: calc(100% - 2rem); padding: .75rem 1.25rem; border-radius: 12px; background: var(--texto); color: var(--fundo); font-weight: 500; opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s; pointer-events: none; } .toast.visivel { transform: translate(-50%, 0); opacity: 1; visibility: visible; } /* ---------- Ajustes ---------- */ @media (max-width: 560px) { .convite-cartao { box-shadow: none; } .demo-restaurar { margin-left: 0; } .modal-acoes .btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }