docs/overrides/assets/stylesheets/home.css

   1 .hero {
   2   padding: 32px 2.8rem;
   3   color: var(--md-primary-bg-color);
   4   background: linear-gradient(
   5     to bottom,
   6     var(--md-primary-fg-color),
   7     hsla(160deg, 47%, 55%, 1) 99%,
   8     #fff 99%
   9   );
  10 }
  11
  12 .hero-container {
  13   display: flex;
  14   flex-direction: row;
  15   align-items: center;
  16   justify-content: space-between;
  17   padding: 1rem 0;
  18 }
  19
  20 .hero-content {
  21   flex: 0 0 40%;
  22 }
  23
  24 .hero-title {
  25   height: 4rem;
  26   display: flex;
  27   flex-direction: row;
  28   align-items: center;
  29 }
  30
  31 .hero-title > img {
  32   max-height: 100%;
  33   width: auto;
  34 }
  35
  36 .hero-title > h1 {
  37   margin: 0 0 0 0.5rem;
  38   font-size: 4rem;
  39   line-height: 1;
  40   color: currentColor;
  41   font-weight: 700;
  42 }
  43
  44 .hero-image {
  45   width: 17rem;
  46   height: auto;
  47   flex: 0 0 50%;
  48   transform: perspective(300px) rotate3D(0, 1, 0, -5deg);
  49   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  50 }
  51
  52 .hero .md-button {
  53   margin-top: 0.5rem;
  54   margin-right: 0.5rem;
  55   color: var(--md-primary-bg-color);
  56 }
  57
  58 .hero .md-button-primary {
  59   background-color: var(--md-primary-bg-color);
  60   color: hsla(280deg, 37%, 48%, 1);
  61   border-color: var(--md-primary-bg-color);
  62 }
  63
  64 .hero .md-button:focus,
  65 .hero .md-button:hover {
  66   background-color: var(--md-accent-fg-color);
  67   color: var(--md-default-bg-color);
  68   border-color: var(--md-accent-fg-color);
  69 }
  70
  71 .md-header {
  72   position: initial;
  73 }
  74
  75 .md-main__inner {
  76   margin: 0;
  77 }
  78
  79 .md-content {
  80   display: none;
  81 }