svrjs-website/themes/svrjswebsite/source/css/index-page.css

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 400 version
*/

.comparison-table-container {
  width: 100%;  /* For NetSurf 3.6 */
  max-width: 1152px;
  margin: 0 auto;
}

.comparison-table {
  width: 100%;
  table-layout: auto;
}

.comparison-table tr td,
.comparison-table tr th {
  padding-top: 0.225em;
  padding-bottom: 0.225em;
  width: 16.66666666666666666666666666%;
}

.comparison-table-feature {
  background-color: #00b000;
  color: #ffffff;
  font-weight: bold;
}

tr.comparison-table-mobile-feature {
  display: none;
}

tr.comparison-table-mobile-feature td {
  background-color: #00b000;
  border-left: #00b000 solid 0.3125em;
  color: #ffffff;
  font-weight: bold;
  padding: 0.225em;
  padding-left: 0.06875em;
}

.translated-rtl tr.comparison-table-mobile-feature td {
  padding-left: 0.225em;
  padding-right: 0.06875em;
  border-left: none;
  border-right: #00b000 solid 0.3125em;
}

.comparison-table tr td:nth-child(2n+3) {
  background-color: #dfffdf
}

.comparison-table-yes {
  background-color: #00ff00;
  color: #000000;
}

.comparison-table tr td.comparison-table-yes:nth-child(2n+3) {
  background-color: #60ff60;
  color: #000000;
}

.comparison-table-no {
  background-color: #ff0000;
  color: #ffffff;
}

.comparison-table tr td.comparison-table-no:nth-child(2n+3) {
  background-color: #ff6060;
  color: #ffffff;
}

.comparison-table-sus {
  background-color: #ffff00;
  color: #000000;
}

.comparison-table tr td.comparison-table-sus:nth-child(2n+3) {
  background-color: #ffff60;
  color: #000000;
}

.comparison-table tr th.comparison-table-myproduct,
.comparison-table tr td.comparison-table-myproduct {
  border-left: #007000 solid 0.3125em;
  border-right: #007000 solid 0.3125em;
  padding-left: 0.15625em;
  padding-right: 0.15625em;
}

.comparison-table tr:last-child td.comparison-table-myproduct {
  border-bottom: #007000 solid 0.3125em;
  padding-bottom: 0.3125em;
}

.hero {
  background-image: url("/img/hero-image.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  -webkit-background-size: 50% 50%;
  -moz-background-size: 50%;
  -o-background-size: 50%;
  background-size: 50%;
  background-attachment: fixed;
  background-color: #9aff9a;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
  font-size: 16px;  /*So hero image wouldn't break*/
  display: block;
}

.translated-rtl .hero {
  background-position: left top;
}

.hero-content-column {
  background-color: #9aff9a;
  width: 50%;
}

.hero-content {
  padding: 2.5em 2.85em;  
}  

.hero-description {
  min-height: 20.35em;
}

.hero h1 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  font-size: 3.115em;
  line-height: 1.15em;
  margin: 0;
}

.hero p {
  font-size: 1.235em;
  padding: 1.25em 0 1.1em 0;
  margin: 0;
  line-height: 1.165em;
}

.download-container {
  display: block;
}

.maindownloads {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.otherdls {
  margin-top: 0.425em;
  font-size: 0.8965em;
  line-height: 1.35em;
}

.promo-point-clearfix {
  content: "";
  display: table;
  clear: both
}

.promo-point-subcontainer {
  width: 25%;
  float: left;
  margin-left: -1px;
  /*padding: 0.5em 0;*/
  text-align: center;
}

.promo-point {
  margin: 0.5em;
  margin-top: 0;
  margin-bottom: 1.15em;
  background-color: #ffffff;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}

.translated-rtl .promo-point-subcontainer {
  float: right;
}

.promo-image {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
  max-width: 320px;
}

.promo-text {
  text-align: left;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.translated-rtl .promo-text {
  text-align: right;
}

.index-section-even h2,
.index-section-odd h2 {
  text-align: center;
  text-transform: uppercase;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 0.35em;
  padding: 0.5em 0 0 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /*Doesn't use word-break: break-all fallback*/
  word-break: break-word;
}

.index-section-even h3,
.index-section-odd h3 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

.index-section-even h4,
.index-section-odd h4 {
  font-size: 1.17em;
  margin: 1em 0;
}

.index-section-even h5,
.index-section-odd h5 {
  font-size: 1em;
  margin: 1.33em 0;
}

.index-section-even h6,
.index-section-odd h6 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

.index-section-even,
.index-section-odd {
  padding: 0 0.5em;
  display: block;
}

.index-section-even:nth-child(n+5),
.index-section-odd {
  -webkit-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.175);
  -moz-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.175);
  box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.175);
}

