/*----------------------------------------------------------------------------------- Shortcodes: pricing.scss -----------------------------------------------------------------------------------*/ /* ---------------------------------------------------------------- Pricing Boxes -----------------------------------------------------------------*/ .pricing { position: relative; /* Pricing Boxesma -----------------------------------------------------------------*/ /* Pricing Boxes - Title -----------------------------------------------------------------*/ /* Pricing Boxes - Price -----------------------------------------------------------------*/ /* Pricing Boxes - Features -----------------------------------------------------------------*/ /* Pricing Boxes - Action -----------------------------------------------------------------*/ /* Pricing Boxes - Best Price -----------------------------------------------------------------*/ /* Pricing Boxes - Simple -----------------------------------------------------------------*/ /* Pricing Boxes - Minimal -----------------------------------------------------------------*/ /* Pricing Boxes - Extended -----------------------------------------------------------------*/ /* Pricing Boxes - 5 Columns -----------------------------------------------------------------*/ } .pricing [class^=col-] { margin-top: 1.25rem; } .pricing-box { position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.075); border-radius: 3px; background-color: whitesmoke; } .pricing-title { padding: 1rem 0; background-color: #f9f9f9; border-bottom: 1px solid rgba(0, 0, 0, 0.05); letter-spacing: 1px; } .pricing-title h3 { margin: 0; font-size: 1.5rem; font-weight: bold; color: #555555; } .pricing-title span { display: block; color: #777777; font-weight: 300; font-size: 1.05rem; margin: 3px 0; text-transform: uppercase; } .pricing-title.title-sm h3 { font-size: 1.25rem; } .pricing-title.title-sm span { font-size: 0.875rem; } .pricing-price { position: relative; padding: 1.5rem 0; color: #333333; font-size: 4rem; line-height: 1; } .pricing-price .price-unit { display: inline-block; vertical-align: top; margin: 7px 3px 0 0; font-size: 1.74rem; font-weight: normal; } .pricing-price .price-tenure { vertical-align: baseline; font-size: 0.99354rem; font-weight: normal; letter-spacing: 1px; color: #999999; margin: 0 0 0 3px; } .pricing-features { border-top: 1px solid rgba(0, 0, 0, 0.075); border-bottom: 1px solid rgba(0, 0, 0, 0.075); background-color: #f9f9f9; padding: 2rem 0; } .pricing-features ul { margin: 0; list-style: none; } .pricing-features li { padding: 0.375rem 0; } .pricing-action { padding: 1.25rem 0; } .pricing-highlight { box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); z-index: 10; margin: -1.25rem -1px; } .pricing-highlight .pricing-title, .pricing-highlight .pricing-features { background-color: #FFF; } .pricing-highlight .pricing-price { font-size: 4.5rem; } .pricing-simple { border: 0; } .pricing-simple .pricing-title, .pricing-simple .pricing-features { border: 0; background-color: transparent; } .pricing-minimal .pricing-price { background-color: #FFF; border-bottom: 1px solid rgba(0, 0, 0, 0.075); } .pricing-minimal .pricing-price::after { display: none; } .pricing-extended { background-color: #FFF; text-align: left; } .pricing-extended .pricing-title { background-color: transparent; padding-top: 0; text-align: left; } .pricing-extended .pricing-features { border: 0; background-color: transparent; } .pricing-extended .pricing-action-area { border-left: 1px solid rgba(0, 0, 0, 0.05); background-color: #f9f9f9; padding: 30px; text-align: center; } .pricing-extended .pricing-action-area .pricing-price, .pricing-extended .pricing-action-area .pricing-action { padding: 0; } .pricing-extended .pricing-action-area .pricing-price { padding-bottom: 1.25rem; } .pricing-extended .pricing-action-area .pricing-price::after { display: none; } .pricing-extended .pricing-action-area .pricing-price span.price-tenure { display: block; margin: 10px 0 0 0; font-weight: 300; text-transform: uppercase; font-size: 0.875rem; } .pricing-extended .pricing-meta { color: #999999; font-weight: 300; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 10px; } .pricing.pricing-5 .pricing-box { float: left; width: 20%; margin-top: 1.25rem; } .pricing.pricing-5 .pricing-box.best-price { margin-top: 0; } .pricing.pricing-5 .pricing-box:nth-child(5) { margin-left: -1px; } .pricing.pricing-5 .pricing-title h3 { font-size: 1.5rem; } .pricing.pricing-5 .best-price .pricing-title h3 { font-size: 1.5rem; } .table-comparison, .table-comparison th { text-align: center; } .table-comparison th:first-child, .table-comparison td:first-child { text-align: left; font-weight: bold; }