/* * Convite: estrutura comum + acabamentos. * Nenhuma regra aqui conhece um modelo específico. Cores e fontes chegam por variáveis * (--t-*, --f-*) e cada escolha do Estúdio de modelos vira uma classe no : * hero--* open--* bg--* edge--* seal--* ttl--* cnt--* div--* lay--* btn--* glow--* nf--* ns--* nw--* msg--* */ [hidden]{display:none!important} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0} img{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer} .ic{flex:none} .inv-body{ background:var(--t-bg);color:var(--t-ink); font-family:var(--f-body);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; min-height:100vh; } .inv-body.is-closed{overflow:hidden;height:100vh} /* ---------- Coluna do convite ---------- */ .inv{ max-width:520px;margin:0 auto;position:relative;isolation:isolate; background:var(--t-surface);min-height:100vh;overflow:hidden; padding-bottom:calc(40px + env(safe-area-inset-bottom)); } @media (min-width:560px){ .inv{margin:28px auto;min-height:auto;border-radius:8px;box-shadow:0 40px 90px -50px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.04)} } /* ---------- Abertura ---------- */ .opening{ position:fixed;inset:0;z-index:50;display:grid;place-items:center; cursor:pointer;outline:none;perspective:1400px;-webkit-tap-highlight-color:transparent; } .op-panel{position:absolute;background:var(--t-cover);transition:transform 1.25s cubic-bezier(.7,0,.2,1),opacity 1s ease} .op-flap{display:none} .op-center{position:relative;z-index:3;text-align:center;padding:24px;transition:opacity .45s ease,transform .6s ease} .op-for{margin:0;font-family:var(--f-display);font-size:15px;letter-spacing:.08em;color:var(--t-cover-ink);opacity:.8} .op-name{margin:4px 0 18px;font-family:var(--f-script);font-size:clamp(52px,15vw,78px);line-height:1.1;color:var(--t-cover-ink)} .op-tap{ margin:0;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--t-cover-ink);opacity:.7;animation:tap 2.4s ease-in-out infinite; } @keyframes tap{0%,100%{opacity:.35}50%{opacity:.85}} .opening.is-open .op-center{opacity:0;transform:scale(.96)} .opening.is-gone{display:none} .open--curtain .op-a{inset:0 50% 0 0;border-right:1px solid color-mix(in srgb,var(--t-seal) 70%,transparent);background:linear-gradient(90deg,var(--t-cover),color-mix(in srgb,var(--t-cover) 88%,var(--t-cover-ink)))} .open--curtain .op-b{inset:0 0 0 50%;border-left:1px solid color-mix(in srgb,var(--t-seal) 70%,transparent);background:linear-gradient(270deg,var(--t-cover),color-mix(in srgb,var(--t-cover) 88%,var(--t-cover-ink)))} .open--curtain .opening.is-open .op-a{transform:translateX(-101%)} .open--curtain .opening.is-open .op-b{transform:translateX(101%)} .open--doors .op-a{inset:0 50% 0 0;transform-origin:left center} .open--doors .op-b{inset:0 0 0 50%;transform-origin:right center} .open--doors .op-a::after,.open--doors .op-b::after{content:"";position:absolute;inset:18px;border:1px solid color-mix(in srgb,var(--t-accent) 45%,transparent)} .open--doors .op-a::after{right:0;border-right:0} .open--doors .op-b::after{left:0;border-left:0} .open--doors .opening.is-open .op-a{transform:rotateY(-100deg);opacity:0} .open--doors .opening.is-open .op-b{transform:rotateY(100deg);opacity:0} .open--seal .op-a{inset:0 0 50% 0} .open--seal .op-b{inset:50% 0 0 0} .open--seal .opening.is-open .op-a{transform:translateY(-101%)} .open--seal .opening.is-open .op-b{transform:translateY(101%)} .open--veil .op-a{inset:0;background:radial-gradient(100% 70% at 50% 40%,color-mix(in srgb,var(--t-cover) 82%,#fff),var(--t-cover))} .open--veil .op-b{display:none} .open--veil .opening.is-open .op-a{opacity:0;transform:scale(1.08)} .open--envelope .op-a{inset:0;background:linear-gradient(180deg,var(--t-cover),color-mix(in srgb,var(--t-cover) 92%,#000))} .open--envelope .op-b{display:none} .open--envelope .op-flap{ display:block;position:absolute;left:0;right:0;top:0;height:46%;z-index:2;background:var(--t-flap); clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center; transition:transform .8s cubic-bezier(.6,0,.3,1),opacity .4s ease .5s; } .open--envelope .opening.is-open .op-flap{transform:rotateX(175deg);opacity:0} .open--envelope .opening.is-open .op-a{transform:translateY(102%);transition-delay:.45s} .open--envelope .op-center{padding-top:14vh} /* ---------- Lacre com a inicial ---------- */ .op-seal,.foot-seal{ width:92px;height:92px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center; background:var(--t-seal);color:var(--t-seal-ink); box-shadow:0 0 0 5px var(--t-cover),0 0 0 6px var(--t-seal),0 14px 30px -12px rgba(0,0,0,.45); font-family:var(--f-script);font-size:52px;line-height:1; } .op-seal span,.foot-seal span{transform:translateY(4%)} .foot-seal{width:64px;height:64px;font-size:36px;margin-bottom:14px;box-shadow:none} .seal--metal .op-seal,.seal--metal .foot-seal{ background:linear-gradient(140deg,color-mix(in srgb,var(--t-seal) 62%,#fff) 0%,var(--t-seal) 45%,color-mix(in srgb,var(--t-seal) 78%,#fff) 70%,color-mix(in srgb,var(--t-seal) 78%,#000) 100%); text-shadow:0 1px 1px rgba(0,0,0,.25); } .seal--glow .op-seal{box-shadow:0 0 0 5px var(--t-cover),0 0 0 6px var(--t-seal),0 0 40px color-mix(in srgb,var(--t-seal) 70%,transparent)} .seal--glow .foot-seal{box-shadow:0 0 28px color-mix(in srgb,var(--t-seal) 60%,transparent)} .glow--soft.seal--metal .op-seal{box-shadow:0 0 0 5px var(--t-cover),0 0 0 6px var(--t-seal),0 0 40px color-mix(in srgb,var(--t-seal) 45%,transparent)} .seal--outline .op-seal,.seal--outline .foot-seal{background:transparent;color:var(--t-seal);border:1px solid var(--t-seal);box-shadow:0 0 0 5px transparent,0 0 0 6px color-mix(in srgb,var(--t-seal) 40%,transparent)} .seal--text .op-seal{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--t-cover-ink);font-family:var(--f-display);font-size:120px;margin-bottom:0} .seal--text .foot-seal{display:none} /* ---------- Capa (hero) ---------- */ .hero{position:relative;text-align:center;padding:48px 28px 36px} .hero-media{position:relative;margin:0 auto;max-width:340px} .hero-img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--t-accent2)} .hero-img--empty{ display:grid;place-items:center;color:var(--t-on-accent);font-family:var(--f-script);font-size:120px; background:radial-gradient(60% 45% at 50% 30%,color-mix(in srgb,#fff 35%,transparent),transparent 70%),linear-gradient(160deg,var(--t-accent2),var(--t-accent)); } .hero-text{margin-top:30px} .hero-frase{margin:0;font-family:var(--f-display);font-size:17px;letter-spacing:.06em;color:var(--t-muted)} .hero-name{margin:2px 0 6px;font-family:var(--f-script);font-weight:400;font-size:clamp(64px,19vw,98px);line-height:1.05;color:var(--t-ink)} .hero-date{margin:0;font-family:var(--f-display);font-size:18px;color:var(--t-accent)} .hero--arch .hero-img{border-radius:999px 999px 0 0} .hero--arch .hero-media::after{content:"";position:absolute;inset:-10px;border:1px solid var(--t-accent);border-radius:999px 999px 0 0;pointer-events:none} .hero--oval .hero-img{border-radius:50%;aspect-ratio:3/4} .hero--oval .hero-media{max-width:300px} .hero--oval .hero-media::after{content:"";position:absolute;inset:-12px;border:1px solid var(--t-accent);border-radius:50%;pointer-events:none} .hero--circle .hero-img{border-radius:50%;aspect-ratio:1} .hero--circle .hero-media{max-width:280px} .hero--circle .hero-media::after{content:"";position:absolute;inset:-14px;border:2px solid var(--t-accent2);border-radius:50%;pointer-events:none} .hero--frame .hero-media{padding:12px;border:1px solid var(--t-accent)} .hero--frame .hero-media::after{content:"";position:absolute;inset:5px;border:1px solid var(--t-accent);pointer-events:none} .hero--full .hero{padding:0;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end} @media (min-width:560px){.hero--full .hero{min-height:760px}} .hero--full .hero-media{position:absolute;inset:0;max-width:none} .hero--full .hero-img{height:100%;aspect-ratio:auto} .hero--full .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72) 100%)} .hero--full .hero-img--empty{color:color-mix(in srgb,#fff 80%,transparent);background:radial-gradient(70% 50% at 50% 35%,color-mix(in srgb,var(--t-accent) 45%,transparent),transparent 70%),linear-gradient(170deg,var(--t-accent2),var(--t-bg))} .hero--full .hero-text{position:relative;padding:0 28px 56px;color:#fff} .hero--full .hero-name{color:#fff} .hero--full .hero-frase{color:rgba(255,255,255,.82)} .hero--editorial .hero{padding:0 0 32px;text-align:left} .hero--editorial .hero-media{max-width:none} .hero--editorial .hero-text{padding:0 26px} .hero--polaroid .hero-media{max-width:300px;padding:12px 12px 56px;background:#fff;transform:rotate(-3deg);box-shadow:0 20px 40px -18px rgba(0,0,0,.55)} .hero--polaroid .hero-img{aspect-ratio:1} /* ---------- Seções ---------- */ .sec{padding:52px 28px;text-align:center;position:relative} .sec + .sec{border-top:1px solid var(--t-line)} .sec-title{margin:0 0 22px;font-family:var(--f-display);font-weight:500;font-size:28px;line-height:1.2;color:var(--t-ink)} .sec-kicker{margin:0 0 16px;font-family:var(--f-display);font-size:18px;color:var(--t-muted)} .sec > .ic{color:var(--t-accent);margin:0 auto 12px;display:block} .count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:380px;margin:0 auto} .count div{display:flex;flex-direction:column;align-items:center;padding:14px 4px;border:1px solid var(--t-line);border-radius:var(--t-radius)} .count b{font-family:var(--f-display);font-weight:500;font-size:34px;line-height:1.1;color:var(--t-accent);font-variant-numeric:tabular-nums} .count span{font-size:12px;color:var(--t-muted);margin-top:4px} .count-done{font-family:var(--f-script);font-size:44px;color:var(--t-accent);margin:0} @media (max-width:560px){.has-music .s-count{padding-bottom:78px}} .orn{width:120px;height:1px;margin:0 auto 28px;background:var(--t-accent);position:relative} .orn::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--t-accent);transform:translate(-50%,-50%) rotate(45deg)} .msg{margin:0 auto;max-width:34ch;font-family:var(--f-display);font-style:italic;font-size:22px;line-height:1.55;color:var(--t-ink)} .pais-label{margin:30px 0 2px;font-size:13px;letter-spacing:.08em;color:var(--t-muted)} .pais{margin:0;font-family:var(--f-display);font-size:20px} .when-grid{display:grid;gap:26px;margin-bottom:28px} .when-item .ic{color:var(--t-accent);margin:0 auto 8px;display:block} .wi-main{margin:0;font-family:var(--f-display);font-size:21px;line-height:1.35} .wi-sub{margin:4px auto 0;color:var(--t-muted);max-width:32ch} .dress{margin:0;font-family:var(--f-display);font-size:22px} .gifts{margin:0 auto 24px;max-width:36ch;color:var(--t-ink);overflow-wrap:anywhere} .btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .ibtn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:0 22px;border-radius:var(--t-btn-radius); background:var(--t-accent);color:var(--t-on-accent);border:1px solid var(--t-accent); text-decoration:none;font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:.02em; transition:transform .15s ease,opacity .2s,box-shadow .2s; } .ibtn:active{transform:scale(.97)} .ibtn--ghost{background:transparent;color:var(--t-accent)} .ibtn--full{width:100%;margin-top:8px} .ibtn[disabled]{opacity:.5;cursor:not-allowed} .ibtn:focus-visible,.gal-item:focus-visible,.seg input:focus-visible + span,.opening:focus-visible .op-seal{outline:2px solid var(--t-accent);outline-offset:3px} .gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -28px;padding:0 28px 6px;scrollbar-width:none} .gal::-webkit-scrollbar{display:none} .gal-item{flex:0 0 72%;scroll-snap-align:center;padding:0;border:0;background:none;border-radius:var(--t-radius);overflow:hidden} .gal-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease} .gal-dots{display:flex;justify-content:center;gap:6px;margin-top:14px} .gal-dots i{width:6px;height:6px;border-radius:3px;background:var(--t-line);transition:background .2s,width .2s} .gal-dots i.on{background:var(--t-accent);width:16px} .lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:16px} .lightbox img{max-height:88vh;width:auto;max-width:100%;object-fit:contain} .lb-close,.lb-nav{position:absolute;background:none;border:0;color:#fff;padding:12px} .lb-close{top:calc(10px + env(safe-area-inset-top));right:10px} .lb-nav{top:50%;transform:translateY(-50%)} .lb-prev{left:4px}.lb-next{right:4px} .rsvp-hello{margin:0 auto 6px;max-width:34ch;font-family:var(--f-display);font-size:20px} .rsvp-dead{margin:0 0 20px;color:var(--t-muted);font-size:14px} .rsvp-note{margin:0 auto 20px;max-width:36ch;color:var(--t-muted)} .rsvp-form{max-width:380px;margin:0 auto;text-align:left} .rsvp-form--demo{opacity:.75;pointer-events:none} .rsvp-person{border:0;border-bottom:1px solid var(--t-line);margin:0;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:12px} .rsvp-person legend{float:left;padding:0;font-family:var(--f-display);font-size:18px;line-height:1.3;max-width:52%} .seg{display:flex;border:1px solid var(--t-accent);border-radius:var(--t-btn-radius);overflow:hidden;flex:none} .seg label{position:relative} .seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .seg span{display:block;padding:9px 14px;font-size:14px;color:var(--t-accent);transition:background .2s,color .2s} .seg input:checked + span{background:var(--t-accent);color:var(--t-on-accent)} .rsvp-status{min-height:1.5em;margin:12px 0 0;text-align:center;font-size:14px;color:var(--t-muted)} .rsvp-status.is-ok{color:var(--t-accent);font-weight:500} .inv-foot{text-align:center;padding:56px 28px 36px;border-top:1px solid var(--t-line)} .foot-name{margin:0;font-family:var(--f-script);font-size:44px;line-height:1.2} .foot-brand{margin:18px 0 0;font-size:12px;color:var(--t-muted)} .music-btn{ position:fixed;z-index:40;right:16px;bottom:calc(16px + env(safe-area-inset-bottom)); width:48px;height:48px;border-radius:50%;border:1px solid var(--t-accent); background:var(--t-surface);color:var(--t-accent);display:grid;place-items:center; box-shadow:0 8px 20px -8px rgba(0,0,0,.4); } .music-btn .mb-off{display:none} .music-btn.is-off .mb-on{display:none} .music-btn.is-off .mb-off{display:block} .music-btn:not(.is-off) .mb-on{animation:pulse 2s ease-in-out infinite} @keyframes pulse{50%{opacity:.55}} .toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--t-ink);color:var(--t-surface);padding:10px 18px;border-radius:999px;font-size:14px;transition:all .25s;z-index:90;pointer-events:none} .toast.is-on{opacity:1;transform:translate(-50%,0)} /* ---------- Barra da prévia e troca de modelo ---------- */ .pv-bar{ position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom)); display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(22,16,26,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.5); } .pv-bar a,.pv-bar button{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;padding:10px 13px;border-radius:999px;border:0;background:none;font-size:14px} .pv-bar .pv-primary{background:#fff;color:#1d1624;font-weight:600} .pv-bar ~ .music-btn,.inv-body:has(.pv-bar) .music-btn{bottom:calc(76px + env(safe-area-inset-bottom))} .pv-sheet{position:fixed;z-index:70;left:0;right:0;bottom:0;background:#fff;color:#1d1624;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;max-width:560px;margin:0 auto} .pv-sheet h2{margin:0 0 4px;font-size:17px} .pv-sheet p{margin:0 0 14px;font-size:14px;color:#6b6070} .pv-models{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .pv-model{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;font-size:12.5px;font-weight:600;text-align:center} .pv-model i{width:100%;aspect-ratio:3/4;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:30px;border:2px solid rgba(0,0,0,.06);line-height:1} .pv-model.on i{border-color:#1d1624;box-shadow:0 0 0 2px #fff inset} .pv-trial{position:fixed;z-index:61;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top));background:rgba(22,16,26,.9);color:#fff;padding:8px 14px;border-radius:999px;font:500 13px system-ui,sans-serif;white-space:nowrap} .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease} .reveal.is-in{opacity:1;transform:none} /* ===================================================================== Acabamentos (escolhidos no Estúdio de modelos) ===================================================================== */ /* Fundo da página */ .bg--glow{background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--t-surface) 70%,var(--t-bg)) 0%,var(--t-bg) 70%) fixed} .bg--gradient{background:linear-gradient(180deg,var(--t-bg),color-mix(in srgb,var(--t-bg) 65%,var(--t-accent2))) fixed} .bg--stars{background:linear-gradient(180deg,var(--t-bg),color-mix(in srgb,var(--t-bg) 75%,var(--t-accent2)) 60%,var(--t-bg)) fixed} .bg--stars .inv{background: radial-gradient(1px 1px at 12% 8%,rgba(255,255,255,.7) 50%,transparent 51%), radial-gradient(1px 1px at 78% 14%,rgba(255,255,255,.5) 50%,transparent 51%), radial-gradient(1.5px 1.5px at 42% 22%,color-mix(in srgb,var(--t-accent) 85%,transparent) 50%,transparent 51%), radial-gradient(1px 1px at 88% 40%,rgba(255,255,255,.45) 50%,transparent 51%), radial-gradient(1px 1px at 20% 55%,rgba(255,255,255,.4) 50%,transparent 51%), radial-gradient(1.5px 1.5px at 65% 70%,color-mix(in srgb,var(--t-accent) 65%,transparent) 50%,transparent 51%), radial-gradient(1px 1px at 30% 88%,rgba(255,255,255,.5) 50%,transparent 51%), radial-gradient(1px 1px at 55% 96%,rgba(255,255,255,.35) 50%,transparent 51%), linear-gradient(180deg,var(--t-surface),color-mix(in srgb,var(--t-surface) 85%,var(--t-accent2)) 50%,var(--t-surface))} .bg--stars .op-a{background:radial-gradient(90% 60% at 50% 35%,color-mix(in srgb,var(--t-cover) 72%,var(--t-accent2)),var(--t-cover))} .bg--paper .inv::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Borda do convite */ .edge--inset .inv{outline:1px solid color-mix(in srgb,var(--t-accent) 35%,transparent);outline-offset:-10px} .edge--double .inv{outline:1px solid color-mix(in srgb,var(--t-accent) 40%,transparent);outline-offset:-10px} .edge--double .inv::after{content:"";position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--t-accent) 25%,transparent);pointer-events:none;z-index:1;border-radius:inherit} /* Títulos das seções */ .ttl--italic .sec-title{font-style:italic;font-weight:400;font-size:31px} .ttl--spaced .sec-title{font-size:19px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-accent)} .ttl--spaced .hero-frase{font-size:13px;letter-spacing:.26em;text-transform:uppercase} .ttl--spaced .hero-date{font-size:15px;letter-spacing:.18em} .ttl--spaced .op-for{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase} .ttl--bold .sec-title{font-weight:800;font-size:24px;letter-spacing:-.01em} .ttl--ruled .sec-title{font-weight:400;font-size:27px} .ttl--ruled .sec-title::after{content:"";display:block;width:36px;height:3px;margin:14px auto 0;border-top:1px solid var(--t-accent);border-bottom:1px solid var(--t-accent)} /* Contagem regressiva */ .cnt--underline .count div{border:0;border-radius:0;border-bottom:1px solid var(--t-accent)} .cnt--arch .count div{border:0;border-radius:999px 999px var(--t-radius) var(--t-radius);background:color-mix(in srgb,var(--t-accent2) 35%,var(--t-surface));padding-top:18px} .cnt--tint .count div{border:0;background:color-mix(in srgb,var(--t-accent2) 32%,var(--t-surface))} .cnt--columns .count div{border:0;border-left:1px solid var(--t-line);border-radius:0} .cnt--columns .count div:first-child{border-left:0} .cnt--glass .count div{background:color-mix(in srgb,var(--t-ink) 5%,transparent);border-color:color-mix(in srgb,var(--t-accent) 28%,transparent)} .cnt--plain .count div{border:0;padding:0} .cnt--plain .count b{font-size:44px} /* Ornamento */ .div--leaves .orn{width:64px;height:12px;background:none} .div--leaves .orn::before,.div--leaves .orn::after{content:"";position:absolute;top:0;width:11px;height:11px;border-radius:50% 0;background:var(--t-accent)} .div--leaves .orn::before{left:18px;transform:rotate(-20deg)} .div--leaves .orn::after{left:36px;transform:rotate(110deg)} .div--dots .orn{width:6px;height:6px;border-radius:50%;box-shadow:-16px 0 0 color-mix(in srgb,var(--t-accent) 50%,transparent),16px 0 0 color-mix(in srgb,var(--t-accent) 50%,transparent)} .div--dots .orn::after{display:none} .div--thread .orn{display:none} .div--thread .sec + .sec{border-top:0} .div--thread .sec::before{content:"";display:block;width:1px;height:40px;margin:-52px auto 30px;background:linear-gradient(transparent,var(--t-accent))} .div--none .orn{display:none} /* Alinhamento editorial */ .lay--editorial .hero{text-align:left} .lay--editorial .hero-media{margin:0} .lay--editorial .sec{text-align:left;padding:44px 26px} .lay--editorial .sec + .sec{border-top:1px solid var(--t-ink);margin:0 26px;padding:44px 0} .lay--editorial .sec-title{font-size:38px;font-weight:400} .lay--editorial .sec > .ic,.lay--editorial .when-item .ic{margin:0 0 10px} .lay--editorial .count{margin:0;max-width:none} .lay--editorial .count div{align-items:flex-start} .lay--editorial .msg,.lay--editorial .wi-sub,.lay--editorial .gifts,.lay--editorial .rsvp-note,.lay--editorial .rsvp-hello{margin-left:0} .lay--editorial .btn-row,.lay--editorial .gal-dots{justify-content:flex-start} .lay--editorial .rsvp-form{margin:0} .lay--editorial .inv-foot{text-align:left} .lay--editorial .orn{margin-left:0} .lay--editorial.div--thread .sec::before{margin-left:0} /* Nome da aniversariante */ .nf--display .hero-name,.nf--display .op-name,.nf--display .foot-name{font-family:var(--f-display);letter-spacing:-.01em} .nf--display .hero-name{font-size:clamp(56px,17vw,92px);line-height:.98;margin:8px 0 14px} .ns--large .hero-name{font-size:clamp(72px,22vw,114px)} .nf--display.ns--large .hero-name{font-size:clamp(64px,20vw,112px)} .nw--bold .hero-name,.nw--bold .op-name,.nw--bold .foot-name{font-weight:700} /* Mensagem */ .msg--upright .msg{font-style:normal;font-size:27px;line-height:1.35} .lay--editorial.msg--upright .msg{max-width:none} .msg--body .msg{font-family:var(--f-body);font-style:normal;font-weight:300;font-size:19px} /* Brilho */ .glow--soft .hero-name,.glow--soft .op-name{text-shadow:0 0 30px color-mix(in srgb,var(--t-accent) 40%,transparent)} .glow--neon .op-name,.glow--neon .hero-name,.glow--neon .foot-name{color:#fff;text-shadow:0 0 6px var(--t-accent),0 0 22px color-mix(in srgb,var(--t-accent) 80%,transparent),0 0 48px color-mix(in srgb,var(--t-accent) 50%,transparent)} .glow--neon .op-tap,.glow--neon .hero-frase,.glow--neon .sec > .ic,.glow--neon .when-item .ic{color:var(--t-accent2)} .glow--neon .ibtn{box-shadow:0 0 20px color-mix(in srgb,var(--t-accent) 45%,transparent)} .glow--neon .ibtn--ghost{box-shadow:none;color:var(--t-accent2);border-color:var(--t-accent2)} .glow--neon .count div{box-shadow:inset 0 0 18px color-mix(in srgb,var(--t-accent) 18%,transparent);border-color:color-mix(in srgb,var(--t-accent) 55%,transparent)} .glow--neon .count b{color:#fff} .glow--neon .orn,.glow--neon .orn::after{background:var(--t-accent2)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} } @media print{ .opening,.music-btn,.pv-bar,.toast{display:none!important} .inv-body.is-closed{overflow:visible;height:auto} .reveal{opacity:1;transform:none} }