style.css

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@keyframes appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

 *,
 *:before,
 *:after {
    box-sizing: border-box;
    border: 0;
 }
 
 body {
   padding: 0;
   margin: 0;
   background-color: white;
   font-family: adobe-clean, sans-serif;
   font-weight: 300;
   font-size: 1.125rem;
   line-height: 1.5em;
 }
 
 .default {
   padding: 1rem 2rem;
 }
 
 .image {
   padding: 0;
   margin: 0;
   font-size: 0;
 }
 
 .image img {
   width: 100%;
 }
 
 .default img {
   max-width: 100%;
 }
 
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.25em;
   margin: 0.25em 0;
 }
 
 h1 {
   font-size: 28px;
 }
 
 h2 {
   font-size: 24px;
 }
 
 
 h3 {
   font-size: 20px;
 }
 
 h4, h5, h6 {
   font-size: 16px;
 }
 
 .detail-m, .detail-l, .detail-xl {
   margin: 0.5em 0;
   line-height: 1.5em;
 }
 
 .detail-m {
   font-size: 12px;
 }
 
 .detail-l {
   font-size: 14px;
 }
 
 .detail-xl {
   font-size: 16px;
 }
 
 p, .body-l, .body-m, .body-xl {
   margin: 0.5em 0;
   line-height: 1.5em;
 }
 
 p, .body-xl {
   font-size: 20px; 
 }
 
 .body-l {
   font-size: 18px; 
 }
 
 .body-m {
   font-size: 16px; 
 }
 
 
 a {
   color: #2c6d9f;
   text-decoration: underline;
 }
 
 pre {
   background-color: lightgrey;
   padding: 1em;
   border-radius: 1em;
   overflow: hidden;
 }
 
 code {
   font-size: 1.1em;
 }
 
 h3 code {
   font-size: 1em;
   font-family: inherit;
   background-color: lightgrey;
 }
 
 p code,li code {
   background-color: lightgrey;
   padding: 0 2px;
 }
 
 table th, table td {
   border: 1px solid #dfe2e5;
   padding: 6px 13px;
 }
 
 table tr:nth-child(2n) {
   background-color: #f6f8fa;
 }
 
 table th {
   font-weight: 600;
 }
 
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 header,
 header h5,
 footer,
 footer h5 {
   font-family: adobe-clean,sans-serif;
 }
 
 header a:any-link,
 footer a:any-link {
   text-decoration: none;
 }
 
 header:empty, footer:empty {
   display: none;
 }
 
 a.learn-more::before {
   content: "Learn more >"
 }
 
 a.action {
   width: fit-content;
   border-radius: 22px;
   font-size:1rem;
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
   padding: 4px 16px;
   cursor: pointer;
 }
 
 a.action:disabled {
   border: none;
   color: #bcbcbc;
 }
 
 a.action.primary {
   border: solid #505050 3px;
   color: #505050;
 }
 
 a.action.primary:hover {
   color: white;
   background-color: #505050;
 }
 
 a.action.primary:active {
   color: white;
   background-color: #323232;
 }
 
 a.action.secondary {
   color: #747474;
   border: solid currentColor 2px;
 }
 
 a.action.secondary:hover {
   color: white;
   background-color: #747474;
 }
 
 a.action.secondary:active {
   color: white;
   background-color: #505050;
 }
 
 a.action.quiet {
   color: #747474;
 }
 
 a.action.quiet:hover {
   color: #505050;
 }

 a.action.call-to-action {
   border: solid #1673e6 3px;
   color: white;
   background-color: #1673e6;
 }
 
 a.action.call-to-action:hover {
   color: white;
   background-color: #0e65d0;
 }
 
 a.action.call-to-action:active {
   color: white;
   background-color: #095abb;
 }
 
 a.load-more {
   margin: 0 auto 2rem auto;
 }
 
 a.action.load-more::before {
   content: "Load more articles"
 }
 
 .articles {
   background-color: #eaeaea;
   text-align: center;
   padding: 0 0 80px 0;
 }
 
 .articles-empty {
   width: 100%;
   margin-bottom: 48px;
   text-align: middle;
 }
 
 .articles-empty::before {
   content: "No articles found";
   display: inline;
   margin: 0 auto;
 }
 
 .deck {
   margin: 0 auto;
   padding: 48px 32px 0 32px;
   min-width: 300px;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
 }
 
 .card {
   width: 100%;
   min-width: 220px;
   max-width: 379px;
   margin-bottom: 24px;
   border-radius: 4px;
   border: solid 1px #eaeaea;
   box-sizing: border-box;
   text-align: left;
   display: inline-block;
   animation: appear 800ms;
 }
 
 .card .hero {
   width: 100%;
   padding-bottom: 66.67%; /* 3:2 aspect ratio */
   position: relative;
   background-color: #eaeaea;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
 
 .card .hero img {
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
 
 .card .hero:hover {
   background-color: black;
 }
 
 .card .hero img:hover {
   opacity: 0.6;
 }
 
 .card .hero img[src="#"] {
   /* hide if hero image missing */
   visibility: hidden;
 }
 
 .card a {
   text-decoration: none;
   color: currentColor;
 }
 
 .card .content {
   position: relative;
   padding: 2rem;
   background-color: white;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
 .card .content p {
   margin: 0;
   font-size: 0.875rem;
 }
 
 .card p.topic,
 .card p.date {
   color: #707070;
   font-size: 0.75rem;
   line-height: 1rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-weight: 600;
 }
 
 .card p.topic {
   margin-bottom: 0.5rem;
 }
 
 .card h2 {
   margin: 0;
   font-size: 1rem;
   line-height: 1.25rem;
   font-weight: 700;
   color: #2c2c2c;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
 
 .card p.teaser {
   color: #747474;
   font-size: 0.875rem;
   line-height: 1.25rem;
   height: 2.5rem;
   overflow: hidden;
   margin-bottom: 1rem;
   text-overflow: ellipsis;
   display: none;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
 .card p.date {
   display: none;
 }
 
 .hide {
   display: none;
 }
 
 @media (min-width:600px) {
 
   h1 {
     font-size: 36px;
   }
   
   h2 {
     font-size: 28px;
   }
   
   h3 {
     font-size: 24px;
   }
   
   h4 {
     font-size: 20px;
   }
   
   h5, h6 {
     font-size: 16px;
   }
 
   body {
     font-size: 1.25rem;
   }
 
   .deck {
     padding-left:64px;
     padding-right:64px;
     max-width: 912px;
   }
 
   .card {
     width: calc(100%/2 - 16px);
     margin-right: 32px;
     margin-bottom: 32px;
   }
 
   .card:nth-of-type(2n) {
     margin-right: 0;
   }
 
   .card a:hover {
     text-decoration: underline;
   }
 
   .card .content {
     box-sizing: content-box;
     height: 168px;
   }
 
   .card p.date {
     position: absolute;
     bottom: 2rem;
   }
 
   .card h2 {
     font-size: 1.25rem;
     line-height: 1.5rem;
     margin-bottom: 0.5rem;
   }
 
   .card p.teaser {
     display: -webkit-box;
   }
 
   .card p.date {
     display: block;
   }
 
 }
 
 @media (min-width:1100px) {
 
   .deck {
     max-width: 1200px;
     padding-left: 32px;
     padding-right: 32px;
   }
 
   .card {
     width: calc(100%/3 - 22px);
   }
 
   .card:nth-of-type(2n) {
     margin-right: 32px;
   }
 
   .card:nth-of-type(3n) {
     margin-right: 0;
   }
 
 }
 
 /*
  * Workaround to hide duplicate AdChoices link.
  * See https://github.com/adobe/theblog/issues/141
  */
 div.evidon-notice-link {
   display:none;
 }