/* Theme base styles */ :root { /* ------------------------------------------------------- Global Colors ------------------------------------------------------- */ --color-primary: #2a2622; --color-secondary: #fbf8f3; /* Mast brand palette (Figma: Web > Color > Mast Color Palette) */ --mast-cream: #F5F3EF; --mast-washed-black: #2A2622; --mast-clay: #B35335; --mast-washed-black-75: #57504E; --mast-coral: #FF8373; --mast-white: #FFFFFF; --mast-light-clay: #EFE2D9; --mast-grey-brown: #7F7572; --mast-washed-black-30: #BBB7B3; --mast-washed-black-15: #E4E4E4; --mast-big-sky: #D0DFE1; --mast-wild-rose: #EFDBDF; --mast-soft-sky: #DBE4E5; --mast-dusty-rose: #F0ECED; /* ------------------------------------------------------- Global Fonts ------------------------------------------------------- */ --font-primary: 'Pangea', 'Pangea', sans-serif; --font-secondary: 'degular-mono', 'Inter', sans-serif; /* ------------------------------------------------------- Page layout (Theme settings > Page layout) ------------------------------------------------------- */ /* Widest the page gets; the content width (--layout-max-width in _tokens.css) is this less the side margins */ --page-max-width: 1440px; /* Fixed-width page: the whole page wrapper stops at the page width (_containers-dnd.css); otherwise it runs full width */ --page-wrapper-max-width: var(--page-max-width); /* Section margins: how far sections run past the page margin. 0 keeps backgrounds inside the margins; the gutter runs them to the page edge (_containers-dnd.css) */ --section-bleed-x: 0px; /* Corners of blocks that reach the page margins (background sections, the pinned map story / video scroll stages): the media radius when they stop at the margins, square when they run to the page edge */ --inset-radius: var(--media-radius); /* Space above a background section: one section gap when they are inset panels, so stacked panels don't touch; none when they run to the page edge (_containers-dnd.css) */ --inset-section-gap: var(--space-section-y); /* ------------------------------------------------------- Spacing ------------------------------------------------------- */ /* Values come from _tokens.css; these aliases keep older CSS working (theme.css and templates/blog.css) */ --spacing-vertical: var(--space-section-y); --max-content-width: var(--layout-max-width); --dnd-section-padding: var(--space-section-y) 0 0; /* ------------------------------------------------------- Buttons ------------------------------------------------------- */ --btn-font-color: #F5F3EF; --btn-text-transform: none; --btn-bg: #2a2622; --btn-border-color: #2a2622; --btn-border-width: 1px; --btn-border-style: none; --btn-border-radius: var(--button-radius); --btn-padding-top: 16px; --btn-padding-right: 20px; --btn-padding-bottom: 16px; --btn-padding-left: 20px; /* Button hover */ --btn-hover-color: #F5F3EF; --btn-hover-bg: #B35335; --btn-hover-border-color: #1a334e; /* Button active: the theme's button colour shifted by +40, at the same opacity as the theme setting */ --btn-active-bg: rgba(82, 78, 74, 1.0); --btn-active-border-color: #524e4a; /* ------------------------------------------------------- Forms ------------------------------------------------------- */ --form-bg: #fbf8f3; --form-padding: padding: 0px; ; --form-border: border: 1px none #fbf8f3; ; --form-corner-tl: 0px; --form-corner-tr: 0px; --form-corner-bl: 0px; --form-corner-br: 0px; /* Form title */ --form-title-bg: #fbf8f3; --form-title-border: border: 1px none #fbf8f3; ; --form-title-padding: 0px 0px 30px 0px; --form-title-corner-tl: 0px; --form-title-corner-tr: 0px; --form-title-corner-bl: 0px; --form-title-corner-br: 0px; /* Form labels & help text */ --form-label-color: #2a2622; --form-help-text-color: #2a2622; /* Form fields */ --form-field-placeholder-color: #2a2622; --form-field-text-color: #2a2622; --form-field-bg: #FFFFFF; --form-field-border-color: #D1D6DC; --form-field-border-width: 2px; --form-field-border-style: solid; --form-field-border-radius: 3px; /* Form submit button */ --form-btn-font-color: #FFFFFF; --form-btn-font-size: 22px; --form-btn-bg: #2a2622; --form-btn-border: border: 1px none #2a2622; ; --form-btn-hover-bg: #1a334e; --form-btn-hover-color: #ffffff; --form-btn-hover-border: border: 1px none #1a334e; ; /* ------------------------------------------------------- Tables ------------------------------------------------------- */ --table-border: border: 1px solid #2a2622; ; --table-header-text: #FFFFFF; --table-header-bg: #2a2622; --table-body-text: #2a2622; --table-body-bg: #FFFFFF; --table-footer-text: #2a2622; --table-footer-bg: #FFFFFF; --table-cell-spacing: padding: 18px; ; /* ------------------------------------------------------- Dropdowns for HubSpot menu modules (css/components/_default-modules.css) Same colours as the Mast header dropdowns; the header and footer themselves are styled by modules/mast_header and mast_footer. ------------------------------------------------------- */ --mega-menu-bg: var(--mast-cream); --mega-menu-text-color: var(--mast-washed-black); --mega-menu-item-hover: var(--mast-light-clay); --header-dropdown-border-color: transparent; --header-dropdown-border-width: 0; --header-dropdown-border-style: solid; /* ------------------------------------------------------- Anchor color variants (used in _typography.css and blog.css) ------------------------------------------------------- */ --anchor-color: #2A2622; --anchor-color-hover: #020000; --anchor-color-active: #524e4a; /* ------------------------------------------------------- Body text color variants (used in blog.css pagination, tags, meta) ------------------------------------------------------- */ --body-color: #57504E; --body-color-hover: #2f2826; --body-color-active: #7f7876; /* ------------------------------------------------------- H2 color variants (used in blog listing, related posts) ------------------------------------------------------- */ --h2-color: #2A2622; --h2-color-hover: #020000; --h2-color-active: #524e4a; } :root { /* Type: Mobile */ --type-indice-size: 12.5px; --type-indice-lh: 1.2; --type-h1-size: 42px; --type-h1-weight: 400; --type-h1-lh: 1.2; --type-h2-size: 35px; --type-h2-weight: 400; --type-h2-lh: 1.2; --type-h3-size: 25px; --type-h3-weight: 400; --type-h3-lh: 1.2; --type-h4-size: 19px; --type-h4-weight: 400; --type-h4-lh: 1.2; --type-h5-size: 16px; --type-h5-weight: 400; --type-h5-lh: 1.2; /* Regular (Web Brand Guidelines 3849:157, 2026-10-26; was Medium) */ --type-h6-size: 16px; --type-h6-weight: 300; --type-h6-lh: 1.2; /* Light on phones and tablets; Regular from 1024px */ --type-body-size: 16px; --type-body-weight: 300; --type-body-lh: 1.4; /* body copy = Pangea Light 16 on phones and tablets (design, 2026-10-07; Figma Mobile style was 15), 17 on desktop (2026-10-26) */ --type-body-medium-size: 15px; --type-body-medium-weight: 500; --type-body-medium-lh: 1.2; --type-caption-size: 12px; --type-caption-weight: 300; --type-caption-lh: 1.2; --type-button-size: 16px; /* Body copy and smaller (design, 2026-10-12; elements/_typography.css): Pangea text at the body size or smaller gets letter-spacing, a line-length cap and the alternate a / g; headings, display text and monospace set --small-text: 0 and get none of them */ --small-text: 1; --small-text-max: calc(var(--type-body-size) + 0.5px); /* largest size that counts as "small" */ --small-text-tracking: 0.025rem; --body-measure: 41.5em; /* ~96 characters of Pangea Light per line (design, 2026-10-12; was 32em / ~74) */ /* Type colours */ --color-heading: var(--mast-washed-black); --color-body: var(--mast-washed-black-75); --color-body-strong: var(--mast-washed-black); --color-caption: var(--mast-grey-brown); --color-indice: var(--mast-washed-black); --color-indice-bullet: var(--mast-coral); /* Buttons (Button Solid/Default) */ --button-padding: 16px 20px; --button-radius: 8px; /* same as media corners (user, 2026-10-05; Figma said 4) */ /* Spacing: Mobile */ --space-gutter-x: 15px; /* page side margins */ --space-section-y: 30px; /* top of each section */ --space-indice-heading: 25px; --space-header-content: 25px; /* section header to the content under it */ --space-heading-body: 30px; --space-text-media: 30px; --space-media-caption: 15px; --space-before-cta: 30px; --grid-gap: 10px; /* between all images/columns */ --text-max-width: 100%; --media-radius: 8px; /* content width: the page width (theme setting, 1440px) less the side margins, so 1380px */ --layout-max-width: calc(var(--page-max-width, 1440px) - 2 * var(--space-gutter-x)); } /* Tablet (Figma 834) */ @media (min-width: 768px) { :root { --type-indice-size: 15px; --type-h1-size: 46px; --type-h1-lh: 1.1; --type-h2-size: 36px; --type-h3-size: 28px; --type-h4-size: 22px; --type-h5-size: 18px; --type-h6-size: 18px; --type-body-size: 16px; --type-body-weight: 300; /* Light, per the 2026-10-07 body copy rule (Figma Tablet style was Regular) */ --type-body-medium-size: 16px; --type-caption-size: 12px; --type-button-size: 17px; --space-gutter-x: 30px; --space-section-y: 40px; --space-indice-heading: 30px; --space-header-content: 30px; --space-heading-body: 25px; --space-text-media: 40px; --space-media-caption: 15px; --text-max-width: 465px; } } /* 1440 */ @media (min-width: 1024px) { :root { --type-h1-size: 55px; --type-h1-lh: 1.2; --type-h2-size: 39px; --type-h2-lh: 1.3; --type-h3-size: 31px; --type-h3-lh: 1.3; --type-h4-size: 25px; --type-h4-lh: 1.3; --type-h5-size: 20px; --type-h5-weight: 400; --type-h5-lh: 1.3; --type-h6-size: 20px; --type-h6-weight: 400; --type-h6-lh: 1.3; /* Figma Desktop/H6 is Regular (text styles 12085:12686, 2026-10-26) */ --type-body-size: 17px; --type-body-weight: 300; --type-body-lh: 1.3; /* Figma Desktop/Light Body Copy 17/1.3 (2026-10-26; was 16) */ --type-body-medium-size: 16px; --type-body-medium-weight: 500; --type-body-medium-lh: 1.3; --type-caption-size: 15px; --type-caption-lh: 1.3; --type-button-size: 17px; /* Figma Button Solid/Default (was 21) */ --space-section-y: 60px; --space-indice-heading: 40px; /* Rules_1440 3850:116 */ --space-header-content: 40px; /* Figma About: every section header to its content */ --space-heading-body: 30px; /* Rules_1440 3850:116 */ --space-text-media: 60px; --space-media-caption: 20px; --space-before-cta: 50px; --text-max-width: 705px; } } /* Nothing above 1440: the page is capped at 1440px (1380px of content), so the 1440 type and spacing hold on wider screens. The Figma 1920 / 2560 text styles are no longer used. */ /* * theme.css * Mast Theme — style rules only. * All custom properties are defined in css/settings/_variables.css */ /* Layout */ .content-wrapper { max-width: var(--max-content-width); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .section-spacing { padding-top: var(--spacing-vertical); padding-bottom: var(--spacing-vertical); } /* Generic */ @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/raw_assets/public/MastDev/theme/Mast_2026/fonts/Pangea-Light-subset.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } /* Light: characters Pangea-Light-subset.woff2 lacks (1073), from the older full file */ @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/Pangea-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+A2-A5, U+A7, U+100-130, U+132-151, U+154-15F, U+162-177, U+179-17C, U+17F-181, U+186-18A, U+18E-191, U+193-194, U+196-1A1, U+1A4-1A5, U+1A9-1AA, U+1AC-1B9, U+1C0-1F5, U+1F8-220, U+226-233, U+237-23E, U+241-254, U+256-257, U+259, U+25B, U+25F-261, U+263-26A, U+26C, U+26F, U+271-272, U+275, U+278, U+27D-27E, U+283-284, U+288-28C, U+28E, U+292, U+294-295, U+298, U+29D, U+2A7, U+2B0-2B3, U+2B7-2B9, U+2BB-2BC, U+2BE-2C1, U+2C8, U+2E1-2E3, U+300-304, U+306-30D, U+30F, U+311-313, U+315, U+31B, U+320, U+323-329, U+32D-332, U+335, U+342, U+35C-35D, U+361, U+37B, U+37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3BB, U+3BD-3CE, U+3FD, U+400-45F, U+462-463, U+472-475, U+490-493, U+496-49D, U+4A0-4A5, U+4AA-4AB, U+4AE-4B3, U+4B6-4BB, U+4C0-4C2, U+4CF-4DF, U+4E2-4F5, U+4F8-4F9, U+500-501, U+510-511, U+51A-51D, U+5C3, U+E3F, U+1D7D, U+1DBB, U+1DBF, U+1DC6-1DC7, U+1E00-1E9B, U+1E9E, U+1EA0-1EF9, U+2010-2012, U+2015, U+2020-2021, U+2023, U+203D, U+2052, U+2070-2071, U+2074-2079, U+207F-2089, U+2090-209C, U+20A1, U+20A6, U+20A9-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+20BF-20C0, U+2113, U+2116-2117, U+2120, U+2126, U+212E, U+2150-215E, U+2183-2184, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2245, U+2259, U+22C5, U+2300, U+25A0-25A1, U+25B2-25B4, U+25B6-25B8, U+25BC-25BE, U+25C0-25C2, U+25C6-25C7, U+25CA-25CB, U+25CF, U+2610-2612, U+262E, U+2713, U+272A, U+27E8-27E9, U+2C63-2C66, U+2C6D-2C70, U+2C72-2C73, U+2E18, U+2E38, U+3003, U+A726-A727, U+A72A-A72B, U+A78B-A78D, U+A798-A799, U+A7AA, U+A7AC-A7AE, U+A7B2-A7B7, U+AB53, U+FB01-FB02, U+1F10D-1F10F, U+1F16D-1F16F; } @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/raw_assets/public/MastDev/theme/Mast_2026/fonts/Pangea-Regular-subset.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Regular: characters Pangea-Regular-subset.woff2 lacks (716), from the older full file */ @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/Pangea-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+A2-A5, U+A7, U+100-130, U+132-151, U+154-15F, U+162-177, U+179-17C, U+17F, U+18F, U+1A0-1A1, U+1AF-1B0, U+1C4-1DC, U+1E2-1E3, U+1E6-1E7, U+1F1-1F3, U+1FA-1FD, U+218-21B, U+232-233, U+237, U+259, U+2BB-2BC, U+2BE-2BF, U+300-304, U+306-30C, U+312, U+31B, U+323, U+326-328, U+32E, U+331, U+37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3BB, U+3BD-3CE, U+400-45F, U+462-463, U+472-475, U+490-493, U+496-49D, U+4A0-4A5, U+4AA-4AB, U+4AE-4B3, U+4B6-4BB, U+4C0-4C2, U+4CF-4DF, U+4E2-4F5, U+4F8-4F9, U+500-501, U+51A-51D, U+E3F, U+1E0C-1E0F, U+1E24-1E25, U+1E28-1E2B, U+1E32-1E33, U+1E36-1E3B, U+1E40-1E49, U+1E58-1E5F, U+1E62-1E63, U+1E6C-1E6F, U+1E80-1E85, U+1E88-1E89, U+1E92-1E96, U+1E9E, U+1EA0-1EF9, U+2010-2012, U+2015, U+2020-2021, U+2023, U+203D, U+2052, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A6, U+20A9-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+20BF-20C0, U+2113, U+2116-2117, U+2120, U+2126, U+212E, U+2150-215E, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2245, U+2259, U+22C5, U+2300, U+25A0-25A1, U+25B2-25B4, U+25B6-25B8, U+25BC-25BE, U+25C0-25C2, U+25C6-25C7, U+25CA-25CB, U+25CF, U+2610-2612, U+262E, U+2713, U+272A, U+27E8-27E9, U+2E18, U+2E38, U+3003, U+FB01-FB02, U+1F10D-1F10F, U+1F16D-1F16F; } @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/raw_assets/public/MastDev/theme/Mast_2026/fonts/Pangea-Medium-subset.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* Medium: characters Pangea-Medium-subset.woff2 lacks (1073), from the older full file */ @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/Pangea-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+A2-A5, U+A7, U+100-130, U+132-151, U+154-15F, U+162-177, U+179-17C, U+17F-181, U+186-18A, U+18E-191, U+193-194, U+196-1A1, U+1A4-1A5, U+1A9-1AA, U+1AC-1B9, U+1C0-1F5, U+1F8-220, U+226-233, U+237-23E, U+241-254, U+256-257, U+259, U+25B, U+25F-261, U+263-26A, U+26C, U+26F, U+271-272, U+275, U+278, U+27D-27E, U+283-284, U+288-28C, U+28E, U+292, U+294-295, U+298, U+29D, U+2A7, U+2B0-2B3, U+2B7-2B9, U+2BB-2BC, U+2BE-2C1, U+2C8, U+2E1-2E3, U+300-304, U+306-30D, U+30F, U+311-313, U+315, U+31B, U+320, U+323-329, U+32D-332, U+335, U+342, U+35C-35D, U+361, U+37B, U+37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3BB, U+3BD-3CE, U+3FD, U+400-45F, U+462-463, U+472-475, U+490-493, U+496-49D, U+4A0-4A5, U+4AA-4AB, U+4AE-4B3, U+4B6-4BB, U+4C0-4C2, U+4CF-4DF, U+4E2-4F5, U+4F8-4F9, U+500-501, U+510-511, U+51A-51D, U+5C3, U+E3F, U+1D7D, U+1DBB, U+1DBF, U+1DC6-1DC7, U+1E00-1E9B, U+1E9E, U+1EA0-1EF9, U+2010-2012, U+2015, U+2020-2021, U+2023, U+203D, U+2052, U+2070-2071, U+2074-2079, U+207F-2089, U+2090-209C, U+20A1, U+20A6, U+20A9-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+20BF-20C0, U+2113, U+2116-2117, U+2120, U+2126, U+212E, U+2150-215E, U+2183-2184, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2245, U+2259, U+22C5, U+2300, U+25A0-25A1, U+25B2-25B4, U+25B6-25B8, U+25BC-25BE, U+25C0-25C2, U+25C6-25C7, U+25CA-25CB, U+25CF, U+2610-2612, U+262E, U+2713, U+272A, U+27E8-27E9, U+2C63-2C66, U+2C6D-2C70, U+2C72-2C73, U+2E18, U+2E38, U+3003, U+A726-A727, U+A72A-A72B, U+A78B-A78D, U+A798-A799, U+A7AA, U+A7AC-A7AE, U+A7B2-A7B7, U+AB53, U+FB01-FB02, U+1F10D-1F10F, U+1F16D-1F16F; } @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/raw_assets/public/MastDev/theme/Mast_2026/fonts/Pangea-Bold-subset.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Bold: characters Pangea-Bold-subset.woff2 lacks (716), from the older full file */ @font-face { font-family: "Pangea"; src: url("https://23185209.fs1.hubspotusercontent-na1.net/hubfs/23185209/fonts/Pangea-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+A2-A5, U+A7, U+100-130, U+132-151, U+154-15F, U+162-177, U+179-17C, U+17F, U+18F, U+1A0-1A1, U+1AF-1B0, U+1C4-1DC, U+1E2-1E3, U+1E6-1E7, U+1F1-1F3, U+1FA-1FD, U+218-21B, U+232-233, U+237, U+259, U+2BB-2BC, U+2BE-2BF, U+300-304, U+306-30C, U+312, U+31B, U+323, U+326-328, U+32E, U+331, U+37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3BB, U+3BD-3CE, U+400-45F, U+462-463, U+472-475, U+490-493, U+496-49D, U+4A0-4A5, U+4AA-4AB, U+4AE-4B3, U+4B6-4BB, U+4C0-4C2, U+4CF-4DF, U+4E2-4F5, U+4F8-4F9, U+500-501, U+51A-51D, U+E3F, U+1E0C-1E0F, U+1E24-1E25, U+1E28-1E2B, U+1E32-1E33, U+1E36-1E3B, U+1E40-1E49, U+1E58-1E5F, U+1E62-1E63, U+1E6C-1E6F, U+1E80-1E85, U+1E88-1E89, U+1E92-1E96, U+1E9E, U+1EA0-1EF9, U+2010-2012, U+2015, U+2020-2021, U+2023, U+203D, U+2052, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A6, U+20A9-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+20BF-20C0, U+2113, U+2116-2117, U+2120, U+2126, U+212E, U+2150-215E, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2245, U+2259, U+22C5, U+2300, U+25A0-25A1, U+25B2-25B4, U+25B6-25B8, U+25BC-25BE, U+25C0-25C2, U+25C6-25C7, U+25CA-25CB, U+25CF, U+2610-2612, U+262E, U+2713, U+272A, U+27E8-27E9, U+2E18, U+2E38, U+3003, U+FB01-FB02, U+1F10D-1F10F, U+1F16D-1F16F; } /* Border-box sizing everywhere: padding and borders count inside an element's width, which the grid and module layouts assume */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects */ /* CSS variables */ /* --column-width-multiplier: one column as a percentage (100 / 12) */ :root { --column-gap: var(--grid-gap, 10px); --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Tablet layout */ @media screen and (min-width: 768px) and (max-width: 1023px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* Desktop layout */ @media screen and (min-width:1024px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* ============================================================= _containers-dnd.css Page margins, section rhythm and column gaps, from the Figma spacing rules (values in settings/_tokens.css). ============================================================= */ /* Page: 1440px max (theme setting Page layout > Page width), so content is at most 1380px with the 30px side margins (15px on phones). Fixed-width page on (the default): the wrapper stops at 1440px too, so the whole page, section backgrounds included, sits centred on wider screens. Off: the wrapper isn't capped and sections run full width; only the content inside them is capped. */ .body-wrapper { margin: 0 auto; max-width: var(--page-wrapper-max-width, none); padding: var(--space-gutter-x); } /* Non-DnD pages (blog): the same 1380px of content */ .content-wrapper { margin: 0 auto; max-width: calc(var(--layout-max-width) + 2 * var(--space-gutter-x)); padding: var(--space-gutter-x); } /* Section rhythm: each section is padded on top only, so the gap between consecutive sections equals one Figma section gap. */ .dnd-section, .content-wrapper--vertical-spacing { padding: var(--dnd-section-padding); } /* Section width (theme setting Page layout > Section margins): - On (the default, like the live site): sections stay inside the page margins, so backgrounds stop at 1380px. --section-bleed-x is 0. - Off: sections run past the margins to the page wrapper's edges (the margin moves inside them), so backgrounds span the 1440px page, or the whole screen when Fixed-width page is off. Either way the content row is centred at 1380px (below). --page-bleed-x is how far full-bleed modules (marquee, video scroll, map story) reach past the content: to the section edge. */ .dnd-section { --page-bleed-x: var(--section-bleed-x, var(--space-gutter-x)); margin-left: calc(-1 * var(--section-bleed-x, var(--space-gutter-x))); margin-right: calc(-1 * var(--section-bleed-x, var(--space-gutter-x))); padding-left: var(--page-bleed-x); padding-right: var(--page-bleed-x); } /* Sections with a background colour or image keep a page margin of padding on every side, so content never touches the coloured edge (with Section margins on, their content is 1320px). With Section margins on they also get the 8px media corners, like the header and footer bars. */ .dnd-section[class*="-background-"] { --page-bleed-x: var(--space-gutter-x); border-radius: var(--inset-radius, 0); padding-bottom: var(--space-section-y); } /* A section's top padding is its gap to the section above, but a background section's padding sits inside its colour. With Section margins on, keep a section gap above it too, so two panels in a row (or content and a panel) don't touch. */ .dnd-section + .dnd-section[class*="-background-"] { margin-top: var(--inset-section-gap, 0); } .body-container-wrapper { padding-bottom: var(--space-section-y); } /* 10px between all columns and images (--grid-gap), with the row capped and centred at the 1380px content width */ .dnd-section > .row-fluid { align-items: start; gap: var(--grid-gap); margin: 0 auto; max-width: var(--layout-max-width); } .dnd-section .dnd-column { display: flex; flex-direction: column; gap: var(--grid-gap); padding: 0; } /* Optional helpers for modules and rich text that follow the Figma "text block + media" rule */ .text-block { max-width: var(--text-max-width); } .text-block + .media, .text-block + img, .space-before-media { margin-top: var(--space-text-media); } .space-before-cta { margin-top: var(--space-before-cta); } /* Elements */ /* ============================================================= _typography.css Element type styles. Sizes, weights, line heights and colours come from the Figma type scale in settings/_tokens.css, which switches values per breakpoint, so no media queries are needed here. ============================================================= */ /* Body overflow-wrap prevents long words from breaking mobile layout. Font size reductions are preferred; this handles extreme cases. */ body { background-color: var(--mast-cream); /* Figma page background */ color: var(--color-body); font-family: var(--font-primary); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } /* Text selection: a light clay tint (#EBD6C6 is not a palette token). The !important makes it win over any other ::selection rule. */ ::selection { background-color: #EBD6C6 !important; color: var(--mast-washed-black); } /* CJK language word-break handling. Safe to remove if content is not translated into these languages. */ html[lang^="ja"] body, html[lang^="zh"] body, html[lang^="ko"] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs inherit body type */ p { margin: 0 0 1.4em; } /* Body copy and smaller (design, 2026-10-12): Pangea text at the body size or smaller gets 0.025rem letter-spacing, at most ~96 characters per line and the alternate g (ss01) and a (ss02) from the Pangea subsets in generic/_fonts.css (tokens in settings/_tokens.css). Headings, display text and monospace set --small-text: 0 (inherited by everything inside them) and get none of the three. - Spacing and line length also test the size, in the values: (--small-text-max - 1em) is positive only at body size or smaller. - The alternates can't: in font properties em is the parent's size, so larger text is listed under "Display text" below instead. Set on every element, as letter-spacing inherits as a fixed length; :where() has no specificity, so any rule that sets its own spacing, width or features still wins. */ :where(body *) { font-feature-settings: "ss01" var(--small-text), "ss02" var(--small-text); letter-spacing: clamp(0px, (var(--small-text-max) - 1em) * 1000, var(--small-text-tracking) * var(--small-text)); } :where(p, ul:not([class]) > li, ol:not([class]) > li) { max-width: max(var(--body-measure), (1em - var(--small-text-max)) * 10000, (1 - var(--small-text)) * 100000px); } /* Display text: Pangea set larger than body copy keeps the original a / g (design: not on headings). Measured on the QA page, 1440 wide; add new module styles larger than body copy here. */ :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, blockquote, .button, .hs-button, .hsfc-Button, .card-stack__title, .img-card__cta, .img-card__layout-overlay .img-card__text p, .mast-contact-info:not(.mast-contact-info__layout-cards) .info__name, .mast-chart__callout, .mast-cta__text, .mast-footer__address, .mast-footer__button, .mast-footer__phone, .mast-footer__text, .mast-forms__tab-text, .mast-hero__link, .mast-hero__subheader, .mast-hero__toc, .mast-news__list-text, .mast-quote:not(.mast-quote--split_left, .mast-quote--split_right) .mast-quote__attribution, .mast-quote__text, .mast-quote-tabs__tab-attribution, .mast-quote-tabs__tab-quote, .mast-swiper__panel-title, .mast-swiper__timeline-caption, .mast-tabs__tab-content-header, .mast-video__tags, .mast-video__title, .mast-video-scroll__heading, .mast-video-scroll__text, .stat-card-grid__title) { --small-text: 0; } /* Rich text centred in the editor stays centred once capped (specific enough to beat the p margin above; module rules still win) */ p:is([style*="text-align: center"], [style*="text-align:center"]) { margin-inline: auto; } :where(code, kbd, pre, samp) { --small-text: 0; /* monospace: not Pangea body copy (elements/_typography.css) */ } /* Body copy medium (Figma "Body Copy Medium") */ .body-medium { color: var(--color-body-strong); font-size: var(--type-body-medium-size); font-weight: var(--type-body-medium-weight); line-height: var(--type-body-medium-lh); } /* Anchors */ a { color: var(--anchor-color); cursor: pointer; font-family: var(--font-primary); text-decoration: underline; text-underline-offset: 0.15em; } a:hover, a:focus { color: var(--anchor-color-hover); } a:active { color: var(--anchor-color-active); } /* Headings */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--color-heading); font-family: var(--font-primary); font-style: normal; letter-spacing: 0; margin: 0 0 var(--space-heading-body); text-transform: none; } h1, .h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); } h2, .h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); } h3, .h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); } h4, .h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-lh); } h5, .h5 { font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-lh); } h6, .h6 { font-size: var(--type-h6-size); font-weight: var(--type-h6-weight); line-height: var(--type-h6-lh); } /* Indice: the small mono eyebrow above a heading (Figma "Indice Text") */ .indice-text { color: var(--color-indice); --small-text: 0; /* monospace: not Pangea body copy (elements/_typography.css) */ font-family: var(--font-secondary); font-size: var(--type-indice-size); font-weight: 400; line-height: var(--type-indice-lh); margin: 0 0 var(--space-indice-heading); text-transform: uppercase; } /* Optional coral square before the indice, as in the Figma spacing rules */ .indice-text--bullet { align-items: center; display: flex; gap: 10px; } .indice-text--bullet::before { background-color: var(--color-indice-bullet); border-radius: 2px; content: ""; flex-shrink: 0; height: 9px; width: 9px; } /* Caption (Figma "Caption Text"); sits under media */ .caption-text { color: var(--color-caption); font-family: var(--font-primary); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh); margin-top: var(--space-media-caption); } /* Lists */ ul, ol { margin: 0 0 1.4em; } ul ul, ol ul, ul ol, ol ol { margin: 0; } ul.no-list { list-style: none; margin: 0; padding-left: 0; } /* Contact lines for rich text (Figma 12085:17582, "Our nurseries"):