| 1 |
<!DOCTYPE html> |
| 2 |
class="tok-tag"><htmlclass="tok-attr"> lang="es"class="tok-tag">> |
| 3 |
class="tok-tag"><headclass="tok-attr">class="tok-tag">> |
| 4 |
class="tok-tag"><metaclass="tok-attr"> charset="UTF-8"class="tok-tag">> |
| 5 |
class="tok-tag"><metaclass="tok-attr"> name="viewport" content="width=device-width, initial-scale=1.0"class="tok-tag">> |
| 6 |
class="tok-tag"><titleclass="tok-attr">class="tok-tag">>María & Shania — See You Soonclass="tok-tag"></titleclass="tok-attr">class="tok-tag">> |
| 7 |
class="tok-tag"><linkclass="tok-attr"> href="class="tok-prop">https:class="tok-val">;0,400;0,600;1,300;1,400&family=DM+class="tok-prop">Sans:class="tok-val">ital,wght@0,300;0,400;0,600;1,300&display=swap" rel="stylesheet"class="tok-tag">> |
| 8 |
class="tok-tag"><styleclass="tok-attr">class="tok-tag">> |
| 9 |
:root { |
| 10 |
class="tok-prop">--bg: class="tok-val">#fdf6ee; |
| 11 |
class="tok-prop">--warm: class="tok-val">#f9ede0; |
| 12 |
class="tok-prop">--amber: class="tok-val">#e8935a; |
| 13 |
class="tok-prop">--amber-light: class="tok-val">#fdecd8; |
| 14 |
class="tok-prop">--amber-mid: class="tok-val">#f5c49a; |
| 15 |
class="tok-prop">--rose: class="tok-val">#d4748a; |
| 16 |
class="tok-prop">--rose-light: class="tok-val">#fceef2; |
| 17 |
class="tok-prop">--rose-mid: class="tok-val">#f0b8c8; |
| 18 |
class="tok-prop">--cream: class="tok-val">#fffaf4; |
| 19 |
class="tok-prop">--text: class="tok-val">#2d1f0e; |
| 20 |
class="tok-prop">--text-mid: class="tok-val">#7a5c3a; |
| 21 |
class="tok-prop">--text-light: class="tok-val">#b89870; |
| 22 |
class="tok-prop">--border: class="tok-val">#eed8bc; |
| 23 |
class="tok-prop">--shadow: class="tok-val">rgba(180,120,60,0.1); |
| 24 |
class="tok-prop">--green: class="tok-val">#5a8a5a; |
| 25 |
class="tok-prop">--green-light: class="tok-val">#eef5ee; |
| 26 |
class="tok-prop">--radius: class="tok-val">20px; |
| 27 |
class="tok-prop">--radius-sm: class="tok-val">10px; |
| 28 |
} |
| 29 |
|
| 30 |
* { class="tok-prop">margin:class="tok-val">0; class="tok-prop">padding:class="tok-val">0; class="tok-prop">box-sizing:class="tok-val">border-box; } |
| 31 |
|
| 32 |
body { |
| 33 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--bg); |
| 34 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 35 |
class="tok-prop">font-family: class="tok-val">';DM Sans', sans-serif; |
| 36 |
class="tok-prop">min-height: class="tok-val">100vh; |
| 37 |
class="tok-prop">display: class="tok-val">flex; |
| 38 |
class="tok-prop">align-items: class="tok-val">center; |
| 39 |
class="tok-prop">justify-content: class="tok-val">center; |
| 40 |
class="tok-prop">padding: class="tok-val">40px 20px 60px; |
| 41 |
class="tok-prop">position: class="tok-val">relative; |
| 42 |
class="tok-prop">overflow-x: class="tok-val">hidden; |
| 43 |
} |
| 44 |
|
| 45 |
/* Warm sunset background */ |
| 46 |
class="tok-prop">body:class="tok-val">:before { |
| 47 |
class="tok-prop">content: class="tok-val">';'; |
| 48 |
class="tok-prop">position: class="tok-val">fixed; class="tok-prop">inset: class="tok-val">0; |
| 49 |
background: |
| 50 |
radial-gradient(ellipse at 100% 0%, rgba(232,147,90,0.15) 0%, transparent 50%), |
| 51 |
radial-gradient(ellipse at 0% 100%, rgba(212,116,138,0.1) 0%, transparent 50%), |
| 52 |
radial-gradient(ellipse at 50% 50%, rgba(255,220,180,0.08) 0%, transparent 60%); |
| 53 |
class="tok-prop">pointer-events: class="tok-val">none; |
| 54 |
} |
| 55 |
|
| 56 |
/* Floating hearts */ |
| 57 |
.heart { |
| 58 |
class="tok-prop">position: class="tok-val">fixed; |
| 59 |
class="tok-prop">font-size: class="tok-val">14px; |
| 60 |
class="tok-prop">opacity: class="tok-val">0; |
| 61 |
class="tok-prop">pointer-events: class="tok-val">none; |
| 62 |
class="tok-prop">animation: class="tok-val">floatUp linear infinite; |
| 63 |
} |
| 64 |
|
| 65 |
@keyframes floatUp { |
| 66 |
0% { class="tok-prop">transform: class="tok-val">translateY(100vh) scale(0.5) rotate(-10deg); class="tok-prop">opacity: class="tok-val">0; } |
| 67 |
10% { class="tok-prop">opacity: class="tok-val">0.4; } |
| 68 |
90% { class="tok-prop">opacity: class="tok-val">0.15; } |
| 69 |
100% { class="tok-prop">transform: class="tok-val">translateY(-10vh) scale(1) rotate(10deg); class="tok-prop">opacity: class="tok-val">0; } |
| 70 |
} |
| 71 |
|
| 72 |
.wrapper { |
| 73 |
class="tok-prop">width: class="tok-val">100%; |
| 74 |
class="tok-prop">max-width: class="tok-val">620px; |
| 75 |
class="tok-prop">display: class="tok-val">flex; |
| 76 |
class="tok-prop">flex-direction: class="tok-val">column; |
| 77 |
class="tok-prop">align-items: class="tok-val">center; |
| 78 |
class="tok-prop">position: class="tok-val">relative; |
| 79 |
class="tok-prop">z-index: class="tok-val">1; |
| 80 |
} |
| 81 |
|
| 82 |
/* ── SCREENS ── */ |
| 83 |
.screen { class="tok-prop">display: class="tok-val">none; class="tok-prop">width: class="tok-val">100%; class="tok-prop">flex-direction: class="tok-val">column; class="tok-prop">align-items: class="tok-val">center; } |
| 84 |
.screen.active { class="tok-prop">display: class="tok-val">flex; class="tok-prop">animation: class="tok-val">warmIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; } |
| 85 |
|
| 86 |
@keyframes warmIn { |
| 87 |
from { class="tok-prop">opacity: class="tok-val">0; class="tok-prop">transform: class="tok-val">translateY(24px) scale(0.97); } |
| 88 |
to { class="tok-prop">opacity: class="tok-val">1; class="tok-prop">transform: class="tok-val">translateY(0) scale(1); } |
| 89 |
} |
| 90 |
|
| 91 |
/* ── TOPBAR ── */ |
| 92 |
.topbar { |
| 93 |
class="tok-prop">width: class="tok-val">100%; |
| 94 |
class="tok-prop">display: class="tok-val">flex; |
| 95 |
class="tok-prop">align-items: class="tok-val">center; |
| 96 |
class="tok-prop">justify-content: class="tok-val">space-between; |
| 97 |
class="tok-prop">margin-bottom: class="tok-val">32px; |
| 98 |
} |
| 99 |
|
| 100 |
.brand { |
| 101 |
class="tok-prop">display: class="tok-val">flex; |
| 102 |
class="tok-prop">align-items: class="tok-val">center; |
| 103 |
class="tok-prop">gap: class="tok-val">8px; |
| 104 |
} |
| 105 |
|
| 106 |
.brand-dot { |
| 107 |
class="tok-prop">width: class="tok-val">28px; class="tok-prop">height: class="tok-val">28px; |
| 108 |
class="tok-prop">border-radius: class="tok-val">50%; |
| 109 |
class="tok-prop">background: class="tok-val">linear-gradient(135deg, class="tok-kw">var(--amber), #d4742a); |
| 110 |
class="tok-prop">display: class="tok-val">flex; class="tok-prop">align-items: class="tok-val">center; class="tok-prop">justify-content: class="tok-val">center; |
| 111 |
class="tok-prop">font-size: class="tok-val">14px; |
| 112 |
} |
| 113 |
|
| 114 |
.brand-name { |
| 115 |
class="tok-prop">font-size: class="tok-val">13px; |
| 116 |
class="tok-prop">font-weight: class="tok-val">600; |
| 117 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 118 |
} |
| 119 |
|
| 120 |
.brand-sub { |
| 121 |
class="tok-prop">font-size: class="tok-val">10px; |
| 122 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 123 |
class="tok-prop">letter-spacing: class="tok-val">1px; |
| 124 |
} |
| 125 |
|
| 126 |
.lang-pill { |
| 127 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--amber-light); |
| 128 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--amber); |
| 129 |
class="tok-prop">font-size: class="tok-val">11px; |
| 130 |
class="tok-prop">font-weight: class="tok-val">700; |
| 131 |
class="tok-prop">letter-spacing: class="tok-val">1px; |
| 132 |
class="tok-prop">padding: class="tok-val">5px 14px; |
| 133 |
class="tok-prop">border-radius: class="tok-val">20px; |
| 134 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--amber-mid); |
| 135 |
} |
| 136 |
|
| 137 |
/* ── INTRO ── */ |
| 138 |
.intro-eyebrow { |
| 139 |
class="tok-prop">font-size: class="tok-val">11px; |
| 140 |
class="tok-prop">font-weight: class="tok-val">600; |
| 141 |
class="tok-prop">letter-spacing: class="tok-val">3px; |
| 142 |
class="tok-prop">text-transform: class="tok-val">uppercase; |
| 143 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--rose); |
| 144 |
class="tok-prop">margin-bottom: class="tok-val">14px; |
| 145 |
class="tok-prop">text-align: class="tok-val">center; |
| 146 |
} |
| 147 |
|
| 148 |
.intro-title { |
| 149 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 150 |
class="tok-prop">font-size: class="tok-val">clamp(2.2rem, 7vw, 3.4rem); |
| 151 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 152 |
class="tok-prop">text-align: class="tok-val">center; |
| 153 |
class="tok-prop">line-height: class="tok-val">1.15; |
| 154 |
class="tok-prop">margin-bottom: class="tok-val">8px; |
| 155 |
class="tok-prop">font-weight: class="tok-val">300; |
| 156 |
} |
| 157 |
|
| 158 |
.intro-title em { |
| 159 |
class="tok-prop">font-style: class="tok-val">italic; |
| 160 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--amber); |
| 161 |
} |
| 162 |
|
| 163 |
.intro-sub { |
| 164 |
class="tok-prop">font-size: class="tok-val">14px; |
| 165 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 166 |
class="tok-prop">text-align: class="tok-val">center; |
| 167 |
class="tok-prop">margin-bottom: class="tok-val">36px; |
| 168 |
class="tok-prop">line-height: class="tok-val">1.7; |
| 169 |
class="tok-prop">font-style: class="tok-val">italic; |
| 170 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 171 |
class="tok-prop">font-size: class="tok-val">16px; |
| 172 |
} |
| 173 |
|
| 174 |
/* Friend cards */ |
| 175 |
.friends-row { |
| 176 |
class="tok-prop">display: class="tok-val">flex; |
| 177 |
class="tok-prop">gap: class="tok-val">16px; |
| 178 |
class="tok-prop">width: class="tok-val">100%; |
| 179 |
class="tok-prop">margin-bottom: class="tok-val">24px; |
| 180 |
} |
| 181 |
|
| 182 |
.friend-card { |
| 183 |
class="tok-prop">flex: class="tok-val">1; |
| 184 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 185 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius); |
| 186 |
class="tok-prop">padding: class="tok-val">24px 20px; |
| 187 |
class="tok-prop">text-align: class="tok-val">center; |
| 188 |
class="tok-prop">box-shadow: class="tok-val">0 4px 20px class="tok-kw">var(--shadow); |
| 189 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 190 |
class="tok-prop">position: class="tok-val">relative; |
| 191 |
class="tok-prop">overflow: class="tok-val">hidden; |
| 192 |
} |
| 193 |
|
| 194 |
.class="tok-prop">friend-card:class="tok-val">:before { |
| 195 |
class="tok-prop">content: class="tok-val">';'; |
| 196 |
class="tok-prop">position: class="tok-val">absolute; |
| 197 |
class="tok-prop">top: class="tok-val">0; class="tok-prop">left: class="tok-val">0; class="tok-prop">right: class="tok-val">0; |
| 198 |
class="tok-prop">height: class="tok-val">3px; |
| 199 |
} |
| 200 |
|
| 201 |
.friend-card.class="tok-prop">maria:class="tok-val">:before { class="tok-prop">background: class="tok-val">linear-gradient(90deg, class="tok-kw">var(--rose), class="tok-kw">var(--amber)); } |
| 202 |
.friend-card.class="tok-prop">shania:class="tok-val">:before { class="tok-prop">background: class="tok-val">linear-gradient(90deg, class="tok-kw">var(--amber), #f0b830); } |
| 203 |
|
| 204 |
.friend-emoji { |
| 205 |
class="tok-prop">font-size: class="tok-val">44px; |
| 206 |
class="tok-prop">margin-bottom: class="tok-val">10px; |
| 207 |
class="tok-prop">display: class="tok-val">block; |
| 208 |
} |
| 209 |
|
| 210 |
.friend-name { |
| 211 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 212 |
class="tok-prop">font-size: class="tok-val">20px; |
| 213 |
class="tok-prop">font-weight: class="tok-val">600; |
| 214 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 215 |
class="tok-prop">margin-bottom: class="tok-val">4px; |
| 216 |
} |
| 217 |
|
| 218 |
.friend-desc { |
| 219 |
class="tok-prop">font-size: class="tok-val">12px; |
| 220 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 221 |
class="tok-prop">line-height: class="tok-val">1.6; |
| 222 |
class="tok-prop">font-style: class="tok-val">italic; |
| 223 |
} |
| 224 |
|
| 225 |
/* Story card */ |
| 226 |
.story-card { |
| 227 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 228 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius); |
| 229 |
class="tok-prop">padding: class="tok-val">28px 32px; |
| 230 |
class="tok-prop">width: class="tok-val">100%; |
| 231 |
class="tok-prop">box-shadow: class="tok-val">0 4px 20px class="tok-kw">var(--shadow); |
| 232 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 233 |
class="tok-prop">margin-bottom: class="tok-val">28px; |
| 234 |
class="tok-prop">position: class="tok-val">relative; |
| 235 |
} |
| 236 |
|
| 237 |
.story-icon { |
| 238 |
class="tok-prop">font-size: class="tok-val">28px; |
| 239 |
class="tok-prop">margin-bottom: class="tok-val">14px; |
| 240 |
class="tok-prop">display: class="tok-val">block; |
| 241 |
class="tok-prop">text-align: class="tok-val">center; |
| 242 |
} |
| 243 |
|
| 244 |
.story-text { |
| 245 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 246 |
class="tok-prop">font-size: class="tok-val">17px; |
| 247 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 248 |
class="tok-prop">line-height: class="tok-val">1.9; |
| 249 |
class="tok-prop">text-align: class="tok-val">center; |
| 250 |
class="tok-prop">font-style: class="tok-val">italic; |
| 251 |
} |
| 252 |
|
| 253 |
.story-text strong { |
| 254 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 255 |
class="tok-prop">font-style: class="tok-val">normal; |
| 256 |
} |
| 257 |
|
| 258 |
/* Button */ |
| 259 |
.btn-start { |
| 260 |
class="tok-prop">background: class="tok-val">linear-gradient(135deg, class="tok-kw">var(--rose), #c05070); |
| 261 |
class="tok-prop">color: class="tok-val">white; |
| 262 |
class="tok-prop">border: class="tok-val">none; |
| 263 |
class="tok-prop">padding: class="tok-val">16px 48px; |
| 264 |
class="tok-prop">border-radius: class="tok-val">50px; |
| 265 |
class="tok-prop">font-family: class="tok-val">';DM Sans', sans-serif; |
| 266 |
class="tok-prop">font-size: class="tok-val">15px; |
| 267 |
class="tok-prop">font-weight: class="tok-val">600; |
| 268 |
class="tok-prop">cursor: class="tok-val">pointer; |
| 269 |
class="tok-prop">transition: class="tok-val">all 0.25s ease; |
| 270 |
class="tok-prop">box-shadow: class="tok-val">0 8px 24px rgba(212,116,138,0.35); |
| 271 |
class="tok-prop">display: class="tok-val">flex; |
| 272 |
class="tok-prop">align-items: class="tok-val">center; |
| 273 |
class="tok-prop">gap: class="tok-val">10px; |
| 274 |
} |
| 275 |
|
| 276 |
.class="tok-prop">btn-start:class="tok-val">hover { |
| 277 |
class="tok-prop">transform: class="tok-val">translateY(-2px); |
| 278 |
class="tok-prop">box-shadow: class="tok-val">0 12px 32px rgba(212,116,138,0.45); |
| 279 |
} |
| 280 |
|
| 281 |
/* ── LESSON ── */ |
| 282 |
.lesson-topbar { |
| 283 |
class="tok-prop">width: class="tok-val">100%; |
| 284 |
class="tok-prop">display: class="tok-val">flex; |
| 285 |
class="tok-prop">align-items: class="tok-val">center; |
| 286 |
class="tok-prop">justify-content: class="tok-val">space-between; |
| 287 |
class="tok-prop">margin-bottom: class="tok-val">16px; |
| 288 |
} |
| 289 |
|
| 290 |
.step-badge { |
| 291 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--rose-light); |
| 292 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--rose); |
| 293 |
class="tok-prop">font-size: class="tok-val">11px; |
| 294 |
class="tok-prop">font-weight: class="tok-val">700; |
| 295 |
class="tok-prop">padding: class="tok-val">5px 14px; |
| 296 |
class="tok-prop">border-radius: class="tok-val">20px; |
| 297 |
class="tok-prop">letter-spacing: class="tok-val">0.5px; |
| 298 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--rose-mid); |
| 299 |
} |
| 300 |
|
| 301 |
.hearts-score { |
| 302 |
class="tok-prop">display: class="tok-val">flex; |
| 303 |
class="tok-prop">gap: class="tok-val">4px; |
| 304 |
class="tok-prop">font-size: class="tok-val">16px; |
| 305 |
} |
| 306 |
|
| 307 |
/* Progress */ |
| 308 |
.prog-wrap { class="tok-prop">width: class="tok-val">100%; class="tok-prop">margin-bottom: class="tok-val">20px; } |
| 309 |
.prog-bar { |
| 310 |
class="tok-prop">height: class="tok-val">5px; |
| 311 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--border); |
| 312 |
class="tok-prop">border-radius: class="tok-val">5px; |
| 313 |
class="tok-prop">overflow: class="tok-val">hidden; |
| 314 |
} |
| 315 |
.prog-fill { |
| 316 |
class="tok-prop">height: class="tok-val">100%; |
| 317 |
class="tok-prop">background: class="tok-val">linear-gradient(90deg, class="tok-kw">var(--rose), class="tok-kw">var(--amber)); |
| 318 |
class="tok-prop">border-radius: class="tok-val">5px; |
| 319 |
class="tok-prop">transition: class="tok-val">width 0.5s cubic-bezier(0.34,1.56,0.64,1); |
| 320 |
class="tok-prop">box-shadow: class="tok-val">0 0 10px rgba(212,116,138,0.3); |
| 321 |
} |
| 322 |
|
| 323 |
/* María bubble */ |
| 324 |
.maria-wrap { |
| 325 |
class="tok-prop">display: class="tok-val">flex; |
| 326 |
class="tok-prop">gap: class="tok-val">12px; |
| 327 |
class="tok-prop">align-items: class="tok-val">flex-start; |
| 328 |
class="tok-prop">width: class="tok-val">100%; |
| 329 |
class="tok-prop">margin-bottom: class="tok-val">20px; |
| 330 |
} |
| 331 |
|
| 332 |
.maria-av { |
| 333 |
class="tok-prop">width: class="tok-val">44px; class="tok-prop">height: class="tok-val">44px; |
| 334 |
class="tok-prop">border-radius: class="tok-val">50%; |
| 335 |
class="tok-prop">background: class="tok-val">linear-gradient(135deg, class="tok-kw">var(--rose), #c05070); |
| 336 |
class="tok-prop">display: class="tok-val">flex; class="tok-prop">align-items: class="tok-val">center; class="tok-prop">justify-content: class="tok-val">center; |
| 337 |
class="tok-prop">font-size: class="tok-val">22px; |
| 338 |
class="tok-prop">flex-shrink: class="tok-val">0; |
| 339 |
class="tok-prop">box-shadow: class="tok-val">0 4px 12px rgba(212,116,138,0.3); |
| 340 |
} |
| 341 |
|
| 342 |
.maria-bubble { |
| 343 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 344 |
class="tok-prop">border-radius: class="tok-val">4px 16px 16px 16px; |
| 345 |
class="tok-prop">padding: class="tok-val">16px 20px; |
| 346 |
class="tok-prop">flex: class="tok-val">1; |
| 347 |
class="tok-prop">box-shadow: class="tok-val">0 4px 16px class="tok-kw">var(--shadow); |
| 348 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 349 |
} |
| 350 |
|
| 351 |
.maria-name { |
| 352 |
class="tok-prop">font-size: class="tok-val">10px; |
| 353 |
class="tok-prop">font-weight: class="tok-val">700; |
| 354 |
class="tok-prop">letter-spacing: class="tok-val">2px; |
| 355 |
class="tok-prop">text-transform: class="tok-val">uppercase; |
| 356 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--rose); |
| 357 |
class="tok-prop">margin-bottom: class="tok-val">6px; |
| 358 |
} |
| 359 |
|
| 360 |
.maria-text { |
| 361 |
class="tok-prop">font-size: class="tok-val">14px; |
| 362 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 363 |
class="tok-prop">line-height: class="tok-val">1.75; |
| 364 |
class="tok-prop">font-style: class="tok-val">italic; |
| 365 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 366 |
class="tok-prop">font-size: class="tok-val">16px; |
| 367 |
} |
| 368 |
|
| 369 |
.maria-text em { |
| 370 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--amber); |
| 371 |
class="tok-prop">font-style: class="tok-val">normal; |
| 372 |
class="tok-prop">font-weight: class="tok-val">600; |
| 373 |
class="tok-prop">font-family: class="tok-val">';DM Sans', sans-serif; |
| 374 |
class="tok-prop">font-size: class="tok-val">14px; |
| 375 |
} |
| 376 |
|
| 377 |
/* FLIP CARD */ |
| 378 |
.flip-area { |
| 379 |
class="tok-prop">perspective: class="tok-val">1200px; |
| 380 |
class="tok-prop">width: class="tok-val">100%; |
| 381 |
class="tok-prop">height: class="tok-val">260px; |
| 382 |
class="tok-prop">margin-bottom: class="tok-val">20px; |
| 383 |
class="tok-prop">cursor: class="tok-val">pointer; |
| 384 |
} |
| 385 |
|
| 386 |
.flip-inner { |
| 387 |
class="tok-prop">width: class="tok-val">100%; class="tok-prop">height: class="tok-val">100%; |
| 388 |
class="tok-prop">position: class="tok-val">relative; |
| 389 |
class="tok-prop">transform-style: class="tok-val">preserve-3d; |
| 390 |
class="tok-prop">transition: class="tok-val">transform 0.6s cubic-bezier(0.4,0,0.2,1); |
| 391 |
} |
| 392 |
|
| 393 |
.flip-inner.flipped { class="tok-prop">transform: class="tok-val">rotateY(180deg); } |
| 394 |
|
| 395 |
.flip-face { |
| 396 |
class="tok-prop">position: class="tok-val">absolute; class="tok-prop">inset: class="tok-val">0; |
| 397 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius); |
| 398 |
class="tok-prop">backface-visibility: class="tok-val">hidden; |
| 399 |
class="tok-prop">display: class="tok-val">flex; |
| 400 |
class="tok-prop">flex-direction: class="tok-val">column; |
| 401 |
class="tok-prop">align-items: class="tok-val">center; |
| 402 |
class="tok-prop">justify-content: class="tok-val">center; |
| 403 |
class="tok-prop">padding: class="tok-val">32px 28px; |
| 404 |
} |
| 405 |
|
| 406 |
.flip-front { |
| 407 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 408 |
class="tok-prop">box-shadow: class="tok-val">0 8px 32px class="tok-kw">var(--shadow); |
| 409 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 410 |
} |
| 411 |
|
| 412 |
.flip-back { |
| 413 |
class="tok-prop">background: class="tok-val">linear-gradient(145deg, #c05070 0%, class="tok-kw">var(--rose) 50%, class="tok-kw">var(--amber) 100%); |
| 414 |
class="tok-prop">box-shadow: class="tok-val">0 8px 32px rgba(212,116,138,0.4); |
| 415 |
class="tok-prop">transform: class="tok-val">rotateY(180deg); |
| 416 |
} |
| 417 |
|
| 418 |
.card-tag { |
| 419 |
class="tok-prop">position: class="tok-val">absolute; |
| 420 |
class="tok-prop">top: class="tok-val">16px; class="tok-prop">left: class="tok-val">20px; |
| 421 |
class="tok-prop">font-size: class="tok-val">10px; |
| 422 |
class="tok-prop">font-weight: class="tok-val">700; |
| 423 |
class="tok-prop">letter-spacing: class="tok-val">2px; |
| 424 |
class="tok-prop">text-transform: class="tok-val">uppercase; |
| 425 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 426 |
} |
| 427 |
|
| 428 |
.flip-back .card-tag { class="tok-prop">color: class="tok-val">rgba(255,255,255,0.5); } |
| 429 |
|
| 430 |
.hint-emoji-big { class="tok-prop">font-size: class="tok-val">58px; class="tok-prop">margin-bottom: class="tok-val">14px; } |
| 431 |
|
| 432 |
.hint-desc { |
| 433 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 434 |
class="tok-prop">font-size: class="tok-val">16px; |
| 435 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 436 |
class="tok-prop">text-align: class="tok-val">center; |
| 437 |
class="tok-prop">line-height: class="tok-val">1.7; |
| 438 |
class="tok-prop">max-width: class="tok-val">280px; |
| 439 |
class="tok-prop">font-style: class="tok-val">italic; |
| 440 |
} |
| 441 |
|
| 442 |
.tap-cue { |
| 443 |
class="tok-prop">position: class="tok-val">absolute; class="tok-prop">bottom: class="tok-val">16px; |
| 444 |
class="tok-prop">font-size: class="tok-val">11px; |
| 445 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 446 |
class="tok-prop">font-weight: class="tok-val">600; |
| 447 |
class="tok-prop">display: class="tok-val">flex; |
| 448 |
class="tok-prop">align-items: class="tok-val">center; |
| 449 |
class="tok-prop">gap: class="tok-val">5px; |
| 450 |
} |
| 451 |
|
| 452 |
/* Back face */ |
| 453 |
.en-phrase { |
| 454 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 455 |
class="tok-prop">font-size: class="tok-val">clamp(1.3rem, 4vw, 1.8rem); |
| 456 |
class="tok-prop">color: class="tok-val">white; |
| 457 |
class="tok-prop">line-height: class="tok-val">1.3; |
| 458 |
class="tok-prop">margin-bottom: class="tok-val">10px; |
| 459 |
class="tok-prop">text-align: class="tok-val">center; |
| 460 |
class="tok-prop">font-style: class="tok-val">italic; |
| 461 |
class="tok-prop">font-weight: class="tok-val">300; |
| 462 |
} |
| 463 |
|
| 464 |
.en-phonetic { |
| 465 |
class="tok-prop">font-size: class="tok-val">12px; |
| 466 |
class="tok-prop">color: class="tok-val">rgba(255,255,255,0.6); |
| 467 |
class="tok-prop">letter-spacing: class="tok-val">2px; |
| 468 |
class="tok-prop">margin-bottom: class="tok-val">10px; |
| 469 |
class="tok-prop">font-weight: class="tok-val">400; |
| 470 |
class="tok-prop">text-align: class="tok-val">center; |
| 471 |
} |
| 472 |
|
| 473 |
.en-meaning { |
| 474 |
class="tok-prop">font-size: class="tok-val">15px; |
| 475 |
class="tok-prop">color: class="tok-val">rgba(255,255,255,0.9); |
| 476 |
class="tok-prop">font-weight: class="tok-val">600; |
| 477 |
class="tok-prop">margin-bottom: class="tok-val">8px; |
| 478 |
class="tok-prop">text-align: class="tok-val">center; |
| 479 |
} |
| 480 |
|
| 481 |
.en-note { |
| 482 |
class="tok-prop">font-size: class="tok-val">11px; |
| 483 |
class="tok-prop">color: class="tok-val">rgba(255,255,255,0.5); |
| 484 |
class="tok-prop">text-align: class="tok-val">center; |
| 485 |
class="tok-prop">line-height: class="tok-val">1.8; |
| 486 |
class="tok-prop">font-style: class="tok-val">italic; |
| 487 |
} |
| 488 |
|
| 489 |
/* Shania reaction */ |
| 490 |
.shania-react { |
| 491 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--amber-light); |
| 492 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--amber-mid); |
| 493 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius-sm); |
| 494 |
class="tok-prop">padding: class="tok-val">12px 18px; |
| 495 |
class="tok-prop">width: class="tok-val">100%; |
| 496 |
class="tok-prop">margin-bottom: class="tok-val">20px; |
| 497 |
class="tok-prop">display: class="tok-val">flex; |
| 498 |
class="tok-prop">align-items: class="tok-val">center; |
| 499 |
class="tok-prop">gap: class="tok-val">10px; |
| 500 |
class="tok-prop">font-size: class="tok-val">13px; |
| 501 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 502 |
class="tok-prop">font-style: class="tok-val">italic; |
| 503 |
} |
| 504 |
|
| 505 |
/* Answer buttons */ |
| 506 |
.answer-row { |
| 507 |
class="tok-prop">display: class="tok-val">flex; |
| 508 |
class="tok-prop">gap: class="tok-val">12px; |
| 509 |
class="tok-prop">width: class="tok-val">100%; |
| 510 |
class="tok-prop">margin-bottom: class="tok-val">10px; |
| 511 |
} |
| 512 |
|
| 513 |
.btn-ans { |
| 514 |
class="tok-prop">flex: class="tok-val">1; |
| 515 |
class="tok-prop">padding: class="tok-val">14px 20px; |
| 516 |
class="tok-prop">border-radius: class="tok-val">50px; |
| 517 |
class="tok-prop">border: class="tok-val">none; |
| 518 |
class="tok-prop">font-family: class="tok-val">';DM Sans', sans-serif; |
| 519 |
class="tok-prop">font-size: class="tok-val">13px; |
| 520 |
class="tok-prop">font-weight: class="tok-val">700; |
| 521 |
class="tok-prop">cursor: class="tok-val">pointer; |
| 522 |
class="tok-prop">transition: class="tok-val">all 0.2s ease; |
| 523 |
} |
| 524 |
|
| 525 |
.class="tok-prop">btn-ans:class="tok-val">disabled { class="tok-prop">opacity: class="tok-val">0.3; class="tok-prop">cursor: class="tok-val">not-allowed; class="tok-prop">transform: class="tok-val">none !important; } |
| 526 |
|
| 527 |
.btn-knew { |
| 528 |
class="tok-prop">background: class="tok-val">linear-gradient(135deg, class="tok-kw">var(--rose), #c05070); |
| 529 |
class="tok-prop">color: class="tok-val">white; |
| 530 |
class="tok-prop">box-shadow: class="tok-val">0 6px 20px rgba(212,116,138,0.3); |
| 531 |
} |
| 532 |
.class="tok-prop">btn-knew:class="tok-val">not(:disabled):hover { |
| 533 |
class="tok-prop">transform: class="tok-val">translateY(-2px); |
| 534 |
class="tok-prop">box-shadow: class="tok-val">0 10px 28px rgba(212,116,138,0.45); |
| 535 |
} |
| 536 |
|
| 537 |
.btn-forgot { |
| 538 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 539 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 540 |
class="tok-prop">border: class="tok-val">1.5px solid class="tok-kw">var(--border); |
| 541 |
} |
| 542 |
.class="tok-prop">btn-forgot:class="tok-val">not(:disabled):hover { |
| 543 |
class="tok-prop">border-color: class="tok-val">class="tok-kw">var(--amber); |
| 544 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--amber); |
| 545 |
class="tok-prop">transform: class="tok-val">translateY(-2px); |
| 546 |
} |
| 547 |
|
| 548 |
.btn-reveal { |
| 549 |
class="tok-prop">background: class="tok-val">transparent; |
| 550 |
class="tok-prop">border: class="tok-val">1.5px solid class="tok-kw">var(--border); |
| 551 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 552 |
class="tok-prop">padding: class="tok-val">12px; |
| 553 |
class="tok-prop">border-radius: class="tok-val">50px; |
| 554 |
class="tok-prop">font-family: class="tok-val">';DM Sans', sans-serif; |
| 555 |
class="tok-prop">font-size: class="tok-val">12px; |
| 556 |
class="tok-prop">font-weight: class="tok-val">600; |
| 557 |
class="tok-prop">cursor: class="tok-val">pointer; |
| 558 |
class="tok-prop">transition: class="tok-val">all 0.2s; |
| 559 |
class="tok-prop">width: class="tok-val">100%; |
| 560 |
class="tok-prop">letter-spacing: class="tok-val">0.5px; |
| 561 |
} |
| 562 |
.class="tok-prop">btn-reveal:class="tok-val">hover { class="tok-prop">border-color: class="tok-val">class="tok-kw">var(--rose); class="tok-prop">color: class="tok-val">class="tok-kw">var(--rose); } |
| 563 |
|
| 564 |
/* ── RESULT ── */ |
| 565 |
.result-photo { |
| 566 |
class="tok-prop">background: class="tok-val">linear-gradient(145deg, class="tok-kw">var(--rose-light), class="tok-kw">var(--amber-light)); |
| 567 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius); |
| 568 |
class="tok-prop">padding: class="tok-val">40px 32px; |
| 569 |
class="tok-prop">width: class="tok-val">100%; |
| 570 |
class="tok-prop">text-align: class="tok-val">center; |
| 571 |
class="tok-prop">box-shadow: class="tok-val">0 8px 32px class="tok-kw">var(--shadow); |
| 572 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 573 |
class="tok-prop">margin-bottom: class="tok-val">20px; |
| 574 |
class="tok-prop">position: class="tok-val">relative; |
| 575 |
class="tok-prop">overflow: class="tok-val">hidden; |
| 576 |
} |
| 577 |
|
| 578 |
.class="tok-prop">result-photo:class="tok-val">:before { |
| 579 |
class="tok-prop">content: class="tok-val">';'; |
| 580 |
class="tok-prop">position: class="tok-val">absolute; |
| 581 |
class="tok-prop">top: class="tok-val">0; class="tok-prop">left: class="tok-val">0; class="tok-prop">right: class="tok-val">0; |
| 582 |
class="tok-prop">height: class="tok-val">3px; |
| 583 |
class="tok-prop">background: class="tok-val">linear-gradient(90deg, class="tok-kw">var(--rose), class="tok-kw">var(--amber), class="tok-kw">var(--rose)); |
| 584 |
} |
| 585 |
|
| 586 |
.result-friends { class="tok-prop">font-size: class="tok-val">56px; class="tok-prop">margin-bottom: class="tok-val">16px; } |
| 587 |
|
| 588 |
.result-title { |
| 589 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 590 |
class="tok-prop">font-size: class="tok-val">2rem; |
| 591 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 592 |
class="tok-prop">margin-bottom: class="tok-val">10px; |
| 593 |
class="tok-prop">font-weight: class="tok-val">400; |
| 594 |
class="tok-prop">line-height: class="tok-val">1.2; |
| 595 |
} |
| 596 |
|
| 597 |
.result-msg { |
| 598 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 599 |
class="tok-prop">font-size: class="tok-val">16px; |
| 600 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 601 |
class="tok-prop">line-height: class="tok-val">1.9; |
| 602 |
class="tok-prop">font-style: class="tok-val">italic; |
| 603 |
class="tok-prop">margin-bottom: class="tok-val">28px; |
| 604 |
} |
| 605 |
|
| 606 |
.stats-row { |
| 607 |
class="tok-prop">display: class="tok-val">flex; |
| 608 |
class="tok-prop">gap: class="tok-val">0; |
| 609 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 610 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius-sm); |
| 611 |
class="tok-prop">overflow: class="tok-val">hidden; |
| 612 |
class="tok-prop">background: class="tok-val">white; |
| 613 |
} |
| 614 |
|
| 615 |
.stat-box { |
| 616 |
class="tok-prop">flex: class="tok-val">1; |
| 617 |
class="tok-prop">padding: class="tok-val">16px; |
| 618 |
class="tok-prop">text-align: class="tok-val">center; |
| 619 |
class="tok-prop">border-right: class="tok-val">1px solid class="tok-kw">var(--border); |
| 620 |
} |
| 621 |
.class="tok-prop">stat-box:class="tok-val">last-child { class="tok-prop">border-right: class="tok-val">none; } |
| 622 |
|
| 623 |
.stat-n { |
| 624 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 625 |
class="tok-prop">font-size: class="tok-val">2rem; |
| 626 |
class="tok-prop">line-height: class="tok-val">1; |
| 627 |
class="tok-prop">margin-bottom: class="tok-val">4px; |
| 628 |
} |
| 629 |
.stat-l { |
| 630 |
class="tok-prop">font-size: class="tok-val">10px; |
| 631 |
class="tok-prop">font-weight: class="tok-val">700; |
| 632 |
class="tok-prop">letter-spacing: class="tok-val">1.5px; |
| 633 |
class="tok-prop">text-transform: class="tok-val">uppercase; |
| 634 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 635 |
} |
| 636 |
|
| 637 |
/* Final message from Shania */ |
| 638 |
.shania-final { |
| 639 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 640 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius); |
| 641 |
class="tok-prop">padding: class="tok-val">28px 32px; |
| 642 |
class="tok-prop">width: class="tok-val">100%; |
| 643 |
class="tok-prop">box-shadow: class="tok-val">0 4px 20px class="tok-kw">var(--shadow); |
| 644 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 645 |
class="tok-prop">margin-bottom: class="tok-val">20px; |
| 646 |
class="tok-prop">display: class="tok-val">flex; |
| 647 |
class="tok-prop">gap: class="tok-val">16px; |
| 648 |
class="tok-prop">align-items: class="tok-val">flex-start; |
| 649 |
} |
| 650 |
|
| 651 |
.shania-av-big { |
| 652 |
class="tok-prop">width: class="tok-val">56px; class="tok-prop">height: class="tok-val">56px; |
| 653 |
class="tok-prop">border-radius: class="tok-val">50%; |
| 654 |
class="tok-prop">background: class="tok-val">linear-gradient(135deg, class="tok-kw">var(--amber), #d4901a); |
| 655 |
class="tok-prop">display: class="tok-val">flex; class="tok-prop">align-items: class="tok-val">center; class="tok-prop">justify-content: class="tok-val">center; |
| 656 |
class="tok-prop">font-size: class="tok-val">28px; |
| 657 |
class="tok-prop">flex-shrink: class="tok-val">0; |
| 658 |
class="tok-prop">box-shadow: class="tok-val">0 4px 12px rgba(232,147,90,0.3); |
| 659 |
} |
| 660 |
|
| 661 |
.shania-msg { |
| 662 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 663 |
class="tok-prop">font-size: class="tok-val">17px; |
| 664 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-mid); |
| 665 |
class="tok-prop">line-height: class="tok-val">1.9; |
| 666 |
class="tok-prop">font-style: class="tok-val">italic; |
| 667 |
} |
| 668 |
|
| 669 |
.shania-msg strong { |
| 670 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--amber); |
| 671 |
class="tok-prop">font-style: class="tok-val">normal; |
| 672 |
class="tok-prop">font-family: class="tok-val">';DM Sans', sans-serif; |
| 673 |
class="tok-prop">font-size: class="tok-val">14px; |
| 674 |
class="tok-prop">font-weight: class="tok-val">700; |
| 675 |
} |
| 676 |
|
| 677 |
/* Phrases learned */ |
| 678 |
.phrases-card { |
| 679 |
class="tok-prop">background: class="tok-val">class="tok-kw">var(--cream); |
| 680 |
class="tok-prop">border-radius: class="tok-val">class="tok-kw">var(--radius); |
| 681 |
class="tok-prop">padding: class="tok-val">24px 28px; |
| 682 |
class="tok-prop">width: class="tok-val">100%; |
| 683 |
class="tok-prop">box-shadow: class="tok-val">0 4px 20px class="tok-kw">var(--shadow); |
| 684 |
class="tok-prop">border: class="tok-val">1px solid class="tok-kw">var(--border); |
| 685 |
class="tok-prop">margin-bottom: class="tok-val">24px; |
| 686 |
} |
| 687 |
|
| 688 |
.phrases-title { |
| 689 |
class="tok-prop">font-size: class="tok-val">10px; |
| 690 |
class="tok-prop">font-weight: class="tok-val">700; |
| 691 |
class="tok-prop">letter-spacing: class="tok-val">2px; |
| 692 |
class="tok-prop">text-transform: class="tok-val">uppercase; |
| 693 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 694 |
class="tok-prop">margin-bottom: class="tok-val">16px; |
| 695 |
} |
| 696 |
|
| 697 |
.phrase-row { |
| 698 |
class="tok-prop">display: class="tok-val">flex; |
| 699 |
class="tok-prop">align-items: class="tok-val">center; |
| 700 |
class="tok-prop">gap: class="tok-val">12px; |
| 701 |
class="tok-prop">padding: class="tok-val">10px 0; |
| 702 |
class="tok-prop">border-bottom: class="tok-val">1px solid class="tok-kw">var(--border); |
| 703 |
class="tok-prop">opacity: class="tok-val">0; |
| 704 |
class="tok-prop">animation: class="tok-val">phraseIn 0.4s ease forwards; |
| 705 |
} |
| 706 |
|
| 707 |
.class="tok-prop">phrase-row:class="tok-val">last-child { class="tok-prop">border-bottom: class="tok-val">none; } |
| 708 |
|
| 709 |
@keyframes phraseIn { |
| 710 |
from { class="tok-prop">opacity: class="tok-val">0; class="tok-prop">transform: class="tok-val">translateX(-10px); } |
| 711 |
to { class="tok-prop">opacity: class="tok-val">1; class="tok-prop">transform: class="tok-val">translateX(0); } |
| 712 |
} |
| 713 |
|
| 714 |
.phrase-en { |
| 715 |
class="tok-prop">font-family: class="tok-val">';Cormorant Garamond', serif; |
| 716 |
class="tok-prop">font-size: class="tok-val">16px; |
| 717 |
class="tok-prop">font-style: class="tok-val">italic; |
| 718 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text); |
| 719 |
class="tok-prop">flex: class="tok-val">1; |
| 720 |
} |
| 721 |
|
| 722 |
.phrase-es { |
| 723 |
class="tok-prop">font-size: class="tok-val">12px; |
| 724 |
class="tok-prop">color: class="tok-val">class="tok-kw">var(--text-light); |
| 725 |
class="tok-prop">text-align: class="tok-val">right; |
| 726 |
} |
| 727 |
|
| 728 |
.phrase-check { class="tok-prop">font-size: class="tok-val">14px; } |
| 729 |
|
| 730 |
/* Shake */ |
| 731 |
@keyframes shake { |
| 732 |
0%,100% { class="tok-prop">transform: class="tok-val">translateX(0); } |
| 733 |
20% { class="tok-prop">transform: class="tok-val">translateX(-8px); } |
| 734 |
40% { class="tok-prop">transform: class="tok-val">translateX(8px); } |
| 735 |
60% { class="tok-prop">transform: class="tok-val">translateX(-6px); } |
| 736 |
80% { class="tok-prop">transform: class="tok-val">translateX(6px); } |
| 737 |
} |
| 738 |
.shake { class="tok-prop">animation: class="tok-val">shake 0.4s ease; } |
| 739 |
class="tok-tag"></styleclass="tok-attr">class="tok-tag">> |
| 740 |
class="tok-tag"></headclass="tok-attr">class="tok-tag">> |
| 741 |
class="tok-tag"><bodyclass="tok-attr">class="tok-tag">> |
| 742 |
|
| 743 |
class="tok-tag"><divclass="tok-attr"> id="hearts-container"class="tok-tag">>class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 744 |
|
| 745 |
class="tok-tag"><divclass="tok-attr"> class="wrapper"class="tok-tag">> |
| 746 |
|
| 747 |
|
| 748 |
class="tok-tag"><divclass="tok-attr"> class="screen active" id="screen-intro"class="tok-tag">> |
| 749 |
class="tok-tag"><divclass="tok-attr"> class="topbar"class="tok-tag">> |
| 750 |
class="tok-tag"><divclass="tok-attr"> class="brand"class="tok-tag">> |
| 751 |
class="tok-tag"><divclass="tok-attr"> class="brand-dot"class="tok-tag">>🦙class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 752 |
class="tok-tag"><divclass="tok-attr">class="tok-tag">> |
| 753 |
class="tok-tag"><divclass="tok-attr"> class="brand-name"class="tok-tag">>AlpacaViajesclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 754 |
class="tok-tag"><divclass="tok-attr"> class="brand-sub"class="tok-tag">>PLATAFORMA DE IDIOMASclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 755 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 756 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 757 |
class="tok-tag"><divclass="tok-attr"> class="lang-pill"class="tok-tag">>🇬🇧 Englishclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 758 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 759 |
|
| 760 |
class="tok-tag"><divclass="tok-attr"> class="intro-eyebrow"class="tok-tag">>✦ Inglés · Nivel del corazón ✦class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 761 |
class="tok-tag"><h1class="tok-attr"> class="intro-title"class="tok-tag">>See youclass="tok-tag"><brclass="tok-attr">class="tok-tag">>class="tok-tag"><emclass="tok-attr">class="tok-tag">>soonclass="tok-tag"></emclass="tok-attr">class="tok-tag">>class="tok-tag"></h1class="tok-attr">class="tok-tag">> |
| 762 |
class="tok-tag"><pclass="tok-attr"> class="intro-sub"class="tok-tag">>"Más allá de lo que suceda en el mundo,class="tok-tag"><brclass="tok-attr">class="tok-tag">>siempre seremos amigas."class="tok-tag"></pclass="tok-attr">class="tok-tag">> |
| 763 |
|
| 764 |
class="tok-tag"><divclass="tok-attr"> class="friends-row"class="tok-tag">> |
| 765 |
class="tok-tag"><divclass="tok-attr"> class="friend-card maria"class="tok-tag">> |
| 766 |
class="tok-tag"><spanclass="tok-attr"> class="friend-emoji"class="tok-tag">>🌸class="tok-tag"></spanclass="tok-attr">class="tok-tag">> |
| 767 |
class="tok-tag"><divclass="tok-attr"> class="friend-name"class="tok-tag">>Maríaclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 768 |
class="tok-tag"><divclass="tok-attr"> class="friend-desc"class="tok-tag">>Cálida, expresiva.class="tok-tag"><brclass="tok-attr">class="tok-tag">>La que abraza fuerteclass="tok-tag"><brclass="tok-attr">class="tok-tag">>y llora sin pena.class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 769 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 770 |
class="tok-tag"><divclass="tok-attr"> class="friend-card shania"class="tok-tag">> |
| 771 |
class="tok-tag"><spanclass="tok-attr"> class="friend-emoji"class="tok-tag">>✨class="tok-tag"></spanclass="tok-attr">class="tok-tag">> |
| 772 |
class="tok-tag"><divclass="tok-attr"> class="friend-name"class="tok-tag">>Shaniaclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 773 |
class="tok-tag"><divclass="tok-attr"> class="friend-desc"class="tok-tag">>Alegre, directa.class="tok-tag"><brclass="tok-attr">class="tok-tag">>La que te hace reírclass="tok-tag"><brclass="tok-attr">class="tok-tag">>hasta que duele.class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 774 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 775 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 776 |
|
| 777 |
class="tok-tag"><divclass="tok-attr"> class="story-card"class="tok-tag">> |
| 778 |
class="tok-tag"><spanclass="tok-attr"> class="story-icon"class="tok-tag">>🌅class="tok-tag"></spanclass="tok-attr">class="tok-tag">> |
| 779 |
class="tok-tag"><divclass="tok-attr"> class="story-text"class="tok-tag">> |
| 780 |
class="tok-tag"><strongclass="tok-attr">class="tok-tag">>Shania se va mañana de regreso a Londres.class="tok-tag"></strongclass="tok-attr">class="tok-tag">>class="tok-tag"><brclass="tok-attr">class="tok-tag">> |
| 781 |
María quiere decirle todo lo que siente,class="tok-tag"><brclass="tok-attr">class="tok-tag">> |
| 782 |
pero en inglés... las palabras se le escapan.class="tok-tag"><brclass="tok-attr">class="tok-tag">>class="tok-tag"><brclass="tok-attr">class="tok-tag">> |
| 783 |
class="tok-tag"><emclass="tok-attr">class="tok-tag">>Ayudala a encontrarlas.class="tok-tag"></emclass="tok-attr">class="tok-tag">> |
| 784 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 785 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 786 |
|
| 787 |
class="tok-tag"><buttonclass="tok-attr"> class="btn-start" onclick="startLesson()"class="tok-tag">> |
| 788 |
🌸 Ayudar a María |
| 789 |
class="tok-tag"></buttonclass="tok-attr">class="tok-tag">> |
| 790 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 791 |
|
| 792 |
|
| 793 |
class="tok-tag"><divclass="tok-attr"> class="screen" id="screen-lesson"class="tok-tag">> |
| 794 |
class="tok-tag"><divclass="tok-attr"> class="topbar"class="tok-tag">> |
| 795 |
class="tok-tag"><divclass="tok-attr"> class="brand"class="tok-tag">> |
| 796 |
class="tok-tag"><divclass="tok-attr"> class="brand-dot"class="tok-tag">>🦙class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 797 |
class="tok-tag"><divclass="tok-attr">class="tok-tag">> |
| 798 |
class="tok-tag"><divclass="tok-attr"> class="brand-name"class="tok-tag">>AlpacaViajesclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 799 |
class="tok-tag"><divclass="tok-attr"> class="brand-sub"class="tok-tag">>PLATAFORMA DE IDIOMASclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 800 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 801 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 802 |
class="tok-tag"><divclass="tok-attr"> class="lang-pill"class="tok-tag">>🇬🇧 Englishclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 803 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 804 |
|
| 805 |
class="tok-tag"><divclass="tok-attr"> class="lesson-topbar"class="tok-tag">> |
| 806 |
class="tok-tag"><divclass="tok-attr"> class="step-badge" id="step-badge"class="tok-tag">>Frase 1 de 8class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 807 |
class="tok-tag"><divclass="tok-attr"> class="hearts-score" id="hearts-score"class="tok-tag">>🤍🤍🤍🤍🤍🤍🤍🤍class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 808 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 809 |
|
| 810 |
class="tok-tag"><divclass="tok-attr"> class="prog-wrap"class="tok-tag">> |
| 811 |
class="tok-tag"><divclass="tok-attr"> class="prog-bar"class="tok-tag">> |
| 812 |
class="tok-tag"><divclass="tok-attr"> class="prog-fill" id="prog-fill" style="class="tok-prop">width:class="tok-val">0%";class="tok-tag">>class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 813 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 814 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 815 |
|
| 816 |
class="tok-tag"><divclass="tok-attr"> class="maria-wrap"class="tok-tag">> |
| 817 |
class="tok-tag"><divclass="tok-attr"> class="maria-av"class="tok-tag">>🌸class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 818 |
class="tok-tag"><divclass="tok-attr"> class="maria-bubble"class="tok-tag">> |
| 819 |
class="tok-tag"><divclass="tok-attr"> class="maria-name"class="tok-tag">>Maríaclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 820 |
class="tok-tag"><divclass="tok-attr"> class="maria-text" id="maria-text"class="tok-tag">>...class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 821 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 822 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 823 |
|
| 824 |
class="tok-tag"><divclass="tok-attr"> class="flip-area" onclick="revealCard()"class="tok-tag">> |
| 825 |
class="tok-tag"><divclass="tok-attr"> class="flip-inner" id="flip-inner"class="tok-tag">> |
| 826 |
class="tok-tag"><divclass="tok-attr"> class="flip-face flip-front"class="tok-tag">> |
| 827 |
class="tok-tag"><divclass="tok-attr"> class="card-tag"class="tok-tag">>PISTAclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 828 |
class="tok-tag"><divclass="tok-attr"> class="hint-emoji-big" id="hint-emoji"class="tok-tag">>💛class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 829 |
class="tok-tag"><divclass="tok-attr"> class="hint-desc" id="hint-desc"class="tok-tag">>...class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 830 |
class="tok-tag"><divclass="tok-attr"> class="tap-cue"class="tok-tag">>💬 tocá para ver la fraseclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 831 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 832 |
class="tok-tag"><divclass="tok-attr"> class="flip-face flip-back"class="tok-tag">> |
| 833 |
class="tok-tag"><divclass="tok-attr"> class="card-tag"class="tok-tag">>EN INGLÉSclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 834 |
class="tok-tag"><divclass="tok-attr"> class="en-phrase" id="en-phrase"class="tok-tag">>"I will always be your friend"class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 835 |
class="tok-tag"><divclass="tok-attr"> class="en-phonetic" id="en-phonetic"class="tok-tag">>ai wil OL-ways bi yor frendclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 836 |
class="tok-tag"><divclass="tok-attr"> class="en-meaning" id="en-meaning"class="tok-tag">>Siempre seré tu amigaclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 837 |
class="tok-tag"><divclass="tok-attr"> class="en-note" id="en-note"class="tok-tag">>class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 838 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 839 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 840 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 841 |
|
| 842 |
class="tok-tag"><divclass="tok-attr"> class="shania-react" id="shania-react"class="tok-tag">> |
| 843 |
✨ class="tok-tag"><spanclass="tok-attr"> id="react-text"class="tok-tag">>Shania reacciona...class="tok-tag"></spanclass="tok-attr">class="tok-tag">> |
| 844 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 845 |
|
| 846 |
class="tok-tag"><divclass="tok-attr"> class="answer-row"class="tok-tag">> |
| 847 |
class="tok-tag"><buttonclass="tok-attr"> class="btn-ans btn-forgot" id="btn-forgot" onclick="answer(false)" disabledclass="tok-tag">>✗ No la recuerdoclass="tok-tag"></buttonclass="tok-attr">class="tok-tag">> |
| 848 |
class="tok-tag"><buttonclass="tok-attr"> class="btn-ans btn-knew" id="btn-knew" onclick="answer(true)" disabledclass="tok-tag">>✓ La séclass="tok-tag"></buttonclass="tok-attr">class="tok-tag">> |
| 849 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 850 |
class="tok-tag"><buttonclass="tok-attr"> class="btn-reveal" onclick="revealCard()"class="tok-tag">>↺ ver la fraseclass="tok-tag"></buttonclass="tok-attr">class="tok-tag">> |
| 851 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 852 |
|
| 853 |
|
| 854 |
class="tok-tag"><divclass="tok-attr"> class="screen" id="screen-result"class="tok-tag">> |
| 855 |
class="tok-tag"><divclass="tok-attr"> class="topbar"class="tok-tag">> |
| 856 |
class="tok-tag"><divclass="tok-attr"> class="brand"class="tok-tag">> |
| 857 |
class="tok-tag"><divclass="tok-attr"> class="brand-dot"class="tok-tag">>🦙class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 858 |
class="tok-tag"><divclass="tok-attr">class="tok-tag">> |
| 859 |
class="tok-tag"><divclass="tok-attr"> class="brand-name"class="tok-tag">>AlpacaViajesclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 860 |
class="tok-tag"><divclass="tok-attr"> class="brand-sub"class="tok-tag">>PLATAFORMA DE IDIOMASclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 861 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 862 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 863 |
class="tok-tag"><divclass="tok-attr"> class="lang-pill"class="tok-tag">>🇬🇧 Englishclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 864 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 865 |
|
| 866 |
class="tok-tag"><divclass="tok-attr"> class="result-photo"class="tok-tag">> |
| 867 |
class="tok-tag"><divclass="tok-attr"> class="result-friends" id="res-friends"class="tok-tag">>🌸✨class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 868 |
class="tok-tag"><divclass="tok-attr"> class="result-title" id="res-title"class="tok-tag">>María lo dijo todoclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 869 |
class="tok-tag"><divclass="tok-attr"> class="result-msg" id="res-msg"class="tok-tag">>Y Shania lo entendió con el corazón.class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 870 |
class="tok-tag"><divclass="tok-attr"> class="stats-row"class="tok-tag">> |
| 871 |
class="tok-tag"><divclass="tok-attr"> class="stat-box"class="tok-tag">> |
| 872 |
class="tok-tag"><divclass="tok-attr"> class="stat-n" id="res-ok" style="class="tok-prop">color:class="tok-val">class="tok-kw">var(--rose)";class="tok-tag">>0class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 873 |
class="tok-tag"><divclass="tok-attr"> class="stat-l"class="tok-tag">>Recordadasclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 874 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 875 |
class="tok-tag"><divclass="tok-attr"> class="stat-box"class="tok-tag">> |
| 876 |
class="tok-tag"><divclass="tok-attr"> class="stat-n" id="res-miss" style="class="tok-prop">color:class="tok-val">class="tok-kw">var(--text-light)";class="tok-tag">>0class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 877 |
class="tok-tag"><divclass="tok-attr"> class="stat-l"class="tok-tag">>A repasarclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 878 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 879 |
class="tok-tag"><divclass="tok-attr"> class="stat-box"class="tok-tag">> |
| 880 |
class="tok-tag"><divclass="tok-attr"> class="stat-n" id="res-pct" style="class="tok-prop">color:class="tok-val">class="tok-kw">var(--amber)";class="tok-tag">>0%class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 881 |
class="tok-tag"><divclass="tok-attr"> class="stat-l"class="tok-tag">>Del corazónclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 882 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 883 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 884 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 885 |
|
| 886 |
class="tok-tag"><divclass="tok-attr"> class="shania-final"class="tok-tag">> |
| 887 |
class="tok-tag"><divclass="tok-attr"> class="shania-av-big"class="tok-tag">>✨class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 888 |
class="tok-tag"><divclass="tok-attr"> class="shania-msg" id="shania-final-msg"class="tok-tag">> |
| 889 |
"María me dijo class="tok-tag"><strongclass="tok-attr">class="tok-tag">>'I will always be your friend'class="tok-tag"></strongclass="tok-attr">class="tok-tag">> |
| 890 |
en el aeropuerto y me tuve que ir corriendo porque si no |
| 891 |
perdía el vuelo llorando. Eso es una amiga para siempre." 💛 |
| 892 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 893 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 894 |
|
| 895 |
class="tok-tag"><divclass="tok-attr"> class="phrases-card"class="tok-tag">> |
| 896 |
class="tok-tag"><divclass="tok-attr"> class="phrases-title"class="tok-tag">>✦ Las frases de Maríaclass="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 897 |
class="tok-tag"><divclass="tok-attr"> id="phrases-list"class="tok-tag">>class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 898 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 899 |
|
| 900 |
class="tok-tag"><buttonclass="tok-attr"> class="btn-start" onclick="restartGame()" style="class="tok-prop">width:class="tok-val">100%;class="tok-prop">justify-content:class="tok-val">center;"class="tok-tag">> |
| 901 |
↺ Practicar de nuevo |
| 902 |
class="tok-tag"></buttonclass="tok-attr">class="tok-tag">> |
| 903 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 904 |
|
| 905 |
class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 906 |
|
| 907 |
class="tok-tag"><scriptclass="tok-attr">class="tok-tag">> |
| 908 |
class="tok-kw">const phrases = [ |
| 909 |
{ |
| 910 |
class="tok-prop">maria: class="tok-val">';¿Cómo le digo que siempre voy a estar para ella, sin importar la distancia?', |
| 911 |
class="tok-prop">emoji: class="tok-val">';💛', |
| 912 |
class="tok-prop">hint: class="tok-val">';Una promesa que no caduca, que atraviesa océanos', |
| 913 |
class="tok-prop">en: class="tok-val">';"I will always be your friend"', |
| 914 |
class="tok-prop">phonetic: class="tok-val">';ai wil OL-ways bi yor frend', |
| 915 |
class="tok-prop">meaning: class="tok-val">';Siempre seré tu amiga', |
| 916 |
class="tok-prop">note: class="tok-val">';La promesa más simple y más poderosa.', |
| 917 |
class="tok-prop">react: class="tok-val">';✨ Shania cierra los ojos y sonríe. Eso era todo lo que necesitaba escuchar.', |
| 918 |
class="tok-prop">es: class="tok-val">';Siempre seré tu amiga' |
| 919 |
}, |
| 920 |
{ |
| 921 |
class="tok-prop">maria: class="tok-val">';Quiero preguntarle si me va a recordar... ¿cómo lo digo sin sonar triste?', |
| 922 |
class="tok-prop">emoji: class="tok-val">';🥹', |
| 923 |
class="tok-prop">hint: class="tok-val">';Una pregunta pequeña con un corazón enorme detrás', |
| 924 |
class="tok-prop">en: class="tok-val">';"Will you remember me?"', |
| 925 |
class="tok-prop">phonetic: class="tok-val">';wil yu ri-MEM-ber mi', |
| 926 |
class="tok-prop">meaning: class="tok-val">';¿Me vas a recordar?', |
| 927 |
class="tok-prop">note: class="tok-val">';No es tristeza — es querer saber que importás.', |
| 928 |
class="tok-prop">react: class="tok-val">';✨ Shania la mira y class="tok-prop">dice: class="tok-val">";Are you serious right now? Always."', |
| 929 |
class="tok-prop">es: class="tok-val">';¿Me vas a recordar?' |
| 930 |
}, |
| 931 |
{ |
| 932 |
class="tok-prop">maria: class="tok-val">';Las risas con ella son lo que más voy a extrañar... ¿cómo se lo digo?', |
| 933 |
class="tok-prop">emoji: class="tok-val">';😂', |
| 934 |
class="tok-prop">hint: class="tok-val">';La gratitud por todos los momentos de carcajadas', |
| 935 |
class="tok-prop">en: class="tok-val">';"I\'ve loved laughing with you"', |
| 936 |
class="tok-prop">phonetic: class="tok-val">';aiv LOVD LAF-ing wiz yu', |
| 937 |
class="tok-prop">meaning: class="tok-val">';Me encantó reírme contigo', |
| 938 |
class="tok-prop">note: class="tok-val">';Las risas compartidas son el mejor idioma.', |
| 939 |
class="tok-prop">react: class="tok-val">';✨ Shania se ríe y class="tok-prop">dice: class="tok-val">";Me too! Remember that time we—" y empiezan otra vez.', |
| 940 |
class="tok-prop">es: class="tok-val">';Me encantó reírme contigo' |
| 941 |
}, |
| 942 |
{ |
| 943 |
class="tok-prop">maria: class="tok-val">';Quiero que sepa que la hace todo mejor, que su presencia cambia las cosas...', |
| 944 |
class="tok-prop">emoji: class="tok-val">';🌟', |
| 945 |
class="tok-prop">hint: class="tok-val">';Cuando alguien ilumina todo lo que toca', |
| 946 |
class="tok-prop">en: class="tok-val">';"You make everything better"', |
| 947 |
class="tok-prop">phonetic: class="tok-val">';yu meik EV-ri-zing BE-ter', |
| 948 |
class="tok-prop">meaning: class="tok-val">';Hacés todo mejor', |
| 949 |
class="tok-prop">note: class="tok-val">';El mejor elogio que le podés dar a alguien.', |
| 950 |
class="tok-prop">react: class="tok-val">';✨ Shania la abraza sin decir nada. A veces el silencio lo dice todo.', |
| 951 |
class="tok-prop">es: class="tok-val">';Hacés todo mejor' |
| 952 |
}, |
| 953 |
{ |
| 954 |
class="tok-prop">maria: class="tok-val">';La distancia no nos va a separar... ¿cómo le digo eso con confianza?', |
| 955 |
class="tok-prop">emoji: class="tok-val">';✈️', |
| 956 |
class="tok-prop">hint: class="tok-val">';La distancia es solo geografía — no importa', |
| 957 |
class="tok-prop">en: class="tok-val">';"Distance means nothing to us"', |
| 958 |
class="tok-prop">phonetic: class="tok-val">';DIS-tens minz NO-zing tu as', |
| 959 |
class="tok-prop">meaning: class="tok-val">';La distancia no significa nada para nosotras', |
| 960 |
class="tok-prop">note: class="tok-val">';Porque la amistad real no necesita metros ni kilómetros.', |
| 961 |
class="tok-prop">react: class="tok-val">';✨ Shania asiente con conviccióclass="tok-prop">n: class="tok-val">";Exactly. Nothing."', |
| 962 |
class="tok-prop">es: class="tok-val">';La distancia no significa nada' |
| 963 |
}, |
| 964 |
{ |
| 965 |
class="tok-prop">maria: class="tok-val">';¿Cómo le prometo que vamos a hablar todos los días?', |
| 966 |
class="tok-prop">emoji: class="tok-val">';📱', |
| 967 |
class="tok-prop">hint: class="tok-val">';Una promesa cotidiana, pequeña y enorme a la vez', |
| 968 |
class="tok-prop">en: class="tok-val">';"We\'ll talk every single day"', |
| 969 |
class="tok-prop">phonetic: class="tok-val">';wil tok EV-ri SIN-gel dei', |
| 970 |
class="tok-prop">meaning: class="tok-val">';Vamos a hablar todos los días', |
| 971 |
class="tok-prop">note: class="tok-val">';Y lo van a cumplir. Eso es lo especial.', |
| 972 |
class="tok-prop">react: class="tok-val">';✨ Shania saca el teléfono y class="tok-prop">dice: class="tok-val">";Deal. Starting tomorrow. 8am my time."', |
| 973 |
class="tok-prop">es: class="tok-val">';Vamos a hablar todos los días' |
| 974 |
}, |
| 975 |
{ |
| 976 |
class="tok-prop">maria: class="tok-val">';Quiero decirle que el mundo se siente más pequeño y más lindo con ella en él...', |
| 977 |
class="tok-prop">emoji: class="tok-val">';🌍', |
| 978 |
class="tok-prop">hint: class="tok-val">';Cuando alguien hace que el mundo tenga más sentido', |
| 979 |
class="tok-prop">en: class="tok-val">';"The world is smaller with you in it"', |
| 980 |
class="tok-prop">phonetic: class="tok-val">';de world iz SMOL-er wiz yu in it', |
| 981 |
class="tok-prop">meaning: class="tok-val">';El mundo es más pequeño contigo en él', |
| 982 |
class="tok-prop">note: class="tok-val">';Más pequeño = más cercano, más tuyo, más nuestro.', |
| 983 |
class="tok-prop">react: class="tok-val">';✨ class="tok-prop">Shania: class="tok-val">";That\'s the most beautiful thing anyone has ever said to me."', |
| 984 |
class="tok-prop">es: class="tok-val">';El mundo es más pequeño contigo en él' |
| 985 |
}, |
| 986 |
{ |
| 987 |
class="tok-prop">maria: class="tok-val">';Y al final... quiero despedirme sin que suene a adiós. ¿Cómo?', |
| 988 |
class="tok-prop">emoji: class="tok-val">';🫂', |
| 989 |
class="tok-prop">hint: class="tok-val">';No es un adiós. Nunca lo fue. Nunca lo será.', |
| 990 |
class="tok-prop">en: class="tok-val">';"See you soon, my friend"', |
| 991 |
class="tok-prop">phonetic: class="tok-val">';si yu SUN mai frend', |
| 992 |
class="tok-prop">meaning: class="tok-val">';Hasta pronto, amiga mía', |
| 993 |
class="tok-prop">note: class="tok-val">';Porque entre ellas no existe el adiós — solo el "hasta pronto".', |
| 994 |
class="tok-prop">react: class="tok-val">';✨ Shania sonríe con los ojos class="tok-prop">brillantes: class="tok-val">";See you soon, María. Always."', |
| 995 |
class="tok-prop">es: class="tok-val">';Hasta pronto, amiga mía' |
| 996 |
} |
| 997 |
]; |
| 998 |
|
| 999 |
class="tok-kw">let current = 0; |
| 1000 |
class="tok-kw">let revealed = false; |
| 1001 |
class="tok-kw">let score = 0; |
| 1002 |
class="tok-kw">let results = []; |
| 1003 |
|
| 1004 |
|
| 1005 |
class="tok-kw">function updateHearts() { |
| 1006 |
class="tok-kw">const hearts = document.getElementById('hearts-score'); |
| 1007 |
class="tok-kw">let h = ''; |
| 1008 |
class="tok-kw">for (class="tok-kw">let i = 0; i < phrases.length; i++) { |
| 1009 |
class="tok-kw">if (i < results.length) { |
| 1010 |
h += results[i].knew ? '💛' : '🤍'; |
| 1011 |
} class="tok-kw">else { |
| 1012 |
h += '🤍'; |
| 1013 |
} |
| 1014 |
} |
| 1015 |
hearts.textContent = h; |
| 1016 |
} |
| 1017 |
|
| 1018 |
|
| 1019 |
class="tok-kw">function createHearts() { |
| 1020 |
class="tok-kw">const c = document.getElementById('hearts-container'); |
| 1021 |
class="tok-kw">const emojis = ['💛','🌸','✨','💕','🌟']; |
| 1022 |
class="tok-kw">for (class="tok-kw">let i = 0; i < 12; i++) { |
| 1023 |
class="tok-kw">const h = document.createElement('div'); |
| 1024 |
h.className = 'heart'; |
| 1025 |
h.textContent = emojis[Math.floor(Math.random() * emojis.length)]; |
| 1026 |
h.style.cssText = ` |
| 1027 |
class="tok-prop">left: class="tok-val">${Math.random()*100}vw; |
| 1028 |
class="tok-prop">animation-duration: class="tok-val">${10 + Math.random()*12}s; |
| 1029 |
class="tok-prop">animation-delay: class="tok-val">${Math.random()*15}s; |
| 1030 |
class="tok-prop">font-size: class="tok-val">${10 + Math.random()*10}px; |
| 1031 |
`; |
| 1032 |
c.appendChild(h); |
| 1033 |
} |
| 1034 |
} |
| 1035 |
|
| 1036 |
class="tok-kw">function startLesson() { |
| 1037 |
current = 0; score = 0; revealed = false; results = []; |
| 1038 |
loadPhrase(0); |
| 1039 |
showScreen('screen-lesson'); |
| 1040 |
} |
| 1041 |
|
| 1042 |
class="tok-kw">function showScreen(id) { |
| 1043 |
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active')); |
| 1044 |
document.getElementById(id).classList.add('active'); |
| 1045 |
} |
| 1046 |
|
| 1047 |
class="tok-kw">function loadPhrase(idx) { |
| 1048 |
class="tok-kw">const p = phrases[idx]; |
| 1049 |
revealed = false; |
| 1050 |
|
| 1051 |
document.getElementById('maria-text').textContent = p.maria; |
| 1052 |
document.getElementById('hint-emoji').textContent = p.emoji; |
| 1053 |
document.getElementById('hint-desc').textContent = p.hint; |
| 1054 |
document.getElementById('en-phrase').textContent = p.en; |
| 1055 |
document.getElementById('en-phonetic').textContent = p.phonetic; |
| 1056 |
document.getElementById('en-meaning').textContent = p.meaning; |
| 1057 |
document.getElementById('en-note').textContent = p.note; |
| 1058 |
document.getElementById('react-text').textContent = p.react; |
| 1059 |
document.getElementById('step-badge').textContent = `Frase ${idx+1} de ${phrases.length}`; |
| 1060 |
|
| 1061 |
document.getElementById('flip-inner').classList.remove('flipped'); |
| 1062 |
document.getElementById('btn-knew').disabled = true; |
| 1063 |
document.getElementById('btn-forgot').disabled = true; |
| 1064 |
|
| 1065 |
class="tok-kw">const pct = Math.round((idx / phrases.length) * 100); |
| 1066 |
document.getElementById('prog-fill').style.width = pct + '%'; |
| 1067 |
updateHearts(); |
| 1068 |
} |
| 1069 |
|
| 1070 |
class="tok-kw">function revealCard() { |
| 1071 |
class="tok-kw">if (revealed) class="tok-kw">return; |
| 1072 |
revealed = true; |
| 1073 |
document.getElementById('flip-inner').classList.add('flipped'); |
| 1074 |
document.getElementById('btn-knew').disabled = false; |
| 1075 |
document.getElementById('btn-forgot').disabled = false; |
| 1076 |
} |
| 1077 |
|
| 1078 |
class="tok-kw">function answer(knew) { |
| 1079 |
class="tok-kw">if (!revealed) class="tok-kw">return; |
| 1080 |
class="tok-kw">const p = phrases[current]; |
| 1081 |
results.push({ class="tok-prop">phrase: class="tok-val">p, knew }); |
| 1082 |
|
| 1083 |
class="tok-kw">if (knew) { |
| 1084 |
score++; |
| 1085 |
} class="tok-kw">else { |
| 1086 |
class="tok-kw">const area = document.querySelector('.flip-area'); |
| 1087 |
area.classList.add('shake'); |
| 1088 |
setTimeout(() => area.classList.remove('shake'), 450); |
| 1089 |
} |
| 1090 |
|
| 1091 |
current++; |
| 1092 |
class="tok-kw">if (current >= phrases.length) { |
| 1093 |
setTimeout(showResult, 400); |
| 1094 |
} class="tok-kw">else { |
| 1095 |
setTimeout(() => loadPhrase(current), 350); |
| 1096 |
} |
| 1097 |
} |
| 1098 |
|
| 1099 |
class="tok-kw">function showResult() { |
| 1100 |
class="tok-kw">const pct = Math.round((score / phrases.length) * 100); |
| 1101 |
class="tok-kw">const missed = phrases.length - score; |
| 1102 |
|
| 1103 |
document.getElementById('res-ok').textContent = score; |
| 1104 |
document.getElementById('res-miss').textContent = missed; |
| 1105 |
document.getElementById('res-pct').textContent = pct + '%'; |
| 1106 |
|
| 1107 |
class="tok-kw">let friends, title, msg, shania; |
| 1108 |
|
| 1109 |
class="tok-kw">if (pct === 100) { |
| 1110 |
friends = '🌸✨'; |
| 1111 |
title = 'María lo dijo todo — y perfecto'; |
| 1112 |
msg = 'Cada palabra llegó exactamente donde tenía que llegar.'; |
| 1113 |
shania = '"María me dijo todo en inglés y lo entendí con el corazón antes que con la cabeza. Eso es lo que hacen las amigas de verdad. class="tok-tag"><strongclass="tok-attr">class="tok-tag">>See you soon, always.class="tok-tag"></strongclass="tok-attr">class="tok-tag">> 💛"'; |
| 1114 |
} class="tok-kw">else class="tok-kw">if (pct >= 60) { |
| 1115 |
friends = '🌸💛'; |
| 1116 |
title = 'María encontró las palabras'; |
| 1117 |
msg = 'No todas, pero las que importaban. Shania lo entendió igual.'; |
| 1118 |
shania = '"No importa si el inglés es perfecto. Lo que importa es que lo intentó por mí. Eso lo dice todo. class="tok-tag"><strongclass="tok-attr">class="tok-tag">>See you soon.class="tok-tag"></strongclass="tok-attr">class="tok-tag">> ✨"'; |
| 1119 |
} class="tok-kw">else { |
| 1120 |
friends = '🌸🤍'; |
| 1121 |
title = 'María necesita más práctica'; |
| 1122 |
msg = 'Pero Shania ya sabe todo lo que María siente — sin palabras también.'; |
| 1123 |
shania = '"María no necesita el inglés perfecto para que yo sepa que me quiere. Igual vuelvo a practicar con ella. class="tok-tag"><strongclass="tok-attr">class="tok-tag">>Promise.class="tok-tag"></strongclass="tok-attr">class="tok-tag">> 🌸"'; |
| 1124 |
} |
| 1125 |
|
| 1126 |
document.getElementById('res-friends').textContent = friends; |
| 1127 |
document.getElementById('res-title').textContent = title; |
| 1128 |
document.getElementById('res-msg').textContent = msg; |
| 1129 |
document.getElementById('shania-final-msg').innerHTML = shania; |
| 1130 |
document.getElementById('prog-fill').style.width = '100%'; |
| 1131 |
|
| 1132 |
|
| 1133 |
class="tok-kw">const list = document.getElementById('phrases-list'); |
| 1134 |
list.innerHTML = ''; |
| 1135 |
results.forEach((r, i) => { |
| 1136 |
class="tok-kw">const row = document.createElement('div'); |
| 1137 |
row.className = 'phrase-row'; |
| 1138 |
row.style.animationDelay = (i * 0.12) + 's'; |
| 1139 |
row.innerHTML = ` |
| 1140 |
class="tok-tag"><divclass="tok-attr"> class="phrase-check"class="tok-tag">>${r.knew ? '💛' : '🤍'}class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 1141 |
class="tok-tag"><divclass="tok-attr"> class="phrase-en"class="tok-tag">>${r.phrase.en}class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 1142 |
class="tok-tag"><divclass="tok-attr"> class="phrase-es"class="tok-tag">>${r.phrase.es}class="tok-tag"></divclass="tok-attr">class="tok-tag">> |
| 1143 |
`; |
| 1144 |
list.appendChild(row); |
| 1145 |
}); |
| 1146 |
|
| 1147 |
showScreen('screen-result'); |
| 1148 |
} |
| 1149 |
|
| 1150 |
class="tok-kw">function restartGame() { |
| 1151 |
showScreen('screen-intro'); |
| 1152 |
} |
| 1153 |
|
| 1154 |
createHearts(); |
| 1155 |
class="tok-tag"></scriptclass="tok-attr">class="tok-tag">> |
| 1156 |
class="tok-tag"></bodyclass="tok-attr">class="tok-tag">> |
| 1157 |
class="tok-tag"></htmlclass="tok-attr">class="tok-tag">> |
| 1158 |
|