<!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{margin:0;padding:0;background:#f5f3ed;overflow-x:hidden}body{min-height:100%}</style></head><body><coleciona-filial></coleciona-filial><script>class ColecionaFilial extends HTMLElement { static get observedAttributes() { return ["store-name", "address", "whatsapp", "instagram"]; } constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.render(); } attributeChangedCallback() { if (this.isConnected) this.render(); } render() { const storeName = this.getAttribute("store-name") || "Vila Olímpia"; const address = this.getAttribute("address") || "Endereço da loja em Vila Olímpia — São Paulo, SP"; const whatsapp = (this.getAttribute("whatsapp") || "").replace(/\D/g, ""); const instagram = this.getAttribute("instagram") || "https://www.instagram.com/colecionabrinquedos/"; const whatsappHref = whatsapp ? `https://wa.me/${whatsapp}` : "#contato"; this.shadowRoot.innerHTML = ` <style> :host { --black: #080808; --ink: #171717; --yellow: #ffe500; --red: #e62b25; --paper: #f5f3ed; --white: #ffffff; display: block; width: 100%; color: var(--ink); font-family: Arial, Helvetica, sans-serif; background: var(--paper); -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } .site-shell { overflow: hidden; background: var(--paper); } .wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; } .topbar { position: sticky; top: 0; z-index: 50; height: 104px; background: var(--black); color: var(--white); border-bottom: 4px solid var(--yellow); } .topbar-inner { width: min(1240px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 30px; } .logo { display: flex; align-items: center; } .logo img { display: block; width: 172px; height: auto; } .desktop-nav { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 36px); } .desktop-nav a { position: relative; padding: 14px 0; font: 800 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; white-space: nowrap; } .desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 3px; background: var(--yellow); transition: right .2s ease; } .desktop-nav a:hover::after { right: 0; } .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 2px solid var(--red); background: var(--red); color: var(--white); font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; } .cta:hover { transform: translateY(-2px); background: var(--white); color: var(--red); } .menu-toggle { display: none; width: 48px; height: 48px; padding: 11px; border: 0; background: var(--red); cursor: pointer; } .menu-toggle span { display: block; height: 4px; margin: 4px 0; background: var(--white); } .mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-bottom: 4px solid var(--yellow); padding: 18px 24px 24px; } .mobile-nav.open { display: grid; } .mobile-nav a { padding: 15px 0; border-bottom: 1px solid #2e2e2e; color: var(--white); font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .mobile-nav a:last-child { margin-top: 14px; border: 0; background: var(--red); text-align: center; } .hero { min-height: 690px; position: relative; display: grid; align-items: center; background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.83) 52%, rgba(0,0,0,.28) 100%), repeating-linear-gradient(-45deg, #282828 0 2px, #111 2px 18px); color: var(--white); } .hero::after { content: ""; position: absolute; right: -5vw; bottom: -120px; width: 48vw; height: 48vw; max-width: 680px; max-height: 680px; border: 54px solid rgba(255,229,0,.95); border-radius: 50%; opacity: .9; } .hero-content { position: relative; z-index: 1; padding: 96px 0 110px; max-width: 780px; } .eyebrow { display: inline-block; margin-bottom: 24px; padding: 8px 12px; background: var(--yellow); color: var(--black); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 24px; font: 900 clamp(56px, 8vw, 108px)/.83 Arial Black, Arial, sans-serif; letter-spacing: -.065em; text-transform: uppercase; } h1 span { display: block; color: var(--yellow); } .hero p { max-width: 650px; margin-bottom: 34px; font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: #dedede; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-actions .cta:first-child { background: var(--yellow); border-color: var(--yellow); color: var(--black); } .hero-actions .cta:first-child:hover { background: var(--white); } .hero-actions .ghost { background: transparent; border-color: var(--white); } section { scroll-margin-top: 102px; } .section-pad { padding: 110px 0; } .section-label { margin: 0 0 12px; color: var(--red); font-weight: 900; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .section-title { margin: 0 0 24px; font: 900 clamp(38px, 6vw, 76px)/.92 Arial Black, Arial, sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .lead { max-width: 660px; font-size: 18px; line-height: 1.7; color: #4b4b4b; } .about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 8vw, 110px); align-items: center; } .about-copy p:not(.section-label) { font-size: 17px; line-height: 1.75; color: #444; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; } .stat { padding: 22px 16px; background: var(--black); color: var(--white); border-top: 6px solid var(--yellow); } .stat strong { display: block; margin-bottom: 5px; color: var(--yellow); font: 900 25px/1 Arial Black, Arial, sans-serif; } .stat span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .image-placeholder { min-height: 540px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--black); border: 14px solid var(--white); box-shadow: 18px 18px 0 var(--yellow); color: #666; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .image-placeholder::before, .photo::before { content: ""; position: absolute; width: 150%; height: 2px; background: #333; transform: rotate(-34deg); box-shadow: 0 40px 0 #242424, 0 -40px 0 #242424; } .photos { background: var(--black); color: var(--white); } .photos .section-label { color: var(--yellow); } .photos-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 48px; } .photos-head p { max-width: 430px; margin-bottom: 10px; color: #aaa; line-height: 1.6; } .photo-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .photo { position: relative; min-height: 280px; overflow: hidden; display: grid; place-items: center; background: #191919; border: 2px solid #313131; color: #656565; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .photo span { position: relative; z-index: 1; } .photo:nth-child(1), .photo:nth-child(4) { grid-column: span 7; } .photo:nth-child(2), .photo:nth-child(3) { grid-column: span 5; } .photo:nth-child(5), .photo:nth-child(6) { grid-column: span 6; } .photo:nth-child(2), .photo:nth-child(4) { background: #242424; } .photo:nth-child(1) { min-height: 410px; } .review { background: var(--yellow); } .review-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; } .review .section-label { color: var(--black); } .quote-card { position: relative; padding: 48px; background: var(--white); box-shadow: 16px 16px 0 var(--red); } .stars { margin-bottom: 22px; color: var(--red); font-size: 28px; letter-spacing: 5px; } .quote-card blockquote { margin: 0 0 24px; font-size: 23px; line-height: 1.5; font-weight: 700; } .quote-card small { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .location-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: stretch; } .address-card { padding: 42px; background: var(--white); border-left: 10px solid var(--red); } .address-card h3 { margin-bottom: 14px; font: 900 24px/1.1 Arial Black, Arial, sans-serif; text-transform: uppercase; } .address-card p { margin-bottom: 12px; line-height: 1.6; color: #555; } .hours { margin: 28px 0; padding-top: 22px; border-top: 2px solid #eee; } .map-placeholder { min-height: 470px; display: grid; place-items: center; position: relative; overflow: hidden; background: #111; color: #888; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .map-placeholder::before { content: ""; position: absolute; inset: -20%; background: repeating-linear-gradient(32deg, transparent 0 42px, #2d2d2d 43px 47px), repeating-linear-gradient(-54deg, transparent 0 58px, #232323 59px 63px); } .map-placeholder span { position: relative; z-index: 1; padding: 12px 16px; background: var(--yellow); color: var(--black); } .contact { background: var(--red); color: var(--white); } .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; } .contact .section-label { color: var(--yellow); } .contact-copy p { font-size: 18px; line-height: 1.7; color: #ffe4e2; } .whatsapp-button { width: 100%; margin-top: 24px; background: var(--yellow); border-color: var(--yellow); color: var(--black); } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 38px; background: var(--black); } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .field input, .field textarea { width: 100%; border: 2px solid #3b3b3b; background: #151515; color: var(--white); padding: 15px; outline: none; } .field input:focus, .field textarea:focus { border-color: var(--yellow); } .field textarea { min-height: 140px; resize: vertical; } .form-note { grid-column: 1 / -1; color: #888; font-size: 12px; line-height: 1.5; } footer { padding: 34px 0; background: var(--black); color: #aaa; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-inner img { width: 142px; height: auto; } .footer-links { display: flex; gap: 24px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .footer-links a:hover { color: var(--yellow); } @media (max-width: 980px) { .wrap { width: min(100% - 44px, 820px); } .topbar { height: 86px; } .topbar-inner { width: calc(100% - 32px); grid-template-columns: 1fr auto; } .logo img { width: 145px; } .desktop-nav, .topbar-inner > .cta { display: none; } .menu-toggle { display: block; } .hero { min-height: 620px; } .hero::after { right: -22vw; bottom: -80px; width: 78vw; height: 78vw; border-width: 34px; } .about-grid, .review-grid, .location-grid, .contact-grid { grid-template-columns: 1fr; } .image-placeholder { min-height: 430px; } .review-grid, .location-grid, .contact-grid { gap: 42px; } .photos-head { display: block; } section { scroll-margin-top: 86px; } } @media (max-width: 640px) { .wrap { width: calc(100% - 34px); } .section-pad { padding: 78px 0; } .hero { min-height: 590px; } .hero-content { padding: 76px 0 92px; } h1 { font-size: clamp(48px, 17vw, 72px); } .hero p { font-size: 17px; } .hero-actions { display: grid; } .hero-actions .cta { width: 100%; } .stats { grid-template-columns: 1fr; } .image-placeholder { min-height: 330px; box-shadow: 10px 10px 0 var(--yellow); } .photo-grid { grid-template-columns: 1fr; } .photo, .photo:nth-child(n) { grid-column: auto; min-height: 260px; } .quote-card { padding: 30px; box-shadow: 10px 10px 0 var(--red); } .quote-card blockquote { font-size: 19px; } .address-card { padding: 28px; } .map-placeholder { min-height: 340px; } .contact-form { grid-template-columns: 1fr; padding: 26px 20px; } .field, .field.full, .form-note { grid-column: auto; } .footer-inner { align-items: flex-start; flex-direction: column; } .footer-links { flex-wrap: wrap; gap: 14px 20px; } } </style> <div class="site-shell"> <header class="topbar" id="home"> <div class="topbar-inner"> <a class="logo" href="#home" aria-label="Coleciona Brinquedos — início"> <img src="https://static.wixstatic.com/media/9d034d_b56e1ae8a19044a2a7c1a1b5ab219e24~mv2.png/v1/fill/w_334,h_128,al_c,q_90,enc_auto/logo-col.png" alt="Coleciona Brinquedos"> </a> <nav class="desktop-nav" aria-label="Menu da loja"> <a href="#home">Home</a> <a href="#loja">A loja</a> <a href="#fotos">Fotos</a> <a href="#avalie">Avalie</a> <a href="#localizacao">Localização</a> </nav> <a class="cta" href="#contato">Fale conosco</a> <button class="menu-toggle" type="button" aria-label="Abrir menu" aria-expanded="false"><span></span><span></span><span></span></button> </div> <nav class="mobile-nav" aria-label="Menu da loja no celular"> <a href="#home">Home</a> <a href="#loja">A loja</a> <a href="#fotos">Fotos</a> <a href="#avalie">Avalie</a> <a href="#localizacao">Localização</a> <a href="#contato">Contato</a> </nav> </header> <main> <section class="hero" aria-labelledby="hero-title"> <div class="wrap hero-content"> <span class="eyebrow">Coleciona Brinquedos</span> <h1 id="hero-title">Loja <span>${storeName}</span></h1> <p>Um espaço feito para descobrir brinquedos, colecionáveis e experiências que conectam gerações.</p> <div class="hero-actions"> <a class="cta" href="#loja">Conheça a loja</a> <a class="cta ghost" href="#localizacao">Como chegar</a> </div> </div> </section> <section class="section-pad" id="loja"> <div class="wrap about-grid"> <div class="about-copy"> <p class="section-label">A loja</p> <h2 class="section-title">Diversão para todas as idades.</h2> <p>A Coleciona ${storeName} reúne brinquedos, presentes criativos e itens colecionáveis em um ambiente pensado para surpreender. Este texto é provisório e poderá ser substituído diretamente pelos dados definitivos da filial.</p> <p>Nossa equipe está pronta para ajudar você a encontrar aquele presente especial ou a próxima peça da sua coleção.</p> <div class="stats"> <div class="stat"><strong>01</strong><span>Loja completa</span></div> <div class="stat"><strong>+100</strong><span>Marcas</span></div> <div class="stat"><strong>100%</strong><span>Diversão</span></div> </div> </div> <div class="image-placeholder" role="img" aria-label="Espaço reservado para foto principal da loja">Foto da loja</div> </div> </section> <section class="photos section-pad" id="fotos"> <div class="wrap"> <div class="photos-head"> <div> <p class="section-label">Fotos</p> <h2 class="section-title">Por dentro da Coleciona.</h2> </div> <p>Espaços preparados para receber as fotografias definitivas da filial sem modificar a composição da página.</p> </div> <div class="photo-grid"> <div class="photo"><span>Foto 01</span></div> <div class="photo"><span>Foto 02</span></div> <div class="photo"><span>Foto 03</span></div> <div class="photo"><span>Foto 04</span></div> <div class="photo"><span>Foto 05</span></div> <div class="photo"><span>Foto 06</span></div> </div> </div> </section> <section class="review section-pad" id="avalie"> <div class="wrap review-grid"> <div> <p class="section-label">Avalie</p> <h2 class="section-title">Sua opinião faz a diferença.</h2> <p class="lead">Conte como foi sua experiência na Coleciona ${storeName}. Sua avaliação ajuda outras famílias a encontrarem a loja e nos ajuda a melhorar sempre.</p> <a class="cta" href="#contato">Avaliar a loja</a> </div> <div class="quote-card"> <div class="stars" aria-label="Cinco estrelas">★★★★★</div> <blockquote>“Um lugar incrível para encontrar brinquedos especiais e colecionáveis para todas as idades.”</blockquote> <small>Depoimento de marcação</small> </div> </div> </section> <section class="section-pad" id="localizacao"> <div class="wrap location-grid"> <div> <p class="section-label">Localização</p> <h2 class="section-title">Venha visitar.</h2> <div class="address-card"> <h3>Coleciona ${storeName}</h3> <p>${address}</p> <div class="hours"> <p><strong>Segunda a sábado</strong><br>Horário a confirmar</p> <p><strong>Domingos e feriados</strong><br>Horário a confirmar</p> </div> <a class="cta" href="#contato">Como chegar</a> </div> </div> <div class="map-placeholder" role="img" aria-label="Espaço reservado para mapa da loja"><span>Mapa da localização</span></div> </div> </section> <section class="contact section-pad" id="contato"> <div class="wrap contact-grid"> <div class="contact-copy"> <p class="section-label">Contato</p> <h2 class="section-title">Fale com a nossa equipe.</h2> <p>Envie sua dúvida, consulte a disponibilidade de um produto ou peça ajuda para escolher o presente ideal.</p> <a class="cta whatsapp-button" href="${whatsappHref}" target="${whatsapp ? "_blank" : "_self"}" rel="noopener">Chamar no WhatsApp</a> ${whatsapp ? "" : '<p style="font-size:12px;margin-top:10px;color:#ffd4d1">O número definitivo do WhatsApp será conectado aqui.</p>'} </div> <form class="contact-form"> <div class="field"><label for="name">Nome</label><input id="name" name="name" type="text" placeholder="Seu nome"></div> <div class="field"><label for="phone">Telefone</label><input id="phone" name="phone" type="tel" placeholder="(11) 00000-0000"></div> <div class="field full"><label for="email">E-mail</label><input id="email" name="email" type="email" placeholder="seuemail@exemplo.com"></div> <div class="field full"><label for="message">Mensagem</label><textarea id="message" name="message" placeholder="Como podemos ajudar?"></textarea></div> <button class="cta field full" type="submit">Enviar pelo WhatsApp</button> <p class="form-note">O formulário está visualmente pronto. O envio será conectado ao WhatsApp assim que o número definitivo for informado.</p> </form> </div> </section> </main> <footer> <div class="wrap footer-inner"> <img src="https://static.wixstatic.com/media/9d034d_b56e1ae8a19044a2a7c1a1b5ab219e24~mv2.png/v1/fill/w_284,h_109,al_c,q_90,enc_auto/logo-col.png" alt="Coleciona Brinquedos"> <div class="footer-links"><a href="#home">Início</a><a href="${instagram}" target="_blank" rel="noopener">Instagram</a><a href="#contato">Contato</a></div> </div> </footer> </div> `; const toggle = this.shadowRoot.querySelector(".menu-toggle"); const mobileNav = this.shadowRoot.querySelector(".mobile-nav"); toggle.addEventListener("click", () => { const open = mobileNav.classList.toggle("open"); toggle.setAttribute("aria-expanded", String(open)); toggle.setAttribute("aria-label", open ? "Fechar menu" : "Abrir menu"); }); this.shadowRoot.querySelectorAll('a[href^="#"]').forEach((link) => { link.addEventListener("click", (event) => { const selector = link.getAttribute("href"); const target = selector ? this.shadowRoot.querySelector(selector) : null; if (!target) return; event.preventDefault(); window.parent.postMessage({ type: "coleciona-scroll", top: Math.max(0, Math.round(target.getBoundingClientRect().top)) }, "*"); mobileNav.classList.remove("open"); toggle.setAttribute("aria-expanded", "false"); toggle.setAttribute("aria-label", "Abrir menu"); }); }); const form = this.shadowRoot.querySelector(".contact-form"); form.addEventListener("submit", (event) => { event.preventDefault(); if (!whatsapp) return; const data = new FormData(form); const message = [ `Olá, Coleciona ${storeName}!`, `Nome: ${data.get("name") || ""}`, `Telefone: ${data.get("phone") || ""}`, `E-mail: ${data.get("email") || ""}`, `Mensagem: ${data.get("message") || ""}` ].join("\\n"); window.open(`https://wa.me/${whatsapp}?text=${encodeURIComponent(message)}`, "_blank", "noopener"); }); }}if (!customElements.get("coleciona-filial")) { customElements.define("coleciona-filial", ColecionaFilial);}</script></body></html>
class ColecionaFilial extends HTMLElement { static get observedAttributes() { return ["store-name", "address", "whatsapp", "instagram"]; } constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.render(); } attributeChangedCallback() { if (this.isConnected) this.render(); } render() { const storeName = this.getAttribute("store-name") || "Vila Olímpia"; const address = this.getAttribute("address") || "Endereço da loja em Vila Olímpia — São Paulo, SP"; const whatsapp = (this.getAttribute("whatsapp") || "").replace(/\D/g, ""); const instagram = this.getAttribute("instagram") || "https://www.instagram.com/colecionabrinquedos/"; const whatsappHref = whatsapp ? `https://wa.me/${whatsapp}` : "#contato"; this.shadowRoot.innerHTML = ` <style> :host { --black: #080808; --ink: #171717; --yellow: #ffe500; --red: #e62b25; --paper: #f5f3ed; --white: #ffffff; display: block; width: 100%; color: var(--ink); font-family: Arial, Helvetica, sans-serif; background: var(--paper); -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } .site-shell { overflow: hidden; background: var(--paper); } .wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; } .topbar { position: sticky; top: 0; z-index: 50; height: 104px; background: var(--black); color: var(--white); border-bottom: 4px solid var(--yellow); } .topbar-inner { width: min(1240px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 30px; } .logo { display: flex; align-items: center; } .logo img { display: block; width: 172px; height: auto; } .desktop-nav { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 36px); } .desktop-nav a { position: relative; padding: 14px 0; font: 800 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; white-space: nowrap; } .desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 3px; background: var(--yellow); transition: right .2s ease; } .desktop-nav a:hover::after { right: 0; } .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 2px solid var(--red); background: var(--red); color: var(--white); font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; } .cta:hover { transform: translateY(-2px); background: var(--white); color: var(--red); } .menu-toggle { display: none; width: 48px; height: 48px; padding: 11px; border: 0; background: var(--red); cursor: pointer; } .menu-toggle span { display: block; height: 4px; margin: 4px 0; background: var(--white); } .mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-bottom: 4px solid var(--yellow); padding: 18px 24px 24px; } .mobile-nav.open { display: grid; } .mobile-nav a { padding: 15px 0; border-bottom: 1px solid #2e2e2e; color: var(--white); font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .mobile-nav a:last-child { margin-top: 14px; border: 0; background: var(--red); text-align: center; } .hero { min-height: 690px; position: relative; display: grid; align-items: center; background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.83) 52%, rgba(0,0,0,.28) 100%), repeating-linear-gradient(-45deg, #282828 0 2px, #111 2px 18px); color: var(--white); } .hero::after { content: ""; position: absolute; right: -5vw; bottom: -120px; width: 48vw; height: 48vw; max-width: 680px; max-height: 680px; border: 54px solid rgba(255,229,0,.95); border-radius: 50%; opacity: .9; } .hero-content { position: relative; z-index: 1; padding: 96px 0 110px; max-width: 780px; } .eyebrow { display: inline-block; margin-bottom: 24px; padding: 8px 12px; background: var(--yellow); color: var(--black); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 24px; font: 900 clamp(56px, 8vw, 108px)/.83 Arial Black, Arial, sans-serif; letter-spacing: -.065em; text-transform: uppercase; } h1 span { display: block; color: var(--yellow); } .hero p { max-width: 650px; margin-bottom: 34px; font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: #dedede; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-actions .cta:first-child { background: var(--yellow); border-color: var(--yellow); color: var(--black); } .hero-actions .cta:first-child:hover { background: var(--white); } .hero-actions .ghost { background: transparent; border-color: var(--white); } section { scroll-margin-top: 102px; } .section-pad { padding: 110px 0; } .section-label { margin: 0 0 12px; color: var(--red); font-weight: 900; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .section-title { margin: 0 0 24px; font: 900 clamp(38px, 6vw, 76px)/.92 Arial Black, Arial, sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .lead { max-width: 660px; font-size: 18px; line-height: 1.7; color: #4b4b4b; } .about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 8vw, 110px); align-items: center; } .about-copy p:not(.section-label) { font-size: 17px; line-height: 1.75; color: #444; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; } .stat { padding: 22px 16px; background: var(--black); color: var(--white); border-top: 6px solid var(--yellow); } .stat strong { display: block; margin-bottom: 5px; color: var(--yellow); font: 900 25px/1 Arial Black, Arial, sans-serif; } .stat span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .image-placeholder { min-height: 540px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--black); border: 14px solid var(--white); box-shadow: 18px 18px 0 var(--yellow); color: #666; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .image-placeholder::before, .photo::before { content: ""; position: absolute; width: 150%; height: 2px; background: #333; transform: rotate(-34deg); box-shadow: 0 40px 0 #242424, 0 -40px 0 #242424; } .photos { background: var(--black); color: var(--white); } .photos .section-label { color: var(--yellow); } .photos-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 48px; } .photos-head p { max-width: 430px; margin-bottom: 10px; color: #aaa; line-height: 1.6; } .photo-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .photo { position: relative; min-height: 280px; overflow: hidden; display: grid; place-items: center; background: #191919; border: 2px solid #313131; color: #656565; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .photo span { position: relative; z-index: 1; } .photo:nth-child(1), .photo:nth-child(4) { grid-column: span 7; } .photo:nth-child(2), .photo:nth-child(3) { grid-column: span 5; } .photo:nth-child(5), .photo:nth-child(6) { grid-column: span 6; } .photo:nth-child(2), .photo:nth-child(4) { background: #242424; } .photo:nth-child(1) { min-height: 410px; } .review { background: var(--yellow); } .review-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; } .review .section-label { color: var(--black); } .quote-card { position: relative; padding: 48px; background: var(--white); box-shadow: 16px 16px 0 var(--red); } .stars { margin-bottom: 22px; color: var(--red); font-size: 28px; letter-spacing: 5px; } .quote-card blockquote { margin: 0 0 24px; font-size: 23px; line-height: 1.5; font-weight: 700; } .quote-card small { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .location-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: stretch; } .address-card { padding: 42px; background: var(--white); border-left: 10px solid var(--red); } .address-card h3 { margin-bottom: 14px; font: 900 24px/1.1 Arial Black, Arial, sans-serif; text-transform: uppercase; } .address-card p { margin-bottom: 12px; line-height: 1.6; color: #555; } .hours { margin: 28px 0; padding-top: 22px; border-top: 2px solid #eee; } .map-placeholder { min-height: 470px; display: grid; place-items: center; position: relative; overflow: hidden; background: #111; color: #888; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .map-placeholder::before { content: ""; position: absolute; inset: -20%; background: repeating-linear-gradient(32deg, transparent 0 42px, #2d2d2d 43px 47px), repeating-linear-gradient(-54deg, transparent 0 58px, #232323 59px 63px); } .map-placeholder span { position: relative; z-index: 1; padding: 12px 16px; background: var(--yellow); color: var(--black); } .contact { background: var(--red); color: var(--white); } .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; } .contact .section-label { color: var(--yellow); } .contact-copy p { font-size: 18px; line-height: 1.7; color: #ffe4e2; } .whatsapp-button { width: 100%; margin-top: 24px; background: var(--yellow); border-color: var(--yellow); color: var(--black); } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 38px; background: var(--black); } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .field input, .field textarea { width: 100%; border: 2px solid #3b3b3b; background: #151515; color: var(--white); padding: 15px; outline: none; } .field input:focus, .field textarea:focus { border-color: var(--yellow); } .field textarea { min-height: 140px; resize: vertical; } .form-note { grid-column: 1 / -1; color: #888; font-size: 12px; line-height: 1.5; } footer { padding: 34px 0; background: var(--black); color: #aaa; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-inner img { width: 142px; height: auto; } .footer-links { display: flex; gap: 24px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .footer-links a:hover { color: var(--yellow); } @media (max-width: 980px) { .wrap { width: min(100% - 44px, 820px); } .topbar { height: 86px; } .topbar-inner { width: calc(100% - 32px); grid-template-columns: 1fr auto; } .logo img { width: 145px; } .desktop-nav, .topbar-inner > .cta { display: none; } .menu-toggle { display: block; } .hero { min-height: 620px; } .hero::after { right: -22vw; bottom: -80px; width: 78vw; height: 78vw; border-width: 34px; } .about-grid, .review-grid, .location-grid, .contact-grid { grid-template-columns: 1fr; } .image-placeholder { min-height: 430px; } .review-grid, .location-grid, .contact-grid { gap: 42px; } .photos-head { display: block; } section { scroll-margin-top: 86px; } } @media (max-width: 640px) { .wrap { width: calc(100% - 34px); } .section-pad { padding: 78px 0; } .hero { min-height: 590px; } .hero-content { padding: 76px 0 92px; } h1 { font-size: clamp(48px, 17vw, 72px); } .hero p { font-size: 17px; } .hero-actions { display: grid; } .hero-actions .cta { width: 100%; } .stats { grid-template-columns: 1fr; } .image-placeholder { min-height: 330px; box-shadow: 10px 10px 0 var(--yellow); } .photo-grid { grid-template-columns: 1fr; } .photo, .photo:nth-child(n) { grid-column: auto; min-height: 260px; } .quote-card { padding: 30px; box-shadow: 10px 10px 0 var(--red); } .quote-card blockquote { font-size: 19px; } .address-card { padding: 28px; } .map-placeholder { min-height: 340px; } .contact-form { grid-template-columns: 1fr; padding: 26px 20px; } .field, .field.full, .form-note { grid-column: auto; } .footer-inner { align-items: flex-start; flex-direction: column; } .footer-links { flex-wrap: wrap; gap: 14px 20px; } } </style> <div class="site-shell"> <header class="topbar" id="home"> <div class="topbar-inner"> <a class="logo" href="#home" aria-label="Coleciona Brinquedos — início"> <img src="https://static.wixstatic.com/media/9d034d_b56e1ae8a19044a2a7c1a1b5ab219e24~mv2.png/v1/fill/w_334,h_128,al_c,q_90,enc_auto/logo-col.png" alt="Coleciona Brinquedos"> </a> <nav class="desktop-nav" aria-label="Menu da loja"> <a href="#home">Home</a> <a href="#loja">A loja</a> <a href="#fotos">Fotos</a> <a href="#avalie">Avalie</a> <a href="#localizacao">Localização</a> </nav> <a class="cta" href="#contato">Fale conosco</a> <button class="menu-toggle" type="button" aria-label="Abrir menu" aria-expanded="false"><span></span><span></span><span></span></button> </div> <nav class="mobile-nav" aria-label="Menu da loja no celular"> <a href="#home">Home</a> <a href="#loja">A loja</a> <a href="#fotos">Fotos</a> <a href="#avalie">Avalie</a> <a href="#localizacao">Localização</a> <a href="#contato">Contato</a> </nav> </header> <main> <section class="hero" aria-labelledby="hero-title"> <div class="wrap hero-content"> <span class="eyebrow">Coleciona Brinquedos</span> <h1 id="hero-title">Loja <span>${storeName}</span></h1> <p>Um espaço feito para descobrir brinquedos, colecionáveis e experiências que conectam gerações.</p> <div class="hero-actions"> <a class="cta" href="#loja">Conheça a loja</a> <a class="cta ghost" href="#localizacao">Como chegar</a> </div> </div> </section> <section class="section-pad" id="loja"> <div class="wrap about-grid"> <div class="about-copy"> <p class="section-label">A loja</p> <h2 class="section-title">Diversão para todas as idades.</h2> <p>A Coleciona ${storeName} reúne brinquedos, presentes criativos e itens colecionáveis em um ambiente pensado para surpreender. Este texto é provisório e poderá ser substituído diretamente pelos dados definitivos da filial.</p> <p>Nossa equipe está pronta para ajudar você a encontrar aquele presente especial ou a próxima peça da sua coleção.</p> <div class="stats"> <div class="stat"><strong>01</strong><span>Loja completa</span></div> <div class="stat"><strong>+100</strong><span>Marcas</span></div> <div class="stat"><strong>100%</strong><span>Diversão</span></div> </div> </div> <div class="image-placeholder" role="img" aria-label="Espaço reservado para foto principal da loja">Foto da loja</div> </div> </section> <section class="photos section-pad" id="fotos"> <div class="wrap"> <div class="photos-head"> <div> <p class="section-label">Fotos</p> <h2 class="section-title">Por dentro da Coleciona.</h2> </div> <p>Espaços preparados para receber as fotografias definitivas da filial sem modificar a composição da página.</p> </div> <div class="photo-grid"> <div class="photo"><span>Foto 01</span></div> <div class="photo"><span>Foto 02</span></div> <div class="photo"><span>Foto 03</span></div> <div class="photo"><span>Foto 04</span></div> <div class="photo"><span>Foto 05</span></div> <div class="photo"><span>Foto 06</span></div> </div> </div> </section> <section class="review section-pad" id="avalie"> <div class="wrap review-grid"> <div> <p class="section-label">Avalie</p> <h2 class="section-title">Sua opinião faz a diferença.</h2> <p class="lead">Conte como foi sua experiência na Coleciona ${storeName}. Sua avaliação ajuda outras famílias a encontrarem a loja e nos ajuda a melhorar sempre.</p> <a class="cta" href="#contato">Avaliar a loja</a> </div> <div class="quote-card"> <div class="stars" aria-label="Cinco estrelas">★★★★★</div> <blockquote>“Um lugar incrível para encontrar brinquedos especiais e colecionáveis para todas as idades.”</blockquote> <small>Depoimento de marcação</small> </div> </div> </section> <section class="section-pad" id="localizacao"> <div class="wrap location-grid"> <div> <p class="section-label">Localização</p> <h2 class="section-title">Venha visitar.</h2> <div class="address-card"> <h3>Coleciona ${storeName}</h3> <p>${address}</p> <div class="hours"> <p><strong>Segunda a sábado</strong><br>Horário a confirmar</p> <p><strong>Domingos e feriados</strong><br>Horário a confirmar</p> </div> <a class="cta" href="#contato">Como chegar</a> </div> </div> <div class="map-placeholder" role="img" aria-label="Espaço reservado para mapa da loja"><span>Mapa da localização</span></div> </div> </section> <section class="contact section-pad" id="contato"> <div class="wrap contact-grid"> <div class="contact-copy"> <p class="section-label">Contato</p> <h2 class="section-title">Fale com a nossa equipe.</h2> <p>Envie sua dúvida, consulte a disponibilidade de um produto ou peça ajuda para escolher o presente ideal.</p> <a class="cta whatsapp-button" href="${whatsappHref}" target="${whatsapp ? "_blank" : "_self"}" rel="noopener">Chamar no WhatsApp</a> ${whatsapp ? "" : '<p style="font-size:12px;margin-top:10px;color:#ffd4d1">O número definitivo do WhatsApp será conectado aqui.</p>'} </div> <form class="contact-form"> <div class="field"><label for="name">Nome</label><input id="name" name="name" type="text" placeholder="Seu nome"></div> <div class="field"><label for="phone">Telefone</label><input id="phone" name="phone" type="tel" placeholder="(11) 00000-0000"></div> <div class="field full"><label for="email">E-mail</label><input id="email" name="email" type="email" placeholder="seuemail@exemplo.com"></div> <div class="field full"><label for="message">Mensagem</label><textarea id="message" name="message" placeholder="Como podemos ajudar?"></textarea></div> <button class="cta field full" type="submit">Enviar pelo WhatsApp</button> <p class="form-note">O formulário está visualmente pronto. O envio será conectado ao WhatsApp assim que o número definitivo for informado.</p> </form> </div> </section> </main> <footer> <div class="wrap footer-inner"> <img src="https://static.wixstatic.com/media/9d034d_b56e1ae8a19044a2a7c1a1b5ab219e24~mv2.png/v1/fill/w_284,h_109,al_c,q_90,enc_auto/logo-col.png" alt="Coleciona Brinquedos"> <div class="footer-links"><a href="#home">Início</a><a href="${instagram}" target="_blank" rel="noopener">Instagram</a><a href="#contato">Contato</a></div> </div> </footer> </div> `; const toggle = this.shadowRoot.querySelector(".menu-toggle"); const mobileNav = this.shadowRoot.querySelector(".mobile-nav"); toggle.addEventListener("click", () => { const open = mobileNav.classList.toggle("open"); toggle.setAttribute("aria-expanded", String(open)); toggle.setAttribute("aria-label", open ? "Fechar menu" : "Abrir menu"); }); mobileNav.querySelectorAll("a").forEach((link) => { link.addEventListener("click", () => { mobileNav.classList.remove("open"); toggle.setAttribute("aria-expanded", "false"); toggle.setAttribute("aria-label", "Abrir menu"); }); }); const form = this.shadowRoot.querySelector(".contact-form"); form.addEventListener("submit", (event) => { event.preventDefault(); if (!whatsapp) return; const data = new FormData(form); const message = [ `Olá, Coleciona ${storeName}!`, `Nome: ${data.get("name") || ""}`, `Telefone: ${data.get("phone") || ""}`, `E-mail: ${data.get("email") || ""}`, `Mensagem: ${data.get("message") || ""}` ].join("\\n"); window.open(`https://wa.me/${whatsapp}?text=${encodeURIComponent(message)}`, "_blank", "noopener"); }); }}if (!customElements.get("coleciona-filial")) { customElements.define("coleciona-filial", ColecionaFilial);}