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