github.com/darmach/terratest@v0.34.8-0.20210517103231-80931f95e3ff/docs/assets/css/pages/commercial-support.scss (about)

     1  .commercial-support {
     2    .subpage__header {
     3  
     4      .subpage__hero {
     5        max-width: 55%;
     6        margin-left: auto;
     7        margin-right: 1.5rem;
     8        text-align: left;
     9  
    10        h1 {
    11          span {
    12            font-weight: 300;
    13          }
    14        }
    15      }
    16  
    17      .header-bg {
    18        .header-shapes-left {
    19          width: 375px;
    20          left:  5%;
    21          top: 48%;
    22        }
    23      }
    24    }
    25  
    26    .header-shapes-right,.header-shapes-top {
    27      display: none;
    28    }
    29  }
    30  
    31  .commercial-support__page {
    32    font-family: 'Source Sans Pro', sans-serif;
    33  
    34    .get-access-cmp {
    35      .shapes-bottom {
    36        display: none;
    37      }
    38  
    39      span {
    40        position: relative;
    41        z-index: 2;
    42  
    43        .shapes-left,.shapes-right {
    44          position: absolute;
    45          z-index: 1;
    46        }
    47  
    48        .shapes-right {
    49          right: -200px;
    50        }
    51  
    52        .shapes-left {
    53          left: -200px;
    54        }
    55      }
    56    }
    57  
    58    .support-options {
    59      .option {
    60        text-align: left;
    61        padding: 10px;
    62  
    63        .icon-bubble {
    64          width: 40px;
    65          height: 40px;
    66          border-radius: 30px;
    67          box-shadow: 0 5px 14px 0 rgba(22, 62, 122, 0.23);
    68          background: linear-gradient(240deg, #1888cf 50%, #001191);
    69          display: flex;
    70          justify-content: center;
    71          align-items: center;
    72          margin-bottom: 24px;
    73  
    74          img {
    75            width: 20px;
    76          }
    77        }
    78  
    79        label {
    80          font-size: 22px;
    81          font-weight: 800;
    82          color: #1e252f;
    83          width: 100%;
    84        }
    85      }
    86    }
    87  
    88    .commercial-support__pricing { 
    89      display: block;
    90      height: 100%;
    91      max-width: 1200px;
    92      margin-left: auto;
    93      margin-right: auto;
    94  
    95      .pricing-table {
    96        margin: 0 2rem;
    97      }
    98  
    99      .pricing-shapes-top {
   100        display: none;
   101      }
   102  
   103      .pricing-note {
   104        padding: 20px 15px;
   105        display: block;
   106        width: 100%;
   107        font-size: 15px;
   108        color:#1e252f;
   109  
   110        p {
   111          margin:0;
   112        }
   113      }
   114  
   115      .section-title {
   116        margin-bottom: 60px;
   117        text-align: center;
   118  
   119        span {
   120          font-family: 'Source Sans Pro', sans-serif;
   121          font-size: 44px;
   122          font-weight: 300;
   123        }
   124      }
   125  
   126      .header {
   127        display: flex;
   128  
   129        .cell-cnt {
   130          padding: 0 1rem!important;
   131        }
   132  
   133        .cell {
   134          background-color: #eef1f2;
   135          border-top-right-radius: 10px;
   136          border-top-left-radius: 10px;
   137          min-height: 50px;
   138          display: flex;
   139          justify-content: center;
   140          align-items: center;
   141          max-width: 180px;
   142          margin: auto;
   143          box-shadow: 0 5px 24px 0 rgba(22, 62, 122, 0.12);
   144  
   145          .title {
   146            font-family: 'Source Sans Pro', sans-serif;
   147            font-size: 16px;
   148            text-transform: uppercase;
   149            font-weight: 800;
   150            letter-spacing: 2px;
   151          }
   152        }
   153  
   154        .cell-enterprise {
   155          background-image: linear-gradient(135deg, #001191, #06a3ff);
   156  
   157          .title {
   158            color: #fff;
   159          }
   160        }
   161      }
   162  
   163      .single-row {
   164        display: flex;
   165  
   166        .cell-cnt {
   167          padding: 0 1rem!important;
   168        }
   169  
   170        .description {
   171          font-family: 'Source Sans Pro', sans-serif;
   172          font-weight: 500;
   173          font-size: 22px;
   174          color: #1e252f;
   175          min-height: 50px;
   176          text-align: left;
   177          margin: auto;
   178          display: flex;
   179          align-items: center;
   180  
   181          .pricing-link {
   182            color: inherit;
   183            text-decoration: none;
   184            text-decoration: underline;
   185          }
   186  
   187          .sla-badge {
   188            background-color: #0237ae;
   189            color: #fff;
   190            font-size: 16px;
   191            font-weight: 500;
   192            padding: 2px 10px;
   193            border-radius: 3px;
   194            margin-right: 15px;
   195            display: inline-block;
   196          }
   197        }
   198  
   199        .cell {
   200          background: #fff;
   201          box-shadow: 0 0px 0px 0px white, 0 0px 0px 0px white, 12px 30px 30px -4px rgba(31, 73, 125, 0.1), -12px 30px 30px -4px rgba(31, 73, 125, 0.1);
   202          margin: auto;
   203          max-width: 180px;
   204          margin: auto;
   205          min-height: 50px;
   206          display: flex;
   207          justify-content: center;
   208          align-items: center; 
   209  
   210          .checkmark {
   211            width: 16px;
   212          }
   213  
   214          .sla {
   215            font-family: 'Source Sans Pro', sans-serif;
   216            font-weight: 500;
   217            font-size: 22px;
   218            color: #1e252f;
   219          }
   220  
   221          .footer-price {
   222            font-family: 'Source Sans Pro', sans-serif;
   223            color:#07a7fd;
   224            text-transform: uppercase;
   225            font-size: 16px;
   226            letter-spacing: 2px;
   227            font-weight: 800;
   228          }
   229        }
   230  
   231        .footer-cell {
   232          padding-top: 16px;
   233          padding-bottom: 16px;
   234          border-bottom-left-radius: 10px;
   235          border-bottom-right-radius: 10px;
   236          box-shadow: 0 5px 24px 0 rgba(22, 62, 122, 0.12);
   237        }
   238  
   239        .contact-cell {
   240          padding: 0;
   241  
   242          .footer-cell-contact {
   243            padding: 3rem 0;
   244            border-bottom: none;
   245            background: none;
   246            text-align: center;
   247  
   248            .btn-contact-pricing {
   249              font-size: 13px;
   250              height: 45px;
   251              letter-spacing: 2px;
   252              padding: 15px 18px;
   253            }
   254          }
   255        }
   256      }
   257  
   258      .mobile-pricing {
   259        .price-card {
   260          max-width: 350px;
   261          margin:auto;
   262          border-radius: 10px;
   263          box-shadow: 0 5px 24px 0 rgba(22, 62, 122, 0.12);
   264          background-color: #ffffff;
   265          margin-bottom: 40px;
   266  
   267          .title {
   268            padding-top: 10px;
   269            padding-bottom: 10px;
   270            display: flex;
   271            justify-content: space-between;
   272            border-bottom: 1px solid  #1e252f1c;
   273            font-weight: 800;
   274            text-transform: uppercase;
   275  
   276            .price-label {
   277              color: #07a7fd;
   278              margin-right: 20px;
   279            }
   280  
   281            .package-name {
   282              margin-left: 20px;
   283            }
   284          }
   285  
   286          .support-label {
   287            display: flex;
   288            justify-content: space-between;
   289            align-items: center;
   290            padding-top: 15px;
   291            padding-left:20px;
   292            padding: 15px 20px 0px 20px;
   293            align-items: center;
   294  
   295            .label-package-name {
   296              font-weight: 800;
   297              font-size: 18px;
   298              margin: 0;
   299            }
   300          }
   301  
   302          .sla-badge {
   303            .sla {
   304              background-color: #07a7fd;
   305              padding: 4px 6px;
   306              color: #fff;
   307              font-weight: 800;
   308              border-top-left-radius: 3px;
   309              border-bottom-left-radius: 3px;
   310            }
   311  
   312            .sla-dark {
   313              background-color: #0237ae;
   314              color: #fff;
   315              margin-left:20px;
   316            }
   317  
   318            .days {
   319              padding: 4px 6px;
   320              border: solid 1px #eaebeb;
   321              border-top-right-radius: 3px;
   322              border-bottom-right-radius: 3px;
   323            }
   324          } 
   325  
   326          .feature {
   327            border-bottom: 1px solid #1e252f1c;
   328            padding: 15px 20px;
   329            font-size: 18px;
   330            .pricing-link {
   331              color: inherit;
   332              text-decoration: none;
   333              text-decoration: underline;
   334            }
   335            img {
   336              width: 20px;
   337            } 
   338          }
   339  
   340          .footer-price-card {
   341            padding: 3rem 0;
   342            display: flex;
   343            justify-content: center;
   344            
   345            .btn-secondary {
   346              color: #07a7fd;
   347            }
   348          }
   349        }
   350      }
   351    }
   352  }
   353  
   354  .cell-cnt {
   355      padding: 0 !important;
   356      margin: 0 !important;
   357      border-bottom: 1px solid  #1e252f1c;
   358  }
   359  
   360  .borderless-cell {
   361      border: none !important;
   362  }
   363  
   364  .title-description {
   365    max-width: 900px;
   366    margin: auto;
   367    margin-bottom: 36px;
   368    line-height: 36px;
   369    span {
   370      font-family: 'Source Sans Pro', sans-serif;
   371      font-size: 26px;
   372      font-weight: 300; 
   373      letter-spacing: normal;
   374      text-align: center;
   375      color: #1e252f;
   376    }
   377  }
   378  
   379  @media all and (max-width: 992px) {
   380    .commercial-support {
   381      position: relative;
   382      .links {
   383        flex-wrap: wrap;
   384        a {
   385          margin-top: 15px;
   386        }
   387      }
   388      .support-options {
   389        .option {
   390          padding-right: 0;
   391          padding-left: 0;
   392        }
   393      }
   394      .subpage__header {
   395        .header-bg {
   396          .header-shapes-top {
   397            display: block;
   398            width: 100%;
   399            max-width: 100px;
   400            position: absolute;
   401            top: -30px;
   402            left: 150px;
   403          }
   404          .header-shapes-left {
   405            display: none;
   406          }
   407          .header-shapes-right {
   408            display: block;
   409            width: 100%;
   410            bottom: -42px;
   411            max-width: 80px;
   412          }
   413        }
   414        .subpage__hero {
   415          max-width: 100%;
   416          text-align: left;
   417          padding: 0 15px;
   418        }
   419      }
   420    }
   421    .commercial-support__page {
   422      hr {
   423        display: none;
   424      }
   425      .get-access-cmp {
   426        padding-top: 0;
   427        position: relative;
   428        .shapes-bottom {
   429          display: block;
   430          position: absolute;
   431          bottom: -50px;
   432          right: 10px;
   433          z-index: 1;
   434        }
   435        span {
   436          font-weight: 500;
   437          .shapes-left,.shapes-right {
   438            display: none;
   439          }
   440        }
   441      }
   442      .container-fluid {
   443        padding-left: 0;
   444        padding-right: 0;
   445      }
   446      .title-description {
   447        text-align: left;
   448      }
   449      .commercial-support__pricing {
   450        .pricing-shapes-top {
   451          max-width: 330px;
   452          margin: auto;
   453          display: flex;
   454        }
   455        .mobile-pricing {
   456          .price-card {
   457            .checkmark {
   458              margin-right: 5px;
   459            }
   460            .sla-badge {
   461              margin-top: 5px;
   462              margin-left: 10px;
   463            }
   464          }
   465        }
   466      }
   467    }
   468  }
   469  
   470  @media all and (max-width: 450px) {
   471    .commercial-support__page .commercial-support__pricing .mobile-pricing .price-card {
   472      max-width: 300px;
   473    }
   474  }
   475  
   476