@import "common.scss"; div.title { } div.pricing { background-color: #eaedf5; padding: 0; } div.pricing-notes { font-size: smaller; color: #777; a { color: #777; font-weight: bold; } a:hover { text-decoration: underline; } background-color: #fffcf0; border: solid 2px #ddd; @include border-radius(.7rem); margin: .5rem; padding: 1rem; dt { font-weight: bold; } } div.plans_header { position: relative; div.with-tooltip div.tooltip.product { color: #000; background-color: #fff; border: solid 2px #ccc; @include border-radius(.7rem); & strong { color: #3670b9; } } } div.plans { display: flex; flex-wrap: wrap; margin: 0; &> div { width: 25%; margin: .5rem; padding: 15px; flex-grow: 2; border: solid 2px #ccc; background-color: #fff; @include border-radius(.7rem); } } @media screen and (max-width: 600px) { div.plans > div { width: 100%; } } div.plan { h2 { font-size: 140%; } hr { color: #dedede3d; } div.actions { margin-top: 10px; padding: 10px; display: flex; flex-wrap: wrap; a,button { border: solid 1px white; font-family: arial; font-weight: bold; text-decoration: none; background-color: #00a9e2; color: white; padding: 15px; margin: 5px auto 5px auto; width: 90%; clear: both; display: block; text-align: center; } a:hover, button:hover { border: solid 1px blue; background-color: #0091D7; } button.buy { } button.try { background-color: #006f9f; padding: 5px 15px 5px 15px; } } div.option { border-bottom: solid 1px #ccc; div.prices { margin: 5px 0 5px 0; } button { width: 90%; } } } div.pricing { .empty { height: 1rem; } .plans { margin-top: 1.4rem; } div.plan div.option { &.year, &.month, &.week, &.day, &.onetime { display: none; background-color: #999; } } input[type="radio"] { display: none; } input[type="radio"] + label { display: inline-block; margin-left: 1rem; //margin-bottom: 20px; padding: 1rem; color: #00000055; font-weight: bold; background-color: #cccccc66; border: solid 2px #cccccc66; } input[type="radio"] ~ input[type="radio"] + label { margin-left: .2rem; } input[type="radio"]:checked + label { border: solid 2px #000; //@include border-radius(.7rem); color: #000000; background-color: #fff; @include transition-ease-out(all,.2s); } input[type="radio"].year:checked ~ div.plans div.plan div[data-interval="year"] { display: block; background-color: transparent; @include fade-in(1s); } input[type="radio"].month:checked ~ div.plans div.plan div[data-interval="month"] { display: block; background-color: transparent; @include fade-in(1s); } input[type="radio"].week:checked ~ div.plans div.plan div[data-interval="week"] { display: block; background-color: transparent; @include fade-in(1s); } input[type="radio"].day:checked ~ div.plans div.plan div[data-interval="day"] { display: block; background-color: transparent; @include fade-in(1s); } input[type="radio"].onetime:checked ~ div.plans div.plan div[data-interval="onetime"] { display: block; background-color: transparent; @include fade-in(1s); } } div.pay { padding: 10px; div#card-element { margin: 20px; padding: 20px; border: dotted 1px #ccc; } button { margin: 10px; padding: 10px; } } a.footnote { border: solid 1px blue; color: #fff; border-radius: 50%; width: 14px; height: 14px; vertical-align: super; font: 12px Arial, sans-serif; display: inline-block; text-align: center; margin-left: 2px; color: blue; cursor: pointer; }