/ style.css
style.css
1 @font-face { 2 font-family: 'Inter'; 3 font-style: normal; 4 font-weight: 400; 5 font-display: swap; 6 src: url("fonts/Inter-Regular.woff2?v=3.19") format("woff2"), 7 url("fonts/Inter-Regular.woff?v=3.19") format("woff"); 8 } 9 10 @font-face { 11 font-family: 'Inter'; 12 font-style: normal; 13 font-weight: 700; 14 font-display: swap; 15 src: url("fonts/Inter-Bold.woff2?v=3.19") format("woff2"), 16 url("fonts/Inter-Bold.woff?v=3.19") format("woff"); 17 } 18 19 @font-face { 20 font-family: 'HappyTimes'; 21 font-style: normal; 22 font-weight: 400; 23 font-display: swap; 24 src: url("fonts/happy-times-NG_regular_master_web.woff2?v=3.19") format("woff2"), 25 url("fonts/happy-times-NG_regular_master_web.woff?v=3.19") format("woff"); 26 } 27 28 @font-face { 29 font-family: 'HappyTimes'; 30 font-style: italic; 31 font-weight: 400; 32 font-display: swap; 33 src: url("fonts/happy-times-NG_italic_master_web.woff2?v=3.19") format("woff2"), 34 url("fonts/happy-times-NG_italic_master_web.woff?v=3.19") format("woff"); 35 } 36 37 html { 38 scroll-behavior: smooth; 39 } 40 41 .token { 42 display: block; 43 margin-left: auto; 44 margin-right: auto; 45 } 46 body{ 47 font-family:"Inter", sans; 48 font-weight:400; 49 color: #000; 50 } 51 52 header img{ 53 width:50px; 54 } 55 56 57 blockquote{ 58 font-family:'HappyTimes', serif; 59 font-style:italic; 60 font-weight:400; 61 font-size:1.5em; 62 } 63 64 65 .btn { 66 padding: .5rem 1.5rem; 67 } 68 .primary { 69 color: #5865F2; 70 } 71 .secondary { 72 color: #bbb805; 73 } 74 .btn-primary { 75 background-color: #5865F2; 76 border-color: #5865F2; 77 } 78 .btn-primary:hover { 79 background-color: #7ba8ff; 80 border-color: #7ba8ff; 81 } 82 .btn-secondary { 83 background-color: #5865F2; 84 border-color: #5865F2; 85 } 86 .btn-secondary:hover { 87 background-color: #7ba8ff; 88 border-color: #7ba8ff; 89 } 90 91 .bg-first { 92 background-image: url('img/othersection.jpg'); 93 background-repeat: no-repeat; 94 background-size: cover; 95 background-position: top center; 96 position: relative; 97 } 98 .bg-first::before { 99 background: #000; 100 content: ''; 101 position: absolute; 102 left: 0; 103 top: 0; 104 width: 100%; 105 height: 100%; 106 z-index: 0; 107 opacity: 0.7; 108 } 109 .note-token { 110 padding: 8px; 111 text-align: center; 112 color: #fff; 113 background: #000; 114 } 115 .subheading { 116 background: rgb(6, 168, 54,0.2); 117 padding: 4px 20px; 118 border-radius: 99px; 119 color: #06a836; 120 } 121 122 h1{ 123 font-family:"HappyTimes", serif; 124 font-style:400; 125 } 126 127 h2{ 128 font-family:"HappyTimes", serif; 129 font-style:400; 130 font-size: 2.5rem; 131 } 132 p, .lists li { 133 opacity: 0.8; 134 line-height: 28px; 135 } 136 .lists li { 137 margin-bottom: 10px; 138 } 139 .lists li:last-child { 140 margin-bottom: 0px; 141 } 142 143 a{ 144 color:#7ba8ff; 145 transition:ease 0.2s; 146 text-decoration:none; 147 } 148 149 a:hover, a em:hover{ 150 color: #5865F2; 151 text-decoration:none; 152 } 153 154 155 156 157 158 159 160 161 162 163 .wrapper { 164 display: inline-flex; 165 } 166 167 .wrapper .icon { 168 position: relative; 169 background-color: #ffffff; 170 border-radius: 50%; 171 padding: 15px; 172 margin: 10px; 173 width: 50px; 174 height: 50px; 175 font-size: 18px; 176 display: flex; 177 justify-content: center; 178 align-items: center; 179 flex-direction: column; 180 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 181 cursor: pointer; 182 transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 183 } 184 .wrapper .icon img { 185 width: 30px; 186 transition: .3s ease-in-out; 187 } 188 189 .wrapper .tooltip { 190 position: absolute; 191 top: 0; 192 font-size: 14px; 193 background-color: #ffffff; 194 color: #ffffff; 195 padding: 5px 8px; 196 border-radius: 5px; 197 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 198 opacity: 0; 199 pointer-events: none; 200 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 201 } 202 203 .wrapper .tooltip::before { 204 position: absolute; 205 content: ""; 206 height: 8px; 207 width: 8px; 208 background-color: #ffffff; 209 bottom: -3px; 210 left: 50%; 211 transform: translate(-50%) rotate(45deg); 212 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 213 } 214 215 .wrapper .icon:hover .tooltip { 216 top: -45px; 217 opacity: 1; 218 visibility: visible; 219 pointer-events: auto; 220 } 221 222 .wrapper .icon:hover span, 223 .wrapper .icon:hover .tooltip { 224 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 225 } 226 .icon:hover img { 227 filter: brightness(0%) contrast(300%) invert(100%); 228 } 229 230 .wrapper .forum:hover, 231 .wrapper .forum:hover .tooltip, 232 .wrapper .forum:hover .tooltip::before { 233 background-color: #de406a; 234 color: #ffffff; 235 } 236 237 .wrapper .twitter:hover, 238 .wrapper .twitter:hover .tooltip, 239 .wrapper .twitter:hover .tooltip::before { 240 background-color: #46c1f6; 241 color: #ffffff; 242 } 243 244 .wrapper .discord:hover, 245 .wrapper .discord:hover .tooltip, 246 .wrapper .discord:hover .tooltip::before { 247 background-color: #5865f2; 248 color: #ffffff; 249 } 250 251 .wrapper .substack:hover, 252 .wrapper .substack:hover .tooltip, 253 .wrapper .substack:hover .tooltip::before { 254 background-color: #ff7731; 255 color: #ffffff; 256 } 257 258 .wrapper .facebook:hover, 259 .wrapper .facebook:hover .tooltip, 260 .wrapper .facebook:hover .tooltip::before { 261 background-color: #3d6ad6; 262 color: #ffffff; 263 } 264 265 .wrapper .reddit:hover, 266 .wrapper .reddit:hover .tooltip, 267 .wrapper .reddit:hover .tooltip::before { 268 background-color: #ff5722; 269 color: #ffffff; 270 } 271 272 273 274 275 276 277 278 279 /* header */ 280 281 282 .header ul { 283 overflow: hidden; 284 } 285 286 287 /* menu */ 288 289 .header .menu { 290 clear: both; 291 max-height: 0; 292 transition: max-height .2s ease-out; 293 } 294 295 /* menu icon */ 296 297 .header .menu-icon { 298 padding: 28px 20px; 299 user-select: none; 300 } 301 302 .header .menu-icon .nav-icon { 303 background: #333; 304 display: block; 305 height: 2px; 306 position: relative; 307 transition: background .2s ease-out; 308 width: 18px; 309 } 310 311 .header .menu-icon .nav-icon:before, 312 .header .menu-icon .nav-icon:after { 313 background: #333; 314 content: ''; 315 display: block; 316 height: 100%; 317 position: absolute; 318 transition: all .2s ease-out; 319 width: 100%; 320 } 321 322 .header .menu-icon .nav-icon:before { 323 top: 5px; 324 } 325 326 .header .menu-icon .nav-icon:after { 327 top: -5px; 328 } 329 330 /* menu btn */ 331 332 .header .menu-btn { 333 display: none; 334 } 335 336 @media (min-width: 992px) { 337 .navbar-expand-lg .navbar-nav .nav-link { 338 padding-right: 1rem; 339 padding-left: 1rem; 340 } 341 } 342 343 .header .menu-btn:checked ~ .navbar-collapse .menu { 344 max-height: 240px; 345 } 346 347 .header .menu-btn:checked ~ .menu-icon .nav-icon { 348 background: transparent; 349 } 350 351 .header .menu-btn:checked ~ .menu-icon .nav-icon:before { 352 transform: rotate(-45deg); 353 top:0; 354 } 355 356 .header .menu-btn:checked ~ .menu-icon .nav-icon:after { 357 transform: rotate(45deg); 358 top:0; 359 } 360 361 362 /* 48em = 768px @ 16pt font */ 363 364 @media (min-width: 48em) { 365 .header .menu { 366 clear: none; 367 float: right; 368 max-height: none; 369 } 370 .header .menu-icon { 371 display: none; 372 } 373 }