light.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. body {
  2. font-family: 'Montserrat', sans-serif;
  3. margin: 0;
  4. background: #1a1c1f;
  5. color: #f6f6f6;
  6. }
  7. nav {
  8. display: flex;
  9. justify-content: space-between;
  10. align-items: center;
  11. background: #131416;
  12. padding: 1rem 2rem;
  13. position: sticky;
  14. top: 0;
  15. z-index: 100;
  16. }
  17. .logo {
  18. display: flex;
  19. align-items: center;
  20. }
  21. .logo img {
  22. width: 36px;
  23. height: 36px;
  24. margin-right: 10px;
  25. border-radius: 8px;
  26. box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  27. image-rendering: pixelated;
  28. filter: invert(0.8);
  29. }
  30. .logo span {
  31. font-size: 1.5rem;
  32. font-weight: 700;
  33. letter-spacing: 1px;
  34. color: #ff9300;
  35. }
  36. .download-btn {
  37. background: #ff9300;
  38. color: #1a1c1f;
  39. padding: 0.6rem 1.2rem;
  40. border-radius: 30px;
  41. text-decoration: none;
  42. font-weight: bold;
  43. transition: background 0.2s;
  44. }
  45. .download-btn:hover, .cta-btn:hover {
  46. background: #ffb347;
  47. color: #1a1c1f;
  48. }
  49. header {
  50. display: flex;
  51. flex-wrap: wrap;
  52. align-items: center;
  53. justify-content: center;
  54. padding: 4rem 2rem 2rem 2rem;
  55. background: linear-gradient(90deg, #ff9300 0%, #ffb347 100%);
  56. color: #1a1c1f;
  57. }
  58. .header-content {
  59. max-width: 500px;
  60. }
  61. header h1 {
  62. font-size: 2.5rem;
  63. margin: 0 0 1rem 0;
  64. }
  65. header p {
  66. font-size: 1.25rem;
  67. margin-bottom: 2rem;
  68. }
  69. .cta-btn {
  70. background: #1a1c1f;
  71. color: #ff9300;
  72. padding: 0.8rem 2rem;
  73. border-radius: 30px;
  74. text-decoration: none;
  75. font-size: 1.1rem;
  76. font-weight: bold;
  77. box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  78. transition: background 0.2s, color 0.2s;
  79. }
  80. .device-img {
  81. width: 260px;
  82. max-width: 90vw;
  83. margin-left: 2rem;
  84. border-radius: 30px;
  85. box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  86. }
  87. section {
  88. padding: 2.5rem 1rem 0 1rem;
  89. max-width: 820px;
  90. margin: auto;
  91. }
  92. section h2 {
  93. color: #ff9300;
  94. font-size: 2rem;
  95. margin-bottom: 1rem;
  96. }
  97. ul, ol {
  98. font-size: 1.15rem;
  99. line-height: 1.75;
  100. margin-left: 1.5rem;
  101. margin-bottom: 1rem;
  102. }
  103. .download-link, .source-link {
  104. display: inline-block;
  105. margin: 0.5rem 0;
  106. font-weight: bold;
  107. color: #ff9300;
  108. text-decoration: none;
  109. border-bottom: 2px solid #ff9300;
  110. transition: color 0.2s;
  111. }
  112. .download-link:hover, .source-link:hover {
  113. color: #ffb347;
  114. border-color: #ffb347;
  115. }
  116. footer {
  117. text-align: center;
  118. padding: 2rem 1rem;
  119. color: #ff9300;
  120. background: #131416;
  121. margin-top: 2rem;
  122. font-size: 1rem;
  123. }
  124. @media (max-width: 700px) {
  125. header {
  126. flex-direction: column;
  127. text-align: center;
  128. padding: 2rem 1rem;
  129. }
  130. .device-img {
  131. margin: 2rem 0 0 0;
  132. width: 80vw;
  133. }
  134. }