/* hushmallow typography — tokens, faces and utility classes. Three self-hosted families (SIL Open Font License; the texts sit beside the files in assets/fonts/OFL-*.txt). Nothing is fetched from a font service. The "HM " prefix keeps a locally installed copy from ever standing in for ours. --ff-voice HM Nunito Sans Mallows, subtitles, thoughts, body copy --ff-ui HM Manrope controls, settings, labels, numbers --ff-story HM Fraunces cinematic titles + discoveries — at most one element per screen, never on canvas Sizes come from TYPE in src/ui/type.js (the block below is generated from it; tests/brand.test.mjs checks they agree). Fluid sizes run from 375 to 430 CSS px wide. --type-scale (1 | 1.12 | 1.25, set on through setTextScale()) grows voice + UI text; story text grows half as much. Floors: 13px for reading text, 12px for decorative badges, 16px inputs. */ @font-face { font-family: "HM Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../../assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../../assets/fonts/nunito-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: "HM Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../../assets/fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../../assets/fonts/nunito-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+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "HM Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("../../assets/fonts/manrope-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: "HM Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../../assets/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../../assets/fonts/manrope-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+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "HM Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../assets/fonts/fraunces-latin-standard-normal.woff2") format("woff2-variations"), url("../../assets/fonts/fraunces-latin-standard-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: "HM Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../assets/fonts/fraunces-latin-ext-standard-normal.woff2") format("woff2-variations"), url("../../assets/fonts/fraunces-latin-ext-standard-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched local fallbacks: while the files load (font-display: swap), text is laid out in Arial / Georgia stretched to our fonts' metrics, so the swap moves lines by 1–3% instead of reflowing the screen. */ @font-face { font-family: "HM Nunito Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"); size-adjust: 102%; ascent-override: 99%; descent-override: 34.6%; line-gap-override: 0%; } @font-face { font-family: "HM Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"); size-adjust: 106%; ascent-override: 100.6%; descent-override: 28.3%; line-gap-override: 0%; } @font-face { font-family: "HM Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"); size-adjust: 109%; ascent-override: 89.5%; descent-override: 23.4%; line-gap-override: 0%; } :root { --ff-voice: "HM Nunito Sans", "HM Nunito Sans Fallback", ui-rounded, system-ui, sans-serif; --ff-ui: "HM Manrope", "HM Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-story: "HM Fraunces", "HM Fraunces Fallback", Georgia, "Times New Roman", serif; --type-scale: 1; --type-scale-story: calc(1 + (var(--type-scale) - 1) * 0.5); /* legibility over moving scenes (subtitles, titles over bright realms) */ --type-shadow: 0 1px 12px rgba(5, 3, 20, 0.8), 0 0 2px rgba(5, 3, 20, 0.55); --type-shadow-soft: 0 2px 18px rgba(10, 6, 30, 0.5); /* --- generated from TYPE (src/ui/type.js) --- */ --type-cinematic-size: calc(clamp(28px, 10.909vw - 10.909px, 36px) * var(--type-scale-story)); --type-cinematic-weight: 560; --type-cinematic-lh: 1.08; --type-cinematic-ls: -0.015em; --type-cinematic: var(--type-cinematic-weight) var(--type-cinematic-size)/var(--type-cinematic-lh) var(--ff-story); --type-world-size: calc(clamp(24px, 9.091vw - 9.091px, 30px) * var(--type-scale-story)); --type-world-weight: 540; --type-world-lh: 1.12; --type-world-ls: -0.01em; --type-world: var(--type-world-weight) var(--type-world-size)/var(--type-world-lh) var(--ff-story); --type-discovery-size: calc(clamp(22px, 7.273vw - 3.273px, 28px) * var(--type-scale-story)); --type-discovery-weight: 500; --type-discovery-lh: 1.18; --type-discovery-ls: -0.005em; --type-discovery: var(--type-discovery-weight) var(--type-discovery-size)/var(--type-discovery-lh) var(--ff-story); --type-reward-size: calc(clamp(24px, 7.273vw - 1.273px, 30px) * var(--type-scale-story)); --type-reward-weight: 600; --type-reward-lh: 1.12; --type-reward-ls: -0.01em; --type-reward: var(--type-reward-weight) var(--type-reward-size)/var(--type-reward-lh) var(--ff-story); --type-dialogue-size: calc(clamp(19px, 3.636vw + 6.364px, 22px) * var(--type-scale)); --type-dialogue-weight: 650; --type-dialogue-lh: 1.32; --type-dialogue-ls: 0em; --type-dialogue: var(--type-dialogue-weight) var(--type-dialogue-size)/var(--type-dialogue-lh) var(--ff-voice); --type-subtitle-size: calc(clamp(19px, 2.727vw + 9.273px, 21px) * var(--type-scale)); --type-subtitle-weight: 600; --type-subtitle-lh: 1.36; --type-subtitle-ls: 0.004em; --type-subtitle: var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-lh) var(--ff-voice); --type-thought-size: calc(clamp(17px, 3.636vw + 4.364px, 20px) * var(--type-scale)); --type-thought-weight: 700; --type-thought-lh: 1.25; --type-thought-ls: 0em; --type-thought: var(--type-thought-weight) var(--type-thought-size)/var(--type-thought-lh) var(--ff-voice); --type-quote-size: calc(19px * var(--type-scale)); --type-quote-weight: 600; --type-quote-lh: 1.45; --type-quote-ls: 0em; --type-quote: var(--type-quote-weight) var(--type-quote-size)/var(--type-quote-lh) var(--ff-voice); --type-body-size: calc(17px * var(--type-scale)); --type-body-weight: 500; --type-body-lh: 1.5; --type-body-ls: 0em; --type-body: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--ff-voice); --type-howto-size: calc(17px * var(--type-scale)); --type-howto-weight: 550; --type-howto-lh: 1.5; --type-howto-ls: 0em; --type-howto: var(--type-howto-weight) var(--type-howto-size)/var(--type-howto-lh) var(--ff-voice); --type-lead-size: calc(17px * var(--type-scale)); --type-lead-weight: 650; --type-lead-lh: 1.5; --type-lead-ls: 0em; --type-lead: var(--type-lead-weight) var(--type-lead-size)/var(--type-lead-lh) var(--ff-voice); --type-entry-size: calc(18px * var(--type-scale)); --type-entry-weight: 500; --type-entry-lh: 1.4; --type-entry-ls: 0em; --type-entry: var(--type-entry-weight) var(--type-entry-size)/var(--type-entry-lh) var(--ff-voice); --type-screen-title-size: calc(28px * var(--type-scale)); --type-screen-title-weight: 700; --type-screen-title-lh: 1.12; --type-screen-title-ls: -0.02em; --type-screen-title: var(--type-screen-title-weight) var(--type-screen-title-size)/var(--type-screen-title-lh) var(--ff-ui); --type-heading-size: calc(20px * var(--type-scale)); --type-heading-weight: 700; --type-heading-lh: 1.2; --type-heading-ls: -0.01em; --type-heading: var(--type-heading-weight) var(--type-heading-size)/var(--type-heading-lh) var(--ff-ui); --type-button-size: calc(16px * var(--type-scale)); --type-button-weight: 700; --type-button-lh: 1.15; --type-button-ls: 0.005em; --type-button: var(--type-button-weight) var(--type-button-size)/var(--type-button-lh) var(--ff-ui); --type-control-size: calc(15px * var(--type-scale)); --type-control-weight: 650; --type-control-lh: 1.2; --type-control-ls: 0em; --type-control: var(--type-control-weight) var(--type-control-size)/var(--type-control-lh) var(--ff-ui); --type-input-size: calc(16px * var(--type-scale)); --type-input-weight: 500; --type-input-lh: 1.3; --type-input-ls: 0em; --type-input: var(--type-input-weight) var(--type-input-size)/var(--type-input-lh) var(--ff-ui); --type-row-size: calc(16px * var(--type-scale)); --type-row-weight: 600; --type-row-lh: 1.3; --type-row-ls: 0em; --type-row: var(--type-row-weight) var(--type-row-size)/var(--type-row-lh) var(--ff-ui); --type-label-size: calc(14px * var(--type-scale)); --type-label-weight: 600; --type-label-lh: 1.35; --type-label-ls: 0em; --type-label: var(--type-label-weight) var(--type-label-size)/var(--type-label-lh) var(--ff-ui); --type-caption-size: calc(13px * var(--type-scale)); --type-caption-weight: 550; --type-caption-lh: 1.4; --type-caption-ls: 0.003em; --type-caption: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--ff-ui); --type-overline-size: calc(13px * var(--type-scale)); --type-overline-weight: 750; --type-overline-lh: 1.25; --type-overline-ls: 0.12em; --type-overline: var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-lh) var(--ff-ui); --type-badge-size: calc(12px * var(--type-scale)); --type-badge-weight: 800; --type-badge-lh: 1; --type-badge-ls: 0.1em; --type-badge: var(--type-badge-weight) var(--type-badge-size)/var(--type-badge-lh) var(--ff-ui); --type-stat-size: calc(28px * var(--type-scale)); --type-stat-weight: 800; --type-stat-lh: 1; --type-stat-ls: -0.02em; --type-stat: var(--type-stat-weight) var(--type-stat-size)/var(--type-stat-lh) var(--ff-ui); /* --- end generated --- */ } /* small phones (320 wide): buttons and screen titles step down one notch */ @media (max-width: 360px) { :root { --type-button-size: calc(15px * var(--type-scale)); --type-screen-title-size: calc(25px * var(--type-scale)); --type-heading-size: calc(19px * var(--type-scale)); } } /* utility classes, one per token. The class is doubled on purpose: a token class on an element must beat component defaults such as `.card h3`. */ .t-cinematic.t-cinematic { font: var(--type-cinematic); letter-spacing: var(--type-cinematic-ls); font-optical-sizing: auto; text-wrap: balance; } .t-world.t-world { font: var(--type-world); letter-spacing: var(--type-world-ls); font-optical-sizing: auto; text-wrap: balance; } .t-discovery.t-discovery { font: var(--type-discovery); letter-spacing: var(--type-discovery-ls); font-optical-sizing: auto; text-wrap: balance; } .t-reward.t-reward { font: var(--type-reward); letter-spacing: var(--type-reward-ls); font-optical-sizing: auto; text-wrap: balance; } .t-dialogue.t-dialogue { font: var(--type-dialogue); letter-spacing: var(--type-dialogue-ls); } .t-subtitle.t-subtitle { font: var(--type-subtitle); letter-spacing: var(--type-subtitle-ls); } .t-thought.t-thought { font: var(--type-thought); letter-spacing: var(--type-thought-ls); } .t-quote.t-quote { font: var(--type-quote); letter-spacing: var(--type-quote-ls); } .t-body.t-body { font: var(--type-body); letter-spacing: var(--type-body-ls); } .t-howto.t-howto { font: var(--type-howto); letter-spacing: var(--type-howto-ls); } .t-lead.t-lead { font: var(--type-lead); letter-spacing: var(--type-lead-ls); } .t-entry.t-entry { font: var(--type-entry); letter-spacing: var(--type-entry-ls); } .t-screen-title.t-screen-title { font: var(--type-screen-title); letter-spacing: var(--type-screen-title-ls); } .t-heading.t-heading { font: var(--type-heading); letter-spacing: var(--type-heading-ls); } .t-button.t-button { font: var(--type-button); letter-spacing: var(--type-button-ls); } .t-control.t-control { font: var(--type-control); letter-spacing: var(--type-control-ls); } .t-input.t-input { font: var(--type-input); letter-spacing: var(--type-input-ls); } .t-row.t-row { font: var(--type-row); letter-spacing: var(--type-row-ls); } .t-label.t-label { font: var(--type-label); letter-spacing: var(--type-label-ls); } .t-caption.t-caption { font: var(--type-caption); letter-spacing: var(--type-caption-ls); } .t-overline.t-overline { font: var(--type-overline); letter-spacing: var(--type-overline-ls); text-transform: uppercase; } .t-badge.t-badge { font: var(--type-badge); letter-spacing: var(--type-badge-ls); text-transform: uppercase; } .t-stat.t-stat { font: var(--type-stat); letter-spacing: var(--type-stat-ls); font-variant-numeric: tabular-nums; } .t-legible.t-legible { text-shadow: var(--type-shadow); } /* The brand, as text: always lowercase, also inside uppercase overlines, badges and speaker labels. */ .brand-name { text-transform: none !important; font-variant-caps: normal !important; letter-spacing: 0.005em; white-space: nowrap; } /* The approved logo artwork (never re-typed). Light lettering on dark grounds gets a soft shadow so it holds over bright realms; the filter never touches the artwork itself. */ .hm-logo { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .hm-logo-light { filter: drop-shadow(0 2px 14px rgba(10, 6, 30, 0.45)); }