.index-section-even,
.index-section-odd {
  padding-bottom: 0.8em;
}

.index-section-odd p:last-child,
.index-section-even p:last-child {
  margin-bottom: 0;
  padding-bottom: 0.2em;
}

.index-section-odd {
  background-color: #c5ffc5;
}

.section-videos {
  text-align: center;
}

.section-container, .section-videos, .promo-point-container {
  width: 100%;  /* For NetSurf 3.6 */
  max-width: 1280px;
  margin: 0 auto;
}

.promo-point-container {
  max-width: 1440px;
}

.section-videos video {
  width: 100%;
  max-width: 800px;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.225);
  -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.225);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.225);
}

.download-separator {
  font-size: 0.75em;
}

.command-tab {
  display: inline;
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  background-color: #00b000;
  font-size: 0.95em;
  padding: 0.2em 0.5em;
  margin-right: 0.5em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.command-tab.command-tab-selected {
  color: #007000;
  background-color: #ffffff;
}

.command-tab:hover {
  background-color: #007000;
  text-decoration: none;
}

.command-tab.command-tab-selected:hover {
  color: #007000;
  background-color: #ffffff;
}

#command-tab-tabcontainer {
  width: 100%;
  max-width: 480px;
  text-align: left;
  position: relative;
  z-index: 1;
}

#command-tab-container {
  background-color: #dfffdf;
  color: #000000;
  width: 100%;
  max-width: 480px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
}

#command-tab-container .maindownloads {
  padding: 0.5em;
}

#command-tab-command {
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  text-align: left;
  white-space: nowrap;
  padding: 0.5em 0.65em;
  font-size: 1em;
}

#command-tab-copy {
  display: inline;
  float: right;
  padding: 0.25em 0.4em;
  cursor: pointer;
}

#command-tab-h {
  font-size: 0.88em;
  padding: 0.35em 0.6em;
  padding-bottom: 0;
  font-weight: bold;
  text-align: left;
}

.command-tab-clearfix {
  content: "";
  display: table;
  clear: both
}

