heroik.css

   1 /* The person who associated a work with this deed has dedicated the
   2    work to the public domain by waiving all of his or her rights to
   3    the work worldwide under copyright law, including all related and
   4    neighboring rights, to the extent allowed by law.
   5
   6    You can copy, modify, distribute and perform the work, even for
   7    commercial purposes, all without asking permission.
   8
   9    See https://creativecommons.org/publicdomain/zero/1.0/ for details.
  10 */
  11
  12 @font-face {
  13     font-family: Oranienbaum;
  14     font-style: normal;
  15     font-weight: 400;
  16     src: url('Oranienbaum-Regular.woff') format('woff');
  17 }
  18
  19 @font-face {
  20     font-family: Cardo;
  21     font-style: normal;
  22     font-weight: 400;
  23     src: url('Cardo-Regular.woff') format('woff');
  24 }
  25
  26 @font-face {
  27     font-family: Cardo;
  28     font-style: normal;
  29     font-weight: 700;
  30     src: url('Cardo-Bold.woff') format('woff');
  31 }
  32
  33 @font-face {
  34     font-family: Cardo;
  35     font-style: italic;
  36     font-weight: 400;
  37     src: url('Cardo-Italic.woff') format('woff');
  38 }
  39
  40 * {
  41     margin: 0;
  42     padding: 0;
  43 }
  44
  45 #change {
  46     position: relative;
  47     top: 1em;
  48 }
  49
  50 ul {
  51     margin-left: 1em;
  52     margin-bottom: 1em;
  53 }
  54
  55 ul.cards {
  56     list-style-type: none;
  57     display: inline-block;
  58     margin: auto;
  59 }
  60
  61 html {
  62     font-family: Cardo, serif;
  63     font-size: 20px;
  64     background-color: black;
  65     min-height: 100%;
  66     height: 100%;
  67 }
  68
  69 @media (max-width: 639px) {
  70     html { font-size: 14px; }
  71 }
  72
  73 body {
  74     background-color: black;
  75     min-height: 100%;
  76     height: 100%;
  77     box-sizing: border-box;
  78 }
  79
  80 body.standalone {
  81     padding-top: 20px;
  82 }
  83
  84 main {
  85     background-color: white;
  86     max-width: 25.2em;
  87     margin: 0 auto;
  88     padding: 1em;
  89     display: block;
  90     min-height: 100%;
  91     box-sizing: border-box;
  92 }
  93
  94 body.standalone main {
  95     padding-top: 0.5em;
  96 }
  97
  98 table {
  99     border-collapse: collapse;
 100     margin: auto;
 101     max-width: 25em;
 102 }
 103
 104 table.tall td {
 105     padding-top: 0.125em;
 106     padding-bottom: 0.125em;
 107 }
 108
 109 thead {
 110     font-size: 0.8em;
 111     font-variant: small-caps;
 112     vertical-align: bottom;
 113     text-align: left;
 114 }
 115
 116 th {
 117     font-weight: bold;
 118 }
 119
 120 tbody, tfoot {
 121     vertical-align: top;
 122     text-align: left;
 123 }
 124
 125
 126 tbody tr:nth-last-child(odd) {
 127     background-color: hsl(270, 30%, 85%);
 128 }
 129
 130 #fate th:first-child, #fate td:first-child {
 131     text-align: center;
 132     width: 2em;
 133 }
 134
 135 #abilities td {
 136     text-align: justify;
 137     -webkit-hyphens: auto;
 138     -moz-hyphens: auto;
 139     -ms-hyphens: auto;
 140     hyphens: auto;
 141 }
 142
 143 #abilities td:first-child {
 144     white-space: nowrap;
 145 }
 146
 147
 148 th, td {
 149     padding: 0 0.5rem;
 150 }
 151
 152 h1:before {
 153     content: '\25cf';
 154     color: #dae9bc;
 155     text-shadow: -0.08333em -0.08333em 0.25em #aec38b,
 156                  0.08333em -0.08333em 0.25em #aec38b,
 157                  0.08333em 0.08333em 0 #534f53,
 158                  -0.08333em 0.08333em 0 #534f53,
 159                  0 0.1667em 0 #414045;
 160     -webkit-text-stroke: 0;
 161     display: inline-block;
 162     width: 1em;
 163     margin-top: -0.1em;
 164     vertical-align: top;
 165     margin-left: -1em;
 166 }
 167
 168 h1 {
 169     padding-left: 1em;
 170     margin-top: 1em;
 171     margin-bottom: 0.5em;
 172     font-family: Oranienbaum, Cardo, serif;
 173     color: hsl(270, 25%, 75%);
 174     font-size: 2em;
 175     text-shadow: none;
 176     border-bottom: solid hsl(270, 25%, 50%) 0.0625em;
 177     line-height: 0.8em;
 178     font-weight: normal;
 179     letter-spacing: -0.02em;
 180     text-shadow: -1px 0 black, 1px 0 black,
 181                  0 1px black, 0 -1px black,
 182                  -0.707px -0.707px black, 0.707px 0.707px black,
 183                  -0.707px 0.707px black, 0.707px -0.707px black;
 184 }
 185
 186 h1:first-child {
 187     margin-top: 0;
 188 }
 189
 190 h2:before {
 191     content: '\25fc';
 192     color: #00a1eb;
 193     font-size: 1.5em;
 194     width: 0.55em;
 195     display: inline-block;
 196 }
 197
 198 h2 {
 199     height: 1.15em;
 200     font-size: 1.25em;
 201     font-family: Oranienbaum, Cardo, serif;
 202     text-align: left;
 203     letter-spacing: -1px;
 204     z-index: 1;
 205     border-bottom: solid hsl(270, 30%, 85%) 0.25em;
 206     padding-right: 1em;
 207     white-space: nowrap;
 208     margin-bottom: 0.5em;
 209     font-weight: bold;
 210 }
 211
 212 a:link, a:visited, a:active {
 213     color: hsl(270, 25%, 50%);
 214     font-weight: bold;
 215     text-decoration: none;
 216 }
 217
 218 .fate-name { font-weight: bold; }
 219 .fate-effect { font-style: italic; font-size: 0.95em; }
 220 .fate-action { font-size: 0.95em; }
 221
 222 input[type=checkbox] {
 223     margin-right: 0.5em;
 224 }
 225
 226 .button {
 227     font-size: 1.1em;
 228     font-weight: bold;
 229     color: black !important;
 230     background-color: hsl(270, 30%, 85%);
 231     margin: 0.0625em 0;
 232     padding: 0.375em 0.5em;
 233     display: inline-block;
 234     border-radius: 0 0.5em 0 0.5em;
 235     transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s;
 236     -webkit-transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s;
 237     box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
 238     border: solid hsl(270, 30%, 85%) 1px;
 239     min-width: 6em;
 240 }
 241
 242 .button.small {
 243     min-width: 1.25em;
 244 }
 245
 246 .button:hover, .button:focus {
 247     box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
 248     border-color: hsl(270, 25%, 50%);
 249 }
 250
 251 .button:active {
 252     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 253 }
 254
 255 main > div, main > noscript {
 256     text-align: center;
 257     margin-bottom: 1rem;
 258     display: block;
 259 }
 260
 261 ul.cards li {
 262     padding: 0.25em 0;
 263     display: inline-block;
 264     width: 8em;
 265 }
 266
 267 select {
 268     -webkit-appearance: none;
 269     -moz-appearance: none;
 270     appearance: none;
 271     font-family: Cardo, serif;
 272     font-size: 1.1em;
 273     margin-top: 0.5em;
 274     width: 60%;
 275     margin-left: 20%;
 276     padding: 0 0.5em;
 277     border: solid hsl(270, 30%, 85%) 1px;
 278     border-radius: 0 0.5em 0 0.5em;
 279     background-color: hsl(270, 30%, 85%);
 280     box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
 281     transition: box-shadow 0.167s, border-color 0.167s;
 282     -webkit-transition: box-shadow 0.167s, border-color 0.167s;
 283     text-align: center;
 284     font-weight: bold;
 285 }
 286
 287 select:hover, select:focus {
 288     box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
 289     border-color: hsl(270, 25%, 50%);
 290     outline: none;
 291 }
 292
 293 select:active {
 294     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 295     outline: none;
 296 }
 297
 298 option {
 299     -webkit-appearance: none;
 300     -moz-appearance: none;
 301     appearance: none;
 302     font-family: Cardo, serif;
 303     background-color: white;
 304     text-align: center;
 305     font-weight: normal;
 306 }
 307
 308 optgroup {
 309     font-style: normal;
 310     font-family: inherit;
 311     text-align: center;
 312 }
 313
 314 optgroup + optgroup {
 315     margin-top: 1px;
 316 }
 317
 318 p, li {
 319     text-align: justify;
 320     -webkit-hyphens: auto;
 321     -moz-hyphens: auto;
 322     -ms-hyphens: auto;
 323     hyphens: auto;
 324 }
 325
 326 p {
 327     margin-bottom: 0.5em;
 328 }
 329
 330 blockquote {
 331     text-align: justify;
 332     font-style: italic;
 333     margin-left: 1em;
 334     margin-right: 1em;
 335     margin-bottom: 0.5em;
 336     font-size: 0.95em;
 337 }
 338
 339 @keyframes row-content-in {
 340     0% { max-height: 0; opacity: 0; }
 341     50% { max-height: 10em; }
 342     100% { opacity: 1; }
 343 }
 344 @-webkit-keyframes row-content-in {
 345     0% { max-height: 0; opacity: 0; }
 346     50% { max-height: 10em; }
 347     100% { opacity: 1; }
 348 }
 349
 350 table {
 351     width: 100%;
 352 }
 353
 354 #fate tbody tr div {
 355     max-height: 10em;
 356     animation: row-content-in 0.6667s;
 357     -webkit-animation: row-content-in 0.6667s;
 358 }
 359
 360 #fate tbody ~ tfoot {
 361     transition: opacity 0.3333s, visibility 0s 0.3333s;
 362     -webkit-transition: opacity 0.3333s, visibility 0s 0.3333s;
 363     opacity: 0;
 364     visibility: hidden;
 365 }
 366
 367 #fate tbody:empty ~ tfoot {
 368     opacity: 1;
 369     visibility: visible;
 370 }
 371
 372 .button.big {
 373     display: inline-block;
 374     width: 35%;
 375     padding-top: 1em;
 376     padding-bottom: 1em;
 377     margin: 0.5em 0.5em;
 378 }
 379
 380 .card1 {
 381     width: 2.5em;
 382     background-color: white;
 383     display: inline-block;
 384     margin: 0.2em 0.375em;
 385     border: solid 1px black;
 386 }
 387
 388 .card2 {
 389     width: 2.5em;
 390     background-color: black;
 391     display: inline-block;
 392     margin: 0.2em 0.375em;
 393     border: solid 1px black;
 394     color: white;
 395 }
 396
 397 .card {
 398     display: block;
 399     position: relative;
 400     width: 20em;
 401     height: 27.1875em;
 402     font-size: 88.275%;
 403     margin: 0.5em auto;
 404     z-index: 1;
 405 }
 406
 407 .card:after {
 408     content: '';
 409     display: block;
 410     position:absolute;
 411     width:100%;
 412     height:100%;
 413     left:0;
 414     top:0;
 415     background-image: url(card.png);
 416     background-size: cover;
 417     z-index: -1;
 418 }
 419
 420 .card .art {
 421     position: absolute;
 422     z-index: -1;
 423     left: 9.5%;
 424     right: 9.5%;
 425     width: 81%;
 426     height: auto;
 427     top: 7.1%;
 428 }
 429
 430 .card.adventurer .name, .card.adventurer .type {
 431     background-color: #4ba12f;
 432 }
 433
 434 .card.object .name, .card.object .type {
 435     background-color: #cdab4c;
 436 }
 437
 438 .card .name {
 439     position: absolute;
 440     color: white;
 441     text-align: center;
 442     width: 77%;
 443     border: solid white 0.1em;
 444     border-radius: 0.6em;
 445     line-height: 1.6em;
 446     height: 5.4%;
 447     font-size: 0.85em;
 448     left: 11.5%;
 449     right: 11.5%;
 450     top: 3.5%;
 451     box-sizing: border-box;
 452     text-shadow: -1px -1px rgba(0, 0, 0, 0.75),
 453                  1px -1px rgba(0, 0, 0, 0.75),
 454                  -1px 1px rgba(0, 0, 0, 0.75),
 455                  1px 1px rgba(0, 0, 0, 0.75),
 456                  1px 0 black,
 457                  -1px 0 black,
 458                  0 1px black,
 459                  0 -1px black;
 460 }
 461
 462 .card .type {
 463     color: black;
 464     letter-spacing: 0.05em;
 465     font-weight: bold;
 466     text-shadow: -0.707px -0.707px rgba(255, 255, 255, 0.75),
 467                  0.707px -0.707px rgba(255, 255, 255, 0.75),
 468                  -0.707px 0.707px rgba(255, 255, 255, 0.75),
 469                  0.707px 0.707px rgba(255, 255, 255, 0.75),
 470                  1px 0 white,
 471                  -1px 0 white,
 472                  0 1px white,
 473                  0 -1px white;
 474     text-align: left;
 475     margin: auto;
 476     position: absolute;
 477     height: 2.55%;
 478     width: 84%;
 479     left: 8%;
 480     top: 52.3333%;
 481     box-sizing: border-box;
 482     padding-left: 0.6667em;
 483     font-size: 0.575em;
 484     line-height: 1.25em;
 485     box-shadow: inset 0 0 0.25em black;
 486 }
 487
 488 .card .gender {
 489     position: absolute;
 490     height: 9%;
 491     top: 47.5%;
 492     right: 8.5%;
 493 }
 494
 495 .card .gender img {
 496     float: right;
 497     height: 100%;
 498 }
 499
 500 .card .abilities {
 501     text-align: left;
 502     position: absolute;
 503     top: 57%;
 504     bottom: 8%;
 505     left: 10%;
 506     right: 10%;
 507     font-size: 0.8em;
 508     line-height: 1.05em;
 509     padding-left: 1em;
 510 }
 511
 512 .card .cost span {
 513     position: relative;
 514     content: ' ';
 515     width: 1.5em;
 516     height: 1.5em;
 517     border-radius: 1.5em;
 518     display: inline-block;
 519     box-sizing: border-box;
 520     margin: 0.5em 0.05em;
 521     box-shadow: 0 0 0.05em 0.05em black;
 522     background-image: url(sword.png);
 523     background-size: 0.2778em 1.3em;
 524     background-position: center;
 525     background-repeat: no-repeat;
 526     text-align: center;
 527 }
 528
 529 .card .cost span:before, .card .cost span:after {
 530     position: absolute;
 531     line-height: 1.333em;
 532     width: 1.5em;
 533     height: 1.5em;
 534     display: block;
 535     transform-origin: 50% 65%;
 536     background-image: url(sword.png);
 537     background-size: 0.2778em 1.3em;
 538     background-position: center;
 539     background-repeat: no-repeat;
 540 }
 541
 542 .card .cost .r:before {
 543     transform: rotate(30deg);
 544     -webkit-transform: rotate(30deg);
 545     content: '';
 546 }
 547
 548 .card .cost .r img {
 549     /* :( would prefer with no extra elements... */
 550     transform: rotate(60deg);
 551     max-width: 1.3em;
 552     position: absolute;
 553     max-height: 1.3em;
 554     transform-origin: 50% 65%;
 555     left: 0.6em;
 556     top: 0.1em;
 557 }
 558
 559 .card .cost .r:after {
 560     transform: rotate(-30deg);
 561     -webkit-transform: rotate(-30deg);
 562     content: '';
 563 }
 564
 565 .card .cost .r {
 566     transform: rotate(-15deg);
 567     background-color: #e4573c;
 568 }
 569 .card .cost .g {
 570     background-color: #abbc45;
 571 }
 572
 573 .card .abilities .skill:before {
 574     content: "Skill: ";
 575     font-weight: bold;
 576     margin-left: -1em;
 577 }
 578
 579 .card .abilities .temporary:before {
 580     content: "Temporary power: ";
 581     font-weight: bold;
 582     margin-left: -1em;
 583 }
 584
 585 .card .abilities .ultimate:before {
 586     content: "Ultimate power: ";
 587     font-weight: bold;
 588     margin-left: -1em;
 589 }
 590
 591 .card .effect {
 592     text-align: center;
 593     position: absolute;
 594     top: 59%;
 595     bottom: 8%;
 596     left: 15%;
 597     width: 70%;
 598     font-size: 0.8em;
 599     line-height: 1.05em;
 600 }
 601
 602 .card .flavor:before { content: "«"; }
 603 .card .flavor:after { content: "»"; }
 604 .card .flavor {
 605     position: absolute;
 606     bottom: 9%;
 607     width: 80%;
 608     left: 10%;
 609     font-style: italic;
 610     color: black;
 611     font-size: 0.6em;
 612 }
 613
 614 .card .code {
 615     position: absolute;
 616     color: white;
 617     bottom: 3.5%;
 618     right: 12%;
 619     font-size: 0.65em;
 620     text-shadow: -0.0433em -0.0433em black,
 621                  0.0433em -0.0433em black,
 622                  -0.0433em 0.0433em black,
 623                  0.0433em 0.0433em black,
 624                  0.06667em 0 black,
 625                  -0.06667em 0 black,
 626                  0 0.06667em black,
 627                  0 -0.06667em black;
 628 }
 629
 630
 631 .card.dungeon {
 632     height: 17.5841em;
 633     width: 25em;
 634 }
 635
 636 .card.dungeon:after {
 637     background-image: url(dungeon.jpg);
 638 }
 639
 640 .card.final .name, .card.final .type {
 641     background-color: #832b22;
 642 }
 643
 644 .card.dungeon .name {
 645     position: absolute;
 646     color: #e3f902;
 647     top: 2%;
 648     height: 7.5%;
 649 }
 650
 651 .card.dungeon .type {
 652     color: #e3f902;
 653     left: 2.25%;
 654     right: 2.25%;
 655     width: 95.5%;
 656     height: 4.5%;
 657     top: 74%;
 658     text-shadow: -0.707px -0.707px rgba(0, 0, 0, 0.75),
 659                  0.707px -0.707px rgba(0, 0, 0, 0.75),
 660                  -0.707px 0.707px rgba(0, 0, 0, 0.75),
 661                  0.707px 0.707px rgba(0, 0, 0, 0.75),
 662                  1px 0 black,
 663                  -1px 0 black,
 664                  0 1px black,
 665                  0 -1px black;
 666 }
 667
 668 .card.dungeon .power img {
 669     max-height: 1.5em;
 670     vertical-align: bottom;
 671 }
 672 .card.dungeon .power {
 673     font-size: 0.85em;
 674     position: absolute;
 675     top: 67%;
 676     height: 1em;
 677     color: white;
 678     left: 68%;
 679     width: 15%;
 680     text-align: center;
 681     text-shadow: -0.707px -0.707px rgba(0, 0, 0, 0.75),
 682                  0.707px -0.707px rgba(0, 0, 0, 0.75),
 683                  -0.707px 0.707px rgba(0, 0, 0, 0.75),
 684                  0.707px 0.707px rgba(0, 0, 0, 0.75),
 685                  1px 0 black,
 686                  -1px 0 black,
 687                  0 1px black,
 688                  0 -1px black;
 689 }
 690
 691 .card.dungeon .effect {
 692     color: #e30000;
 693     text-shadow: -0.707px -0.707px rgba(255, 255, 255, 0.75),
 694                  0.707px -0.707px rgba(255, 255, 255, 0.75),
 695                  -0.707px 0.707px rgba(255, 255, 255, 0.75),
 696                  0.707px 0.707px rgba(255, 255, 255, 0.75),
 697                  1px 0 white,
 698                  -1px 0 white,
 699                  0 1px white,
 700                  0 -1px white;
 701     font-size: 0.55em;
 702     top: 83%;
 703     left: 5%;
 704     right: 5%;
 705     width: 90%;
 706     font-weight: bold;
 707 }
 708
 709 .card.dungeon .code {
 710     right: 4%;
 711     bottom: 1.8%;
 712 }
 713
 714 #statusbar {
 715     display: none;
 716     position: fixed;
 717     left: 0;
 718     top: 0;
 719     right: 0;
 720     height: 20px;
 721     background-color: black;
 722 }
 723
 724 body.standalone #statusbar {
 725     display: block;
 726 }
 727
 728 h1, h2, [onclick], label {
 729     -webkit-user-select: none;
 730     -moz-user-select: none;
 731     user-select: none;
 732     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 733     cursor: default;
 734 }
 735
 736 [onclick], select, label {
 737     cursor: pointer;
 738 }
 739
 740 @media print {
 741
 742     @page {
 743         size: 3.5in 7in;
 744         margin: 0.5em;
 745     }
 746     .no-print {
 747         display: none !important;
 748     }
 749
 750     body, html {
 751         background-color: white;
 752         font-size: 10pt;
 753     }
 754
 755     main {
 756         max-width: 3.5in;
 757     }
 758
 759     .card {
 760         width: 64mm;
 761         height: 87mm;
 762         font-size: 9pt;
 763         page-break-inside: avoid;
 764     }
 765 }
 766
 767 @media all and (-webkit-min-device-pixel-ratio:0) {
 768     h1 {
 769         text-shadow: none;
 770         -webkit-text-stroke: 0.02em black;
 771     }
 772
 773     .broken-on-webkit {
 774         display: none !important;
 775     }
 776
 777 }