veryroundbird.house
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "iA Writer Quattro S";
7 src: url("/static/fonts/iAWriterQuattroS-Regular.ttf")
8 format("truetype");
9 font-weight: normal;
10 font-style: normal;
11 font-display: swap;
12 font-feature-settings:
13 "calt" 1,
14 "kern" 1;
15 }
16 @font-face {
17 font-family: "iA Writer Quattro S";
18 src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");
19 font-weight: bold;
20 font-style: normal;
21 font-display: swap;
22 font-feature-settings:
23 "calt" 1,
24 "kern" 1;
25 }
26 @font-face {
27 font-family: "iA Writer Quattro S";
28 src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");
29 font-weight: normal;
30 font-style: italic;
31 font-display: swap;
32 font-feature-settings:
33 "calt" 1,
34 "kern" 1;
35 }
36 @font-face {
37 font-family: "iA Writer Quattro S";
38 src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf")
39 format("truetype");
40 font-weight: bold;
41 font-style: italic;
42 font-display: swap;
43 font-feature-settings:
44 "calt" 1,
45 "kern" 1;
46 }
47
48 @font-face {
49 font-family: "iA Writer Mono S";
50 src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");
51 font-weight: normal;
52 font-style: normal;
53 font-display: swap;
54 font-feature-settings:
55 "calt" 1,
56 "kern" 1;
57 }
58 @font-face {
59 font-family: "iA Writer Mono S";
60 src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");
61 font-weight: bold;
62 font-style: normal;
63 font-display: swap;
64 font-feature-settings:
65 "calt" 1,
66 "kern" 1;
67 }
68 @font-face {
69 font-family: "iA Writer Mono S";
70 src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");
71 font-weight: normal;
72 font-style: italic;
73 font-display: swap;
74 font-feature-settings:
75 "calt" 1,
76 "kern" 1;
77 }
78 @font-face {
79 font-family: "iA Writer Mono S";
80 src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf")
81 format("truetype");
82 font-weight: bold;
83 font-style: italic;
84 font-display: swap;
85 font-feature-settings:
86 "calt" 1,
87 "kern" 1;
88 }
89
90 @font-face {
91 font-family: "Inter";
92 font-style: normal;
93 font-weight: 400;
94 font-display: swap;
95 font-feature-settings:
96 "calt" 1,
97 "kern" 1;
98 }
99
100 ::selection {
101 @apply bg-yellow-400;
102 @apply text-black;
103 @apply bg-opacity-30;
104 }
105
106 @layer base {
107 html {
108 letter-spacing: -0.01em;
109 word-spacing: -0.07em;
110 font-size: 14px;
111 }
112 a {
113 @apply no-underline text-black hover:underline hover:text-gray-800;
114 }
115
116 label {
117 @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase;
118 }
119 input {
120 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3;
121 }
122 textarea {
123 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3;
124 }
125 details summary::-webkit-details-marker {
126 display: none;
127 }
128 }
129
130 @layer components {
131 .btn {
132 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
133 justify-center bg-transparent px-2 pb-[0.2rem] text-base
134 text-gray-900 before:absolute before:inset-0 before:-z-10
135 before:block before:rounded-sm before:border before:border-gray-200
136 before:bg-white before:drop-shadow-sm
137 before:content-[''] hover:before:border-gray-300
138 hover:before:bg-gray-50
139 hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
140 focus:outline-none focus-visible:before:outline
141 focus-visible:before:outline-4 focus-visible:before:outline-gray-500
142 active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
143 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
144 disabled:hover:before:bg-white disabled:hover:before:shadow-none;
145 }
146 }
147 @layer utilities {
148 .error {
149 @apply py-1 text-red-400;
150 }
151 .success {
152 @apply py-1 text-green-400;
153 }
154 }
155}