Welcome.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. #welcomeContainer {
  2. position: relative;
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. height: 100%;
  7. width: 100%;
  8. }
  9. #welcomeContent {
  10. display: flex;
  11. flex-direction: column;
  12. justify-content: center;
  13. align-items: center;
  14. width: 50%;
  15. top: -10%;
  16. position: relative;
  17. }
  18. #welcomeImageSeal {
  19. border-radius: 50%;
  20. border: 0.125rem solid #cad7e1;
  21. background: rgba(1, 2, 1, 0.5);
  22. height: 8rem;
  23. width: 8rem;
  24. box-shadow: 0 0 0.6rem 0 rgb(0, 0, 0);
  25. margin-bottom: 5%;
  26. margin-top: 10%;
  27. }
  28. #welcomeHeader {
  29. font-family: 'Avenir Medium';
  30. text-align: center;
  31. color: white;
  32. margin-bottom: 1.5rem;
  33. letter-spacing: 0.06rem;
  34. font-size: 1.25rem;
  35. text-shadow: white 0 0 0;
  36. }
  37. #welcomeDescription {
  38. text-align: justify;
  39. font-size: 0.8rem;
  40. font-weight: 100;
  41. text-shadow: rgba(255, 255, 255, 0.75) 0 0 1.25rem;
  42. }
  43. #welcomeDescCTA {
  44. text-align: center;
  45. font-size: 0.87rem;
  46. font-weight: 100;
  47. text-shadow: rgba(255, 255, 255, 0.75) 0 0 1.25rem;
  48. }
  49. /* Login button styles. */
  50. #welcomeButton {
  51. background: none;
  52. font-weight: bold;
  53. letter-spacing: 0.125rem;
  54. border: none;
  55. padding: 0.9rem 0.3rem;
  56. margin: 0.625rem 0;
  57. cursor: pointer;
  58. position: relative;
  59. right: -1.25rem;
  60. transition: 0.5s ease;
  61. margin-top: 5%;
  62. margin-bottom: -5%;
  63. font-size: 0.87rem;
  64. }
  65. #welcomeButton:disabled {
  66. color: rgba(255, 255, 255, 0.75);
  67. pointer-events: none;
  68. }
  69. #welcomeButton:hover,
  70. #welcomeButton:focus {
  71. text-shadow: 0 0 1.25rem #fff;
  72. outline: none;
  73. }
  74. #welcomeButton:active {
  75. color: #c7c7c7;
  76. text-shadow: 0 0 1.25rem #c7c7c7;
  77. }
  78. #welcomeSVG {
  79. -webkit-transform: translate3d(0, 0, 0);
  80. overflow: visible;
  81. transform: rotate(90deg);
  82. margin-left: 1.25rem;
  83. transition: 0.25s ease;
  84. width: 1.25rem;
  85. height: 1.25rem;
  86. }
  87. #welcomeButton:hover #welcomeSVG,
  88. #welcomeButton:focus #welcomeSVG {
  89. filter: drop-shadow(0 0 0.125rem #fff);
  90. -webkit-filter: drop-shadow(0 0 0.125rem #fff);
  91. }
  92. #welcomeButton:active #welcomeSVG .arrowLine {
  93. stroke: #c7c7c7;
  94. }
  95. #welcomeButton:active #welcomeSVG {
  96. filter: drop-shadow(0 0 0.125rem #c7c7c7);
  97. -webkit-filter: drop-shadow(0 0 0.125rem #c7c7c7);
  98. }
  99. #welcomeButton:disabled #welcomeSVG .arrowLine {
  100. stroke: rgba(255, 255, 255, 0.75);
  101. }
  102. #welcomeButtonContent {
  103. display: flex;
  104. align-items: center;
  105. }