/* ============================================================ Molly Maid — Colors & Type Tokens Sourced from the 2023 Style Guide (MLY-StyleGuide-WrapUpdate-0426.pdf) plus mollymaid.com live brand usage. ============================================================ */ /* ---------- Webfonts ---------- The brand specifies Gotham (Light / Book / Medium / Bold). Gotham is a paid foundry typeface, so we substitute Montserrat from Google Fonts — it is the closest geometric, humanist-influenced sans-serif freely available. Replace with licensed Gotham when on production materials. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Bodoni+Moda:wght@700;800&display=swap'); :root { /* ---------- Brand colors (from style guide) ---------- */ --mly-navy: #071d49; /* Pantone 2768 C — Primary brand color */ --mly-pink: #fc85b6; /* Pantone 211 U — Ambassador/light pink */ /* Lotus icon gradient (page 2.3) */ --mly-lotus-1: #ecb3cb; /* PMS 203 C — lightest petal */ --mly-lotus-2: #e782a9; /* PMS 204 C */ --mly-lotus-3: #e56db1; /* PMS 218 C */ --mly-lotus-4: #ea60a7; /* PMS 225 U — darkest petal */ /* ---------- Extended / working palette ---------- The "pink raspberry" uniform polo and the website's vivid action color read deeper than the Ambassador pink — derived from photography & live site to round out the system. */ --mly-raspberry: #e22f7c; /* Polo + primary CTA pink */ --mly-raspberry-deep: #b91d5e; /* Hover/press */ --mly-blush: #fce4ee; /* Tint backgrounds */ --mly-blush-soft: #fff5fa; /* Card hover, banner washes */ --mly-navy-deep: #050f2b; /* Pressed navy */ --mly-navy-tint: #1a3268; /* Hover navy / quoted blocks */ /* ---------- Neutrals ---------- */ --mly-white: #ffffff; --mly-ink: #0f1535; /* Body text (slightly softer than pure navy) */ --mly-ink-2: #3a4264; /* Secondary text */ --mly-ink-3: #6b7390; /* Tertiary / captions */ --mly-line: #e3e6ef; /* Default borders */ --mly-line-2: #c8cee0; /* Stronger dividers */ --mly-bg: #ffffff; --mly-bg-soft: #f6f7fb; /* Page wash */ --mly-bg-soft-2: #eef0f7; /* ---------- Semantic ---------- */ --mly-fg: var(--mly-ink); --mly-fg-muted: var(--mly-ink-2); --mly-fg-subtle: var(--mly-ink-3); --mly-fg-inverse: var(--mly-white); --mly-accent: var(--mly-raspberry); /* CTAs, links */ --mly-accent-hover: var(--mly-raspberry-deep); --mly-on-accent: var(--mly-white); --mly-surface: var(--mly-white); --mly-surface-sunken: var(--mly-bg-soft); --mly-surface-dark: var(--mly-navy); --mly-success: #1f8a5b; --mly-warning: #c97b00; --mly-error: #c0341d; --mly-info: var(--mly-navy); /* ---------- Typography ---------- */ --mly-font-sans: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif; --mly-font-display: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif; /* Wordmark is set in a Modern serif (Bodoni / Didot family) per the official Molly Maid logo PDF — distinct from the Gotham/Montserrat body face. Used ONLY for the "MOLLY MAID" lock-up, not for UI copy. */ --mly-font-logo: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif; /* Weight scale matches the four Gotham cuts in the guide. */ --mly-fw-light: 300; /* Gotham Light */ --mly-fw-book: 400; /* Gotham Book */ --mly-fw-medium: 500; /* Gotham Medium */ --mly-fw-bold: 700; /* Gotham Bold */ --mly-fw-black: 800; /* Used for display-large only */ /* Type scale — informed by the site's hero & section treatments */ --mly-fs-display: clamp(40px, 5.2vw, 64px); --mly-fs-h1: clamp(32px, 3.6vw, 44px); --mly-fs-h2: clamp(26px, 2.6vw, 34px); --mly-fs-h3: 22px; --mly-fs-h4: 18px; --mly-fs-body-lg: 18px; --mly-fs-body: 16px; --mly-fs-body-sm: 14px; --mly-fs-caption: 12px; --mly-fs-legal: 11px; /* Style guide minimum: 6pt for print, ~11px web */ --mly-lh-tight: 1.1; --mly-lh-display: 1.05; --mly-lh-heading: 1.2; --mly-lh-body: 1.55; --mly-lh-loose: 1.7; --mly-ls-tight: -0.02em; --mly-ls-display: -0.015em; --mly-ls-body: 0; --mly-ls-eyebrow: 0.14em; /* All-caps section labels */ /* ---------- Radii ---------- */ --mly-radius-xs: 4px; --mly-radius-sm: 8px; --mly-radius-md: 12px; --mly-radius-lg: 18px; --mly-radius-xl: 28px; --mly-radius-pill: 999px; /* ---------- Spacing ---------- */ --mly-space-0: 0; --mly-space-1: 4px; --mly-space-2: 8px; --mly-space-3: 12px; --mly-space-4: 16px; --mly-space-5: 24px; --mly-space-6: 32px; --mly-space-7: 48px; --mly-space-8: 64px; --mly-space-9: 96px; --mly-space-10: 128px; /* ---------- Elevation ---------- */ --mly-shadow-sm: 0 1px 2px rgba(7, 29, 73, 0.06), 0 1px 1px rgba(7, 29, 73, 0.04); --mly-shadow-md: 0 6px 16px rgba(7, 29, 73, 0.08), 0 2px 4px rgba(7, 29, 73, 0.05); --mly-shadow-lg: 0 18px 40px rgba(7, 29, 73, 0.14), 0 6px 12px rgba(7, 29, 73, 0.06); --mly-shadow-focus: 0 0 0 3px rgba(226, 47, 124, 0.35); --mly-shadow-inset: inset 0 0 0 1px rgba(7, 29, 73, 0.08); /* ---------- Borders ---------- */ --mly-border: 1px solid var(--mly-line); --mly-border-strong: 1px solid var(--mly-line-2); --mly-border-navy: 2px solid var(--mly-navy); --mly-border-pink: 2px solid var(--mly-raspberry); /* ---------- Motion ---------- */ --mly-ease: cubic-bezier(.2,.7,.2,1); --mly-ease-out: cubic-bezier(.16,.84,.32,1); --mly-dur-fast: 120ms; --mly-dur: 200ms; --mly-dur-slow: 360ms; } /* ============================================================ Semantic element styles — drop colors_and_type.css onto a page and headings/body get reasonable defaults out of the box. ============================================================ */ html, body { font-family: var(--mly-font-sans); font-size: var(--mly-fs-body); line-height: var(--mly-lh-body); color: var(--mly-fg); background: var(--mly-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .mly-h1 { font-family: var(--mly-font-display); font-size: var(--mly-fs-h1); font-weight: var(--mly-fw-bold); line-height: var(--mly-lh-heading); letter-spacing: var(--mly-ls-tight); color: var(--mly-navy); margin: 0; text-wrap: balance; } h2, .mly-h2 { font-family: var(--mly-font-display); font-size: var(--mly-fs-h2); font-weight: var(--mly-fw-bold); line-height: var(--mly-lh-heading); letter-spacing: var(--mly-ls-tight); color: var(--mly-navy); margin: 0; text-wrap: balance; } h3, .mly-h3 { font-size: var(--mly-fs-h3); font-weight: var(--mly-fw-bold); line-height: var(--mly-lh-heading); color: var(--mly-navy); margin: 0; } h4, .mly-h4 { font-size: var(--mly-fs-h4); font-weight: var(--mly-fw-medium); line-height: var(--mly-lh-heading); color: var(--mly-navy); margin: 0; } p, .mly-p { font-size: var(--mly-fs-body); line-height: var(--mly-lh-body); color: var(--mly-ink); margin: 0; text-wrap: pretty; } .mly-display { font-size: var(--mly-fs-display); font-weight: var(--mly-fw-bold); line-height: var(--mly-lh-display); letter-spacing: var(--mly-ls-display); color: var(--mly-navy); } .mly-eyebrow { font-size: var(--mly-fs-caption); font-weight: var(--mly-fw-bold); letter-spacing: var(--mly-ls-eyebrow); text-transform: uppercase; color: var(--mly-raspberry); } .mly-lede { font-size: var(--mly-fs-body-lg); line-height: var(--mly-lh-body); color: var(--mly-ink-2); } .mly-caption { font-size: var(--mly-fs-caption); color: var(--mly-ink-3); } a, .mly-link { color: var(--mly-raspberry); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--mly-dur) var(--mly-ease); } a:hover { color: var(--mly-raspberry-deep); } ::selection { background: var(--mly-blush); color: var(--mly-navy); }