cardStyling.css

/* Locations of Things in the file:
    22  Generic
    23      Fonts
    37      Clear After
    44  Card Helpers
    68  Card Generics
    160 Icon Generics
    181 Card Type Icon & Buttons
    245 Pony & Start Cards
    264     Start Card specifics
    277     Race Icon
    284         Regular
    297         Changelings
    309     Gender Icon
    328     Time Icon
    336 Ship Cards
    349 Goal Cards
    366     Score Icons
    397     Selection Buttons
*/

/* Generic */
    /*Fonts */
        @font-face {
            font-family: Bartholowmew;
            src: url('resources/fonts/TSSSFBartholomew-Bold.otf');
        }
        @font-face {
            font-family: Cabin;
            src: url('resources/fonts/TSSSFCabin-Medium.ttf');
        }
        @font-face {
            font-family: Klinic;
            src: url('resources/fonts/KlinicSlabBookIt.otf');
        }

    /* Clear After */
        .clearAfter::after {
            content:"";
            display:block;
            clear:both;
        }

/* Card Helpers */
    .cardHelper .flavour {
        position:absolute;
        width: 688px;
        font-family: Klinic;
        font-size: 28px;
        line-height: 30px;
        white-space: pre-wrap;
        word-wrap: break-word;
        visibility: hidden;
        min-height:1em;
    }
    .cardHelper .effect {
        position:absolute;
        width: 688px;
        font-family: Cabin;
        font-size: 35px;
        line-height: 43px;
        white-space: pre-wrap;
        word-wrap: break-word;
        visibility: hidden;
        min-height:1em;
    }
    .cardHelper .name {
        position:absolute;
        width: 555px;
        font-family: Bartholowmew;
        font-size: 55px;
        line-height: 66px;
        white-space: pre-wrap;
        word-wrap: break-word;
        visibility: hidden;
        min-height: 1em;
    }
    .cardHelper .name.small {
        font-size: 44px;
        line-height: 53px;
    }

/* Card Generics */ /*+1*/
    .card {
        width: 788px;
        height: 1088px;
        background-size: contain;
        background-repeat: no-repeat;
        position:relative;
        -webkit-transform-origin:0 0;
        -ms-transform-origin:0 0;
        transform-origin:0 0;
    }
    .card input[type=text], .card textarea{
        margin:0;
        padding:0;
        border:none;
        background:transparent;
        resize: none;
    }
    .card .image {
        position:absolute;
        left: 122px;
        top:  161px;
        width: 601px;
        height: 444px;
        background-size: cover;
        background-position: top left;
        background-repeat: no-repeat;
    }
    .card .name {
        position: absolute;
        bottom: 952px;
        right: 66px;
        font-family: Bartholowmew;
        text-align: right;
        font-size: 55px;
        width: 555px;
        overflow: hidden;
        line-height: 66px;
        white-space: pre-line;
    }
    .card .name.small {
        font-size: 44px;
        line-height: 53px;
        bottom: 930px;
    }
    .card .attrs {
        position: absolute;
        bottom: 435px;
        right: 66px;
        font-family: Cabin;
        text-align: right;
        font-size: 38px;
        color: #eadcec;
        width:580px;
    }
    .card .effect {
        position: absolute;
        top: 673px;
        left: 50px;
        width: 688px;
        font-family: Cabin;
        text-align: center;
        font-size: 35px;
        line-height: 43px;
        overflow:hidden;
        white-space:pre-line;
    }
    .card .flavour {
        position: absolute;
        bottom: 45px;
        left: 50px;
        width: 688px;
        font-family: Klinic;
        text-align: center;
        font-size: 28px;
        line-height: 30px;
        overflow: hidden;
        white-space:pre-line;
    }
    .card .copyright {
        font-family: Cabin;
        color: #eadcec;
        bottom: 9px;
        position: absolute;
        width: 712px;
        font-size: 18px;
        text-align: right;
        right: 37px;
    }

/* Icon Generics */
    /* Icons that fly out to the right */
    .card .iconGender,.card .iconRace,.card .iconCard,.card .iconGoal,.card .iconTime {
        position:absolute;
        left: 58px;
        width:0;
        max-width:550px;
        padding-left:104px;
        height:0;
        min-height: 104px;
        border-radius: 40px 40px;
        background-size: 104px;
        background-repeat: no-repeat;
        overflow:hidden;
        pointer-events: none;
    }
    /* Icons that fly out to the left */
    .card .iconExpansion{
        position:absolute;
        right: 81px;
        width:0;
        max-width:550px;
        padding-right:104px;
        padding-top: 104px;
        height:0;
        min-height: 67px;
        border-radius: 40px 40px;
        background-size: 67px;
        background-repeat: no-repeat;
        background-position: right center;
        overflow:hidden;
        pointer-events: none;
    }
    .card.pony .iconGender, .card.pony .iconRace, .card.pony .iconTime,
    .card.start .iconGender, .card.start .iconRace, .card.start .iconTime,
    .card.ship .iconCard, .card.goal .iconGoal, .card .iconExpansion{
        pointer-events: all;
    }

