/* ========================================================================== Maureen Cunningham Travel Services — Colors & Type -------------------------------------------------------------------------- Source of truth for every brand-bound design in this project. Import this file once at the top of any HTML and you'll get the full palette, type scale, and semantic aliases as CSS custom properties. ========================================================================== */ /* Self-hosted brand fonts — supplied by the client. */ /* JetBrains Mono — normal weights */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/JetBrainsMono-Thin.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/JetBrainsMono-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/JetBrainsMono-Light.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype'); } /* JetBrains Mono — italic weights */ @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/JetBrainsMono-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/JetBrainsMono-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype'); } :root { /* ---- Core palette --------------------------------------------------- */ --mc-midnight-plum: #2B1E2F; /* primary dark — backgrounds, headers */ --mc-brushed-gold: #C6A768; /* primary accent — logo, rules, icons */ --mc-warm-ivory: #F6F3EE; /* primary light — page backgrounds */ --mc-muted-taupe: #C9C1BB; /* secondary neutral — dividers, soft fills */ --mc-soft-black: #1A1A1A; /* deepest text — body copy on light */ /* ---- Tonal extensions (oklch-derived, harmonious) ------------------- */ --mc-plum-900: #1B121E; /* deeper plum — pressed, shadows */ --mc-plum-700: #2B1E2F; /* = midnight plum */ --mc-plum-500: #4A3650; /* hover on plum surfaces */ --mc-plum-300: #7A6580; /* muted plum text on light */ --mc-gold-700: #A4884B; /* darker gold — pressed link, focus */ --mc-gold-500: #C6A768; /* = brushed gold */ --mc-gold-300: #D9C193; /* gold tint — hover halo, highlights */ --mc-gold-100: #EFE4CB; /* gold wash — subtle fills */ --mc-ivory-50: #FBF9F5; /* lightest ivory — cards on ivory */ --mc-ivory-100: #F6F3EE; /* = warm ivory */ --mc-ivory-200: #ECE6DC; /* ivory step — dividers */ --mc-taupe-200: #E2DCD6; /* lighter taupe — soft fills */ --mc-taupe-400: #C9C1BB; /* = muted taupe */ --mc-taupe-600: #8C857F; /* taupe text — captions, meta */ /* ---- Semantic aliases (use these in components) --------------------- */ --bg: var(--mc-warm-ivory); --bg-elevated: var(--mc-ivory-50); --bg-inverse: var(--mc-midnight-plum); --bg-inverse-elev: var(--mc-plum-500); --fg: var(--mc-soft-black); --fg-muted: var(--mc-taupe-600); --fg-on-dark: var(--mc-warm-ivory); --fg-on-dark-muted: var(--mc-taupe-400); --accent: var(--mc-brushed-gold); --accent-strong: var(--mc-gold-700); --accent-soft: var(--mc-gold-100); --border: var(--mc-taupe-400); --border-soft: var(--mc-ivory-200); --border-gold: var(--mc-brushed-gold); /* ---- Typography ----------------------------------------------------- */ --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Menlo', 'Courier New', monospace; /* Modular scale (1.25, major third) — display-first */ --fs-12: 0.75rem; /* 12 — micro labels, eyebrow caps */ --fs-13: 0.8125rem; /* 13 — tight UI labels */ --fs-14: 0.875rem; /* 14 — small body, captions */ --fs-16: 1rem; /* 16 — body */ --fs-18: 1.125rem; /* 18 — lead paragraph */ --fs-20: 1.25rem; /* 20 — small heading */ --fs-24: 1.5rem; /* 24 — h4 */ --fs-32: 2rem; /* 32 — h3 */ --fs-44: 2.75rem; /* 44 — h2 */ --fs-60: 3.75rem; /* 60 — h1 */ --fs-84: 5.25rem; /* 84 — display */ /* Letter spacing — wide tracking is core to the brand */ --ls-tight: -0.01em; --ls-normal: 0; /* @kind font */ --ls-wide: 0.08em; /* subhead caps */ --ls-wider: 0.18em; /* eyebrow caps "TRAVEL SERVICES"*/ --ls-widest: 0.28em; /* footer slogan */ --lh-tight: 1.1; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-normal: 1.55; /* @kind font */ --lh-loose: 1.75; /* @kind font */ /* ---- Spacing (4-pt base) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---- Radius — restrained, mostly hard edges or full pills ---------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-card: 2px; --radius-pill: 999px; /* ---- Elevation — soft, low-spread, warm-tinted --------------------- */ --shadow-xs: 0 1px 2px rgba(43, 30, 47, 0.06); --shadow-sm: 0 2px 6px rgba(43, 30, 47, 0.08); --shadow-md: 0 8px 24px rgba(43, 30, 47, 0.10); --shadow-lg: 0 24px 56px rgba(43, 30, 47, 0.16); --shadow-gold: 0 6px 20px rgba(198, 167, 104, 0.28); /* ---- Motion --------------------------------------------------------- */ --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-elegant: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 260ms; /* @kind other */ --dur-slow: 480ms; /* @kind other */ } /* =================== Semantic element styles ============================ Apply these by adding the matching class. Avoids forcing a global reset on raw

etc. so this file plays nicely inside other UIs. ====================================================================== */ .mc-display, .mc-h1, .mc-h2, .mc-h3, .mc-h4 { font-family: var(--font-display); color: var(--fg); font-weight: 500; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; } .mc-display { font-size: var(--fs-84); font-weight: 400; } .mc-h1 { font-size: var(--fs-60); } .mc-h2 { font-size: var(--fs-44); } .mc-h3 { font-size: var(--fs-32); } .mc-h4 { font-size: var(--fs-24); line-height: var(--lh-snug); } .mc-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-12); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent); } .mc-subhead { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-14); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg); } .mc-lead { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg); } .mc-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg); } .mc-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-muted); } .mc-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); } .mc-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-32); line-height: var(--lh-snug); color: var(--fg); } /* Decorative divider — thin gold rule with optional center diamond */ .mc-rule { border: 0; height: 1px; background: var(--accent); width: 64px; } .mc-rule--diamond { position: relative; background: transparent; display: flex; align-items: center; justify-content: center; width: 120px; height: 12px; } .mc-rule--diamond::before, .mc-rule--diamond::after { content: ""; flex: 1; height: 1px; background: var(--accent); } .mc-rule--diamond::before { margin-right: 8px; } .mc-rule--diamond::after { margin-left: 8px; }