ArcadeIntelligence/tailwind.css at main · aaayushh7/ArcadeIntelligence · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* #region  /**=========== Colors use modifiy opacity  =========== */
  --content: 222, 227, 234; /* #dee3ea */
  --divider: 30, 45, 61; /* #1E2D3D */
  --base-100: 20, 20, 20; /* #141414 */
  --base-200: 1, 8, 14; /* #01080E */
  --base-gray: 80, 80, 80; /* #505050 */
  --primary: 47, 74, 272; /* #5942e9 */
  --primary-hover: 64, 41, 209; /* #4029d1 */
  --primary-disable: 119, 101, 237; /* #7765ed */
  --white: 256, 256, 256; /* #ffffff */
  /* #endregion  /**======== Colors use modifiy opacity  =========== */

  /* #region  /**=========== Colors with opacity 100 =========== */
  --clr-content: rgb(var(--content));
  --clr-divider: rgb(var(--divider));
  --clr-base-100: rgb(var(--base-100));
  --clr-base-200: rgb(var(--base-200));
  --clr-base-gray: rgb(var(--base-gray));
  --clr-primary: rgb(var(--primary));
  --clr-primary-hover: rgb(var(--primary-hover));
  --clr-primary-disable: rgb(var(--primary-disable));
  /* #endregion  /**======== Colors with opacity 100 =========== */
}

html {
  scroll-behavior: smooth;
}

::-moz-selection {
  color: rgb(var(--primary));
  background: rgb(var(--content));
}

::selection {
  color: rgb(var(--primary));
  background: rgb(var(--content));
}

@layer base {
  body {
    background: #141414;
    @apply scroll-pt-16 scroll-smooth md:scroll-pt-28;
  }
  /* #region  /**=========== Typography =========== */

  .h0 {
    @apply font-sans text-3xl font-semibold text-content md:text-5xl;
  }

  h1,
  .h1 {
    @apply font-sans text-3xl font-semibold leading-relaxed text-content md:text-4xl lg:text-5xl;
  }

  h2,
  .h2 {
    @apply font-sans text-xl font-semibold text-content md:text-3xl;
  }

  h3,
  .h3 {
    @apply font-sans text-lg font-semibold text-content md:text-xl;
  }

  h4,
  .h4 {
    @apply font-sans text-base font-semibold text-content md:text-lg;
  }

  body,
  .p {
    @apply font-sans text-sm font-medium text-content md:text-base;
  }

  .heading {
    @apply text-center font-sans text-4xl font-black leading-relaxed text-content md:text-5xl lg:text-8xl;
  }

  .heading.heading-md {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  /* #endregion  /**======== Typography =========== */

  img {
    min-width: 0; /* prevent flex items from overflowing horizontally */
    min-height: 0; /* prevent flex items from overflowing vertically */
  }

  .layout {
    /* 1280px */
    max-width: 80rem;
    @apply mx-auto w-11/12;
  }

  /* Class to adjust with sticky footer */
  .min-h-main {
    @apply min-h-[calc(100vh-56px)];
  }
  body::-webkit-scrollbar {
    height: 6px;
    width: 6px;
    background-color: var(--clr-base-100);
  }

  body::-webkit-scrollbar-thumb {
    background-color: #ffffff50;
  }
}
@layer utilities {
  /* Class to highlight the text */
  .highlight {
    @apply text-primary;
  }
  /* Darker highlight can be used on light background */
  .highlight.highlight--dark {
    @apply text-primary-hover;
  }
  /* Light highlight can be used on Dark background */
  .highlight.highlight--light {
    @apply text-primary-disable;
  }
  .highlight.highlight--white {
    @apply text-white;
  }
  .highlight.highlight--yellow {
    @apply text-yellow-400;
  }
  .highlight.highlight--gradient {
    @apply bg-gradient-to-br from-pink-500 to-blue-500 bg-clip-text font-semibold text-transparent;
  }
  .styled-hr {
    @apply h-2 w-32 rounded-full border-none bg-primary;
  }
  .styled-hr.styled-hr--light {
    @apply h-1 bg-content/30;
  }
  .styled-hr.styled-hr--dark {
    @apply h-1 bg-base-100/50;
  }
}

.main section:nth-child(odd) {
  background: var(--clr-base-100);
}
.main section:nth-child(even) {
  background-image: linear-gradient(
    to bottom right,
    var(--clr-base-100),
    hsla(240, 59%, 32%, 0.803)
  );
}
.main section:first-child {
  background: transparent;
}