/*Card Type Icon & Buttons*/
    .card .iconCard{
        top:86px;
    }
    .card button{
        width:80px;
        height:80px;
        margin:12px;
        padding:0;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: center;
        border:none;
        cursor:pointer;
    }
    .card .type button{
        height:88px;
        width:190px;
        margin:0;
        position:relative;
        background-color: rgba(255,255,255,0.75);
    }
    .card .type button:first-child{
        margin-top:75px;
    }
    .card .type button::before{
      font-size: 76px;
      font-family: Bartholowmew;
      text-align: center;
      position:absolute;
      top:-20px;
      left:0;
      right:0;
    }
    .card .iconGender:hover,.card .iconRace:hover,.card .iconCard:hover,
    .card .iconGoal:hover,.card .iconTime:hover{
        width:auto!important;
        height:auto!important;
        background-color: rgba(255, 255, 255, 0.75);
    }
    .card .iconExpansion:hover {
        width:auto!important;
        height:auto!important;
        background-color: rgba(200, 200, 200, 0.75);
        padding-top: 0;
    }
    .card .type:hover{
        height:auto;
    }
    .card .type{
      position: absolute;
      height: 75px;
      width: 190px;
      overflow: hidden;
      transform: rotate(-90deg);
      transform-origin: 0 0;
      top: 485px;
      left: 45px;
    }
    .card button[value=pony]::before{
        content:"Pony";
        color:#4b2a83;
    }
    .card button[value=ship]::before{
        content:"Ship";
        color:#c3136b;
    }
    .card button[value=goal]::before{
        content:"Goal";
        color:#3d2360;
    }
    .card button[value=start]::before{
        content:"Start";
        color:#3c3538;
    }
    .card button[value=""], .card button[value=R], .card button[value=G]{
        border: medium dashed #333;
        border-radius: 50%;
    }

    .card .iconExpansion {
        top: 500px;
    }
    .card .iconExpansion:hover {
        padding-top: 0;
    }
    .card:not(.web-outline):not(.web-grey):not(.web-white) .iconExpansion {
        background-image:url('resources/symbols/Symbol-Blank.png');
    }
    .card.web-outline .iconExpansion, button[value=web-outline]{
        background-image:url('resources/symbols/symbol-web-circledark.png');
    }
    .card.web-grey .iconExpansion, button[value=web-grey]{
        background-image:url('resources/symbols/symbol-web-circlegrey.png');
    }
    .card.web-white .iconExpansion, button[value=web-white]{
        background-image:url('resources/symbols/symbol-www.png');
    }

/*Pony & Start Cards*/
    .card.pony {
        background-image:url('resources/templates/BLEED-Blank-Pony-cropped.png');
    }
    .card.pony .name, .card.pony .effect {
        color:#462c89
    }
    .card.pony .flavour {
        color: #190233;
    }
    /*Start Card specifics (mostly colouring)*/
        .card.start {
            background-image:url('resources/templates/BLEED-Blank-Start-cropped.png');
        }
        .card.start .name,.card.ship .effect {
            color:#3a3235;
        }
        .card.start .flavour {
            color: #211b1d;
        }
        .card.start .attrs {
            color: #edefee;
        }
    /*Race Icon*/
        .card .iconRace {
            top: 160px;
        }
        .card.pony.R .iconRace, .card.start.R .iconRace {
            background-image:url('resources/symbols/Symbol-Blank.png');
        }
        /*Regular*/
            .card.pony.unicorn .iconRace, .card.start.unicorn .iconRace, button[value=unicorn] {
                background-image:url('resources/symbols/Symbol-Unicorn.png');
            }
            .card.pony.earthpony .iconRace, .card.start.earthpony .iconRace, button[value=earthpony] {
                background-image:url('resources/symbols/Symbol-Earth-Pony.png');
            }
            .card.pony.pegasus .iconRace, .card.start.pegasus .iconRace, button[value=pegasus] {
                background-image:url('resources/symbols/Symbol-Pegasus.png');
            }
            .card.pony.alicorn .iconRace, .card.start.alicorn .iconRace, button[value=alicorn] {
                background-image:url('resources/symbols/Symbol-Alicorn.png');
            }
        /*Changelings*/
            .card.pony.unicorn.changeling .iconRace, .card.start.unicorn.changeling .iconRace {
                background-image:url('resources/symbols/Symbol-ChangelingUnicorn.png');
            }
            .card.pony.earthpony.changeling .iconRace, .card.start.earthpony.changeling .iconRace, button[value=changeling] {
                background-image:url('resources/symbols/Symbol-ChangelingEarthPony.png');
            }
            .card.pony.pegasus.changeling .iconRace, .card.start.pegasus.changeling .iconRace {
                background-image:url('resources/symbols/Symbol-ChangelingPegasus.png');
            }
            .card.pony.alicorn.changeling .iconRace, .card.start.alicorn.changeling .iconRace {
                background-image:url('resources/symbols/Symbol-ChangelingAlicorn.png');
            }
    /*Gender Icon*/
        .card .iconGender {
            top: 56px;
        }
        .card.pony.G .iconGender, .card.start.G .iconGender {
            background-image:url('resources/symbols/Symbol-Blank.png');
        }
        .card.pony.female .iconGender, .card.start.female .iconGender, button[value=female] {
            background-image:url('resources/symbols/Symbol-Female.png');
        }
        .card.pony.male .iconGender, .card.start.male .iconGender, button[value=male] {
            background-image:url('resources/symbols/Symbol-male.png');
        }
        .card.pony.malefemale .iconGender, .card.start.malefemale .iconGender, button[value=malefemale] {
            background-image:url('resources/symbols/Symbol-MaleFemale.png');
        }
    /*Time Icon (Toggle)*/
        .card .iconTime {
            top: 530px;
        }
        .card.pony:not(.time) .iconTime, .card.start:not(.time) .iconTime {
            background-image:url('resources/symbols/Symbol-Blank.png');
        }
        .card.pony.time .iconTime, .card.start.time .iconTime, button[value=time]{
            background-image:url('resources/symbols/symbol-dystopian-future.png');
        }

