/* --------------------------------------------------------------------------- POPPINS, SELF-HOSTED --------------------------------------------------------------------------- Was loaded from the Google Fonts CDN, which is a render-blocking request to a third party on every page: a DNS lookup, a TLS handshake and a stylesheet before any text can paint, all before the font files themselves start. Served from our own origin it is one hop on a connection the browser already has. Five weights, latin subset, woff2 only. 38KB for the set. Filenames carry a content hash so they can be cached forever and still change when the file does - see the cache rule for /assets/fonts/poppins- in vercel.json. font-display:swap so text is readable in the fallback while the face loads, rather than invisible. --------------------------------------------------------------------------- */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300.78bc3aa7.woff2') format('woff2'); /* latin subset only - this page has no other script */ 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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.7d93459d.woff2') format('woff2'); /* latin subset only - this page has no other script */ 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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.cd36de20.woff2') format('woff2'); /* latin subset only - this page has no other script */ 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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.f4e80d9d.woff2') format('woff2'); /* latin subset only - this page has no other script */ 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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.9338e65f.woff2') format('woff2'); /* latin subset only - this page has no other script */ 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; } /* --------------------------------------------------------------------------- BUTLER, METRIC-MATCHED TO THE CORMORANT GARAMOND IT REPLACED --------------------------------------------------------------------------- Every heading size, margin and line-height on this site was tuned while Cormorant Garamond was standing in for Butler. The two faces are built to different proportions, so dropping Butler in at the same font-size made the headings render larger and sit higher in their line boxes. Measured at 100px: Butler Cormorant cap height 70px 63px Butler 11% larger x-height 46px 39px ascent 74px 92px Butler sits higher in the line box descent 27px 29px The three descriptors below make Butler present Cormorant's metrics, so the existing clamp() sizes and spacing keep working exactly as they were drawn. Verified in-browser: cap height, ascent, descent and line-box height now match Cormorant to the pixel at every size. Why these numbers: size-adjust 90% 63/70 - scales Butler to Cormorant's cap height. Anchored on CAP height because the headings are title case, and caps are what the eye reads as size. ascent-override 92.4% / 0.90. The overrides are applied BEFORE descent-override size-adjust scales them, so each is divided by it. Without that they come out 10% short. line-gap-override 0% Cormorant has no line gap; Butler has 0.2em, which would otherwise reintroduce the vertical drift. Butler keeps its own slightly larger x-height. That is the typeface's design, and squashing it to match Cormorant would distort the face rather than fit it. To change the heading scale site-wide, change size-adjust and nothing else. size-adjust is unsupported on Safari 16 and older, where Butler simply renders at its natural size - larger, as it does today, never broken. --------------------------------------------------------------------------- */ @font-face { font-family: 'Butler'; font-style: normal; font-weight: normal; font-display: swap; /* No local() - a differently-cut "Butler" installed on a visitor's machine would not share these metrics, and the adjustments below would be wrong. */ src: url('../fonts/Butler_Light.woff') format('woff'); size-adjust: 90%; ascent-override: 102.67%; descent-override: 31.89%; line-gap-override: 0%; } :root { --font-heading: "Butler", serif; /*--font-heading: 'Cormorant Garamond',serif; */ /* ---- Verve brand palette (Brand & Style Guide 3.0, March 2023, p11) ---- These six are the whole palette. Do not introduce new colours; derive tints from these instead. */ --terracotta: #995433; /* headings and accents */ --terracotta-logo: #B46B4D; /* the wordmark only — p4 specifies a lighter terracotta */ --dusk-rose: #AD8D80; /* sparingly: small elements and the nav bar (p15) */ --linen: #EBDFD7; /* background */ --brand-eggshell: #F4F2F1; /* background */ --dark-taupe: #332B24; /* dark sections only (p15) */ --charcoal: #655F59; /* body copy */ /* ---- Role tokens, mapped onto the palette above --------------------- */ --cream: var(--brand-eggshell); --cream-deep: #EDE9E7; --beige: var(--linen); --eggshell: var(--brand-eggshell); --blush: var(--linen); --blush-deep: #E1D2C8; --sand: #D9C6BC; --terra: var(--terracotta); --terra-deep: #7C4429; --navy: var(--dark-taupe); --navy-soft: rgba(101, 95, 89, 0.95); --olive: var(--dusk-rose); --olive-deep: #7F6357; --rose: var(--dusk-rose); --taupe: var(--dusk-rose); --line: rgba(51, 43, 36, 0.14); /* Header, matching the main site's nav: linen ground, wordmark terracotta, dusk-rose button — the one use of dusk rose as a background the guide sanctions (p15, "a narrow navigation bar on the website"). */ --nav-bg: var(--linen); --nav-logo: var(--terracotta-logo); --nav-btn: var(--dusk-rose); --nav-btn-hover: #8E6A5B; --shadow: 0 22px 54px -28px rgba(51, 43, 36, 0.4); } .nav .logo, footer .brand { background-image: url(/assets/img/verve.18c387af.svg); color: transparent !important; background-size: 70%; background-position: center 16px; background-repeat: no-repeat; } footer .brand { cursor: default; } .nav .logo:hover { color: transparent !important; } .chat-launcher { text-decoration: none; }