| 1 | @tailwind base; |
| 2 | @tailwind components; |
| 3 | @tailwind utilities; |
| 4 | |
| 5 | |
| 6 | |
| 7 | :root { |
| 8 | --dk-ink: #0b0c0e; |
| 9 | --dk-surface: #121316; |
| 10 | --dk-graphite: #1a1c20; |
| 11 | --dk-paper: #f2efe9; |
| 12 | --dk-ash: #9ba0a6; |
| 13 | --dk-ash-2: #6e7480; |
| 14 | --dk-line: rgba(155, 160, 166, 0.18); |
| 15 | |
| 16 | --dk-signal: #E0A53B; |
| 17 | --dk-signal-dim: #B07F25; |
| 18 | --dk-signal-tint: rgba(224, 165, 59, 0.10); |
| 19 | |
| 20 | --dk-yea: #7fa88c; |
| 21 | --dk-nay: #b98a8a; |
| 22 | --dk-hold: #c9a66b; |
| 23 | |
| 24 | --dk-party-d: #6e86a8; |
| 25 | --dk-party-r: #a87e6e; |
| 26 | --dk-party-i: #8a8f96; |
| 27 | |
| 28 | --dk-hero-glow: radial-gradient( |
| 29 | 60% 80% at 50% -10%, |
| 30 | rgba(224, 165, 59, 0.08) 0%, |
| 31 | rgba(224, 165, 59, 0) 70% |
| 32 | ); |
| 33 | |
| 34 | |
| 35 | --dk-header-bg: rgba(11, 12, 14, 0.88); |
| 36 | --dk-header-border: rgba(155, 160, 166, 0.18); |
| 37 | |
| 38 | --dk-body-size: 18px; |
| 39 | --dk-leading: 1.6; |
| 40 | |
| 41 | color-scheme: dark; |
| 42 | } |
| 43 | |
| 44 | :root.light { |
| 45 | --dk-ink: #ffffff; |
| 46 | --dk-surface: #f7f4ed; |
| 47 | --dk-graphite: #ede9df; |
| 48 | --dk-paper: #0b0c0e; |
| 49 | --dk-ash: #44423d; |
| 50 | --dk-ash-2: #6b6860; |
| 51 | --dk-line: #d8d2c4; |
| 52 | |
| 53 | --dk-signal: #8f5902; |
| 54 | --dk-signal-dim: #6b4100; |
| 55 | --dk-signal-tint: #fbf3df; |
| 56 | |
| 57 | --dk-yea: #3d6b00; |
| 58 | --dk-nay: #8a1c1c; |
| 59 | --dk-hold: #8f5902; |
| 60 | |
| 61 | --dk-party-d: #5a7499; |
| 62 | --dk-party-r: #996355; |
| 63 | --dk-party-i: #7a7f86; |
| 64 | |
| 65 | --dk-hero-glow: radial-gradient( |
| 66 | 60% 80% at 50% -10%, |
| 67 | rgba(143, 89, 2, 0.06) 0%, |
| 68 | rgba(143, 89, 2, 0) 70% |
| 69 | ); |
| 70 | |
| 71 | --dk-header-bg: rgba(255, 255, 255, 0.85); |
| 72 | --dk-header-border: #d8d2c4; |
| 73 | |
| 74 | --dk-body-size: 18px; |
| 75 | --dk-leading: 1.6; |
| 76 | color-scheme: light; |
| 77 | } |
| 78 | |
| 79 | |
| 80 | @layer base { |
| 81 | html { |
| 82 | background-color: var(--dk-ink); |
| 83 | } |
| 84 | body { |
| 85 | background-color: var(--dk-ink); |
| 86 | color: var(--dk-paper); |
| 87 | font-family: var(--font-mono), ui-monospace, monospace; |
| 88 | font-size: var(--dk-body-size); |
| 89 | line-height: var(--dk-leading); |
| 90 | -webkit-font-smoothing: antialiased; |
| 91 | text-rendering: optimizeLegibility; |
| 92 | } |
| 93 | |
| 94 | |
| 95 | |
| 96 | ::selection { |
| 97 | background: var(--dk-signal-tint); |
| 98 | color: var(--dk-paper); |
| 99 | } |
| 100 | |
| 101 | } |
| 102 | |
| 103 | @layer a11y { |
| 104 | :focus-visible { |
| 105 | outline: 3px solid var(--dk-signal); |
| 106 | outline-offset: 2px; |
| 107 | border-radius: 2px; |
| 108 | } |
| 109 | a { |
| 110 | text-decoration: underline; |
| 111 | text-decoration-thickness: 1px; |
| 112 | text-underline-offset: 0.18em; |
| 113 | } |
| 114 | a:focus-visible { |
| 115 | text-decoration: underline; |
| 116 | } |
| 117 | |
| 118 | button, |
| 119 | [role="button"], |
| 120 | input[type="checkbox"], |
| 121 | input[type="radio"], |
| 122 | input[type="search"], |
| 123 | input[type="text"], |
| 124 | select { |
| 125 | min-height: 44px; |
| 126 | min-width: 44px; |
| 127 | } |
| 128 | |
| 129 | body { |
| 130 | overflow-x: hidden; |
| 131 | } |
| 132 | |
| 133 | .tap { |
| 134 | min-height: 44px; |
| 135 | display: inline-flex; |
| 136 | align-items: center; |
| 137 | } |
| 138 | |
| 139 | .skip-link { |
| 140 | position: absolute; |
| 141 | left: 0.5rem; |
| 142 | top: -3rem; |
| 143 | z-index: 100; |
| 144 | min-height: 44px; |
| 145 | display: inline-flex; |
| 146 | align-items: center; |
| 147 | background: var(--dk-surface); |
| 148 | color: var(--dk-paper); |
| 149 | border: 1px solid var(--dk-line); |
| 150 | padding: 0.5rem 0.75rem; |
| 151 | transition: top 120ms ease; |
| 152 | } |
| 153 | .skip-link:focus { |
| 154 | top: 0.5rem; |
| 155 | } |
| 156 | |
| 157 | @media (hover: none) { |
| 158 | .reg-row:hover { |
| 159 | background: transparent; |
| 160 | } |
| 161 | } |
| 162 | |
| 163 | @media (prefers-reduced-motion: reduce) { |
| 164 | *, |
| 165 | *::before, |
| 166 | *::after { |
| 167 | animation-duration: 0.001ms !important; |
| 168 | animation-iteration-count: 1 !important; |
| 169 | transition-duration: 0.001ms !important; |
| 170 | } |
| 171 | } |
| 172 | } |
| 173 | |
| 174 | @layer components { |
| 175 | .hairline { |
| 176 | border-color: var(--dk-line); |
| 177 | } |
| 178 | |
| 179 | |
| 180 | .label { |
| 181 | font-family: var(--font-mono), ui-monospace, monospace; |
| 182 | text-transform: uppercase; |
| 183 | letter-spacing: 0.12em; |
| 184 | font-size: 0.875rem; |
| 185 | color: var(--dk-ash); |
| 186 | } |
| 187 | |
| 188 | .display { |
| 189 | font-family: var(--font-display), system-ui, sans-serif; |
| 190 | font-weight: 900; |
| 191 | text-transform: uppercase; |
| 192 | letter-spacing: -0.01em; |
| 193 | word-spacing: 0.06em; |
| 194 | line-height: 1.0; |
| 195 | } |
| 196 | |
| 197 | .prose-lead { |
| 198 | font-family: var(--font-prose), Georgia, serif; |
| 199 | font-size: 1.125rem; |
| 200 | line-height: 1.6; |
| 201 | color: var(--dk-paper); |
| 202 | } |
| 203 | |
| 204 | |
| 205 | .pill { |
| 206 | display: inline-flex; |
| 207 | align-items: center; |
| 208 | gap: 0.375rem; |
| 209 | font-family: var(--font-mono), ui-monospace, monospace; |
| 210 | text-transform: uppercase; |
| 211 | letter-spacing: 0.08em; |
| 212 | font-size: 0.75rem; |
| 213 | padding: 0.1875rem 0.5rem; |
| 214 | border: 1px solid var(--dk-line); |
| 215 | border-radius: 2px; |
| 216 | color: var(--dk-ash); |
| 217 | white-space: nowrap; |
| 218 | } |
| 219 | .live-dot { |
| 220 | width: 0.5rem; |
| 221 | height: 0.5rem; |
| 222 | border-radius: 9999px; |
| 223 | background: var(--dk-signal); |
| 224 | display: inline-block; |
| 225 | } |
| 226 | |
| 227 | .reg-row { |
| 228 | display: grid; |
| 229 | align-items: center; |
| 230 | border-bottom: 1px solid var(--dk-line); |
| 231 | transition: background-color 120ms ease; |
| 232 | } |
| 233 | .reg-row:hover { |
| 234 | background: var(--dk-surface); |
| 235 | } |
| 236 | |
| 237 | .focus-ring:focus-visible { |
| 238 | outline: 3px solid var(--dk-signal); |
| 239 | outline-offset: 2px; |
| 240 | } |
| 241 | |
| 242 | .big-card { |
| 243 | display: block; |
| 244 | border-radius: 6px; |
| 245 | border: 2px solid var(--dk-line); |
| 246 | background-color: var(--dk-surface); |
| 247 | padding: 1.5rem; |
| 248 | transition: background-color 120ms ease, border-color 120ms ease; |
| 249 | } |
| 250 | .big-card:hover { |
| 251 | background-color: var(--dk-graphite); |
| 252 | border-color: var(--dk-signal); |
| 253 | } |
| 254 | |
| 255 | .section-card { |
| 256 | display: block; |
| 257 | border-radius: 6px; |
| 258 | border: 2px solid var(--dk-line); |
| 259 | background-color: var(--dk-surface); |
| 260 | padding: 1.75rem 1.5rem; |
| 261 | min-height: 56px; |
| 262 | transition: background-color 120ms ease, border-color 120ms ease; |
| 263 | } |
| 264 | .section-card:hover { |
| 265 | background-color: var(--dk-graphite); |
| 266 | border-color: var(--dk-signal); |
| 267 | } |
| 268 | } |