/*Ship Cards*/
    .card.ship {
        background-image:url('resources/templates/BLEED-Blank-Ship-cropped.png');
    }
    .card.ship .name, .card.ship .effect {
        color:#ce1b69;
    }
    .card.ship .flavour {
        color: #811935;
    }
    .card.ship .iconCard {
        background-image:url('resources/symbols/Symbol-Ship.png');
    }

/*Goal Cards*/
    .card.goal {
        background-image:url('resources/templates/BLEED-Blank-Goal-cropped.png');
    }
    .card.goal .name, .card.goal .effect {
        color:#123962;
    }
    .card.goal .attrs {
        display:none;
    }
    .card.goal .flavour {
        color:#172640;
    }
    .card.goal .iconCard {
        background-image:url('resources/symbols/Symbol-Goal.png');
    }
    /*Score Icons*/
        .card.goal.s0 .iconGoal {
            width:94px;
            height:115px;
            background-size:94px 115px;
            top: 550px;
            margin-left:13px;
            background-image:url('resources/symbols/symbol-0.png');
        }
        .card.goal.s1 .iconGoal {
            width:79px;
            height:105px;
            background-size:79px 105px;
            top: 550px;
            margin-left:15px;
            background-image:url('resources/symbols/symbol-1.png');
        }
        .card.goal.s2 .iconGoal {
            width:120px;
            height:92px;
            background-size:120px 92px;
            top: 550px;
            background-image:url('resources/symbols/symbol-2.png');
        }
        .card.goal.s3 .iconGoal {
            width:113px;
            height:107px;
            background-size:113px 107px;
            top: 550px;
            margin-left:3px;
            background-image:url('resources/symbols/symbol-3.png');
        }
        .card.goal.s4 .iconGoal {
            width:96px;
            height:109px;
            background-size:96px 109px;
            top: 550px;
            margin-left:3px;
            background-image:url('resources/symbols/symbol-4.png');
        }
        .card.goal.s2-3 .iconGoal {
            width:145px;
            height:98px;
            background-size:145px 98px;
            top: 550px;
            background-image:url('resources/symbols/symbol-23.png');
        }
        .card.goal.s3-4 .iconGoal {
            width:141px;
            height:87px;
            background-size:141px 87px;
            top: 550px;
            background-image:url('resources/symbols/symbol-34.png');
        }
    /* Selection Buttons */
        .card .iconGoal:not(:hover) button{
            display:none;
        }
        .card button[value=s0]{
            background-image:url('resources/symbols/symbol-0.png');
        }
        .card button[value=s1]{
            background-image:url('resources/symbols/symbol-1.png');
        }
        .card button[value=s2]{
            background-image:url('resources/symbols/symbol-2.png');
        }
        .card button[value=s3]{
            background-image:url('resources/symbols/symbol-3.png');
        }
        .card button[value=s4]{
            background-image:url('resources/symbols/symbol-4.png');
        }
        .card button[value=s2-3]{
            background-image:url('resources/symbols/symbol-23.png');
        }
        .card button[value=s3-4]{
            background-image:url('resources/symbols/symbol-34.png');
        }