|
$coin-size: 3.5rem; |
|
$coin-thickness: $coin-size / 11; |
|
|
|
$bg: #f4f7ff; |
|
$bg-button: #031032; |
|
$font-color: #fff; |
|
$c-l: #fcfaf9; |
|
$c-m: #c2cadf; |
|
$c-d: #8590b3; |
|
$c-side: #737c99; |
|
$shine: #e9f4ff; |
|
|
|
.tip-button { |
|
background: none; |
|
border: 0; |
|
border-radius: 0.25rem 0.25rem 0 0; |
|
cursor: pointer; |
|
font-family: 'Quicksand', sans-serif; |
|
font-size: 0.75rem; |
|
font-weight: 600; |
|
height: 2.6rem; |
|
margin-bottom: -4rem; |
|
outline: 0; |
|
position: relative; |
|
top: 0; |
|
transform-origin: 0% 100%; |
|
transition: transform 50ms ease-in-out; |
|
width: 9.5rem; |
|
-webkit-tap-highlight-color: transparent; |
|
&:active { |
|
transform: rotate(4deg); |
|
} |
|
// Button was clicked |
|
&.clicked { |
|
animation: 150ms ease-in-out 1 shake; |
|
pointer-events: none; |
|
.tip-button__text { |
|
opacity: 0; |
|
transition: opacity 100ms linear 200ms; |
|
} |
|
&::before { // background/bar |
|
height: 0.5rem; |
|
width: 60%; |
|
} |
|
.coin { |
|
transition: margin-bottom 1s linear 200ms; |
|
margin-bottom: 0; |
|
} |
|
} |
|
// Coin almost finished falling |
|
&.shrink-landing { |
|
&::before { // background/bar |
|
transition: width 200ms ease-in; |
|
width: 0; |
|
} |
|
} |
|
// Coin finished falling |
|
&.coin-landed { |
|
&::after { // Thank you message |
|
opacity: 1; |
|
transform: scale(1); |
|
transform-origin: 50% 100%; |
|
} |
|
|
|
// Make the little confetti looking dots on this wrapper |
|
.coin-wrapper { |
|
background: |
|
radial-gradient(circle at 35% 97%, rgba($bg-button, 0.4) 0.04rem, transparent 0.04rem), |
|
radial-gradient(circle at 45% 92%, rgba($bg-button, 0.4) 0.04rem, transparent 0.02rem), |
|
radial-gradient(circle at 55% 98%, rgba($bg-button, 0.4) 0.04rem, transparent 0.04rem), |
|
radial-gradient(circle at 65% 96%, rgba($bg-button, 0.4) 0.06rem, transparent 0.06rem); |
|
background-position: center bottom; |
|
background-size: 100%; |
|
bottom: -1rem; |
|
opacity: 0; |
|
transform: scale(2) translateY(-10px); |
|
} |
|
} |
|
|
|
&__text { |
|
color: $font-color; |
|
margin-right: 1.8rem; |
|
opacity: 1; |
|
position: relative; |
|
transition: opacity 100ms linear 500ms; |
|
z-index: 3; |
|
} |
|
|
|
// Background of button |
|
&::before { |
|
background: $bg-button; |
|
border-radius: 0.25rem; |
|
bottom: 0; |
|
content: ''; |
|
display: block; |
|
height: 100%; |
|
left: 50%; |
|
position: absolute; |
|
transform: translateX(-50%); |
|
transition: height 250ms ease-in-out 400ms, width 250ms ease-in-out 300ms; |
|
width: 100%; |
|
z-index: 2; |
|
} |
|
|
|
// Thank you message |
|
&::after { |
|
bottom: -1rem; |
|
color: $bg-button; |
|
content: 'Thank you!'; |
|
height: 110%; |
|
left: 0; |
|
opacity: 0; |
|
position: absolute; |
|
pointer-events: none; |
|
text-align: center; |
|
transform: scale(0); |
|
transform-origin: 50% 20%; |
|
transition: transform 200ms cubic-bezier(0,0,.35,1.43); |
|
width: 100%; |
|
z-index: 1; |
|
} |
|
} |
|
|
|
.coin-wrapper { |
|
background: none; |
|
bottom: 0; |
|
height: 18rem; |
|
left: 0; |
|
opacity: 1; |
|
overflow: hidden; |
|
pointer-events: none; |
|
position: absolute; |
|
transform: none; |
|
transform-origin: 50% 100%; |
|
transition: opacity 200ms linear 100ms, transform 300ms ease-out; |
|
width: 100%; |
|
} |
|
|
|
.coin { |
|
--front-y-multiplier: 0; |
|
--back-y-multiplier: 0; |
|
--coin-y-multiplier: 0; |
|
--coin-x-multiplier: 0; |
|
--coin-scale-multiplier: 0; |
|
--coin-rotation-multiplier: 0; |
|
--shine-opacity-multiplier: 0.4; |
|
--shine-bg-multiplier: 50%; |
|
bottom: calc(var(--coin-y-multiplier) * 1rem - #{$coin-size}); |
|
height: $coin-size; |
|
margin-bottom: 3.05rem; |
|
position: absolute; |
|
right: calc(var(--coin-x-multiplier) * 34% + 16%); |
|
transform: |
|
translateX(50%) |
|
scale(calc(0.4 + var(--coin-scale-multiplier))) |
|
rotate(calc(var(--coin-rotation-multiplier) * -1deg)); |
|
transition: opacity 100ms linear 200ms; |
|
width: $coin-size; |
|
z-index: 3; |
|
|
|
&__front, |
|
&__middle, |
|
&__back, |
|
&::before, |
|
&__front::after, |
|
&__back::after { |
|
border-radius: 50%; |
|
box-sizing: border-box; |
|
height: 100%; |
|
left: 0; |
|
position: absolute; |
|
width: 100%; |
|
z-index: 3; |
|
} |
|
|
|
// Tails |
|
&__front { |
|
background: |
|
radial-gradient(circle at 50% 50%, transparent 50%, rgba($c-side, 0.4) 54%, $c-m 54%), |
|
linear-gradient(210deg, $c-d 32%, transparent 32%), |
|
linear-gradient(150deg, $c-d 32%, transparent 32%), |
|
linear-gradient(to right, $c-d 22%, transparent 22%, transparent 78%, $c-d 78%), |
|
linear-gradient(to bottom, $c-l 44%, transparent 44%, transparent 65%, $c-l 65%, $c-l 71%, $c-d 71%), |
|
linear-gradient(to right, transparent 28%, $c-l 28%, $c-l 34%, $c-d 34%, $c-d 40%, $c-l 40%, $c-l 47%, $c-d 47%, $c-d 53%, $c-l 53%, $c-l 60%, $c-d 60%, $c-d 66%, $c-l 66%, $c-l 72%, transparent 72%); |
|
background-color: $c-d; |
|
background-size: 100% 100%; |
|
transform: translateY(calc(var(--front-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(--front-scale-multiplier)); |
|
|
|
// Shadow on coin face |
|
&::after { |
|
background: rgba(#000, 0.2); |
|
content: ''; |
|
opacity: var(--front-y-multiplier); |
|
} |
|
} |
|
|
|
&__middle { |
|
background: $c-side; |
|
transform: translateY(calc(var(--middle-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(--middle-scale-multiplier)); |
|
} |
|
|
|
// Heads |
|
&__back { |
|
background: |
|
radial-gradient(circle at 50% 50%, transparent 50%, rgba($c-side, 0.4) 54%, $c-m 54%), |
|
radial-gradient(circle at 50% 40%, $c-l 23%, transparent 23%), |
|
radial-gradient(circle at 50% 100%, $c-l 35%, transparent 35%); |
|
background-color: $c-d; |
|
background-size: 100% 100%; |
|
transform: translateY(calc(var(--back-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(--back-scale-multiplier)); |
|
|
|
// Shadow on coin face |
|
&::after { |
|
background: rgba(#000, 0.2); |
|
content: ''; |
|
opacity: var(--back-y-multiplier); |
|
} |
|
} |
|
|
|
// Light glare on the coin |
|
&::before { |
|
background: |
|
radial-gradient(circle at 25% 65%, transparent 50%, rgba(white, 0.9) 90%), |
|
linear-gradient(55deg, transparent calc(var(--shine-bg-multiplier) + 0%), $shine calc(var(--shine-bg-multiplier) + 0%), transparent calc(var(--shine-bg-multiplier) + 50%)); |
|
content: ''; |
|
opacity: var(--shine-opacity-multiplier); |
|
transform: |
|
translateY(calc(var(--middle-y-multiplier) * #{$coin-thickness} / -2)) |
|
scaleY(var(--middle-scale-multiplier)) |
|
rotate(calc(var(--coin-rotation-multiplier) * 1deg)); |
|
z-index: 10; |
|
} |
|
|
|
// Sqaure for the 'side' of the coin |
|
&::after { |
|
background: $c-side; |
|
content: ''; |
|
height: $coin-thickness; |
|
left: 0; |
|
position: absolute; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
width: 100%; |
|
z-index: 2; |
|
} |
|
} |
|
|
|
@keyframes shake { |
|
0% { transform: rotate(4deg) } |
|
66% { transform: rotate(-4deg) } |
|
100% { transform: rotate() } |
|
} |
|
|
|
/********* BODY STYLES *********/ |
|
html, |
|
body { |
|
height: 100%; |
|
} |
|
|
|
body { |
|
align-items: center; |
|
background: $bg; |
|
display: flex; |
|
justify-content: center; |
|
-webkit-font-smoothing: antialiased; |
|
} |