/* ========================================================================= * type.css — the portal's type, as one swappable layer (design v2) * * Treatment (a) "Refined" from v2/type/notes.md: the brand's own Newsreader, * italic (the website's file) and roman (one OFL addition, weights 300–400), * each at its optical size, with the brand's Libre Franklin. Ollie has not * picked yet, so every role is a class here and nowhere else: swap this file * and every screen follows. The theme loads it just before portal.css, on * the portal's screens only (functions.php, brooklyn_style_manifest()). * * The rule. Italic only at display size (their names, the greeting, page * titles). Roman Newsreader for what is theirs at reading size (the date, the * venue, headings, dishes, subjects, notices, money). Libre Franklin for what * the portal says (states, labels, times, menus, buttons, sentences). Optical * sizes are set, never left to auto. Figures always lining. Black only. * Phone first; the computer's sizes from 960px. * ========================================================================= */ /* ---------- Fonts: self-hosted woff2 only --------------------------------- * Libre Franklin and the Newsreader italic are the site's own, declared in * fonts.css (the one swap file), which every page loads. The one face the * portal adds, Newsreader roman at 300-400 (OFL, fonts/newsreader-OFL.txt), * is declared here, so only the portal, which alone loads this file, sets * anything in it and no page of the public site changes face. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("../fonts/newsreader-roman-300-400-latin.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: 300 400; font-display: swap; src: url("../fonts/newsreader-roman-300-400-latin-ext.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; } :root { --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; } body.bpc-field-portal { font: 400 16px/1.55 var(--sans); } /* ---------- Display: the italic, with restraint ---------------------------- */ .ty-names { font: italic 300 46px/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.016em; } .ty-greet { font: italic 300 26px/1.1 var(--serif); font-variation-settings: "opsz" 28; letter-spacing: -0.008em; } .ty-title { font: italic 300 34px/1.05 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; } .ty-course { font: italic 300 26px/1.1 var(--serif); font-variation-settings: "opsz" 28; letter-spacing: -0.006em; } /* ---------- Theirs, at reading size: the roman ----------------------------- */ .ty-date { font: 400 17px/1.2 var(--serif); font-variation-settings: "opsz" 16; letter-spacing: 0.012em; } .ty-venue { font: 400 15.5px/1.4 var(--serif); font-variation-settings: "opsz" 14; letter-spacing: 0.004em; } .ty-h2 { font: 400 21px/1.2 var(--serif); font-variation-settings: "opsz" 22; letter-spacing: -0.004em; } .ty-tile { font: 400 18px/1.15 var(--serif); font-variation-settings: "opsz" 18; letter-spacing: -0.003em; } .ty-row { font: 400 18px/1.25 var(--serif); font-variation-settings: "opsz" 18; letter-spacing: -0.003em; } .ty-notice { font: 400 16.5px/1.35 var(--serif); font-variation-settings: "opsz" 16; letter-spacing: 0; } .ty-fig { font: 300 52px/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; } .ty-amt { font: 400 16px/1.3 var(--serif); font-variation-settings: "opsz" 16; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; } /* ---------- What the portal says: Libre Franklin --------------------------- */ .ty-body { font: 400 16px/1.55 var(--sans); letter-spacing: 0.002em; } .ty-value { font: 400 15px/1.3 var(--sans); letter-spacing: 0.002em; } .ty-label { font: 500 13px/1.3 var(--sans); letter-spacing: 0.01em; } .ty-state { font: 500 12.5px/1.3 var(--sans); letter-spacing: 0.01em; } .ty-meta { font: 400 12.5px/1.2 var(--sans); letter-spacing: 0.01em; } .ty-togo { font: 500 12px/1 var(--sans); letter-spacing: 0.04em; } .ty-step { font: 400 11px/1.2 var(--sans); letter-spacing: 0.015em; } .ty-group { font: 500 13px/1.2 var(--sans); letter-spacing: 0.01em; } .ty-link { font: 500 13.5px/1 var(--sans); letter-spacing: 0.005em; } /* Buttons: sentence case, no letter-spacing, never spaced capitals (Ollie, 22 Oct evening). */ .ty-btn { font: 600 15px/1 var(--sans); letter-spacing: 0; text-transform: none; } /* The shell: the bar's words (phone), the menu's words (computer), the back step, the Beta tag. */ .ty-bar { font: 500 11px/1 var(--sans); letter-spacing: 0.02em; } .ty-nav { font: 500 15px/1 var(--sans); letter-spacing: 0.01em; } .ty-back { font: 500 14px/1 var(--sans); letter-spacing: 0.005em; } .ty-tag { font: 500 11px/1 var(--sans); letter-spacing: 0.01em; } .ty-sub { font: 400 15px/1 var(--sans); letter-spacing: 0.005em; } .ty-chip { font: 400 14px/1 var(--sans); } .ty-field { font: 400 16px/1.4 var(--sans); } @media (min-width: 960px) { .ty-names { font-size: 64px; } .ty-greet { font-size: 46px; line-height: 1.04; font-variation-settings: "opsz" 48; letter-spacing: -0.012em; } .ty-title { font-size: 44px; line-height: 1.04; font-variation-settings: "opsz" 48; letter-spacing: -0.012em; } .ty-course { font-size: 30px; font-variation-settings: "opsz" 32; } .ty-date { font-size: 21px; font-variation-settings: "opsz" 20; } .ty-venue { font-size: 18px; font-variation-settings: "opsz" 18; } .ty-h2 { font-size: 23px; font-variation-settings: "opsz" 24; } .ty-tile { font-size: 22px; font-variation-settings: "opsz" 22; } .ty-row { font-size: 19px; font-variation-settings: "opsz" 20; } .ty-notice { font-size: 17px; font-variation-settings: "opsz" 18; } .ty-fig { font-size: 64px; } .ty-amt { font-size: 17px; font-variation-settings: "opsz" 18; } .ty-body { font-size: 17px; } .ty-value { font-size: 16px; } .ty-state { font-size: 14px; } .ty-meta { font-size: 13px; } .ty-togo { font-size: 13px; } .ty-step { font-size: 12px; } .ty-btn { font-size: 15px; } .ty-back { font-size: 14px; } } /* The current word in the bar and the menu is bolder (a variable font, so nothing reflows). */ .ty-bar.is-here, .ty-nav.is-here, [aria-current] > .ty-bar, [aria-current] > .ty-nav { font-weight: 650; } .ty-step.is-now, .ty-sub.is-now { font-weight: 600; } /* Figures: always lining. Proportional in sentences and states; tabular where amounts stack. */ .tnum { font-variant-numeric: lining-nums tabular-nums; }