/* ========================================================================== messe-display — design tokens Every value here is read verbatim from the Figma node JSON (file jo1Z6nHQBGxsEbKcCdJZXc, frame "Home" 18:10, 1440x4690). Do not eyeball values from a render — pull the node and use its numbers. ========================================================================== */ :root { /* ---- Colour ------------------------------------------------------- */ --md-purple: #342155; /* brand: logo, active nav, countdown block */ --md-red: #D10202; /* sale badges */ --md-black: #000000; --md-ink: #1A1A1A; /* nav links, 2px strokes */ --md-white: #FFFFFF; --md-grey: #959595; /* struck-through old price */ --md-grey-2: #848484; /* footer links */ --md-grey-3: #787878; --md-line: #E8E6E1; /* 1px hairlines */ --md-bg-soft: #EDEDED; /* newsletter input */ /* ---- Type --------------------------------------------------------- */ --md-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --md-font-brand: 'Outfit', var(--md-font); /* wordmark only */ --md-font-ui: 'Geist', var(--md-font); /* language selector */ /* ---- Radius ------------------------------------------------------- */ --md-r-4: 4px; --md-r-10: 10px; /* hero button */ --md-r-20: 20px; --md-r-24: 24px; /* ---- Layout ------------------------------------------------------- */ --md-design-width: 1440px; /* the frame width every number derives from */ --md-gutter: 15px; /* section padding: 1440 - 30 = 1410 content */ --md-gutter-header: 80px; /* Header pad=20/80/20/80 */ --md-gutter-footer: 100px; /* Footer pad=61/100/0/100 */ --md-container: 1410px; /* 1440 - (2 x 15) */ /* ---- Breakpoints (kept as one set across every page) --------------- @media (max-width: 759px) mobile @media (min-width: 760px) tablet and up @media (max-width: 1099px) below desktop @media (min-width: 1100px) desktop ------------------------------------------------------------------- */ } /* ========================================================================== Type scale — each rule is one TEXT style found in the frame. Format: fontFamily weight/size, lineHeightPx, letterSpacing, fill. ========================================================================== */ /* Outfit 700/32 lh=40.3 ls=0 #342155 — "messe - display" */ .md-wordmark { font-family: var(--md-font-brand); font-weight: 700; font-size: 32px; line-height: 40.3px; letter-spacing: 0; color: var(--md-purple); } /* Inter 400/14 lh=16.9 ls=0 #1A1A1A — nav links */ .md-nav-link { font-family: var(--md-font); font-weight: 400; font-size: 14px; line-height: 16.9px; letter-spacing: 0; color: var(--md-ink); } /* Inter 600/14 lh=16.9 ls=0 #342155 — active nav link */ .md-nav-link.is-active { font-weight: 600; color: var(--md-purple); } /* Geist 400/14 lh=18.2 ls=0 #1A1A1A — "English" */ .md-lang { font-family: var(--md-font-ui); font-weight: 400; font-size: 14px; line-height: 18.2px; color: var(--md-ink); } /* Inter 700/72 lh=75.6 ls=0 #FFFFFF — hero headline */ .md-h1 { font-family: var(--md-font); font-weight: 700; font-size: 72px; line-height: 75.6px; letter-spacing: 0; color: var(--md-white); } /* Inter 400/18 lh=28.8 ls=0 #FFFFFF — hero body */ .md-hero-body { font-family: var(--md-font); font-weight: 400; font-size: 18px; line-height: 28.8px; color: var(--md-white); } /* Inter 400/48 lh=60 ls=3.6 #000000 — promo headline */ .md-h2 { font-family: var(--md-font); font-weight: 400; font-size: 48px; line-height: 60px; letter-spacing: 3.6px; color: var(--md-black); } /* Inter 700/25 lh=30 ls=1.2 #000000 — section title */ .md-h3 { font-family: var(--md-font); font-weight: 700; font-size: 25px; line-height: 30px; letter-spacing: 1.2px; color: var(--md-black); } /* Inter 400/18 lh=18 ls=1.35 #000000 — eyebrow above a promo headline */ .md-eyebrow { font-family: var(--md-font); font-weight: 400; font-size: 18px; line-height: 18px; letter-spacing: 1.35px; color: var(--md-black); } /* Inter 600/18 lh=18 ls=0.9 #000000 — footer column heading */ .md-footer-head { font-family: var(--md-font); font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.9px; color: var(--md-black); } /* Inter 400/15 lh=22 ls=0.75 #848484 — footer link */ .md-footer-link { font-family: var(--md-font); font-weight: 400; font-size: 15px; line-height: 22px; letter-spacing: 0.75px; color: var(--md-grey-2); text-decoration: none; } /* Inter 400/12 lh=12 ls=0.75 #D10202 UPPERCASE — sale badge */ .md-badge { font-family: var(--md-font); font-weight: 400; font-size: 12px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--md-red); } /* Inter 400/15 lh=20 ls=0.38 #000000 — product title */ .md-product-title { font-family: var(--md-font); font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: 0.38px; color: var(--md-black); } /* Inter 700/15 lh=15 ls=1.13 #000000 — current price */ .md-price { font-family: var(--md-font); font-weight: 700; font-size: 15px; line-height: 15px; letter-spacing: 1.13px; color: var(--md-black); } /* Inter 400/15 lh=15 ls=1.13 #959595 — previous price */ .md-price-old { font-family: var(--md-font); font-weight: 400; font-size: 15px; line-height: 15px; letter-spacing: 1.13px; color: var(--md-grey); } /* Inter 700/14 lh=23.8 ls=1.05 #000000 UPPERCASE — text button (dark on light) */ .md-btn-text { font-family: var(--md-font); font-weight: 700; font-size: 14px; line-height: 23.8px; letter-spacing: 1.05px; text-transform: uppercase; color: var(--md-black); } /* Inter 700/14 lh=24 ls=1.05 #FFFFFF UPPERCASE — text button (light on dark) */ .md-btn-text-inverse { font-family: var(--md-font); font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: 1.05px; text-transform: uppercase; color: var(--md-white); } /* Inter 400/15 lh=24 ls=0.75 #000000 — "See All" */ .md-see-all { font-family: var(--md-font); font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: 0.75px; color: var(--md-black); text-decoration: none; } /* Inter 700/20 lh=20 ls=0.75 #FFFFFF — countdown digits */ .md-count-num { font-family: var(--md-font); font-weight: 700; font-size: 20px; line-height: 20px; letter-spacing: 0.75px; color: var(--md-white); } /* Inter 400/12 lh=15.6 ls=0.75 #FFFFFF, textCase TITLE — countdown label */ .md-count-label { font-family: var(--md-font); font-weight: 400; font-size: 12px; line-height: 15.6px; letter-spacing: 0.75px; color: var(--md-white); text-transform: capitalize; } /* ========================================================================== Additional families used by the inner pages ========================================================================== */ :root { --md-font-banner: 'Roboto', var(--md-font); /* page banner + size nav */ --md-font-display: 'Gabarito', var(--md-font); /* Services accordion */ --md-font-body: 'Archivo', var(--md-font); /* Services body copy */ --md-gold: #C5A059; /* Services accordion rules */ --md-ink-2: #454545; /* Services body copy */ --md-ink-3: #4A4A4A; /* About body copy */ --md-line-2: #DDDDDD; /* shop sidebar panel borders */ --md-line-3: #D6D6D6; /* product tab list rule */ --md-fill-2: #EFEFEF; /* filter chrome / sidebar heading */ --md-fill-3: #EEEEEE; /* inactive pagination */ } /* Outfit 700/72 lh=79.2 #FFFFFF — About hero */ .md-h1-about { font-family: var(--md-font-brand); font-weight: 700; font-size: 72px; line-height: 79.2px; color: var(--md-white); } /* Outfit 700/48 lh=60.5 #1A1A1A — About section heading */ .md-h2-about { font-family: var(--md-font-brand); font-weight: 700; font-size: 48px; line-height: 60.5px; color: var(--md-ink); } /* Outfit 700/40 lh=48 #1A1A1A — About intro statement */ .md-h2-intro { font-family: var(--md-font-brand); font-weight: 700; font-size: 40px; line-height: 48px; color: var(--md-ink); } /* Outfit 700/28 lh=36.4 #1A1A1A — mission / vision */ .md-h3-about { font-family: var(--md-font-brand); font-weight: 700; font-size: 28px; line-height: 36.4px; color: var(--md-ink); } /* Outfit 700/24 lh=30.2 #342155 — presence card title */ .md-h4-about { font-family: var(--md-font-brand); font-weight: 700; font-size: 24px; line-height: 30.2px; color: var(--md-purple); } /* Geist 600/13 lh=16.9 #342155, SMALL_CAPS_FORCED — About eyebrow */ .md-eyebrow-about { font-family: var(--md-font-ui); font-weight: 600; font-size: 13px; line-height: 16.9px; color: var(--md-purple); text-transform: uppercase; letter-spacing: .06em; } /* Geist 400/18 lh=28.8 #4A4A4A — About body */ .md-body-about { font-family: var(--md-font-ui); font-weight: 400; font-size: 18px; line-height: 28.8px; color: var(--md-ink-3); } /* Geist 400/16 lh=25.6 #4A4A4A — presence card body */ .md-body-about-sm { font-family: var(--md-font-ui); font-weight: 400; font-size: 16px; line-height: 25.6px; color: var(--md-ink-3); } /* Outfit 700/64 lh=64 #FFFFFF — About stat number */ .md-stat-num { font-family: var(--md-font-brand); font-weight: 700; font-size: 64px; line-height: 64px; color: var(--md-white); } /* Geist 400/16 lh=20.8 #FFFFFF UPPER — About stat label */ .md-stat-label { font-family: var(--md-font-ui); font-weight: 400; font-size: 16px; line-height: 20.8px; color: var(--md-white); text-transform: uppercase; } /* Geist 400/40 lh=56 #FFFFFF — goal statement */ .md-quote { font-family: var(--md-font-ui); font-weight: 400; font-size: 40px; line-height: 56px; color: var(--md-white); } /* Roboto 500/18 lh=23 #FFFFFF — banner eyebrow */ .md-banner-eyebrow { font-family: var(--md-font-banner); font-weight: 500; font-size: 18px; line-height: 23px; color: var(--md-white); } /* Roboto 500/30 lh=33 ls=1.5 #FFFFFF — banner title */ .md-banner-title { font-family: var(--md-font-banner); font-weight: 500; font-size: 30px; line-height: 33px; letter-spacing: 1.5px; color: var(--md-white); } /* Roboto 500/16 lh=20 ls=0.4 #FFFFFF — banner copy */ .md-banner-copy { font-family: var(--md-font-banner); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: .4px; color: var(--md-white); } /* Roboto 400/16 lh=20 ls=0.4 #000000 — size-nav tab */ .md-tab { font-family: var(--md-font-banner); font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: .4px; color: var(--md-black); } /* Gabarito 700/28 lh=33.6 #1A1A1A UPPER — Services accordion title. NOTE: the first item in the Figma file is Inter 700/28 lh=33.9 while the other three are Gabarito 700/28 lh=33.6. That is a design slip on one node, not two styles — the majority (Gabarito) is used for all four. */ .md-acc-title { font-family: var(--md-font-display); font-weight: 700; font-size: 28px; line-height: 33.6px; color: var(--md-ink); text-transform: uppercase; } /* Archivo 400/18 lh=28.8 #454545 — Services body */ .md-acc-body { font-family: var(--md-font-body); font-weight: 400; font-size: 18px; line-height: 28.8px; color: var(--md-ink-2); } /* Gabarito 700/48 lh=57.6 #FFFFFF — facts number */ .md-fact-num { font-family: var(--md-font-display); font-weight: 700; font-size: 48px; line-height: 57.6px; color: var(--md-white); } /* Archivo 400/14 lh=15.2 #FFFFFF UPPER — facts label */ .md-fact-label { font-family: var(--md-font-body); font-weight: 400; font-size: 14px; line-height: 15.2px; color: var(--md-white); text-transform: uppercase; } /* Roboto 400/24 lh=30 ls=1.2 — shop sidebar panel heading */ .md-facet-title { font-family: var(--md-font-banner); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: 1.2px; color: var(--md-black); } /* Roboto 400/12 lh=15 ls=0.4 — "0 selected" / "Reset" */ .md-facet-meta { font-family: var(--md-font-banner); font-weight: 400; font-size: 12px; line-height: 15px; letter-spacing: .4px; color: var(--md-black); } /* Globe glyph for the compact language toggle on mobile (data URI: the CSP-safe way to mask a shape without an extra request). */ :root { --md-globe: url("data:image/svg+xml;utf8,"); }