暫無描述
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

style.scss 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. @import "abstracts/functions";
  2. @import "abstracts/mixins";
  3. @import "abstracts/variables";
  4. @import "base/base";
  5. @import "base/typography";
  6. @import "base/utilities";
  7. // components
  8. @import "components/button";
  9. // pages
  10. @import "pages/productOverview";
  11. @import "pages/productOverview/designedpro";
  12. @import "pages/productOverview/popupkeyboard";
  13. @import "pages/productOverview/dragondisplay";
  14. @import "pages/productOverview/lens";
  15. @import "pages/productOverview/professinalGrade";
  16. @import "pages/productOverview/stunningsound";
  17. @import "pages/productOverview/wifisection";
  18. @import "pages/productOverview/tablesection";
  19. @import "pages/productOverview/proConnectivity";
  20. @import "pages/productOverview/osPlusSoftware";
  21. @import "pages/productOverview/controlPanel";
  22. @import "pages/home";
  23. @import "pages/shopping-cart";
  24. @import "pages/allInOne";
  25. /*
  26. 0 - 600px: Phone
  27. 600 - 900px: Tablet portrait
  28. 900 - 1200px: Tablet landscape
  29. [1200 - 1800] is where our normal styles apply
  30. 1800px + : Big desktop
  31. $breakpoint arguement choices:
  32. - phone
  33. - tab-port
  34. - tab-land
  35. - big-desktop
  36. ORDER: Base + typography > general layout + grid > page layout > components
  37. 1em = 16px
  38. */
  39. /* Orbitron */
  40. @font-face {
  41. font-family: "Orbitron";
  42. src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
  43. font-weight: 400;
  44. font-style: normal;
  45. }
  46. @font-face {
  47. font-family: "Orbitron";
  48. src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
  49. font-weight: 500;
  50. font-style: normal;
  51. }
  52. @font-face {
  53. font-family: "Orbitron";
  54. src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
  55. font-weight: 600;
  56. font-style: normal;
  57. }
  58. @font-face {
  59. font-family: "Orbitron";
  60. src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
  61. font-weight: 700;
  62. font-style: normal;
  63. }
  64. /* Orbitron end */
  65. /* Satoshi */
  66. @font-face {
  67. font-family: "Satoshi";
  68. src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
  69. font-weight: 400;
  70. font-style: normal;
  71. }
  72. @font-face {
  73. font-family: "Satoshi";
  74. src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
  75. font-weight: 500;
  76. font-style: normal;
  77. }
  78. @font-face {
  79. font-family: "Satoshi";
  80. src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
  81. font-weight: 700;
  82. font-style: normal;
  83. }
  84. *,
  85. *::after,
  86. *::before {
  87. margin: 0;
  88. padding: 0;
  89. box-sizing: inherit;
  90. font-family: "Orbitron", sans-serif;
  91. }
  92. html {
  93. font-size: 100%;
  94. }
  95. body {
  96. box-sizing: border-box;
  97. overflow-x: hidden;
  98. }
  99. @media only screen and (max-width: 56.25em) {
  100. body {
  101. padding: 0;
  102. }
  103. }
  104. // html {
  105. // font-size: 100%; }
  106. // body {
  107. // box-sizing: border-box;
  108. // overflow-x: hidden;
  109. // }
  110. // @media only screen and (max-width: 56.25em) {
  111. // body {
  112. // padding: 0; }
  113. // }
  114. .bg-green {
  115. background-color: #3bb78f;
  116. background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
  117. }
  118. /* button */
  119. .button_dark {
  120. clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  121. padding-right: 1.7rem;
  122. padding-bottom: 0.6rem;
  123. padding-top: 0.6rem;
  124. border-radius: 10px;
  125. }
  126. // navbar
  127. .biz-nav-wrapper {
  128. .navbar-brand img {
  129. width: 150px;
  130. }
  131. }
  132. .navbar-nav .nav-item .nav-link {
  133. color: #000000;
  134. font-family: "Satoshi", sans-serif;
  135. }
  136. /* footer */
  137. .footer-wrapper {
  138. // background-color: rgb(0, 0, 0);
  139. background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
  140. background-size: cover;
  141. .footer-content-main-container {
  142. background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
  143. background-size: contain;
  144. background-position: right 30px;
  145. background-repeat: no-repeat;
  146. }
  147. .last-col-footer {
  148. width: 23%;
  149. }
  150. @media (min-width:1990px) {
  151. .footer-rkt {
  152. right: 45px !important;
  153. }
  154. }
  155. .footer-logo img {
  156. width: 120px;
  157. }
  158. li,
  159. .footer-sub-content p {
  160. line-height: 2rem;
  161. font-family: "Satoshi", sans-serif;
  162. }
  163. }