1 2 3 4 5<!DOCTYPE html> 6 7<html lang="en" class="" style="min-height: 100%;display: flex;flex-direction: column;"> <!-- class="has-background-light" --> 8 9 10 11 12<head> 13 14 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 15 16 <meta charset="utf-8"> 17 18 <title> 19 20 Help Center | Bravoboard 21 22 </title> 23 24 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 25 <meta name="format-detection" content="telephone=no"> 26 <meta name="theme-color" content="#ffffff"> 27 <meta name="msapplication-TileColor" content="#bfe6ff"> 28 29 30 <meta name="description" content="Help Center for Bravoboard: accounts, subscriptions, boards, Team Plan features (required contributor info, contributor questions, CSV), privacy, and more."> 31 <meta property="og:title" content="Help Center | Bravoboard"> 32 <meta name="twitter:title" content="Help Center | Bravoboard"> 33 <meta property="og:description" content="Help Center for Bravoboard: accounts, subscriptions, boards, Team Plan features (required contributor info, contributor questions, CSV), privacy, and more."> 34 <meta name="twitter:description" content="Bravoboard Help Center: accounts, boards, Team Plan (contributor info & questions, CSV), and more."> 35 <meta property="og:url" content="https://www.bravoboard.xyz/help/"> 36 <link rel="canonical" href="https://www.bravoboard.xyz/help/"> 37 <meta property="og:type" content="website"> 38 39 40 41 42 <meta property="og:locale" content="en_US"> 43 <meta property="og:locale:alternate" content="en_CA"> 44 <meta property="og:locale:alternate" content="en_GB"> 45 <meta property="og:locale:alternate" content="en_AU"> 46 <meta property="og:locale:alternate" content="en_NZ"> 47 48 <meta property="twitter:card" content="summary_large_image"> 49 <meta property="twitter:site" content="@thebravoboardteam"> 50 <meta name="author" content="The Bravoboard Team"> 51 52 <meta data-key="og:image:width:fb" property="og:image:width" content="200"> 53 <meta data-key="og:image:height:fb" property="og:image:height" content="200"> 54 <meta data-key="og:image:width:li" property="og:image:width" content="200"> 55 <meta data-key="og:image:height:li" property="og:image:height" content="200"> 56 57 <!-- Google Fonts --> 58 <link rel="preconnect" href="https://fonts.googleapis.com"> 59 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 60 <!-- FONT IMPORTS HERE --> 61 <!-- Fonts: Group 1 --> 62 <link href="https://fonts.googleapis.com/css2?family=Poetsen+One&family=Dancing+Script:wght@400;700&family=Pacifico&family=Jacquard+24&family=Jersey+10&family=Shadows+Into+Light&family=Freeman&family=Briem+Hand&family=Satisfy&family=Great+Vibes&display=swap" rel="stylesheet"> 63 <!-- Fonts: Group 2 --> 64 <link href="https://fonts.googleapis.com/css2?family=Titan+One&family=Concert+One&family=Permanent+Marker&family=Yellowtail&family=Sofia&family=Gochi+Hand&family=Mali&family=Danfo&family=Lilita+One&family=Sedan+SC&display=swap" rel="stylesheet"> 65 <!-- Fonts: Group 3 --> 66 <link href="https://fonts.googleapis.com/css2?family=Zen+Dots&family=Righteous&family=Sacramento&family=Gloria+Hallelujah&family=Bangers&family=Tourney&family=Luckiest+Guy&family=Courgette&family=Alfa+Slab+One&family=Protest+Riot&display=swap" rel="stylesheet"> 67 <!-- Fonts: Group 4 --> 68 <link href="https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&family=Press+Start+2P&family=Protest+Guerrilla&display=swap" rel="stylesheet"> 69 <!-- FONT IMPORTS HERE --> 70 71 <!-- Stylesheets --> 72 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> 73 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css"> 74 <style onload="this.media='all'"> 75 76 /* Pricing plan-item custom */ 77 78 .pricing-table .pricing-plan .plan-item { 79 background: whitesmoke; 80 font-size: .9em; 81 color: #7a7a7a; 82 margin: 16px; 83 margin-bottom: 3px; 84 margin-top: 3px; 85 border-radius: 12px; 86 } 87 /* Pricing plan-item custom */ 88 89 /* custom rounded img previews */ 90 .image.is-128x128 { 91 border-radius:999px !important 92 } 93 /* custom rounded img previews */ 94 95 /* glass */ 96 97 .glass { 98 backdrop-filter: blur(18px) saturate(180%) !important; 99 -webkit-backdrop-filter: blur(18px) saturate(180%) !important; 100 border-radius: 7px; 101 position: sticky; 102 top: 55px; 103 z-index: 9; 104 overflow: hidden; /* keep shine inside corners */ 105 isolation: isolate; 106 background: linear-gradient(180deg, rgba(224, 230, 239, 0.8) 0%, rgba(191, 200, 216, 0.8) 57.59%, rgba(214, 218, 227, 0.8) 100%) !important; 107 box-shadow:inset 0 -2px 3px rgba(63,63,90,.08),inset 0 2px 4px rgba(255,255,255,.3),inset 0 1px 2px rgba(255,255,255,.25); 108 } 109 /* glass */ 110 111 112 /* Sticky top nav */ 113 .top-nav { 114 position: sticky; 115 top: 0; 116 z-index: 1; 117 backface-visibility: hidden; 118 -webkit-backface-visibility: hidden; 119 } 120 /* Sticky top nav */ 121 122 /* skip-link usability START*/ 123 124 .skip-link { 125 position: absolute; 126 top: -40px; 127 left: 0; 128 background: #000; 129 color: #fff; 130 padding: 8px 12px; 131 z-index: 1000; 132 text-decoration: none; 133 font-weight: bold; 134 } 135 .skip-link:focus { 136 top: 0; 137 } 138 139 /* skip-link usability END */ 140 141 /* checkbox effect - START */ 142 .checkbox-wrapper-5 .check { 143 --size: 40px; 144 position: relative; 145 background: rgba(110,231,183,0.55); 146 line-height: 0; 147 perspective: 400px; 148 font-size: var(--size); 149 } 150 151 .checkbox-wrapper-5 .check input[type="checkbox"], 152 .checkbox-wrapper-5 .check label, 153 .checkbox-wrapper-5 .check label::before, 154 .checkbox-wrapper-5 .check label::after, 155 .checkbox-wrapper-5 .check { 156 appearance: none; 157 display: inline-block; 158 border-radius: var(--size); 159 border: 0; 160 transition: .35s ease-in-out; 161 box-sizing: border-box; 162 cursor: pointer; 163 } 164 165 .checkbox-wrapper-5 .check label { 166 width: calc(2.2 * var(--size)); 167 height: var(--size);
168 background: #d7d7d7; 169 overflow: hidden; 170 } 171 172 .checkbox-wrapper-5 .check input[type="checkbox"] { 173 position: absolute; 174 z-index: 1; 175 width: calc(.8 * var(--size)); 176 height: calc(.8 * var(--size)); 177 top: calc(.1 * var(--size)); 178 left: calc(.1 * var(--size)); 179 background: linear-gradient(45deg, #dedede, #ffffff); 180 box-shadow: 0 6px 7px rgba(0,0,0,0.3); 181 outline: none; 182 margin: 0; 183 } 184 185 .checkbox-wrapper-5 .check input[type="checkbox"]:checked { 186 left: calc(1.3 * var(--size)); 187 } 188 189 .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label { 190 background: transparent; 191 } 192 193 .checkbox-wrapper-5 .check label::before, 194 .checkbox-wrapper-5 .check label::after { 195 content: "· ·"; 196 position: absolute; 197 overflow: hidden; 198 left: calc(.15 * var(--size)); 199 top: calc(.5 * var(--size)); 200 height: var(--size); 201 letter-spacing: calc(-0.04 * var(--size)); 202 color: #9b9b9b; 203 font-family: "Times New Roman", serif; 204 z-index: 2; 205 font-size: calc(.6 * var(--size)); 206 border-radius: 0; 207 transform-origin: 0 0 calc(-0.5 * var(--size)); 208 backface-visibility: hidden; 209 } 210 211 .checkbox-wrapper-5 .check label::after { 212 content: "â"; 213 top: calc(.65 * var(--size)); 214 left: calc(.2 * var(--size)); 215 height: calc(.1 * var(--size)); 216 width: calc(.35 * var(--size)); 217 font-size: calc(.2 * var(--size)); 218 transform-origin: 0 0 calc(-0.4 * var(--size)); 219 } 220 221 .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::before, 222 .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after { 223 left: calc(1.55 * var(--size)); 224 top: calc(.4 * var(--size)); 225 line-height: calc(.1 * var(--size)); 226 transform: rotateY(360deg); 227 } 228 229 .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after { 230 height: calc(.16 * var(--size)); 231 top: calc(.55 * var(--size)); 232 left: calc(1.6 * var(--size)); 233 font-size: calc(.6 * var(--size)); 234 line-height: 0; 235 } 236 237 /* checkbox effect - END */ 238 239 /* upgrade to unlimited button - START */ 240 .pushable { 241 position: relative; 242 background: transparent; 243 padding: 0px; 244 border: none; 245 cursor: pointer; 246 outline-offset: 4px; 247 outline-color: deeppink; 248 transition: filter 250ms; 249 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 250 } 251 252 .shadow { 253 position: absolute; 254 top: 0; 255 left: 0; 256 height: 100%; 257 width: 100%; 258 background: hsl(226, 25%, 69%); 259 border-radius: 8px; 260 filter: blur(2px); 261 will-change: transform; 262 transform: translateY(2px); 263 transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); 264 } 265 266 .edge { 267 position: absolute; 268 top: 0; 269 left: 0; 270 height: 100%; 271 width: 100%; 272 border-radius: 8px; 273 background: linear-gradient( 274 to right, 275 hsl(248, 39%, 39%) 0%, 276 hsl(248, 39%, 49%) 8%, 277 hsl(248, 39%, 39%) 92%, 278 hsl(248, 39%, 29%) 100% 279 ); 280 } 281 282 .front { 283 display: block; 284 position: relative; 285 border-radius: 8px; 286 background: hsl(248, 53%, 58%); 287 padding: 8px 16px; 288 color: white; 289 font-weight: 600; 290 font-size: 0.8rem; 291 transform: translateY(-4px); 292 transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); 293 } 294 295 .pushable:hover { 296 filter: brightness(110%); 297 } 298 299 .pushable:hover .front { 300 transform: translateY(-6px); 301 transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); 302 } 303 304 .pushable:active .front { 305 transform: translateY(-2px); 306 transition: transform 34ms; 307 } 308 309 .pushable:hover .shadow { 310 transform: translateY(4px);
311 transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); 312 } 313 314 .pushable:active .shadow { 315 transform: translateY(1px); 316 transition: transform 34ms; 317 } 318 319 .pushable:focus:not(:focus-visible) { 320 outline: none; 321 } 322 /* upgrade to unlimited button - END */ 323 324 /* Start text animations and effect */ 325 326 .txt-l1 { 327 animation: l1 1s linear infinite alternate; 328 } 329 @keyframes l1 {to{opacity: 0}} 330 331 .txt-l2 { 332 background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat; 333 animation: l2 2s linear infinite; 334 } 335 @keyframes l2 {to{background-size: 100% 3px}} 336 337 .txt-l3 { 338 background: repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 200% 100%/200% 3px no-repeat; 339 animation: l3 2s steps(6) infinite; 340 } 341 @keyframes l3 {to{background-position: 80% 100%}} 342 343 .txt-l5 { 344 clip-path: inset(0 100% 0 0); 345 animation: l5 2s steps(11) infinite; 346 } 347 @keyframes l5 {to{clip-path: inset(0 -1ch 0 0)}} 348 349 .txt-l6 { 350 overflow: hidden; 351 text-shadow: 0 0 var(--c),11ch 0 var(--c); 352 animation: l6 2s infinite linear; 353 } 354 @keyframes l6 {to{text-shadow:-11ch 0 #fff,0ch 0 #fff}} 355 356 357 .txt-anaglyphic { 358 color: #f9689a!important; 359 text-shadow: -3px -3px 0 #77caff; 360 } 361 362 .txt-embedded { 363 color: #000!important; 364 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.20); 365 } 366 367 .txt-embossed { 368 color: #f9f9!important; 369 text-shadow: 370 -1px -1px 1px rgba(255, 255, 255, 0.30), 371 1px 1px 1px rgba(0, 0, 0, 0.20); 372 } 373 374 .txt-neon { 375 color: rgba(255, 255, 255, 0)!important; 376 text-shadow: 377 0 0 2px #ffffff, 378 0 0 15px #70ffff, 379 0 0 20px #46fdff, 380 0 0 40px #46fdff; 381 } 382 383 .txt-fire { 384 color: rgba(255, 255, 255, 0)!important; 385 text-shadow: 386 0 0 1px #ffffff, 387 0 -3px 5px #fffc00, 388 0 -8px 15px #ff983d, 389 0 -15px 30px #ff983d; 390 } 391 392 .txt-retro { 393 color: #facd94!important; 394 text-shadow: 395 2px 2px 0 #333333, 396 4px 4px 0 #868686; 397 } 398 399 .txt-blurred { 400 color: rgba(255, 255, 255, 0)!important; 401 text-shadow: 402 0 0 5px rgba(255, 255, 255, .6), 403 0 0 15px rgba(255, 255, 255, .6), 404 0 0 50px rgba(255, 255, 255, .6); 405 } 406 407 .txt-gradient { 408 background: -webkit-linear-gradient(top, #444444 0%,#a2a2a2 100%); /* Chrome10+,Safari5.1+ */ 409 -webkit-background-clip:text; 410 -webkit-text-fill-color:transparent; 411 } 412 413 .txt-golden { 414 background: -webkit-linear-gradient(top, #f9d400 15%,#f89b00 35%,#f9d400 70%); /* Chrome10+,Safari5.1+ */ 415 -webkit-background-clip:text; 416 -webkit-text-fill-color:transparent; 417 } 418 419 /* rainbow glitch */ 420 .txt-rainbowGlitch { 421 animation: border-rainbow 2s ease-in-out infinite, glitch 0.2s ease infinite; 422 } 423 @keyframes border-rainbow { 424 0%, 425 100% { 426 transform: rotateX(0deg) rotateY(0deg); 427 } 428 25% { 429 transform: rotateX(2deg) rotateY(2deg); 430 } 431 75% { 432 transform: rotateX(-2deg) rotateY(-2deg); 433 } 434 } 435 @keyframes glitch { 436 0% { 437 text-shadow: 2px 2px #ff0000, -2px -2px #00ff00; 438 } 439 25% { 440 text-shadow: -2px 2px #ff00ff, 2px -2px #00ffff; 441 } 442 50% { 443 text-shadow: 2px -2px #ffff00, -2px 2px #0000ff; 444 } 445 75% { 446 text-shadow: -2px -2px #ff0000, 2px 2px #00ff00; 447 } 448 100% { 449 text-shadow: 2px 2px #ff0000, -2px -2px #00ff00; 450 } 451 } 452 /* rainbow glitch */ 453 454 /* Simple Glow */ 455 .txt-simpleGlow { 456 color: #3498db!important; 457 text-shadow: 0 0 10px #3498db; 458 animation: txt_glow_anim 2s infinite alternate; 459 } 460 @keyframes txt_glow_anim { 461 from { 462 text-shadow: 0 0 10px #3498db, 0 0 20px #3498db; 463 } 464 to { 465 text-shadow: 0 0 20px #3498db, 0 0 30px #3498db; 466 } 467 } 468 /* Simple Glow */ 469 470 /* Txt Bounce */ 471 .txt-bounce{ 472 color: #e74c3c!important; 473 animation: txt_amin_bounce 1s infinite alternate; 474 } 475 @keyframes txt_amin_bounce { 476 from { 477 transform: translateY(0); 478 } 479 to { 480 transform: translateY(-20px); 481 } 482 } 483 /* Txt Bounce */ 484 485 /* Txt Rainbow */ 486 .txt-rainbow { 487 background: linear-gradient(90deg, #e91e63, #ffeb3b, #2196f3, #4caf50); 488 -webkit-background-clip: text; 489 color: transparent!important; 490 animation: txt-amin-rainbow 1s infinite linear; 491 } 492 493 @keyframes txt-amin-rainbow { 494 from { 495 background-position: 0%; 496 } 497 to { 498 background-position: 100%; 499 } 500 } 501 /* Txt Rainbow */ 502 503 /* Txt Flicker */ 504 .txt-flicker { 505 color: #f39c12!important; 506 text-shadow: 0 0 5px #f39c12, 0 0 10px #f39c12; 507 animation: txt-anim-flicker 3s infinite steps(1); 508 } 509 @keyframes txt-anim-flicker { 510 50% { 511 opacity: 0.5; 512 } 513 } 514 /* Txt Flicker */ 515 516 /* Txt Wave */ 517 .txt-wave { 518 color: #2ecc71!important; 519 animation: txt-anim-wave 2s infinite linear; 520 } 521 @keyframes txt-anim-wave { 522 0%, 523 100% { 524 transform: rotate(0deg); 525 } 526 50% { 527 transform: rotate(10deg); 528 } 529 } 530 /* Txt Wave */ 531 532 /* Text Shadow Move */ 533 .txt-shadowMove { 534 color: #9b59b6!important; 535 text-shadow: 2px 2px 0 #333, 4px 4px 0 #555; 536 animation: txt-anim-shadowMove 3s infinite; 537 } 538 539 @keyframes txt-anim-shadowMove { 540 0%, 541 100% { 542 text-shadow: 2px 2px 0 #333, 4px 4px 0 #555; 543 } 544 50% { 545 text-shadow: 6px 6px 0 #333, 8px 8px 0 #555; 546 } 547 } 548 /* Text Shadow Move */ 549 550 /* Txt Outline Pulse */ 551 .txt-outlinePulse { 552 color: transparent!important; 553 font-weight: bold; 554 -webkit-text-stroke: 2px #2980b9; 555 animation: txt-anim-outlinePulse 2s infinite alternate; 556 } 557 558 @keyframes txt-anim-outlinePulse { 559 from { 560 -webkit-text-stroke: 2px #2980b9; 561 } 562 to { 563 -webkit-text-stroke: 4px #2980b9; 564 } 565 } 566 /* Txt Outline Pulse */ 567 568 /* Neon Glow */ 569 .txt-neonGlow { 570 color: #d35400!important; 571 text-shadow: 0 0 5px #d35400, 0 0 10px #e67e22, 0 0 15px #f39
571c12; 572 animation: txt-anim-neonPulse 1.5s infinite alternate; 573 } 574 575 @keyframes txt-anim-neonPulse { 576 from { 577 text-shadow: 0 0 5px #d35400, 0 0 15px #e67e22; 578 } 579 to { 580 text-shadow: 0 0 10px #e67e22, 0 0 20px #f39c12; 581 } 582 } 583 584 /* Scale */ 585 .txt-scale { 586 color: #8e44ad!important; 587 animation: txt-anim-scaleUpDown 1s infinite alternate; 588 } 589 590 @keyframes txt-anim-scaleUpDown { 591 from { 592 transform: scale(1); 593 } 594 to { 595 transform: scale(1.1); 596 } 597 } 598 599 .txt-threeD { 600 color: #b50e00; 601 text-shadow: 602 1px 1px 0 #510300, 603 2px 2px 0 #510300, 604 3px 3px 0 #510300, 605 4px 4px 0 #510300, 606 5px 5px 0 #510300, 607 6px 6px 0 #510300, 608 7px 7px 0 #510300; 609 } 610 611 /* IMPORTANT: move effects using the same bubble-text anim */ 612 .txt-rainbowMove { 613 width: fit content; 614 font-size: 8rem; 615 color: blue; 616 background-image: url("https://d1e7moeca5rg6t.cloudfront.net/static/occasions/bg/birthday/rainbow.jpeg"); 617 background-size: 150%; 618 -webkit-text-fill-color: transparent; 619 -webkit-background-clip: text; 620 animation: bubble-text 20s linear infinite; 621 -webkit-text-stroke: 0.5px white; 622 } 623 .txt-starsMovetxt-starsMove { 624 width: fit content; 625 font-size: 8rem; 626 color: blue; 627 background-image: url("https://d1e7moeca5rg6t.cloudfront.net/static/occasions/bg/birthday/bday_7.jpg"); 628 background-size: 150%; 629 -webkit-text-fill-color: transparent; 630 -webkit-background-clip: text; 631 animation: bubble-text 20s linear infinite; 632 -webkit-text-stroke: 0.5px white; 633 } 634 .txt-sandsMove { 635 width: fit content; 636 font-size: 8rem; 637 color: blue; 638 background-image: url("https://d1e7moeca5rg6t.cloudfront.net/static/patterns/p11.jpeg"); 639 background-size: 150%; 640 -webkit-text-fill-color: transparent; 641 -webkit-background-clip: text; 642 animation: bubble-text 20s linear infinite; 643 -webkit-text-stroke: 0.5px white; 644 } 645 .txt-candyWave { 646 width: fit content; 647 font-size: 8rem; 648 color: blue; 649 background-image: url("https://d1e7moeca5rg6t.cloudfront.net/static/curated/bg/art/candy_wave.jpg"); 650 background-size: 150%; 651 -webkit-text-fill-color: transparent; 652 -webkit-background-clip: text; 653 animation: bubble-text 20s linear infinite; 654 -webkit-text-stroke: 0.5px white; 655 } 656 .txt-ginkoElegance { 657 width: fit content; 658 font-size: 8rem; 659 color: blue; 660 background-image: url("https://d1e7moeca5rg6t.cloudfront.net/static/curated/bg/art/az10.jpg"); 661 background-size: 150%; 662 -webkit-text-fill-color: transparent; 663 -webkit-background-clip: text; 664 animation: bubble-text 20s linear infinite; 665 -webkit-text-stroke: 0.5px white; 666 } 667 @keyframes bubble-text { 668 0% { 669 background-position: 0%; 670 } 671 100% { 672 background-position: 300%; 673 } 674 } 675 /* IMPORTANT: move effects using the same bubble-text anim */ 676 677 678 679 680 681 682 683 684 685 686 687 /* End text animations and effect */ 688 689 /* hide horiz scrollbar */ 690 ::-webkit-scrollbar {
691 display: none; 692 } 693 694 .scrollable-content { 695 overflow-x: scroll; 696 overflow-y: hidden; 697 -ms-overflow-style: none; /* IE and Edge */ 698 scrollbar-width: none; /* Firefox */ 699 } 700 701 /* hide horiz scrollbar */ 702 703 /* vm progress circle */ 704 705 .vm-autoplay-progress { 706 position: absolute; 707 right: 16px; 708 bottom: 16px; 709 z-index: 10; 710 width: 48px; 711 height: 48px; 712 display: flex; 713 align-items: center; 714 justify-content: center; 715 font-weight: bold; 716 color: #fff; 717 } 718 719 .vm-autoplay-progress svg { 720 --progress: 0; 721 position: absolute; 722 left: 0; 723 top: 0px; 724 z-index: 10; 725 width: 100%; 726 height: 100%; 727 stroke-width: 7px; 728 stroke: #fff; 729 fill: none; 730 stroke-dashoffset: calc(125.6px * (1 - var(--progress))); 731 stroke-dasharray: 125.6; 732 transform: rotate(-90deg); 733 } 734 /* vm progress circle */ 735 736 737 /* blink */ 738 .blink { 739 animation: move-left-right 2s linear infinite; 740 } 741 742 @keyframes move-left-right { 743 0% { transform: translateX(-10px); } 744 50% { transform: translateX(0); } 745 100% { transform: translateX(-10px); } 746 } 747 748 /* blink */ 749 750 751 /* hover grow */ 752 .hover-grow { 753 transition: transform 0.3s ease, border 0.3s ease; 754 border: 3px solid #ccc; 755 } 756 757 .hover-grow:hover { 758 transform: scale(1.1); 759 border-color: #333; 760 z-index:1; 761 } 762 /* hover grow */ 763 /* swiper presentation mode */ 764 765 .autoplay-progress { 766 position: absolute; 767 right: 16px; 768 bottom: 16px; 769 z-index: 10; 770 width: 48px; 771 height: 48px; 772 display: flex; 773 align-items: center; 774 justify-content: center; 775 font-weight: bold; 776 //color: var(--swiper-theme-color); 777 color: #151515; 778 } 779 780 .autoplay-progress svg { 781 --progress: 0; 782 position: absolute; 783 left: 0; 784 top: 0px; 785 z-index: 10; 786 width: 100%; 787 height: 100%; 788 stroke-width: 4px; 789 //stroke: var(--swiper-theme-color); 790 stroke: #151515; 791 fill: none; 792 stroke-dashoffset: calc(125.6px * (1 - var(--progress))); 793 stroke-dasharray: 125.6; 794 transform: rotate(-90deg); 795 } 796 /* swiper presentation mode */ 797 798 /* swal 2 confirm and cancel button borders */ 799 800 .swal2-cancel, .swal2-confirm { 801 border-radius:16px !important; 802 } 803 804 .swal2-cancel { 805 background:#333 !important; 806 } 807 808 .swal2-confirm { 809 background:#151515 !important; 810 } 811 812 /* Dashboard lock/unlock board SweetAlert (bb-lock) â load once, not on archive click */ 813 .swal2-popup.bb-lock { 814 background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); 815 backdrop-filter: blur(14px) saturate(120%); 816 -webkit-backdrop-filter: blur(14px) saturate(120%); 817 border: 1px solid rgba(255,255,255,.18); 818 box-shadow: 0 18px 60px rgba(0,0,0,.45); 819 border-radius: 22px; 820 padding: 32px 28px 26px; 821 color:#e9eaf3; 822 } 823 .swal2-title.bb-lock__title{ 824 margin: 0 0 12px; 825 font-size: 22px; font-weight: 800; line-height:1.25; text-align:center; 826 background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); 827 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; 828 } 829 .bb-lock__body{ 830 text-align:center; font-size:16px; line-height:1.65; color:#e9eaf3; 831 max-width: 640px; margin: 0 auto; 832 } 833 .swal2-popup.bb-lock .swal2-icon.swal2-warning { 834 transform: scale(.8); margin-bottom: 8px; 835 } 836 837 .swal2-popup.bb-lock .swal2-actions{ margin-top:22px; gap:14px; } 838 .swal2-confirm.bb-lock__btn{ 839 border-radius:9999px; padding:13px 24px; font-weight:800; color:#fff; 840 background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; 841 box-shadow: 0 6px 16px rgba(59,130,246,.35); 842 border:none; 843 } 844 .swal2-confirm.bb-lock__btn:hover{ filter:brightness(1.07); color:#fff; } 845 .swal2-cancel.bb-lock__cancel{ 846 border-radius:9999px; padding:13px 24px; font-weight:700; 847 background: transparent !important; color:#e9eaf3; 848 border:1px solid rgba(255,255,255,.28); 849 } 850 .swal2-cancel.bb-lock__cancel:hover{ background: rgba(255,255,255,.06) !important; color:#fff; } 851 852 @media (max-width:480px){ 853 .swal2-popup.bb-lock{ width:92% !important; padding:26px 18px 22px; } 854 .swal2-title.bb-lock__title{ font-size:20px; } 855 .bb-lock__body{ font-size:15.5px; } 856 .swal2-confirm.bb-lock__btn, .swal2-cancel.bb-lock__cancel { width:100%; } 857 } 858 859 /* START - remove dotted underline for tooltip */ 860 span[data-tooltip] { 861 border-bottom: none !important; 862 } 863 /* END - remove dotted underline for tooltip */ 864 865 866 /* swipe - custom cursor --> NOT YET USED ON .slide */ 867 868 .cursor-swipe:hover { 869 cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAZlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Vn2moAAAAInRSTlMAmXaIPiMyCDUdElI4jJCJbUh
869DBJR+YVxNGnIOg2ZWLRcoBr06qQAAAUlJREFUSMflztmSgjAQheFzACXEIMq+uL7/Sw5RKIhCMX05Nd9NKqn+q4OXkjU27fNCY3Qi+cRcGFRlFWTO05FM9KzgDjOdT+sSYpLF7JtupUDLt5Oz5kIy1mPhPYO0dz436D04sgPR7Xaw1GvS71DScbRDO44iIIzp8FDQtftMNF0+9u/zkh97OUt8JkiPid9LvIKWAhR7BRBaGb6SiTcUQ3PFZCW5DoVl2Gu2koY9g4EiveUtjfsvNd0iEy4nt256DU0Eh5tMirrBJps44qsKhYl1CrQwsapMnDDW4oStPGEER5ZtJwpzKfNyt5UEmFG04oP+fXLgwEtDYWLVgSSZbCd7eYJanuAuT/DwhYnVyhPU8gRGnuARixNkrTCxKnkCI08QxeIE2qj9N2U0/h6TeEv8O1aduSz4H4lZSe5YV+WJ/ynJD7B+AB2wESSel3HpAAAAAElFTkSuQmCC') 25 25, auto; 870 } 871 872 /* swipe - custom cursor */ 873 874/* === BALLOONS: VIEWPORT MODE === */ 875@property --y { syntax: '<length-percentage>'; initial-value: 0%; inherits: false; } 876@property --x { syntax: '<length>'; initial-value: 0px; inherits: false; } 877@property --amp { syntax: '<length>'; initial-value: 12px; inherits: false; } 878 879#balloons { 880 position: fixed; 881 inset: 0; 882 overflow: hidden; 883 z-index: 2147483647; 884 pointer-events: none; 885} 886 887#balloons .balloonsConf { 888 position: absolute; 889 bottom: 0; 890 left: 50%; 891 display: block; 892 opacity: 1; 893 will-change: transform, opacity; 894 895 /* defaults; varied by nth-child */ 896 --size: 90px; width: var(--size); 897 --dur: 10s; --delay: 0s; 898 --sway-dur: 3.5s; --amp: 12px; 899 900 transform: translate(var(--x), var(--y)); 901 animation: 902 riseViewport var(--dur) linear var(--delay) infinite, 903 sway var(--sway-dur) ease-in-out var(--delay) infinite alternate; 904} 905 906@keyframes riseViewport { 907 0% { --y: 50vh; } 908 100% { --y: -130vh; } 909} 910@keyframes sway { 0% { --x: calc(var(--amp) * -1); } 100% { --x: var(--amp); } } 911 912/* Variety (repeat every 12) */ 913#balloons .balloonsConf:nth-child(12n+1) { --dur: 6.5s; --sway-dur: 2.8s; --amp: 10px; --size: 60px; } 914#balloons .balloonsConf:nth-child(12n+2) { --dur: 7.2s; --sway-dur: 3.0s; --amp: 14px; --size: 70px; } 915#balloons .balloonsConf:nth-child(12n+3) { --dur: 8s; --sway-dur: 3.6s; --amp: 16px; --size: 100px; } 916#balloons .balloonsConf:nth-child(12n+4) { --dur: 9s; --sway-dur: 3.2s; --amp: 12px; --size: 90px; } 917#balloons .balloonsConf:nth-child(12n+5) { --dur: 10s; --sway-dur: 4.0s; --amp: 18px; --size: 110px; } 918#balloons .balloonsConf:nth-child(12n+6) { --dur: 11.5s; --sway-dur: 4.2s; --amp: 20px; --size: 120px; } 919#balloons .balloonsConf:nth-child(12n+7) { --dur: 13s; --sway-dur: 4.6s; --amp: 16px; --size: 80px; } 920#balloons .balloonsConf:nth-child(12n+8) { --dur: 14.5s; --sway-dur: 5.0s; --amp: 22px; --size: 130px; } 921#balloons .balloonsConf:nth-child(12n+9) { --dur: 16s; --sway-dur: 5.2s; --amp: 18px; --size: 72px; } 922#balloons .balloonsConf:nth-child(12n+10) { --dur: 7s; --sway-dur: 2.6s; --amp: 10px; --size: 52px; } 923#balloons .balloonsConf:nth-child(12n+11) { --dur: 8.5s; --sway-dur: 3.4s; --amp: 14px; --size: 96px; } 924#balloons .balloonsConf:nth-child(12n+12) { --dur: 18s; --sway-dur: 5.6s; --amp: 24px; --size: 140px; } 925 926@media (prefers-reduced-motion: reduce) { 927 #balloons .balloonsConf { animation-duration: 1ms !important; } 928} 929 930 931 932 933 934 /* confi bubbles start */ 935 936 .bubble { 937 position: fixed; 938 opacity: 0; 939 animation: floatBubble linear infinite; 940 } 941 942 @keyframes moveBubble { 943 0% { 944 transform: translate(0%, 0%); 945 } 946 5% { 947 transform: translate(90%, 10%); 948 } 949 10% { 950 transform: translate(10%, 20%); 951 } 952 15% { 953 transform: translate(80%, 30%); 954 } 955 20% { 956 transform: translate(20%, 40%); 957 } 958 25% { 959 transform: translate(70%, 50%); 960 } 961 30% { 962 transform: translate(30%, 60%); 963 } 964 35% { 965 transform: translate(90%, 70%); 966 } 967 40% { 968 transform: translate(20%, 80%); 969 } 970 45% { 971 transform: translate(80%, 90%); 972 } 973 50% { 974 transform: translate(0%, 100%); 975 } 976 55% { 977 transform: translate(90%, 90%); 978 } 979 60% { 980 transform: translate(10%, 80%); 981 } 982 65% { 983 transform: translate(80%, 70%); 984 } 985 70% { 986 transform: translate(20%, 60%); 987 } 988 75% { 989 transform: translate(70%, 50%); 990 } 991 80% { 992 transform: translate(30%, 40%); 993 } 994 85% { 995 transform: translate(90%, 30%); 996 } 997 90% { 998 transform: translate(20%, 20%); 999 } 1000 95% { 1001 transform: translate(80%, 10%); 1002 } 1003 100% { 1004 transform: translate(0%, 0%); 1005 } 1006 } 1007 1008 @keyframes floatBubble { 1009 0% { 1010 transform: translateY(150vh) translateX(-50%) rotate(0deg); 1011 opacity: 0; 1012 } 1013 50% { 1014 opacity: 1; 1015 } 1016 90% { 1017 opacity: 1; 1018 } 1019 100% { 1020 transform: translateY(-150vh) translateX(-50%) rotate(360deg); 1021 opacity: 0; 1022 } 1023 } 1024 1025 .bubble:nth-child(1) { 1026 width: 15%; 1027 bottom: 0; 1028 left: 5%; 1029 animation-duration: 1s; 1030 animation-delay: 1s; 1031 } 1032 1033 .bubble:nth-child(2) { 1034 width: 20%; 1035 bottom: 0; 1036 left: 20%; 1037 animation-duration: 1s; 1038 animation-delay: 0.5s; 1039 } 1040 1041 .bubble:nth-child(3) { 1042 width: 15%; 1043 bottom: 0; 1044 left: 35%; 1045 animation-duration: 2s; 1046 animation-delay: 1s; 1047 } 1048 1049 .bubble:nth-child(4) { 1050 width: 22%; 1051 bottom: 0; 1052 left: 50%; 1053 animation-duration: 3s; 1054 animation-delay: 0.5s; 1055 } 1056 1057 .bubble:nth-child(5) { 1058 width: 18%; 1059 bottom: 0; 1060 left: 65%; 1061 animation-duration: 5s; 1062 animation-delay: 1s; 1063 } 1064 1065 .bubble:nth-child(6) { 1066 width: 15%; 1067 bottom: 0; 1068 left: 80%; 1069 animation-duration: 6s; 1070 animation-delay: 1s; 1071 } 1072 1073 .bubble:nth-child(7) { 1074 width: 10%; 1075 bottom: 0; 1076 left: 30%; 1077 animation-duration: 3s; 1078 animation-delay: 2s; 1079 } 1080 1081 .bubble:nth-child(8) { 1082 width: 18%; 1083 bottom: 0; 1084 left: 70%; 1085 animation-duration: 4s; 1086 animation-delay: 1s; 1087 } 1088 1089 .bubble:nth-child(9) { 1090 width: 25%; 1091 bottom: 0; 1092 left: 15%; 1093 animation-duration: 5s; 1094 animation-delay: 0.5s; 1095 animation-direction: alternate; 1096 animation-timing-function: linear; 1097 animation-iteration-count: infinite; 1098 } 1099 1100 .bubble:nth-child(10) { 1101 width: 12%; 1102 bottom: 0; 1103 left: 85%; 1104 animation-duration: 3s; 1105 animation-delay: 0.5s; 1106 animation-direction: alternate; 1107 animation-timing-function: linear; 1108 animation-iteration-count: infinite; 1109 } 1110 1111 1112 1113 /* confi bubbles end */ 1114 1115 1116 1117 /* snow start */ 1118 1119 .snow { 1120 animation: fall ease-in infinite, sway ease-in-out infinite; 1121 color: skyblue; 1122 position: absolute; 1123 } 1124 1125
1126 @keyframes fall { 1127 0% { 1128 opacity: 0; 1129 } 1130 50% { 1131 opacity: 1; 1132 } 1133 100% { 1134 top: 100vh; 1135 opacity: 1; 1136 } 1137 } 1138 1139 @keyframes sway { 1140 0% { 1141 margin-left: 0; 1142 } 1143 25% { 1144 margin-left: 50px; 1145 } 1146 50% { 1147 margin-left: -50px; 1148 } 1149 75% { 1150 margin-left: 50px; 1151 } 1152 100% { 1153 margin-left: 0; 1154 } 1155 } 1156 1157 1158 1159 /* snow end */ 1160 1161 1162 1163 1164 /* loading divider */ 1165 1166 .loading_divider { 1167 --speed-of-animation: 0.9s; 1168 --gap: 6px; 1169 --first-color: #4c86f9; 1170 --second-color: #49a84c; 1171 --third-color: #f6bb02; 1172 --fourth-color: #f6bb02; 1173 --fifth-color: #2196f3; 1174 display: flex; 1175 justify-content: center; 1176 align-items: center; 1177 width: 100%; 1178 gap: 6px; 1179 } 1180 1181 .loading_divider span { 1182 width: 100%; 1183 height: 10px; 1184 background: var(--first-color); 1185 animation: scale var(--speed-of-animation) ease-in-out infinite; 1186 } 1187 1188 .loading_divider span:nth-child(2) { 1189 background: var(--second-color); 1190 animation-delay: -0.8s; 1191 } 1192 1193 .loading_divider span:nth-child(3) { 1194 background: var(--third-color); 1195 animation-delay: -0.7s; 1196 } 1197 1198 .loading_divider span:nth-child(4) { 1199 background: var(--fourth-color); 1200 animation-delay: -0.6s; 1201 } 1202 1203 .loading_divider span:nth-child(5) { 1204 background: var(--fifth-color); 1205 animation-delay: -0.5s; 1206 } 1207 1208 @keyframes scale { 1209 0%, 40%, 100% { 1210 transform: scaleY(0.05); 1211 } 1212 1213 20% { 1214 transform: scaleY(0.1); 1215 } 1216 } 1217 /* loading divider */ 1218 1219 1220 1221 1222 /* zoom bg */ 1223 @keyframes zoomInOut { 1224 0% { 1225 transform: scale(1); 1226 } 1227 50% { 1228 transform: scale(1.3); 1229 } 1230 100% { 1231 transform: scale(1); 1232 } 1233 } 1234 1235 /* zoom bg */ 1236 1237 /* balloon-container start */ 1238 1239 #balloon-container { 1240 height: 100vh; 1241 padding: 1em; 1242 box-sizing: border-box; 1243 display: flex; 1244 flex-wrap: wrap; 1245 overflow: hidden; 1246 transition: opacity 500ms; 1247 } 1248 1249 .balloon { 1250 height: 125px; 1251 width: 105px; 1252 border-radius: 75% 75% 70% 70%; 1253 position: relative; 1254 } 1255 1256 .balloon:before { 1257 content: ""; 1258 height: 75px; 1259 width: 1px; 1260 padding: 1px; 1261 background-color: #FDFD96; 1262 display: block; 1263 position: absolute; 1264 top: 125px; 1265 left: 0; 1266 right: 0; 1267 margin: auto; 1268 } 1269 1270 .balloon:after { 1271 content: "â²"; 1272 text-align: center; 1273 display: block; 1274 position: absolute; 1275 color: inherit; 1276 top: 120px; 1277 left: 0; 1278 right: 0; 1279 margin: auto; 1280 } 1281 1282 @keyframes float { 1283 from {transform: translateY(100vh); 1284 opacity: 1;} 1285 to {transform: translateY(-300vh); 1286 opacity: 0;} 1287 } 1288 1289 1290 /* balloon-container end */ 1291 1292 1293 1294 1295 1296 /* menu bg style */ 1297 1298 .menu-list a.is-active { 1299 color: #f9f9f9; 1300 font-weight:800; 1301 background-image: linear-gradient(135deg, rgb(118 39 202 / 72%) 30%, rgb(0 108 255 / 72%) 100%); 1302 box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75); 1303 border-radius:16px; 1304 } 1305 1306 /* menu bg style */ 1307 1308 /* new gift start */ 1309 .new-gift { 1310 font-weight:450; 1311 } 1312 .new-gift:hover { 1313 text-decoration: underline; 1314 font-weight:550; 1315 } 1316 1317 /* new gift end */ 1318 1319 /* ribbon start */ 1320 1321 .ribbon-wrapper { 1322 width: 108px; 1323 height: 108px; 1324 overflow: hidden; 1325 position: absolute; 1326 top: -6px; 1327 right: -6px; } 1328 1329 .ribbon { 1330 font: bold 15px Sans-Serif; 1331 line-height: 18px; 1332 color: #e9ea7b; 1333 text-align: center; 1334 //text-transform: uppercase; 1335 -webkit-transform: rotate(45deg); 1336 -moz-transform: rotate(45deg); 1337 -ms-transform: rotate(45deg); 1338 -o-transform: rotate(45deg); 1339 position: relative; 1340 padding: 7px 0; 1341 left: -4px; 1342 top: 26px; 1343 width: 150px; 1344 //background-color: #6daaab; 1345 background-color: #000; 1346 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 1347 letter-spacing: 0.5px; 1348 box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5); 1349 outline: 1px dotted #E5E82C; 1350 outline-offset: -4px; 1351 background-image: radial-gradient(circle farthest-side, #FF1C1A, #BF0B00); 1352 //background-image: radial-gradient(circle farthest-side, #333, #555); 1353 text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.2); 1354 z-index:1; 1355 } 1356 1357 .ribbon:before, .ribbon:after { 1358 content: "";
1359 border-top: 4px solid #BF0B00; 1360 border-left: 4px solid transparent; 1361 border-right: 4px solid transparent; 1362 position: absolute; 1363 bottom: -4px; } 1364 1365 .ribbon:before { 1366 content: ""; 1367 position: absolute; 1368 left: 0px; 1369 top: 100%; 1370 z-index: -1; 1371 border-left: 4px solid #BF0B00; 1372 border-right: 4px solid transparent; 1373 border-bottom: 4px solid transparent; 1374 border-top: 4px solid #BF0B00; } 1375 1376 .ribbon:after { 1377 content: ""; 1378 position: absolute; 1379 right: 7px; 1380 top: 100%; 1381 z-index: -1; 1382 border-left: 4px solid transparent; 1383 border-right: 4px solid #BF0B00; 1384 border-bottom: 4px solid transparent; 1385 border-top: 4px solid #BF0B00; } 1386 1387 /* ribbon end */ 1388 1389 1390 1391 1392 .animation-float, .animation-float-small { 1393 animation: float 2s linear .5s infinite alternate both; 1394 } 1395 1396 .animation-rotation { 1397 -webkit-animation: rotation 8s infinite linear; 1398 } 1399 1400 /* like and clap btns */ 1401 .like-btn, 1402 .clap-btn { 1403 display: inline-block; 1404 Cursor: pointer; 1405 width: 2.5em; 1406 height: 2.5em; 1407 1408 } 1409 1410 .like-btn { 1411 background: url('https://d1e7moeca5rg6t.cloudfront.net/static/brand/heart.png') no-repeat 0% 50%; 1412 background-size: 2900%; 1413 } 1414 1415 .clap-btn { 1416 background: url('https://d1e7moeca5rg6t.cloudfront.net/static/brand/claps.png') no-repeat 0% 50%; 1417 background-size: 900%; 1418 } 1419 1420 .like-active, 1421 .clap-active { 1422 animation-name: animate; 1423 animation-duration: 0.8s; 1424 animation-iteration-count: 1; 1425 animation-fill-mode: forwards; 1426 } 1427 .like-active { 1428 animation-timing-function: steps(28); 1429 } 1430 1431 .clap-active { 1432 animation-timing-function: steps(8); 1433 } 1434 @keyframes animate { 1435 0% { background-position: left; } 1436 50% { background-position: right; } 1437 100% { background-position: right; } 1438 } 1439 1440 /* END - like btn */ 1441 1442 1443 /* card hover effects */ 1444 1445 .hover-effect-base { 1446 transition: transform .25s ease-in-out; 1447 } 1448 .hover-effect-base:hover { 1449 transform: translateY(-5px) 1450 } 1451 1452 /* card hover effects */ 1453 1454 /* custom styling for upcoming events */ 1455 1456 .js-event:hover h3 { 1457 background-color:#f6f6f6; 1458 border-radius:5px; 1459 } 1460 1461 1462 /* custom styling for datetime on scheduler */ 1463 input[type="datetime-local"] { 1464 width: 345px; 1465 padding-left: 2.5em; 1466 } 1467 1468 /* Used by show_hide patterns and more */ 1469 .hidden { 1470 display: none; 1471 } 1472 /* Used by show_hide patterns and more */ 1473 1474 /* wavy separator start */ 1475 1476 .wavy-separator::after { 1477 content: ""; 1478 position: absolute; 1479 //width: calc(100% + 10px); 1480 //bottom: -8px; 1481 left: -5px; 1482 border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==); 1483 border-image-slice: 0 0 100%; 1484 border-image-width: 0 0 15px; 1485 border-image-repeat: stretch; 1486 border-width: 0px 0px 15px; 1487 border-bottom-style: solid; 1488 } 1489 /* wavy separator end */ 1490 1491 /* bravoboard_hr start */ 1492 1493 .bravoboard_hr { 1494 height: 3px; 1495 background-image: linear-gradient(to right, #3399FF 0%, #FF6666 100%); 1496 position:sticky; 1497 top:0; 1498 border-radius:10px; 1499 background-size: 500% 100%; 1500 animation: wave 5s ease-in-out infinite; 1501 box-shadow: 0 0 5px rgba(255, 255, 255, 0); 1502 background-position: calc(50% + 20px * sin(time * 2 * PI / 3)) 0; 1503 } 1504 1505 @keyframes wave { 1506 0% { 1507 background-position: 0 0; 1508 } 1509 50% { 1510 background-position: 100% 0; 1511 } 1512 100% { 1513 background-position: 0 0; 1514 } 1515 } 1516 1517 1518 /* bravoboard_hr end */ 1519 1520 /* bulb animation start */ 1521 .bulb { 1522 opacity: 1; 1523 animation: fadeAnimation 1s 5; 1524 } 1525 1526 @keyframes fadeAnimation { 1527 0% { 1528 opacity: 1; 1529 } 1530 50% { 1531 opacity: 0.5; 1532 } 1533 100% { 1534 opacity: 1; 1535 } 1536 } 1537 /* bulb animation end */ 1538 1539 1540 /* Slight Rotate Start */ 1541 @keyframes rotate { 1542 0% { 1543 transform: rotate(0deg); 1544 } 1545 50% { 1546 transform: rotate(45deg); 1547 } 1548 100% { 1549 transform: rotate(0deg); 1550 } 1551 } 1552 1553 .slight_rotate { 1554 animation: rotate 2s 1; 1555 } 1556 /* Slight Rotate End */ 1557 1558 /* pulse animation start */ 1559 .pulse { 1560 animation: pulse-animation 3s infinite; 1561 } 1562 1563 @keyframes pulse-animation { 1564 0% { 1565 box-shadow: 0 0 0 0px #feb43a; 1566 } 1567 100% { 1568 box-shadow: 0 0 0 9px rgba(0, 0, 0, 0); 1569 } 1570 } 1571 /* pulse animation end */ 1572 1573 /* glow bg start */ 1574 1575 .glow_bg { 1576 position: relative; 1577 } 1578 .glow_bg::before, 1579 .glow_bg::after { 1580 content: ''; 1581 position: absolute; 1582 top: -5px; 1583 left: -1.8px; 1584 z-index: -1; 1585 width: calc(100% + 3px); 1586 height: calc(100% + 7px); 1587 border-radius: 13px; 1588 background: linear-gradient( 1589 45deg, 1590 /* 1591 #ffff00, 1592 #00ff00, 1593 #0099ff, 1594 #001aff, 1595 #a200ff, 1596 #ff0055, 1597 #ff0000, 1598 #ff0055, 1599 #ff0000, 1600 #ffff00, 1601 */ 1602 #00ff00, 1603 #0099ff, 1604 #001aff, 1605 #a200ff 1606 1607 ); 1608 background-size: 300%; 1609 animation: border 120s linear infinite; 1610 } 1611 1612 @keyframes border { 1613 0%, 1614 100% { 1615 background-position: 0 0; 1616 } 1617 50% { 1618 background-position: 300%; 1619 } 1620 } 1621 /* glow bg end */ 1622 1623 1624 1625 1626 .bulma-dropdown-menu { 1627 -webkit-appearance: none; 1628 -moz-appearance: none; 1629 appearance: none; 1630 } 1631 1632
1633 @keyframes bgColor { 1634 0% { 1635 background-color: maroon; 1636 } 1637 25% { 1638 background-color: brown; 1639 } 1640 50% { 1641 background-color: olive green; 1642 } 1643 75% { 1644 background-color: teal; 1645 } 1646 100% { 1647 background-color: navy; 1648 } 1649 } 1650 1651 /* sidebar start */ 1652 1653 /* Style the sidebar */ 1654 .menu { 1655 background-color: #fff; 1656 padding: 20px; 1657 } 1658 1659 /* Style the menu items */ 1660 .menu-label { 1661 font-weight: bold; 1662 margin-bottom: 10px; 1663 } 1664 1665 .menu-list { 1666 margin-left: 0px; 1667 margin-bottom: 20px; 1668 } 1669 1670 .text.hover { 1671 display: block !important; 1672 background-color: rgba(255, 255, 255, .9); 1673 color: $primary-color; 1674 padding: .5rem; 1675 box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .25); 1676 position: absolute; 1677 left: 3rem; 1678 top: 1rem; 1679 border-radius: .25rem; 1680 } 1681 /* sidebar end */ 1682 1683 /* hero title animation */ 1684 1685 .home_hero_title{ 1686 -webkit-animation: staggerInSm; 1687 animation: staggerInSm; 1688 -webkit-animation-delay: .1s; 1689 animation-delay: .1s; 1690 -webkit-animation-duration: .6s; 1691 animation-duration: .6s; 1692 -webkit-animation-fill-mode: both; 1693 animation-fill-mode: both; 1694 -webkit-animation-timing-function: ease-out; 1695 animation-timing-function: ease-out; 1696 1697 } 1698 1699 .home_hero_subtitle { 1700 -webkit-animation: fadeIn; 1701 animation: fadeIn; 1702 -webkit-animation-delay: .7s; 1703 animation-delay: .7s; 1704 -webkit-animation-duration: 2s; 1705 animation-duration: 2s; 1706 -webkit-animation-fill-mode: both; 1707 animation-fill-mode: both; 1708 opacity: 0; 1709 } 1710 1711 @keyframes fadeIn { 1712 0% { 1713 opacity: 0; 1714 } 1715 1716 100% { 1717 opacity: 1; 1718 } 1719 } 1720 1721 @keyframes staggerInSm { 1722 0% { 1723 opacity: 0; 1724 -webkit-transform: translateY(80%); 1725 transform: translateY(80%); 1726 } 1727 100% { 1728 opacity: 1; 1729 -webkit-transform: translateY(0); 1730 transform: translateY(0); 1731 } 1732 } 1733 1734 /* hero title animation */ 1735 1736 .new_board_modal_bg{ 1737 background-attachment: fixed; 1738 background-size: cover; 1739 border-radius:15px; 1740 background-image: linear-gradient(135deg, rgba(118, 39, 202, 0.72) 30%, rgba(0, 108, 255, 0.72) 100%); 1741 box-shadow: rgba(65, 132, 234, 0.75) 0px 4px 15px 0px; 1742 background: url(https://d1e7moeca5rg6t.cloudfront.net/static/live/bg/svg/svg_new_18.svg); 1743 } 1744 1745 1746 .grad_modal_bg{ 1747 background-attachment: fixed; 1748 backdrop-filter: blur(18px) saturate(180%) !important; 1749 -webkit-backdrop-filter: blur(18px) saturate(180%) !important; 1750 border-radius: 22px !important; 1751 //border: 1px solid rgba(255, 255, 255, 0.25); 1752 //box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); 1753 //background: linear-gradient(135deg,rgba(4,6,8,0.85) 0%, rgba(0, 108, 255, 0.18) 100%), rgba(255, 255,255,0.22) !important; 1754 background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22), transparent 55%), radial-gradient(circle at 100% 0%, rgba(244, 114, 182, 0.22), transparent 55%), radial-gradient(circle at 50% 120%, rgba(251, 191, 36, 0.22), transparent 65%), #050a13; 1755 border: 1px solid rgba(148, 163, 184, 0.28); 1756 box-shadow: 0 22px 45px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.7); 1757 1758 } 1759 1760 /* Sweet Alert 2 styles -- work, do not delete */ 1761 1762 .swal2-popup.swal2-modal.swal2-show{ 1763 background-attachment: fixed; 1764 backdrop-filter: blur(18px) saturate(180%) !important; 1765 -webkit-backdrop-filter: blur(18px) saturate(180%) !important; 1766 border-radius: 22px !important; 1767 //border: 1px solid rgba(255, 255, 255, 0.25); 1768 //box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); 1769 //background: linear-gradient(135deg,rgba(4,6,8,0.85) 0%, rgba(0, 108, 255, 0.18) 100%), rgba(255, 255,255,0.22) !important; 1770 background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22), transparent 55%), radial-gradient(circle at 100% 0%, rgba(244, 114, 182, 0.22), transparent 55%), radial-gradient(circle at 50% 120%, rgba(251, 191, 36, 0.22), transparent 65%), #050a13;
1771 border: 1px solid rgba(148, 163, 184, 0.28); 1772 box-shadow: 0 22px 45px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.7); 1773 1774 } 1775 1776 .swal2-success-circular-line-left, 1777 .swal2-success-fix, 1778 .swal2-success-circular-line-right { 1779 background-color: transparent !important; 1780 } 1781 1782 /* Sweet Alert 2 styles -- work, do not delete */ 1783 1784 .login_modal_bg{ 1785 background-attachment: fixed; 1786 background-size: cover; 1787 border: 2px solid #11ffff; 1788 border-radius:5px; 1789 background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSI+CjxyZWN0IHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzI4MjgyOCI+PC9yZWN0Pgo8Y2lyY2xlIGN4PSIzIiBjeT0iNC4zIiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIzIiBjeT0iMyIgcj0iMS44IiBmaWxsPSJibGFjayI+PC9jaXJjbGU+CjxjaXJjbGUgY3g9IjEwLjUiIGN5PSIxMi41IiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTEuMyIgcj0iMS44IiBmaWxsPSJibGFjayI+PC9jaXJjbGU+Cjwvc3ZnPg==); 1790 background-color: #333; 1791 } 1792 1793 .auth_modal_bg{ 1794 background-attachment: fixed; 1795 background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSI+CjxyZWN0IHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzI4MjgyOCI+PC9yZWN0Pgo8Y2lyY2xlIGN4PSIzIiBjeT0iNC4zIiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIzIiBjeT0iMyIgcj0iMS44IiBmaWxsPSJibGFjayI+PC9jaXJjbGU+CjxjaXJjbGUgY3g9IjEwLjUiIGN5PSIxMi41IiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTEuMyIgcj0iMS44IiBmaWxsPSJibGFjayI+PC9jaXJjbGU+Cjwvc3ZnPg==); 1796 background-size: repeat; 1797 border-radius:15px; 1798 box-shadow: rgba(65, 132, 234, 0.75) 0px 4px 15px 0px; 1799 } 1800 1801 .boards_list_bg{ 1802 background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSI+CjxyZWN0IHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzI4MjgyOCI+PC9yZWN0Pgo8Y2lyY2xlIGN4PSIzIiBjeT0iNC4zIiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIzIiBjeT0iMyIgcj0iMS44IiBmaWxsPSJibGFjayI+PC9jaXJjbGU+CjxjaXJjbGUgY3g9IjEwLjUiIGN5PSIxMi41IiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTEuMyIgcj0iMS44IiBmaWxsPSJibGFjayI+PC9jaXJjbGU+Cjwvc3ZnPg==); 1803 background-size: repeat; 1804 background-attachment: fixed; 1805 } 1806 1807 .reminders_list_bg { 1808 background-color: #fffaeb; 1809 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='1'%3E%3Cpath fill='%2371d3ff' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%2365dfff' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2359ecff' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%234dfcff' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%2341FFEF' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%2339fcff' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2332e7ff' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%232ad0ff' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%2323b8ff' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%231B9FFF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E") center; 1810 background-attachment: fixed; 1811 background-size: cover; 1812 } 1813 1814 1815 1816 1817 s, strikethru{text-decoration:none;position:relative;} 1818 s::before, strikethru::before { 1819 top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */ 1820 background:red; /*this is the color of the line*/ 1821 opacity:.7; 1822 content: ''; 1823 width: 110%; 1824 position: absolute; 1825 height:.1em; 1826 border-radius:.1em; 1827 left: -5%; 1828 white-space:nowrap; 1829 display: block; 1830 transform: rotate(-15deg); 1831 } 1832 s.straight::before, strikethru.straight::before{transform: rotate(0deg);left:-1%;width:102%;} 1833 1834 1835 1836 1837 .wavy-separator::after { 1838 content: ""; 1839 position: absolute; 1840 width: calc(100% + 10px); 1841 bottom: -8px; 1842 left: -5px; 1843 border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==); 1844 border-image-slice: 0 0 100%; 1845 border-image-width: 0 0 15px; 1846 border-image-repeat: stretch; 1847 border-width: 0px 0px 15px; 1848 border-bottom-style: solid; 1849 } 1850 1851 .new-color-active { 1852 border:7px solid #fff; 1853 } 1854 1855 .new-color-active:after { 1856 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeBAMAAAC/JAEaAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTPX3+vX3+vX2+vX3+vX2+vP5+fX1+/T2+fPz//T4+/T3+vX3+vT4+/T3+fX3+gAC9WcAAAAPdFJOUwB/mNXouCsa+hFEYKg7x4wtZzkAAADKSURBVBjTY2BABikCDKjA/xMqn/X//+coAvL//39B5nP9BwJkgRlA/h9kAXuggAESnwnI/1GAJLAfKPALic8GMhLZYSxA/ldkI+OBAg5IfEaQjgQwE0KuB/J/Q2z7CCI5+4ECClAPgIxmBvI/w/SC/KwPFGiH+RColBtk5AKwAIj1iSEfSH6EhhpIRN0fSARABNhB7B//kYKm+D8EfIMJcNpDBDbAHT35P8RgBHj/Hy2o+EDGTkDz+S+U+OBBDSogOP8VLU5ZEUYCAAuBir/XRTqQAAAAAElFTkSuQmCC) no-repeat 50%; 1857 background-size: 16px; 1858 content: ""; 1859 display: block; 1860 height: 36px; 1861 position: relative; 1862 } 1863 1864 .occasion-active:after { 1865 content: ""; 1866 display: block; 1867 height: 400px; 1868 position: relative; 1869 } 1870 1871 /* START - required for image selector */ 1872 1873 #tab-content .tab-pane { 1874 display: none; 1875 } 1876 #tab-content .tab-pane.is-active { 1877 display: block; 1878 } 1879 1880 /* END - required for image selector */ 1881 1882 .card-columns { 1883 column-count: 1; 1884 column-gap: 1.5rem; 1885 padding: 1.5rem; 1886 } 1887 1888 .card-columns .card { 1889 display: inline-block; 1890 width: 100%; 1891 margin-bottom: 1.5rem; 1892 } 1893 1894 .columns-6 { 1895 column-count: 6; 1896 } 1897 .columns-5 { 1898 column-count: 5; 1899 } 1900 .columns-4 { 1901 column-count: 4; 1902 } 1903 .columns-3 { 1904 column-count: 3; 1905 } 1906 .columns-2 { 1907 column-count: 2; 1908 } 1909 .columns-1 { 1910 column-count: 1; 1911 } 1912 1913 @media (max-width: 768px) { 1914 .columns-6-mobile { 1915 column-count: 6; 1916 } 1917 .columns-5-mobile { 1918 column-count: 5; 1919 } 1920 .columns-4-mobile { 1921 column-count: 4; 1922 } 1923 .columns-3-mobile { 1924 column-count: 3; 1925 } 1926 .columns-2-mobile { 1927 column-count: 2; 1928 } 1929 .columns-1-mobile { 1930 column-count: 1; 1931 } 1932 } 1933 1934 @media (min-width: 769px) { 1935 .columns-6-tablet { 1936 column-count: 6; 1937 } 1938 .columns-5-tablet { 1939 column-count: 5; 1940 } 1941 .columns-4-tablet { 1942 column-count: 4; 1943 } 1944 .columns-3-tablet { 1945 column-count: 3; 1946 } 1947 .columns-2-tablet { 1948 column-count: 2; 1949 } 1950 .columns-1-tablet { 1951 column-count: 1; 1952 } 1953 } 1954 1955 @media (min-width: 1024px) { 1956 .columns-6-desktop { 1957 column-count: 6; 1958 } 1959 .columns-5-desktop { 1960 column-count: 5; 1961 } 1962 .columns-4-desktop { 1963 column-count: 4; 1964 } 1965 .columns-3-desktop { 1966 column-count: 3; 1967 } 1968 .columns-2-desktop { 1969 column-count: 2; 1970 } 1971 .columns-1-desktop { 1972 column-count: 1; 1973 } 1974 } 1975 1976 @media (min-width: 1216px) { 1977 .columns-6-widescreen { 1978 column-count: 6; 1979 } 1980 .columns-5-widescreen { 1981 column-count: 5; 1982 } 1983 .columns-4-widescreen { 1984 column-count: 4; 1985 } 1986 .columns-3-widescreen { 1987 column-count: 3; 1988 } 1989 .columns-2-widescreen { 1990 column-count: 2; 1991 } 1992 .columns-1-widescreen { 1993 column-count: 1; 1994 } 1995 } 1996 1997 @media (min-width: 1408px) { 1998 .columns-6-fullhd { 1999 column-count: 6; 2000 } 2001 .columns-5-fullhd { 2002 column-count: 5; 2003 } 2004 .columns-4-fullhd { 2005 column-count: 4; 2006 } 2007 .columns-3-fullhd { 2008 column-count: 3; 2009 } 2010 .columns-2-fullhd { 2011 column-count: 2; 2012 } 2013 .columns-1-fullhd { 2014 column-count: 1; 2015 } 2016 } 2017 2018 .animate-charcter 2019 { 2020 background-image: linear-gradient(to right, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); 2021 background-size: 200% auto; 2022 background-clip: text; 2023 text-fill-color: transparent; 2024 -webkit-background-clip: text; 2025 -webkit-text-fill-color: transparent; 2026 animation: textclip 7s linear infinite; 2027 font-size:2.3em; 2028 } 2029 2030 .no-animate { 2031 background-clip: border-box !important; 2032 text-fill-color: currentColor !important; 2033 -webkit-background-clip: border-box !important; 2034 -webkit-text-fill-color: currentColor !important; 2035 } 2036 2037 @keyframes textclip { 2038 to { 2039 background-position: 200% center ; 2040 } 2041 } 2042</style> <!-- custom app css --> 2043<style onload="this.media='all'"> 2044 2045 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap"); 2046 2047 #background > div { 2048 --size: 5vw; 2049 --symbol: "â½"; 2050 2051 --pos_x: 0vw; 2052 --duration_move: 7s; 2053 --delay_move: 0s; 2054 2055 --duration_rotate: 1.5s; 2056 --delay_rotate: 0s; 2057 --duration_clip: 10s; 2058 --delay_clip: 0s; 2059 --hue: 0deg; 2060 2061 position: absolute; 2062 top: 0; 2063 left: 0; 2064 font-size: clamp(15px, var(--size), 80px); 2065 font-family: "Noto Sans Symbols 2", sans-serif; 2066 transform-origin: center top; 2067 animation: move var(--duration_move) var(--delay_move) linear infinite normal 2068 both; 2069 } 2070 #background span { 2071 display: block; 2072 position: relative; 2073 transform-origin: center; 2074 transform: rotate(0deg); 2075 animation: rotate var(--duration_rotate) var(--delay_rotate) ease-in-out 2076 infinite alternate both; 2077 } 2078 #background span:after { 2079 content: var(--symbol); 2080 -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.2); 2081 text-stroke: 0.5px rgba(0, 0, 0, 0.2); 2082 line-height: 1.2; 2083 position: relative; 2084 display: block; 2085 color: transparent; 2086 background-clip: text; 2087 /* 2088 filter: contrast(0.8) brightness(1.2) hue-rotate(var(--hue)) 2089 drop-shadow(0px 0px 0.1px gold); 2090 */ 2091 filter: brightness(1.2) hue-rotate(var(--hue)); 2092 background-image: url(https://d1e7moeca5rg6t.cloudfront.net/static/brand/sparkles_confetti_bg.jpeg); 2093 background-position: center; 2094 background-size: 200px auto; 2095 background-repeat: repeat; 2096 transform: translateZ(0); 2097 animation: bg1 var(--duration_clip) var(--delay_clip) linear infinite 2098 alternate both; 2099 } 2100 #background > div:nth-child(even) span:after { 2101 animation-name: bg2; 2102 }
2103 @keyframes bg1 { 2104 0% { 2105 background-position: 0% 0%; 2106 } 2107 100% { 2108 background-position: 100% 100%; 2109 } 2110 } 2111 @keyframes bg2 { 2112 0% { 2113 background-position: 100% 0%; 2114 } 2115 100% { 2116 background-position: 0% 100%; 2117 } 2118 } 2119 @keyframes rotate { 2120 0% { 2121 transform: rotate(115deg); 2122 } 2123 100% { 2124 transform: rotate(245deg); 2125 } 2126 } 2127 @keyframes move { 2128 0% { 2129 transform: translate3d(var(--pos_x), calc(0vh - var(--size)), 0); 2130 } 2131 100% { 2132 transform: translate3d(var(--pos_x), 250vh, 0); 2133 } 2134 } 2135 #background > div:nth-child(23n + 1) { 2136 --symbol: "ð"; 2137 } 2138 #background > div:nth-child(23n + 2) { 2139 --symbol: "â"; 2140 } 2141 #background > div:nth-child(23n + 3) { 2142 --symbol: "ð"; 2143 } 2144 #background > div:nth-child(23n + 4) { 2145 --symbol: "â"; 2146 } 2147 #background > div:nth-child(23n + 5) { 2148 --symbol: "â£"; 2149 } 2150 #background > div:nth-child(23n + 6) { 2151 --symbol: "ð¯"; 2152 } 2153 #background > div:nth-child(23n + 7) { 2154 --symbol: "ð"; 2155 } 2156 #background > div:nth-child(23n + 8) { 2157 --symbol: "â¦"; 2158 } 2159 #background > div:nth-child(23n + 9) { 2160 --symbol: "â¢"; 2161 } 2162 #background > div:nth-child(23n + 10) { 2163 --symbol: "ðµ"; 2164 } 2165 #background > div:nth-child(23n + 11) { 2166 --symbol: "â¤"; 2167 } 2168 #background > div:nth-child(23n + 12) { 2169 --symbol: "â¦"; 2170 } 2171 #background > div:nth-child(23n + 13) { 2172 --symbol: "â"; 2173 } 2174 #background > div:nth-child(23n + 14) { 2175 --symbol: "ð»"; 2176 } 2177 #background > div:nth-child(23n + 15) { 2178 --symbol: "â¶"; 2179 } 2180 #background > div:nth-child(23n + 16) { 2181 --symbol: "â³"; 2182 } 2183 #background > div:nth-child(23n + 17) { 2184 --symbol: "â"; 2185 } 2186 #background > div:nth-child(23n + 18) { 2187 --symbol: "ð"; 2188 } 2189 #background > div:nth-child(23n + 19) { 2190 --symbol: "â»"; 2191 } 2192 #background > div:nth-child(23n + 20) { 2193 --symbol: "â"; 2194 } 2195 #background > div:nth-child(23n + 21) { 2196 --symbol: "â·"; 2197 } 2198 #background > div:nth-child(23n + 22) { 2199 --symbol: "â´"; 2200 } 2201 #background > div:nth-child(21n + 1) { 2202 --pos_x: 5vw; 2203 } 2204 #background > div:nth-child(21n + 2) { 2205 --pos_x: 10vw; 2206 } 2207 #background > div:nth-child(21n + 3) { 2208 --pos_x: 15vw; 2209 } 2210 #background > div:nth-child(21n + 4) { 2211 --pos_x: 20vw; 2212 } 2213 #background > div:nth-child(21n + 5) { 2214 --pos_x: 25vw; 2215 } 2216 #background > div:nth-child(21n + 6) { 2217 --pos_x: 30vw; 2218 } 2219 #background > div:nth-child(21n + 7) { 2220 --pos_x: 35vw; 2221 } 2222 #background > div:nth-child(21n + 8) { 2223 --pos_x: 40vw; 2224 } 2225 #background > div:nth-child(21n + 9) { 2226 --pos_x: 45vw; 2227 } 2228 #background > div:nth-child(21n + 10) { 2229 --pos_x: 50vw; 2230 } 2231 #background > div:nth-child(21n + 11) { 2232 --pos_x: 55vw; 2233 } 2234 #background > div:nth-child(21n + 12) { 2235 --pos_x: 60vw; 2236 } 2237 #background > div:nth-child(21n + 13) { 2238 --pos_x: 65vw; 2239 } 2240 #background > div:nth-child(21n + 14) { 2241 --pos_x: 70vw; 2242 } 2243 #background > div:nth-child(21n + 15) { 2244 --pos_x: 75vw; 2245 } 2246 #background > div:nth-child(21n + 16) { 2247 --pos_x: 80vw; 2248 } 2249 #background > div:nth-child(21n + 17) { 2250 --pos_x: 85vw; 2251 } 2252 #background > div:nth-child(21n + 18) { 2253 --pos_x: 90vw; 2254 } 2255 #background > div:nth-child(21n + 19) { 2256 --pos_x: 95vw; 2257 } 2258 #background > div:nth-child(21n + 20) { 2259 --pos_x: 100vw; 2260 } 2261 #background > div:nth-child(12n + 1) { 2262 --hue: 30deg; 2263 } 2264 #background > div:nth-child(12n + 2) { 2265 --hue: 270deg; 2266 } 2267 #background > div:nth-child(12n + 3) { 2268 --hue: 90deg; 2269 } 2270 #background > div:nth-child(12n + 4) { 2271 --hue: 150deg; 2272 } 2273 #background > div:nth-child(12n + 5) { 2274 --hue: 330deg; 2275 } 2276 #background > div:nth-child(12n + 6) { 2277 --hue: 180deg; 2278 } 2279 #background > div:nth-child(12n + 7) { 2280 --hue: 60deg; 2281 } 2282 #background > div:nth-child(12n + 8) { 2283 --hue: 210deg; 2284 } 2285 #background > div:nth-child(12n + 9) { 2286 --hue: 120deg; 2287 } 2288 #background > div:nth-child(12n + 10) { 2289 --hue: 240deg; 2290 } 2291 #background > div:nth-child(12n + 11) { 2292 --hue: 300deg; 2293 } 2294 2295 #background > div:nth-child(8n + 1) { 2296 --delay_move: -4s; 2297 } 2298 #background > div:nth-child(8n + 2) { 2299 --delay_move: -5s; 2300 } 2301 #background > div:nth-child(8n + 3) { 2302 --delay_move: -6s; 2303 } 2304 #background > div:nth-child(8n + 4) { 2305 --delay_move: -1s; 2306 } 2307 #background > div:nth-child(8n + 5) { 2308 --delay_move: -2s; 2309 } 2310 #background > div:nth-child(8n + 6) { 2311 --delay_move: -3s; 2312 } 2313 #background > div:nth-child(8n + 7) { 2314 --delay_move: -7s; 2315 } 2316 2317 #background > div:nth-child(9n + 1) { 2318 --duration_move: 7.5s; 2319 } 2320 #background > div:nth-child(9n + 2) { 2321 --duration_move: 8s; 2322 } 2323 #background > div:nth-child(9n + 3) { 2324 --duration_move: 8.5s; 2325 } 2326 #background > div:nth-child(9n + 4) { 2327 --duration_move: 9s; 2328 } 2329 #background > div:nth-child(9n + 5) { 2330 --duration_move: 5.5s; 2331 } 2332 #background > div:nth-child(9n + 6) { 2333 --duration_move: 6s; 2334 } 2335 #background > div:nth-child(9n + 7) { 2336 --duration_move: 6.5s; 2337 } 2338 #background > div:nth-child(9n + 8) { 2339 --duration_move: 7.8s; 2340 } 2341 2342 #background > div:nth-child(7n + 1) { 2343 --delay_rotate: 0.3s; 2344 } 2345 #background > div:nth-child(7n + 2) { 2346 --delay_rotate: 0.6s; 2347 } 2348 #background > div:nth-child(7n + 3) { 2349 --delay_rotate: 0.9s; 2350 } 2351 #background > div:nth-child(7n + 4) { 2352 --delay_rotate: -0.3s; 2353 } 2354 #background > div:nth-child(7n + 5) { 2355 --delay_rotate: -0.6s; 2356 } 2357 #background > div:nth-child(7n + 6) { 2358 --delay_rotate: -0.9s; 2359 } 2360 2361 #background > div:nth-child(6n + 1) { 2362 --duration_rotate: 1s; 2363 } 2364 #background > div:nth-child(6n + 2) { 2365 --duration_rotate: 1.6s; 2366 } 2367 #background > div:nth-child(6n + 3) { 2368 --duration_rotate: 1.1s; 2369 } 2370 #background > div:nth-child(6n + 4) { 2371 --duration_rotate: 1.2s; 2372 } 2373 #background > div:nth-child(6n + 5) { 2374 --duration_rotate: 1.3s; 2375 } 2376 2377 #background > div:nth-child(5n + 1) { 2378 --size: 3vw; 2379 } 2380 #background > div:nth-child(5n + 2) { 2381 --size: 4vw; 2382 } 2383 #background > div:nth-child(5n + 3) { 2384 --size: 6vw; 2385 } 2386 #background > div:nth-child(5n + 4) {
2387 --size: 7vw; 2388 } 2389</style> <!-- foil stamping effect --> 2390<style onload="this.media='all'"> 2391 2392 /* 2393 <div id="game-container"></div> 2394 */ 2395 2396 #game-container { 2397 background: #000; 2398 position: absolute; 2399 top: 0; 2400 left: 0; 2401 width: 100%; 2402 height: 100%; 2403 overflow: hidden; 2404 z-index: 2; /* Ensure the game container is on top after the intro screen */ 2405 } 2406 #space-background { 2407 position: absolute; 2408 top: 0; 2409 left: 0; 2410 width: 200%; 2411 height: 100%; 2412 z-index: 1; 2413 overflow: hidden; 2414 } 2415 @keyframes scrollStars { 2416 0% { 2417 transform: translateX(0); 2418 } 2419 100% { 2420 transform: translateX(-50%); 2421 } 2422 } 2423 @keyframes scrollPlanetsSmooth { 2424 0% { 2425 transform: translateX(50vw); 2426 } 2427 100% { 2428 transform: translateX(-200vw); 2429 } 2430 } 2431 .star-layer { 2432 position: absolute; 2433 width: 200%; 2434 height: 100%; 2435 left: 0; 2436 top: 0; 2437 } 2438 .star { 2439 position: absolute; 2440 width: 2px; 2441 height: 2px; 2442 background: white; 2443 border-radius: 50%; 2444 } 2445 #star-layer-0 { 2446 animation: scrollStars 60s linear infinite; 2447 } 2448 #star-layer-1 { 2449 animation: scrollStars 120s linear infinite; 2450 } 2451 #star-layer-2 { 2452 animation: scrollStars 180s linear infinite; 2453 } 2454 .planet { 2455 position: absolute; 2456 background-size: contain; 2457 background-repeat: no-repeat; 2458 z-index: 2; 2459 image-rendering: pixelated; 2460 animation: scrollPlanetsSmooth linear infinite; 2461 } 2462 .planet-0-0 { 2463 animation-duration: 180s; 2464 width: 100px; 2465 height: 100px; 2466 } 2467 .planet-0-1 { 2468 animation-duration: 180s; 2469 width: 100px; 2470 height: 100px; 2471 } 2472 .planet-0-2 { 2473 animation-duration: 180s; 2474 width: 100px; 2475 height: 100px; 2476 } 2477 .planet-1-0 { 2478 animation-duration: 120s; 2479 width: 150px; 2480 height: 150px; 2481 } 2482 .planet-1-1 { 2483 animation-duration: 120s; 2484 width: 150px; 2485 height: 150px; 2486 } 2487 .planet-2-0 { 2488 animation-duration: 90s; 2489 width: 200px; 2490 height: 200px; 2491 } 2492 .planet-2-1 { 2493 animation-duration: 90s; 2494 width: 200px; 2495 height: 200px; 2496 } 2497 2498</style> <!-- space background --> 2499<style onload="this.media='all'"> 2500 2501 /* 2502 <canvas id="starsCanvas"></canvas> 2503 */ 2504 2505 /* 2506 2507 var canvas = document.getElementById("starsCanvas"); 2508 var flr = Math.floor; 2509 2510 canvas.width = canvas.offsetWidth; 2511 canvas.height = canvas.offsetHeight; 2512 2513 var halfw = canvas.width / 2, 2514 halfh = canvas.height / 2, 2515 step = 2, 2516 warpZ = 3, 2517 speed = 0.075; 2518 var stampedDate = new Date(); 2519 2520 var ctx = canvas.getContext("2d"); 2521 2522 ctx.fillStyle = "transparent"; 2523 ctx.fillRect(0, 0, canvas.width, canvas.height); 2524 2525 function rnd(num1, num2) { 2526 return flr(Math.random() * num2 * 2) + num1; 2527 } 2528 2529 function getColor() { 2530 return "hsla(200,100%, " + rnd(50, 100) + "%, 1)"; 2531 } 2532 2533 var star = function () { 2534 var v = vec3.fromValues( 2535 rnd(0 - halfw, halfw), 2536 rnd(0 - halfh, halfh), 2537 rnd(1, warpZ) 2538 ); 2539 2540 this.x = v[0]; 2541 this.y = v[1]; 2542 this.z = v[2]; 2543 this.color = getColor(); 2544 2545 this.reset = function () { 2546 v = vec3.fromValues( 2547 rnd(0 - halfw, halfw), 2548 rnd(0 - halfh, halfh), 2549 rnd(1, warpZ) 2550 ); 2551 2552 this.x = v[0]; 2553 this.y = v[1]; 2554 this.color = getColor(); 2555 vel = this.calcVel(); 2556 }; 2557 2558 this.calcVel = function () { 2559 return vec3.fromValues(0, 0, 0 - speed); 2560 }; 2561 2562 var vel = this.calcVel(); 2563 2564 this.draw = function () { 2565 vel = this.calcVel(); 2566 v = vec3.add(vec3.create(), v, vel); 2567 var x = v[0] / v[2]; 2568 var y = v[1] / v[2]; 2569 var x2 = v[0] / (v[2] + speed * 0.5); 2570 var y2 = v[1] / (v[2] + speed * 0.5); 2571 2572 ctx.strokeStyle = this.color; 2573 ctx.beginPath(); 2574 ctx.moveTo(x, y); 2575 ctx.lineTo(x2, y2); 2576 ctx.stroke(); 2577 2578 if (x < 0 - halfw || x > halfw || y < 0 - halfh || y > halfh) { 2579 this.reset(); 2580 } 2581 }; 2582 }; 2583 2584 var starfield = function () { 2585 var numOfStars = 500; 2586 2587 var stars = []; 2588 2589 function _init() { 2590 for (var i = 0, len = numOfStars; i < len; i++) { 2591 stars.push(new star()); 2592 } 2593 } 2594 2595 _init(); 2596 2597 this.draw = function () { 2598 ctx.translate(halfw, halfh); 2599 2600 for (var i = 0, len = stars.length; i < len; i++) { 2601 var currentStar = stars[i]; 2602 2603 currentStar.draw(); 2604 } 2605 }; 2606 }; 2607 2608 var mStarField = new starfield(); 2609 2610 function draw() { 2611 var millSeconds = 1000 * 20; 2612 2613 var currentTime = new Date(); 2614 2615 speed = 0.025; 2616 2617 ctx.setTransform(1, 0, 0, 1, 0, 0); 2618 ctx.fillStyle = "rgba(0,0,0,0.2)"; 2619 ctx.fillRect(0, 0, canvas.width, canvas.height); 2620 2621 mStarField.draw(); 2622 2623 window.requestAnimationFrame(draw); 2624 } 2625 2626 draw(); 2627 2628 window.onresize = function () { 2629 canvas.width = canvas.offsetWidth; 2630 canvas.height = canvas.offsetHeight; 2631 2632 halfw = canvas.width / 2; 2633 halfh = canvas.height / 2; 2634 }; 2635 2636 function Countdown(elem, seconds) { 2637 var that = {}; 2638 2639 that.elem = elem; 2640 that.seconds = seconds; 2641 that.totalTime = seconds * 100; 2642 that.usedTime = 0; 2643 that.startTime = +new Date(); 2644 that.timer = null; 2645 2646 that.count = function () { 2647 that.usedTime = Math.floor((+new Date() - that.startTime) / 10); 2648 2649 var tt = that.totalTime - that.usedTime; 2650 if (tt <= 0) { 2651 that.elem.innerHTML = "00:00.00"; 2652 clearInterval(that.timer); 2653 } else { 2654 var mi = Math.floor(tt / (60 * 100)); 2655 var ss = Math.floor((tt - mi * 60 * 100) / 100); 2656 var ms = tt - Math.floor(tt / 100) * 100; 2657 2658 that.elem.innerHTML = 2659 that.fillZero(mi) + ":" + that.fillZero(ss) + "." + that.fillZero(ms); 2660 } 2661 }; 2662 2663 that.init = function () { 2664 if (that.timer) { 2665 clearInterval(that.timer); 2666 that.elem.innerHTML = "00:00.00"; 2667 that.totalTime = seconds * 100; 2668 that.usedTime = 0; 2669 that.startTime = +new Date(); 2670 that.timer = null; 2671 } 2672 }; 2673 2674 that.start = function () { 2675 if (!that.timer) { 2676 that.timer = setInterval(that.count, 1); 2677 } 2678 }; 2679 2680 that.stop = function () { 2681 console.log("usedTime = " + countdown.usedTime); 2682 if (that.timer) clearInterval(that.timer); 2683 }; 2684 2685 that.fillZero = function (num) { 2686 return num < 10 ? "0" + num : num; 2687 }; 2688 2689 return that; 2690 } 2691 2692 2693 2694 */ 2695 2696 2697</style> <!-- starsCanvas --> 2698<style onload="this.media='all'"> 2699 2700 .latest-posts .card,.latest-posts .cart-summary .summary-card,.cart-summary .latest-posts .summary-card { 2701 border-radius: 5px; 2702 -webkit-box-shadow: 0 3px 10px 4px rgba(0,0,0,.04); 2703 box-shadow: 0 3px 10px 4px rgba(0,0,0,.04); 2704 border: 1px solid #ededed 2705 } 2706 2707 .latest-posts .card .card-image figure img,.latest-posts .cart-summary .summary-card .card-image figure img,.cart-summary .latest-posts .summary-card .card-image figure img { 2708 border-top-left-radius: 5px; 2709 border-top-right-radius: 5px 2710 } 2711 2712 .latest-posts .card figure.author,.latest-posts .cart-summary .summary-card figure.author,.cart-summary .latest-posts .summary-card figure.author { 2713 position: absolute; 2714 bottom: -24px; 2715 right: 20px 2716 } 2717 2718 .latest-posts .card figure.author .img-circle,.latest-posts .cart-summary .summary-card figure.author .img-circle,.cart-summary .latest-posts .summary-card figure.author .img-circle { 2719 border: 2px solid #fff; 2720 border-radius: 50% 2721 } 2722 2723 .latest-posts .card .media,.latest-posts .cart-summary .summary-card .media,.cart-summary .latest-posts .summary-card .media { 2724 margin: 0 2725 } 2726 2727 .latest-posts .card .title,.latest-posts .cart-summary .summary-card .title,.cart-summary .latest-posts .summary-card .title { 2728 font-family: nexa bold,sans-serif; 2729 font-weight: 600 2730 } 2731 2732 .latest-posts .card .timestamp,.latest-posts .cart-summary .summary-card .timestamp,.cart-summary .latest-posts .summary-card .timestamp { 2733 font-size: 85%; 2734 color: #a9abac; 2735 padding: 5px 0 2736 } 2737 2738 .latest-posts .card .timestamp i,.latest-posts .cart-summary .summary-card .timestamp i,.cart
2738-summary .latest-posts .summary-card .timestamp i { 2739 margin-right: 7px 2740 } 2741 2742 .latest-posts .card .post-exerpt,.latest-posts .cart-summary .summary-card .post-exerpt,.cart-summary .latest-posts .summary-card .post-exerpt { 2743 padding: 10px 0 20px; 2744 font-family: roboto,sans-serif 2745 } 2746 2747 .blog-section { 2748 padding-top: 60px; 2749 padding-bottom: 60px 2750 } 2751 2752 .is-post { 2753 border-radius: 6px; 2754 background: #fff; 2755 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 2756 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 2757 width: 100%; 2758 max-width: 760px; 2759 margin: 0 auto 50px 2760 } 2761 2762 .is-post:last-child { 2763 margin-bottom: 0 2764 } 2765 2766 .is-post .featured-post-image { 2767 position: relative 2768 } 2769 2770 .is-post .featured-post-image img { 2771 display: block; 2772 border-radius: 4px 4px 0 0 2773 } 2774 2775 .is-post .featured-post-image .post-date { 2776 position: absolute; 2777 bottom: -28px; 2778 right: 28px; 2779 display: -webkit-box; 2780 display: -ms-flexbox; 2781 display: flex; 2782 -webkit-box-align: center; 2783 -ms-flex-align: center; 2784 align-items: center; 2785 -webkit-box-pack: center; 2786 -ms-flex-pack: center; 2787 justify-content: center; 2788 height: 56px; 2789 width: 56px; 2790 background: #fff; 2791 border: 1px solid #e5e5e5; 2792 border-radius: 10px; 2793 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 2794 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 2795 text-align: center 2796 } 2797 2798 .is-post .featured-post-image .post-date .post-date-inner { 2799 line-height: 1; 2800 text-align: center 2801 } 2802 2803 .is-post .featured-post-image .post-date .post-date-inner span { 2804 font-family: roboto,sans-serif; 2805 display: block 2806 } 2807 2808 .is-post .featured-post-image .post-date .post-date-inner span:first-child { 2809 font-size: .8rem; 2810 letter-spacing: 2px; 2811 text-transform: uppercase; 2812 color: #444f60 2813 } 2814 2815 .is-post .featured-post-image .post-date .post-date-inner span:nth-child(2) { 2816 font-weight: 700; 2817 font-size: 1.8rem; 2818 color: #8c8cf9 2819 } 2820 2821 .is-post .featured-post-body { 2822 border: 1px solid #e5e5e5; 2823 padding: 30px; 2824 border-radius: 0 0 6px 6px 2825 } 2826 2827 .is-post .featured-post-body .featured-post-title { 2828 display: -webkit-box; 2829 display: -ms-flexbox; 2830 display: flex; 2831 -webkit-box-align: center; 2832 -ms-flex-align: center; 2833 align-items: center; 2834 margin-bottom: 1rem 2835 } 2836 2837 .is-post .featured-post-body .featured-post-title .title-avatar { 2838 width: 60px; 2839 min-width: 60px; 2840 height: 60px; 2841 border-radius: 50%; 2842 border: 2px solid #fff; 2843 z-index: 1; 2844 display: block 2845 } 2846 2847 .is-post .featured-post-body .featured-post-title .title-avatar img { 2848 border-radius: 50% 2849 } 2850 2851 .is-post .featured-post-body .featured-post-title .title-meta { 2852 margin-left: 12px 2853 } 2854 2855 .is-post .featured-post-body .featured-post-title .title-meta .post-title { 2856 font-family: nexa bold,sans-serif; 2857 color: #444f60; 2858 font-size: 1.4rem; 2859 line-height: 1 2860 } 2861 2862 .is-post .featured-post-body .featured-post-title .title-meta .post-subtitle { 2863 font-family: roboto,sans-serif; 2864 color: #8e9baf 2865 } 2866 2867 .is-post .featured-post-body .featured-post-title .title-meta .post-subtitle a { 2868 color: #8c8cf9 2869 } 2870 2871 .is-post .featured-post-body .featured-post-title .title-meta .post-subtitle i { 2872 position: relative; 2873 top: -4px; 2874 font-size: 4px; 2875 margin: 0 5px 2876 } 2877 2878 .is-post .featured-post-body p { 2879 color: #8e9baf; 2880 margin-bottom: 1.5rem 2881 } 2882 2883 .is-post .featured-post-body .read-more-link { 2884 font-family: roboto,sans-serif; 2885 letter-spacing: 1px; 2886 color: #8c8cf9; 2887 font-size: 1.1rem 2888 } 2889 2890 .is-post .featured-post-body .read-more-link span { 2891 position: relative; 2892 top: 2px; 2893 font-size: 1.6rem; 2894 margin-left: 4px 2895 } 2896 2897 .load-more { 2898 padding: 60px 0 2899 } 2900 2901 .load-more .button { 2902 font-family: nexa bold,sans-serif; 2903 color: #444f60 2904 } 2905 2906 .blog-grid-item.is-masonry { 2907 margin-bottom: 1.5rem 2908 } 2909 2910 .blog-grid-item.is-masonry:last-child { 2911 margin-bottom: 0 2912 } 2913 2914 .blog-grid-item.masonry-size-1 .card-image .item-featured-image { 2915 height: 140px 2916 } 2917 2918 .blog-grid-item.masonry-size-2 .card-image .item-featured-image { 2919 height: 240px 2920 } 2921 2922 .blog-grid-item.masonry-size-3 .card-image .item-featured-image { 2923 height: 290px 2924 } 2925 2926 .blog-grid-item.is-related .card-content { 2927 padding: 16px 2928 } 2929 2930 .blog-grid-item.is-related .card-content .featured-post-title .title-meta { 2931 margin-left: 0 2932 } 2933 2934 .blog-grid-item.is-related .card-content .featured-post-title .title-meta .post-title { 2935 font-size: 1.3rem 2936 } 2937 2938 .blog-grid-item.is-related .card-content .featured-post-title .title-meta .post-subtitle { 2939 font-size: 1rem 2940 } 2941 2942 .blog-grid-item .card-image .item-featured-image { 2943 height: 180px; 2944 width: 100%; 2945 -o-object-fit: cover; 2946 object-fit: cover 2947 } 2948 2949 .blog-grid-item .card-image .post-date { 2950 position: absolute; 2951 bottom: 12px; 2952 right: 12px; 2953 display: -webkit-box; 2954 display: -ms-flexbox; 2955 display: flex; 2956 -webkit-box-align: center; 2957 -ms-flex-align: center; 2958 align-items: center; 2959 -webkit-box-pack: center; 2960 -ms-flex-pack: center; 2961 justify-content: center; 2962 height: 50px; 2963 width: 50px; 2964 background: #fff; 2965 border: 1px solid #e5e5e5; 2966 border-radius: 10px; 2967 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 2968 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 2969 text-align: center 2970 } 2971 2972 .blog-grid-item .card-image .post-date .post-date-inner { 2973 line-height: 1; 2974 text-align: center 2975 } 2976 2977 .blog-grid-item .card-image .post-date .post-date-inner span { 2978 font-family: roboto,sans-serif; 2979 display: block 2980 } 2981 2982 .blog-grid-item .card-image .post-date .post-date-inner span:first-child { 2983 font-size: .75rem; 2984 letter-spacing: 2px; 2985 text-transform: uppercase; 2986 color: #444f60 2987 } 2988 2989 .blog-grid-item .card-image .post-date .post-date-inner span:nth-child(2) { 2990 font-weight: 700; 2991 font-size: 1.5rem; 2992 color: #8c8cf9 2993 } 2994 2995 .blog-grid-item .card-content { 2996 padding: 26px 2997 } 2998 2999 .blog-grid-item .card-content .featured-post-title { 3000 display: -webkit-box; 3001 display: -ms-flexbox; 3002 display: flex; 3003 -webkit-box-align: center; 3004 -ms-flex-align: center; 3005 align-items: center; 3006 margin-bottom: 1rem 3007 } 3008 3009 .blog-grid-item .card-content .featured-post-title .title-avatar { 3010 width: 50px; 3011 min-width: 50px; 3012 height: 50px; 3013 border-radius: 50%; 3014 border: 2px solid #fff; 3015 z-index: 1; 3016 display: block 3017 } 3018 3019 .blog-grid-item .card-content .featured-post-title .title-avatar img { 3020 border-radius: 50% 3021 } 3022 3023 .blog-grid-item .card-content .featured-post-title .title-meta { 3024 margin-left: 12px 3025 } 3026 3027 .blog-grid-item .card-content .featured-post-title .title-meta .post-title { 3028 font-family: nexa bold,sans-serif; 3029 color: #444f60; 3030 font-size: 1.1rem; 3031 line-height: 1.2 3032 } 3033 3034 .blog-grid-item .card-content .featured-post-title .title-meta .post-subtitle { 3035 font-family: roboto,sans-serif; 3036 font-size: .9rem; 3037 color: #8e9baf 3038 } 3039 3040 .blog-grid-item .card-content .featured-post-title .title-meta .post-subtitle a { 3041 color: #8c8cf9 3042 } 3043 3044 .blog-grid-item .card-content .featured-post-title .title-meta .post-subtitle i { 3045 position: relative; 3046 top: -4px; 3047 font-size: 4px; 3048 margin: 0 5px 3049 } 3050 3051 .blog-grid-item .card-content p { 3052 color: #000; 3053 margin-bottom: 1rem 3054 } 3055 3056 .blog-grid-item .card-content .read-more-link { 3057 font-family: roboto,sans-serif; 3058 letter-spacing: 1px; 3059 color: #8c8cf9; 3060 font-size: 1rem 3061 } 3062 3063 .blog-grid-item .card-content .read-more-link span { 3064 position: relative; 3065 top: 2px; 3066 font-size: 1.6rem; 3067 margin-left: 4px 3068 } 3069 3070 .blog-sidebar {
3071 padding: 0 30px 3072 } 3073 3074 .blog-sidebar .blog-sidebar-search { 3075 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3076 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3077 margin-bottom: 2.5rem 3078 } 3079 3080 .blog-sidebar .blog-sidebar-search .input { 3081 border-color: #e7eaed; 3082 font-size: 1.2rem 3083 } 3084 3085 .blog-sidebar .blog-sidebar-posts { 3086 margin-bottom: 3.5rem 3087 } 3088 3089 .blog-sidebar .blog-sidebar-posts h4 { 3090 font-family: nexa bold,sans-serif; 3091 color: #444f60; 3092 font-size: 1.5rem; 3093 margin-bottom: 20px 3094 } 3095 3096 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post { 3097 display: -webkit-box; 3098 display: -ms-flexbox; 3099 display: flex; 3100 -webkit-box-align: start; 3101 -ms-flex-align: start; 3102 align-items: flex-start; 3103 margin-bottom: 30px 3104 } 3105 3106 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post:last-child { 3107 margin-bottom: 0 3108 } 3109 3110 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-image { 3111 position: relative 3112 } 3113 3114 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-image img { 3115 display: block; 3116 width: 70px; 3117 min-width: 70px; 3118 height: 70px; 3119 min-height: 70px; 3120 -o-object-fit: cover; 3121 object-fit: cover; 3122 border-radius: 6px; 3123 object-fit: cover; 3124 -webkit-box-shadow: 0 14px 26px -12px rgba(140,140,249,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(140,140,249,.2)!important; 3125 box-shadow: 0 14px 26px -12px rgba(140,140,249,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(140,140,249,.2)!important 3126 } 3127 3128 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-content { 3129 -webkit-box-flex: 2; 3130 -ms-flex-positive: 2; 3131 flex-grow: 2; 3132 padding: 0 20px 3133 } 3134 3135 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-content h3 { 3136 font-family: roboto,sans-serif; 3137 font-size: 1.1rem; 3138 font-weight: 500; 3139 color: #444f60; 3140 margin-bottom: 6px; 3141 line-height: 1.2 3142 } 3143 3144 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-content .meta { 3145 display: -webkit-box; 3146 display: -ms-flexbox; 3147 display: flex; 3148 -webkit-box-align: center; 3149 -ms-flex-align: center; 3150 align-items: center 3151 } 3152 3153 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-content .meta img { 3154 display: block; 3155 height: 24px; 3156 width: 24px; 3157 min-width: 24px; 3158 border-radius: 50% 3159 } 3160 3161 .blog-sidebar .blog-sidebar-posts .blog-sidebar-post .post-content .meta span { 3162 color: #8e9baf; 3163 font-family: roboto,sans-serif; 3164 font-size: .9rem; 3165 margin-left: 8px 3166 } 3167 3168 .blog-sidebar .blog-sidebar-categories { 3169 margin-bottom: 3.5rem 3170 } 3171 3172 .blog-sidebar .blog-sidebar-categories h4 { 3173 font-family: nexa bold,sans-serif; 3174 color: #444f60; 3175 font-size: 1.5rem; 3176 margin-bottom: 20px 3177 } 3178 3179 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category { 3180 display: -webkit-box; 3181 display: -ms-flexbox; 3182 display: flex; 3183 -webkit-box-align: center; 3184 -ms-flex-align: center; 3185 align-items: center; 3186 -webkit-box-pack: justify; 3187 -ms-flex-pack: justify; 3188 justify-content: space-between 3189 } 3190 3191 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category:last-child { 3192 margin-bottom: 0 3193 } 3194 3195 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category:hover>span { 3196 color: #8c8cf9 3197 } 3198 3199 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category:hover .post-count { 3200 border-color: #e7eaed; 3201 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3202 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06) 3203 } 3204 3205 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category:hover .post-count span { 3206 color: #8c8cf9 3207 } 3208 3209 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category>span { 3210 font-family: roboto,sans-serif; 3211 font-size: 1.15rem; 3212 font-weight: 300; 3213 color: #8e9baf; 3214 line-height: 1.2; 3215 -webkit-transition: color .3s; 3216 transition: color .3s 3217 } 3218 3219 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category .post-count { 3220 height: 35px; 3221 width: 35px; 3222 display: -webkit-box; 3223 display: -ms-flexbox; 3224 display: flex; 3225 -webkit-box-pack: center; 3226 -ms-flex-pack: center; 3227 justify-content: center; 3228 -webkit-box-align: center; 3229 -ms-flex-align: center; 3230 align-items: center; 3231 border-radius: 50%; 3232 border: 1px solid transparent; 3233 -webkit-transition: all .3s; 3234 transition: all .3s 3235 } 3236 3237 .blog-sidebar .blog-sidebar-categories .blog-sidebar-category .post-count span { 3238 font-weight: 600; 3239 font-size: 1rem; 3240 color: #444f60; 3241 -webkit-transition: color .3s; 3242 transition: color .3s 3243 } 3244 3245 .blog-sidebar .blog-sidebar-tags { 3246 margin-bottom: 3.5rem 3247 } 3248 3249 .blog-sidebar .blog-sidebar-tags h4 {
3250 font-family: nexa bold,sans-serif; 3251 color: #444f60; 3252 font-size: 1.5rem; 3253 margin-bottom: 20px 3254 } 3255 3256 .blog-sidebar .blog-sidebar-tags .tags .tag { 3257 height: 3em; 3258 padding-left: 1em; 3259 padding-right: 1em; 3260 font-size: .9rem; 3261 background: #fff; 3262 color: #8e9baf; 3263 border: 1px solid #e7eaed; 3264 border-radius: 8px; 3265 text-decoration: none!important; 3266 -webkit-transition: all .3s; 3267 transition: all .3s 3268 } 3269 3270 .blog-sidebar .blog-sidebar-tags .tags .tag:hover { 3271 color: #8c8cf9; 3272 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3273 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06) 3274 } 3275 3276 .is-single-post { 3277 border-radius: 6px; 3278 background: #fff; 3279 width: 100%; 3280 max-width: 760px; 3281 margin: 0 auto 50px 3282 } 3283 3284 .is-single-post:last-child { 3285 margin-bottom: 0 3286 } 3287 3288 .is-single-post .featured-post-image { 3289 position: relative 3290 } 3291 3292 .is-single-post .featured-post-image img { 3293 display: block; 3294 border-radius: 4px 4px 0 0 3295 } 3296 3297 .is-single-post .featured-post-image .post-date { 3298 position: absolute; 3299 bottom: -28px; 3300 right: 28px; 3301 display: -webkit-box; 3302 display: -ms-flexbox; 3303 display: flex; 3304 -webkit-box-align: center; 3305 -ms-flex-align: center; 3306 align-items: center; 3307 -webkit-box-pack: center; 3308 -ms-flex-pack: center; 3309 justify-content: center; 3310 height: 56px; 3311 width: 56px; 3312 background: #fff; 3313 border: 1px solid #e5e5e5; 3314 border-radius: 10px; 3315 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3316 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3317 text-align: center 3318 } 3319 3320 .is-single-post .featured-post-image .post-date .post-date-inner { 3321 line-height: 1; 3322 text-align: center 3323 } 3324 3325 .is-single-post .featured-post-image .post-date .post-date-inner span { 3326 font-family: roboto,sans-serif; 3327 display: block 3328 } 3329 3330 .is-single-post .featured-post-image .post-date .post-date-inner span:first-child { 3331 font-size: .8rem; 3332 letter-spacing: 2px; 3333 text-transform: uppercase; 3334 color: #444f60 3335 } 3336 3337 .is-single-post .featured-post-image .post-date .post-date-inner span:nth-child(2) { 3338 font-weight: 700; 3339 font-size: 1.8rem; 3340 color: #8c8cf9 3341 } 3342 3343 .is-single-post .featured-post-body { 3344 padding: 30px 0 3345 } 3346 3347 .is-single-post .featured-post-body .featured-post-title { 3348 display: -webkit-box; 3349 display: -ms-flexbox; 3350 display: flex; 3351 -webkit-box-align: center; 3352 -ms-flex-align: center; 3353 align-items: center; 3354 margin-bottom: 1rem 3355 } 3356 3357 .is-single-post .featured-post-body .featured-post-title .title-meta .post-title { 3358 font-family: nexa bold,sans-serif; 3359 color: #444f60; 3360 font-size: 1.8rem; 3361 line-height: 1; 3362 margin-bottom: 8px 3363 } 3364 3365 .is-single-post .featured-post-body .featured-post-title .title-meta .post-subtitle { 3366 font-family: roboto,sans-serif; 3367 font-size: 1.2rem; 3368 color: #8e9baf; 3369 margin-bottom: 1rem 3370 } 3371 3372 .is-single-post .featured-post-body .featured-post-title .title-meta .post-subtitle a { 3373 color: #8c8cf9 3374 } 3375 3376 .is-single-post .featured-post-body .featured-post-title .title-meta .post-subtitle i { 3377 position: relative; 3378 top: -4px; 3379 font-size: 4px; 3380 margin: 0 5px 3381 } 3382 3383 .is-single-post .featured-post-body p { 3384 font-size: 1.2rem; 3385 color: #8e9baf; 3386 margin-bottom: 1.5rem 3387 } 3388 3389 .is-single-post .featured-post-body blockquote { 3390 font-family: roboto,sans-serif; 3391 font-size: 1.1rem; 3392 background: #f5f6fa; 3393 border-color: #8c8cf9; 3394 color: #8593a9 3395 } 3396 3397 .is-single-post .sharing-links,.is-single-post .post-tags { 3398 display: -webkit-box; 3399 display: -ms-flexbox; 3400 display: flex; 3401 -webkit-box-align: center; 3402 -ms-flex-align: center; 3403 align-items: center; 3404 -webkit-box-pack: justify; 3405 -ms-flex-pack: justify; 3406 justify-content: space-between; 3407 font-family: roboto,sans-serif; 3408 letter-spacing: 1px; 3409 font-size: 1.1rem; 3410 padding-bottom: 1.25rem; 3411 border-bottom: 1px solid #dee2e6 3412 } 3413 3414 .is-single-post .sharing-links>span,.is-single-post .post-tags>span { 3415 position: relative; 3416 top: 2px; 3417 color: #444f60; 3418 font-size: 1.3rem; 3419 margin-left: 4px 3420 } 3421 3422 .is-single-post .sharing-links .social-links,.is-single-post .post-tags .social-links { 3423 display: -webkit-box; 3424 display: -ms-flexbox; 3425 display: flex; 3426 -webkit-box-align: center; 3427 -ms-flex-align: center; 3428 align-items: center 3429 } 3430 3431 .is-single-post .sharing-links .social-links a,.is-single-post .post-tags .social-links a { 3432 display: -webkit-box; 3433 display: -ms-flexbox; 3434 display: flex; 3435 -webkit-box-pack: center; 3436 -ms-flex-pack: center; 3437 justify-content: center; 3438 -webkit-box-align: center; 3439 -ms-flex-align: center; 3440 align-items: center; 3441 height: 38px; 3442 width: 38px; 3443 min-width: 38px; 3444 border-radius: 50%; 3445 border: 1px solid transparent; 3446 -webkit-transition: all .3s; 3447 transition: all .3s 3448 } 3449 3450 .is-single-post .sharing-links .social-links a:hover,.is-single-post .post-tags .social-links a:hover { 3451 background: #fff; 3452 border-color: #e7eaf3; 3453 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3454 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06) 3455 } 3456 3457 .is-single-post .sharing-links .social-links a:hover i,.is-single-post .post-tags .social-links a:hover i { 3458 color: #8c8cf9 3459 } 3460 3461 .is-single-post .sharing-links .social-links a i,.is-single-post .post-tags .social-links a i { 3462 font-size: 16px; 3463 color: #c5cbe2; 3464 -webkit-transition: all .3s; 3465 transition: all .3s 3466 } 3467 3468 .is-single-post .sharing-links { 3469 margin-bottom: 1.5rem 3470 } 3471 3472 .is-single-post .post-tags { 3473 border-bottom: none 3474 } 3475 3476 .is-single-post .post-tags .tags .tag { 3477 height: 3em; 3478 padding-left: 1em; 3479 padding-right: 1em; 3480 font-size: .9rem; 3481 background: #fff; 3482 color: #8e9baf; 3483 border: 1px solid #e7eaed; 3484 border-radius: 8px; 3485 text-decoration: none!important; 3486 -webkit-transition: all .3s; 3487 transition: all .3s 3488 } 3489 3490 .is-single-post .post-tags .tags .tag:hover { 3491 color: #8c8cf9; 3492 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3493 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06) 3494 } 3495 3496 .is-single-post .post-author { 3497 display: -webkit-box; 3498 display: -ms-flexbox; 3499 display: flex; 3500 margin-bottom: 1rem; 3501 margin: 40px 0; 3502 padding: 30px; 3503 border: 1px solid #e4e7ea; 3504 border-radius: 12px; 3505 background: #fff; 3506 -webkit-transition: all .3s; 3507 transition: all .3s 3508 } 3509 3510 .is-single-post .post-author:hover { 3511 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06); 3512 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06) 3513 } 3514 3515 .is-single-post .post-author .post-author-avatar { 3516 width: 90px; 3517 min-width: 90px; 3518 height: 90px; 3519 border-radius: 50%; 3520 border: 2px solid #fff; 3521 z-index: 1; 3522 display: block 3523 } 3524 3525 .is-single-post .post-author .post-author-avatar img { 3526 border-radius: 50% 3527 } 3528 3529 .is-single-post .post-author .post-author-meta { 3530 margin-left: 12px 3531 } 3532 3533 .is-single-post .post-author .post-author-meta .post-author-title a { 3534 font-family: nexa bold,sans-serif; 3535 color: #444f60; 3536 font-size: 1.4rem; 3537 line-height: 1.2; 3538 -webkit-transition: all .3s; 3539 transition: all .3s 3540 } 3541 3542 .is-single-post .post-author .post-author-meta .post-author-title a:hover { 3543 color: #8c8cf9 3544 } 3545 3546 .is-single-post .post-author .post-author-meta h4 { 3547 font-family: nexa light,sans-serif; 3548 color: #8e9baf; 3549 font-size: 1.1rem; 3550 margin-bottom: .5rem 3551 } 3552 3553 .is-single-post .post-author .post-author-meta p { 3554 font-size: 1.1rem; 3555 color: #8e9baf; 3556 margin-bottom: 0 3557 } 3558 3559 @media(max-width: 768px) { 3560 .is-single-post .post-author { 3561 -webkit-box-orient:vertical; 3562 -webkit-box-direction: normal; 3563 -ms-flex-direction: column; 3564 flex-direction: column; 3565 text-align: center 3566 } 3567 3568 .is-single-post .post-author .post-author-avatar { 3569 margin: 0 auto 16px 3570 } 3571 } 3572 3573 .related-posts { 3574 margin-bottom: 3.5rem 3575 } 3576 3577 .related-posts .related-posts-head { 3578 font-family: nexa bold,sans-serif; 3579 color: #444f60; 3580 font-size: 1.6rem; 3581 margin: 20px 0 3582 } 3583 3584 .single-comments .single-comments-head { 3585 font-family: nexa bold,sans-serif; 3586 color: #444f60; 3587 font-size: 1.6rem; 3588 margin: 20px 0 3589 } 3590 3591 .single-comments .comments-list .media { 3592 font-family: roboto,sans-serif; 3593 margin: 0!important; 3594 padding: 1.5rem 0!important; 3595 border-color: #e4e7ea; 3596 max-width: 640px 3597 } 3598 3599 .single-comments .comments-list .media .media-left img { 3600 border-radius: 50% 3601 } 3602 3603 .single-comments .comments-list .media .media-content .content .title { 3604 color: #444f60; 3605 font-size: 1.2rem 3606 } 3607 3608 .single-comments .comments-list .media .media-content .content .timestamp { 3609 display: block; 3610 color: #8e9baf; 3611 margin-bottom: .5rem 3612 } 3613 3614 .single-comments .comments-list .media .media-content .content p { 3615 font-size: 1.1rem; 3616 margin-bottom: .5rem 3617 } 3618 3619 .single-comments .comments-list .media .media-content .content .controls i { 3620 color: #f92b60; 3621 font-size: 12px 3622 } 3623 3624 .single-comments .comments-list .media .media-content .content .controls .count { 3625 color: #444f60; 3626 font-weight: 500 3627 } 3628 3629 .single-comments .comments-list .media .media-content .content .controls .reply { 3630 font-family: roboto,sans-serif; 3631 margin-left: 20px 3632 } 3633 3634 .single-comments .comments-list .media .media-content .content .controls .reply a { 3635 color: #8c8cf9 3636 } 3637 3638 .single-comments .publish-comment {
3639 margin-bottom: 3.5rem 3640 } 3641 3642 .single-comments .publish-comment .publish-comment-head { 3643 font-family: nexa bold,sans-serif; 3644 color: #444f60; 3645 font-size: 1.6rem; 3646 margin: 20px 0 3647 } 3648 3649 .single-comments .publish-comment form .field .textarea { 3650 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06)!important; 3651 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06)!important; 3652 border-color: #dee2e6; 3653 font-size: 1.2rem; 3654 font-family: roboto,sans-serif 3655 } 3656 3657 .single-comments .publish-comment form .field .input { 3658 -webkit-box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06)!important; 3659 box-shadow: -1px 3px 15px 0 rgba(0,0,0,.06)!important; 3660 height: 50px; 3661 font-size: 1.2rem 3662 } 3663 3664 .single-comments .publish-comment form .field .submit-wrap .button { 3665 height: 55px; 3666 min-width: 240px 3667 } 3668 3669 .main-post .post-image { 3670 position: relative; 3671 border-radius: 6px 3672 } 3673 3674 .main-post .post-image img { 3675 display: block; 3676 border-radius: 6px; 3677 -webkit-box-shadow: 0 14px 26px -12px rgba(140,140,249,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(140,140,249,.2)!important; 3678 box-shadow: 0 14px 26px -12px rgba(140,140,249,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(140,140,249,.2)!important 3679 } 3680 3681 .main-post .post-image .image-overlay { 3682 position: absolute; 3683 width: 100%; 3684 height: 100%; 3685 top: 0; 3686 left: 0; 3687 background: rgba(140,140,249,.8); 3688 border-radius: 6px; 3689 -webkit-transition: all .3s; 3690 transition: all .3s 3691 } 3692 3693 .main-post .post-image:hover .image-overlay { 3694 background: rgba(140,140,249,.6) 3695 } 3696 3697 .main-post .post-content { 3698 padding: 20px 3699 } 3700 3701 .main-post .post-content h3 { 3702 font-family: nexa bold,sans-serif; 3703 font-size: 1.4rem; 3704 font-weight: 500; 3705 color: #8c8cf9; 3706 margin: 10px 0 0 3707 } 3708 3709 .main-post .post-content h3 a { 3710 color: #8c8cf9; 3711 -webkit-transition: all .3s; 3712 transition: all .3s 3713 } 3714 3715 .main-post .post-content h3 a:hover { 3716 opacity: .7 3717 } 3718 3719 .main-post .post-content .time { 3720 display: block; 3721 font-size: 1.1rem; 3722 font-weight: 500; 3723 color: #999; 3724 margin-bottom: 16px 3725 } 3726 3727 .main-post .post-content p { 3728 font-size: 1.1rem; 3729 color: #999 3730 } 3731 3732 .side-post { 3733 display: -webkit-box; 3734 display: -ms-flexbox; 3735 display: flex; 3736 -webkit-box-align: start; 3737 -ms-flex-align: start; 3738 align-items: flex-start; 3739 margin-bottom: 20px 3740 } 3741 3742 .side-post .post-image { 3743 position: relative 3744 } 3745 3746 .side-post .post-image img { 3747 display: block; 3748 width: 100px; 3749 min-width: 100px; 3750 height: 100px; 3751 min-height: 100px; 3752 -o-object-fit: cover; 3753 object-fit: cover; 3754 border-radius: 6px; 3755 -webkit-box-shadow: 0 14px 26px -12px rgba(140,140,249,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(140,140,249,.2)!important; 3756 box-shadow: 0 14px 26px -12px rgba(140,140,249,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(140,140,249,.2)!important 3757 } 3758 3759 .side-post .post-image .image-overlay { 3760 position: absolute; 3761 width: 100%; 3762 height: 100%; 3763 top: 0; 3764 left: 0; 3765 background: rgba(140,140,249,.8); 3766 border-radius: 6px; 3767 -webkit-transition: all .3s; 3768 transition: all .3s 3769 } 3770 3771 .side-post .post-image:hover .image-overlay { 3772 background: rgba(140,140,249,.6) 3773 } 3774 3775 .side-post .post-content { 3776 -webkit-box-flex: 2; 3777 -ms-flex-positive: 2; 3778 flex-grow: 2; 3779 padding: 0 20px 3780 } 3781 3782 .side-post .post-content h3 { 3783 font-family: nexa bold,sans-serif; 3784 font-size: 1.2rem; 3785 font-weight: 500; 3786 color: #8c8cf9; 3787 margin-bottom: 6px 3788 } 3789 3790 .side-post .post-content h3 a { 3791 color: #8c8cf9; 3792 -webkit-transition: all .3s; 3793 transition: all .3s 3794 } 3795 3796 .side-post .post-content h3 a:hover { 3797 opacity: .7 3798 } 3799 3800 .side-post .post-content p { 3801 font-size: 1rem; 3802 color: #999 3803 } 3804 3805 .no-credit-card { 3806 color: #999; 3807 font-size: .8rem 3808 } 3809 3810 @media only screen and (min-device-width: 768px)and (max-device-width:1024px)and (orientation:portrait) { 3811 .side-post .post-image img { 3812 width:90px!important; 3813 min-width: 90px!important; 3814 height: 90px!important; 3815 min-height: 90px!important 3816 } 3817 3818 .side-post .post-content { 3819 padding-right: 0!important 3820 } 3821 3822 .side-post .post-content h3 { 3823 font-size: 1rem!important 3824 } 3825 3826 .side-post .post-content p { 3827 font-size: .9rem!important 3828 } 3829 } 3830 3831 @media(max-width: 767px) { 3832 .main-post .post-content { 3833 padding:20px 0 3834 } 3835 3836 .side-post .post-image img { 3837 width: 60px!important; 3838 min-width: 60px!important; 3839 height: 60px!important; 3840 min-height: 60px!important 3841 } 3842 3843 .side-post .post-content { 3844 padding-right: 0!important 3845 } 3846 3847 .side-post .post-content h3 { 3848 font-size: 1rem!important 3849 } 3850 3851 .side-post .post-content p { 3852 font-size: .9rem!important 3853 } 3854 } 3855 </style> <!-- blog css --> 3856 <style> 3857 .bb-modal-loader { 3858 display: flex; 3859 flex-direction: column; 3860 align-items: center; 3861 justify-content: center; 3862 gap: 1.35rem;
3863 padding: 2.75rem 1.75rem 2.25rem; 3864 min-height: 200px; 3865 position: relative; 3866 overflow: hidden; 3867 } 3868 3869 .bb-modal-loader::before { 3870 content: ""; 3871 position: absolute; 3872 inset: 20% 15%; 3873 background: radial-gradient( 3874 ellipse at center, 3875 rgba(242, 122, 107, 0.12) 0%, 3876 rgba(192, 156, 221, 0.08) 35%, 3877 rgba(95, 156, 217, 0.05) 60%, 3878 transparent 75% 3879 ); 3880 animation: bb-loader-ambient 3.2s ease-in-out infinite alternate; 3881 pointer-events: none; 3882 } 3883 3884 .bb-modal-loader__visual { 3885 position: relative; 3886 width: 84px; 3887 height: 84px; 3888 flex-shrink: 0; 3889 } 3890 3891 .bb-modal-loader__glow { 3892 position: absolute; 3893 inset: 18%; 3894 border-radius: 50%; 3895 background: radial-gradient(circle, rgba(255, 208, 132, 0.45) 0%, transparent 70%); 3896 filter: blur(6px); 3897 animation: bb-loader-glow 2s ease-in-out infinite; 3898 } 3899 3900 .bb-modal-loader__ring { 3901 position: absolute; 3902 inset: 0; 3903 border-radius: 50%; 3904 border: 2.5px solid transparent; 3905 animation: bb-loader-spin 1.35s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; 3906 } 3907 3908 .bb-modal-loader__ring--1 { 3909 border-top-color: rgba(242, 122, 107, 0.95); 3910 border-right-color: rgba(223, 157, 185, 0.55); 3911 } 3912 3913 .bb-modal-loader__ring--2 { 3914 inset: 10px; 3915 border-top-color: rgba(255, 208, 132, 0.95); 3916 border-left-color: rgba(196, 222, 138, 0.55); 3917 animation-duration: 1.85s; 3918 animation-direction: reverse; 3919 } 3920 3921 .bb-modal-loader__ring--3 { 3922 inset: 20px; 3923 border-bottom-color: rgba(95, 156, 217, 0.95); 3924 border-right-color: rgba(192, 156, 221, 0.55); 3925 animation-duration: 2.35s; 3926 } 3927 3928 .bb-modal-loader__core { 3929 position: absolute; 3930 top: 50%; 3931 left: 50%; 3932 width: 16px; 3933 height: 16px; 3934 margin: -8px 0 0 -8px; 3935 border-radius: 50%; 3936 background: linear-gradient(135deg, #f27a6b 0%, #c09cdd 50%, #5f9ed9 100%); 3937 box-shadow: 3938 0 0 18px rgba(242, 122, 107, 0.55), 3939 0 0 32px rgba(192, 156, 221, 0.35); 3940 animation: bb-loader-core 1.4s ease-in-out infinite; 3941 } 3942 3943 .bb-modal-loader__orbit { 3944 position: absolute; 3945 top: 50%; 3946 left: 50%; 3947 width: 0; 3948 height: 0; 3949 font-size: 0.95rem; 3950 line-height: 1; 3951 transform-origin: 0 0; 3952 animation: bb-loader-orbit 2.8s linear infinite; 3953 } 3954 3955 .bb-modal-loader__orbit--1 { animation-duration: 2.4s; } 3956 .bb-modal-loader__orbit--2 { animation-duration: 3.1s; animation-delay: -0.9s; } 3957 .bb-modal-loader__orbit--3 { animation-duration: 3.8s; animation-delay: -1.6s; } 3958 3959 .bb-modal-loader__label { 3960 position: relative; 3961 z-index: 1; 3962 margin: 0; 3963 font-size: 1.45em; 3964 font-weight: 800; 3965 letter-spacing: 0.02em; 3966 line-height: 1.2; 3967 } 3968 3969 .bb-modal-loader__dots span { 3970 display: inline-block; 3971 animation: bb-loader-dot 1.4s ease-in-out infinite; 3972 } 3973 3974 .bb-modal-loader__dots span:nth-child(2) { animation-delay: 0.2s; } 3975 .bb-modal-loader__dots span:nth-child(3) { animation-delay: 0.4s; } 3976 3977 @keyframes bb-loader-spin { 3978 to { transform: rotate(360deg); } 3979 } 3980 3981 @keyframes bb-loader-core { 3982 0%, 100% { transform: scale(1); opacity: 1; } 3983 50% { transform: scale(1.18); opacity: 0.88; } 3984 } 3985 3986 @keyframes bb-loader-glow { 3987 0%, 100% { opacity: 0.55; transform: scale(0.95); } 3988 50% { opacity: 1; transform: scale(1.08); } 3989 } 3990 3991 @keyframes bb-loader-ambient { 3992 0% { opacity: 0.65; transform: scale(0.98); } 3993 100% { opacity: 1; transform: scale(1.04); } 3994 } 3995 3996 @keyframes bb-loader-orbit { 3997 from { transform: rotate(0deg) translateX(38px) rotate(0deg); } 3998 to { transform: rotate(360deg) translateX(38px) rotate(-360deg); } 3999 } 4000 4001 @keyframes bb-loader-dot { 4002 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 4003 30% { transform: translateY(-5px); opacity: 1; } 4004 } 4005 4006 @media (prefers-reduced-motion: reduce) { 4007 .bb-modal-loader::before, 4008 .bb-modal-loader__glow, 4009 .bb-modal-loader__ring, 4010 .bb-modal-loader__core, 4011 .bb-modal-loader__orbit, 4012 .bb-modal-loader__dots span, 4013 .bb-modal-loader__label.animate-charcter { 4014 animation: none !important; 4015 } 4016 } 4017</style> 4018 4019 4020 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-list/css/bulma-list.css"> 4021 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.css" media="print" onload="this.media='all'"> 4022 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-div
4022[email protected]/dist/bulma-divider.min.css" media="print" onload="this.media='all'"> 4023 <link rel="stylesheet" media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css"> 4024 <link rel="stylesheet" media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/npm/bulma-pricingtable/dist/css/bulma-pricingtable.min.css"> 4025 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-steps@2/dist/css/bulma-steps.min.css" media="print" onload="this.media='all'"> 4026 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-timeline.min.css" media="print" onload="this.media='all'"> 4027 <link media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet"> 4028 <link media="print" onload="this.media='all'" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> 4029 <link media="print" onload="this.media='all'" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> 4030 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/swiffy-slider.min.css" crossorigin="anonymous"> 4031 4032 <!-- Scripts --> 4033
4033<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
4033 4034
4034<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js" defer></script>
4034 4035
4035<script async src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
4035 4036
4036<script async src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
4036 4037
4037<script src="https://unpkg.com/css-doodle@latest/css-doodle.min.js"></script>
4037 4038
4038<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
4038 4039
4039<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
4039 4040
4040<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
4040 4041 4042 <!-- Favicons --> 4043 <link rel="apple-touch-icon" sizes="180x180" href="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/apple-touch-icon.png"> 4044 <link rel="icon" type="image/png" sizes="32x32" href="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/favicon-32x32.png"> 4045 <link rel="icon" type="image/png" sizes="16x16" href="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/favicon-16x16.png"> 4046 <link rel="icon" type="image/png" sizes="192x192" href="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/favicon-192x192.png"> 4047 <link rel="icon" type="image/png" sizes="512x512" href="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/favicon-512x512.png"> 4048 <link rel="shortcut icon" href="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/favicon.ico"> 4049 <link rel="manifest" href="/s3-proxy/?url=https%3A%2F%2Fd1e7moeca5rg6t.cloudfront.net%2Fstatic%2Fassets%2Fimg%2Ffavicons%2Fmanifest.json"> 4050 <meta name="msapplication-config" content="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/browserconfig.xml"> 4051 <meta name="msapplication-TileColor" content="#264653"> 4052 <meta name="theme-color" content="#264653"> 4053 4054 <!-- Google Analytics -->
vendor: 66 bytes, lines 4054-4055
4054 4055 <script async src="https://www.googletagmanager.com/gtag/js?id=
4055G-WTYT375PPT
vendor: 14 bytes, lines 4055-4056
4055"></script> 4056
4056<script> 4057
vendor: 139 bytes, lines 4057-4060
4057window.dataLayer = window.dataLayer || []; 4058 function gtag(){dataLayer.push(arguments);} 4059 gtag('js', new Date()); 4060 gtag('config', '
4060G-WTYT375PPT
vendor: 6 bytes, lines 4060-4061
4060'); 4061
4061</script>
4061 4062 4063
4063<script> 4064(function (window, document) { 4065 'use strict'; 4066 4067 var EVENT_NAME_RE = /^[a-z][a-z0-9_]{2,63}$/; 4068 var UTM_PROPS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']; 4069 var ALLOWLISTED_PROPS = { 4070 marketing_cta_clicked: ['source_surface', 'source_context', 'template_slug'].concat(UTM_PROPS), 4071 create_board_clicked: ['source_surface', 'source_context', 'template_slug'].concat(UTM_PROPS), 4072 celebrate_soon_impression: ['source_surface', 'source_context', 'placement', 'prior_board_id'], 4073 celebrate_soon_clicked: ['source_surface', 'source_context', 'placement', 'prior_board_id'], 4074 celebrate_soon_dismissed: ['source_surface', 'source_context', 'placement', 'prior_board_id'], 4075 ideas_contextual_cta_impression: ['experiment_key', 'experiment_variant', 'article', 'source_surface', 'source_context', 'placement'], 4076 ideas_contextual_cta_clicked: ['experiment_key', 'experiment_variant', 'article', 'source_surface', 'source_context', 'placement'], 4077 board_wizard_opened: ['source_surface', 'entry', 'prefill_template', 'source_context', 'template_slug'].concat(UTM_PROPS), 4078 template_selected: ['source_surface', 'source_context', 'template_slug'].concat(UTM_PROPS), 4079 wizard_step_completed: ['source_surface', 'source_context', 'template_slug', 'step'].concat(UTM_PROPS), 4080 board_created: ['source_surface', 'source_context', 'template_slug', 'board_id', 'is_first_board', 'has_reminder', 'tier', 'experiment_key', 'experiment_variant'].concat(UTM_PROPS), 4081 lifecycle_create_landing_viewed: ['source_surface', 'source_context'], 4082 post_submitted: ['board_id', 'post_id', 'actor_classification', 'source_surface', 'experiment_key', 'experiment_variant', 'is_logged_in', 'requires_approval', 'has_gift'], 4083 purchase_completed: ['board_id', 'tier', 'payment_mode', 'amount_cents', 'is_subscription'].concat(UTM_PROPS), 4084 board_post_limit_reached: ['board_id', 'is_creator'], 4085 board_upgrade_cta_clicked: ['board_id', 'is_creator', 'source_surface'], 4086 post_create_ready_shown: ['board_id', 'source_surface', 'is_creator', 'is_logged_in', 'tier', 'experiment_key', 'experiment_variant'], 4087 post_create_action_clicked: ['board_id', 'source_surface', 'action', 'is_creator', 'is_logged_in', 'tier', 'experiment_key', 'experiment_variant'], 4088 launch_guidance_shown: ['board_id', 'source_surface', 'action', 'tier', 'experiment_key', 'experiment_variant'], 4089 launch_guidance_dismissed: ['board_id', 'source_surface', 'action', 'tier', 'experiment_key', 'experiment_variant'], 4090 launch_action_clicked: ['board_id', 'source_surface', 'action', 'tier', 'experiment_key', 'experiment_variant'], 4091 share_modal_opened: ['board_id', 'source_surface', 'is_creator', 'is_logged_in'], 4092 share_link_copy_attempted: ['board_id', 'source_surface', 'method', 'is_creator', 'is_logged_in'], 4093 share_link_copy_result: ['board_id', 'source_surface', 'method', 'result', 'is_creator', 'is_logged_in'], 4094 native_share_invoked: ['board_id', 'source_surface', 'method', 'is_creator', 'is_logged_in'], 4095 native_share_result: ['board_id', 'source_surface', 'method', 'result', 'is_creator', 'is_logged_in'], 4096 contribution_started: ['board_id', 'source_surface', 'is_creator', 'is_logged_in'], 4097 contributor_promo_shown: ['board_id', 'source_surface', 'source_context', 'promo_variant'], 4098 contributor_promo_clicked: ['board_id', 'source_surface', 'source_context', 'promo_variant'], 4099 passive_create_cta_shown: ['board_id', 'source_surface', 'source_context', 'promo_variant', 'experiment_key', 'experiment_variant'], 4100 passive_create_cta_clicked: ['board_id', 'source_surface', 'source_context', 'promo_variant', 'experiment_key', 'experiment_variant'], 4101 duplicate_board_warning_shown: [ 4102 'board_id', 4103 'existing_board_id', 4104 'match_reason', 4105 'existing_board_post_count', 4106 'has_subscription_access', 4107 'occasion_similarity', 4108 ], 4109 duplicate_board_create_confirmed: [ 4110 'board_id', 4111 'existing_board_id', 4112 'match_reason', 4113 'existing_board_post_count', 4114 'has_subscription_access', 4115 'occasion_similarity', 4116 ], 4117 test_event_debug: ['source_surface', 'source_context'], 4118 }; 4119 var BLOCKED_KEY_PARTS = ['email', 'name', 'title', 'slug', 'message', 'desc', 'who', 'what', 'built_for']; 4120 var ALLOWED_SOURCE_SURFACES = [ 4121 'homepage', 4122 'homepage_hero',
4123 'navbar', 4124 'dashboard', 4125 'post_create', 4126 'board_detail', 4127 'dashboard_table', 4128 'dashboard_mobile', 4129 'post_seed', 4130 'welcome_email', 4131 'zero_post_recovery', 4132 'celebrate_soon', 4133 'post_complete', 4134 'exit_intent', 4135 'board_page_passive', 4136 'email_received_board', 4137 'email_sent_board', 4138 'email_return_the_favor', 4139 'email_delivered_download', 4140 'email_thankyou_reminder', 4141 'email_thankyou_actual', 4142 'pricing', 4143 'team_plan', 4144 'use_case', 4145 'use_cases_hub', 4146 'compare', 4147 'events_widget', 4148 'ideas', 4149 'magic_link', 4150 'unknown', 4151 ]; 4152 var SOURCE_CONTEXT_RE = /^[a-z0-9][a-z0-9_-]{0,254}$/; 4153 var TEMPLATE_SLUG_RE = /^[a-z0-9_-]{0,64}$/; 4154 var CREATE_INTENT_URL = '/api/analytics/create-intent/'; 4155 var FUNNEL_EVENT_URL = '/api/analytics/funnel-event/'; 4156 var NEW_BOARD_PATH_RE = /\/boards\/new\/?$/; 4157 var START_BOARD_PATH_RE = /\/start-board\/?$/; 4158 4159 function bbAnalyticsDebugEnabled() { 4160 return window.__BB_ANALYTICS_DEBUG === true; 4161 } 4162 4163 function normalizeSourceSurface(value) { 4164 if (!value || typeof value !== 'string') return 'unknown'; 4165 var cleaned = value.trim().toLowerCase(); 4166 if (ALLOWED_SOURCE_SURFACES.indexOf(cleaned) === -1) return 'unknown'; 4167 return cleaned; 4168 } 4169 4170 function normalizeSourceContext(value) { 4171 if (!value || typeof value !== 'string') return ''; 4172 var cleaned = value.trim().toLowerCase(); 4173 if (!cleaned || !SOURCE_CONTEXT_RE.test(cleaned)) return ''; 4174 return cleaned; 4175 } 4176 4177 function normalizeTemplateSlug(value) { 4178 if (!value || typeof value !== 'string') return ''; 4179 var cleaned = value.trim().toLowerCase(); 4180 if (!cleaned || !TEMPLATE_SLUG_RE.test(cleaned)) return ''; 4181 return cleaned; 4182 } 4183 4184 function normalizeAttributionProps(props) { 4185 props = props || {}; 4186 return { 4187 source_surface: normalizeSourceSurface(props.source_surface), 4188 source_context: normalizeSourceContext(props.source_context), 4189 template_slug: normalizeTemplateSlug(props.template_slug), 4190 }; 4191 } 4192 4193 function isBlockedKey(key) { 4194 if (!key) return true; 4195 var lower = String(key).toLowerCase(); 4196 for (var i = 0; i < BLOCKED_KEY_PARTS.length; i++) { 4197 if (lower.indexOf(BLOCKED_KEY_PARTS[i]) !== -1) return true; 4198 } 4199 return false; 4200 } 4201 4202 function sanitizeProps(event, props) { 4203 var allowed = ALLOWLISTED_PROPS[event] || []; 4204 var out = {}; 4205 if (!props || typeof props !== 'object') return out; 4206 for (var i = 0; i < allowed.length; i++) { 4207 var key = allowed[i]; 4208 if (isBlockedKey(key)) continue; 4209 if (!(key in props)) continue; 4210 var value = props[key]; 4211 if (value === null || value === undefined || value === '') continue; 4212 if (key === 'source_surface') { 4213 out[key] = normalizeSourceSurface(value); 4214 continue; 4215 } 4216 if (key === 'source_context') { 4217 var context = normalizeSourceContext(value); 4218 if (context) out[key] = context; 4219 continue; 4220 } 4221 if (key === 'template_slug' || key === 'prefill_template') { 4222 var slug = normalizeTemplateSlug(value); 4223 if (slug) out[key] = slug; 4224 continue; 4225 } 4226 if (key === 'board_id' || key === 'prior_board_id' || key === 'amount_cents' || key === 'recipient_count') { 4227 var num = parseInt(value, 10); 4228 if (!isNaN(num)) out[key] = num; 4229 continue; 4230 } 4231 if ( 4232 key === 'is_first_board' || 4233 key === 'has_reminder' || 4234 key === 'is_logged_in' || 4235 key === 'requires_approval' || 4236 key === 'has_gift' || 4237 key === 'is_subscription' || 4238 key === 'is_creator' || 4239 key === 'has_subscription_access' 4240 ) { 4241 out[key] = !!value; 4242 continue; 4243 } 4244 if (typeof value === 'string') { 4245 var cleaned = value.trim(); 4246 if (cleaned && cleaned.length <= 128) out[key] = cleaned; 4247 } 4248 } 4249 return out; 4250 } 4251 4252 function getCsrfToken() { 4253 try { 4254 if (window.Cookies && typeof window.Cookies.get === 'function') { 4255 var fromCookie = window.Cookies.get('csrftoken'); 4256 if (fromCookie) return fromCookie; 4257 } 4258 } catch (e) { /* ignore */ } 4259 try { 4260 var cookieParts = (document.cookie || '').split(';'); 4261 for (var i = 0; i < cookieParts.length; i++) { 4262 var cookie = cookieParts[i].trim(); 4263 if (cookie.indexOf('csrftoken=') === 0) { 4264 return decodeURIComponent(cookie.slice('csrftoken='.length)); 4265 } 4266 } 4267 } catch (e) { /* ignore */ } 4268 var input = document.querySelector('[name=csrfmiddlewaretoken]'); 4269 return input ? input.value : ''; 4270 } 4271 4272 function emitGtag(event, props) { 4273 var params = props || {}; 4274 var debug = bbAnalyticsDebugEnabled(); 4275 if (debug) { 4276 console.debug('[bbTrack] emitGtag -> gtag', event, params); 4277 } 4278 try { 4279 if (typeof window.gtag === 'function') { 4280 window.gtag('event', event, params); 4281 if (debug) { 4282 console.debug('[bbTrack] emitGtag done via gtag()', event); 4283 } 4284 return; 4285 } 4286 if (window.dataLayer && Array.isArray(window.dataLayer)) { 4287 window.dataLayer.push(['event', event, params]); 4288 if (debug) { 4289 console.debug('[bbTrack] emitGtag done via dataLayer fallback', event); 4290 } 4291 return; 4292 } 4293 if (debug) { 4294 console.debug('[bbTrack] emitGtag skipped: no gtag or dataLayer', event); 4295 } 4296 } catch (err) { 4297 if (debug) { 4298 console.debug('[bbTrack] emitGtag error', event, err); 4299 } 4300 } 4301 } 4302 4303 window.bbTrack = function (event, props) { 4304 try { 4305 if (!event || !EVENT_NAME_RE.test(event)) { 4306 if (bbAnalyticsDebugEnabled()) {
4307 console.debug('[bbTrack] rejected invalid event name', event); 4308 } 4309 return; 4310 } 4311 var cleaned = sanitizeProps(event, props || {}); 4312 if (bbAnalyticsDebugEnabled()) { 4313 console.debug('[bbTrack]', event, cleaned); 4314 } 4315 emitGtag(event, cleaned); 4316 } catch (e) { 4317 if (bbAnalyticsDebugEnabled()) { 4318 console.debug('[bbTrack] error', event, e); 4319 } 4320 } 4321 }; 4322 4323 window.__bbPendingWizardOpen = null; 4324 4325 function bbBuildAttributionQueryString() { 4326 var pending = window.__bbPendingWizardOpen; 4327 if (!pending) return ''; 4328 var parts = []; 4329 if (pending.source_surface) { 4330 parts.push('source_surface=' + encodeURIComponent(pending.source_surface)); 4331 } 4332 if (pending.source_context) { 4333 parts.push('source_context=' + encodeURIComponent(pending.source_context)); 4334 } 4335 if (pending.template_slug) { 4336 parts.push('template_slug=' + encodeURIComponent(pending.template_slug)); 4337 } 4338 return parts.join('&'); 4339 } 4340 4341 function bbAppendAttributionToUrl(url) { 4342 var qs = bbBuildAttributionQueryString(); 4343 if (!qs) return url; 4344 return url + (url.indexOf('?') >= 0 ? '&' : '?') + qs; 4345 } 4346 4347 function isNewBoardUrl(url) { 4348 if (!url) return false; 4349 try { 4350 var path = String(url).split('?')[0].split('#')[0]; 4351 if (path.indexOf('http') === 0) { 4352 path = new URL(path).pathname; 4353 } 4354 return NEW_BOARD_PATH_RE.test(path); 4355 } catch (e) { 4356 return false; 4357 } 4358 } 4359 4360 function installNewBoardAjaxHook() { 4361 if (!window.jQuery || window.jQuery.__bbNewBoardHook) return; 4362 window.jQuery.__bbNewBoardHook = true; 4363 window.jQuery.ajaxPrefilter(function (options) { 4364 if (!options.url || !isNewBoardUrl(options.url)) return; 4365 options.url = bbAppendAttributionToUrl(options.url); 4366 }); 4367 } 4368 4369 installNewBoardAjaxHook(); 4370 4371 function bbSaveCreateIntent(props) { 4372 try { 4373 var body = JSON.stringify(sanitizeProps('create_board_clicked', props || {})); 4374 var headers = { 'Content-Type': 'application/json' }; 4375 var token = getCsrfToken(); 4376 if (token) headers['X-CSRFToken'] = token; 4377 if (window.fetch) { 4378 fetch(CREATE_INTENT_URL, { 4379 method: 'POST', 4380 headers: headers, 4381 body: body, 4382 credentials: 'same-origin', 4383 }).catch(function () {}); 4384 } else if (window.jQuery) { 4385 window.jQuery.ajax({ 4386 url: CREATE_INTENT_URL, 4387 type: 'POST', 4388 contentType: 'application/json', 4389 data: body, 4390 headers: token ? { 'X-CSRFToken': token } : {}, 4391 }); 4392 } 4393 } catch (e) { /* ignore */ } 4394 } 4395 4396 window.bbTrackCreateBoardClicked = function (props) { 4397 var cleaned = normalizeAttributionProps(props || {}); 4398 window.__bbPendingWizardOpen = cleaned; 4399 window.bbTrack('create_board_clicked', cleaned); 4400 bbSaveCreateIntent(cleaned); 4401 }; 4402 4403 function parseStartBoardAttribution(href) { 4404 if (!href) return null; 4405 try { 4406 var url = href.indexOf('http') === 0 ? new URL(href) : new URL(href, window.location.origin); 4407 if (!START_BOARD_PATH_RE.test(url.pathname)) return null; 4408 return normalizeAttributionProps({ 4409 source_surface: url.searchParams.get('source_surface') || '', 4410 source_context: url.searchParams.get('source_context') || '', 4411 template_slug: url.searchParams.get('template_slug') || url.searchParams.get('template') || '', 4412 }); 4413 } catch (e) { 4414 return null; 4415 } 4416 } 4417 4418 function bbPostFunnelEvent(event, props) { 4419 try { 4420 if (!FUNNEL_EVENT_URL || !event) return Promise.resolve(false); 4421 var body = JSON.stringify({ 4422 event: event, 4423 props: sanitizeProps(event, props || {}), 4424 }); 4425 var headers = { 'Content-Type': 'application/json' }; 4426 var token = getCsrfToken(); 4427 if (token) headers['X-CSRFToken'] = token; 4428 if (window.fetch) { 4429 return fetch(FUNNEL_EVENT_URL, { 4430 method: 'POST', 4431 headers: headers, 4432 body: body, 4433 credentials: 'same-origin', 4434 keepalive: true, 4435 }).then(function (response) { 4436 return !!response && response.ok; 4437 }).catch(function () { 4438 return false;
4439 }); 4440 } 4441 } catch (e) { /* ignore */ } 4442 return Promise.resolve(false); 4443 } 4444 4445 window.bbTrackProductEvent = function (event, props) { 4446 var cleaned = sanitizeProps(event, props || {}); 4447 window.bbTrack(event, cleaned); 4448 bbPostFunnelEvent(event, cleaned); 4449 }; 4450 4451 document.addEventListener('DOMContentLoaded', function () { 4452 try { 4453 var current = new URL(window.location.href); 4454 var landing = current.pathname === '/boards/' && current.searchParams.get('open_create') === '1'; 4455 var next = current.searchParams.get('next'); 4456 if (next) { 4457 var nextUrl = new URL(next, current.origin); 4458 landing = landing || (nextUrl.origin === current.origin && 4459 START_BOARD_PATH_RE.test(nextUrl.pathname)); 4460 } 4461 if (landing) window.bbTrackProductEvent('lifecycle_create_landing_viewed', {}); 4462 } catch (e) { /* ignore */ } 4463 }); 4464 4465 window.bbPersistProductEvent = function (event, props) { 4466 return bbPostFunnelEvent(event, sanitizeProps(event, props || {})); 4467 }; 4468 4469 window.bbTrackBoardWizardOpened = function (props) { 4470 var cleaned = sanitizeProps('board_wizard_opened', props || {}); 4471 window.bbTrack('board_wizard_opened', cleaned); 4472 bbPostFunnelEvent('board_wizard_opened', cleaned); 4473 }; 4474 4475 window.bbTrackTemplateSelected = function (props) { 4476 var cleaned = sanitizeProps('template_selected', props || {}); 4477 window.bbTrack('template_selected', cleaned); 4478 bbPostFunnelEvent('template_selected', cleaned); 4479 }; 4480 4481 window.bbTrackWizardStepCompleted = function (props) { 4482 var cleaned = sanitizeProps('wizard_step_completed', props || {}); 4483 window.bbTrack('wizard_step_completed', cleaned); 4484 bbPostFunnelEvent('wizard_step_completed', cleaned); 4485 }; 4486 4487 window.bbApplyWizardAttributionPrefill = function () { 4488 var pending = window.__bbPendingWizardOpen || {}; 4489 if (!pending.template_slug) return; 4490 if (window.bbPrefillNewBoard) { 4491 window.bbPrefillNewBoard({ template: pending.template_slug }); 4492 } 4493 }; 4494 4495 window.bbMirrorAnalyticsEvents = function (data) { 4496 try { 4497 var events = (data && data.analytics_events) || []; 4498 for (var i = 0; i < events.length; i++) { 4499 var item = events[i]; 4500 if (!item || !item.event) continue; 4501 var copy = {}; 4502 for (var key in item) { 4503 if (Object.prototype.hasOwnProperty.call(item, key) && key !== 'event') { 4504 copy[key] = item[key]; 4505 } 4506 } 4507 window.bbTrack(item.event, copy); 4508 } 4509 } catch (e) { /* ignore */ } 4510 }; 4511 4512 function inferCreateSource(el) { 4513 var surface = el.getAttribute('data-bb-source-surface'); 4514 var context = el.getAttribute('data-bb-source-context') || ''; 4515 var templateSlug = el.getAttribute('data-template') || el.getAttribute('data-bb-template-slug') || ''; 4516 if (surface) { 4517 return normalizeAttributionProps({ 4518 source_surface: surface, 4519 source_context: context, 4520 template_slug: templateSlug, 4521 }); 4522 } 4523 if (el.closest('.bb-recognize-modal-card, .bb-recognize-widget, #bb-recognize-root')) { 4524 return normalizeAttributionProps({ 4525 source_surface: 'celebrate_soon', 4526 source_context: el.getAttribute('data-recognize-kind') || 'widget', 4527 template_slug: el.getAttribute('data-template') || '', 4528 }); 4529 } 4530 if (window.location.pathname.indexOf('/teams') === 0) { 4531 return normalizeAttributionProps({ 4532 source_surface: 'team_plan', 4533 source_context: context, 4534 template_slug: templateSlug, 4535 }); 4536 } 4537 if (el.closest('.bb-events-widget')) { 4538 return normalizeAttributionProps({ 4539 source_surface: 'events_widget', 4540 source_context: context || 'widget', 4541 template_slug: templateSlug, 4542 }); 4543 } 4544 if (el.closest('.menu_left, .menu-left, #left-menu, .bb-sidebar')) { 4545 return normalizeAttributionProps({ 4546 source_surface: 'navbar', 4547 source_context: 'sidebar', 4548 template_slug: templateSlug, 4549 }); 4550 } 4551 if (window.location.pathname === '/' || window.location.pathname === '/boards/') { 4552 return normalizeAttributionProps({ 4553 source_surface: 'dashboard', 4554 source_context: context, 4555 template_slug: templateSlug, 4556 }); 4557 } 4558 return normalizeAttributionProps({ 4559 source_surface: 'unknown', 4560 source_context: context, 4561 template_slug: templateSlug, 4562 }); 4563 } 4564 4565 document.addEventListener('click', function (e) { 4566 var target = e.target; 4567 if (!target || !target.closest) return; 4568 var marketing = target.closest('[data-bb-marketing-create]'); 4569 if (marketing) { 4570 var attr = parseStartBoardAttribution(marketing.getAttribute('href')); 4571 if (attr) { 4572 window.__bbPendingWizardOpen = attr;
4573 bbSaveCreateIntent(attr); 4574 } 4575 return; 4576 } 4577 var el = target.closest('.js-add-board'); 4578 if (!el) return; 4579 window.bbTrackCreateBoardClicked(inferCreateSource(el)); 4580 }, true); 4581 4582 function watchBoardWizardModal() { 4583 var modal = document.getElementById('modal-board'); 4584 if (!modal || modal.__bbWizardWatch) return; 4585 modal.__bbWizardWatch = true; 4586 4587 function resetWizardOpenTracking() { 4588 if (modal.getAttribute('data-bb-wizard-open-tracked') === '1') { 4589 modal.removeAttribute('data-bb-wizard-open-tracked'); 4590 if (bbAnalyticsDebugEnabled()) { 4591 console.debug('[bbTrack] board_wizard_open session ended'); 4592 } 4593 } 4594 } 4595 4596 function tryTrackWizardOpen(trigger) { 4597 if (!modal.classList.contains('is-active')) return; 4598 if (!modal.querySelector('[data-wizard-root]')) return; 4599 if (modal.getAttribute('data-bb-wizard-open-tracked') === '1') { 4600 if (bbAnalyticsDebugEnabled()) { 4601 console.debug('[bbTrack] board_wizard_opened skipped (already tracked)', trigger || ''); 4602 } 4603 return; 4604 } 4605 modal.setAttribute('data-bb-wizard-open-tracked', '1'); 4606 var pending = window.__bbPendingWizardOpen || {}; 4607 if (pending.template_slug) { 4608 window.bbApplyWizardAttributionPrefill(); 4609 } 4610 window.__bbPendingWizardOpen = null; 4611 if (bbAnalyticsDebugEnabled()) { 4612 window.__bbWizardOpenedFireCount = (window.__bbWizardOpenedFireCount || 0) + 1; 4613 console.debug( 4614 '[bbTrack] board_wizard_opened firing', 4615 trigger || '', 4616 '(total fires:', 4617 window.__bbWizardOpenedFireCount, 4618 ')' 4619 ); 4620 } 4621 window.bbTrackBoardWizardOpened({ 4622 source_surface: pending.source_surface || 'unknown', 4623 entry: 'modal', 4624 prefill_template: pending.template_slug || pending.prefill_template || '', 4625 source_context: pending.source_context || '', 4626 template_slug: pending.template_slug || '', 4627 }); 4628 } 4629 4630 var observer = new MutationObserver(function (mutations) { 4631 var modalClassChanged = false; 4632 var contentChanged = false; 4633 for (var i = 0; i < mutations.length; i++) { 4634 var m = mutations[i]; 4635 if (m.target === modal && m.type === 'attributes' && m.attributeName === 'class') { 4636 modalClassChanged = true; 4637 } else if (m.type === 'childList') { 4638 contentChanged = true; 4639 } 4640 } 4641 if (modalClassChanged) { 4642 if (modal.classList.contains('is-active')) { 4643 tryTrackWizardOpen('modal-class-open'); 4644 } else { 4645 resetWizardOpenTracking(); 4646 } 4647 return; 4648 } 4649 if (contentChanged && modal.classList.contains('is-active')) { 4650 tryTrackWizardOpen('modal-content-change'); 4651 } 4652 }); 4653 observer.observe(modal, { 4654 attributes: true, 4655 attributeFilter: ['class'], 4656 childList: true, 4657 subtree: true, 4658 }); 4659 } 4660 4661 if (document.readyState === 'loading') { 4662 document.addEventListener('DOMContentLoaded', watchBoardWizardModal); 4663 } else { 4664 watchBoardWizardModal(); 4665 } 4666 4667 window.bbAnalyticsTest = function () { 4668 window.__BB_ANALYTICS_DEBUG = true; 4669 window.bbTrack('test_event_debug', { 4670 source_surface: 'dashboard', 4671 source_context: 'qa_manual', 4672 }); 4673 }; 4674 4675 var UPGRADE_CTA_URL = '/api/analytics/upgrade-cta-clicked/'; 4676 4677 window.bbTrackUpgradeCtaServer = function (payload) { 4678 try { 4679 if (!UPGRADE_CTA_URL || !payload) return; 4680 var boardId = parseInt(payload.board_id, 10); 4681 if (isNaN(boardId)) return; 4682 var body = { 4683 board_id: boardId, 4684 source_surface: payload.source_surface || '', 4685 }; 4686 if (payload.existing_board_id != null && payload.existing_board_id !== '') { 4687 var existingId = parseInt(payload.existing_board_id, 10); 4688 if (!isNaN(existingId)) body.existing_board_id = existingId; 4689 } 4690 var csrf = getCsrfToken(); 4691 var headers = { 'Content-Type': 'application/json' }; 4692 if (csrf) headers['X-CSRFToken'] = csrf; 4693 fetch(UPGRADE_CTA_URL, { 4694 method: 'POST', 4695 headers: headers, 4696 body: JSON.stringify(body), 4697 keepalive: true, 4698 credentials: 'same-origin', 4699 }).catch(function () { /* ignore */ }); 4700 } catch (e) { /* ignore */ } 4701 }; 4702})(window, document); 4703</script>
4703 4704 4705<style id="bb-dup-board-warning-styles"> 4706 /* 4707 * Global head_custom_css_effects sets .swal2-popup.swal2-modal.swal2-show to a dark 4708 * gradient. This block overrides ONLY bb-dup-board-warning with an opaque warm card. 4709 */ 4710 .swal2-container.bb-dup-board-warning-container { 4711 z-index: 20000 !important; 4712 } 4713 4714 .swal2-container.bb-dup-board-warning-container .swal2-popup.bb-dup-board-warning { 4715 background: #fffaf7 !important; 4716 background-image: 4717 radial-gradient(circle at 0% 0%, rgba(244, 114, 182, 0.1), transparent 52%), 4718 radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 48%), 4719 radial-gradient(circle at 50% 120%, rgba(251, 191, 36, 0.08), transparent 58%), 4720 linear-gradient(180deg, #fffaf7 0%, #fff5fb 52%, #f8f7ff 100%) !important; 4721 backdrop-filter: none !important; 4722 -webkit-backdrop-filter: none !important; 4723 color: #111827 !important; 4724 opacity: 1 !important; 4725 border: 1px solid rgba(244, 114, 182, 0.18) !important; 4726 box-shadow: 4727 0 28px 72px rgba(15, 23, 42, 0.24), 4728 0 0 0 1px rgba(255, 255, 255, 0.65) inset !important; 4729 border-radius: 22px !important; 4730 overflow: hidden; 4731 padding: 0 !important; 4732 } 4733 4734 .swal2-container.bb-dup-board-warning-container .swal2-popup.bb-dup-board-warning::before { 4735 content: ''; 4736 display: block; 4737 height: 2px; 4738 background: linear-gradient( 4739 90deg, 4740 #38bdf8 0%, 4741 #818cf8 34%, 4742 #f472b6 68%, 4743 #fbbf24 100% 4744 ); 4745 } 4746 4747 .swal2-container.bb-dup-board-warning-container .swal2-title { 4748 margin: 0 !important; 4749 padding: 0 !important; 4750 color: #111827 !important; 4751 background: transparent !important; 4752 } 4753 4754 .swal2-container.bb-dup-board-warning-container .swal2-html-container { 4755 margin: 0 !important; 4756 padding: 0 !important; 4757 color: #374151 !important; 4758 background: transparent !important; 4759 overflow: visible !important; 4760 } 4761 4762 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__inner { 4763 background: transparent; 4764 color: #374151; 4765 } 4766 4767 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__title-row { 4768 display: flex; 4769 align-items: flex-start; 4770 gap: 14px; 4771 padding: 24px 28px 0; 4772 } 4773 4774 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__icon { 4775 flex: 0 0 auto; 4776 display: inline-flex; 4777 align-items: center; 4778 justify-content: center; 4779 width: 44px; 4780 height: 44px; 4781 border-radius: 14px; 4782 color: #6d28d9; 4783 } 4784 4785 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__icon svg { 4786 width: 22px; 4787 height: 22px; 4788 display: block; 4789 } 4790 4791 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__title { 4792 padding: 2px 0 0; 4793 font-weight: 800; 4794 font-size: 24px; 4795 line-height: 1.25; 4796 color: #111827 !important; 4797 letter-spacing: -0.02em; 4798 } 4799 4800 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__body { 4801 padding: 14px 28px 0; 4802 font-size: 16px; 4803 line-height: 1.65; 4804 color: #4b5563 !important; 4805 } 4806 4807 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__body > p { 4808 margin: 0; 4809 color: #4b5563 !important; 4810 } 4811 4812 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__context { 4813 position: relative; 4814 display: flex; 4815 gap: 12px; 4816 margin: 18px 0 0; 4817 padding: 14px 16px; 4818 border-radius: 14px; 4819 background: rgba(255, 255, 255, 0.82); 4820 } 4821 4822 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__context-accent { 4823 flex: 0 0 4px; 4824 width: 4px; 4825 border-radius: 999px; 4826 background: linear-gradient(180deg, #38bdf8 0%, #818cf8 45%, #f472b6 100%); 4827 } 4828 4829 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__context-body { 4830 min-width: 0; 4831 display: flex; 4832 flex-direction: column; 4833 gap: 4px; 4834 } 4835 4836 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__context-label { 4837 font-size: 11px; 4838 font-weight: 700; 4839 letter-spacing: 0.08em; 4840 text-transform: uppercase; 4841 color: #6b7280 !important; 4842 } 4843 4844 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__board-link { 4845 display: inline-block; 4846 max-width: 100%; 4847 font-size: 16px; 4848 line-height: 1.35; 4849 color: #312e81 !important; 4850 font-weight: 700; 4851 text-decoration: none; 4852 word-break: break-word; 4853 } 4854 4855 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__board-link:hover, 4856 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__board-link:focus { 4857 color: #1e1b4b !important; 4858 text-decoration: underline; 4859 text-underline-offset: 3px; 4860 } 4861 4862 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__board-link:focus-visible { 4863 outline: 2px solid #6366f1; 4864 outline-offset: 2px; 4865 border-radius: 4px; 4866 } 4867 4868 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__context-meta { 4869 font-size: 13px; 4870 line-height: 1.45; 4871 color: #6b7280 !important; 4872 } 4873 4874 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__upgrade-nudge { 4875 margin: 16px 0 0; 4876 padding: 12px 14px; 4877 border-radius: 12px; 4878 background: linear-gradient(135deg, rgba(238, 242, 255, 0.95), rgba(252, 231, 243, 0.85)); 4879 } 4880 4881 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__note { 4882 margin: 0; 4883 font-size: 14px; 4884 line-height: 1.55; 4885 color: #4338ca !important; 4886 font-weight: 600; 4887 } 4888 4889 .swal2-container.bb-dup-board-warning-container .swal2-actions.bb-dup-board-warning__actions { 4890 gap: 10px; 4891 padding: 18px 28px 24px; 4892 margin: 0; 4893 flex-wrap: wrap; 4894 justify-content: flex-end; 4895 background: transparent !important; 4896 } 4897 4898 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__primary { 4899 border-radius: 12px !important; 4900 padding: 12px 20px !important; 4901 font-weight: 700 !important; 4902 font-size: 15px !important; 4903 background: linear-gradient(135deg, #4338ca 0%, #7c3aed 52%, #db2777 100%) !important; 4904 color: #ffffff !important; 4905 border: none !important; 4906 box-shadow: 0 10px 24px rgba(109, 40, 217, 0.28) !important; 4907 } 4908 4909 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__primary:hover, 4910 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__primary:focus { 4911 background: linear-gradient(135deg, #3730a3 0%, #6d28d9 52%, #be185d 100%) !important; 4912 color: #ffffff !important; 4913 box-shadow: 0 12px 28px rgba(109, 40, 217, 0.34) !important; 4914 } 4915 4916 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__primary:focus-visible { 4917 outline: 2px solid #312e81 !important; 4918 outline-offset: 2px !important; 4919 } 4920 4921 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__secondary { 4922 border-radius: 12px !important; 4923 padding: 12px 16px !important; 4924 font-weight: 600 !important; 4925 font-size: 15px !important; 4926 background: rgba(255, 255, 255, 0.92) !important; 4927 color: #4b5563 !important; 4928 border: 1px solid rgba(156, 163, 175, 0.55) !important; 4929 box-shadow: none !important; 4930 } 4931 4932 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__secondary:hover, 4933 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__secondary:focus { 4934 background: #ffffff !important; 4935 color: #111827 !important; 4936 border-color: #9ca3af !important; 4937 } 4938 4939 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__secondary:focus-visible { 4940 outline: 2px solid #6366f1 !important; 4941 outline-offset: 2px !important; 4942 } 4943 4944 .swal2-container.bb-dup-board-warning-container .swal2-close.bb-dup-board-warning__close { 4945 color: #6b7280 !important; 4946 opacity: 0.9; 4947 font-size: 1.75rem; 4948 } 4949 4950 .swal2-container.bb-dup-board-warning-container .swal2-close.bb-dup-board-warning__close:hover, 4951 .swal2-container.bb-dup-board-warning-container .swal2-close.bb-dup-board-warning__close:focus { 4952 color: #111827 !important; 4953 opacity: 1; 4954 } 4955 4956 .swal2-container.bb-dup-board-warning-container .swal2-close.bb-dup-board-warning__close:focus-visible { 4957 outline: 2px solid #6366f1 !important; 4958 outline-offset: 2px !important; 4959 } 4960 4961 @media (max-width: 520px) { 4962 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__title-row { 4963 padding: 20px 20px 0; 4964 gap: 12px; 4965 } 4966 4967 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__title { 4968 font-size: 22px; 4969 } 4970 4971 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__icon { 4972 width: 40px; 4973 height: 40px; 4974 border-radius: 12px; 4975 } 4976 4977 .swal2-container.bb-dup-board-warning-container .bb-dup-board-warning__body { 4978 padding: 12px 20px 0; 4979 } 4980 4981 .swal2-container.bb-dup-board-warning-container .swal2-actions.bb-dup-board-warning__actions { 4982 padding: 14px 20px 20px; 4983 flex-direction: column-reverse; 4984 align-items: stretch; 4985 } 4986 4987 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__primary, 4988 .swal2-container.bb-dup-board-warning-container .swal2-styled.bb-dup-board-warning__secondary { 4989 width: 100%; 4990 } 4991 } 4992</style> 4993
4994<script> 4995(function (window, $) { 4996 'use strict'; 4997 4998 function trackEvent(name, props) { 4999 try { 5000 if (window.bbTrack) { 5001 window.bbTrack(name, props || {}); 5002 } else if (window.dataLayer && Array.isArray(window.dataLayer)) { 5003 window.dataLayer.push(Object.assign({ event: name }, props || {})); 5004 } else if (window.gtag) { 5005 window.gtag('event', name, props || {}); 5006 } 5007 } catch (e) { /* ignore */ } 5008 } 5009 5010 function analyticsProps(existing) { 5011 var props = { 5012 board_id: existing.board_id, 5013 existing_board_id: existing.board_id, 5014 }; 5015 if (existing.match_reason) props.match_reason = existing.match_reason; 5016 if (typeof existing.approved_post_count === 'number') { 5017 props.existing_board_post_count = existing.approved_post_count; 5018 } 5019 if (typeof existing.occasion_similarity === 'number') { 5020 props.occasion_similarity = existing.occasion_similarity; 5021 } 5022 props.has_subscription_access = false; 5023 return props; 5024 } 5025 5026 var DUP_MODAL_ICON = '' 5027 + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' 5028 + '<path fill="currentColor" d="M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-6.17L8.6 19.2A1 1 0 0 1 7 18.4V16H7a3 3 0 0 1-3-3V5z"/>' 5029 + '<path fill="currentColor" d="M8.5 8.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm3.75-1.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0zm3.75 1.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z"/>' 5030 + '</svg>'; 5031 5032 function hardenDuplicateModalSurface(popup) { 5033 if (!popup) return; 5034 popup.style.setProperty('background', '#fffaf7', 'important'); 5035 popup.style.setProperty( 5036 'background-image', 5037 'radial-gradient(circle at 0% 0%, rgba(244, 114, 182, 0.1), transparent 52%),' 5038 + ' radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 48%),' 5039 + ' linear-gradient(180deg, #fffaf7 0%, #fff5fb 52%, #f8f7ff 100%)', 5040 'important' 5041 ); 5042 popup.style.setProperty('backdrop-filter', 'none', 'important'); 5043 popup.style.setProperty('-webkit-backdrop-filter', 'none', 'important'); 5044 popup.style.setProperty('color', '#111827', 'important'); 5045 popup.style.setProperty('opacity', '1', 'important'); 5046 } 5047 5048 function escapeHtml(text) { 5049 var div = document.createElement('div'); 5050 div.textContent = text == null ? '' : String(text); 5051 return div.innerHTML; 5052 } 5053 5054 function buildExistingBoardContext(existing) { 5055 var title = existing.board_title || 'Untitled board'; 5056 var url = existing.board_url || '#'; 5057 var count = existing.approved_post_count; 5058 var metaLine = ''; 5059 if (typeof count === 'number') { 5060 metaLine = '<span class="bb-dup-board-warning__context-meta">' 5061 + escapeHtml(count + ' message' + (count === 1 ? '' : 's') + ' already collected') 5062 + '</span>'; 5063 } 5064 return '' 5065 + '<div class="bb-dup-board-warning__context">' 5066 + '<div class="bb-dup-board-warning__context-accent" aria-hidden="true"></div>' 5067 + '<div class="bb-dup-board-warning__context-body">' 5068 + '<span class="bb-dup-board-warning__context-label">Existing board</span>' 5069 + '<a class="bb-dup-board-warning__board-link" href="' 5070 + escapeHtml(url) 5071 + '" target="_blank" rel="noopener noreferrer">' 5072 + escapeHtml(title) 5073 + '</a>' 5074 + metaLine 5075 + '</div>' 5076 + '</div>'; 5077 } 5078 5079 window.bbShowDuplicateBoardWarning = function (data, onCreateAnyway) { 5080 var existing = (data && data.existing_board) || {}; 5081 trackEvent('duplicate_board_warning_shown', analyticsProps(existing)); 5082 5083 var persuasiveNote = '' 5084 + '<div class="bb-dup-board-warning__upgrade-nudge">' 5085 + '<p class="bb-dup-board-warning__note">Upgrade it to keep collecting everyoneâs notes in one beautiful board.</p>' 5086 + '</div>'; 5087 5088 Swal.fire({ 5089 width: 580, 5090 padding: 0, 5091 background: '#fffaf7', 5092 color: '#111827', 5093 backdrop: 'rgba(15, 23, 42, 0.55)', 5094 showCloseButton: true, 5095 closeButtonAriaLabel: 'Close', 5096 showClass: { popup: 'swal2-show' }, 5097 hideClass: { popup: 'swal2-hide' }, 5098 title: '' 5099 + '<div class="bb-dup-board-warning__title-row">' 5100 + '<span class="bb-dup-board-warning__icon">
5100' + DUP_MODAL_ICON + '</span>' 5101 + '<div class="bb-dup-board-warning__title">Keep the messages together?</div>' 5102 + '</div>', 5103 html: '' 5104 + '<div class="bb-dup-board-warning__inner">' 5105 + '<div class="bb-dup-board-warning__body">' 5106 + '<p>It looks like this may be for the same recipient and occasion as an existing board. Starting another one could split messages across two links, making it harder for them to see everything in one place.</p>' 5107 + buildExistingBoardContext(existing) 5108 + persuasiveNote 5109 + '</div>' 5110 + '</div>', 5111 showConfirmButton: true, 5112 confirmButtonText: 'Upgrade existing board', 5113 showDenyButton: true, 5114 denyButtonText: 'Create separate board', 5115 showCancelButton: false, 5116 focusConfirm: true, 5117 customClass: { 5118 container: 'bb-dup-board-warning-container', 5119 popup: 'bb-dup-board-warning', 5120 title: 'bb-dup-board-warning__title-wrap', 5121 htmlContainer: 'bb-dup-board-warning__html', 5122 actions: 'bb-dup-board-warning__actions', 5123 confirmButton: 'bb-dup-board-warning__primary', 5124 denyButton: 'bb-dup-board-warning__secondary', 5125 closeButton: 'bb-dup-board-warning__close', 5126 }, 5127 didOpen: function () { 5128 hardenDuplicateModalSurface(Swal.getPopup()); 5129 }, 5130 }).then(function (result) { 5131 if (result.isConfirmed && existing.pricing_url) { 5132 if (window.bbTrackUpgradeCtaServer) { 5133 window.bbTrackUpgradeCtaServer({ 5134 board_id: existing.board_id, 5135 existing_board_id: existing.board_id, 5136 source_surface: 'duplicate_board_warning', 5137 }); 5138 } 5139 trackEvent('board_upgrade_cta_clicked', Object.assign(analyticsProps(existing), { 5140 source_surface: 'duplicate_board_warning', 5141 is_creator: true, 5142 })); 5143 window.location.href = existing.pricing_url; 5144 return; 5145 } 5146 if (result.isDenied && typeof onCreateAnyway === 'function') { 5147 trackEvent('duplicate_board_create_confirmed', analyticsProps(existing)); 5148 onCreateAnyway(); 5149 } 5150 }); 5151 }; 5152 5153 window.bbAjaxSubmitNewBoardForm = function (form, options) { 5154 options = options || {}; 5155 var $form = $(form); 5156 var url = options.url; 5157 5158 function submit(extraFields) { 5159 var payload = $form.serialize(); 5160 if (extraFields) { 5161 payload += (payload ? '&' : '') + $.param(extraFields); 5162 } 5163 $.ajax({ 5164 url: url, 5165 dataType: 'json', 5166 type: 'post', 5167 data: payload, 5168 beforeSend: options.beforeSend, 5169 complete: options.complete, 5170 success: function (data) { 5171 if (data && data.duplicate_warning) { 5172 $('#create_board').removeClass('is-loading'); 5173 window.bbShowDuplicateBoardWarning(data, function () { 5174 submit({ confirm_duplicate: '1' }); 5175 }); 5176 return; 5177 } 5178 if (options.onSuccess) { 5179 options.onSuccess(data); 5180 } else if (options.success) { 5181 options.success(data); 5182 } 5183 }, 5184 error: options.error, 5185 }); 5186 } 5187 5188 submit(); 5189 }; 5190})(window, window.jQuery); 5191</script>
5191 5192 5193 5194<!-- Organization Schema -->
5195<script type="application/ld+json"> 5196{ 5197 "@context": "https://schema.org", 5198 "@type": "Organization", 5199 "name": "Bravoboard", 5200 "url": "https://www.bravoboard.xyz", 5201 "logo": "https://d1e7moeca5rg6t.cloudfront.net/static/brand/bravoboard_logo_main.webp", 5202 "description": "Bravoboard creates online group cards and celebration boards with easy shared-link participation, messages, photos, GIFs, voice notes, and YouTube links for personal occasions and workplace milestones. Contributors do not need a Bravoboard account.", 5203 "sameAs": [ 5204 "https://x.com/TeamBravoboard", 5205 "https://www.reddit.com/r/indiebiz/comments/10m72o8/bravoboardxyz_free_kudoboard_alternative_create/", 5206 "https://www.producthunt.com/products/bravoboard", 5207 "https://www.linkedin.com/in/bravoboard/", 5208 "https://www.facebook.com/profile.php?id=100091782458307" 5209 ], 5210 "keywords": "online group cards, celebration boards, digital group cards, birthday group cards, farewell group cards, workplace milestone cards, team celebration boards", 5211 "potentialAction": [{ 5212 "@type": "ReadAction", 5213 "target": ["https://www.bravoboard.xyz/"] 5214 }] 5215} 5216</script>
5216 5217 5218<!-- Product schema. Do not add review or aggregate-rating markup without a current verifiable source. -->
5219<script type="application/ld+json"> 5220{ 5221 "@context": "https://schema.org", 5222 "@type": "Product", 5223 "@id": "https://www.bravoboard.xyz/#product", 5224 "name": "Bravoboard", 5225 "image": "https://d1e7moeca5rg6t.cloudfront.net/static/og/bravoboard_og_image.png", 5226 "description": "Online group cards and celebration boards for friends, families, schools, communities, and workplaces. Share one link so contributors can add messages, photos, GIFs, voice notes, and YouTube links without creating a Bravoboard account.", 5227 "brand": { 5228 "@type": "Brand", 5229 "name": "Bravoboard" 5230 } 5231} 5232</script>
5232 5233 5234<!-- Website Schema -->
5235<script type="application/ld+json"> 5236{ 5237 "@context": "https://schema.org", 5238 "@type": "WebSite", 5239 "name": "Bravoboard", 5240 "url": "https://www.bravoboard.xyz", 5241 "potentialAction": { 5242 "@type": "SearchAction", 5243 "target": "https://www.bravoboard.xyz/?q={search_term_string}", 5244 "query-input": "required name=search_term_string" 5245 } 5246} 5247</script>
5247 5248
5249<script> 5250/** 5251 * Bravoboard: Tab-title re-engagement (repeatable) 5252 * - Shows custom title after tab unfocused > HIDDEN_DELAY_MS 5253 * - Repeats up to maxShows times per session with cooldown 5254 * - Restores original title on focus 5255 * - Emits analytics events if dataLayer/gtag available 5256 */ 5257 5258(function TabTitleReengage(window, document) { 5259 if (!document || !window) return; 5260 5261 const STORAGE_KEY = 'bravoboard_tab_title_state_v2'; 5262 const HIDDEN_DELAY_MS = 1000; // 1s before showing 5263 const REENGAGE_TEXT = 'Your board is almost ready'; 5264 const REVERT_DELAY_MS = 300; // restore delay after return 5265 const maxShows = 5; // allow up to 3 shows per session 5266 const cooldownMs = 1000; // 1s cooldown between shows 5267 5268 let originalTitle = document.title || ''; 5269 let timerId = null; 5270 5271 // Load / init state in sessionStorage 5272 function loadState() { 5273 try { 5274 const raw = sessionStorage.getItem(STORAGE_KEY); 5275 if (!raw) return { count: 0, lastShownAt: 0 }; 5276 return JSON.parse(raw); 5277 } catch (e) { 5278 return { count: 0, lastShownAt: 0 }; 5279 } 5280 } 5281 function saveState(state) { 5282 try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {} 5283 } 5284 5285 let state = loadState(); 5286 5287 function now() { return Date.now(); } 5288 5289 function trackEvent(name, payload = {}) { 5290 try { 5291 if (window.dataLayer && Array.isArray(window.dataLayer)) { 5292 window.dataLayer.push(Object.assign({ event: name }, payload)); 5293 } else if (window.gtag) { 5294 window.gtag('event', name, payload); 5295 } 5296 } catch (e) { /* ignore analytics errors */ } 5297 } 5298 5299 function canShow() { 5300 if (state.count >= maxShows) return false; 5301 if (now() - (state.lastShownAt || 0) < cooldownMs) return false; 5302 return true; 5303 } 5304 5305 function onHiddenStart() { 5306 clearTimeout(timerId); 5307 if (!canShow()) return; 5308 timerId = setTimeout(() => { 5309 if (document.visibilityState !== 'visible') { 5310 originalTitle = document.title || originalTitle; 5311 document.title = REENGAGE_TEXT; 5312 state.count = (state.count || 0) + 1; 5313 state.lastShownAt = now(); 5314 saveState(state); 5315 trackEvent('tab_title_reengage_shown', { count: state.count, text: REENGAGE_TEXT }); 5316 } 5317 }, HIDDEN_DELAY_MS); 5318 } 5319 5320 function onVisible() { 5321 clearTimeout(timerId); 5322 if (document.title === REENGAGE_TEXT) { 5323 trackEvent('tab_title_reengage_returned', { count: state.count }); 5324 } 5325 setTimeout(() => { 5326 document.title = originalTitle; 5327 }, REVERT_DELAY_MS); 5328 } 5329 5330 // Keep originalTitle updated on SPA title changes 5331 let titleObserver = null; 5332 function startTitleObserver() { 5333 try { 5334 const titleEl = document.querySelector('title'); 5335 if (!titleEl) return; 5336 titleObserver = new MutationObserver(() => { 5337 if (document.visibilityState === 'visible') { 5338 originalTitle = document.title; 5339 } 5340 }); 5341 titleObserver.observe(titleEl, { childList: true }); 5342 } catch (e) {} 5343 } 5344 5345 function setup() { 5346 if (typeof document.hidden !== 'undefined') { 5347 document.addEventListener('visibilitychange', () => { 5348 if (document.visibilityState === 'hidden') onHiddenStart(); 5349 else onVisible(); 5350 }); 5351 } else { 5352 window.addEventListener('blur', onHiddenStart); 5353 window.addEventListener('focus', onVisible); 5354 } 5355 startTitleObserver(); 5356 originalTitle = document.title || originalTitle; 5357 } 5358 5359 // Public API for control & testing 5360 window.__BravoboardTabTitleReengage = { 5361 resetSession() { 5362 state = { count: 0, lastShownAt: 0 }; 5363 saveState(state); 5364 }, 5365 forceShow() { 5366 // immediately show regardless of cooldown/count (for QA) 5367 originalTitle = document.title || originalTitle; 5368 document.title = REENGAGE_TEXT; 5369 state.count = (state.count || 0) + 1; 5370 state.lastShownAt = now(); 5371 saveState(state); 5372 trackEvent('tab_title_reengage_forced', { count: state.count }); 5373 }, 5374 getState() { return Object.assign({}, state); }, 5375 config(opts = {}) { 5376 // optional runtime config for advanced usage (not persisted) 5377 if (opts.text && typeof opts.text === 'string') { 5378 // WARNING: not persisted across reloads 5379 // eslint-disable-next-line no-unused-expressions 5380 window.__BravoboardTabTitleReengage._text = opts.text; 5381 } 5382 if (typeof opts.maxShows === 'number') { 5383 // only affects this session in-memory 5384 // (to change persistently, edit the code constants) 5385 // eslint-disable-next-line no-unused-expressions 5386 window.__BravoboardTabTitleReengage._maxShows = opts.maxShows; 5387 } 5388 } 5389 }; 5390 5391 setup(); 5392})(window, document); 5393 5394</script>
5394<!-- title tab re-engagement --> 5395 5396 5397
5398<script> 5399(() => { 5400 // ========= CONFIG (exit-intent discount promo only) ========= 5401 const STORAGE_KEY = 'bb_exit_discount_promo_v1'; 5402 const MAX_SHOWS_PER_SESSION = 2; 5403 const COOLDOWN_MS = 5 * 60 * 1000; // 5 min between shows 5404 const MIN_TIME_ON_PAGE_MS = 2000; // exit-intent only: don't trigger instantly 5405 const MOUSE_Y_THRESHOLD = 8; // px from top for desktop exit intent 5406 const NAV_GUARD_MS = 1200; // ignore triggers right after a click navigation 5407 const OPEN_DELAY_MS = 150; // tiny delay before opening modal 5408 const exitPromoStartBoardUrl = '/start-board/?source_surface=exit_intent&source_context=anonymous&promo_variant=exit_intent_welcome50&promo_code=WELCOME50'; 5409 5410 // ========= STATE / HELPERS ========= 5411 const now = () => Date.now(); 5412 const pageStart = now(); 5413 let navClicked = false; 5414 let modalOpen = false; 5415 5416 function readState() { 5417 try { 5418 const raw = sessionStorage.getItem(STORAGE_KEY); 5419 return raw ? JSON.parse(raw) : { count: 0, lastShownAt: 0 }; 5420 } catch (e) { 5421 return { count: 0, lastShownAt: 0 }; 5422 } 5423 } 5424 5425 function writeState(state) { 5426 try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {} 5427 } 5428 5429 function isPostCreateBlockingExit() { 5430 if (window.bbPostCreatePromoActive) return true; 5431 if (typeof window.__bb_growth_exit_suppressed === 'function' && window.__bb_growth_exit_suppressed()) { 5432 return true; 5433 } 5434 try { 5435 const until = parseInt(sessionStorage.getItem('bb_post_success_exit_suppress_until') || '0', 10); 5436 if (until && now() < until) return true; 5437 } catch (e) {} 5438 return false; 5439 } 5440 5441 function isShareModalOpen() { 5442 return !!document.querySelector( 5443 '#modal-board.is-active.bb-share-modal-open .bb-share-modal' 5444 ); 5445 } 5446 5447 function canShowShared() { 5448 if (isPostCreateBlockingExit()) return false; 5449 if (isShareModalOpen()) return false; 5450 try { if (window.self !== window.top) return false; } catch (e) { return false; } 5451 const s = readState(); 5452 if ((s.count || 0) >= MAX_SHOWS_PER_SESSION) return false; 5453 if (now() - (s.lastShownAt || 0) < COOLDOWN_MS) return false; 5454 if (modalOpen) return false; 5455 return true; 5456 } 5457 5458 function canShowExitIntent() { 5459 if (!canShowShared()) return false; 5460 if (now() - pageStart < MIN_TIME_ON_PAGE_MS) return false; 5461 if (navClicked) return false; 5462 return true; 5463 } 5464 5465 function markShown() { 5466 const s = readState(); 5467 s.count = (s.count || 0) + 1; 5468 s.lastShownAt = now(); 5469 writeState(s); 5470 } 5471 5472 // ========= NAV CLICK GUARD ========= 5473 // Prevent promo from firing when user intentionally clicks links/buttons 5474 document.addEventListener('click', (e) => { 5475 const t = e.target; 5476 if (!t || !t.closest) return; 5477 const clickable = t.closest('a, button, input[type="submit"], [role="button"], [data-nav]'); 5478 if (clickable) { 5479 navClicked = true; 5480 setTimeout(() => { navClicked = false; }, NAV_GUARD_MS); 5481 } 5482 }, { capture: true }); 5483 5484 // ========= SWEETALERT GUARD ========= 5485 function hasSwal() { 5486 return typeof window.Swal !== 'undefined' && typeof window.Swal.fire === 'function'; 5487 } 5488 5489 // ========= PROMO HTML ========= 5490 const promoHtml = ` 5491 <style> 5492 .swal2-popup.bb-mini-deal{ 5493 --bb-bg: rgba(18,20,26,.65); 5494 --bb-border: rgba(255,255,255,.14); 5495 --bb-muted: rgba(255,255,255,.7); 5496 --bb-muted-2: rgba(255,255,255,.55); 5497 --bb-accent: #fde68a; 5498 --bb-chip-bg: rgba(255,255,255,.06); 5499 --bb-chip-brd: rgba(255,255,255,.18); 5500 border-radius: 16px; 5501 overflow: hidden; 5502 background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) , var(--bb-bg) !important; 5503 border: 1px solid var(--bb-border); 5504 backdrop-filter: blur(16px) saturate(160%) !important; 5505 -webkit-backdrop-filter: blur(16px) saturate(160%) !important; 5506 box-shadow: 0 24px 60px rgba(0,0,0,.45); 5507 } 5508 5509 .bb-wrap{ padding: 28px 28px 10px; color:#fff; text-align:center; } 5510 5511 .bb-title{ margin-bottom: 18px; } 5512 .bb-hook{ 5513 font-size: 16px; 5514 font-weight: 600; 5515 color: var(--bb-accent); 5516 text-shadow: 0 1px 2px rgba(0,0,0,.25); 5517 margin-bottom: 8px; 5518 } 5519 .bb-offer{ 5520 font-size: clamp(22px, 3.2vw, 32px); 5521 font-weight: 800; 5522 line-height: 1.25; 5523 letter-spacing: .2px; 5524 background: linear-gradient(45deg,#fff 0%, #f3f4f6 50%, #fde68a 100%); 5525 -webkit-background-clip: text; -webkit-text-fill-color: transparent; 5526 } 5527 .bb-sub{ margin: 10px 0 12px; font-size: 16px; color: var(--bb-muted); } 5528 5529 .bb-chip{ 5530 display:inline-flex; align-items:center; gap:10px; 5531 background: var(--bb-chip-bg); 5532 border:1px solid var(--bb-chip-brd); 5533 padding: 10px 14px; 5534 border-radius: 12px; 5535 cursor: pointer; user-select: none; 5536 transition: transform .12s ease, box-shadow .12s ease, background .12s ease; 5537 } 5538 .bb-chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.25); } 5539 .bb-chip:focus-visible{ outline: 2px solid #a5b4fc; outline-offset: 2px; } 5540 .bb-chip .label{ 5541 font-weight: 800; font-size: 11px; letter-spacing: .4px; 5542 color:#fff; 5543 padding: 6px 8px; border-radius: 999px; 5544 } 5545 .bb-chip .code{ 5546 font-weight: 900; font-size: 18px; letter-spacing: .5px; 5547 color:#052e16; background: #bbf7d0; 5548 padding: 8px 12px; border-radius: 8px; 5549 } 5550 .bb-hint{ margin-top: 8px; font-size: 13px; color: var(--bb-muted-2); } 5551 .bb-chip.copied .code{ background:#a7f3d0; } 5552 .bb-chip.copied + .bb-hint { color:#a7f3d0; } 5553 5554 .swal2-actions{ 5555 margin: 0; padding: 14px 20px 20px; 5556 display:flex; gap:12px; justify-content:center; flex-wrap:wrap; 5557 border-top: 1px solid var(--bb-border); 5558 background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); 5559 } 5560 .swal2-styled.bb-cta{ 5561 appearance: none; -webkit-appearance: none; 5562 min-height: 48px; width: auto; 5563 padding: 12px 18px !important; 5564 border-radius: 12px !important; 5565 font-size: 16px !important; font-weight: 700 !important; 5566 letter-spacing:.2px; 5567 border:1px solid var(--bb-border); 5568 box-shadow: 0 10px 26px rgba(0,0,0,.28); 5569 transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease; 5570 } 5571 .swal2-styled.bb-cta:focus-visible{ outline: 2px solid #93c5fd; outline-offset: 2px; } 5572 5573 .swal2-styled.bb-cta.bb-cta--primary{ 5574 background:#0f1115 !important; color:#fff !important; 5575 } 5576 .swal2-styled.bb-cta.bb-cta--primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.40); } 5577 5578 .swal2-styled.bb-cta.bb-cta--secondary{ 5579 background: transparent !important; color:#e5e7eb !important; 5580 } 5581 .swal2-styled.bb-cta.bb-cta--secondary:hover{ background: rgba(255,255,255,.06) !important; } 5582 5583 @media (max-width: 520px){ 5584 .bb-wrap{ padding: 22px 16px 6px; } 5585 .bb-offer{ font-size: clamp(20px, 5.4vw, 28px); } 5586 .bb-hook{ font-size: 15px; } 5587 .swal2-actions{ flex-direction:column; padding: 12px 16px 16px; } 5588 .swal2-styled.bb-cta{ width: 100%; min-height: 52px; } 5589 } 5590 </style> 5591 5592 <div class="bb-wrap"> 5593 <div class="bb-title"> 5594 <div class="bb-hook">Make someoneâs day ð§¡â¨</div> 5595 <div class="bb-offer">Enjoy 50% Off Your First Bravoboard<br>with Unlimited Posts!</div> 5596 </div> 5597 <div class="bb-sub">Use promo code at checkout:</div> 5598 <div id="bbCopyChip" class="bb-chip" role="button" tabindex="0" aria-label="Copy promo code WELCOME50">
5599 <span class="label">CODE</span> 5600 <span class="code" data-code="WELCOME50">WELCOME50</span> 5601 </div> 5602 <div id="bbCopyHint" class="bb-hint">Click to copy</div> 5603 </div> 5604 `; 5605 5606 // ========= SHOW PROMO ========= 5607 async function showPromo(trigger) { 5608 if (!canShowExitIntent()) return; 5609 if (!hasSwal()) return; 5610 5611 modalOpen = true; 5612 // small delay prevents racing with tab switch events 5613 await new Promise(r => setTimeout(r, OPEN_DELAY_MS)); 5614 if (isShareModalOpen()) { 5615 modalOpen = false; 5616 return; 5617 } 5618 5619 try { 5620 await Swal.fire({ 5621 width: 720, 5622 padding: 0, 5623 background: 'transparent', 5624 backdrop: 'rgba(10,12,20,.45)', 5625 allowOutsideClick: true, 5626 showConfirmButton: true, 5627 showDenyButton: false, 5628 confirmButtonText: 'Create a Free Board (60s)', 5629 denyButtonText: 'Not Now', 5630 customClass: { 5631 popup: 'bb-mini-deal', 5632 confirmButton: 'bb-cta bb-cta--primary', 5633 denyButton: 'bb-cta bb-cta--secondary' 5634 }, 5635 title: '', 5636 html: promoHtml, 5637 didOpen: () => { 5638 const container = Swal.getHtmlContainer(); 5639 if (!container) return; 5640 const chip = container.querySelector('#bbCopyChip'); 5641 const hint = container.querySelector('#bbCopyHint'); 5642 5643 chip?.addEventListener('click', async () => { 5644 try { 5645 const code = chip.querySelector('[data-code]')?.getAttribute('data-code') || 'WELCOME50'; 5646 await navigator.clipboard.writeText(code); 5647 chip.classList.add('copied'); 5648 if (hint) hint.textContent = 'Copied! ð'; 5649 setTimeout(() => { 5650 if (hint) hint.textContent = 'Click to copy'; 5651 chip.classList.remove('copied'); 5652 }, 1500); 5653 } catch { 5654 if (hint) hint.textContent = 'Copy failed â tap & hold to copy'; 5655 } 5656 }); 5657 5658 chip?.addEventListener('keydown', (e) => { 5659 if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); chip.click(); } 5660 }); 5661 } 5662 }).then((result) => { 5663 if (result.isConfirmed) { 5664 window.location.href = exitPromoStartBoardUrl; 5665 } 5666 }); 5667 5668 // Only count as "shown" after successful open attempt 5669 markShown(); 5670 try { window.dataLayer && window.dataLayer.push({ event: 'bb_exit_promo_shown', trigger }); } catch(e){} 5671 } catch (err) { 5672 // swallow 5673 } finally { 5674 modalOpen = false; 5675 } 5676 } 5677 5678 // ========= TRIGGERS ========= 5679 5680 // Desktop: mouse leaves window at top edge 5681 function onMouseOut(e) { 5682 const clientY = e.clientY || 0; 5683 const toElement = !!e.relatedTarget; 5684 if (clientY <= MOUSE_Y_THRESHOLD && !toElement) { 5685 // one-shot for mouseout to reduce annoyance; tab/blur can still trigger later 5686 document.removeEventListener('mouseout', onMouseOut); 5687 showPromo('mouseout_top'); 5688 } 5689 } 5690 5691 // Tab switch / app switch (skip window.blur â often duplicates visibilitychange) 5692 function onVisibilityChange() { 5693 if (document.visibilityState === 'hidden') { 5694 showPromo('visibility_hidden'); 5695 } 5696 } 5697 5698 document.addEventListener('mouseout', onMouseOut); 5699 document.addEventListener('visibilitychange', onVisibilityChange); 5700 5701 // ========= QA ========= 5702 window.__bb_exit_promo = { 5703 reset() { try { sessionStorage.removeItem(STORAGE_KEY); } catch(e){} }, 5704 state() { return readState(); }, 5705 showNow() { showPromo('manual'); } 5706 }; 5707})(); 5708</script>
5708<!-- exit intent offer --> 5709 5710 5711 5712</head> 5713 5714 <body style="flex-grow: 1;/*overflow-x: hidden;*/overflow:clip;"> 5715 5716 <a href="#maincontent" class="skip-link">Skip to main content</a> 5717 5718 <main id="maincontent" role="main"> 5719 5720 5721 5722 5723 5724<style> 5725 /* ========= Bravoboard Top Nav (namespaced to bbnav-*) ========= */ 5726 .bbnav-bar{ 5727 position:sticky; top:0;width:100%; margin:0;z-index:10; 5728 background-image:url('https://d1e7moeca5rg6t.cloudfront.net/static/live/bg/gifs/gif_3.gif'); 5729 } 5730 /* subtle readable gradient, keep GIF visible */ 5731 .bbnav-bar::before{ 5732 content:""; position:absolute; inset:0; pointer-events:none; z-index:0; 5733 } 5734 .bbnav-wrap{ 5735 position:relative; z-index:1; /* sit above overlay */ 5736 display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; 5737 padding:.55rem .75rem; gap:.35rem; 5738 } 5739 .bbnav-brand{display:flex; align-items:center; gap:.45rem;} 5740 .bbnav-brand img{width:25px; height:25px;} 5741 .bbnav-brand .bbnav-title{font-weight:800; color:#fff;font-size:0.9em;} 5742 5743 .bbnav-actions{ 5744 display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; margin-left:auto; justify-content:flex-end; 5745 } 5746 .bbnav-actions .button{ 5747 background:transparent; border:none; padding:.4rem .55rem; height:auto; line-height:1; 5748 } 5749 .bbnav-actions .bbnav-label{font-weight:800;font-size:0.8em;} 5750 .bbnav-actions svg{margin-right:.35rem} 5751 5752 /* Force white so unrelated global styles canât override */ 5753 .bbnav-bar, .bbnav-actions .button, .bbnav-actions .bbnav-label, .bbnav-brand .bbnav-title { color:#fff !important; } 5754 .bbnav-actions svg { stroke:lightgreen !important; fill:lightgreen !important; } 5755 5756 /* Bulma âcolumnsâ shims only inside nav to avoid global clashes */ 5757 .bbnav-columns{display:flex; flex-wrap:wrap; align-items:center;} 5758 .bbnav-col{flex:1 1 auto} 5759 .bbnav-col.brand{flex:0 0 auto} 5760 .bbnav-col.actions{flex:1 1 60%; display:flex; justify-content:flex-end} 5761 5762 /* Small screens: keep everything tappable & visible */ 5763 @media (max-width:640px){ 5764 .bbnav-wrap{padding:.65rem .75rem; gap:.4rem;} 5765 .bbnav-actions{gap:.2rem;} 5766 .bbnav-actions .bbnav-label{font-size:.95rem;} 5767 } 5768 5769 /* Mobile (unauthenticated): hide inline actions, show hamburger */ 5770 @media (max-width: 768px){ 5771 .bbnav-actions__inline{ display: none !important; } 5772 .bbnav-hamburger{ display: flex !important; align-items: center; justify-content: center; } 5773 } 5774 @media (min-width: 769px){ 5775 .bbnav-hamburger{ display: none !important; } 5776 .bbnav-actions__inline{ display: flex !important; } 5777 } 5778 .bbnav-hamburger{ 5779 background: transparent; border: none; padding: 0.5rem; cursor: pointer; 5780 color: #fff !important; border-radius: 8px; 5781 } 5782 .bbnav-hamburger:hover{ background: rgba(255,255,255,0.2); } 5783 .bbnav-hamburger svg{ width: 24px; height: 24px; } 5784 5785 /* Drawer (slide-in from right) */ 5786 .bbnav-drawer-backdrop{ 5787 position: fixed; inset: 0; z-index: 100; 5788 background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); 5789 opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; 5790 } 5791 .bbnav-drawer-backdrop.is-open{ opacity: 1; visibility: visible; } 5792 .bbnav-drawer{ 5793 position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; 5794 width: min(320px, 88vw); max-width: 320px; 5795 background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); 5796 box-shadow: -8px 0 32px rgba(0,0,0,0.3); 5797 display: flex; flex-direction: column; 5798 transform: translateX(100%); transition: transform .3s ease; 5799 overflow-y: auto; 5800 } 5801 .bbnav-drawer.is-open{ transform: translateX(0); } 5802 .bbnav-drawer__header{ 5803 display: flex; align-items: center; justify-content: space-between; 5804 padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); 5805 } 5806 .bbnav-drawer__title{ font-weight: 800; font-size: 1rem; color: #fff; margin: 0; } 5807 .bbnav-drawer__close{ 5808 background: none; border: none; color: #fff; padding: 0.6rem; cursor: pointer; 5809 border-radius: 8px; line-height: 1; font-size: 1.5rem; min-width: 2.25rem; min-height: 2.25rem; 5810 display: inline-flex; align-items: center; justify-content: center; 5811 } 5812 .bbnav-drawer__close:hover{ background: rgba(255,255,255,0.15); } 5813 .bbnav-drawer__nav{ padding: 1rem 1.25rem 1rem; } 5814 .bbnav-drawer__link{ 5815 display: flex; align-items: center; 5816 width: 100%; padding: 0.9rem 0; border: none; background: none; 5817 color: #fff !important; font-weight: 600; font-size: 1rem; text-decoration: none; 5818 cursor: pointer; text-align: left; transition: background .15s; 5819 box-sizing: border-box; 5820 } 5821 .bbnav-drawer__link:hover{ background: rgba(255,255,255,0.1); } 5822 .bbnav-drawer__link.bbnav-drawer__link--cta{ 5823 margin-top: 1rem; border-radius: 12px; justify-content: center; 5824 background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff !important; 5825 padding: 0.9rem 1rem; max-width: 100%; box-sizing: border-box; 5826 } 5827 .bbnav-drawer__link.bbnav-drawer__link--cta:hover{ filter: brightness(1.1); } 5828 5829 /* User avatar + dropdown */
5830 .bbnav-user-wrap{ position:relative; display:inline-block; } 5831 .bbnav-avatar{ 5832 width:30px; height:30px; border-radius:50%; 5833 display:inline-flex; align-items:center; justify-content:center; 5834 background:rgba(255,255,255,0.25); border:none; 5835 color:#fff !important; font-weight:800; font-size:0.85rem; letter-spacing:0.02em; 5836 cursor:pointer; padding:0; margin:0; transition:background .2s, border-color .2s, transform .15s; 5837 } 5838 .bbnav-avatar:hover{ background:rgba(255,255,255,0.35); border-color:rgba(255,255,255,0.7); } 5839 .bbnav-avatar[aria-expanded="true"]{ background:rgba(255,255,255,0.4); border-color:#fff; } 5840 .bbnav-dropdown{ 5841 position:absolute; top:100%; right:0; margin-top:6px; min-width:180px; 5842 background:rgba(20,20,28,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); 5843 border:1px solid rgba(255,255,255,0.15); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.35); 5844 padding:6px 0; z-index:20; display:none; 5845 } 5846 .bbnav-dropdown.is-open{ display:block; } 5847 .bbnav-dropdown a,.bbnav-dropdown button{ 5848 display:flex !important; flex-direction:row; align-items:center; gap:0.5rem; 5849 width:100%; text-align:left; padding:10px 16px; border:none; background:transparent; 5850 color:#fff !important; font-weight:600; font-size:0.9rem; text-decoration:none; cursor:pointer; 5851 } 5852 .bbnav-dropdown a:hover,.bbnav-dropdown button:hover{ background:rgba(255,255,255,0.12); } 5853 .bbnav-dropdown .bbnav-dropdown-divider{ height:1px; background:rgba(255,255,255,0.15); margin:4px 0; } 5854 .bbnav-dropdown .bbnav-dropdown-icon{ flex-shrink:0; width:16px; height:16px; display:block; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } 5855 .bbnav-dropdown .bbnav-dropdown-label{ line-height:1.2; flex:1; min-width:0; } 5856</style> 5857 5858<div class="bbnav-bar"> 5859 <div class="bbnav-wrap bbnav-columns"> 5860 <!-- Left: Brand --> 5861 <div class="bbnav-col brand"> 5862 <a class="button hover-grow" href="/" style="background:none;border:none;"> 5863 <span class="bbnav-brand"> 5864 <img alt="Bravoboard logo" src="https://d1e7moeca5rg6t.cloudfront.net/static/assets/img/favicons/Bravoboard_logo_2025v1.2.png"> 5865 <span class="bbnav-title">Bravoboard</span> 5866 </span> 5867 </a> 5868 </div> 5869 5870 <!-- Right: Actions --> 5871 <div class="bbnav-col actions"> 5872 <div class="bbnav-actions"> 5873 5874 5875 5876 5877 5878 5879 5880 5881 <div class="bbnav-actions__inline" style="display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;"> 5882 <button class="button hover-grow js-login" aria-label="New Board"> 5883 <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M15.204 17.5V15.665h-1.835a.665.665 0 1 1 0-1.33h1.835V12.5a.665.665 0 1 1 1.33 0v1.835h1.836a.665.665 0 1 1 0 1.33h-1.836V17.5a.665.665 0 1 1-1.33 0zM2.12 12.7V7.3c0-.654-.001-1.185.034-1.614.036-.437.112-.827.297-1.19.257-.425.676-.813 1.177-1.068.324-.139.671-.201 1.053-.233.429-.035.96-.036 1.614-.036h.695c.143 0 .242 0 .34.006l.254.026c.586.086 1.137.341 1.582.738l.245.239c.111.113.148.15.184.182.266.2.587.319.922.34h.26h2.511c.558 0 1.011 0 1.379.026.375.026.712.081 1.032.217.597.326 1.071.845 1.341 1.477.074.245.11.503.131.782.026.366.026.816.026 1.369a.665.665 0 0 1-.671.665H3.45v3.335c0 .676 0 1.143.03 1.506.03.355.083.551.157.695.164.268.4.486.681.629.133.047.31.082.576.104.363.03.83.031 1.506.031h2.824c.303.062.53.33.53.652s-.227.531-.53.592H6.585c-.654 0-1.185 0-1.614-.035-.382-.031-.729-.093-1.053-.232-.501-.255-.92-.643-1.212-1.119-.185-.363-.261-.753-.297-1.19C2.12 13.885 2.12 13.354 2.12 12.7Zm1.33-4.665h13.167a26.6 26.6 0 0 0-.12-1.108c-.045-.184-.071-.336-.106-.451-.152-.355-.418-.647-.754-.83-.127-.054-.297-.093-.602-.115-.311-.022-.709-.023-1.286-.023h-2.512c-.595-.037-1.165-.247-1.639-.603l-.197-.161c-.074-.066-.143-.137-.244-.239l-.185-.182c-.25-.223-.56-.367-.891-.415l-.142-.015c-.048-.003-.1-.003-.259-.003h-.695c-.676 0-1.143.001-1.506.03-.266.022-.443.057-.576.104-.281.143-.517.361-.681.629-.125.244-.178.44-.208.794-.03.362-.03.83-.03 1.506v.735Z"/></svg>
5884 <span class="bbnav-label">New Board</span> 5885 </button> 5886 <a href="/help/" class="button hover-grow" aria-current="page"> 5887 <svg stroke-width="0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.886 4.923c-.232.25-.386.63-.386 1.122a.75.75 0 1 1-1.5 0c0-.803.254-1.57.788-2.144C6.33 3.32 7.1 3 8 3c.9 0 1.67.32 2.212.901.534.574.788 1.341.788 2.144 0 1.234-.869 1.922-1.436 2.332-.094.068-.178.127-.255.181-.19.134-.33.233-.449.343a.64.64 0 0 0-.11.121V9.5a.75.75 0 0 1-1.5 0V9c0-.563.326-.956.593-1.202.198-.183.457-.364.672-.516l.17-.121c.559-.404.815-.693.815-1.116 0-.492-.154-.872-.386-1.122C8.888 4.68 8.533 4.5 8 4.5c-.533 0-.888.18-1.114.423Z"></path><path d="M9 12a1.001 1.001 0 0 1-2 0 1.001 1.001 0 0 1 2 0Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.5A6.5 6.5 0 1 0 1.5 8c0 1.022.179 1.608.603 2.399.316.59.407 1.313.178 2.003l-.66 1.976 1.977-.659a2.541 2.541 0 0 1 2.004.178c.79.424 1.376.603 2.398.603ZM8 16a8 8 0 1 0-8-8c0 1.29.25 2.117.78 3.107.136.252.168.549.078.82l-.807 2.42a1 1 0 0 0-.051.315V15a1 1 0 0 0 1 1h.338a1 1 0 0 0 .316-.051l2.419-.807c.271-.09.568-.057.82.078.99.53 1.817.78 3.107.78Z"></path></svg> 5888 <span class="bbnav-label">Help</span> 5889 </a> 5890 <a href="/#samples" class="button hover-grow" aria-label="See sample boards"> 5891 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg> 5892 <span class="bbnav-label">Samples</span> 5893 </a> 5894 <a href="/teams/" class="button hover-grow" aria-label="Team plan for workplaces and groups"> 5895 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> 5896 <span class="bbnav-label">For Teams</span> 5897 </a> 5898 5899 <a href="/#pricing" class="button hover-grow"> 5900 5901 <svg fill="#000000" width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3,5.5 C3,4.11928813 4.11928813,3 5.5,3 L11.5,3 C11.6326082,3 11.7597852,3.05267842 11.8535534,3.14644661 L20.1564971,11.4493903 C21.2890176,12.5819108 21.2890176,14.4180892 20.1564971,15.5506097 L15.5506097,20.1564971 C14.4180892,21.2890176 12.5819108,21.2890176 11.4493903,20.1564971 L3.14644661,11.8535534 C3.05267842,11.7597852 3,11.6326082 3,11.5 L3,5.5 Z M11.2928932,4 L5.5,4 C4.67157288,4 4,4.67157288 4,5.5 L4,11.2928932 L12.1564971,19.4493903 C12.8984933,20.1913865 14.1015067,20.1913865 14.8435029,19.4493903 L19.4493903,14.8435029 C20.1913865,14.1015067 20.1913865,12.8984933 19.4493903,12.1564971 L11.2928932,4 Z M8,7 C7.44771525,7 7,7.44771525 7,8 C7,8.55228475 7.44771525,9 8,9 C8.55228475,9 9,8.55228475 9,8 C9,7.44771525 8.55228475,7 8,7 Z M8,6 C9.1045695,6 10,6.8954305 10,8 C10,9.1045695 9.1045695,10 8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 Z"/></svg> 5902 <span class="bbnav-label">Pricing</span> 5903 </a> 5904 <button class="button js-login hover-grow"> 5905 <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg> 5906 <span class="bbnav-label">Login</span> 5907 </button> 5908 </div> 5909 <button type="button" class="bbnav-hamburger" id="bbnav-hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="bbnav-drawer" style="display:none;"> 5910 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg> 5911 </button> 5912 <div class="bbnav-drawer-backdrop" id="bbnav-drawer-backdrop" aria-hidden="true"></div> 5913 <div class="bbnav-drawer" id="bbnav-drawer" role="dialog" aria-label="Navigation menu" aria-modal="true"> 5914 <div class="bbnav-drawer__header"> 5915 <h2 class="bbnav-drawer__title">Menu</h2> 5916 <button type="button" class="bbnav-drawer__close" id="bbnav-drawer-close" aria-label="Close menu">×</button> 5917 </div> 5918 <nav class="bbnav-drawer__nav"> 5919 <a href="#" class="bbnav-drawer__link js-login">New Board</a> 5920 <a href="/help/" class="bbnav-drawer__link">Help</a> 5921 <a href="/#samples" class="bbnav-drawer__link">Samples</a> 5922 <a href="/teams/" class="bbnav-drawer__link" ><strong>For Teams <span class="post-link-external-mark" aria-hidden="true">â</span></strong></a> 5923 <a href="/#pricing" class="bbnav-drawer__link">Pricing</a> 5924 <a href="#" class="bbnav-drawer__link bbnav-drawer__link--cta js-login">Login</a> 5925 </nav> 5926 </div> 5927 5928 5929 5930 5931 5932 5933 </div> 5934 </div> 5935 </div> 5936</div> 5937
5938<script> 5939(function(){ 5940 var wrap = document.getElementById('bbnav-user-wrap'); 5941 if (wrap) { 5942 var btn = document.getElementById('bbnav-avatar'); 5943 var menu = document.getElementById('bbnav-dropdown'); 5944 function open() { btn.setAttribute('aria-expanded', 'true'); menu.classList.add('is-open'); } 5945 function close() { btn.setAttribute('aria-expanded', 'false'); menu.classList.remove('is-open'); } 5946 function isOpen() { return menu.classList.contains('is-open'); } 5947 btn.addEventListener('click', function(e) { e.stopPropagation(); if (isOpen()) close(); else open(); }); 5948 document.addEventListener('click', function(e) { if (isOpen() && !wrap.contains(e.target)) close(); }); 5949 document.addEventListener('keydown', function(e) { 5950 if (e.key !== 'Escape' || !isOpen()) return; 5951 e.preventDefault(); 5952 close(); 5953 btn.focus(); 5954 }); 5955 menu.querySelectorAll('a, button').forEach(function(el) { 5956 el.addEventListener('click', function() { close(); }); 5957 }); 5958 } 5959 5960 var hamburger = document.getElementById('bbnav-hamburger'); 5961 var drawer = document.getElementById('bbnav-drawer'); 5962 var backdrop = document.getElementById('bbnav-drawer-backdrop'); 5963 var drawerClose = document.getElementById('bbnav-drawer-close'); 5964 if (hamburger && drawer && backdrop) { 5965 function openDrawer() { 5966 drawer.classList.add('is-open'); 5967 backdrop.classList.add('is-open'); 5968 hamburger.setAttribute('aria-expanded', 'true'); 5969 backdrop.setAttribute('aria-hidden', 'false'); 5970 document.body.style.overflow = 'hidden'; 5971 drawerClose.focus(); 5972 } 5973 function closeDrawer() { 5974 drawer.classList.remove('is-open'); 5975 backdrop.classList.remove('is-open'); 5976 hamburger.setAttribute('aria-expanded', 'false'); 5977 backdrop.setAttribute('aria-hidden', 'true'); 5978 document.body.style.overflow = ''; 5979 hamburger.focus(); 5980 } 5981 hamburger.addEventListener('click', function(e) { e.preventDefault(); openDrawer(); }); 5982 backdrop.addEventListener('click', closeDrawer); 5983 if (drawerClose) drawerClose.addEventListener('click', closeDrawer); 5984 document.addEventListener('keydown', function(e) { 5985 if (e.key === 'Escape' && drawer.classList.contains('is-open')) { e.preventDefault(); closeDrawer(); } 5986 }); 5987 drawer.querySelectorAll('.bbnav-drawer__link').forEach(function(link) { 5988 link.addEventListener('click', function() { closeDrawer(); }); 5989 }); 5990 } 5991})(); 5992</script>
5992 5993 5994 5995 5996 5997 5998 5999 6000 6001 6002<style> 6003 :root{ 6004 --hb-bg:#f6f7fb; --hb-card:#fff; --hb-ring:#e5e7eb; 6005 --hb-text:#1f2937; --hb-muted:#6b7280; --hb-radius:16px; 6006 --hb-shadow-sm:0 1px 2px rgba(0,0,0,.05); --hb-shadow-lg:0 10px 40px rgba(20,20,43,.08); 6007 --hb-p600:#7c3aed; --hb-p700:#6d28d9; --hb-p800:#5b21b6; --hb-pill:#ede9fe; --hb-pill-text:#5b21b6; 6008 } 6009 .hb-wrap{min-height:100vh;padding:24px 0 80px;background:var(--hb-bg);} 6010 .hb-container{max-width:1200px;margin:0 auto;padding:0 20px;} 6011 6012 .hb-hero{ 6013 border-radius:var(--hb-radius); padding:28px 28px 30px; color:#fff; 6014 //background:url('https://d1e7moeca5rg6t.cloudfront.net/static/live/bg/svg/svg_new_18.svg'); background-attachment:fixed;background-size:cover;background-position:center;background-color:#0d1627; 6015 background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22), transparent 55%), radial-gradient(circle at 100% 0%, rgba(244, 114, 182, 0.22), transparent 55%), radial-gradient(circle at 50% 120%, rgba(251, 191, 36, 0.22), transparent 65%), #050a13; 6016 border: 1px solid rgba(148, 163, 184, 0.28); 6017 box-shadow: 0 22px 45px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.7); 6018 } 6019 .hb-hero h1{font-size:32px;font-weight:800;margin:0 0 8px;} 6020 .hb-hero p{opacity:.95;margin:0 0 18px;font-size:16px;} 6021 .hb-search{position:relative;display:flex;align-items:center;max-width:720px;width:100%;margin: 0 auto;} 6022 .hb-search input{width:100%;background:#fff;border:1px solid rgba(255,255,255,.25);outline:none;border-radius:12px;padding:14px 44px;color:#111;box-shadow:var(--hb-shadow-sm);} 6023 .hb-search .hb-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;opacity:.65;} 6024 .hb-search .hb-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:#6b7280;font-size:16px;} 6025 6026 .hb-grid{display:grid;grid-template-columns:260px 1fr;gap:28px;margin-top:22px;} 6027 @media (max-width:980px){.hb-grid{grid-template-columns:1fr;}.hb-sidebar{position:static;}} 6028 6029 .hb-sidebar{position:sticky;top:90px;align-self:start;} 6030 .hb-side-title{letter-spacing:.12em;color:#6b7280;font-size:12px;font-weight:700;margin:0 0 10px;} 6031 .hb-cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} 6032 .hb-cat a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--hb-text);border:1px solid transparent;} 6033 .hb-cat .hb-count{min-width:26px;text-align:center;padding:3px 8px;border-radius:999px;background:var(--hb-pill);color:var(--hb-pill-text);font-weight:700;font-size:12px;} 6034 .hb-cat--active a{background:#fff;border-color:var(--hb-ring);box-shadow:var(--hb-shadow-sm);color:var(--hb-p700);} 6035 6036 .hb-section{display:flex;flex-direction:column;gap:14px;} 6037 .hb-card{background:var(--hb-card);border:1px solid var(--hb-ring);border-radius:var(--hb-radius);padding:18px;box-shadow:var(--hb-shadow-sm);} 6038 .hb-card:hover{box-shadow:var(--hb-shadow-lg);} 6039 .hb-card h3{margin:0 0 6px;font-size:20px;font-weight:600;color:#4338ca;} 6040 .hb-card .hb-desc{margin:0;color:var(--hb-muted);font-size:14px;} 6041 .hb-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;} 6042 .hb-link{text-decoration:none;display:block;} 6043 .hb-row .hb-arrow{font-size:18px;color:#6366f1;} 6044 .hb-divider{height:1px;background:var(--hb-ring);margin:4px 0 0;} 6045 .hb-empty{background:#fff;border:1px dashed var(--hb-ring);color:var(--hb-muted);padding:24px;border-radius:var(--hb-radius);text-align:center;} 6046 6047 /* === Featured grid (updated) === */ 6048 .hb-featured-wrap{background:#fff;border:1px solid var(--hb-ring);border-radius:var(--hb-radius);padding:18px;box-shadow:var(--hb-shadow-sm);} 6049 .hb-featured-title{font-weight:800;color:var(--hb-muted);text-transform:uppercase;font-size:12px;letter-spacing:.08em;margin:0 0 10px;} 6050 .hb-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} 6051 @media (max-width:1100px){.hb-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} 6052 @media (max-width:640px){.hb-featured-grid{grid-template-columns:1fr;}} 6053 6054 .hb-featured-card{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;border:1px solid var(--hb-ring);border-radius:14px;background:linear-gradient(180deg,#ffffff, #fafbff);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;} 6055 .hb-featured-card:hover{transform:translateY(-2px);box-shadow:var(--hb-shadow-lg);border-color:#d9dce6;} 6056 .hb-featured-head{display:flex;align-items:center;gap:10px;} 6057 .hb-badge{display:none;} /* removed the purple star badge */ 6058 .hb-featured-card h3{margin:2px 0 0;font-size:18px;color:#111827;} 6059 .hb-featured-meta{display:flex;align-items:center;gap:8px;color:var(--hb-muted);font-size:12px;} 6060 .hb-featured-meta .dot{width:4px;height:4px;border-radius:999px;background:#c7cad3;display:inline-block;} 6061 .hb-featured-card .hb-arrow{display:none;} /* removed the right arrow */ 6062 6063 /* --- Sidebar behavior fixes --- */ 6064 @media (min-width: 1025px){ 6065 .hb-sidebar{ 6066 position: sticky; 6067 top: 90px; 6068 max-height: calc(100vh - 110px); 6069 overflow: auto; 6070 z-index: 1; 6071 background: transparent; 6072 } 6073 } 6074 @media (max-width: 1024px){ 6075 .hb-grid{ grid-template-columns: 1fr; gap: 18px; } 6076 .hb-sidebar{ 6077 position: static !important; 6078 top: auto !important; 6079 z-index: auto !important; 6080 margin-bottom: 8px; 6081 } 6082 .hb-section, 6083 .hb-article{ position: relative; z-index: 0; } 6084 } 6085</style> 6086 6087<div class="hb-wrap">
6088 <div class="hb-container"> 6089 6090 <!-- Hero --> 6091 <section class="hb-hero has-text-centered"> 6092 <h1>Bravoboard Help Center</h1> 6093 <p>Guides, FAQs, and tips to get the most out of Bravoboard.</p> 6094 <form class="hb-search" method="get" action="/help/"> 6095 6096 <svg class="hb-icon" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> 6097 <input type="search" name="q" placeholder="Search helpâ¦" value="" aria-label="Search help"/> 6098 6099 </form> 6100 </section> 6101 6102 <!-- Grid --> 6103 <div class="hb-grid"> 6104 6105 <!-- Sidebar --> 6106 <aside class="hb-sidebar"> 6107 <div class="hb-side-title">CATEGORIES</div> 6108 <ul class="hb-cat-list"> 6109 <li class="hb-cat hb-cat--active"> 6110 <a href="/help/"> 6111 <span>All</span> 6112 <span class="hb-count"></span> 6113 </a> 6114 </li> 6115 6116 <li class="hb-cat "> 6117 <a href="/help/?cat=getting-started"> 6118 <span>Getting Started</span> 6119 <span class="hb-count">10</span> 6120 </a> 6121 </li> 6122 6123 <li class="hb-cat "> 6124 <a href="/help/?cat=create-share"> 6125 <span>Create & Share</span> 6126 <span class="hb-count">9</span> 6127 </a> 6128 </li> 6129 6130 <li class="hb-cat "> 6131 <a href="/help/?cat=personalize"> 6132 <span>Personalize</span> 6133 <span class="hb-count">15</span> 6134 </a> 6135 </li> 6136 6137 <li class="hb-cat "> 6138 <a href="/help/?cat=inspiration"> 6139 <span>Inspiration</span> 6140 <span class="hb-count">15</span> 6141 </a> 6142 </li> 6143 6144 <li class="hb-cat "> 6145 <a href="/help/?cat=scheduling-delivery"> 6146 <span>Scheduling & Delivery</span> 6147 <span class="hb-count">11</span> 6148 </a> 6149 </li> 6150 6151 <li class="hb-cat "> 6152 <a href="/help/?cat=billing-plans"> 6153 <span>Billing & Plans</span> 6154 <span class="hb-count">17</span> 6155 </a> 6156 </li> 6157 6158 <li class="hb-cat "> 6159 <a href="/help/?cat=privacy-account"> 6160 <span>Privacy & Account</span> 6161 <span class="hb-count">24</span> 6162 </a> 6163 </li> 6164 6165 <li class="hb-cat "> 6166 <a href="/help/?cat=signing-contributions"> 6167 <span>Signing & Contributions</span> 6168 <span class="hb-count">13</span> 6169 </a> 6170 </li> 6171 6172 <li class="hb-cat "> 6173 <a href="/help/?cat=board-settings"> 6174 <span>Board Settings</span> 6175 <span class="hb-count">13</span> 6176 </a> 6177 </li> 6178 6179 </ul> 6180 </aside> 6181 6182 <!-- Results --> 6183 <main class="hb-section"> 6184 6185 6186 6187 6188 <section class="hb-featured-wrap" aria-label="Featured articles"> 6189 <h2 class="hb-featured-title">Featured</h2> 6190 <div class="hb-featured-grid"> 6191 6192 <a class="hb-featured-card hb-link" href="/help/does-bravoboard-automatically-refresh-when-new-messages-are-added/" aria-label="Does Bravoboard automatically refresh when new messages are added?"> 6193 <div class="hb-featured-head"> 6194 <h3>Does Bravoboard automatically refresh when new messages are added?</h3> 6195 </div> 6196 <div class="hb-featured-meta"> 6197 <span>Getting Started</span> 6198 </div> 6199 </a> 6200 6201 <a class="hb-featured-card hb-link" href="/help/how-do-i-create-my-first-bravoboard/" aria-label="How do I create my first Bravoboard?"> 6202 <div class="hb-featured-head"> 6203 <h3>How do I create my first Bravoboard?</h3> 6204 </div> 6205 <div class="hb-featured-meta">
6206 <span>Getting Started</span> 6207 </div> 6208 </a> 6209 6210 <a class="hb-featured-card hb-link" href="/help/how-do-i-invite-people-to-contribute-to-a-bravoboard/" aria-label="How do I invite people to contribute to a Bravoboard?"> 6211 <div class="hb-featured-head"> 6212 <h3>How do I invite people to contribute to a Bravoboard?</h3> 6213 </div> 6214 <div class="hb-featured-meta"> 6215 <span>Getting Started</span> 6216 </div> 6217 </a> 6218 6219 <a class="hb-featured-card hb-link" href="/help/what-is-bravoboard-and-how-does-it-work/" aria-label="What is Bravoboard and how does it work?"> 6220 <div class="hb-featured-head"> 6221 <h3>What is Bravoboard and how does it work?</h3> 6222 </div> 6223 <div class="hb-featured-meta"> 6224 <span>Getting Started</span> 6225 </div> 6226 </a> 6227 6228 <a class="hb-featured-card hb-link" href="/help/what-is-celebrate-now-and-how-do-i-use-it/" aria-label="What is Celebrate Now and how do I use it?"> 6229 <div class="hb-featured-head"> 6230 <h3>What is Celebrate Now and how do I use it?</h3> 6231 </div> 6232 <div class="hb-featured-meta"> 6233 <span>Getting Started</span> 6234 </div> 6235 </a> 6236 6237 <a class="hb-featured-card hb-link" href="/help/how-do-i-create-a-new-bravoboard/" aria-label="How do I create a new Bravoboard?"> 6238 <div class="hb-featured-head"> 6239 <h3>How do I create a new Bravoboard?</h3> 6240 </div> 6241 <div class="hb-featured-meta"> 6242 <span>Create & Share</span> 6243 </div> 6244 </a> 6245 6246 </div> 6247 </section> 6248 6249 6250 6251 <a class="hb-link" href="/help/can-i-edit-or-rearrange-messages-on-my-board/"> 6252 <article class="hb-card"> 6253 <div class="hb-row"> 6254 <h3>Can I edit or remove messages on my board?</h3> 6255 <span class="hb-arrow">â</span> 6256 </div> 6257 <p class="hb-desc">Getting Started</p> 6258 </article> 6259 </a> 6260 6261 <a class="hb-link" href="/help/can-i-preview-my-bravoboard-before-sending/"> 6262 <article class="hb-card"> 6263 <div class="hb-row"> 6264 <h3>Can I preview my Bravoboard before sending?</h3> 6265 <span class="hb-arrow">â</span> 6266 </div> 6267 <p class="hb-desc">Getting Started</p> 6268 </article> 6269 </a> 6270 6271 <a class="hb-link" href="/help/do-contributors-need-an-account-to-sign-a-bravoboard/"> 6272 <article class="hb-card"> 6273 <div class="hb-row"> 6274 <h3>Do contributors need an account to sign a Bravoboard?</h3> 6275 <span class="hb-arrow">â</span> 6276 </div> 6277 <p class="hb-desc">Getting Started</p> 6278 </article> 6279 </a> 6280 6281 <a class="hb-link" href="/help/how-do-i-share-or-send-the-finished-bravoboard/"> 6282 <article class="hb-card"> 6283 <div class="hb-row"> 6284 <h3>How do I share or send the finished Bravoboard?</h3> 6285 <span class="hb-arrow">â</span> 6286 </div> 6287 <p class="hb-desc">Getting Started</p> 6288 </article> 6289 </a> 6290 6291 <a class="hb-link" href="/help/which-browsers-and-devices-does-bravoboard-support/"> 6292 <article class="hb-card"> 6293 <div class="hb-row"> 6294 <h3>Which browsers and devices does Bravoboard support?</h3> 6295 <span class="hb-arrow">â</span> 6296 </div> 6297 <p class="hb-desc">Getting Started</p> 6298 </article> 6299 </a> 6300 6301 <a class="hb-link" href="/help/can-i-add-another-creator-or-co-owner-to-help-manage-a-board/"> 6302 <article class="hb-card"> 6303 <div class="hb-row"> 6304 <h3>Can I add another creator or co-owner to help manage a board?</h3>
6305 <span class="hb-arrow">â</span> 6306 </div> 6307 <p class="hb-desc">Create & Share</p> 6308 </article> 6309 </a> 6310 6311 <a class="hb-link" href="/help/can-i-embed-my-bravoboard-on-a-website-or-intranet/"> 6312 <article class="hb-card"> 6313 <div class="hb-row"> 6314 <h3>Can I embed my Bravoboard on a website or intranet?</h3> 6315 <span class="hb-arrow">â</span> 6316 </div> 6317 <p class="hb-desc">Create & Share</p> 6318 </article> 6319 </a> 6320 6321 <a class="hb-link" href="/help/can-i-send-the-finished-board-by-link-or-email/"> 6322 <article class="hb-card"> 6323 <div class="hb-row"> 6324 <h3>Can I send the finished board by link or email?</h3> 6325 <span class="hb-arrow">â</span> 6326 </div> 6327 <p class="hb-desc">Create & Share</p> 6328 </article> 6329 </a> 6330 6331 <a class="hb-link" href="/help/do-contributors-need-to-sign-up-to-add-a-message/"> 6332 <article class="hb-card"> 6333 <div class="hb-row"> 6334 <h3>Do contributors need to sign up to add a message?</h3> 6335 <span class="hb-arrow">â</span> 6336 </div> 6337 <p class="hb-desc">Create & Share</p> 6338 </article> 6339 </a> 6340 6341 <a class="hb-link" href="/help/how-do-i-embed-a-youtube-video-in-my-board/"> 6342 <article class="hb-card"> 6343 <div class="hb-row"> 6344 <h3>How do I embed a YouTube video in my board?</h3> 6345 <span class="hb-arrow">â</span> 6346 </div> 6347 <p class="hb-desc">Create & Share</p> 6348 </article> 6349 </a> 6350 6351 <a class="hb-link" href="/help/can-i-add-my-personal-events-on-the-upcoming-events-panel/"> 6352 <article class="hb-card"> 6353 <div class="hb-row"> 6354 <h3>Can I add my personal events on the Upcoming Events panel?</h3> 6355 <span class="hb-arrow">â</span> 6356 </div> 6357 <p class="hb-desc">Personalize</p> 6358 </article> 6359 </a> 6360 6361 <a class="hb-link" href="/help/can-i-change-fonts-colors-and-text-size-on-my-board/"> 6362 <article class="hb-card"> 6363 <div class="hb-row"> 6364 <h3>Can I change fonts, colors, and text size on my board?</h3> 6365 <span class="hb-arrow">â</span> 6366 </div> 6367 <p class="hb-desc">Personalize</p> 6368 </article> 6369 </a> 6370 6371 <a class="hb-link" href="/help/can-i-format-text-with-bold-italics-links-and-line-breaks/"> 6372 <article class="hb-card"> 6373 <div class="hb-row"> 6374 <h3>Can I format text with bold, italics, links, and line breaks?</h3> 6375 <span class="hb-arrow">â</span> 6376 </div> 6377 <p class="hb-desc">Personalize</p> 6378 </article> 6379 </a> 6380 6381 <a class="hb-link" href="/help/can-i-hide-official-events-and-show-only-my-personal-ones-on-bravoboard/"> 6382 <article class="hb-card"> 6383 <div class="hb-row"> 6384 <h3>Can I hide official events and show only my personal ones on Bravoboard?</h3> 6385 <span class="hb-arrow">â</span> 6386 </div> 6387 <p class="hb-desc">Personalize</p> 6388 </article> 6389 </a> 6390 6391 <a class="hb-link" href="/help/how-can-i-preview-proof-and-print-a-keepsake-version/"> 6392 <article class="hb-card"> 6393 <div class="hb-row"> 6394 <h3>How can I preview, proof, and print a keepsake version?</h3> 6395 <span class="hb-arrow">â</span> 6396 </div> 6397 <p class="hb-desc">Personalize</p> 6398 </article> 6399 </a> 6400 6401 <a class="hb-link" href="/help/how-do-i-add-stickers-emojis-and-fun-animations/"> 6402 <article class="hb-card"> 6403 <div class="hb-row"> 6404 <h3>How do I add stickers, emojis, and fun animations?</h3>
6405 <span class="hb-arrow">â</span> 6406 </div> 6407 <p class="hb-desc">Personalize</p> 6408 </article> 6409 </a> 6410 6411 <a class="hb-link" href="/help/how-do-i-crop-rotate-or-replace-an-uploaded-image/"> 6412 <article class="hb-card"> 6413 <div class="hb-row"> 6414 <h3>How do I crop, rotate, or replace an uploaded image?</h3> 6415 <span class="hb-arrow">â</span> 6416 </div> 6417 <p class="hb-desc">Personalize</p> 6418 </article> 6419 </a> 6420 6421 <a class="hb-link" href="/help/how-do-i-rearrange-or-align-posts-on-the-board/"> 6422 <article class="hb-card"> 6423 <div class="hb-row"> 6424 <h3>How do I rearrange or align posts on the board?</h3> 6425 <span class="hb-arrow">â</span> 6426 </div> 6427 <p class="hb-desc">Personalize</p> 6428 </article> 6429 </a> 6430 6431 <a class="hb-link" href="/help/how-do-i-remove-or-edit-a-contributor-post-as-the-owner/"> 6432 <article class="hb-card"> 6433 <div class="hb-row"> 6434 <h3>How do I remove or edit a contributor post as the owner?</h3> 6435 <span class="hb-arrow">â</span> 6436 </div> 6437 <p class="hb-desc">Personalize</p> 6438 </article> 6439 </a> 6440 6441 <a class="hb-link" href="/help/how-do-i-set-or-edit-the-cover-image-and-title/"> 6442 <article class="hb-card"> 6443 <div class="hb-row"> 6444 <h3>How do I set or edit the cover image and title?</h3> 6445 <span class="hb-arrow">â</span> 6446 </div> 6447 <p class="hb-desc">Personalize</p> 6448 </article> 6449 </a> 6450 6451 <a class="hb-link" href="/help/what-are-the-recommended-image-and-video-sizes/"> 6452 <article class="hb-card"> 6453 <div class="hb-row"> 6454 <h3>What are the recommended image and video sizes?</h3> 6455 <span class="hb-arrow">â</span> 6456 </div> 6457 <p class="hb-desc">Personalize</p> 6458 </article> 6459 </a> 6460 6461 <a class="hb-link" href="/help/can-bravoboard-be-used-for-celebrations-beyond-birthdays-and-farewells/"> 6462 <article class="hb-card"> 6463 <div class="hb-row"> 6464 <h3>Can Bravoboard be used for celebrations beyond birthdays and farewells?</h3> 6465 <span class="hb-arrow">â</span> 6466 </div> 6467 <p class="hb-desc">Inspiration</p> 6468 </article> 6469 </a> 6470 6471 <a class="hb-link" href="/help/can-i-use-bravoboard-for-virtual-events-or-remote-celebrations/"> 6472 <article class="hb-card"> 6473 <div class="hb-row"> 6474 <h3>Can I use Bravoboard for virtual events or remote celebrations?</h3> 6475 <span class="hb-arrow">â</span> 6476 </div> 6477 <p class="hb-desc">Inspiration</p> 6478 </article> 6479 </a> 6480 6481 <a class="hb-link" href="/help/how-can-i-ensure-my-board-looks-great-on-mobile-and-desktop/"> 6482 <article class="hb-card"> 6483 <div class="hb-row"> 6484 <h3>How can I ensure my board looks great on mobile and desktop?</h3> 6485 <span class="hb-arrow">â</span> 6486 </div> 6487 <p class="hb-desc">Inspiration</p> 6488 </article> 6489 </a> 6490 6491 <a class="hb-link" href="/help/how-can-i-inspire-authentic-messages-from-contributors/"> 6492 <article class="hb-card"> 6493 <div class="hb-row"> 6494 <h3>How can I inspire authentic messages from contributors?</h3> 6495 <span class="hb-arrow">â</span> 6496 </div> 6497 <p class="hb-desc">Inspiration</p> 6498 </article> 6499 </a> 6500 6501 <a class="hb-link" href="/help/how-do-i-craft-a-thank-you-or-appreciation-board-for-a-teacher-or-admin/"> 6502 <article class="hb-card"> 6503 <div class="hb-row"> 6504 <h3>
6504How do I craft a âthank youâ or appreciation board for a teacher or admin?</h3> 6505 <span class="hb-arrow">â</span> 6506 </div> 6507 <p class="hb-desc">Inspiration</p> 6508 </article> 6509 </a> 6510 6511 <a class="hb-link" href="/help/how-do-i-select-the-right-tone-and-prompt-contributors-effectively/"> 6512 <article class="hb-card"> 6513 <div class="hb-row"> 6514 <h3>How do I select the right tone and prompt contributors effectively?</h3> 6515 <span class="hb-arrow">â</span> 6516 </div> 6517 <p class="hb-desc">Inspiration</p> 6518 </article> 6519 </a> 6520 6521 <a class="hb-link" href="/help/what-are-examples-of-corporate-use-cases-for-bravoboard/"> 6522 <article class="hb-card"> 6523 <div class="hb-row"> 6524 <h3>What are examples of corporate use cases for Bravoboard?</h3> 6525 <span class="hb-arrow">â</span> 6526 </div> 6527 <p class="hb-desc">Inspiration</p> 6528 </article> 6529 </a> 6530 6531 <a class="hb-link" href="/help/what-are-some-quick-start-templates-or-sample-boards-to-get-inspired/"> 6532 <article class="hb-card"> 6533 <div class="hb-row"> 6534 <h3>What are some quick-start templates or sample boards to get inspired?</h3> 6535 <span class="hb-arrow">â</span> 6536 </div> 6537 <p class="hb-desc">Inspiration</p> 6538 </article> 6539 </a> 6540 6541 <a class="hb-link" href="/help/what-are-the-best-practices-for-collecting-media-contributions-photos-voice-notes-videos/"> 6542 <article class="hb-card"> 6543 <div class="hb-row"> 6544 <h3>What are the best practices for collecting media contributions (photos, voice-notes, videos)?</h3> 6545 <span class="hb-arrow">â</span> 6546 </div> 6547 <p class="hb-desc">Inspiration</p> 6548 </article> 6549 </a> 6550 6551 <a class="hb-link" href="/help/what-message-ideas-can-i-use-for-a-board-when-someone-is-returning-to-office-rto/"> 6552 <article class="hb-card"> 6553 <div class="hb-row"> 6554 <h3>What message ideas can I use for a board when someone is returning to office (RTO)?</h3> 6555 <span class="hb-arrow">â</span> 6556 </div> 6557 <p class="hb-desc">Inspiration</p> 6558 </article> 6559 </a> 6560 6561 <a class="hb-link" href="/help/can-bravoboard-be-used-for-celebrations-beyond-birthdays-and-farewells-2/"> 6562 <article class="hb-card"> 6563 <div class="hb-row"> 6564 <h3>Can Bravoboard be used for celebrations beyond birthdays and farewells?</h3> 6565 <span class="hb-arrow">â</span> 6566 </div> 6567 <p class="hb-desc">Scheduling & Delivery</p> 6568 </article> 6569 </a> 6570 6571 <a class="hb-link" href="/help/how-can-i-ensure-my-board-looks-great-on-mobile-and-desktop-2/"> 6572 <article class="hb-card"> 6573 <div class="hb-row"> 6574 <h3>How can I ensure my board looks great on mobile and desktop?</h3> 6575 <span class="hb-arrow">â</span> 6576 </div> 6577 <p class="hb-desc">Scheduling & Delivery</p> 6578 </article> 6579 </a> 6580 6581 <a class="hb-link" href="/help/how-do-i-craft-a-thank-you-or-appreciation-board-for-a-teacher-or-admin-2/"> 6582 <article class="hb-card"> 6583 <div class="hb-row"> 6584 <h3>How do I craft a âthank youâ or appreciation board for a teacher or admin?</h3> 6585 <span class="hb-arrow">â</span> 6586 </div> 6587 <p class="hb-desc">Scheduling & Delivery</p> 6588 </article> 6589 </a> 6590 6591 <a class="hb-link" href="/help/how-do-i-select-the-right-tone-and-prompt-contributors-effectively-2/"> 6592 <article class="hb-card"> 6593 <div class="hb-row"> 6594 <h3>How do I select the right tone and prompt contributors effectively?</h3>
6595 <span class="hb-arrow">â</span> 6596 </div> 6597 <p class="hb-desc">Scheduling & Delivery</p> 6598 </article> 6599 </a> 6600 6601 <a class="hb-link" href="/help/what-are-some-quick-start-templates-or-sample-boards-to-get-inspired-2/"> 6602 <article class="hb-card"> 6603 <div class="hb-row"> 6604 <h3>What are some quick-start templates or sample boards to get inspired?</h3> 6605 <span class="hb-arrow">â</span> 6606 </div> 6607 <p class="hb-desc">Scheduling & Delivery</p> 6608 </article> 6609 </a> 6610 6611 <a class="hb-link" href="/help/what-are-the-best-practices-for-collecting-media-contributions-photos-voice-notes-videos-2/"> 6612 <article class="hb-card"> 6613 <div class="hb-row"> 6614 <h3>What are the best practices for collecting media contributions (photos, voice-notes, videos)?</h3> 6615 <span class="hb-arrow">â</span> 6616 </div> 6617 <p class="hb-desc">Scheduling & Delivery</p> 6618 </article> 6619 </a> 6620 6621 <a class="hb-link" href="/help/what-message-ideas-can-i-use-for-a-board-when-someone-is-returning-to-office-rto-2/"> 6622 <article class="hb-card"> 6623 <div class="hb-row"> 6624 <h3>What message ideas can I use for a board when someone is returning to office (RTO)?</h3> 6625 <span class="hb-arrow">â</span> 6626 </div> 6627 <p class="hb-desc">Scheduling & Delivery</p> 6628 </article> 6629 </a> 6630 6631 <a class="hb-link" href="/help/can-i-re-subscribe-after-canceling/"> 6632 <article class="hb-card"> 6633 <div class="hb-row"> 6634 <h3>Can I re-subscribe after canceling?</h3> 6635 <span class="hb-arrow">â</span> 6636 </div> 6637 <p class="hb-desc">Billing & Plans</p> 6638 </article> 6639 </a> 6640 6641 <a class="hb-link" href="/help/can-i-switch-between-monthly-and-yearly-plans/"> 6642 <article class="hb-card"> 6643 <div class="hb-row"> 6644 <h3>Can I switch between monthly and yearly plans?</h3> 6645 <span class="hb-arrow">â</span> 6646 </div> 6647 <p class="hb-desc">Billing & Plans</p> 6648 </article> 6649 </a> 6650 6651 <a class="hb-link" href="/help/do-you-offer-refunds-after-cancellation/"> 6652 <article class="hb-card"> 6653 <div class="hb-row"> 6654 <h3>Do you offer refunds after cancellation?</h3> 6655 <span class="hb-arrow">â</span> 6656 </div> 6657 <p class="hb-desc">Billing & Plans</p> 6658 </article> 6659 </a> 6660 6661 <a class="hb-link" href="/help/how-can-i-view-my-invoices-and-payment-history/"> 6662 <article class="hb-card"> 6663 <div class="hb-row"> 6664 <h3>How can I view my invoices and payment history?</h3> 6665 <span class="hb-arrow">â</span> 6666 </div> 6667 <p class="hb-desc">Billing & Plans</p> 6668 </article> 6669 </a> 6670 6671 <a class="hb-link" href="/help/how-do-i-change-my-payment-method-or-billing-details/"> 6672 <article class="hb-card"> 6673 <div class="hb-row"> 6674 <h3>How do I change my payment method or billing details?</h3> 6675 <span class="hb-arrow">â</span> 6676 </div> 6677 <p class="hb-desc">Billing & Plans</p> 6678 </article> 6679 </a> 6680 6681 <a class="hb-link" href="/help/how-do-board-credits-work-when-i-create-or-share-boards/"> 6682 <article class="hb-card"> 6683 <div class="hb-row"> 6684 <h3>How do board credits work when I create or share boards?</h3> 6685 <span class="hb-arrow">â</span> 6686 </div> 6687 <p class="hb-desc">Billing & Plans</p> 6688 </article> 6689 </a> 6690 6691 <a class="hb-link" href="/help/is-there-a-free-plan-or-trial-so-i-can-test-bravoboard/"> 6692 <article class="hb-card"> 6693 <div class="hb-row"> 6694 <h3>Is there a free plan or trial so I can test Bravoboard?</h3>
6695 <span class="hb-arrow">â</span> 6696 </div> 6697 <p class="hb-desc">Billing & Plans</p> 6698 </article> 6699 </a> 6700 6701 <a class="hb-link" href="/help/access-via-team-subscription/"> 6702 <article class="hb-card"> 6703 <div class="hb-row"> 6704 <h3>What does "access via your team's subscription" mean?</h3> 6705 <span class="hb-arrow">â</span> 6706 </div> 6707 <p class="hb-desc">Billing & Plans</p> 6708 </article> 6709 </a> 6710 6711 <a class="hb-link" href="/help/what-happens-to-my-boards-if-i-cancel-my-plan/"> 6712 <article class="hb-card"> 6713 <div class="hb-row"> 6714 <h3>What happens to my boards if I cancel my plan?</h3> 6715 <span class="hb-arrow">â</span> 6716 </div> 6717 <p class="hb-desc">Billing & Plans</p> 6718 </article> 6719 </a> 6720 6721 <a class="hb-link" href="/help/what-is-team-plan-features/"> 6722 <article class="hb-card"> 6723 <div class="hb-row"> 6724 <h3>What is the Team Plan and what features does it include?</h3> 6725 <span class="hb-arrow">â</span> 6726 </div> 6727 <p class="hb-desc">Billing & Plans</p> 6728 </article> 6729 </a> 6730 6731 <a class="hb-link" href="/help/what-payment-methods-are-accepted/"> 6732 <article class="hb-card"> 6733 <div class="hb-row"> 6734 <h3>What payment methods are accepted?</h3> 6735 <span class="hb-arrow">â</span> 6736 </div> 6737 <p class="hb-desc">Billing & Plans</p> 6738 </article> 6739 </a> 6740 6741 <a class="hb-link" href="/help/billing-subscription-my-account/"> 6742 <article class="hb-card"> 6743 <div class="hb-row"> 6744 <h3>Where do I see or manage my subscription on My Account?</h3> 6745 <span class="hb-arrow">â</span> 6746 </div> 6747 <p class="hb-desc">Billing & Plans</p> 6748 </article> 6749 </a> 6750 6751 <a class="hb-link" href="/help/who-processes-bravoboard-payments/"> 6752 <article class="hb-card"> 6753 <div class="hb-row"> 6754 <h3>Who processes Bravoboard payments?</h3> 6755 <span class="hb-arrow">â</span> 6756 </div> 6757 <p class="hb-desc">Billing & Plans</p> 6758 </article> 6759 </a> 6760 6761 <a class="hb-link" href="/help/will-i-receive-a-confirmation-after-canceling/"> 6762 <article class="hb-card"> 6763 <div class="hb-row"> 6764 <h3>Will I receive a confirmation after canceling?</h3> 6765 <span class="hb-arrow">â</span> 6766 </div> 6767 <p class="hb-desc">Billing & Plans</p> 6768 </article> 6769 </a> 6770 6771 <a class="hb-link" href="/help/are-bravoboards-private-by-default-and-indexed-by-search-engines/"> 6772 <article class="hb-card"> 6773 <div class="hb-row"> 6774 <h3>Are Bravoboards private by default and indexed by search engines?</h3> 6775 <span class="hb-arrow">â</span> 6776 </div> 6777 <p class="hb-desc">Privacy & Account</p> 6778 </article> 6779 </a> 6780 6781 <a class="hb-link" href="/help/can-i-export-my-data-or-request-a-copy-of-my-information/"> 6782 <article class="hb-card"> 6783 <div class="hb-row"> 6784 <h3>Can I export my data or request a copy of my information?</h3> 6785 <span class="hb-arrow">â</span> 6786 </div> 6787 <p class="hb-desc">Privacy & Account</p> 6788 </article> 6789 </a> 6790 6791 <a class="hb-link" href="/help/do-you-support-gdpr-and-ccpa-privacy-rights/"> 6792 <article class="hb-card"> 6793 <div class="hb-row"> 6794 <h3>Do you support GDPR and CCPA privacy rights?</h3>
6795 <span class="hb-arrow">â</span> 6796 </div> 6797 <p class="hb-desc">Privacy & Account</p> 6798 </article> 6799 </a> 6800 6801 <a class="hb-link" href="/help/do-you-use-cookies-or-analytics/"> 6802 <article class="hb-card"> 6803 <div class="hb-row"> 6804 <h3>Do you use cookies or analytics?</h3> 6805 <span class="hb-arrow">â</span> 6806 </div> 6807 <p class="hb-desc">Privacy & Account</p> 6808 </article> 6809 </a> 6810 6811 <a class="hb-link" href="/help/accept-team-invite/"> 6812 <article class="hb-card"> 6813 <div class="hb-row"> 6814 <h3>How do I accept a team invite?</h3> 6815 <span class="hb-arrow">â</span> 6816 </div> 6817 <p class="hb-desc">Privacy & Account</p> 6818 </article> 6819 </a> 6820 6821 <a class="hb-link" href="/help/how-do-i-delete-a-post-a-board-or-my-entire-account/"> 6822 <article class="hb-card"> 6823 <div class="hb-row"> 6824 <h3>How do I delete a post, a board, or my entire account?</h3> 6825 <span class="hb-arrow">â</span> 6826 </div> 6827 <p class="hb-desc">Privacy & Account</p> 6828 </article> 6829 </a> 6830 6831 <a class="hb-link" href="/help/invite-team-members/"> 6832 <article class="hb-card"> 6833 <div class="hb-row"> 6834 <h3>How do I invite someone to my team?</h3> 6835 <span class="hb-arrow">â</span> 6836 </div> 6837 <p class="hb-desc">Privacy & Account</p> 6838 </article> 6839 </a> 6840 6841 <a class="hb-link" href="/help/how-do-i-manage-emails-and-unsubscribe-from-marketing-messages/"> 6842 <article class="hb-card"> 6843 <div class="hb-row"> 6844 <h3>How do I manage emails and unsubscribe from marketing messages?</h3> 6845 <span class="hb-arrow">â</span> 6846 </div> 6847 <p class="hb-desc">Privacy & Account</p> 6848 </article> 6849 </a> 6850 6851 <a class="hb-link" href="/help/manage-team-invite-members/"> 6852 <article class="hb-card"> 6853 <div class="hb-row"> 6854 <h3>How do I manage my team and invite members?</h3> 6855 <span class="hb-arrow">â</span> 6856 </div> 6857 <p class="hb-desc">Privacy & Account</p> 6858 </article> 6859 </a> 6860 6861 <a class="hb-link" href="/help/remove-or-disable-team-member/"> 6862 <article class="hb-card"> 6863 <div class="hb-row"> 6864 <h3>How do I remove or disable a team member?</h3> 6865 <span class="hb-arrow">â</span> 6866 </div> 6867 <p class="hb-desc">Privacy & Account</p> 6868 </article> 6869 </a> 6870 6871 <a class="hb-link" href="/help/how-do-i-report-abuse-privacy-issues-or-a-security-concern/"> 6872 <article class="hb-card"> 6873 <div class="hb-row"> 6874 <h3>How do I report abuse, privacy issues, or a security concern?</h3> 6875 <span class="hb-arrow">â</span> 6876 </div> 6877 <p class="hb-desc">Privacy & Account</p> 6878 </article> 6879 </a> 6880 6881 <a class="hb-link" href="/help/update-account-details/"> 6882 <article class="hb-card"> 6883 <div class="hb-row"> 6884 <h3>How do I update my account details?</h3> 6885 <span class="hb-arrow">â</span> 6886 </div> 6887 <p class="hb-desc">Privacy & Account</p> 6888 </article> 6889 </a> 6890 6891 <a class="hb-link" href="/help/how-does-bravoboard-handle-payment-information/"> 6892 <article class="hb-card"> 6893 <div class="hb-row"> 6894 <h3>How does Bravoboard handle payment information?</h3> 6895 <span class="hb-arrow">â</span> 6896 </div> 6897 <p class="hb-desc">Privacy & Account</p> 6898 </article> 6899 </a> 6900 6901 <a class="hb-link" href="/help/how-long-do-you-keep-my-data-and-what-happens-after-i-delete-it/"> 6902 <article class="hb-card"> 6903 <div class="hb-row"> 6904 <h3>How long do you keep my data, and what happens after I delete it?</h3>
6905 <span class="hb-arrow">â</span> 6906 </div> 6907 <p class="hb-desc">Privacy & Account</p> 6908 </article> 6909 </a> 6910 6911 <a class="hb-link" href="/help/is-bravoboard-appropriate-for-children/"> 6912 <article class="hb-card"> 6913 <div class="hb-row"> 6914 <h3>Is Bravoboard appropriate for children?</h3> 6915 <span class="hb-arrow">â</span> 6916 </div> 6917 <p class="hb-desc">Privacy & Account</p> 6918 </article> 6919 </a> 6920 6921 <a class="hb-link" href="/help/personal-vs-team-boards/"> 6922 <article class="hb-card"> 6923 <div class="hb-row"> 6924 <h3>What's the difference between Personal and Team boards?</h3> 6925 <span class="hb-arrow">â</span> 6926 </div> 6927 <p class="hb-desc">Privacy & Account</p> 6928 </article> 6929 </a> 6930 6931 <a class="hb-link" href="/help/team-roles-admin-vs-member/"> 6932 <article class="hb-card"> 6933 <div class="hb-row"> 6934 <h3>What's the difference between Team Admin and Member?</h3> 6935 <span class="hb-arrow">â</span> 6936 </div> 6937 <p class="hb-desc">Privacy & Account</p> 6938 </article> 6939 </a> 6940 6941 <a class="hb-link" href="/help/why-no-invite-or-team-management/"> 6942 <article class="hb-card"> 6943 <div class="hb-row"> 6944 <h3>Why don't I see the Invite button or team management?</h3> 6945 <span class="hb-arrow">â</span> 6946 </div> 6947 <p class="hb-desc">Privacy & Account</p> 6948 </article> 6949 </a> 6950 6951 <a class="hb-link" href="/help/ai-generated-content-disclaimer/"> 6952 <article class="hb-card"> 6953 <div class="hb-row"> 6954 <h3>AI-generated content disclaimer</h3> 6955 <span class="hb-arrow">â</span> 6956 </div> 6957 <p class="hb-desc">Signing & Contributions</p> 6958 </article> 6959 </a> 6960 6961 <a class="hb-link" href="/help/can-i-add-a-voice-message/"> 6962 <article class="hb-card"> 6963 <div class="hb-row"> 6964 <h3>Can I add a voice message?</h3> 6965 <span class="hb-arrow">â</span> 6966 </div> 6967 <p class="hb-desc">Signing & Contributions</p> 6968 </article> 6969 </a> 6970 6971 <a class="hb-link" href="/help/can-i-edit-or-delete-my-post-after-publishing/"> 6972 <article class="hb-card"> 6973 <div class="hb-row"> 6974 <h3>Can I edit or delete my post after publishing?</h3> 6975 <span class="hb-arrow">â</span> 6976 </div> 6977 <p class="hb-desc">Signing & Contributions</p> 6978 </article> 6979 </a> 6980 6981 <a class="hb-link" href="/help/can-i-leave-my-email-so-the-recipient-can-thank-me/"> 6982 <article class="hb-card"> 6983 <div class="hb-row"> 6984 <h3>Can I leave my email so the recipient can thank me?</h3> 6985 <span class="hb-arrow">â</span> 6986 </div> 6987 <p class="hb-desc">Signing & Contributions</p> 6988 </article> 6989 </a> 6990 6991 <a class="hb-link" href="/help/do-i-have-to-agree-to-terms-and-privacy-policy-to-post/"> 6992 <article class="hb-card"> 6993 <div class="hb-row"> 6994 <h3>Do I have to agree to Terms and Privacy Policy to post?</h3> 6995 <span class="hb-arrow">â</span> 6996 </div> 6997 <p class="hb-desc">Signing & Contributions</p> 6998 </article> 6999 </a> 7000 7001 <a class="hb-link" href="/help/how-do-i-add-a-gif-and-why-do-i-see-giphy-and-tenor/"> 7002 <article class="hb-card"> 7003 <div class="hb-row"> 7004 <h3>How do I add a GIF and why do I see Giphy and Tenor?</h3>
7005 <span class="hb-arrow">â</span> 7006 </div> 7007 <p class="hb-desc">Signing & Contributions</p> 7008 </article> 7009 </a> 7010 7011 <a class="hb-link" href="/help/how-many-times-can-i-post-on-a-board/"> 7012 <article class="hb-card"> 7013 <div class="hb-row"> 7014 <h3>How many times can I post on a board?</h3> 7015 <span class="hb-arrow">â</span> 7016 </div> 7017 <p class="hb-desc">Signing & Contributions</p> 7018 </article> 7019 </a> 7020 7021 <a class="hb-link" href="/help/my-gif-search-is-not-finding-results-what-can-i-try/"> 7022 <article class="hb-card"> 7023 <div class="hb-row"> 7024 <h3>My GIF search is not finding results. What can I try?</h3> 7025 <span class="hb-arrow">â</span> 7026 </div> 7027 <p class="hb-desc">Signing & Contributions</p> 7028 </article> 7029 </a> 7030 7031 <a class="hb-link" href="/help/what-happens-to-my-content-and-what-license-applies/"> 7032 <article class="hb-card"> 7033 <div class="hb-row"> 7034 <h3>What happens to my content and what license applies?</h3> 7035 <span class="hb-arrow">â</span> 7036 </div> 7037 <p class="hb-desc">Signing & Contributions</p> 7038 </article> 7039 </a> 7040 7041 <a class="hb-link" href="/help/are-shared-boards-private-who-can-see-my-board/"> 7042 <article class="hb-card"> 7043 <div class="hb-row"> 7044 <h3>Are shared boards private? Who can see my board?</h3> 7045 <span class="hb-arrow">â</span> 7046 </div> 7047 <p class="hb-desc">Board Settings</p> 7048 </article> 7049 </a> 7050 7051 <a class="hb-link" href="/help/custom-logo-branding-team-plan/"> 7052 <article class="hb-card"> 7053 <div class="hb-row"> 7054 <h3>How do I add a custom logo to my board?</h3> 7055 <span class="hb-arrow">â</span> 7056 </div> 7057 <p class="hb-desc">Board Settings</p> 7058 </article> 7059 </a> 7060 7061 <a class="hb-link" href="/help/board-visibility-personal-team/"> 7062 <article class="hb-card"> 7063 <div class="hb-row"> 7064 <h3>How do I change board visibility to personal or team?</h3> 7065 <span class="hb-arrow">â</span> 7066 </div> 7067 <p class="hb-desc">Board Settings</p> 7068 </article> 7069 </a> 7070 7071 <a class="hb-link" href="/help/how-do-i-lock-or-archive-a-board-after-sharing/"> 7072 <article class="hb-card"> 7073 <div class="hb-row"> 7074 <h3>How do I lock or archive a board after sharing?</h3> 7075 <span class="hb-arrow">â</span> 7076 </div> 7077 <p class="hb-desc">Board Settings</p> 7078 </article> 7079 </a> 7080 7081 <a class="hb-link" href="/help/post-approval-team-plan/"> 7082 <article class="hb-card"> 7083 <div class="hb-row"> 7084 <h3>How do I require post approval before posts are visible?</h3> 7085 <span class="hb-arrow">â</span> 7086 </div> 7087 <p class="hb-desc">Board Settings</p> 7088 </article> 7089 </a> 7090 7091 <a class="hb-link" href="/help/invite-only-posting-code-team-plan/"> 7092 <article class="hb-card"> 7093 <div class="hb-row"> 7094 <h3>How do I set up invite-only posting with a code?</h3> 7095 <span class="hb-arrow">â</span> 7096 </div> 7097 <p class="hb-desc">Board Settings</p> 7098 </article> 7099 </a> 7100 7101 <a class="hb-link" href="/help/how-many-email-addresses-can-i-add-when-i-use-share-to-invite-people/"> 7102 <article class="hb-card"> 7103 <div class="hb-row"> 7104 <h3>How many email addresses can I add when I use Share to invite people?</h3>
7105 <span class="hb-arrow">â</span> 7106 </div> 7107 <p class="hb-desc">Board Settings</p> 7108 </article> 7109 </a> 7110 7111 <a class="hb-link" href="/help/contributor-opt-in-team-plan-paid-boards/"> 7112 <article class="hb-card"> 7113 <div class="hb-row"> 7114 <h3>What is contributor opt-in on Bravoboard?</h3> 7115 <span class="hb-arrow">â</span> 7116 </div> 7117 <p class="hb-desc">Board Settings</p> 7118 </article> 7119 </a> 7120 7121 <a class="hb-link" href="/help/what-is-the-ai-wish-composer-and-how-do-i-use-it/"> 7122 <article class="hb-card"> 7123 <div class="hb-row"> 7124 <h3>What is the AI-Wish Composer and how do I use it?</h3> 7125 <span class="hb-arrow">â</span> 7126 </div> 7127 <p class="hb-desc">Board Settings</p> 7128 </article> 7129 </a> 7130 7131 <a class="hb-link" href="/help/embed-allow-list/"> 7132 <article class="hb-card"> 7133 <div class="hb-row"> 7134 <h3>What is the embed allow list and how do I use it?</h3> 7135 <span class="hb-arrow">â</span> 7136 </div> 7137 <p class="hb-desc">Board Settings</p> 7138 </article> 7139 </a> 7140 7141 </main> 7142 </div> 7143 </div> 7144</div> 7145 7146 7147<!-- modal --> 7148 7149 <div class="modal is-clipped" id="modal-board" role="dialog" aria-modal="true" aria-labelledby="modal-title"> 7150 <div class="modal-background" style="opacity:0.9;"></div> 7151 <div class="modal-content box grad_modal_bg"> 7152 <!-- forms will go here --> 7153 </div> 7154 <button class="modal-close is-large" aria-label="close"></button> 7155 </div> 7156<!-- modal --> 7157 7158 7159
7160<script type="application/ld+json"> 7161{ 7162 "@context":"https://schema.org", 7163 "@type":"CollectionPage", 7164 "name":"Bravoboard Help Center", 7165 "description":"Guides, FAQs, and tips to get the most out of Bravoboard.", 7166 "mainEntityOfPage":"https://www.bravoboard.xyz/help/" 7167} 7168</script>
7168 7169 7170 </main> 7171 7172 <footer role="contentinfo"> 7173 7174<!-- included in base --> 7175 7176<footer class="footer" style="padding-bottom:2rem;font-size:0.9em; 7177 background-color:#222222; 7178 /*background: url(https://d1e7moeca5rg6t.cloudfront.net/static/patterns/svg/lines.jpg);*/ 7179 "> 7180 <div class="container"> 7181 <div class="columns"> 7182 <div class="column is-4"> 7183 <h4 class="bd-footer-title"> 7184 <svg xmlns="http://www.w3.org/2000/svg" width="152.125" height="35"><path fill="red" d="M21.813 0h130.313v35H21.813z"/><path fill="#000" d="M0 0h112.5v35H0z"/><path d="M13.867 22v-8.531h2.924a3.57 3.57 0 012.2.58 2.043 2.043 0 01.756 1.729 1.842 1.842 0 01-.316 1.055 2.037 2.037 0 01-.926.727 1.883 1.883 0 011.069.706 2.056 2.056 0 01.378 1.245 2.271 2.271 0 01-.771 1.846 3.35 3.35 0 01-2.202.643zm1.482-4.939H16.8a1.68 1.68 0 001.081-.313 1.074 1.074 0 00.39-.888 1.089 1.089 0 00-.36-.914 1.82 1.82 0 00-1.122-.281H15.35zm0 1.09V20.8H17a1.6 1.6 0 001.09-.344 1.206 1.206 0 00.393-.957 1.215 1.215 0 00-1.359-1.354zm14.969-4.682v5.7a2.771 2.771 0 01-.87 2.153 3.305 3.305 0 01-2.317.794 3.329 3.329 0 01-2.326-.782 2.784 2.784 0 01-.861-2.171v-5.7h1.477v5.7a1.809 1.809 0 00.434 1.3 1.7 1.7 0 001.277.45q1.711 0 1.711-1.8v-5.644zM36.1 22h-1.473v-8.531H36.1zm5.949-1.2h3.873V22h-5.356v-8.531h1.482zm12.613-6.136H52V22h-1.469v-7.336h-2.637v-1.2h6.768zm15.727 5.227l1.311-6.422h1.471L71.2 22h-1.415l-1.623-6.229L66.5 22h-1.42l-1.969-8.531h1.471l1.324 6.41 1.629-6.41h1.242zM78.46 22h-1.476v-8.531h1.476zm10.457-7.336h-2.66V22h-1.471v-7.336h-2.637v-1.2h6.768zM99.449 22h-1.476v-3.785h-3.815V22h-1.482v-8.531h1.482v3.551h3.814v-3.551h1.477zm38.532-9.125a3.6 3.6 0 00-4.785 0l-.9.823-.9-.823a3.6 3.6 0 00-4.783 0 3.292 3.292 0 000 4.941l5.682 5.218 5.684-5.225a3.3 3.3 0 000-4.945z" fill="#fff"/></svg> 7185 </h4> 7186 7187 7188 <div class="bd-footer-tsp has-text-white"> 7189 Content licensed <a class="has-text-white is-underlined" rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 7190 4.0</a> 7191 </div> 7192 7193 </div> 7194 <div class="column is-4"> 7195 <h4 class="bd-footer-title"> 7196 7197 <a class="has-text-white" 7198 href="mailto:[email protected]" target="_blank"> 7199 <span></span> 7200 <div><strong>Support Us</strong></div> 7201 <div class="tag is-small" style="border-radius:10px;font-weight:500;color:#000;"> 7202<!-- <svg class="mr-2" width="15" viewBox="0 0 25 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.0672 8.1281L22.0437 8.11426L21.9893 8.09766C22.0112 8.11614 22.0386 8.12685 22.0672 8.1281Z" fill="#fff"></path> <path d="M22.4111 10.5781L22.3848 10.5855L22.4111 10.5781Z" fill="#fff"></path> <path d="M22.0735 8.11128C22.0708 8.11093 22.0681 8.11029 22.0655 8.10938C22.0654 8.11115 22.0654 8.11293 22.0655 8.1147C22.0685 8.11432 22.0712 8.11313 22.0735 8.11128Z" fill="#fff"></path> <path d="M22.3877 10.5647L22.4274 10.5421L22.4421 10.5338L22.4555 10.5195C22.4303 10.5304 22.4074 10.5457 22.3877 10.5647Z" fill="black"></path> <path d="M22.1334 8.1762L22.0947 8.1393L22.0684 8.125C22.0825 8.14993 22.1058 8.16832 22.1334 8.1762Z" fill="#fff"></path> <path d="M12.3836 31.9453C12.3526 31.9587 12.3255 31.9796 12.3047 32.0062L12.3291 31.9905C12.3457 31.9753 12.3693 31.9573 12.3836 31.9453Z" fill="#fff"></path> <path d="M18.0497 30.8309C18.0497 30.7958 18.0326 30.8023 18.0368 30.9268C18.0368 30.9167 18.0409 30.9065 18.0428 30.8969C18.0451 30.8747 18.0469 30.853 18.0497 30.8309Z" fill="#fff"></path> <path d="M17.4617 31.9453C17.4307 31.9587 17.4036 31.9796 17.3828 32.0062L17.4073 31.9905C17.4239 31.9753 17.4474 31.9573 17.4617 31.9453Z" fill="#fff"></path> <path d="M8.39845 32.2145C8.37496 32.1941 8.34619 32.1807 8.31543 32.1758C8.34034 32.1878 8.36524 32.1998 8.38185 32.209L8.39845 32.2145Z" fill="#fff"></path> <path d="M7.50541 31.3533C7.50173 31.317 7.49058 31.2818 7.47266 31.25C7.48535 31.2831 7.49598 31.317 7.50448 31.3515L7.50541 31.3533Z" fill="#fff"></path> <path d="M13.5278 15.9814C12.2963 16.5086 10.8987 17.1064 9.08736 17.1064C8.32963 17.1048 7.57558 17.0009 6.8457 16.7973L8.09845 29.6592C8.14279 30.1968 8.38769 30.698 8.78452 31.0634C9.18134 31.4288 9.70106 31.6316 10.2405 31.6315C10.2405 31.6315 12.0167 31.7237 12.6094 31.7237C13.2474 31.7237 15.1601 31.6315 15.1601 31.6315C15.6995 31.6315 16.2191 31.4286 16.6158 31.0633C17.0125 30.6979 17.2574 30.1967 17.3017 29.6592L18.6435 15.4463C18.0439 15.2415 17.4387 15.1055 16.7565 15.1055C15.5767 15.105 14.626 15.5114 13.5278 15.9814Z" fill="#FFDD00"></path> <path d="M2.96582 10.5039L2.98704 10.5237L3.00088 10.532C2.99022 10.5215 2.97847 10.512 2.96582 10.5039Z" fill="black"></path> <path d="M24.4376 9.31226L24.249 8.36071C24.0797 7.50694 23.6955 6.70022 22.8191 6.39164C22.5382 6.29294 22.2195 6.2505 22.0041 6.04617C21.7887 5.84184 21.725 5.5245 21.6752 5.23023C21.583 4.6901 21.4963 4.14952 21.4017 3.61033C21.3201 3.14677 21.2555 2.62602 21.0428 2.20075C20.7661 1.62973 20.1918 1.29579 19.6208 1.07485C19.3282 0.965622 19.0296 0.873222 18.7265 0.798101C17.2998 0.421723 15.7999 0.283349 14.3322 0.204476C12.5705 0.107269 10.8042 0.136556 9.04673 0.292113C7.73863 0.411114 6.36089 0.555024 5.11783 1.00751C4.6635 1.1731 4.19533 1.37189 3.84986 1.7229C3.42597 2.15417 3.2876 2.82113 3.5971 3.35894C3.81711 3.74086 4.1898 4.01069 4.58509 4.18919C5.09997 4.41919 5.63769 4.5942 6.18931 4.71132C7.72526 5.0508 9.3161 5.1841 10.8853 5.24083C12.6245 5.31103 14.3665 5.25414 16.0974 5.07063C16.5254 5.02359 16.9527 4.96716 17.3792 4.90136C17.8815 4.82433 18.2039 4.16751 18.0558 3.70995C17.8787 3.16292 17.4027 2.95074 16.8644 3.0333C16.7851 3.04576 16.7062 3.05729 16.6269 3.06882L16.5697 3.07712C16.3873 3.10019 16.205 3.12171 16.0226 3.1417C15.646 3.18229 15.2683 3.2155 14.8898 3.24133C14.042 3.30037 13.192 3.32758 12.3423 3.32896C11.5075 3.32896 10.6722 3.30544 9.83916 3.25055C9.45909 3.22564 9.07994 3.19397 8.70172 3.15553C8.52967 3.13755 8.35809 3.11864 8.18651 3.09742L8.02322 3.07666L7.98771 3.07159L7.81843 3.04714C7.4725 2.99502 7.12656 2.93506 6.78431 2.86264C6.74978 2.85498 6.71889 2.83577 6.69675 2.80818C6.67461 2.78059 6.66254 2.74627 6.66254 2.71089C6.66254 2.67552 6.67461 2.6412 6.69675 2.61361C6.71889 2.58602 6.74978 2.5668 6.78431 2.55914H6.79077C7.08735 2.49595 7.38624 2.44199 7.68605 2.39494C7.78599 2.37926 7.88623 2.36388 7.98679 2.34881H7.98955C8.17728 2.33636 8.36593 2.30269 8.55274 2.28055C10.178 2.11149 11.813 2.05386 13.4461 2.10804C14.239 2.13111 15.0314 2.17769
720215.8206 2.25795C15.9903 2.27548 16.1592 2.29393 16.328 2.31468C16.3926 2.32252 16.4576 2.33175 16.5226 2.33959L16.6536 2.3585C17.0355 2.41539 17.4154 2.48442 17.7934 2.5656C18.3533 2.68737 19.0724 2.72704 19.3215 3.3405C19.4008 3.53514 19.4368 3.75147 19.4806 3.9558L19.5364 4.2164C19.5379 4.22108 19.5389 4.22586 19.5396 4.2307C19.6716 4.8457 19.8036 5.46069 19.9359 6.07569C19.9455 6.12112 19.9458 6.16806 19.9365 6.21359C19.9273 6.25911 19.9087 6.30224 19.8821 6.34028C19.8554 6.37832 19.8212 6.41046 19.7816 6.4347C19.7419 6.45893 19.6977 6.47474 19.6517 6.48113H19.648L19.5673 6.4922L19.4875 6.50281C19.2348 6.53571 18.9817 6.56646 18.7283 6.59506C18.2292 6.65194 17.7294 6.70114 17.2288 6.74265C16.234 6.82537 15.2373 6.87965 14.2385 6.90548C13.7296 6.919 13.2209 6.92531 12.7123 6.92439C10.6878 6.92279 8.66519 6.80513 6.65424 6.57199C6.43653 6.54616 6.21883 6.51849 6.00112 6.49035C6.16993 6.51203 5.87843 6.47375 5.81939 6.46545C5.68101 6.44607 5.54264 6.42593 5.40426 6.40502C4.93979 6.33537 4.47808 6.24958 4.01453 6.1744C3.45411 6.08215 2.91814 6.12827 2.41123 6.40502C1.99513 6.63272 1.65836 6.98188 1.44584 7.40593C1.22721 7.85795 1.16217 8.3501 1.06439 8.8358C0.966604 9.32149 0.814392 9.84408 0.872048 10.3427C0.996123 11.4188 1.74842 12.2933 2.8305 12.4889C3.84848 12.6734 4.87198 12.8228 5.89826 12.9501C9.9297 13.4439 14.0025 13.5029 18.0466 13.1263C18.3759 13.0956 18.7048 13.062 19.0332 13.0258C19.1358 13.0145 19.2396 13.0263 19.337 13.0604C19.4344 13.0944 19.523 13.1498 19.5962 13.2225C19.6694 13.2952 19.7255 13.3834 19.7602 13.4805C19.795 13.5777 19.8075 13.6814 19.797 13.7841L19.6946 14.7794C19.4883 16.7908 19.282 18.802 19.0756 20.813C18.8604 22.9249 18.6437 25.0366 18.4257 27.1482C18.3642 27.7429 18.3027 28.3375 18.2412 28.9319C18.1822 29.5172 18.1739 30.121 18.0627 30.6994C17.8875 31.609 17.2717 32.1675 16.3732 32.3719C15.55 32.5592 14.7091 32.6575 13.8649 32.6652C12.929 32.6703 11.9936 32.6288 11.0578 32.6338C10.0587 32.6394 8.83502 32.5471 8.06381 31.8036C7.38624 31.1505 7.29261 30.1279 7.20036 29.2437C7.07736 28.073 6.95544 26.9025 6.83459 25.7322L6.15656 19.2245L5.71791 15.0137C5.71053 14.9441 5.70315 14.8754 5.69623 14.8053C5.64365 14.303 5.28803 13.8113 4.72761 13.8366C4.24792 13.8579 3.70272 14.2656 3.759 14.8053L4.08417 17.927L4.75667 24.3844C4.94824 26.2187 5.13935 28.0532 5.33 29.888C5.3669 30.2395 5.40149 30.5919 5.44024 30.9434C5.65103 32.864 7.11779 33.899 8.93419 34.1906C9.99506 34.3612 11.0818 34.3963 12.1583 34.4138C13.5384 34.4359 14.9322 34.489 16.2897 34.239C18.3012 33.87 19.8104 32.5268 20.0258 30.4434C20.0873 29.8419 20.1488 29.2403 20.2103 28.6385C20.4148 26.6484 20.619 24.6581 20.8228 22.6677L21.4898 16.1641L21.7956 13.1835C21.8108 13.0357 21.8733 12.8968 21.9736 12.7872C22.0739 12.6776 22.2069 12.6033 22.3528 12.5751C22.928 12.463 23.4778 12.2716 23.8869 11.8339C24.5382 11.137 24.6678 10.2283 24.4376 9.31226ZM2.80098 9.95524C2.80975 9.95109 2.7936 10.0263 2.78669 10.0613C2.7853 10.0083 2.78807 9.96124 2.80098 9.95524ZM2.8568 10.387C2.86141 10.3837 2.87524 10.4022 2.88954 10.4243C2.86786 10.404 2.85403 10.3888 2.85633 10.387H2.8568ZM2.91168 10.4594C2.93152 10.4931 2.94213 10.5143 2.91168 10.4594V10.4594ZM3.02192 10.5489H3.02469C3.02469 10.5521 3.02976 10.5553 3.03161 10.5586C3.02855 10.555 3.02515 10.5518 3.02146 10.5489H3.02192ZM22.326 10.4151C22.1194 10.6116 21.8081 10.7029 21.5004 10.7486C18.0503 11.2606 14.5499 11.5198 11.0619 11.4054C8.56565 11.3201 6.09567 11.0429 3.62431 10.6937C3.38215 10.6596 3.11971 10.6153 2.9532 10.4368C2.63955 10.1001 2.7936 9.42204 2.87524 9.01522C2.94997 8.64253 3.09295 8.14577 3.53621 8.09272C4.22808 8.01155 5.03158 8.30352 5.71607 8.4073C6.54016 8.53306 7.36733 8.63377 8.19758 8.70941C11.7409 9.03229 15.3437 8.98201 18.8713 8.50969C19.5143 8.42329 20.1549 8.32289 20.7933 8.2085C21.362 8.10656 21.9926 7.91515 22.3362 8.50416C22.5719 8.90544 22.6033 9.44233 22.5668 9.89574C22.5556 10.0933 22.4693 10.2791 22.3256 10.4151H22.326Z" fill="black"></path></svg>--> 7203 â¤ï¸ Feedback : [email protected] 7204 </div> 7205 </a> 7206 7207 </h4> 7208 7209 </div> 7210 <div class="column is-4"> 7211 <h4 class="bd-footer-title"> 7212 <strong class="has-text-white">Connect with us</strong> 7213 </h4> 7214 7215 <div class="bd-footer-iframe"> 7216 <div class="tags"> 7217 7218 <a class="tag is-medium" target="_blank" 7219 style="background-color:#1d9bf0;color:#fff;text-decoration:none;border-radius:10px;" 7220 href="https://twitter.com/teambravoboard"> 7221 @TeamBravoboard 7222 </a> 7223 <a class="tag is-medium is-rounded" 7224 style="background-color:#0a66c2;color:#fff;text-decoration:none;border-radius:10px;" 7225 href="https://www.linkedin.com/in/bravoboard/" target="_blank"> 7226 <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" width="24" height="24" focusable="false">
7226<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path></svg> 7227 Bravoboard 7228 </a> 7229 </div> 7230 </div> 7231 7232 </div> 7233 </div> 7234 7235 <div class="bd-footer-links"> 7236 <div class="columns"> 7237 <div class="column is-4"> 7238 <p class="bd-footer-link-title"> 7239 <a href="https://www.bravoboard.xyz/" class="has-text-white"> 7240 <strong>Home</strong> 7241 </a> 7242 </p> 7243 7244 <p class="bd-footer-link bd-is-more"> 7245 <a target="_blank" href="/ideas/" class="has-text-white"> 7246 Ideas & Inspiration Blog 7247 </a> 7248 </p> 7249 7250 <p class="bd-footer-link"> 7251 <a href="/changelog/" class="has-text-white"> 7252 What's new 7253 </a> 7254 </p> 7255 7256 <p class="bd-footer-link-title"> 7257 7258 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7259 7260 7261 Samples 7262 </a> 7263 </p> 7264 7265 <p class="bd-footer-link"> 7266 7267 <a href="https://www.bravoboard.xyz/#pricing" class="has-text-white"> 7268 7269 Pricing 7270 </a> 7271 </p> 7272 7273 <p class="bd-footer-link"> 7274 <a href="/teams/" class="has-text-white"> 7275 For Teams 7276 </a> 7277 </p> 7278 7279 <p class="bd-footer-link"> 7280 <a href="/use-cases/" class="has-text-white"> 7281 Use cases 7282 </a> 7283 </p> 7284 7285 <p class="bd-footer-link"> 7286 7287 <a href="https://www.bravoboard.xyz/#faqs" class="has-text-white"> 7288 7289 Frequently Asked Questions 7290 </a> 7291 </p> 7292 7293 <p class="bd-footer-link js-login"> 7294 <a target="_blank" href="mailto:[email protected]" class="has-text-white"> 7295 Contact Us 7296 </a> 7297 </p> 7298 7299 <p class="bd-footer-link"> 7300 <a href="/terms/" class="has-text-white"> 7301 Terms of Service 7302 </a> 7303 </p> 7304 <p class="bd-footer-link"> 7305 <a href="/privacy/" class="has-text-white"> 7306 Privacy Policy 7307 </a> 7308 </p> 7309 <p class="bd-footer-link"> 7310 <a href="/security/" class="has-text-white"> 7311 Security & Privacy 7312 </a> 7313 </p> 7314 7315 <p class="bd-footer-link"> 7316 <a href="/compare/kudoboard-alternative/" class="has-text-white"> 7317 Kudoboard alternative 7318 </a> 7319 </p> 7320 <p class="bd-footer-link"> 7321 <a href="/compare/groupgreeting-alternative/" class="has-text-white"> 7322 GroupGreeting alternative 7323 </a> 7324 </p> 7325 <p class="bd-footer-link"> 7326 <a href="/compare/sendwishonline-alternative/" class="has-text-white"> 7327 Send Wish Online alternative 7328 </a> 7329 </p> 7330 7331 </div> 7332 7333 <div class="column is-4"> 7334 <p class="bd-footer-link-title"> 7335 7336 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7337 7338 <strong>Occasions</strong> 7339 </a> 7340 </p> 7341 <p class="bd-footer-link-title"> 7342 <a href="/use-cases/work-anniversary-group-card/" class="has-text-white"> 7343 7344 Work Anniversary 7345 </a> 7346 </p> 7347 <p class="bd-footer-link-title"> 7348 7349 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7350 7351 7352 Promotion 7353 </a> 7354 </p> 7355 <p class="bd-footer-link-title"> 7356 7357 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7358 7359 7360 Get Well Soon 7361 </a> 7362 </p> 7363 <p class="bd-footer-link-title"> 7364 <a href="/use-cases/birthday-group-card/" class="has-text-white"> 7365 7366 Birthday 7367 </a> 7368 </p> 7369 <p class="bd-footer-link-title"> 7370 <a href="/use-cases/farewell-group-card/" class="has-text-white"> 7371 7372 Farewell 7373 </a> 7374 </p> 7375 <p class="bd-footer-link-title"> 7376 7377 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7378 7379 7380 Happy Holidays 7381 </a> 7382 </p> 7383 7384 </div> 7385 7386 <div class="column is-4"> 7387 <p class="bd-footer-link-title"> 7388 7389 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7390 7391 7392 <strong>More</strong> 7393 </a> 7394 </p> 7395 <p class="bd-footer-link-title"> 7396 <a href="/use-cases/work-anniversary-group-card/" class="has-text-white"> 7397 7398 Group Card for Work Anniversaries 7399 </a> 7400 </p> 7401 <p class="bd-footer-link-title"> 7402 7403 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7404 7405 7406 Group Card for Promotions 7407 </a> 7408 </p> 7409 <p class="bd-footer-link-title"> 7410 7411 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7412 7413 7414 Group Card to wish someone to Get Well Soon 7415 </a> 7416 </p> 7417 <p class="bd-footer-link-title"> 7418 <a href="/use-cases/birthday-group-card/" class="has-text-white"> 7419 7420 Group Card for Birthdays 7421 </a> 7422 </p> 7423 <p class="bd-footer-link-title"> 7424 <a href="/use-cases/farewell-group-card/" class="has-text-white"> 7425 7426 Group Card to bid Farewell 7427 </a> 7428 </p> 7429 <p class="bd-footer-link-title"> 7430 7431 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7432 7433 7434 Group Card for Happy Holidays 7435 </a> 7436 </p> 7437 <p class="bd-footer-link-title"> 7438 7439 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7440 7441 7442 Group Card for New Baby 7443 </a> 7444 </p> 7445 <p class="bd-footer-link-title"> 7446 7447 <a href="https://www.bravoboard.xyz/#samples" class="has-text-white"> 7448 7449 7450 Group Card for Graduation 7451 </a> 7452 </p> 7453 </div> 7454 </div> 7455 </div> 7456 7457 </div> 7458 </footer> 7459 7460 7461 </footer> 7462
7463<script async src="https://presbot.com/c/4ee8bbdb-fc51-458c-8313-472a0a8566e2/embed.js"></script>
7463 7464 7465 7466 7467 7468 7469
7469<script> 7470 7471 /* ============ Start Share Board ============ */ 7472 $(function() { 7473 7474 $(document).on('click', ".js-board-url", function(e) { 7475 7476 var board_url = this.id; 7477 7478 var $temp = $("<input>"); 7479 var $url = board_url; 7480 7481 7482 $("body").append($temp); 7483 $temp.val($url).select(); 7484 document.execCommand("copy"); 7485 $temp.remove(); 7486 7487 7488 7489 Swal.fire({ 7490 title: '<span class="icon mr-2"><svg fill="lightgreen" id="Capa_1" style="enable-background:new 0 0 477.8 477.8;" version="1.1" viewBox="0 0 477.8 477.8" width="18" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><path d="M367.75,288.5c-25,0-47.8,9.7-64.7,25.5l-65.2-39.4c3.7-11.2,5.7-23.1,5.7-35.6c0-12.4-2-24.4-5.7-35.6l65.3-39.5c16.9,15.8,39.7,25.5,64.7,25.5c52.3,0,94.7-42.4,94.7-94.7S420.15,0,367.85,0s-94.7,42.4-94.7,94.7c0,8.7,1.2,17.2,3.4,25.2l-65.3,39.5c-20.7-21.3-49.8-34.6-81.9-34.6c-63,0-114.1,51.1-114.1,114.1S66.35,353,129.35,353c32.1,0,61.1-13.3,81.9-34.6l65.3,39.5c-2.2,8-3.4,16.5-3.4,25.2c0,52.3,42.4,94.7,94.7,94.7s94.7-42.4,94.7-94.7S420.05,288.5,367.75,288.5z M92.15,239c0,9.4-7.6,17-17,17c-9.4,0-17-7.6-17-17c0-39.3,32-71.3,71.3-71.3c9.4,0,17,7.6,17,17s-7.6,17-17,17C108.85,201.8,92.15,218.5,92.15,239z" id="XMLID_2074_"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></span><span class="title is-4 has-text-white has-text-centered mb-5" style="background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:1em;">Sharable Board Link</span>', 7491 html: '<div class="subtitle has-text-light has-text-centered"><div class="mb-5">Copy link below & send it to your invitees</div><div class="tag is-white">Copied to clipboard!</div></div>', 7492 input: 'text', 7493 inputValue: board_url, 7494 customClass: 'clipboard', 7495 confirmButtonText:'Ok, Great!', 7496 }); 7497 7498 //$('.clipboard').find(':text').prop('disabled', true); 7499 $('input').select(); 7500 7501 }); // end click 7502 }); // end function 7503 7504 /* ============ End Share Board ============ */ 7505 7506 /* ============ New Board ============ */ 7507 7508 $(function() { 7509 7510 $(document).on('click', ".js-add-board", function(e) { 7511 7512 //alert('firing'); 7513 7514 var new_board_url = '/boards/new/'; 7515 7516 e.preventDefault(); 7517 7518 $.ajax({ 7519 url: new_board_url, 7520 dataType: 'json', 7521 beforeSend: function () { 7522 //alert("calling url =" + new_board_url); 7523 }, 7524 success: function (data) { 7525 //alert("data = " + data.html_form); 7526 $("#modal-board .modal-content").html(data.html_form); 7527 $("#modal-board").addClass("modal is-active"); 7528 }, 7529 error: function(jqXHR, errorThrown) { 7530 //console.log("failed with error= " + errorThrown); 7531 } 7532 }); // end ajax 7533 return false; 7534 }); // end click 7535 }); // end load 7536 7537 7538 $("#modal-board").on("submit", ".js-new-board-form", function (e) { 7539 7540 var new_board_url = '/boards/new/' 7541 var form = $(this); 7542 e.preventDefault(); 7543 7544 window.bbAjaxSubmitNewBoardForm(form[0], { 7545 url: new_board_url, 7546 onSuccess: function (data) { 7547 if (data.form_is_valid) { 7548 if (window.bbMirrorAnalyticsEvents) { 7549 window.bbMirrorAnalyticsEvents(data); 7550 } 7551 // DONE: Refresh boards list 7552 $("#boards-list").html(data.html_boards_list);
7553 $("#modal-board").removeClass("is-active"); 7554 $("#modal-board").removeClass("is-clipped"); 7555 7556 7557 // DONE: add sweetalert 7558 7559 Swal.fire({ 7560 icon: 'success', 7561 title: 'Board Created!', 7562 showConfirmButton: false, 7563 timer: 1500 7564 }) 7565 7566 7567 /* 7568 Check if user has an active subscription 7569 If yes, skip redirection to pricing 7570 */ 7571 7572 if(data.user_has_active_subscription){ 7573 // do nothing 7574 } else { 7575 /* Redirect to Pricing after a wait to allow alert to fire */ 7576 setTimeout(() => { 7577 //alert("redirecting to = " + data.pricing_url_for_redirect); 7578 window.location.replace(data.pricing_url_for_redirect); 7579 }, 1500); 7580 7581 } 7582 7583 } else if (!data.duplicate_warning) { 7584 7585 //console.log("form is not valid, data.html_form = " + data.html_form) 7586 $("#modal-board .modal-content").html(data.html_form); 7587 $('.js-tabs#all').addClass('is-active'); 7588 } 7589 } 7590 7591 }); 7592 return false; 7593 }); 7594 /* ============ End New Board ============ */ 7595 7596 7597 /* ============ Delete Board ============ */ 7598 7599 $(function () { 7600 $(document).on('click', ".js-del-board", function(e) { 7601 7602 var post_id = this.id; 7603 var del_board_url = this.id; 7604 7605 Swal.fire({ 7606 title: '<span style="background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:1em;">Delete the board?</span>', 7607 html: '<div class="subtitle has-text-light has-text-centered"><div class="mb-5">Deleted boards cannot be retrieved. Consider archiving instead</div></div>', 7608 icon: 'warning', 7609 showCancelButton: true, 7610 confirmButtonColor: '#3085d6', 7611 cancelButtonColor: '#d33', 7612 confirmButtonText: 'Yes, delete it!' 7613 }).then((result) => { 7614 if (result.isConfirmed) { 7615 7616 var csrftoken = Cookies.get('csrftoken'); 7617 7618 function csrfSafeMethod(e) { 7619 return /^(GET|HEAD|OPTIONS|TRACE)$/.test(e) 7620 } 7621 7622 $.ajax({ 7623 url: del_board_url, 7624 type: 'post', 7625 dataType: 'json', 7626 beforeSend: function (e, t) { 7627 csrfSafeMethod(t.type) || this.crossDomain || e.setRequestHeader('X-CSRFToken', csrftoken); 7628 //alert("calling del url =" + del_board_url); 7629 }, 7630 success: function (data) { 7631 if (data.form_is_valid) { 7632 $("#boards-list").html(data.html_boards_list); 7633 Swal.fire({ 7634 icon: 'success', 7635 title: 'Board has been deleted', 7636 showConfirmButton: fal
7636se, 7637 timer: 1500, 7638 }); 7639 } else { 7640 // do nothing 7641 } 7642 }, 7643 error: function(jqXHR, errorThrown) { 7644 //console.log("failed with error= " + errorThrown); 7645 } 7646 }); // end ajax 7647 }}); // end swal if 7648 7649 }); // end click 7650 }); // end load 7651 7652 /* ============ End Delete Board ============ */ 7653 7654 7655 /* ============ Archive Board ============ */ 7656 7657 $(function () { 7658 $(document).on('click', ".js-archive-board", function(e) { 7659 7660 var archive_board_url = this.id; 7661 7662 Swal.fire({ 7663 title: '<span style="background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:1em;">Lock this board?</span>', 7664 html: '<div class="subtitle has-text-light has-text-centered"><div class="mb-5">This action will lock and archive the board and no further posts or changes will be allowed. You will continue to have access to the board</div></div>', 7665 icon: 'warning', 7666 showCancelButton: true, 7667 confirmButtonColor: '#3085d6', 7668 cancelButtonColor: '#d33', 7669 confirmButtonText: 'Yes, Lock it!' 7670 }).then((result) => { 7671 if (result.isConfirmed) { 7672 7673 var csrftoken = Cookies.get('csrftoken'); 7674 7675 function csrfSafeMethod(e) { 7676 return /^(GET|HEAD|OPTIONS|TRACE)$/.test(e) 7677 } 7678 7679 $.ajax({ 7680 url: archive_board_url, 7681 type: 'post', 7682 dataType: 'json', 7683 beforeSend: function (e, t) { 7684 csrfSafeMethod(t.type) || this.crossDomain || e.setRequestHeader('X-CSRFToken', csrftoken); 7685 //alert("calling archive url =" + archive_board_url); 7686 }, 7687 success: function (data) { 7688 if (data.form_is_valid) { 7689 $("#boards-list").html(data.html_boards_list); 7690 7691 Swal.fire({ 7692 icon: 'success', 7693 title: 'Board has been archived', 7694 showConfirmButton: fal
7694se, 7695 timer: 1500, 7696 }); 7697 } else { 7698 // do nothing 7699 } 7700 }, 7701 error: function(jqXHR, errorThrown) { 7702 //console.log("failed with error= " + errorThrown); 7703 } 7704 }); // end ajax 7705 }}); // end swal if 7706 7707 }); // end click 7708 }); // end load 7709 7710 /* ============ End Archive Board ============ */ 7711 7712 7713 /* ============ Edit Board ============ */ 7714 7715 $(document).on('click', '.js-edit-board', function(e) { 7716 7717 var edit_board_url = this.id; 7718 console.log('clicked '+edit_board_url); 7719 7720 $( "<h6 hidden id='id-temp-edit-board'>"+edit_board_url+"</h1>" ).appendTo( "body" ); 7721 7722 e.preventDefault(); 7723 7724 $.ajax({ 7725 url: edit_board_url, 7726 dataType: 'json', 7727 beforeSend: function () { 7728 //alert("calling url =" + edit_board_url); 7729 $("#modal-board").addClass("modal is-active"); 7730 }, 7731 success: function (data) { 7732 //alert("data = " + data.html_form); 7733 $("#modal-board .modal-content").html(data.html_form); 7734 }, 7735 error: function(jqXHR, errorThrown) { 7736 //console.log("failed with error= " + errorThrown); 7737 } 7738 }); // end ajax 7739 return false; 7740 7741 }); // end click 7742 7743 $("#modal-board").on("submit", ".js-edit-board-form", function (e) { 7744 7745 edit_board_url = $('body #id-temp-edit-board').text(); 7746 7747 //console.log("edit_board_url = "+edit_board_url); 7748 7749 /* removing the h6 created temp to store edit board url */ 7750 $('body #id-temp-edit-board').remove(); 7751 7752 var form = $(this); 7753 //console.log(" form = "+ form); 7754 7755 e.preventDefault(); 7756 7757 $.ajax({ 7758 url: edit_board_url, 7759 dataType: 'json', 7760 type: 'post', 7761 data: $("form").serialize(), 7762 beforeSend: function () { 7763 //console.log('submitting edits form'); 7764 }, 7765 success: function (data) { 7766 7767 //console.log("data = "+data); 7768 7769 if (data.form_is_valid) { 7770 7771 //console.log(" form is valid"); 7772 7773 // DONE: Refresh boards list 7774 $("#boards-list").html(data.html_boards_list); 7775 7776 //console.log(" form is valid"); 7777 7778 $("#modal-board").removeClass("is-active"); 7779 $("#modal-board").removeClass("is-clipped"); 7780 7781 $('#id-temp-edit-board').remove(); 7782 7783 7784 // DONE: add sweetalert 7785 7786 Swal.fire({ 7787 icon: 'success', 7788 title: 'Board Updated!',
7789 showConfirmButton: false, 7790 timer: 1500 7791 }) 7792 7793 7794 } else { 7795 7796 //console.log(" form is invalid"); 7797 7798 //console.log("form is not valid, data.html_form = " + data.html_form) 7799 $("#modal-board .modal-content").html(data.html_form); 7800 } 7801 } 7802 7803 });// end ajax 7804 return false; 7805 }); 7806 7807 /* ============ End Edit Board ============ */ 7808 7809 /* ============ Lock Board ============ */ 7810 7811 $(function () { 7812 $(document).on('click', ".js-lock-board", function(e) { 7813 7814 // do nothing yet 7815 7816 }); // end click 7817 }); // end load 7818 7819 7820 /* ============ End Lock Board ============ */ 7821 7822 </script>
7822<!-- board CRUD --> 7823
7823<script> 7824 $(function() { 7825 7826 $(document).on('click', ".js-login", function(e) { 7827 7828 var login_url = '/login/'; 7829 7830 e.preventDefault(); 7831 7832 $.ajax({ 7833 url: login_url, 7834 dataType: 'json', 7835 beforeSend: function () { 7836 //alert('modal is active'); 7837 }, 7838 success: function (data) { 7839 //alert('adding login to modal'); 7840 $("#modal-board .modal-content").html(data.html_form); 7841 $("#modal-board").addClass("modal is-active"); 7842 }, 7843 error: function(jqXHR, errorThrown) { 7844 //alert('failed adding login to modal'); 7845 //alert("failed with error= " + errorThrown); 7846 } 7847 }); // end ajax 7848 return false; 7849 }); // end click 7850 }); // end load 7851 7852 </script>
7852<!-- Login --> 7853
7853<script> 7854 /* Modal Ops */ 7855 7856 $(".modal").on("click", ".modal-close-btn", function () { 7857 $(".modal").removeClass("is-active"); 7858 $(".modal").removeClass("is-clipped"); 7859 }); 7860 7861 7862 document.addEventListener('DOMContentLoaded', () => { 7863 // Functions to open and close a modal 7864 function openModal($el) { 7865 $el.classList.add('is-active'); 7866 } 7867 7868 function closeModal($el) { 7869 $el.classList.remove('is-active'); 7870 } 7871 7872 function closeAllModals() { 7873 (document.querySelectorAll('.modal') || []).forEach(($modal) => { 7874 closeModal($modal); 7875 }); 7876 } 7877 7878 // Add a click event on buttons to open a specific modal 7879 (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => { 7880 const modal = $trigger.dataset.target; 7881 const $target = document.getElementById(modal); 7882 7883 $trigger.addEventListener('click', () => { 7884 openModal($target); 7885 }); 7886 }); 7887 7888 // Add a click event on various child elements to close the parent modal 7889 (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => { 7890 const $target = $close.closest('.modal'); 7891 7892 $close.addEventListener('click', () => { 7893 closeModal($target); 7894 }); 7895 }); 7896 7897 // Add a keyboard event to close all modals 7898 document.addEventListener('keydown', (event) => { 7899 const e = event || window.event; 7900 7901 if (e.keyCode === 27) { // Escape key 7902 closeAllModals(); 7903 } 7904 }); 7905 }); 7906 7907 </script>
7907 <!-- modal OPS --> 7908 7909 7910 </body> 7911</html>
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.