/* * css/tokens.css · fonts and design tokens (DESIGN §5) * All four families are SIL Open Font License 1.1; each folder in fonts/ holds its OFL.txt. * Newsreader is instanced to the one weight the site uses (400) and optical sizes 12–36 * (fonts/newsreader/README.md), which cuts it from 279 KB to 107 KB for the letter's first paint. * Colours are sampled from the library: dusk after a Costa Rica sunset, the ember * horizon, linen on a Polynesian deck, lagoon water. */ @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda/bodoni-moda-latin-opsz-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda/bodoni-moda-latin-ext-opsz-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda/bodoni-moda-latin-opsz-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda/bodoni-moda-latin-ext-opsz-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/newsreader/newsreader-latin-opsz-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/newsreader/newsreader-latin-ext-opsz-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/newsreader/newsreader-latin-opsz-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/newsreader/newsreader-latin-ext-opsz-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans/instrument-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans/instrument-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/mrs-saint-delafield/mrs-saint-delafield-latin-400-normal.woff2) format("woff2"); } :root { color-scheme: dark; /* grounds: dusk */ --dusk-950: #0c0907; --dusk-900: #120d0a; --dusk-800: #1a1410; --dusk-700: #261d17; --dusk-600: #3a2d24; /* light: ember */ --ember-600: #a64f26; /* 5.0:1 on linen-50 (the #b8582a first specified measured 4.2:1) */ --ember-500: #e2793f; --ember-300: #f2b26c; --ember-100: #fbe3c2; /* alive */ --lagoon-300: #8fd3c7; /* paper and ink */ --linen-50: #f8f1e6; --linen-100: #f1e6d4; --linen-200: #e6d6bd; --ink-900: #2a1f18; --ink-700: #4a3a2f; --ink-500: #7b6656; --pen: #22304e; /* text on dark */ --cream: #f3e8d8; --mist: rgba(243, 232, 216, .64); --haze: rgba(243, 232, 216, .16); /* light effects */ --glow-core: rgb(255, 214, 160); --glow-edge: rgba(255, 170, 95, .6); /* type */ --f-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; --f-text: "Newsreader", "Iowan Old Style", Georgia, serif; --f-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --f-hand: "Mrs Saint Delafield", "Snell Roundhand", cursive; /* spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --gutter: 24px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --band: 104px; /* radii & shadows (prints are square-cornered) */ --r-paper: 2px; --r-card: 4px; --r-panel: 14px; --r-chip: 999px; --sh-paper: inset 0 0 0 1px rgba(255, 246, 230, .7), inset 0 0 50px rgba(214, 186, 150, .16), 0 2px 0 rgba(120, 70, 30, .25), 0 40px 90px -24px rgba(0, 0, 0, .7); --sh-lift: 0 30px 50px -18px rgba(0, 0, 0, .75); --sh-panel: 0 30px 80px -20px rgba(0, 0, 0, .7); /* layers */ --z-sky: 0; --z-world: 2; --z-grain: 3; --z-chrome: 20; --z-hint: 25; --z-menu: 30; --z-library: 40; --z-viewer: 60; --z-intro: 80; --z-skip: 100; /* motion (DESIGN §11) */ --ease-press: cubic-bezier(.2, .7, .2, 1); --ease-glide: cubic-bezier(.16, 1, .3, 1); --ease-drift: cubic-bezier(.65, 0, .35, 1); --ease-breath: cubic-bezier(.37, 0, .63, 1); --t-press: 140ms; --t-glance: 180ms; --t-breath: 320ms; --t-lift: 640ms; --t-dawn: 900ms; } @media (max-width: 599px) { :root { --gutter: 16px; --band: 92px; } }