/*CSS hacks for Webp support check*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
  @supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
    .hero {
      background-image: url('/img/hero-image.webp');
    }
  }
}

@supports (flex-basis: max-content) {
  .hero {
    background-image: url('/img/hero-image.webp');
  }
}

@supports selector(:nth-child) {
  .hero {
    background-image: url('/img/hero-image.webp');
  }
}

@media screen and (prefers-color-scheme: dark) {
  .dummy {}
  .hero {
    background-color: #006f00;
    -webkit-box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
    -moz-box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
    box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
  }

  .hero .otherdls a,
  .hero .hero-description a {
    color: #ffffff;
    text-decoration: underline;
  }

  .hero .otherdls a:hover,
  .hero .hero-description a:hover {
    color: #00ff00;
  }

  .hero-content-column {
    background-color: #006f00;
  }
  
  .index-section-even:nth-child(n+5),
  .index-section-odd {
    -webkit-box-shadow: 0 -3px 6px 0 rgba(127, 127, 127, 0.175);
    -moz-box-shadow: 0 -3px 6px 0 rgba(127, 127, 127, 0.175);
    box-shadow: 0 -3px 6px 0 rgba(127, 127, 127, 0.175);
  }

  .index-section-odd {
    background-color: #003a00;
  }

  .promo-point {
    background-color: #000f00;
    -webkit-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
    -moz-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
    box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
  }

  .section-videos video {
    -webkit-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.225);
    -moz-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.225);
    box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.225);
  }
  
  .comparison-table tr td:nth-child(2n+3) {
    background-color: #002000
  }

  .comparison-table tr td.comparison-table-yes:nth-child(2n+3) {
    background-color: #009f00;
    color: #ffffff;
  }

  .comparison-table tr td.comparison-table-no:nth-child(2n+3) {
    background-color: #9f0000;
    color: #ffffff;
  }

  .comparison-table tr td.comparison-table-sus:nth-child(2n+3) {
    background-color: #c0c000;
    color: #ffffff;
  }

  .command-tab {
    background-color: #00b000;
    -webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
    -moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
    box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
  }

  .command-tab:hover {
    background-color: #00d000;
    color: #ffffff;
  }

  .command-tab.command-tab-selected:hover {
    color: #007000;
    background-color: #ffffff;
  }

  #command-tab-container {
    background-color: #002000;
    color: #ffffff;
    -webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
    -moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
    box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
  }
}

@media screen and (min-width: 1800px) {
  .hero {
    background-image: url("/img/hero-image-big.jpg");
  }
  
  /*CSS hacks for Webp support check*/
  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
    @supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
      .hero {
        background-image: url('/img/hero-image-big.webp');
      }
    }
  }
  
  @supports (flex-basis: max-content) {
    .hero {
      background-image: url('/img/hero-image-big.webp');
    }
  }
  
  @supports selector(:nth-child) {
    .hero {
      background-image: url('/img/hero-image-big.webp');
    }
  }
}

@media screen and (max-width: 1600px) {
  .hero-description {
    min-height: 23.65em;
  }
}

@media screen and (max-width: 1440px) {
  .hero-description {
    min-height: 24.25em;
  }
}

@media screen and (max-width: 1000px) {
  .hero {
    background-image: url("/img/hero-image-small.jpg");
    background-color: #006f00;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    color: #ffffff;
    padding: 3em;
    font-size: 1em;
  }

  .hero .otherdls a,
  .hero .hero-description a {
    color: #ffffff;
    text-decoration: underline;
  }

  .hero .otherdls a:hover,
  .hero .hero-description a:hover {
    color: #00ff00;
  }

  .hero .styled-button {
    background-color: #00b000;
    -webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
    -moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
    box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
  }

  .hero .styled-button:hover {
    background-color: #00d000;
    color: #ffffff;
  }
  
  .hero .styled-button.styled-button-disabled, .hero .styled-button.styled-button-disabled:hover {
    background-color: #808080;
  }

  .hero-content-column {
    width: 100%;
    background: none;
  }
  
  .hero-content {
    padding: 0;
    text-align: center;
  }

  .hero-description {
    min-height: 0px;
  }
  
  #command-tab-container, #command-tab-tabcontainer {
    margin: auto;
  }

  /*CSS hacks for Webp support check*/
  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
    @supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
      .hero {
        background-image: url('/img/hero-image-small.webp');
      }
    }
  }
  
  @supports (flex-basis: max-content) {
    .hero {
      background-image: url('/img/hero-image-small.webp');
    }
  }
  
  @supports selector(:nth-child) {
    .hero {
      background-image: url('/img/hero-image-small.webp');
    }
  }
}

@media screen and (max-width: 890px) {
  .promo-point-subcontainer {
    width: 50%;
  }

  .promo-point-clearfix-halfway {
    content: "";
    display: table;
    clear: both
  }
}

@media screen and (max-width: 480px) {
  .promo-point-subcontainer {
    width: 100%;
    float: none;
  }
  
  .promo-point-clearfix-halfway, .promo-point-clearfix {
    display:none;
  }

  .hero {
    padding: 2.5em;
  }

  .hero h1 {
    font-size: 3.05em;
  }

  .comparison-table tr td,
  .comparison-table tr th {
    width: 20%;
  }

  .comparison-table-feature,
  .comparison-table-blank {
    display: none;
  }

  tr.comparison-table-mobile-feature {
    display: table-row;
  }
}

@media screen and (max-width: 350px) {
  .hero {
    padding: 2.0em;
  }
}