1import{r as o,j as e}from"./vendor-react-DQtXLfKQ.js";import{j as t,b as s,F as r}from"./index-BD3GEe-p.js";import"./hideasksuite-Tw-VU9B5.js";import{a as n,Q as m}from"./QuizPageShell-BJ8GqV2g.js";import{u as l}from"./vendor-router-cjnAEjov.js";import{g as i}from"./vendor-styled-Dp7B2jhD.js";import"./vendor-N22ZuPWD.js";import"./vendor-media-BF6OJBvC.js";import"./vendor-query-Dc1LVpoz.js";import"./vendor-motion-Hgm5eXtb.js";import"./vendor-http-BCn5QfZZ.js";const c=i(m)` 2 .checkout-navbar { 3 background-color: var(--lemonade); 4 } 5`,g=i.div.attrs({className:"ignore-padding"})` 6 footer { 7 position: relative; 8 z-index: 3; 9 } 10`,p=i.div` 11 position: relative; 12 /* background-color: red; */ 13 14 width: 100%; 15 overflow-x: clip; 16 top: 0 !important; 17 flex: 1; 18 box-sizing: border-box; 19 margin-bottom: 0; 20 21 display: flex; 22 justify-content: center; 23 align-items: center; 24 > img { 25 } 26 27 img.bee { 28 width: 10rem; 29 position: absolute; 30 top: 5rem; 31 right: 10rem; 32 z-index: 2; 33 } 34 35 .title-overlay { 36 /* position: absolute; */ 37 width: 100%; 38 height: 100%; 39 /* background-color: #eeee; */ 40 41 display: flex; 42 flex-direction: column; 43 align-items: center; 44 justify-content: flex-start; 45 padding: 1.5rem; 46 gap: 2rem; 47 /* transform: translateY(-5%); */ 48 z-index: 2; 49 transform: translateY(12rem); 50 /* background-color: red; */ 51 52 button.start-button { 53 align-items: center; 54 justify-content: center; 55 display: flex; 56 line-height: normal; 57 font-size: 3rem; 58 padding: 0.25rem 1rem; 59 border-radius: 9999px; 60 61 & > .content { 62 display: flex; 63 justify-content: center; 64 align-items: center; 65 gap: 1rem; 66 67 svg { 68 width: 4rem; 69 } 70 } 71 } 72 } 73 74 img.title { 75 width: 100%; 76 max-width: 35rem; 77 /* transform: translateY(-15rem); */ 78 } 79 80 img.background { 81 position: absolute; 82 width: 100%; 83 height: 100%; 84 inset: 0; 85 object-fit: cover; 86 } 87 88 .mobile-character-composition { 89 display: none; 90 } 91 .desktop-background { 92 position: absolute; 93 width: 100%; 94 height: 100%; 95 inset: 0; 96 display: none; 97 justify-content: center; 98 align-items: center; 99 100 img { 101 position: absolute; 102 bottom: 0; 103 filter: none !important; 104 } 105 106 img.papa-smurf { 107 left: 6rem; 108 height: 37rem; 109 } 110 111 img.magnolia { 112 right: 20%; 113 height: 37rem; 114 } 115 116 img.genio { 117 right: 0; 118 height: 37rem; 119 bottom: -2.5rem; 120 } 121 122 img.smurfette { 123 left: 25%; 124 height: 37rem; 125 } 126 127 > img.center { 128 position: absolute; 129 height: 50rem; 130 bottom: -20rem; 131 z-index: 1; 132 } 133 134 > img.group-left { 135 position: absolute; 136 left: -15rem; 137 bottom: -15rem; 138 height: 64rem; 139 } 140 141 > img.group-right { 142 position: absolute; 143 right: -15rem; 144 bottom: -15rem; 145 height: 57rem; 146 } 147 } 148 @media (min-width: 900px) { 149 .mobile-background { 150 display: none; 151 } 152 153 .desktop-background { 154 display: flex; 155 } 156 157 .title-overlay { 158 padding-top: 1rem; 159 transform: translateY(0); 160 } 161 162 img.title { 163 margin-top: -18rem; 164 } 165 166 .center { 167 translate: 4rem 0; 168 } 169 } 170 171 img.title { 172 pointer-events: all; 173 transition: ease-in-out 0.2s; 174 } 175 176 img.title:hover { 177 scale: 1.1; 178 } 179 180 @media (max-width: 900px) { 181 padding-bottom: 18rem; 182 183 img.bee { 184 top: 5rem; 185 right: 11rem; 186 width: 7rem; 187 z-index: 4; 188 } 189 190 .mobile-character-composition { 191 position: absolute; 192 inset: 0; 193 display: block; 194 overflow: hidden; 195 pointer-events: none; 196 z-index: 1; 197 /* Escala toda a composição proporcionalmente à largura da tela. 198 Calibrado para que em ~510px de largura 1em = 10px (igual ao 199 root), mantendo as proporções em qualquer celular. Teto de 12px 200 evita que os personagens fiquem gigantes em tablets. */ 201 font-size: min(calc(100vw / 51), 12px); 202 203 img { 204 position: absolute; 205 bottom: -2em; 206 z-index: 2; 207 } 208 209 img.selvagem { 210 left: -19em; 211 bottom: 3em; 212 width: 46em; 213 z-index: 5; 214 } 215 216 img.papa-smurf { 217 left: -16em; 218 bottom: -19em; 219 width: 44em; 220 z-index: 4; 221 } 222 223 img.smurfette { 224 left: 50%; 225 transform: translateX(calc(-50% - 1em)); 226 bottom: -20em; 227 width: 27em; 228 z-index: 3; 229 } 230 231 img.magnolia { 232 right: -22em; 233 bottom: -26em; 234 width: 55em; 235 z-index: 2; 236 } 237 238 img.genio { 239 right: -21em; 240 bottom: 2em; 241 width: 41em; 242 z-index: 4; 243 } 244 245 img.bush { 246 left: 50%; 247 bottom: -9em; 248 width: 53em; 249 transform: translateX(-50%); 250 z-index: 1; 251 } 252 } 253 254 .title-overlay { 255 position: absolute; 256 inset: 0 0 auto 0; 257 height: auto; 258 justify-content: flex-start; 259 padding-top: 16rem; 260 transform: none; 261 262 button.start-button { 263 margin-top: 3rem; 264 } 265 } 266 267 } 268 269 /* Telas altas (celulares mais compridos): aproveita o espaço vertical 270 extra â desce o botão para perto do polegar e amplia a composição para 271 os personagens preencherem mais a cena. */ 272 @media (max-width: 900px) and (min-height: 820px) { 273 .mobile-character-composition { 274 font-size: min(calc(100vw / 45), 13px); 275 } 276 277 .title-overlay button.start-button { 278 margin-top: 16vh; 279 } 280 } 281`,N=()=>{const a=l();return o.useEffect(()=>{document.body.classList.contains("hide-asksuite")||document.body.classList.add("hide-asksuite")},[]),e.jsxs(g,{children:[e.jsxs(c,{children:[e.jsx(n,{}),e.jsxs(p,{className:"ignore-padding",children:[e.jsx(t,{className:"background",src:"/quiz/initial-background.png"}),e.jsxs("div",{className:"mobile-character-composition",children:[e.jsx(t,{className:"bush",src:"/quiz/arbusto-grande.png"}),e.jsx(t,{className:"selvagem",src:"/quiz/initial/selvagem-drive.png"}),e.jsx(t,{className:"papa-smurf",src:"/quiz/initial/papai-drive.png"}),e.jsx(t,{className:"smurfette",src:"/quiz/initial/smurfette-drive.png"}),e.jsx(t,{className:"magnolia",src:"/quiz/initial/magnolia-drive.png"}),e.jsx(t,{className:"genio",src:"/quiz/initial/genio-drive.png"})]}),e.jsx(t,{className:"bee",src:"/quiz/bee.png"}),e.jsxs("div",{className:"desktop-background",children:[e.jsx(t,{className:"papa-smurf",src:"/smurfs-generic/papai.png"}),e.jsx(t,{className:"magnolia",src:"/smurfs-generic/magnolia-1999-2.png"}),e.jsx(t,{className:"genio",src:"/smurfs-generic/genio.png"}),e.jsx(t,{className:"smurfette",src:"/smurfs-generic/smurfette-2.png"})]}),e.jsxs("div",{className:"title-overlay",children:[e.jsx(t,{className:"title",src:"/quiz/initial/title.png"}),e.jsx(s,{$font:"poppins",className:"start-button",$variant:"cyan-filled",children:e.jsxs("div",{className:"content",children:[e.jsxs("svg",{width:"74",height:"35",viewBox:"0 0 74 35",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M26.5478 17.273L0.849716 34.4147L0.281916 1.01469L26.5478 17.273Z",fill:"white"}),e.jsx("path",{opacity:"0.676",d:"M52.4822 17.334L33.4725 29.8537L33.0579 5.46768L52.4822 17.334Z",fill:"white"}),e.jsx("path",{opacity:"0.364",d:"M73.7698 17.373L59.2126 26.434L58.913 8.81203L73.7698 17.373Z",fill:"white"})]}
281),"INICIAR",e.jsxs("svg",{width:"74",height:"35",viewBox:"0 0 74 35",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M47.6499 17.274L73.9158 1.01569L73.348 34.4157L47.6499 17.274Z",fill:"white"}),e.jsx("path",{opacity:"0.676",d:"M21.7192 17.3309L41.1435 5.46462L40.729 29.8506L21.7192 17.3309Z",fill:"white"}),e.jsx("path",{opacity:"0.364",d:"M0.435798 17.37L15.2926 8.80905L14.993 26.431L0.435798 17.37Z",fill:"white"})]})]}),onClick:()=>{a("/quiz/questions")}})]})]})]}),e.jsx(r,{})]})};export{N as InitialPage}; 282//# sourceMappingURL=InitialPage-Czby5t3L.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.