diff options
Diffstat (limited to 'assets/css/pricing.scss')
-rw-r--r-- | assets/css/pricing.scss | 497 |
1 files changed, 275 insertions, 222 deletions
diff --git a/assets/css/pricing.scss b/assets/css/pricing.scss index d5176c9d..d8ffdfd5 100644 --- a/assets/css/pricing.scss +++ b/assets/css/pricing.scss @@ -12,230 +12,226 @@ /* Pricing area */ -.pricing-section { +.plans { margin-top: 133px; - - .btn-primary { - text-indent: -20px; - } -} -.table-column { - cursor: default; - border-radius: 8px; - border: solid 1px #eeeeee; - padding: 0px; - width: 31%; - margin-left: 1%; - margin-right: 1%; - margin-bottom: 50px; - @media (max-width: $break-big) { - width: 80%; - margin: auto; - margin-bottom: 60px; - } - .table-header { - padding: 0px; - margin: 0px; - width: 100%; - border-radius: 7px 7px 0px 0px; - - h1 { - text-align: center; - color: #2a2a36; - font-size: 22px; - font-weight: bold; - line-height: 1.36; - padding: 0px; - margin: 0px; - padding-top: 42px; - letter-spacing: 0; - } - - h2 { - font-size: 18px; - font-weight: 300; - text-align: center; - color: #555555; - line-height: 1.61; - padding: 0px; - margin: 0px; - padding-top: 0px; - padding-bottom: 29px; - } - } - - .basic { - background-color: #f9f9f9; - } - - .standard { - background-color: #c4e1f7; - } - - .premium { - background-color: #178ecd; - - h1 { - color: white !important; - } - - h2 { - color: white !important; - } - } - - .highlight { - box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.16); - } -} - -.table-content { - margin: 15px; - padding: 0px; - margin-left: 30px; - margin-right: 30px; - - h1 { - font-size: 18px; - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 2.22; - color: #555555; - text-align: left; - letter-spacing: 0; - margin-top: 25px; - margin-bottom: 0px; - } -} - -.line { - width: 100%; - border: solid 1px #eeeeee; - margin-top: -5px; - margin-bottom: 15px; -} - -.list .check { - /* font-family: OpenSans; */ - font-size: 16px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 2.5; - color: #555555; -} - -.list .check { - list-style-image: url("../img/enterprise/check.svg"); - list-style-position:inside; -} - -.list .nocheck { - /* font-family: OpenSans; */ - font-size: 16px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 2.5; - color: #b1b1b1; - - a { - color: #b1b1b1; - text-decoration: none; - } -} - -.list .nocheck { - list-style-image: url("../img/enterprise/nocheck.svg"); - list-style-position:inside; -} - - -.list .optional { - /* font-family: OpenSans; */ - font-size: 16px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 2.5; - color: #555555; -} - -.list .optional { - list-style-image: url("../img/enterprise/optional.svg"); - list-style-position:inside; -} - -.list .price { - /* font-family: OpenSans; */ - font-size: 16px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 2.5; - color: #555555; -} - -.list .price { - list-style-image: url("../img/enterprise/blank.svg"); - list-style-position:inside; -} - - -.table-content .btn-lg { - margin-top: 30px; - margin-bottom: 30px; + .table-column { + cursor: default; + border-radius: 8px; + border: solid 1px #eeeeee; + padding: 0px; + width: 31%; + margin-left: 1%; + margin-right: 1%; + margin-bottom: 50px; + @media (max-width: $break-big) { + width: 80%; + margin: auto; + margin-bottom: 60px; + } + .table-header { + padding: 0px; + margin: 0px; + width: 100%; + border-radius: 7px 7px 0px 0px; + + h1 { + text-align: center; + color: #2a2a36; + font-size: 22px; + font-weight: bold; + line-height: 1.36; + padding: 0px; + margin: 0px; + padding-top: 42px; + letter-spacing: 0; + } + + h2 { + font-size: 18px; + font-weight: 300; + text-align: center; + color: #555555; + line-height: 1.61; + padding: 0px; + margin: 0px; + padding-top: 0px; + padding-bottom: 29px; + } + } + + .basic { + background-color: #f9f9f9; + } + + .standard { + background-color: #c4e1f7; + } + + .premium { + background-color: #178ecd; + + h1 { + color: white !important; + } + + h2 { + color: white !important; + } + } + + .highlight { + box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.16); + } + } + + .table-content { + margin: 15px; + padding: 0px; + margin-left: 30px; + margin-right: 30px; + + h1 { + font-size: 18px; + font-weight: 600; + font-style: normal; + font-stretch: normal; + line-height: 2.22; + color: #555555; + text-align: left; + letter-spacing: 0; + margin-top: 25px; + margin-bottom: 0px; + } + } + + .line { width: 100%; - text-indent: -20px; -} - -/* Tooltips */ - -/* Tooltip text */ -.overinfo .infotext { - visibility: hidden; -/* width: 200px; */ - background-color: #555555; - color: #fff; - text-align: center; - padding: 5px 0; - line-height: 1.4; -border-radius: 6px; - - /* Position the tooltip text */ - position: absolute; - z-index: 10; - padding: 3px; -/* top: 100%; */ -/* left: 50%; */ -/* margin-left: -100px; */ -} - -/* Show the tooltip text when you mouse over the tooltip container */ -.overinfo:hover .infotext { - visibility: visible; -} - -.overinfo .infotext::after { - content: " "; - position: absolute; - bottom: 100%; /* At the top of the tooltip */ - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent #555555 transparent; -} - -.overinfo .infotext { - opacity: 0; - transition: opacity 0.5s; -} - -.overinfo:hover .infotext { - opacity: 1; + border: solid 1px #eeeeee; + margin-top: -5px; + margin-bottom: 15px; + } + + .list .check { + /* font-family: OpenSans; */ + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2.5; + color: #555555; + } + + .list .check { + list-style-image: url("../img/enterprise/check.svg"); + list-style-position:inside; + } + + .list .nocheck { + /* font-family: OpenSans; */ + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2.5; + color: #b1b1b1; + + a { + color: #b1b1b1; + text-decoration: none; + } + } + + .list .nocheck { + list-style-image: url("../img/enterprise/nocheck.svg"); + list-style-position:inside; + } + + + .list .optional { + /* font-family: OpenSans; */ + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2.5; + color: #555555; + } + + .list .optional { + list-style-image: url("../img/enterprise/optional.svg"); + list-style-position:inside; + } + + .list .price { + /* font-family: OpenSans; */ + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2.5; + color: #555555; + } + + .list .price { + list-style-image: url("../img/enterprise/blank.svg"); + list-style-position:inside; + } + + + .table-content .btn-lg { + margin-top: 30px; + margin-bottom: 30px; + width: 100%; + text-indent: -20px; + } + + /* Tooltips */ + + /* Tooltip text */ + .overinfo .infotext { + visibility: hidden; + /* width: 200px; */ + background-color: #555555; + color: #fff; + text-align: center; + padding: 5px 0; + line-height: 1.4; + border-radius: 6px; + + /* Position the tooltip text */ + position: absolute; + z-index: 10; + padding: 3px; + /* top: 100%; */ + /* left: 50%; */ + /* margin-left: -100px; */ + } + + /* Show the tooltip text when you mouse over the tooltip container */ + .overinfo:hover .infotext { + visibility: visible; + } + + .overinfo .infotext::after { + content: " "; + position: absolute; + bottom: 100%; /* At the top of the tooltip */ + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent #555555 transparent; + } + + .overinfo .infotext { + opacity: 0; + transition: opacity 0.5s; + } + + .overinfo:hover .infotext { + opacity: 1; + } } /* Discount section */ @@ -294,7 +290,7 @@ border-radius: 6px; } } -/* Discount section */ +/* FAQ section */ .faq { background: $nextcloud-blue; padding-bottom: 50px; @@ -318,4 +314,61 @@ border-radius: 6px; } } } + h3 { + font-size: 20px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 1.45; + text-align: left; + color: #555555; + } + h1 { + font-size: 60px; + font-weight: 300; + font-style: normal; + font-stretch: normal; + line-height: 0.88; + color: #ffffff; + margin-top: 100px; + margin-bottom: 80px; + text-align: center; + } + p { + font-size: 18px; + font-weight: 300; + font-style: normal; + font-stretch: normal; + line-height: 1.61; + text-align: left; + color: #555555; + } + .downarrow a { + color: #555555; + &:hover { + text-decoration: none; + } + &:active { + text-decoration: none; + } + } + .line { + width: 100%; + height: 1px; + border: solid 1px #eeeeee; + } + .downarrow { + position: relative; + } + + .downarrow span.icon-arrow-down { + background: url(../img/arrow_down.svg) center/contain no-repeat; + position: absolute; + width: 25px; + height: 100%; + right: -30px; + top: 0px; + } } + + |