landing.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. .tx-container {
  2. background:
  3. linear-gradient(to bottom, var(--md-primary-fg-color), #2196f3 100%, var(--md-default-bg-color) 100%)
  4. }
  5. [data-md-color-scheme=slate] .tx-container {
  6. background:
  7. linear-gradient(to bottom, var(--md-primary-fg-color), #2196f3 100%, var(--md-default-bg-color) 100%)
  8. }
  9. .tx-landing {
  10. margin: 0 .8rem;
  11. color: var(--md-primary-bg-color)
  12. }
  13. .tx-landing h1 {
  14. margin-bottom: 1rem;
  15. color: currentColor;
  16. font-weight: 700
  17. }
  18. @media screen and (max-width: 30em) {
  19. .tx-landing h1 {
  20. font-size: 1.4rem
  21. }
  22. }
  23. .tx-landing__content p a {
  24. color: inherit;
  25. text-decoration: underline;
  26. }
  27. .tx-landing__testimonials {
  28. width: 100%;
  29. text-align: center;
  30. }
  31. .tx-landing__content p a:hover {
  32. color: darkblue;
  33. text-decoration: underline;
  34. }
  35. .tx-landing__logos {
  36. display: flex;
  37. flex-direction: row;
  38. flex-wrap: wrap;
  39. justify-content: center;
  40. }
  41. .tx-landing__logos img {
  42. height: 8vh;
  43. max-height: 81px; /* max height of images */
  44. width: auto;
  45. margin: 2vh;
  46. vertical-align: middle;
  47. }
  48. .tx-landing__quotes {
  49. padding-bottom: 5em;
  50. text-align: center;
  51. }
  52. @media screen and (min-width: 60em) {
  53. .tx-landing__quotes {
  54. margin: 1em 5em;
  55. }
  56. }
  57. .tx-landing__quotes figure {
  58. margin: 2em auto 2em auto;
  59. }
  60. .tx-landing__quote {
  61. display: flex;
  62. border-radius: 1em;
  63. padding: 1em 1em 0 1em;
  64. background: var(--md-primary-fg-color);
  65. }
  66. .tx-landing__quote blockquote {
  67. border: 0;
  68. color: #fff;
  69. }
  70. .tx-landing__quote a img {
  71. height: 6vh;
  72. max-height: 81px; /* max height of images */
  73. display: block;
  74. margin-left: auto;
  75. margin-right: auto;
  76. }
  77. @media screen and (min-width: 60em) {
  78. .tx-container {
  79. padding-bottom: 14vw
  80. }
  81. .tx-landing {
  82. display: flex;
  83. align-items: stretch
  84. }
  85. .tx-landing__content {
  86. max-width: 24rem;
  87. margin-top: 3.5rem;
  88. }
  89. .tx-landing__image {
  90. order: 1;
  91. width: 38rem;
  92. transform: translateX(4rem)
  93. }
  94. }
  95. @media screen and (min-width: 77em) {
  96. .tx-landing__image {
  97. transform: translateX(8rem)
  98. }
  99. }
  100. .tx-landing .md-button {
  101. margin-top: .5rem;
  102. margin-right: .5rem;
  103. color: var(--md-primary-bg-color)
  104. }
  105. .tx-landing .md-button:hover, .tx-landing .md-button:focus {
  106. color: var(--md-default-bg-color);
  107. background-color: #8bc34a;
  108. border-color: #8bc34a
  109. }
  110. .md-typeset lottie-player {
  111. max-width: 100%;
  112. height: auto;
  113. }
  114. .md-announce a {
  115. color: var(--md-primary-bg-color);
  116. }
  117. .md-banner a {
  118. color: var(--md-primary-bg-color);
  119. }