├── MIT_LICENSE ├── README.md ├── docs ├── .gitignore ├── README.txt ├── next.config.js ├── package.json ├── pages │ └── .gitkeep ├── public │ └── index.html └── yarn.lock ├── fonts.css └── theme.css /MIT_LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-2022 Hack Club 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hack Club CSS 2 | 3 | [Hack Club](https://hackclub.com/)'s [theme](https://theme.hackclub.com) implemented as CSS. 4 | - Use our [css-starter](https://github.com/hackclub/css-starter) for a blank but ready website template that already includes our theme CSS. 5 | - View the [contribute](https://github.com/hackclub/contribute) repository for an example of our CSS theme [in action](https://contribute.hackclub.com/). 6 | 7 | ## Getting Started with Hack Club CSS 8 | 9 | 1. Create a new folder for your site 10 | 2. Add a `style.css` file inside your folder 11 | 3. Add an `index.html` page inside your folder 12 | 4. Link to the CSS files in the `` tag of your HTML: 13 | ```html 14 | 15 | 16 | ``` 17 | 5. View https://theme.hackclub.com/ for a visual representation of our theme 18 | 6. View https://github.com/hackclub/css#usage for the documentation of the tags in our theme 19 | 7. Run your static site locally with `python -m SimpleHTTPServer` and view it at `http://localhost:8000/` 20 | 8. Have fun and get creative making websites! 21 | 22 | ## Development 23 | 24 | To run the site locally, follow the steps below: 25 | 26 | 1. Clone the repository: 27 | ```sh 28 | git clone https://github.com/hackclub/css.git 29 | ``` 30 | 31 | 2. Start up a server (or open the `index.html` file in your browser): 32 | 33 | ```sh 34 | python -m SimpleHTTPServer 35 | ``` 36 | 37 | And then visit http://0.0.0.0:8000 to see the site! 38 | 39 | ## Accessing The Stylesheets 40 | 41 | Get the latest theme stylesheet: [`css.hackclub.com/theme.css`](https://css.hackclub.com/theme.css) 42 | 43 | Get the latest minified theme stylesheet: [`css.hackclub.com/theme.min.css`](https://css.hackclub.com/theme.min.css) 44 | 45 | (HQ-only) Get the latest fonts stylesheet: [`css.hackclub.com/fonts.css`](https://css.hackclub.com/fonts.css) 46 | 47 | (HQ-only) Get the latest minified fonts stylesheet: [`css.hackclub.com/fonts.min.css`](https://css.hackclub.com/fonts.min.css) 48 | 49 | ### Archives 50 | 51 | To access `theme.css` at commit ID `d0888dc` use [`css.hackclub.com/d0888dc/theme.css`](https://css.hackclub.com/d0888dc/theme.css). 52 | 53 | Similarly, to access `fonts.min.css` at commit SHA `cbe01ca9a4de7bc7a5b1048d887287dfedba0a07` use [`css.hackclub.com/cbe01ca9a4de7bc7a5b1048d887287dfedba0a07/fonts.min.css`](https://css.hackclub.com/cbe01ca9a4de7bc7a5b1048d887287dfedba0a07/fonts.min.css). 54 | 55 | This can be done for every commit in this repository. 56 | 57 | ## Usage 58 | 59 | The stylesheet places light styling on the following tags: ` 222 | 223 |
224 |

228 | Badges 229 |

230 |
231 |
.pill
232 |
.outline-badge
233 |
234 |
235 |
236 |

240 | Colours 241 |

242 |
243 |
244 |

var(--darker)

245 |
246 |
247 |

var(--dark)

248 |
249 |
250 |

var(--darkless)

251 |
252 |
253 |

var(--black)

254 |
255 |
256 |

var(--steel)

257 |
258 |
259 |

var(--slate)

260 |
261 |
262 |

var(--muted)

263 |
264 |
265 |

var(--smoke)

266 |
267 |
268 |

var(--snow)

269 |
270 |
271 |

var(--white)

272 |
273 |
274 |

var(--red)

275 |
276 |
277 |

var(--orange)

278 |
279 |
280 |

var(--yellow)

281 |
282 |
283 |

var(--green)

284 |
285 |
286 |

var(--blue)

287 |
288 |
289 |

var(--purple)

290 |
291 |
292 |

var(--text)

293 |
294 |
295 |

var(--elevated)

296 |
297 |
298 |

var(--sheet)

299 |
300 |
301 |

var(--sunken)

302 |
303 |
304 |

var(--border)

305 |
306 |
307 |

var(--primary)

308 |
309 |
310 |

var(--secondary)

311 |
312 |
313 |

var(--accent)

314 |
315 |
316 |
317 | 318 | 319 | 352 | 353 | 354 | -------------------------------------------------------------------------------- /docs/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@next/env@12.1.0": 6 | version "12.1.0" 7 | resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.0.tgz#73713399399b34aa5a01771fb73272b55b22c314" 8 | integrity sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ== 9 | 10 | "@next/swc-android-arm64@12.1.0": 11 | version "12.1.0" 12 | resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.0.tgz#865ba3a9afc204ff2bdeea49dd64d58705007a39" 13 | integrity sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA== 14 | 15 | "@next/swc-darwin-arm64@12.1.0": 16 | version "12.1.0" 17 | resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.0.tgz#08e8b411b8accd095009ed12efbc2f1d4d547135" 18 | integrity sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg== 19 | 20 | "@next/swc-darwin-x64@12.1.0": 21 | version "12.1.0" 22 | resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.0.tgz#fcd684497a76e8feaca88db3c394480ff0b007cd" 23 | integrity sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug== 24 | 25 | "@next/swc-linux-arm-gnueabihf@12.1.0": 26 | version "12.1.0" 27 | resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.0.tgz#9ec6380a27938a5799aaa6035c205b3c478468a7" 28 | integrity sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog== 29 | 30 | "@next/swc-linux-arm64-gnu@12.1.0": 31 | version "12.1.0" 32 | resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.0.tgz#7f4196dff1049cea479607c75b81033ae2dbd093" 33 | integrity sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q== 34 | 35 | "@next/swc-linux-arm64-musl@12.1.0": 36 | version "12.1.0" 37 | resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.0.tgz#b445f767569cdc2dddee785ca495e1a88c025566" 38 | integrity sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA== 39 | 40 | "@next/swc-linux-x64-gnu@12.1.0": 41 | version "12.1.0" 42 | resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz#67610e9be4fbc987de7535f1bcb17e45fe12f90e" 43 | integrity sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A== 44 | 45 | "@next/swc-linux-x64-musl@12.1.0": 46 | version "12.1.0" 47 | resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz#ea19a23db08a9f2e34ac30401f774cf7d1669d31" 48 | integrity sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw== 49 | 50 | "@next/swc-win32-arm64-msvc@12.1.0": 51 | version "12.1.0" 52 | resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.0.tgz#eadf054fc412085659b98e145435bbba200b5283" 53 | integrity sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw== 54 | 55 | "@next/swc-win32-ia32-msvc@12.1.0": 56 | version "12.1.0" 57 | resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.0.tgz#68faeae10c89f698bf9d28759172b74c9c21bda1" 58 | integrity sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q== 59 | 60 | "@next/swc-win32-x64-msvc@12.1.0": 61 | version "12.1.0" 62 | resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz#d27e7e76c87a460a4da99c5bfdb1618dcd6cd064" 63 | integrity sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg== 64 | 65 | caniuse-lite@^1.0.30001283: 66 | version "1.0.30001314" 67 | resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz#65c7f9fb7e4594fca0a333bec1d8939662377596" 68 | integrity sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw== 69 | 70 | "js-tokens@^3.0.0 || ^4.0.0": 71 | version "4.0.0" 72 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 73 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 74 | 75 | loose-envify@^1.1.0: 76 | version "1.4.0" 77 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 78 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 79 | dependencies: 80 | js-tokens "^3.0.0 || ^4.0.0" 81 | 82 | nanoid@^3.1.30: 83 | version "3.3.1" 84 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" 85 | integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== 86 | 87 | next@^12.1.0: 88 | version "12.1.0" 89 | resolved "https://registry.yarnpkg.com/next/-/next-12.1.0.tgz#c33d753b644be92fc58e06e5a214f143da61dd5d" 90 | integrity sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q== 91 | dependencies: 92 | "@next/env" "12.1.0" 93 | caniuse-lite "^1.0.30001283" 94 | postcss "8.4.5" 95 | styled-jsx "5.0.0" 96 | use-subscription "1.5.1" 97 | optionalDependencies: 98 | "@next/swc-android-arm64" "12.1.0" 99 | "@next/swc-darwin-arm64" "12.1.0" 100 | "@next/swc-darwin-x64" "12.1.0" 101 | "@next/swc-linux-arm-gnueabihf" "12.1.0" 102 | "@next/swc-linux-arm64-gnu" "12.1.0" 103 | "@next/swc-linux-arm64-musl" "12.1.0" 104 | "@next/swc-linux-x64-gnu" "12.1.0" 105 | "@next/swc-linux-x64-musl" "12.1.0" 106 | "@next/swc-win32-arm64-msvc" "12.1.0" 107 | "@next/swc-win32-ia32-msvc" "12.1.0" 108 | "@next/swc-win32-x64-msvc" "12.1.0" 109 | 110 | object-assign@^4.1.1: 111 | version "4.1.1" 112 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 113 | integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= 114 | 115 | picocolors@^1.0.0: 116 | version "1.0.0" 117 | resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" 118 | integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== 119 | 120 | postcss@8.4.5: 121 | version "8.4.5" 122 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95" 123 | integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg== 124 | dependencies: 125 | nanoid "^3.1.30" 126 | picocolors "^1.0.0" 127 | source-map-js "^1.0.1" 128 | 129 | react-dom@^17.0.2: 130 | version "17.0.2" 131 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" 132 | integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== 133 | dependencies: 134 | loose-envify "^1.1.0" 135 | object-assign "^4.1.1" 136 | scheduler "^0.20.2" 137 | 138 | react@^17.0.2: 139 | version "17.0.2" 140 | resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" 141 | integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== 142 | dependencies: 143 | loose-envify "^1.1.0" 144 | object-assign "^4.1.1" 145 | 146 | scheduler@^0.20.2: 147 | version "0.20.2" 148 | resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" 149 | integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== 150 | dependencies: 151 | loose-envify "^1.1.0" 152 | object-assign "^4.1.1" 153 | 154 | source-map-js@^1.0.1: 155 | version "1.0.2" 156 | resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" 157 | integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== 158 | 159 | styled-jsx@5.0.0: 160 | version "5.0.0" 161 | resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77" 162 | integrity sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA== 163 | 164 | use-subscription@1.5.1: 165 | version "1.5.1" 166 | resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1" 167 | integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA== 168 | dependencies: 169 | object-assign "^4.1.1" 170 | -------------------------------------------------------------------------------- /fonts.css: -------------------------------------------------------------------------------- 1 | /* STRICTLY FOR HQ CONTROLLED SITES ONLY. */ 2 | 3 | @font-face { 4 | font-family: 'Phantom Sans'; 5 | src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff') 6 | format('woff'), 7 | url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2') 8 | format('woff2'); 9 | font-weight: normal; 10 | font-style: normal; 11 | font-display: swap; 12 | } 13 | @font-face { 14 | font-family: 'Phantom Sans'; 15 | src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff') 16 | format('woff'), 17 | url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff2') 18 | format('woff2'); 19 | font-weight: normal; 20 | font-style: italic; 21 | font-display: swap; 22 | } 23 | @font-face { 24 | font-family: 'Phantom Sans'; 25 | src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff') 26 | format('woff'), 27 | url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2') 28 | format('woff2'); 29 | font-weight: bold; 30 | font-style: normal; 31 | font-display: swap; 32 | } 33 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | @layer hack-club-theme { 2 | :root { 3 | --darker: #121217; 4 | --dark: #17171d; 5 | --darkless: #252429; 6 | --black: #1f2d3d; 7 | --steel: #273444; 8 | --slate: #3c4858; 9 | --muted: #8492a6; 10 | --smoke: #e0e6ed; 11 | --snow: #f9fafc; 12 | --white: #ffffff; 13 | --red: #ec3750; 14 | --orange: #ff8c37; 15 | --yellow: #f1c40f; 16 | --green: #33d6a6; 17 | --cyan: #5bc0de; 18 | --blue: #338eda; 19 | --purple: #a633d6; 20 | --text: var(--black); 21 | --background: var(--white); 22 | --elevated: var(--white); 23 | --sheet: var(--snow); 24 | --sunken: var(--smoke); 25 | --border: var(--smoke); 26 | --primary: #ec3750; 27 | --secondary: #8492a6; 28 | --accent: #5bc0de; 29 | --twitter: #1da1f2; 30 | --facebook: #3b5998; 31 | --instagram: #e1306c; 32 | --breakpoint-xs: 32em; 33 | --breakpoint-s: 48em; 34 | --breakpoint-m: 64em; 35 | --breakpoint-l: 96em; 36 | --breakpoint-xl: 128em; 37 | --spacing-0: 0px; 38 | --spacing-1: 4px; 39 | --spacing-2: 8px; 40 | --spacing-3: 16px; 41 | --spacing-4: 32px; 42 | --spacing-5: 64px; 43 | --spacing-6: 128px; 44 | --spacing-7: 256px; 45 | --spacing-8: 512px; 46 | --font-1: 12px; 47 | --font-2: 16px; 48 | --font-3: 20px; 49 | --font-4: 24px; 50 | --font-5: 32px; 51 | --font-6: 48px; 52 | --font-7: 64px; 53 | --font-8: 96px; 54 | --font-9: 128px; 55 | --font-10: 160px; 56 | --font-11: 192px; 57 | --line-height-limit: 0.875; 58 | --line-height-title: 1; 59 | --line-height-heading: 1.125; 60 | --line-height-subheading: 1.25; 61 | --line-height-caption: 1.375; 62 | --line-height-body: 1.5; 63 | --font-weight-body: 400; 64 | --font-weight-bold: 700; 65 | --font-weight-heading: var(--font-weight-bold); 66 | --letter-spacing-title: -0.009em; 67 | --letter-spacing-headline: 0.009em; 68 | --size-wide-plus: 2048px; 69 | --size-wide: 1536px; 70 | --size-layout-plus: 1200px; 71 | --size-layout: 1024px; 72 | --size-copy-ultra: 980px; 73 | --size-copy-plus: 768px; 74 | --size-copy: 680px; 75 | --size-narrow-plus: 600px; 76 | --size-narrow: 512px; 77 | --radii-small: 4px; 78 | --radii-default: 8px; 79 | --radii-extra: 12px; 80 | --radii-ultra: 16px; 81 | --radii-circle: 99999px; 82 | --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.125); 83 | --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.0625), 84 | 0 2px 4px rgba(0, 0, 0, 0.0625); 85 | --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125); 86 | --shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625), 87 | 0 8px 12px rgba(0, 0, 0, 0.125); 88 | } 89 | 90 | body { 91 | font-family: "Phantom Sans", system-ui, -apple-system, BlinkMacSystemFont, 92 | "Segoe UI", Roboto, sans-serif; 93 | line-height: var(--line-height-body); 94 | font-weight: var(--font-weight-body); 95 | margin: 0; 96 | min-height: 100vh; 97 | text-rendering: optimizeLegibility; 98 | font-smooth: antialiased; 99 | -moz-osx-font-smoothing: grayscale; 100 | -webkit-font-smoothing: antialiased; 101 | color: var(--text); 102 | box-sizing: border-box; 103 | } 104 | 105 | * { 106 | box-sizing: border-box; 107 | } 108 | 109 | .monospace { 110 | font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; 111 | } 112 | 113 | .heading { 114 | font-weight: var(--font-weight-bold); 115 | line-height: var(--line-height-heading); 116 | margin-top: 0; 117 | margin-bottom: 0; 118 | } 119 | 120 | .ultratitle { 121 | font-weight: var(--font-weight-bold); 122 | line-height: var(--line-height-limit); 123 | letter-spacing: var(--letter-spacing-title); 124 | } 125 | 126 | .title { 127 | font-weight: var(--font-weight-bold); 128 | line-height: var(--line-height-title); 129 | letter-spacing: var(--letter-spacing-title); 130 | } 131 | 132 | .subtitle { 133 | margin-top: var(--spacing-3); 134 | font-weight: var(--font-weight-body); 135 | line-height: var(--line-height-subheading); 136 | letter-spacing: var(--letter-spacing-headline); 137 | } 138 | 139 | .headline { 140 | margin-top: var(--spacing-3); 141 | margin-bottom: var(--spacing-3); 142 | font-size: var(--font-4); 143 | line-height: var(--line-height-heading); 144 | letter-spacing: var(--letter-spacing-headline); 145 | } 146 | 147 | .subheadline { 148 | margin-top: var(--spacing-0); 149 | margin-bottom: var(--spacing-3); 150 | font-size: var(--font-2); 151 | line-height: var(--line-height-heading); 152 | letter-spacing: var(--letter-spacing-headline); 153 | } 154 | 155 | .eyebrow { 156 | color: var(--muted); 157 | font-weight: var(--font-weight-heading); 158 | letter-spacing: var(--letter-spacing-headline); 159 | line-height: var(--line-height-subheading); 160 | text-transform: uppercase; 161 | margin-top: var(--spacing-0); 162 | margin-bottom: var(--spacing-2); 163 | } 164 | 165 | .lead { 166 | font-weight: var(--font-weight-body); 167 | } 168 | 169 | .caption { 170 | color: var(--muted); 171 | font-weight: var(--font-weight-body); 172 | letter-spacing: var(--letter-spacing-headline); 173 | line-height: var(--line-height-caption); 174 | } 175 | 176 | .pill { 177 | border-radius: var(--radii-circle); 178 | padding-left: var(--spacing-3); 179 | padding-right: var(--spacing-3); 180 | padding-top: var(--spacing-1); 181 | padding-bottom: var(--spacing-1); 182 | font-size: var(--font-2); 183 | background: var(--primary); 184 | color: var(--background); 185 | font-weight: var(--font-weight-bold); 186 | } 187 | 188 | .outline-badge { 189 | border-radius: var(--radii-circle); 190 | padding-left: var(--spacing-3); 191 | padding-right: var(--spacing-3); 192 | padding-top: var(--spacing-1); 193 | padding-bottom: var(--spacing-1); 194 | font-size: var(--font-2); 195 | background: none; 196 | color: var(--muted); 197 | border: 1px solid currentcolor; 198 | font-weight: var(--font-weight-body); 199 | } 200 | 201 | button { 202 | cursor: pointer; 203 | font-family: inherit; 204 | font-weight: var(--font-weight-bold); 205 | border-radius: var(--radii-circle); 206 | display: inline-flex; 207 | align-items: center; 208 | justify-content: center; 209 | box-shadow: var(--shadow-card); 210 | letter-spacing: var(--letter-spacing-headline); 211 | -webkit-tap-highlight-color: transparent; 212 | transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out; 213 | box-sizing: border-box; 214 | margin: 0; 215 | min-width: 0; 216 | -webkit-appearance: none; 217 | -moz-appearance: none; 218 | appearance: none; 219 | text-align: center; 220 | line-height: inherit; 221 | -webkit-text-decoration: none; 222 | text-decoration: none; 223 | padding-left: 16px; 224 | padding-right: 16px; 225 | padding-top: 8px; 226 | padding-bottom: 8px; 227 | color: var(--theme-ui-colors-white, #ffffff); 228 | background-color: var(--theme-ui-colors-primary, #ec3750); 229 | border: 0; 230 | font-size: var(--font-2); 231 | } 232 | 233 | button:focus, 234 | button:hover { 235 | box-shadow: var(--shadow-elevated); 236 | transform: scale(1.0625); 237 | } 238 | 239 | button.lg { 240 | font-size: var(--font-3)!important; 241 | line-height: var(--line-height-title); 242 | padding-left: var(--spacing-4); 243 | padding-right: var(--spacing-4); 244 | padding-top: var(--spacing-3); 245 | padding-bottom: var(--spacing-3); 246 | } 247 | 248 | button.outline { 249 | background: none; 250 | color: var(--primary); 251 | border: 2px solid currentcolor; 252 | } 253 | 254 | button.cta { 255 | font-size: var(--font-2); 256 | background-image: radial-gradient( 257 | ellipse farthest-corner at top left, 258 | var(--orange), 259 | var(--red) 260 | ); 261 | } 262 | 263 | .card { 264 | background: var(--elevated); 265 | color: var(--text); 266 | border-radius: var(--radii-extra); 267 | box-shadow: var(--shadow-card); 268 | overflow: hidden; 269 | } 270 | 271 | .card.sunken { 272 | background: var(--sunken); 273 | box-shadow: none; 274 | } 275 | 276 | .card.interactive { 277 | text-decoration: none; 278 | -webkit-tap-highlight-color: transparent; 279 | transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out; 280 | } 281 | 282 | .card.interactive:hover, 283 | .card.interactive:focus { 284 | transform: scale(1.0625); 285 | box-shadow: var(--shadow-elevated); 286 | } 287 | 288 | input, 289 | textarea, 290 | select { 291 | background: var(--elevated); 292 | color: var(--text); 293 | font-family: inherit; 294 | border-radius: var(--radii-small); 295 | border: 0; 296 | font-size: inherit; 297 | padding: var(--spacing-2); 298 | -webkit-appearance: none; 299 | -moz-appearance: none; 300 | appearance: none; 301 | } 302 | 303 | input::-webkit-input-placeholder, 304 | input::-moz-placeholder, 305 | input:-ms-input-placeholder, 306 | textarea::-webkit-input-placeholder, 307 | textarea::-moz-placeholder, 308 | textarea:-ms-input-placeholder, 309 | select::-webkit-input-placeholder, 310 | select::-moz-placeholder, 311 | select:-ms-input-placeholder { 312 | color: var(--muted); 313 | } 314 | 315 | input[type="search"]::-webkit-search-decoration, 316 | textarea[type="search"]::-webkit-search-decoration, 317 | select[type="search"]::-webkit-search-decoration { 318 | display: none; 319 | } 320 | 321 | input[type="checkbox"] { 322 | -webkit-appearance: checkbox; 323 | -moz-appearance: checkbox; 324 | appearance: checkbox; 325 | } 326 | 327 | label { 328 | color: var(--text); 329 | display: flex; 330 | flex-direction: column; 331 | text-align: left; 332 | line-height: var(--line-height-caption); 333 | font-size: var(--font-3); 334 | } 335 | 336 | label.horizontal { 337 | display: flex; 338 | } 339 | 340 | .slider { 341 | color: var(--primary); 342 | } 343 | 344 | .form-hidden { 345 | position: absolute; 346 | height: 1px; 347 | width: 1px; 348 | clip: rect(1px, 1px, 1px, 1px); 349 | white-space: nowrap; 350 | } 351 | 352 | .container { 353 | width: 100%; 354 | margin: auto; 355 | padding-left: var(--spacing-3); 356 | padding-right: var(--spacing-3); 357 | } 358 | 359 | h1 { 360 | font-size: var(--font-5); 361 | font-weight: var(--font-weight-bold); 362 | line-height: var(--line-height-heading); 363 | margin-top: 0; 364 | margin-bottom: 0; 365 | } 366 | 367 | h2 { 368 | font-size: var(--font-4); 369 | font-weight: var(--font-weight-bold); 370 | line-height: var(--line-height-heading); 371 | margin-top: 0; 372 | margin-bottom: 0; 373 | } 374 | 375 | h3 { 376 | font-size: var(--font-3); 377 | font-weight: var(--font-weight-bold); 378 | line-height: var(--line-height-heading); 379 | margin-top: 0; 380 | margin-bottom: 0; 381 | } 382 | 383 | h4 { 384 | font-size: var(--font-2); 385 | font-weight: var(--font-weight-bold); 386 | line-height: var(--line-height-heading); 387 | margin-top: 0; 388 | margin-bottom: 0; 389 | } 390 | 391 | h5 { 392 | font-size: var(--font-1); 393 | font-weight: var(--font-weight-bold); 394 | line-height: var(--line-height-heading); 395 | margin-top: 0; 396 | margin-bottom: 0; 397 | } 398 | 399 | h6 { 400 | font-weight: var(--font-weight-bold); 401 | line-height: var(--line-height-heading); 402 | margin-top: 0; 403 | margin-bottom: 0; 404 | } 405 | 406 | p { 407 | color: var(--text); 408 | font-weight: var(--font-weight-body); 409 | line-height: var(--line-height-body); 410 | margin-top: var(--spacing-3); 411 | margin-bottom: var(--spacing-3); 412 | } 413 | 414 | img { 415 | max-width: 100%; 416 | } 417 | 418 | hr { 419 | border: 0; 420 | border-bottom: 1px solid var(--border); 421 | } 422 | 423 | a { 424 | color: var(--primary); 425 | text-decoration: underline; 426 | text-underline-position: under; 427 | } 428 | 429 | a:focus, 430 | a:hover { 431 | text-decoration-style: wavy; 432 | text-decoration-skip-ink: none; 433 | } 434 | 435 | pre { 436 | font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; 437 | font-size: var(--font-1); 438 | padding: var(--spacing-3); 439 | color: var(--text); 440 | background: var(--sunken); 441 | overflow: auto; 442 | border-radius: var(--radii-default); 443 | white-space: inherit; 444 | } 445 | 446 | pre > code { 447 | color: inherit; 448 | margin-left: 0; 449 | margin-right: 0; 450 | padding-left: 0; 451 | padding-right: 0; 452 | } 453 | 454 | code { 455 | font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; 456 | font-size: inherit; 457 | color: var(--purple); 458 | background: var(--sunken); 459 | overflow: auto; 460 | border-radius: var(--radii-small); 461 | margin-left: var(--spacing-1); 462 | margin-right: var(--spacing-1); 463 | padding-left: var(--spacing-1); 464 | padding-right: var(--spacing-1); 465 | } 466 | 467 | p > code, 468 | li > code { 469 | color: var(--blue); 470 | font-size: 0.875em; 471 | } 472 | 473 | p > a > code, 474 | li > a > code { 475 | color: var(--blue); 476 | font-size: 0.875em; 477 | } 478 | 479 | li { 480 | margin-top: var(--spacing-2); 481 | margin-bottom: var(--spacing-2); 482 | } 483 | 484 | table { 485 | width: 100%; 486 | margin-top: var(--spacing-4); 487 | margin-bottom: var(--spacing-4); 488 | border-collapse: separate; 489 | border-spacing: 0; 490 | } 491 | 492 | table > th, 493 | table > td { 494 | text-align: left; 495 | padding: 4px; 496 | padding-left: 0px; 497 | border-color: var(--border); 498 | border-bottom-style: solid; 499 | } 500 | 501 | th { 502 | vertical-align: bottom; 503 | border-bottom-width: 2px; 504 | } 505 | 506 | td { 507 | vertical-align: top; 508 | border-bottom-width: 1px; 509 | } 510 | 511 | 512 | @media screen and (min-width: 32em) { 513 | .ultratitle { 514 | font-size: var(--font-5); 515 | } 516 | .title { 517 | font-size: var(--font-4); 518 | } 519 | .subtitle { 520 | font-size: var(--font-2); 521 | } 522 | .eyebrow { 523 | font-size: var(--font-3); 524 | } 525 | .lead { 526 | font-size: var(--font-2); 527 | margin-top: var(--spacing-2); 528 | margin-bottom: var(--spacing-2); 529 | } 530 | .card { 531 | padding: var(--spacing-3); 532 | } 533 | .container { 534 | max-width: var(--size-layout); 535 | } 536 | .container.copy { 537 | max-width: var(--size-copy); 538 | } 539 | .container.narrow { 540 | max-width: var(--size-narrow); 541 | } 542 | } 543 | 544 | @media screen and (min-width: 48em) { 545 | .ultratitle { 546 | font-size: var(--font-6); 547 | } 548 | .title { 549 | font-size: var(--font-5); 550 | } 551 | .subtitle { 552 | font-size: var(--font-3); 553 | } 554 | .eyebrow { 555 | font-size: var(--font-4); 556 | } 557 | .lead { 558 | font-size: var(--font-3); 559 | margin-top: var(--spacing-3); 560 | margin-bottom: var(--spacing-3); 561 | } 562 | .card { 563 | padding: var(--spacing-4); 564 | } 565 | } 566 | 567 | @media screen and (min-width: 64em) { 568 | .ultratitle { 569 | font-size: var(--font-7); 570 | } 571 | .title { 572 | font-size: var(--font-6); 573 | } 574 | .container { 575 | max-width: var(--size-layout-plus); 576 | } 577 | .container.wide { 578 | max-width: var(--size-wide); 579 | } 580 | .container.copy { 581 | max-width: var(--size-copy-plus); 582 | } 583 | .container.narrow { 584 | max-width: var(--size-narrow-plus); 585 | } 586 | } 587 | } 588 | --------------------------------------------------------------------------------