Download raw (2.9 KB)
// Arrow blocks .arrow { width: 7em; text-align: center; font-size: 20px; padding: .25em; } .arrow { position: relative; margin: 10px 32px 40px 32px; } .arrow:after { content: ""; display: block; position: absolute; border-style: solid; height: 0; width: 0; } .arrow:after { left: -1.5em; bottom: -1em; border-width: 1em 5em 0 5em; } @media only screen and (min-width : 800px) { .arrow--right { position: absolute; top: 50%; left: 1.21em; margin-top: -3.25em; } .arrow--right:after { top: -1.25em; right: -1em; bottom: initial; left: initial; border-width: 4.5em 0 4.5em 1em; } } .arrow__box { color: inherit; line-height: 6em; height: 6em; font-weight: bold; font-family: "urw-grotesk-t"; background-color: white; display: block; } .arrow .arrow__box { margin-bottom: .25em; } @media only screen and (min-width : 800px) { .arrow--right .arrow__box { margin-right: .25em; margin-bottom: initial; } } .arrow__box__inner { line-height: .85em; vertical-align: middle; display: inline-block; } .arrow__box__inner__price { font-family: "alfphabetbipocatcondensed"; font-size: 3em; font-weight: normal; line-height: .95em; display: inline-block; position: relative; } .arrow__box__inner__price sup { font-size: .60em; line-height: 1.2em; position: absolute; top: 0; left: 100%; } .arrow__box__inner__price sub { font-size: .35em; line-height: 1.4em; padding-left: .15em; position: absolute; bottom: 0; left: 100%; } .arrow__counter { color: white; width: 100%; font-family: "alfphabetbipocatcondensed"; font-size: 39px; line-height: 39px; } .arrow__counter sup { vertical-align: .3em; font-size: .7em; top: auto; line-height: 0; } .arrow__counter__goal { display: inline-block; font-size: 18px; line-height: 15px; text-align: left; } a.arrow__box { color: inherit !important; } a.arrow__box:hover { color: white !important; } .arrow--subscribe { background-color: @color-A1; color: @color-A1; } .arrow--subscribe .arrow__box:hover { background-color: @color-A1; } .arrow--subscribe:after { border-color: @color-A1 transparent; } .arrow--cooperate { background-color: @color-A2; color: @color-A2; } .arrow--cooperate .arrow__box:hover { background-color: @color-A2; } .arrow--cooperate:after { border-color: @color-A2 transparent; } .arrow--donate { background-color: @color-A4; color: @color-A4; } .arrow--donate .arrow__box:after { background-color: @color-A4 transparent; } .arrow--donate:after { border-color: @color-A4 transparent; } @media only screen and (min-width : 800px) { .arrow--donate:after { border-color: transparent @color-A4; } }